Web3 Provider

This project is a web3 provider for React websites. It allows you to interact with the Ethereum blockchain and various wallets such as Coinbase Wallet, MetaMask, and WalletConnect. It also includes a modal for connecting to a web3 provider.

## Features

• Interact with the Ethereum blockchain using `@alch/alchemy-web3` and `ethers`. -
• Connect to various wallets including Coinbase Wallet, MetaMask, and WalletConnect.
• Display a modal for connecting to a web3 provider using `web3modal`.
• Build user interfaces with `react` and `react-dom`.

Installation

To install the project, you need to have Node.js version 18.0.0 or higher and npm.

npm i e-labs_web3provider@latest

Usage

To use the Web3 Provider wrap the outter most page/componet in the provider gain access though out

<UserWeb3Provider allowedChains={["ETH_MAINNET","MATIC_MAINNET"]} apiKeys={keys} primaryNetwork={"ETH_MAINNET"}>
  children
</UserWeb3Provider>

You can pass props to the provider to give it defaul and setup valuse.

interface UserWeb3ProviderProps {
  children?: ReactNode;
  allowedChains?: ActiveChainIndex;
  apiKeys: { alchemy: string };
  primaryNetwork?: NetworkKeys; // Defaults to Ethereum Mainnet
}

type NetworkKeys =
  | "ETH_MAINNET"
  | "ETH_GOERLI"
  | "OPT_MAINNET"
  | "OPT_GOERLI"
  | "ARB_MAINNET"
  | "ARB_GOERLI"
  | "MATIC_MAINNET"
  | "MATIC_MUMBAI";

type ActiveChainIndex = {
  [chain in NetworkKeys]?: boolean;
};

You can then access the provider with

const [] = useWeb3Provider();

interface UserWeb3ProviderContextType {
  alchemySDKAccess: {
    alchemy: {
      apiKey: string;
      network: string;
      maxRetries: 10;
    };
  };
  web3API: any;
  walletAddress: string;
  addressBook: AddressBook;
  shortWalletAddress: string;
  userProvider: ethers.providers.Provider;
  userSigner: ethers.Signer;
  auxStorage: { [key: string]: any };
  localProvider: ethers.providers.Provider;
  selectedChains: ActiveChainIndex;
  onSelectedChainChange: (action: "add" | "remove", chain: NetworkKeys) => void;
  updateAuxStorage: updateAuxStorage;
  connectToUsersProvider: connectToUsersProvider;
  userSignMessage: userSignMessage;
  disconnectProvider: disconnectProvider;
  connectToGivenProvider: connectToGivenProvider;
  useEnsResolver: useEnsResolver;
}

type useEnsResolver = (network: NetworkKeys) => Promise<ensResolverReturns>;
type connectToGivenProvider = (
  provider: GivenProviderAllowance,
  network: NetworkKeys
) => Promise<ethers.providers.Provider | false>;
type disconnectProvider = () => void;
type userSignMessage = (
  signer: ethers.Signer,
  message: string,
  checkAddress?: string
) => Promise<boolean>;
type connectToUsersProvider = (
  userAction: boolean,
  givenNetwork?: NetworkKeys
) => Promise<boolean>;
type updateAuxStorage = (param: string, value: any) => void;

Project Structure

The project is structured as follows:

• src/: This is the main folder where all the source code is located.
  • api/: This folder contains the setup for the Alchemy SDK and the API calls.
  • assets/: This folder contains the icons and placeholder images used in the project.
  • components/: This folder contains all the React components used in the project.
  • constants/: This folder contains the constants used across the project.
  • data/: This folder contains the data types used in the project.
  • helpers/: This folder contains helper functions for address formatting, web3 connection, event listening, and media formatting.
  • hooks/: This folder contains custom React hooks.
  • lib/: This folder contains the Address and AddressBook classes.
  • types/: This folder contains the TypeScript type definitions.
  • utils/: This folder contains utility functions and interfaces for interacting with Ethereum and the web3 providers.

Available Components

The following components are available in the project:

• ChainSelector
• ConnectButton
• Gateway
• NFTCard
• NFTMedia
• NFTModal
• NFTModalExtention
• NFTPaginate
• NetworkNotification
• TokenGateway
• WalletEtherlink
• web3Modal

Example

<ChainSelector availableChains==={["ETH_MAINNET", "MATIC_MAINNET"]} notForProvider onSelectedChain={handleChainSelect}  />

Technologies and Libraries

The project uses the following technologies and libraries:

• @alch/alchemy-web3: For interacting with the Ethereum blockchain.
• @coinbase/wallet-sdk: For interacting with the Coinbase Wallet.
• @metamask/providers: For interacting with the MetaMask wallet.
• @walletconnect/web3-provider: For interacting with WalletConnect compatible wallets.
• ethers: For interacting with the Ethereum blockchain.
• react and react-dom: For building the user interface.
• web3modal: For creating a modal for connecting to a web3 provider.