Craft and customize your wallet

Customize wallet screens and user flows for your brand.

Openfort cross-app 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 cross-app wallets.

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
/	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

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

DESKTOP	MOBILE

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

index.tsx

import { AppMetadata, Client, ThirdPartyAuthProvider } from "@openfort/ecosystem-js/client";
class EcosystemWallet extends Client {
    constructor(appMetadata?: AppMetadata) {
        super({
            baseConfig: {
                ecosystemWalletDomain: 'https://id.sample.openfort.xyz',
                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.

Themes