@nylonblocks/web3provider v1.1.5

         ███╗░░██╗██╗░░░██╗██╗░░░░░░█████╗░███╗░░██╗
         ████╗░██║╚██╗░██╔╝██║░░░░░██╔══██╗████╗░██║
         ██╔██╗██║░╚████╔╝░██║░░░░░██║░░██║██╔██╗██║
         ██║╚████║░░╚██╔╝░░██║░░░░░██║░░██║██║╚████║
         ██║░╚███║░░░██║░░░███████╗╚█████╔╝██║░╚███║
         ╚═╝░░╚══╝░░░╚═╝░░░╚══════╝░╚════╝░╚═╝░░╚══╝
            www.nylonblocks.io | nylonblocks.eth

web3Provider

Web3 Provider for React/Next.js sites and node programming

Installing

npm i @nylonblocks/web3provider

Using

• ethers
• web3uikit
• web3Modal
• React-Moralis
• React
• WalletConnect Provider
• Metamask providers
• Coinbase wallet sdk
• styled-components

To Use Wrap app with <UserWeb3Provider>. You can provide a custom set of provider options for Web3Modal or optionally can use the internal (Browser, Coinbase and WalletConnect)

INCORPORATED Styled-components and global style is built into the provider. Provide a theme to the provider to be used though-out.

import UserWeb3Provider, {UserWeb3Context} from "@nylonblocks/Web3Provider";
import {useContext, useState} from 'react';
import { theme } from "./styles/theme"

const App = () => (
return(
    <div>
        <UserWeb3Provider
            APIkeys={
                moralisKeys: moralisKeyObject,
                primaryAPI: "moralis"
                }
            customProviders={customWeb3ModalProviders}
            options={
                theme={theme},
                forceNetwork: 4,
            }
            >
            {...children}
        </UserWeb3Provider>
    </div>)
);

// Then use in a component
const Home = () => {
const { walletAddress, userSigner, getAuxStorage, userProvider } = useContext(UserWeb3Context);
const [isLoggedIn, setLoggedIn] = useSate(false);

    useEffect(() => {
        if(!isLoggedIn && userProvider)setLoggedIn(true);
        if(isLoggedIn && !userProvider)setLoggedIn(false);
    })

    return(
        <div>
            <TitleBlock>
                {walletAddress && walletAddress}
                {walletAddress && "You are connected to" getAuxStorage(network).name}
            </TitleBlock>
            {!isLoggedIn && <Web3ConnectButton />}
            {isLoggedIn && <PageContents />}
        </div>
    )

}

interface UserWeb3ProviderInterface {
  children?: any;
  APIKeys?: {
    moralisKeys?: moralisKeysType;
    alchemyKeys?: any;
    primaryAPI: "moralis" | "alchemy";
  };
  customProviders?: any;
  options?: {
    forceNetwork?: number;
    catchProvider?: boolean;
    theme?: any;
  };
}

interface UserWeb3ProviderContextType {
  walletAddress: string;
  shortWalletAddress: string;
  userProvider: ProviderType | undefined;
  userSigner: SignerType | undefined;
  auxStorage: { [key: string]: any };
  updateAuxStorage: (param: string, value: any) => void;
  getAuxStorage: (parm: string | number) => any;
  connectToUsersProvider: (userAction: boolean) => void;
  userSignMessage: (
    signer: SignerType,
    message: string,
    checkAddress: string
  ) => Promise<boolean>;
  disconnectProvider: () => void;
}

From the UserWeb3Provider you can access the auxStorage. This is a flexable object that can hold micalniouse date. From singing in it holds netwrok: {name, chainId}, balance and Web3ModalInstance. use updateAuxStorage( { [key: string]: any }) and reading from the storage with getAuxStorage( parameter: string | number })

Components

• ConnectButton
• web3Modal
• TokenGateway
• NetworkNotification
• NetworkSelector
• NFTCard

3rd Party API Access

We use Moralis for token data retrieval. These functions are built into certain components. the UserWeb3Provider includes the moralis provider. Please provide your moralis keys in ether .env or as an object to the provider;

    type moralisKeys = {
    serverURL: string,
    appId: string,
    masterKey: string,
    };

    .env = {
        // Moralis
        MORALIS_APP_ID =
        MORALIS_MASTER_KEY =
        MORALIS_SERVER =
        // Infura API Keys
        INFURA_KEY=
        INFURA_RINKEBY_KEY=
        INFURA_KOVAN_KEY=
        INFURA_ETH_KEY=
        INFURA_MUMBAI_KEY=
        INFURA_POLYGON_KEY=
        // Alchemy API Keys
        ALCHEMY_KEY=
        ALCHEMY_RINKEBY_KEY =
        ALCHEMY_KOVAN_KEY=
        ALCHEMY_ETH_KEY=
        ALCHEMY_MUMBAI_KEY=
        ALCHEMY_POLYGON_KEY=
    }

Types Note: Because we allow the usage of multiple APIs for data getting and setting we have created an array of standardized data types to make for a more interoperable programming.

type WalletDetailsType = {
  address: string[];
  provider: ProviderType;
  providerInterface: any;
  network: number;
  signer?: SignerType;
  balance: number;
  web3ModalInstance?: any;
};
type SupportedChainsType = SupportedChainType[];
type SupportedChainType = {
  name: NetworkNamesType;
  chain_id: number;
  ticker: string;
  long_name: string;
  scanner?: string;
};
type NFTCollectionDataType = SingleNFTDataType[];
type SingleNFTDataType = {
  token_address: string;
  token_id: string;
  contract_type?: string;
  metadata?: NFTMetaDataType;
  balance?: string;
  project_name?: string;
  project_symbol?: string;
  token_uri?: string;
};
type NFTMetaDataType = {
  name?: string;
  description?: string;
  image?: string;
  attributes?: NFTTraitType[];
  external_url?: string;
};
type NFTTraitType = {
  trait_type: string;
  value: string;
};