@nylonblocks/web3provider

         ███╗░░██╗██╗░░░██╗██╗░░░░░░█████╗░███╗░░██╗
         ████╗░██║╚██╗░██╔╝██║░░░░░██╔══██╗████╗░██║
         ██╔██╗██║░╚████╔╝░██║░░░░░██║░░██║██╔██╗██║
         ██║╚████║░░╚██╔╝░░██║░░░░░██║░░██║██║╚████║
         ██║░╚███║░░░██║░░░███████╗╚█████╔╝██║░╚███║
         ╚═╝░░╚══╝░░░╚═╝░░░╚══════╝░╚════╝░╚═╝░░╚══╝
            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.

Click to see basic example

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>
    )

}

Expand for Web3Provider Master types

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;

See API Key Types

    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.

Expand for the main data types

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;
};