Powered by

# Web3

Web3 wallet discovery, authentication and interaction is facilitated via RainbowKit, Wagmi, Viem and Sign-in-with-Ethereum.

# Chain configuration

QuickDapp is built for EVM chains. The target EVM chain is specified via the following environment variables:

  • NEXT_PUBLIC_CHAIN
  • NEXT_PUBLIC_CHAIN_RPC_ENDPOINTgit

Note that both variables are needed for the chain configuration to work correctly. The backend server and worker processes also rely on these environment variables to know which chain to monitor.

# Connection and authentication

The ConnectWallet component triggers the RainbowKit connection dialog. By default, once a wallet is connected the user is prompted to sign a message with their private key to prove that they actually own this wallet.

The signed message is sent to the backend for verification. Once verified, a JWT (JSON Web Token) is used to store the user's sessions for any subsequent queries made to the backend. The global context object will also be updated to contains the user's wallet information.

The user remains authenticated across browser sessions until and unless the user changes their active wallet and/or manually disconnects from the dapp.

Note: If the user's crypto wallet is connected to a different chain then they will be prompted to switch to the right chain.

### App name

The src/shared/constants.ts file contains the app name that will be shown to users during the wallet connection process. Update these values accordingly:

export const APP_NAME = 'QuickDapp'

# Contracts

Please refer to the the section on Smart Contracts.

# Read/write hooks

The following high-level contract interaction hooks are provided:

  • useGetContractValue - call a read-only method on a single contract.
  • useGetMultipleContractValues - call multiple read-only methods on multiple contracts. (Note: The background worker will deploy Multicall3 to the chain if not already present).
  • useGetContractPaginatedValues - read paginated values from a single contract.
  • useSetContractValue - call a read-write method on a contract with a transaction.

You can of course use the Wagmi React hooks to access contract methods if you wish. However, the above hooks incorporate the ABI and address fetching methods above to provide for a more seamless interaction with contracts.