Getting Started with Web SDK
Learn how to get started with Web SDK by installing the necessary packages and using the wagmi connectors to utilize an Embedded Wallet or Native EOA Wallet for authentication.
Setting Up your Dapp
To utilize the SequenceConnect
wrapper for connecting web3 wallets to your application, follow these steps:
Web SDK is built on top of wagmi, so for advanced configurations, sending transactions, calling contracts, etc., please refer to the wagmi documentation.
Install the Web SDK dependencies
Create a Config
Next, a configuration variable for SequenceConnect
will need to be created as waas
(meaning an Embedded Wallet).
First obtain a WaaS Config Key from the Sequence Builder and a project access key, then make sure your project origin is whitelisted in the Builder Embedded Wallet Configuration. If you want to allow WalletConnect you will also need a Wallet Connect ID. To setup Google Login follow the Google Configuration for Embedded Wallet.
In order to customize further, you can view additional configuration parameters.
Setup Provider Component
The configuration we created in step 3 needs to be passed into the providers below in the main.tsx
.
Trigger the Connection Modal
For web3 interactions, wagmi exposes a set of React hooks that make it convenient for common functions like sending transactions.
Install the Web SDK dependencies
Create a Config
Next, a configuration variable for SequenceConnect
will need to be created as waas
(meaning an Embedded Wallet).
First obtain a WaaS Config Key from the Sequence Builder and a project access key, then make sure your project origin is whitelisted in the Builder Embedded Wallet Configuration. If you want to allow WalletConnect you will also need a Wallet Connect ID. To setup Google Login follow the Google Configuration for Embedded Wallet.
In order to customize further, you can view additional configuration parameters.
Setup Provider Component
The configuration we created in step 3 needs to be passed into the providers below in the main.tsx
.
Trigger the Connection Modal
For web3 interactions, wagmi exposes a set of React hooks that make it convenient for common functions like sending transactions.
Create a NextJS Project
We will start by creating a NextJS project with create-next-app:
Install the Web SDK dependencies
Create a Config
Next, a configuration variable for SequenceConnect
will need to be created as waas
(meaning an Embedded Wallet).
First obtain a WaaS Config Key from the Sequence Builder and a project access key, then make sure your project origin is whitelisted in the Builder Embedded Wallet Configuration. If you want to allow WalletConnect you will also need a Wallet Connect ID. To setup Google Login follow the Google Configuration for Embedded Wallet.
In order to customize further, you can view additional configuration parameters.
Setup Provider Component
The configuration we created in step 3 needs to be passed to the SequenceConnect provider.
Create a separate “providers.tsx” file to wrap your app in the Providers component.
Wrap your App in the Providers
Wrap your app in the Providers component.
Trigger the Connection Modal
For web3 interactions, wagmi exposes a set of React hooks that make it convenient for common functions like sending transactions.