# 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="https://285329334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmuBv3mR5xhQRl9pMrnhC%2Fuploads%2Fgit-blob-d4bd041d022681aab4c6000b41ef9a636747633d%2FScreenshot%202024-08-28%20at%2011.48.02.png?alt=media" 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="https://285329334-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmuBv3mR5xhQRl9pMrnhC%2Fuploads%2Fgit-blob-79939c656441dba89e3aba5064fd0c620a32b044%2FScreenshot%202024-08-28%20at%2011.51.29.png?alt=media" 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 %}