Skip to content

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.

ecosystem-architecture

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:

RouteDescription
/sign/personal-signpersonal_sign
/sign/eth-sign-typed-data-v-4eth_signTypedData_v4
/sign/eth-send-transactioneth_signTransaction
/sign/eth-request-accountseth_requestAccounts
/sign/wallet-show-callswallet_showCallsStatus
/sign/wallet-send-callswallet_sendCalls
/sign/wallet-grant-permissionswallet_grantPermissions
/signLoading 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.

DESKTOPMOBILE

Popup

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

DESKTOPMOBILE

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

import { AppMetadata, Client, ThirdPartyAuthProvider } 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;
            }
        });
    }
 
    authenticate(token: string) {
        return super.authenticateWithThirdPartyProvider({ token: token, provider: ThirdPartyAuthProvider.FIREBASE });
    }
 
    // Add new methods here
    setPolicy(options?: { policy?: string; }): void {
        return super.setPolicy(options);
    }
 
}
 
export default EcosystemWallet;

Setting Client SDK

Complete sample setting the windowStrategy in the client SDK.

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.