# Wallet Connect

An Open protocol for connecting Wallets to Dapps, supports Asset Chain. Wallet Connect's, Wallet Kit boasts features that provide a simple, secure way for your wallet users to easily connect with thousands of apps.

### Getting Started

To connect your application to WalletConnect, you'll need to create a project on the WalletConnect Dashboard and obtain the Project ID.

#### Sign Up or Log In to the WalletConnect Dashboard

* Visit the [WalletConnect Dashboard](https://cloud.walletconnect.com/)
* If you don't have an account, sign up with your email and create a new account. If you already have an account, log in.

#### Create a New Project

* After logging in, you’ll see an option to create a new project.
* Click on **"Create"** and fill in the necessary details, such as the project name
* Once the project is created, you’ll be redirected to the project’s dashboard.

<figure><img src="/files/tc3s2GkXnon7WMrYsFoF" alt=""><figcaption></figcaption></figure>

#### Obtain Your Project ID

* In the project dashboard, you’ll find the **Project ID** under the project details.
* Copy the Project ID. You will use this ID in your ReactJS project to configure WalletConnect.

<figure><img src="/files/kHLhQ2T7YtHFlW6lbp28" alt=""><figcaption></figcaption></figure>

### Setting Up the Reactjs Project

Before we start, ensure you have the following tools installed on your system:

* **Node.js and npm:** Make sure you have Node.js installed, as it comes with npm, the Node package manager.

let's create a new React project using `vite`.

```shell
npm create vite@latest
```

Then follow the prompts!

after you're done installing reactjs using vite, navigate to your project directory and install this necessary packages:

```sh
npm i @rainbow-me/rainbowkit @tanstack/react-query viem wagmi
```

### Configuring Wallet Connect

create a `config.js` file in the src folder and add this code below:

```javascript

import { assetChainTestnet } from "viem/chains";
import { getDefaultConfig } from "@rainbow-me/rainbowkit";


export const config = getDefaultConfig({
  appName: "Wallet Connect Demo", //Update App Name
  projectId: "77a78cdc46a724d6e05ce4ae785d24d7", // Update ProjectID and for security purposes , put it in a .env file.
  chains: [assetChainTestnet],
  ssr: false, // If your dApp uses server side rendering (SSR)-true
});

```

in the `main.jsx` file, add this code below:

```javascript

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import App from './App.jsx'
import './index.css'
import "@rainbow-me/rainbowkit/styles.css";
import { WagmiProvider } from "wagmi";
import {
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";
import { config } from "./config"; // replace with your own wallet-connect configuration

/* 
  connect users wallet to a dapp on assetchain, through wallet-connect.
  - user clicks connect wallet.
  - shows them qr code to scan with phone.
  - user scans with phone wallet, and connects to this app(running on a-chain)
 */

const queryClient = new QueryClient();

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {" "}
          <App />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </StrictMode>
);

```

and finally in your `App.jsx` file, add the code below:

```javascript

import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { ConnectButton } from "@rainbow-me/rainbowkit";

function App() {
  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <ConnectButton />
    </>
  );
}

export default App;

```

Open your terminal, in the your project directory , run the command below to start up the server:

```bash
npm run dev
```

{% embed url="<https://github.com/xendfinance/assetchain-wallet-connect-demo>" %}
Demo on Wallet Connect
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://academy.assetchain.org/module-3-beginner-tutorials/connecting-to-wallet/wallet-connect.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.