useWalletConnect

Do you want your users to be able to use their smart accounts with other DApps? If so, you can integrate ZeroDev with WalletConnect.

The useWalletConnect hook from the @zerodev/waas package integrates WalletConnect functionality with a React application, providing an interface for connecting to WalletConnect, handling session proposals, requests, and managing connections.

Import

import { useWalletConnect } from '@zerodev/waas'

Usage

import React from 'react';
import { useWalletConnect } from '@zerodev/waas';
 
const App = () => {
  const {
    connect,
    sessionProposal,
    approveSessionProposal,
    rejectSessionProposal,
    isLoading,
    error,
    disconnect,
    sessions,
    sessionRequest,
    approveSessionRequest,
    rejectSessionRequest,
  } = useWalletConnect({
    projectId: 'WALLET_CONNECT_PROJECT_ID',
    metadata: {
      name: 'ZeroDev Wallet',
      url: 'https://zerodev.app',
      description: 'Smart contract wallet for Ethereum',
      icons: ['https://example-icon-url.com/400x400.jpg'],
    }
  });
 
  // Use the returned properties and methods in your component
};
 
export default App;

For a practical demonstration of how useWalletConnect can be implemented in a project, check out our live demo. You can also explore the source code of the demo for a deeper understanding and more detailed examples.

Parameters

import { type UseWalletConnectParameters } from '@zerodev/waas';

projectId

• A unique identifier for your WalletConnect project. You need to create a project ID at WalletConnect to use this hook.

metadata

• Metadata provides details about your application to be displayed in the WalletConnect interface. It conforms to the following structure:

interface Metadata {
  name: string; // Name of your application
  description: string; // Short description of your application
  url: string; // URL to your application's homepage
  icons: string[]; // Array of URLs to icons representing your application
  verifyUrl?: string; // Optional URL for verification
  redirect?: {
    native?: string; // Optional native redirect URL
    universal?: string; // Optional universal redirect URL
  };
}

Please refer to the WalletConnect documentation for more information on the metadata and projectId.

Return Types

import { type UseWalletConnectReturnType } from '@zerodev/waas'

connect(uri: string)

• Function to initiate a WalletConnect session.

approveSessionProposal(proposalData?: Web3WalletTypes.SessionProposal)

• Function to approve a session proposal.
• Parameter proposalData is optional and should conform to the Web3WalletTypes.SessionProposal from @walletconnect/web3wallet.

rejectSessionProposal()

• Function to reject a session proposal.

disconnect(session: SessionTypes.Struct)

• Function to disconnect an active session.
• Parameter session should be an instance of SessionTypes.Struct from @walletconnect/types.

approveSessionRequest()

• Function to approve a session request.

rejectSessionRequest()

• Function to reject a session request.

sessionProposal

• Stateful value containing the current session proposal, if any.

sessionRequest

• Stateful value containing the current session request, if any.

isLoading

• Enum for loading states including 'Approve', 'Reject', 'Connect', 'Disconnect'.

sessions

• Array of active sessions.

error

• Error object if an error occurred during any of the operations.