WalletConnect App SDK is chain agnostic and provides seamless integration with several blockchain ecosystems. WalletConnect App SDK when combined with Universal Provider library enables compatibility across any blockchain protocol.

​
Pre-requisites

This section is to inform you about the pre-requisites for integrating WalletConnect as an App with React.

​
Cloud Configuration

Create a new project on WalletConnect Dashboard at https://dashboard.reown.com and obtain a new project ID. You will need this project ID to initialize WalletConnect in your project (app).
Don’t have a project ID?Head over to WalletConnect Dashboard and create a new project now!

Get started

​
Installation

npm install @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers

​
Implementation

For a quick integration of Appkit Core you can use the UniversalConnector class. Which simplifies the integration of Appkit Core by providing a single interface for all the blockchain protocols. You can configure the Universal Connector with the networks you want to support. For more information, please visit RPC Reference section from our docs. We recommend creating a config file to establish a singleton instance for the Universal Connector: 
import { UniversalConnector } from '@reown/appkit-universal-connector'

export const projectId = import.meta.env.VITE_PROJECT_ID || "b56e18d47c72ab683b10814fe9495694" // this is a public projectId only to use on localhost
if (!projectId) {
  throw new Error('Project ID is not defined')
}

// you can configure your own network
const suiMainnet = {
  id: 784,
  chainNamespace: 'sui',
  caipNetworkId: 'sui:mainnet',
  name: 'Sui',
  nativeCurrency: { name: 'SUI', symbol: 'SUI', decimals: 9 },
  rpcUrls: { default: { http: ['https://fullnode.mainnet.sui.io:443'] } }
}

const stacksMainnet = {
  id: 1,
  chainNamespace: 'stacks',
  caipNetworkId: 'stacks:1',
  name: 'Stacks',
  nativeCurrency: { name: 'STX', symbol: 'STX', decimals: 6 },
  rpcUrls: { default: { http: ['https://stacks-node-mainnet.stacks.co'] } }
}


export const networks = [suiMainnet, stacksMainnet]

export let universalConnector

export async function getUniversalConnector() {
  if (!universalConnector) {
    universalConnector = await UniversalConnector.init({
      projectId,
      metadata: {
        name: 'Universal Connector',
        description: 'Universal Connector',
        url: 'https://appkit.reown.com',
        icons: ['https://appkit.reown.com/icon.png']
      },
      networks: [
        {
          methods: ['sui_signPersonalMessage'],
          chains: [suiMainnet],
          events: [],
          namespace: 'sui'
        },
        {
          methods: ['stx_signMessage'],
          chains: [stacksMainnet],
          events: ['stx_chainChanged'],
          namespace: 'stacks'
        }
      ]
    })
  }
  return universalConnector
}
In the main.js file you can add: 
import { getUniversalConnector } from './config/appKit.js'

async function setup() {
  const universalConnector = await getUniversalConnector()

  // check if session is already connected
  if (universalConnector?.provider.session) {
    session = universalConnector?.provider.session
  }
}

setup()

​
Trigger the modal

To open AppKit you need to call the connect function from the Provider, sending the namespace, methods, the full chain Namespace and the events available. For more information, please visit RPC Reference section from our docs. 
<script>
    let address = null
    let addressStacks = null
    let session = null

    async function handleConnect() {
      // universalConnector is the universal connector instance from the implementation section
      if (!universalConnector) {
        return
      }

      const { session: providerSession } = await universalConnector.connect()
      // get the address from the session
      if (providerSession?.namespaces?.sui?.accounts?.[0]?.split(':')[2]) {
        address = providerSession?.namespaces?.sui?.accounts?.[0]?.split(':')[2]
      } else if (providerSession?.namespaces?.stacks?.accounts?.[0]?.split(':')[2]) {
        addressStacks = providerSession?.namespaces?.stacks?.accounts?.[0]?.split(':')[2]
      }
      // update the session
      session = providerSession;
    }

    document.getElementById('open-connect-modal').addEventListener('click', handleConnect);
</script>
.... 

<div> 
  <button id="open-connect-modal">Open AppKit Core</button>
</div>

​
Smart Contract Interaction

Wagmi hooks can help us interact with wallets and smart contracts:
import { useReadContract } from "wagmi";
import { USDTAbi } from "../abi/USDTAbi";

const USDTAddress = "0x...";

function App() {
  const result = useReadContract({
    abi: USDTAbi,
    address: USDTAddress,
    functionName: "totalSupply",
  });
}
Read more about Wagmi hooks for smart contract interaction here.