# Design and customize your wallet

Openfort **global wallets** come with a default set of screens for authentication, session key confirmation, sign typed message, configuration, and transaction confirmation. These screens are designed to be customizable to fit your brand and user experience. Openfort provides helpers to the most popular frameworks to make it easier to integrate the global wallets.

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

## Wallet Routes

Whenever the users of a wallet make a request, this request is eventually received by the **Wallet UI** which is in charge of directing the user to the correct screen.

The **Wallet UI** expects the following routes to exist in your project:

| Route                               | Description                   |
|-------------------------------------|-------------------------------|
| /sign/personal-sign                 | personal\_sign                 |
| /sign/eth-sign-typed-data-v-4       | eth\_signTypedData\_v4          |
| /sign/eth-send-transaction          | eth\_signTransaction           |
| /sign/eth-request-accounts          | eth\_requestAccounts           |
| /sign/wallet-show-calls             | wallet\_showCallsStatus        |
| /sign/wallet-send-calls             | wallet\_sendCalls              |
| /sign/wallet-grant-permissions      | wallet\_grantPermissions       |
| /sign                                   | Loading screen                |

## Wallet Window Strategy

The `Ecosystem SDK` supports two window modes, `popup` and `iframe`, which can be configured through the prop `windowStrategy` when creating the wallet SDK with `@openfort/ecosystem-js/client`.

### iframe

The wallet is embedded in the page. In mobile no new tab is required to show the wallet action.

| DESKTOP | MOBILE |
|---------|--------|
| <div align="center"><video width="100%" controls muted playsInline><source src="https://www.openfort.io/images/blog/rapidfire_demo_bae171c041.mp4" type="video/mp4" />Your browser does not support the video tag.</video></div> | <div align="center"><video width="100%" controls muted playsInline><source src="https://www.openfort.io/images/blog/rapidfire_ios_iframe_demo_7c8c888966.mp4" type="video/mp4" />Your browser does not support the video tag.</video></div> |

### Popup

The wallet is opened in a new window both in mobile and desktop.

| DESKTOP | MOBILE |
|---------|--------|
| <div align="center"><video width="100%" controls muted playsInline><source src="https://www.openfort.io/images/blog/rapidfire_desktop_popup_demo_ca4c20f2da.mp4" type="video/mp4" />Your browser does not support the video tag.</video></div> | <div align="center"><video width="100%" controls muted playsInline><source src="https://www.openfort.io/images/blog/rapidfire_ios_popup_demo_fb01ebd826.mp4" type="video/mp4" />Your browser does not support the video tag.</video></div> |

Here's how the **windowStrategy** is set in the `Rapidfire ID` sample wallet:

```tsx index.tsx
import { AppMetadata, Client } from "@openfort/ecosystem-js/client";

class EcosystemWallet extends Client {
    constructor(appMetadata?: AppMetadata) {
        super({
            baseConfig: {
                ecosystemWalletDomain: 'https://id.sample.openfort.io',
                windowStrategy: 'iframe',
            },
            appMetadata,
            appearance: {
                icon: 'data:image/...',
                logo: 'https://purple-magnificent-bat-958.mypinata.cloud/ipfs/QmfQrh2BiCzugFauYF9Weu9SFddsVh9qV82uw43cxH8UDV',
                name: 'Rapidfire ID',
                reverseDomainNameSystem: 'com.rapidfire.id'
            }
        });

        // 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;
            }
        });
    }

    // Add new methods here
    setPolicy(options?: { policy?: string; }): void {
        return super.setPolicy(options);
    }

}

export default EcosystemWallet;
```

<HoverCardLayout>
  <HoverCardLink description="Complete sample setting the windowStrategy in the client SDK" href="https://github.com/openfort-xyz/ecosystem-sample/blob/main/wallet-sdk/src/index.ts#L9" title="Setting Client SDK" subtitle="GitHub code reference" icon={Code} color="#8B5CF6" />
</HoverCardLayout>

## Wallet UI Customization

The `Ecosystem SDK` uses ConnectKit themes, and offers the same theming and customization options. You can edit fonts, colors, and other styling via the **theme** and **customTheme** props of `EcosystemProvider`. For more detail on themes, see the [ConnectKit docs](https://docs.family.co/connectkit/customization).