Skip to content

Branding your Global Wallet

ecosystem-rainbow-kit

When instantiating the Client SDK, you can pass in the appearance object to customize the appearance of the wallet. For wallet discovery, it will use EIP-6963 to embedded your branding. The appearance object has the following properties:

  • icon: a data url schema, compliant with RFC-2397.
  • logo: a URI pointing to an image. The image SHOULD be a square with 96x96px minimum resolution.
  • name: a human-readable local alias of the Wallet Provider to be displayed to the user on the DApp. (e.g. Example Wallet Extension or Awesome Example Wallet)
  • reverseDomainNameSystem: the Wallet MUST supply the rdns property which is intended to be a domain name from the Domain Name System in reverse syntax ordering such as com.example.subdomain. It’s up to the Wallet to determine the domain name they wish to use, but it’s generally expected the identifier will remain the same throughout the development of the Wallet. It’s also worth noting that similar to a user agent string in browsers, there are times where the supplied value could be unknown, invalid, incorrect, or attempt to imitate a different Wallet. Therefore, the DApp SHOULD be able to handle these failure cases with minimal degradation to the functionality of the DApp.

Therefore, when creating your wallet SDK, you can pass in the appearance object to customize the appearance of the wallet.

// Set your ecosystem id. Remember to switch to your live secret key in production.
// See your ecosystem id here: https://dashboard.openfort.io/settings/project/overview
import { AppMetadata, Client } from '@openfort/ecosystem-js/client'
class EcosystemWallet extends Client {
    constructor(appMetadata?: AppMetadata) {
        super({
            // Optional App Info
            appMetadata: appMetadata,
            baseConfig: {
                // URL where the UI wallet is hosted
                ecosystemWalletDomain: 'https://wallet.ecosystem.com',
                windowStrategy: 'iframe', // or 'popup'. Rendering strategy the wallet UI.
            },
            appearance: {
              icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFwF52RAAAACXBIWXMAAAsTAAALEwEAmpwYAAABpElEQVQ4jZ2Sv0vDUBTFf4f9Cg',
              logo: 'https://www.example.com/logo.png',
              name: 'Global Wallet',
              reverseDomainNameSystem: 'com.example.ecosystem.wallet'
            }
        });
 
        // Use a Proxy to allow for new method additions
        return new Proxy(this, {
            get: (target, prop) => {
                if (prop in target) {
                    const value = target[prop as keyof EcosystemWallet];
                    return typeof value === 'function' ? value.bind(target) : value;
                }
                return undefined;
            }
        });
    }
    setPolicy(options?: { policy?: string; }): void {
        return super.setPolicy(options);
    }
  }
 
export default EcosystemWallet;