-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
426 additions
and
213 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
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,11 @@ | ||
| --- | ||
| title: "Integrating From Scratch" | ||
| sidebar_position: 4 | ||
| title: "Integration Example" | ||
| --- | ||
|
|
||
|
|
||
| In this article, we will go through a development of a simple [Web3Modal](https://docs.walletconnect.com/web3modal/about) example to use Aurora Pass in a dApp. | ||
| In this article, we will go through a development of a simple [Web3Modal](https://docs.walletconnect.com/web3modal/about) example to use Aurora Pass in a DApp. | ||
|
|
||
| ## Create a simple React app | ||
| ### Create a simple React app | ||
|
|
||
| To start, let's create a React application by using `create-react-app`. Of course, you can just use your already existing codebase instead, we're doing this just for the demonstration purposes. | ||
| You will need to run in your terminal: | ||
|
|
@@ -20,93 +19,29 @@ npm start | |
| Your React app will be running now at `http://localhost:3000`, just open that link in you browser to see the UI. | ||
| You can read more about the `create-react-app` [here](https://create-react-app.dev/docs/getting-started/), in the case you want to learn more details. | ||
|
|
||
| ## Add Aurora Promo Widget | ||
| ### Add Aurora Promo Widget | ||
|
|
||
| We have talked about the Promo Widget [before](/aurora-cloud/mobile-wallet/promo-widget), but now it is time to try it in practice. | ||
| We have talked about the Promo Widget [before](/onboard/promo-widget), but now it is time to try it in practice. | ||
| You need to follow the code [here](/onboard/promo-widget) to add the Promo Widget popup to you DApp. | ||
| After this, we can add Web3Modal to the project. | ||
|
|
||
| To add the `promo.js` script to our React app we can use the `useEffect` hook like this: | ||
|
|
||
| ```jsx title="aurora-pass-example/src/App.js" | ||
| ... | ||
| import { useEffect } from "react"; | ||
|
|
||
| let scriptAdded = false; | ||
|
|
||
| function App() { | ||
| useEffect(() => { | ||
| if(!scriptAdded) { | ||
| const script = document.createElement("script"); | ||
| script.src = "https://pass.auroracloud.dev/promo.js"; | ||
| script.async = true; | ||
| document.body.appendChild(script); | ||
| } | ||
| }, []); | ||
|
|
||
| ... | ||
| } | ||
| ``` | ||
|
|
||
| Now, let's add a function `openModal` to display our Promo Widget just after the imports somewhere: | ||
|
|
||
| ```jsx title="aurora-pass-example/src/App.js" | ||
| ... | ||
| const openWeb3Modal = () => { | ||
| alert("Just a placeholder for now. We will add Web3Modal here later.") | ||
| }; | ||
|
|
||
| const openWidget = () => { | ||
| window.openPromo | ||
| ? window.openPromo({ onComplete: openWeb3Modal, config: {hideUpdateAppBlock: true} }) | ||
| : openWeb3Modal() | ||
| } | ||
| ... | ||
| ``` | ||
|
|
||
| Now, we can set the `onClick` attribute of the already existing `App-link` element to use `openWidget` function: | ||
|
|
||
| ```jsx title="aurora-pass-example/src/App.js" | ||
|
|
||
| function App() { | ||
| ... | ||
|
|
||
| return ( | ||
| <div className="App"> | ||
| <header className="App-header"> | ||
| ... | ||
| <a | ||
| className="App-link" | ||
| href="#" | ||
| onClick={openWidget} | ||
| > | ||
| Open Promo | ||
| </a> | ||
| </header> | ||
| </div> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| If you click on `Open Promo` link, you will be able to see the Promo Widget now: | ||
|  | ||
|
|
||
| And then, if you click further on the 'Skip, I have a wallet' button, you will see the placeholder message about Web3Modal: | ||
|  | ||
|
|
||
| Let's add Web3Modal to it now. | ||
|
|
||
| ## Adding Web3Modal | ||
| ### Adding Web3Modal | ||
|
|
||
| We will follow the [Web3Model Wagmi v2 documentation](https://docs.walletconnect.com/web3modal/react/about?platform=wagmi) closely here. | ||
|
|
||
| 1). First, let's add some new packages to the project: | ||
| #### Import libraries and get projectId | ||
|
|
||
| First, let's add some new packages to the project: | ||
|
|
||
| ```bash | ||
| npm install @web3modal/[email protected] wagmi viem @tanstack/react-query | ||
| ``` | ||
|
|
||
| 2). Let's signup now at [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in) to get a WalletConnect `projectId`. You will get some random string like `4aee871f7a80f1ff5c7892226bd3ascd` | ||
| Let's signup now at [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in) to get a WalletConnect `projectId`. You will get some random string like `4aee871f7a80f1ff5c7892226bd3ascd` | ||
|
|
||
| 3). Let's create a file with a Web3Modal component: | ||
| #### Add Web3Modal component | ||
|
|
||
| Now, let's create a file with a Web3Modal component: | ||
|
|
||
| ```jsx title="aurora-pass-example/src/Web3Modal.js" | ||
| import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react' | ||
|
|
@@ -149,23 +84,7 @@ export default function Web3Modal({ children }) { | |
| } | ||
| ``` | ||
|
|
||
| :::note | ||
|
|
||
| Please note that it could be important for Aurora chain to be the first one in the list of `chains` for everything to work properly with AuroraPass and Web3Modal v2: | ||
|
|
||
| ```jsx | ||
| /*You can do this */ | ||
| const chains = [auroraChain, ethereumChain, bscChain]; | ||
|
|
||
| /*But not this*/ | ||
| const chains = [ethereumChain, auroraChain, bscChain]; | ||
| ``` | ||
|
|
||
| To allow the second situation you can use `defaultChain` option while setting up your Web3Modal component. | ||
| You can read more [here](https://docs.walletconnect.com/web3modal/react/options#defaultchain). | ||
| ::: | ||
|
|
||
| 4). Now, we can use the Web3Modal component in our App. First of all notice that we need to wrap into it the part of the App using the `wagmi` hooks. In this case we wrapping it fully into it: | ||
| Now, we can use the Web3Modal component in our App. First of all notice that we need to wrap into it the part of the App using the `wagmi` hooks. In this case we wrapping it fully into it: | ||
|
|
||
| ```jsx title="aurora-pass-example/src/App.js" | ||
|
|
||
|
|
@@ -186,7 +105,9 @@ function App() { | |
|
|
||
| But we haven't displayed the popup yet. How can we do it? | ||
|
|
||
| 5). To open the popup, let's use `useWeb3Modal` hook inside the App component, to be more specific – the `open` function it provides. | ||
| #### Displaying Web3Modal | ||
|
|
||
| To open the wallets popup, let's use `useWeb3Modal` hook inside the App component, to be more specific – the `open` function it provides. | ||
| We also need to edit a bit our old `openWidget` function to accept `onComplete` argument, and pass there the `open` function: | ||
|
|
||
| ```jsx title="aurora-pass-example/src/App.js" | ||
|
|
@@ -230,7 +151,9 @@ If you will go into your App now, you will be able to see the WalletConnect popu | |
|
|
||
| But, it won't contain the AuroraPass yet. Let's add it there. | ||
|
|
||
| 6). To do this, we need to modify the `Web3Modal.js` file a bit and add some options to it: | ||
| ### Add AuroraPass to your wallet list | ||
|
|
||
| To do this, we need to modify the `Web3Modal.js` file a bit and add some options to it: | ||
|
|
||
| ```jsx title="aurora-pass-example/src/Web3Modal.js | ||
| let options = { | ||
|
|
@@ -257,7 +180,9 @@ But we won't see if the connection was successful yet, because we don't have any | |
|
|
||
|  | ||
|
|
||
| 7). Let's fix it by replacing the 'Edit src/App.js and save to reload' label with a simple `Account` component showing us if we have connected to the dApp already. | ||
| ### Displaying the connection status in DApp | ||
|
|
||
| Let's fix it by replacing the 'Edit src/App.js and save to reload' label with a simple `Account` component showing us if we have connected to the DApp already. | ||
| We can do that inside the App component file right away by using `useAccount` wagmi hook: | ||
|
|
||
| ```jsx title="aurora-pass-example/src/App.js | ||
|
|
@@ -295,10 +220,12 @@ Now we're able to see the status of our connection on the main screen: | |
|
|
||
|  | ||
|
|
||
| And the corresponding account after we've connected via the Web3Modal to the dApp: | ||
| And the corresponding account after we've connected via the Web3Modal to the DApp: | ||
|
|
||
|  | ||
|
|
||
| ### Final thoughts | ||
|
|
||
| Congratulations on the completing your first AuroraPass integration! | ||
|
|
||
| If you still have some questions, please contact our team via [Discord](https://discord.com/invite/dEFJBz8HQV) by opening a support ticket there. | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| --- | ||
| sidebar_label: Create your own wallet (AP Pro) | ||
| --- |
Oops, something went wrong.