Add useReadOnlyContract and useReadOnlyProvider (#205)

* Add `useReadOnlyContract` and `useStaticProvider`

* Add changeset

* Rename `useStaticProvider` to `useReadOnlyProvider`

* Fix `useReadOnlyProvider` type and update changeset message

* Rename `staticProvider` to `readOnlyProvider`

Author: Dhaiwat10

.changeset/metal-guests-flash.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/hooks': minor
+---
+
+The `hooks` package now has two new hooks: `useReadOnlyProvider` which gives you a read-only provider and `useReadOnlyContract` which lets you interact with a smart contract without needing a signer.

packages/hooks/README.md

@@ -33,6 +33,8 @@ The following hooks are available:
 - [useContract](#usecontract)
 - [useTransaction](#usetransaction)
 - [useTokenBalance](#usetokenbalance)
+- [useReadOnlyContract](#usereadonlycontract)
+- [useReadOnlyProvider](#usereadonlyprovider)
 
 ---
 
@@ -69,7 +71,7 @@ const {
 
 ### useContract
 
-The `useContract` hook takes the ABI and address of a contract and returns the contract instance.
+The `useContract` hook takes the ABI and address of a contract and returns the contract instance. This hook requires the user to have connected their wallet. If you don't want to force your users to connect their wallet in order to read from a contract, use [`useReadOnlyContract`](#usereadonlycontract) instead.
 
 ```tsx
 import { useContract } from '@web3-ui/hooks';
@@ -133,3 +135,38 @@ const {
   balanceInBigNumber
 } = useTokenBalance('TOKEN_CONTRACT_ADDRESS', 'ACCOUNT_ADDRESS');
 ```
+
+---
+
+### useReadOnlyContract
+
+The `useReadOnlyContract` hook takes in a contract address and an ABI and returns a read-only contract instance. This is especially useful when you want to read data from a function without asking the user to connect their wallet. eg. When you are only 'reading' from a contract and not interacting with it.
+
+In order for this hook to work, you need to pass in a `rpcUrl` to the `<Provider />`. eg. `https://rinkeby.infura.io/v3/YOUR_INFURA_ID`
+
+```tsx
+<Provider network={NETWORKS.rinkeby} rpcUrl='https://rinkeby.infura.io/v3/YOUR_INFURA_ID'>
+```
+
+```tsx
+import { useReadOnlyContract } from '@web3-ui/hooks';
+
+const [contract, isReady] = useReadOnlyContract(
+  'CONTRACT_ADDRESS',
+  'CONTRACT_ABI'
+);
+```
+
+---
+
+### useReadOnlyProvider
+
+The `useReadOnlyProvider` takes in a RPC URL (think Infura, Alchemy, etc.) and returns a provider. This provider can be used to read data from the blockchain and from any contract.
+
+```tsx
+import { useReadOnlyProvider } from '@web3-ui/hooks';
+
+const provider = useReadOnlyProvider(
+  'https://rinkeby.infura.io/v3/YOUR_INFURA_ID'
+);
+```

packages/hooks/src/Provider.tsx

@@ -3,6 +3,8 @@ import WalletConnectProvider from '@walletconnect/web3-provider';
 import { ethers } from 'ethers';
 import React from 'react';
 import Web3Modal, { IProviderOptions } from 'web3modal';
+import { StaticJsonRpcProvider } from '@ethersproject/providers';
+import { useReadOnlyProvider } from './hooks';
 
 export interface Web3ContextType {
   connectWallet?: () => void;
@@ -14,6 +16,7 @@ export interface Web3ContextType {
   provider?: ethers.providers.Web3Provider | null;
   correctNetwork: boolean;
   network: number;
+  readOnlyProvider?: StaticJsonRpcProvider;
 }
 
 export const Web3Context = React.createContext<Web3ContextType | undefined>(
@@ -44,6 +47,11 @@ export interface ProviderProps {
       ]
    */
   extraWalletProviders?: [IProviderOptions];
+  /**
+   * @dev The JSON RPC provider URL you want to use for read only operations. eg. https://mainnet.infura.io/v3/YOUR_INFURA_KEY
+   * @type string
+   */
+  rpcUrl?: string;
 }
 
 /**
@@ -57,7 +65,8 @@ export const Provider: React.FC<ProviderProps> = ({
   children,
   network,
   infuraId,
-  extraWalletProviders = []
+  extraWalletProviders = [],
+  rpcUrl = ''
 }) => {
   const [signer, setSigner] = React.useState<null | JsonRpcSigner>();
   const [
@@ -69,6 +78,7 @@ export const Provider: React.FC<ProviderProps> = ({
   const [chainId, setChainId] = React.useState<number | null>();
   const [connected, setConnected] = React.useState<boolean>(false);
   const [correctNetwork, setCorrectNetwork] = React.useState<boolean>(true);
+  const readOnlyProvider = useReadOnlyProvider(rpcUrl);
 
   const connectWallet = React.useCallback(async () => {
     const defaulProviderOptions = {
@@ -78,14 +88,14 @@ export const Provider: React.FC<ProviderProps> = ({
           bridge: 'https://polygon.bridge.walletconnect.org',
           infuraId,
           rpc: {
-            1: `https://eth-mainnet.alchemyapi.io/v2/${infuraId}`, // mainnet // For more WalletConnect providers: https://docs.walletconnect.org/quick-start/dapps/web3-provider#required
+            1: `https://mainnet.infura.io/v3/${infuraId}`, // mainnet // For more WalletConnect providers: https://docs.walletconnect.org/quick-start/dapps/web3-provider#required
+            4: `https://rinkeby.infura.io/v3/${infuraId}`,
             42: `https://kovan.infura.io/v3/${infuraId}`,
             100: 'https://dai.poa.network' // xDai
           }
         }
       }
     };
-
     const web3Modal = new Web3Modal({
       providerOptions: Object.assign(
         defaulProviderOptions,
@@ -169,7 +179,8 @@ export const Provider: React.FC<ProviderProps> = ({
       provider,
       network,
       chainId,
-      correctNetwork
+      correctNetwork,
+      readOnlyProvider
     }),
     [
       connectWallet,
@@ -180,7 +191,8 @@ export const Provider: React.FC<ProviderProps> = ({
       provider,
       network,
       chainId,
-      correctNetwork
+      correctNetwork,
+      readOnlyProvider
     ]
   );
 

packages/hooks/src/hooks/index.ts

@@ -2,3 +2,5 @@ export { useWallet } from './useWallet';
 export { useContract } from './useContract';
 export { useTransaction } from './useTransaction';
 export { useTokenBalance } from './useTokenBalance';
+export { useReadOnlyProvider } from './useReadOnlyProvider';
+export { useReadOnlyContract } from './useReadOnlyContract';

packages/hooks/src/hooks/useReadOnlyContract.ts

@@ -0,0 +1,35 @@
+import { Contract, ContractInterface } from 'ethers';
+import React, { useContext, useEffect } from 'react';
+import { Web3Context } from '..';
+
+/*
+ * @dev returns a read-only contract instance. You need to pass in a readOnlyProviderUrl to the Provider in order for this to work. 
+        Does not need a wallet connection / signer to function.
+ * @param address - The contract address
+ * @param abi - The contract ABI
+ */
+export function useReadOnlyContract(address: string, abi: ContractInterface) {
+  const context = useContext(Web3Context);
+  const readOnlyProvider = context?.readOnlyProvider;
+
+  const [contract, setContract] = React.useState<any>();
+  const [isReady, setIsReady] = React.useState(false);
+
+  useEffect(() => {
+    if (readOnlyProvider) {
+      const contract = new Contract(address, abi, readOnlyProvider);
+      const contractInterface = Object.values(
+        contract.interface.functions
+      ).reduce((accumulator, funcFragment) => {
+        return {
+          ...accumulator,
+          [funcFragment.name]: contract[funcFragment.name]
+        };
+      }, {});
+      setContract(contractInterface);
+      setIsReady(true);
+    }
+  }, [address, abi, readOnlyProvider]);
+
+  return [contract, isReady];
+}

packages/hooks/src/hooks/useReadOnlyProvider.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { ethers } from 'ethers';
+import { StaticJsonRpcProvider } from '@ethersproject/providers';
+
+const createProvider = async (url: string) => {
+  const p = new ethers.providers.StaticJsonRpcProvider(url);
+  await p.ready;
+  return p;
+};
+
+/*
+ * @dev returns a static JSON RPC provider
+ * @param url - The url of the JSON RPC provider
+ * @credits scaffold-eth (https://github.com/scaffold-eth/scaffold-eth/blob/master/packages/react-app/src/hooks/useStaticJsonRPC.js)
+ */
+export function useReadOnlyProvider(url: string) {
+  const [provider, setProvider] = useState<StaticJsonRpcProvider>();
+
+  useEffect(() => {
+    async function createAndSetProvider() {
+      if (url === '') {
+        return;
+      }
+      if (!url) {
+        console.error('Please pass in a valid RPC url');
+        return;
+      }
+      try {
+        const p = await createProvider(url);
+        setProvider(p);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    createAndSetProvider();
+  }, [url]);
+
+  return provider;
+}

packages/hooks/src/hooks/useWallet.ts

@@ -22,7 +22,8 @@ export function useWallet() {
     connected,
     provider,
     correctNetwork,
-    network
+    network,
+    readOnlyProvider
   } = context;
 
   React.useEffect(() => {
@@ -84,6 +85,7 @@ export function useWallet() {
     connected,
     provider,
     correctNetwork,
-    switchToCorrectNetwork
+    switchToCorrectNetwork,
+    readOnlyProvider
   };
 }

packages/hooks/src/index.ts

@@ -2,7 +2,9 @@ export {
   useWallet,
   useContract,
   useTokenBalance,
-  useTransaction
+  useTransaction,
+  useReadOnlyProvider,
+  useReadOnlyContract
 } from './hooks';
 export { Provider, Web3Context } from './Provider';
 export { NETWORKS, CHAIN_ID_TO_NETWORK } from './constants';

packages/hooks/src/stories/UseContract.stories.tsx

@@ -1,8 +1,9 @@
 import { storiesOf } from '@storybook/react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Provider, useWallet, useContract, NETWORKS } from '..';
 import { Button, Input, Divider, VStack } from '@chakra-ui/react';
 import { ethers } from 'ethers';
+import { useReadOnlyContract } from '../hooks/useReadOnlyContract';
 
 const ADDRESS = '0x7e1D33FcF1C6b6fd301e0B7305dD40E543CF7135'; // Rinkeby
 const ABI = [
@@ -133,3 +134,32 @@ storiesOf('Hooks/useContract', module).add('Default', () => (
     <Default />
   </Provider>
 ));
+
+const ReadContract = () => {
+  const [contract, isReady] = useReadOnlyContract(ADDRESS, ABI);
+  const [greeting, setGreeting] = React.useState('');
+
+  useEffect(() => {
+    async function exec() {
+      setGreeting(await contract.greet());
+    }
+    if (isReady) {
+      exec();
+    }
+  }, [contract, isReady]);
+
+  return (
+    <VStack>
+      <h3>Greeting: {greeting}</h3>
+    </VStack>
+  );
+};
+
+storiesOf('Hooks/useReadContract', module).add('Default', () => (
+  <Provider
+    network={NETWORKS.rinkeby}
+    readOnlyProviderUrl="https://rinkeby.infura.io/v3/INFURA_ID"
+  >
+    <ReadContract />
+  </Provider>
+));