diff --git a/docs/aurora-cloud/chain.md b/docs/aurora-cloud/chain.md
index 95a655ec..2c92008e 100644
--- a/docs/aurora-cloud/chain.md
+++ b/docs/aurora-cloud/chain.md
@@ -1,12 +1,12 @@
---
-title: "Dedicated Blockchains"
+sidebar_label: Launch your chain (Aurora Chain)
sidebar_position: 1
---
-# Aurora Chains
+# Aurora Chain
-Aurora Chains are dedicated EVM-compatible blockchains built on top of the NEAR Protocol. They are your own instance of Aurora – every Aurora Chain is based upon the Aurora smart contract,
+Aurora Chain is a dedicated EVM-compatible blockchain built on top of the NEAR Protocol. It is your own instance of Aurora – every Aurora Chain is based upon the Aurora smart contract,
also called [Aurora Engine](/getting-started/aurora-engine). It provides you with a customized and dedicated blockchain environment.
Benefits include:
@@ -14,7 +14,7 @@ Benefits include:
1. *No need for additional validators:* when your Aurora Chain is deployed, it automatically gets all the Near Blockchain validators, which are above 300.
2. *Configuration*: create whitelists, choose your own custom token, gas mechanics, integrate KYC, and much more.
3. *Complete ecosystem*: the Rainbow Bridge, on-ramps, indexers, oracles, DEXes, etc., Aurora Cloud provides a selection of integrations that can be deployed to your chain in order to speed up development
-4. *Focus on your business*: the tech side of the integration and support are entirely on the [Aurora Labs](https://auroralabs.dev/) team's shoulders.
+4. *Focus on your business*: [Aurora Labs](https://auroralabs.dev/) team is available to support each step of the integration.
5. *Seamless interoperability* with Aurora, Near, and any other Aurora Chains: you can freely move your assets using the Rainbow Bridge and call contracts via cross-contract calls (XCC).
There is no disjointness in between. You can call any smart contract in any other Aurora Chain or NEAR and interact with them freely.
6. *Top-notch TPS*: we can provide you dozens of millions of transactions daily for your ecosystem – 1k+ transactions per second.
@@ -25,7 +25,7 @@ To make Aurora Chain work in the best possible way for your business, we will he
1. *Base token* of your Aurora Chain.
2. *Gas mechanics* within your chain, such as fixed fee or percentage-based fees, gasless transactions, paying for gas with a custom token, etc.
3. *Permission levels*: whitelist usage - who can transact or deploy contracts?
-You can learn about how to operate Aurora Chain Whitelists from your dApp [here](/aurora-cloud/chain#whitelist-management).
+You can learn about how to operate Aurora Chain Whitelists from your DApp [here](/aurora-cloud/chain#whitelist-management).
4. *Private chain*: can be built using a private NEAR shard [Calimero](https://www.calimero.network/).
## How do I create my Aurora Chain?
diff --git a/docs/getting-started/aurora-engine.md b/docs/getting-started/aurora-engine.md
index 7a3047d3..d9ac8e0f 100644
--- a/docs/getting-started/aurora-engine.md
+++ b/docs/getting-started/aurora-engine.md
@@ -12,7 +12,7 @@ Aurora is backed by top VCs such as Pantera Capital, Electric Capital, Dragonfly
Thanks to Aurora’s EVM, Ethereum native applications can seamlessly be ported to NEAR’s L2-like network that is built as a smart contract on NEAR.
Developers may enjoy familiar Ethereum tooling when working with their Solidity smart contracts on Aurora.
-The base fee of Aurora is ETH, which provides a smooth experience for dapps’ users.
+The base fee of Aurora is ETH, which provides a smooth experience for DApps’ users.
Besides the EVM, Aurora developed the Rainbow Bridge which allows users to transfer assets between Ethereum, NEAR, and Aurora.
Several integrations of bridges from/to other networks have been launched as well, and more is coming!
diff --git a/docs/onboard/introduction.md b/docs/onboard/introduction.md
new file mode 100644
index 00000000..0b3631be
--- /dev/null
+++ b/docs/onboard/introduction.md
@@ -0,0 +1,67 @@
+---
+title: "Introduction"
+---
+
+# Aurora Pass
+
+Aurora Pass is a mobile cryptocurrency wallet that makes your interactions with Aurora or any of the Aurora Chains easier than ever, whether transferring your assets or using a DApp.
+It also helps onboard your users, even ones unfamiliar with the Web3 ecosystem.
+
+## Key Features
+
+- Simple and user-friendly interface.
+- 50 free transactions for each user per month.
+- Secure and non-custodial wallet.
+- Send and receive assets on Aurora Mainnet and Aurora Chains.
+- View your portfolio balances and recent transactions.
+- Connect to DApps via WalletConnect v2.
+
+## Integration
+
+Connecting Aurora Pass to a DApp is done like every other EVM wallet implementing a [WalletConnect v2](https://docs.walletconnect.com/).
+See more info on configuring or adding WalletConnect [here](/onboard/wallet-connect).
+
+We propose two options for displaying the wallets for your users: Web3Modal or Rainbow Kit. You can follow the step-by-step integration examples here:
+
+- [Web3Modal Example](/onboard/wallets/web3modal#integrate-web3modal)
+- [RainbowKit Example](/onboard/wallets/rainbowkit#integrate-rainbowkit)
+
+That will help you to understand better how the different components work together. E.g., wallet modals, promo widgets and UI frameworks.
+
+## Promo Widget
+
+Add a [Promo Widget](/onboard/promo-widget) to your DApp to allow new users to install Aurora Pass quickly.
+It will direct a user to download the Aurora Pass application on a mobile phone in the most convenient way.
+
+It is optional to add it to your DApp. Otherwise, you will need to implement some other way to lead users to the installation of the wallet.
+We advise everyone to use it as an onboarding entry point in their DApps.
+
+## Free transactions
+
+Aurora Pass requires a login with an email or Apple/Google auth, which will provide them with free transactions on Aurora Mainnet.
+The basic plan for Aurora Pass users is 50 free transactions per month. This feature is achieved by using the Gasless Management feature of Aurora Chains.
+At the same time, DApps can also pay for their users’ EOA transaction fees by getting their own gasless deal using our Gasless Management product.
+
+If the monthly free transaction limit is reached or the transaction is not sponsored by a DApp, a pack of transactions can be purchased from within the Aurora Pass app.
+Currently, only one transaction pack is available: 500 free transactions for around $4.99 (the price can depend on the country).
+
+## Security
+
+Aurora Pass is a non-custodial crypto wallet, meaning the user will be given a 12-word recovery seed phrase that grants them access to their assets.
+
+Users won’t have to save that seed phrase on signup as it is securely saved on the device but can choose to export it anytime.
+Excluding such details provides better onboarding while also giving users the ownership of their assets in a non-custodial way.
+
+The seed phrase is the only way to recover access to the wallet in case of loss or when installing the wallet on a new device.
+
+Using the wallet requires biometric authentication (e.g., faceID or touchID). In case it is absent, the PIN code for a device will be used.
+The seed phrase is stored using [expo-secure-store](https://docs.expo.dev/versions/latest/sdk/securestore/):
+
+- on Android, values are stored in SharedPreferences, encrypted with Android’s Keystore system;
+- on iOS, values are stored using the keychain services.
+
+## Troubleshooting
+
+If you encounter any issues, please visit our [Troubleshooting Page](/onboard/troubleshooting) to find a solution.
+In case you still have questions, please get in touch with our [Support Team](https://discord.gg/WXfbGsSUbT)
+ on Discord and open a support ticket there.
diff --git a/docs/onboard/own-wallet.md b/docs/onboard/own-wallet.md
new file mode 100644
index 00000000..ffee8248
--- /dev/null
+++ b/docs/onboard/own-wallet.md
@@ -0,0 +1,3 @@
+---
+sidebar_label: Create your own wallet (AP Pro)
+---
\ No newline at end of file
diff --git a/docs/onboard/promo-widget.md b/docs/onboard/promo-widget.md
new file mode 100644
index 00000000..861eb6bf
--- /dev/null
+++ b/docs/onboard/promo-widget.md
@@ -0,0 +1,118 @@
+---
+title: "Promo Widget"
+---
+
+# Promo Widget
+
+If you develop a DApp, you will need a way to get your users to install the Aurora Pass application on their phones. We have created a widget to simplify this step.
+This modal leads a user to download the wallet application for iOS or Android by scanning a QR code:
+
+
+
+Users can always say they already have the wallet installed, and this popup won't be shown for them next time.
+
+## Quick integration guide
+
+1. Load a script from this [link](https://pass.auroracloud.dev/promo.js), and import it to your project.
+2. This adds a function to the `window` object called `openPromo`.
+3. To open the widget, call `window.openPromo` and pass the `onComplete` function as a parameter `window.openPromo({ onComplete: function })`
+4. You can also check if the function is available before calling it `window.openPromo ? window.openPromo({ onComplete: function }) : function()`
+5. Optionally, you can hide the _Update your app_ header by passing the `hideUpdateAppBlock` variable via the `config` argument:
+ `window.openPromo({ onComplete: () => {...}, config: {hideUpdateAppBlock: true}})`
+
+You can also find the same instructions [here](https://pass.auroracloud.dev/).
+A more detailed example of integration is below.
+
+## Detailed integration guide
+
+In the case of building a React app, you can add the `promo.js` script to it by using 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);
+ }
+ }, []);
+
+ ...
+}
+```
+
+:::note
+We assume the project we're working on here is a default `create-react-app` application to simplify things. You can read more about it [here](https://create-react-app.dev/docs/getting-started/).
+:::
+
+Then, 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 one of our UI components to display the modal. We can re-use the already existing `App-link` element to use the `openWidget` function:
+
+```jsx title="aurora-pass-example/src/App.js"
+
+function App() {
+ ...
+
+ return (
+
+ );
+}
+```
+
+If you click on the `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:
+
+
+You can also look at the more extensive [integration example here](/onboard/wallets/web3modal#integrate-web3modal) to learn how to add Web3Modal to your project,
+ particular section describing it is [here](/onboard/wallets/web3modal#add-web3modal).
+
+### What should be called in the `onComplete` function?
+
+The widget calls any function you pass to it. So you could pass anything to it, whether that’s opening Web3Modal or RainbowKit popups or any other function.
+But it works best and is meant to be used with WebModal v3 since the modal is styled similarly.
+
+## Examples of integration
+
+To see the widget in use, visit one of the projects on the list:
+
+- [Aurora+](https://aurora.plus/)
+- [Pipeflare](https://pipeflare.io/flare2-token/spin)
+
+## Troubleshooting
+
+Please, take a look at our [Troubleshooting Page](/onboard/troubleshooting). In case you still have questions, please get in touch with our [Support Team](https://discord.gg/WXfbGsSUbT)
+ on Discord and open a support ticket there.
diff --git a/docs/onboard/troubleshooting.md b/docs/onboard/troubleshooting.md
new file mode 100644
index 00000000..1d4c7e2e
--- /dev/null
+++ b/docs/onboard/troubleshooting.md
@@ -0,0 +1,58 @@
+---
+title: Troubleshooting
+---
+
+### I have sent my tokens to the wrong wallet - can I recover them?
+
+Aurora Pass does not currently support other EVM chains and L2s, except Aurora and Aurora Chains.
+Sometimes, by mistake, users can send assets to their address on those non-supported networks instead.
+
+E.g., suppose you have sent your assets to some of your Ethereum addresses.
+
+ These tokens can be quickly recovered by importing your address into a compatible wallet, e.g., MetaMask, using your private key or a seed phrase.
+After that, you can bridge them back from Aurora to your Ethereum address. Or transfer the tokens to any other address on Aurora, like your AuroraPass address.
+
+If you have transferred them to a CEX address, you can only recover these tokens if that CEX supports Aurora later. Currently, we support Coinbase, KuCoin, and Gate.io CEXes.
+
+### I can't find the token [XYZ] in my wallet – can I add it somehow?
+
+- If you are a developer, please add a PR to [this repository](https://github.com/aurora-is-near/bridge-assets) following [this example](https://github.com/aurora-is-near/bridge-assets/pull/273/files).
+- If you are a user, don't hesitate to get in touch with our [Support Team](https://discord.gg/WXfbGsSUbT) via Discord, and we will help you resolve this issue.
+
+### I have paid for my transaction pack but got no transactions added
+
+Please get in touch with our [Support Team](https://discord.gg/WXfbGsSUbT), and we will help you get your transaction pack.
+
+### I can't see my balances in Aurora Pass
+
+Sometimes, such a situation could happen because of local restrictions in your country of residence. Try using another internet connection or VPN to solve the issue.
+
+### I get the 'Pairing failed: Pairing already exists' error while connecting to a DApp
+
+This error looks like this:
+
+
+This error means that DApp is already using some existing pairing, but the wallet doesn't know it was disconnected, so there is some non-sync state between them.
+
+To fix it, please try to follow the next steps:
+
+1. Try to disconnect all previously connected wallets from that DApp.
+2. Re-connect with your AuroraPass wallet to a DApp.
+
+If the problem persists, please get in touch with our [Support Team](https://discord.gg/WXfbGsSUbT).
+
+### I see symbols like 0xab4... while signing a DApp transaction in Aurora Pass - what do they mean?
+
+If you are a user, don't hesitate to get in touch with either the DApp support team or the [Aurora Support Team](https://discord.gg/WXfbGsSUbT) and ask them to verify the contracts used in that DApp.
+
+If you are a developer, verify your DApp contracts in [Aurora Explorer](https://explorer.aurora.dev/). We're using Blockscout
+ so that you can read more about it [here](https://docs.blockscout.com/for-users/verifying-a-smart-contract).
+Verifying your contracts will ensure that a user sees nicely formatted information - function name and its arguments' names while using the Aurora Pass wallet.
+
+In a non-verified contract, a user will see a non-decoded function name and arguments, which will look incomprehensible and unclear.
+
+We advise you to verify all (or most) of your contracts, which gives your users a better understanding of their interactions with your product via Aurora Pass.
+
+### I have a problem which is not on the list
+
+Please get in touch with our [Support Team](https://discord.gg/WXfbGsSUbT) on Discord and open a ticket describing your problem.
diff --git a/docs/onboard/wallet-connect.md b/docs/onboard/wallet-connect.md
new file mode 100644
index 00000000..9ca3cbee
--- /dev/null
+++ b/docs/onboard/wallet-connect.md
@@ -0,0 +1,30 @@
+---
+title: "Integrate Wallet Connect"
+---
+
+# Wallet Connect Integration
+
+Aurora Pass is meant to be used with [WalletConnect v2](https://docs.walletconnect.com/). It is an industry standard to create an encrypted connection between a DApp and EVM wallet,
+initialized by scanning a QR code or via a [deep link](https://docs.walletconnect.com/web3wallet/mobileLinking) for mobile apps and browsers.
+
+## Integration Guide
+
+To integrate WalletConnect into your DApp, follow these steps:
+
+1. If you don't have Wallet Connect yet, please follow the instructions in the [next section](/onboard/wallet-connect#add-your-wallets-modal).
+2. If you use WalletConnect v1, [migrate to WalletConnect v2](https://docs.walletconnect.com/2.0/advanced/migration-from-v1.x/overview) first.
+3. If you already have WalletConnect v2, add the Aurora Pass wallet to your wallet modal:
+e.g., [Web3Modal](/onboard/wallets/web3modal#adding-aurora-pass) or [RainbowKit](/onboard/wallet-connect#add-your-wallets-modal)
+
+Please get in touch with our [Support Team](https://discord.gg/WXfbGsSUbT) if you need some help
+
+## Add your wallet modal
+
+You must integrate one of the Wallet Modals to display the list of wallets for a user to connect to your DApp.
+Currently on the market, these are the two most popular options to choose from:
+
+1. [Web3Modal](https://docs.walletconnect.com/web3modal/about) – popup developed by the WalletConnect team. You can read more about it [here](/onboard/wallets/web3modal/).
+2. [RainbowKit](https://www.rainbowkit.com/) is another popular wallet modal in the Ethereum ecosystem. More information on integrating it is [here](/onboard/wallets/rainbowkit/).
+
+Both of these are based on WalletConnect v2 out of the box, so if you are not using it yet – that is the place to start. After adding one of these modals,
+you can add Aurora Pass to your wallet list and make it one of the primary options for a user, which is done in the next section *'Add your wallets'*.
diff --git a/docs/onboard/wallets/rainbowkit.md b/docs/onboard/wallets/rainbowkit.md
new file mode 100644
index 00000000..c7b550ac
--- /dev/null
+++ b/docs/onboard/wallets/rainbowkit.md
@@ -0,0 +1,125 @@
+---
+sidebar_label: RainbowKit
+title: RainbowKit
+---
+
+The [RainbowKit](https://www.rainbowkit.com/docs/introduction) is a React library that easily adds wallet connections to your Dapp. It's intuitive, responsive and customizable.
+It allows you to integrate even more wallets than the [Web3Modal](/onboard/wallets/web3modal) solution.
+
+
+
+## Integrate RainbowKit
+
+This tutorial video explains quickly the process of setting up your RainbowKit modal:
+
+
+### Quick start
+
+You can scaffold a new RainbowKit + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org) app with one of the following commands, using your package manager of choice:
+
+```bash
+npm init @rainbow-me/rainbowkit@latest
+# or
+pnpm create @rainbow-me/rainbowkit@latest
+# or
+yarn create @rainbow-me/rainbowkit
+```
+
+These commands will prompt you for a project name, generate a new directory containing a boilerplate project, and install all required dependencies.
+
+Alternatively, you can manually integrate RainbowKit into your existing project.
+
+### Manual setup
+
+Install RainbowKit and its peer dependencies, [wagmi](https://wagmi.sh/), [viem](https://viem.sh), and [@tanstack/react-query](https://tanstack.com/query/v5).
+
+```bash
+npm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query
+```
+
+After that, you must import your libraries and configure your installation. You can read more about this [here](https://www.rainbowkit.com/docs/installation#import).
+
+### UI Configuration
+
+You can configure a lot of parameters for UI in RainbowKit, for example:
+
+1. [Modal Sizes](https://www.rainbowkit.com/docs/modal-sizes)
+2. [Connect Button](https://www.rainbowkit.com/docs/connect-button)
+3. [Themes](https://www.rainbowkit.com/docs/theming)
+4. [Localization](https://www.rainbowkit.com/docs/localization)
+
+You can read more about advanced customizing these components [here](https://www.rainbowkit.com/docs/custom-connect-button).
+
+## Adding Aurora Pass
+
+You will need to get a Wallet ID from WalletConnect for the Aurora Pass wallet first from [here](https://explorer.walletconnect.com/aurora-pass) or copy it directly below:
+
+```bash
+76260019aec5a3c44dd2421bf78e80f71a6c090d932c413a287193ed79450694
+```
+
+You can now add Aurora Pass as a recommended wallet to your RainbowKit WalletList by:
+
+1. Use `walletConnectWallet` from `@rainbow-me/rainbowkit/wallets` in your [wallet connectors](https://www.rainbowkit.com/docs/custom-wallet-list):
+
+```tsx
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import { walletConnectWallet } from '@rainbow-me/rainbowkit/wallets';
+import {
+ rainbowWallet,
+ walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';
+
+const connectors = connectorsForWallets(
+ [
+ {
+ groupName: 'Recommended',
+ wallets: [rainbowWallet, walletConnectWallet],
+ },
+ ],
+ {
+ appName: 'My RainbowKit App',
+ projectId: 'YOUR_PROJECT_ID',
+ }
+);
+```
+
+2. Now you can configure your `walletConnectWallet` via the `qrModalOptions` variable, which is secretly just WalletConnect options,
+find the [complete list of them here](https://docs.walletconnect.com/advanced/walletconnectmodal/options):
+
+```tsx
+walletConnectWallet(options: {
+ projectId: string;
+ options?: {
+ qrModalOptions?: {
+ desktopWallets?: DesktopWallet[];
+ mobileWallets?: MobileWallet[];
+ };
+ }
+});
+```
+
+3. So now, use the `explorerRecommendedWalletIds` option
+ (documented [here](https://docs.walletconnect.com/web3modal/v2/react/wagmi/options#explorerrecommendedwalletids-optional)) and paste Aurora Pass ID to it:
+
+```tsx
+let options = {
+ defaultChain: aurora, // we can set it to make sure we are using Aurora mainnet by default for our DApp
+ includeWalletIds: [
+ '76260019aec5a3c44dd2421bf78e80f71a6c090d932c413a287193ed79450694', //AuroraPass
+ ]};
+
+// pass the 'options' here as the last argument
+const connectors = connectorsForWallets([ ...
+ walletConnectWallet({projectId, options})
+ ...
+]);
+```
+
+That is it. Now, you can use Aurora Pass from your RainbowKit popup.
+
+## Troubleshooting
+
+Please, take a look at our [Troubleshooting Page](/onboard/troubleshooting). In case you still have questions, please get in touch with our [Support Team](https://discord.gg/WXfbGsSUbT)
+ on Discord and open a support ticket there.
diff --git a/docs/onboard/wallets/web3modal.md b/docs/onboard/wallets/web3modal.md
new file mode 100644
index 00000000..f46ea358
--- /dev/null
+++ b/docs/onboard/wallets/web3modal.md
@@ -0,0 +1,258 @@
+---
+sidebar_label: Web3Modal
+title: Web3Modal
+---
+
+The [Web3Modal](https://docs.walletconnect.com/web3modal/about) lets you easily add the wallets to your DApp.
+ It provides a simple and intuitive interface for DApps to request actions on the blockchain, such as signing transactions and interacting with smart contracts.
+
+
+
+## Add Aurora Pass
+
+You can add Aurora Pass as a recommended wallet to your Web3Modal by using the corresponding configuration option:
+
+1. For Web3Modal v3, use the `includeWalletIds` option. More info can be found [here](https://docs.walletconnect.com/web3modal/react/options#includewalletids--excludewalletids
+).
+2. For Web3Modal v2, use the `explorerRecommendedWalletIds` option. About it, please read [here](https://docs.walletconnect.com/web3modal/v2/react/wagmi/options#explorerrecommendedwalletids-optional).
+3. Copy and paste the Wallet ID of the Aurora Pass wallet to your Web3Modal option. You can find it [here](https://explorer.walletconnect.com/aurora-pass) or copy it directly:
+
+```bash
+76260019aec5a3c44dd2421bf78e80f71a6c090d932c413a287193ed79450694
+```
+
+You can find an example of adding the Aurora Pass Wallet ID in the integration example [below](/onboard/wallets/web3modal#add-aurorapass-to-your-wallet-list).
+
+## Integrate Web3Modal
+
+In this section, we will go through the development of a simple [Web3Modal](https://docs.walletconnect.com/web3modal/about) example to use Aurora Pass in a DApp.
+
+We will use Wagmi and React as a base for our DApp. You can take a look at the [Web3Modal Docs](https://docs.walletconnect.com/web3modal/about) to learn more about other variants.
+
+### Create a simple React app
+
+To start, let's create a React application by using `create-react-app`. Of course, you can use your existing codebase instead. We're doing this just for demonstration purposes.
+You will need to run in your terminal:
+
+```bash
+npx create-react-app aurora-pass-example
+cd aurora-pass-example
+npm start
+```
+
+Your React app will be running now at `http://localhost:3000`. Just open that link in your browser to see the UI.
+You can read more about the `create-react-app` [here](https://create-react-app.dev/docs/getting-started/) for more details.
+
+### Add Aurora Promo Widget
+
+We are discussing the Promo Widget in detail in [this article](/onboard/promo-widget), please look at the code section [here](/onboard/promo-widget#detailed-integration-guide)
+ and add the Promo Widget popup to your DApp. The main goal of having is to allow users to install the Aurora Pass app in the easiest possible way.
+ After this, we can continue with adding Web3Modal to the project.
+
+### Add Web3Modal
+
+We will closely follow the [Web3Model Wagmi v2 documentation](https://docs.walletconnect.com/web3modal/react/about?platform=wagmi) here.
+
+#### Import libraries and get projectId
+
+First, let's add some new packages to the project:
+
+```bash
+npm install @web3modal/wagmi@4.0.0-alpha.0 wagmi viem @tanstack/react-query
+```
+
+Now, sign up at [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in) to get a WalletConnect `projectId`. You will get some random string like `4aee871f7a80f1ff5c7892226bd3ascd`.
+
+#### 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'
+import { WagmiProvider } from 'wagmi'
+import { aurora, mainnet } from 'wagmi/chains'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+// Setup queryClient
+const queryClient = new QueryClient()
+
+// Get projectId at https://cloud.walletconnect.com
+const projectId = 'YOUR_PROJECT_ID_GOES_HERE';
+
+// Create wagmiConfig
+const metadata = {
+ name: 'Web3Modal',
+ description: 'Web3Modal Example',
+ url: 'https://web3modal.com',
+ icons: ['https://avatars.githubusercontent.com/u/37784886']
+}
+
+const chains = [mainnet, aurora]
+
+const wagmiConfig = defaultWagmiConfig({
+ chains,
+ projectId,
+ metadata
+})
+
+// Create modal
+createWeb3Modal({ wagmiConfig, projectId, chains})
+
+// Export component
+export default function Web3Modal({ children }) {
+ return (
+
+ {children}
+
+ )
+}
+```
+
+Now, we can use the Web3Modal component in our app. First, notice that we need to wrap the part of the app into it using the `wagmi` hooks. In this case, we are wrapping it fully into it:
+
+```jsx title="aurora-pass-example/src/App.js"
+
+function App() {
+ ...
+
+ return (
+
+
+
+ ...
+
+
+
+ );
+}
+```
+
+But we still need to display the popup. How can we do it?
+
+#### Display Web3Modal
+
+To open the wallets popup, let's use the `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 the `onComplete` argument and pass there the `open` function:
+
+```jsx title="aurora-pass-example/src/App.js"
+import { useWeb3Modal } from '@web3modal/wagmi/react';
+
+const openWidget = (onComplete) => {
+ window.openPromo
+ ? window.openPromo({ onComplete: onComplete, config: {hideUpdateAppBlock: true} })
+ : onComplete()
+}
+
+function App() {
+ ...
+
+ const { open } = useWeb3Modal()
+ return (
+
+ );
+}
+```
+
+You can also safely remove the `openWeb3Modal` function we previously had with just a placeholder alert.
+
+If you go into your App now, you will be able to see the WalletConnect popup appearing after you click the 'Skip' button in the AuroraPass widget:
+
+
+
+But it will still need to contain the AuroraPass. Let's add it there.
+
+### Add AuroraPass to your wallet list
+
+You can read more about the different options on how to add the Aurora Pass to your Web3Modal [here](/onboard/wallets/web3modal#add-aurora-pass).
+
+We have Web3Modal v3 in our case, so let's use `includeWalletIds` and modify the `Web3Modal.js` file:
+
+```jsx title="aurora-pass-example/src/Web3Modal.js
+let options = {
+ defaultChain: aurora, // we can set it to make sure we are using Aurora mainnet by default
+ includeWalletIds: [
+ 'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', //Metamask
+ '76260019aec5a3c44dd2421bf78e80f71a6c090d932c413a287193ed79450694', //AuroraPass
+ ]};
+
+// pass the 'options' here as the last argument
+createWeb3Modal({ wagmiConfig, projectId, chains, ...options})
+
+```
+
+If we re-open the Web3Modal now, we will see the AuroraPass wallet there:
+
+
+
+Now, we can try connecting our wallet via the QR code:
+
+
+
+But we won't see if the connection was successful yet because we need something to display that. The popup will close, and we will see the App's initial screen:
+
+
+
+### Display 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
+...
+import { useAccount } from 'wagmi'
+...
+
+function Account () {
+ const { address, isConnecting, isDisconnected } = useAccount();
+ if (isConnecting) return