# 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.

```typescript
// 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 ](https://dashboard.tomo.inc/)and `projectId` from the Walletconnect [dashboard](https://cloud.reown.com/sign-in). \
Done!

## Different API logics

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

### **InitOptions**

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

<pre class="language-typescript"><code class="lang-typescript"><strong>export interface InitOptions {
</strong>    /**
     * Wallet modules to be initialized and added to wallet selection modal
     */
<strong>    wallets: WalletInit[]; //  ✅
</strong>    /**
     * The chains that your app works with
     */
<strong>    chains: (Chain | ChainWithDecimalId)[]; //  ✅
</strong>    /**
     * Additional metadata about your app to be displayed in the Onboard UI
     */
<strong>    appMetadata?: AppMetadata; //  ✅
</strong>    /**
     * Define custom copy for the 'en' locale or add locales to i18n your app
     */
<strong>    i18n?: i18nOptions; // ✖️
</strong>    /**
     * Customize the connect modal
     */
<strong>    connect?: ConnectModalOptions; // ⚠️ only support `autoConnectLastWallet`
</strong>    /**
     * Customize the account center UI
     */
<strong>    accountCenter?: AccountCenterOptions; // ✖️
</strong>    /**
     * @deprecated apiKey parameter has been deprecated and is no
     * longer used within Web3-Onboard to provide notifications
     */
    apiKey?: string; // ✖️ 
    /**
     * Transaction notification options
     */
<strong>    notify?: Partial&#x3C;NotifyOptions> | Partial&#x3C;Notify>; // ✖️ 
</strong>    /** 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
     */
<strong>    containerElements?: Partial&#x3C;ContainerElements>; // ✖️ 
</strong>    /**
     * @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.
     */
<strong>    theme?: Theme; //  ✅
</strong>    /**
     * 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; // ✖️
}
</code></pre>

### onboard API

```typescript
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&#x20;

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

```typescript
// ⚠️ 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 &#x20;

<pre class="language-javascript"><code class="lang-javascript"><strong>onboard = Onboard({
</strong>    ...
    connect: {
      autoConnectLastWallet: true // need explicitly set to true
    }
})

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

## 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*            | ❌       |