# Branding your global wallet

<div align="center">
  <img alt="ecosystem-rainbow-kit" src="https://www.openfort.io/images/blog/rainbow_kit_ecosystem_cf5574e8a2.png" width="80%" height="80%" />
</div>

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](https://eips.ethereum.org/EIPS/eip-6963) to embedded your branding.
The `appearance` object has the following properties:

* **icon**: a data url schema, compliant with [RFC-2397](https://www.rfc-editor.org/rfc/rfc2397).
* **logo**: a [URI](https://www.rfc-editor.org/rfc/rfc3986) 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.

:::note
Getting the ecosystem id - When creating your wallet UI you need to add the ecosystem ID. It can be found in your dashboard at the settings section.
:::

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

```ts index.ts
// 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;
```