Craft and customize your wallet

The Fort ecosystem 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 ecosystem wallets.

The default Client SDK expects the following routes to exist in your wallet UI:

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-register-session	wallet_grantPermissions
/sign/loading	Loading screen

React SDK#

When adding the React components to your App, there are two places where the components can be customized. All but one of the theme customizations options are passed through to the Fort Tailwind plugin in your tailwind.config.js file.

In your wallet UI project, after intalling the @openfort/ecosystem-js package to get started with the React SDK. It will be then available from @openfort/ecosystem-js/react.


Session Key Confirmation	Sign Typed Message	Configuration Screen	Confirm Transaction

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

Colors#

The available colors are:

Border colors

active - the color of the border when the input is focused
static - the color of the border when the input is not focused
critical - the color of the border when the input is in an error state

Button colors

These colors affect the background of buttons

btn-primary - the color of the primary button
btn-secondary - the color of the secondary button
btn-auth - the color of the authentication button

Foreground colors

These colors primarily affect the text color of the components

fg-primary - the color of the primary text
fg-secondary - the color of the secondary text
fg-tertiary - the color of the tertiary text
fg-invert - the color of the inverted text
fg-disabled - the color of the disabled text
fg-accent-brand - your brand color
fg-critical - the color of the critical text

Surface colors

These colors affect the background of various components (eg. modal, inputs, etc)

bg-surface-default - the default background color
bg-surface-subtle - a subtle background color
bg-surface-inset - the background color of inset components
bg-surface-critical - the background color of critical components
bg-surface-error - the background color of error components
bg-surface-success - the background color of success components
bg-surface-warning - the background color of warning components

Borders#

The border radius intensity can be configured directly in the Tailwind plugin's theme overrides. The default value is sm which is an 8px border radius.

Illustratiom styles#

This is the one customization option that is not passed through to the Tailwind plugin. The illustration style of various icons used in the components is customized by passing in one of the enum values to your uiConfig when you call createConfig.

Core SDK#

The Core SDK is the package that you will use to receive and send communication with the Client SDK. This package includes all the necessary functionality in order to onboard your users to blockchain with non-custodial wallets.

main.ts

import { Core, MethodType } from "@openfort/ecosystem-js/core";
// Create a new instance of the Core SDK
const core = new Core({
    embeddedWalletConfig: {
        baseConfiguration: {
            publishableKey: "YOUR_OPENFORT_PUBLISHABLE_KEY",
        },
        shieldConfiguration: {
            shieldPublishableKey: 'YOUR_SHIELD_PUBLISHABLE_KEY'
        }
    }
});
// instantiate the event listener
const evhl = core.eventsHandler;
evhl.subscribe(MethodType.ACCOUNTS_REQUEST, (data) => {
    console.log("Event received", data);
})
evhl.listen();

This are the available Method Types that will be sent from the Client SDK and that you can subscribe to:

Method	Type
TRANSACTION_REQUEST	'eth_signTransaction'
TYPED_MESSAGE_REQUEST	'eth_signTypedData_v4'
MESSAGE_REQUEST	'personal_sign'
SESSION_KEY_REQUEST	'wallet_grantPermissions'
ACCOUNTS_REQUEST	'eth_requestAccounts'

You can check all the available components in the Core SDK reference. You can react to receiving this events by subscribing to them and executing the necessary logic in your app, like rendering a confirmation screen or sending the transaction to the blockchain.