Branding - Wallet SDK

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.

index.ts

import { Client } from '@openfort/ecosystem-js/client'
class EcosystemWallet extends Client {
    constructor({ clientId, redirectUri, logoutRedirectUri }: { clientId: string, redirectUri: string, logoutRedirectUri: string }) {
        super({
            publishableKey: clientId,
            redirectUri: redirectUri,
            logoutRedirectUri: logoutRedirectUri,
            ...oidcConfig,
            baseConfig: {
                // The base URL for the wallet
                ecosystemWalletDomain: 'http://wallet.ecosystem.com',
            },
            appearance: {
              icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFwF52RAAAACXBIWXMAAAsTAAALEwEAmpwYAAABpElEQVQ4jZ2Sv0vDUBTFf4f9Cg',
              logo: 'https://www.example.com/logo.png',
              name: 'Ecosystem 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;
            }
        });
    }
  }
export default EcosystemWallet;

You can check all the available components in the Client SDK reference.