forked from gnosischain/documentation
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into fee_recipient
- Loading branch information
Showing
15 changed files
with
303 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
--- | ||
description: Dynamic is a powerful web3 auth developer platform with built-in support for Gnosis Chain. It lets you integrate multiple wallets such as Coinbase Wallet, Metamask, and more into your app or website, handles network switching, multi-wallet linking and more. This guide will show you how to use Gnosis Chain with Dynamic. | ||
keywords: [dynamic, wagmi, tools, front end, development, dapps] | ||
--- | ||
|
||
# Using Dynamic | ||
|
||
[Dynamic](https://www.dynamic.xyz/) is a powerful web3 auth developer platform with built-in support for Gnosis Chain. It lets you integrate multiple wallets such as Coinbase Wallet, Metamask, and more into your app or website, handles network switching, multi-wallet linking and more. | ||
|
||
Dynamic comes with Gnosis Chain built-in. You can play around with a live demo of Dynamic [here](https://demo.dynamic.xyz/) and see a full video walkthrough [here](https://www.dynamic.xyz/product-walkthrough). In this tutorial, we'll go through how to set up Dynamic with Gnosis Chain. | ||
|
||
You can see a CodeSandbox of the example below [here](https://codesandbox.io/s/dynamic-gnosis-chain-demo-vzps4b) (configured to Gnosis Chain). | ||
|
||
## Prerequisites | ||
|
||
Dynamic works with React today. You can go through the standard getting started guide [here](https://docs.dynamic.xyz/docs/getting-started-with-dynamic). | ||
|
||
## Step 1: Create a Dynamic account | ||
|
||
1. [Sign up](https://app.dynamic.xyz) 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) <a href="doc:security" target="_blank"> Configure your site's CORS origins</a> | ||
|
||
## Step 2: Install the Dynamic npm package | ||
|
||
You can install Dynamic's SDK with either `yarn` or `npm`. We currently support React and NextJS. | ||
|
||
```shell | ||
npm install @dynamic-labs/sdk-react | ||
# or yarn add @dynamic-labs/sdk-react | ||
``` | ||
|
||
|
||
|
||
## Step 3: Configure the SDK | ||
|
||
Copy the following snippet into your project and paste in your environmentId: | ||
|
||
```javascript | ||
import { DynamicContextProvider, DynamicWidget} from '@dynamic-labs/sdk-react'; | ||
|
||
const App = () => ( | ||
<DynamicContextProvider | ||
settings={{ | ||
environmentId: 'ID' | ||
}}> | ||
<DynamicWidget /> | ||
</DynamicContextProvider> | ||
); | ||
|
||
export default App; | ||
``` | ||
|
||
|
||
|
||
## Step 4: Turn on Gnosis Chain in your developer dashboard | ||
|
||
Now that we have the basic Dynamic setup, you can go to your developer dashboard, and select `configurations` from the left menu. Next, click on the `EVM` card and toggle `Gnosis` on. Note that you can also chose to toggle the default network, `Ethereum`, off. | ||
|
||
<img width="600" alt="Gnosis_new" src="https://user-images.githubusercontent.com/1596208/228478128-925acb34-1f5d-45a5-bd2a-c6467af265a7.png" /> | ||
|
||
|
||
|
||
## See it in action | ||
|
||
Now that you put things together, you can see a CodeSandbox of the finished product [here](https://codesandbox.io/s/dynamic-gnosis-chain-demo-vzps4b). | ||
|
||
## Next steps | ||
|
||
Now that you set up Dynamic with **Gnosis Chain**, there are many additional things you can explore: | ||
|
||
- **Log in with your wallet, and see data in Dynamic's developer dashboard** - Now that your widget is set up locally, try to log in with a wallet. As soon as you do, head over to the Dynamic developer dashboard and click on user management and analytics. You'll be able to see your user show up! | ||
- **Customize your SDK design** - There are many ways to customize the Dynamic modal to fit your needs (you can explore them in the SDK configuration section), but to start, we suggest setting a light/dark mode and a primary color for the modal, which you can do in the design section of your developer dashboard. | ||
- **Explore how to use the Dynamic SDK** - After your users connect their wallets, you'll want to interact with them for various reasons. You can read more about the SDK in [Dynamic's docs](https://docs.dynamic.xyz). | ||
|
||
For support, you can also join [Dynamic's Slack Community](https://www.dynamic.xyz/slack). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.