Blocto

​

Summary

Dynamic comes with Blocto Wallet built-in across both EVM and Flow. You can play around with a live demo of Dynamic here and see a full video walkthrough here.

In this tutorial, we’ll go through two things:

1. Integating Blocto as an embedded wallet
2. Integrating Blocto as a branded wallet

​

Pre-requisites

​

Create a Dynamic account

1. Sign up to get an environment ID

2. Create an organization and a set up your first project

3. Copy your environmentID from the Dynamic overview page

4. (optional) Configure your site’s CORS origins

​

Install and configure the SDK

​

Install the Dynamic npm package

You can install Dynamic’s SDK with either yarn or npm. We currently support React and NextJS.

npm install @dynamic-labs/sdk-react-core
# or yarn add @dynamic-labs/sdk-react-core

​

Configure the SDK

Copy the following snippet into your project and paste in your environmentId:

import {
  DynamicContextProvider,
  DynamicWidget,
} from "@dynamic-labs/sdk-react-core";

const App = () => (
  <DynamicContextProvider
    settings={{
      environmentId: "<<sandboxEnvironmentId>>",
    }}
  >
    <DynamicWidget />
  </DynamicContextProvider>
);

export default App;

​

Integating Blocto as an embedded wallet

Adding Blocto as an embedded wallet is as simple as going to your Configurations tab in your Dynamic dashboard, and toggling Blocto on.

Once you toggle Blocto on, it will became the default wallet when signing in with email. When a user enters their email on the Dynamic model, Blocto will pop up and help them establish a wallet for their email account.

​

Integating Blocto as a branded wallet

The goal of this tutorial is to have the following UI:

As a reference, you can see a CodeSandbox of the example here

​

Step 1: Sort Blocto as the top wallet

Once we have the basic Dynamic setup, we’ll sort the Blocto wallet to top, define the first 4 wallets to show, and filter the rest of the wallets to only appear behind a search functionality.

import { DynamicContextProvider, DynamicWidget, SortWallets,defaultNumberOfWalletsToShow } from '@dynamic-labs/sdk-react-core';
....
 <DynamicContextProvider
  settings={{
    ...
    walletsFilter: SortWallets(['bloctoevm', 'metamask', 'walletconnect', 'coinbase']);
    defaultNumberOfWalletsToShow: 4;
    ...
    }
  }}
>

​

Step 2: Set Blocto as the recommended wallet for new to web3 users

In addition to setting Blocto as the top wallet, you can also configure it to be the recommended wallet for users that click the Get your first wallet button. To do so, add the following snippet to your settings:

 <DynamicContextProvider
  settings={{
    ...
    newToWeb3WalletChainMap: {
       primary_chain: "evm",
       wallets: {
           evm: "bloctoevm",
       }
    }
    ...
    }
  }}
>