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

• 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.

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.

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.

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:

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:

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:

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:

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:

npm run dev

GitHub - xendfinance/assetchain-wallet-connect-demoGitHub

Demo on Wallet Connect