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:
- Integating Blocto as an embedded wallet
- Integrating Blocto as a branded wallet
Pre-requisites
Create a Dynamic account
-
Sign up to get an environment ID
-
Create an organization and a set up your first project
-
Copy your
environmentID
from the Dynamic overview page -
(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.
Configure the SDK
Copy the following snippet into your project and paste in your environmentId:
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.
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:
Was this page helpful?