Migration from Blocknative

TomoEVMKit provides an API interface for projects based on @web3-onboard to migrate with minimum efforts.

Update Initiate

To initiate the onboard in TomoEVMKit, you need to add the await keyword.

// Old
import Onboard from '@web3-onboard/core'
// New
import { Onboard } from "@tomo-inc/tomo-evm-kit";

// Old
onboard = Onboard({
  wallets,
  chains,
  appMetadata,
  …
});

// New
onboard = await Onboard({
  wallets,
  chains,
  clientId: "..", // client id from tomo
  projectId: "..", // project id for wallet connect
  …
});

You can get clientId from the Tomo dashboard and projectId from the Walletconnect dashboard. Done!

Different API logics

Due to the different logic of implementation of TomoEVMKit and Blocknative, we do not support all options in onboardnow, below are lists:

InitOptions

✅ Fully Support, ⚠️ Partial Support, ✖️ Not Support,

export interface InitOptions {
    /**
     * Wallet modules to be initialized and added to wallet selection modal
     */
    wallets: WalletInit[]; //  ✅
    /**
     * The chains that your app works with
     */
    chains: (Chain | ChainWithDecimalId)[]; //  ✅
    /**
     * Additional metadata about your app to be displayed in the Onboard UI
     */
    appMetadata?: AppMetadata; //  ✅
    /**
     * Define custom copy for the 'en' locale or add locales to i18n your app
     */
    i18n?: i18nOptions; // ✖️
    /**
     * Customize the connect modal
     */
    connect?: ConnectModalOptions; // ⚠️ only support `autoConnectLastWallet`
    /**
     * Customize the account center UI
     */
    accountCenter?: AccountCenterOptions; // ✖️
    /**
     * @deprecated apiKey parameter has been deprecated and is no
     * longer used within Web3-Onboard to provide notifications
     */
    apiKey?: string; // ✖️ 
    /**
     * Transaction notification options
     */
    notify?: Partial<NotifyOptions> | Partial<Notify>; // ✖️ 
    /** Gas module */
    gas?: typeof gas; // ✖️
    /** Web3-Onboard module to add Wagmi support
     * see https://www.npmjs.com/package/@web3-onboard/wagmi
     */
    wagmi?: typeof wagmi; // ✖️ 
    /**
     * Object mapping for W3O components with the key being the DOM
     * element to mount the component to, this defines the DOM container
     *  element for svelte to attach the component
     */
    containerElements?: Partial<ContainerElements>; // ✖️ 
    /**
     * @deprecated Transaction Preview support has ended and Transaction Preview
     * is no longer supported as part of Web3-Onboard.
     * Please remove from your onboard config to avoid
     * console errors and un-expected behavior
     */
    transactionPreview?: unknown; // ✖️
    /**
     * Custom or predefined theme for Web3Onboard
     * BuiltInThemes: ['default', 'dark', 'light', 'system']
     * or customize with a ThemingMap object.
     */
    theme?: Theme; //  ✅
    /**
     * Defaults to False - use to reduce load time
     * If set to true the Inter font will not be imported and
     * instead the default 'sans-serif' font will be used
     * To define the font used see `--w3o-font-family` prop within
     * the Theme initialization object or set as css variable
     */
    disableFontDownload?: boolean; // ✖️
    /**
     * Type of unstoppableResolution module
     * A small module that can bee added to allow Unstoppable Domain
     * address resolution similar to that of ens (Ethereum Name Service)
     * ENS resolution will take president if available
     */
    unstoppableResolution?: typeof unstoppableResolution; // ✖️
}

onboard API

declare const OnboardAPI: {
  connectWallet: typeof connectWallet; // ✅
  disconnectWallet: typeof disconnectWallet; // ✅
  setChain: typeof setChain; // ✅
  
  state: {
    // ⚠️ only support state.select('wallet').subscribe for autoconnect
    // The remaining properties will not respond.
    get: () => AppState;
    select: {
      (): Observable<AppState>;
      <T extends keyof AppState>(stateKey: T): Observable<AppState[T]>;
    };
    
    actions: {
      setWalletModules: typeof setWalletModules; // ✖️
      setLocale: typeof setLocale; // ✖️
      updateNotify: typeof updateNotify; // ✖️
      customNotification: typeof customNotification; // ✖️
      updateBalances: typeof updateBalances; // ✖️
      updateAccountCenter: typeof updateAccountCenter; // ✖️
      setPrimaryWallet: typeof setPrimaryWallet; // ✖️
      updateTheme: typeof updateTheme; // ✅
      updateAppMetadata: typeof updateAppMetadata; // ✖️
    };
  };
};

onboard.connectWallet

Currently, if you call connectWallet it only supports no parameter input way and will return a connected status window.

// ⚠️ no input parameters
declare function connectWallet(): Promise<WalletState[]>;

// ✖️
export interface ConnectOptions {
  autoSelect?: {
    label: string;
    disableModals: boolean;
  };
}

// ✖️
export interface ConnectOptionsString {
  autoSelect?: string;
}

connect configuration

We only support the automatical reconnect mode

onboard = Onboard({
    ...
    connect: {
      autoConnectLastWallet: true // need explicitly set to true
    }
})

onboard.state.select("wallets").subscribe((wallets) => { // you can subscribe the connection
  if (wallets.length > 0) {
    console.log("Wallet is connected");
    console.log('provider',wallets[0].provider) // only one provider provided.
  } else {
    console.log("Wallet is disconnected");
  }
});

Unsupported Wallets

Wallets	Support
@web3-onboard/arcana-auth	❌
@web3-onboard/bloom	❌
@web3-onboard/capsule	❌
@web3-onboard/cede-store	❌
@web3-onboard/dcent	❌
@web3-onboard/finoaconnect	❌
@web3-onboard/fortmatic	❌
@web3-onboard/keepkey	❌
@web3-onboard/magic	❌
@web3-onboard/particle-network	❌
@web3-onboard/passport	❌
@web3-onboard/portis	❌
@web3-onboard/taho	❌
@web3-onboard/tallyho	❌
@web3-onboard/transaction-preview	❌
@web3-onboard/trezor	❌
@web3-onboard/venly	❌
@web3-onboard/web3auth	❌