Add a contract loading status indicator for useContract (#185)

* create a status indicator for useContract

* changeset

* Remove unnecessary story

Co-authored-by: Catalin Casuneanu <[email protected]>
Co-authored-by: Dhaiwat Pandya <[email protected]>

Author: 3 people

.changeset/short-eggs-juggle.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/hooks': minor
+---
+
+useContract status indicator

packages/hooks/src/hooks/useContract.ts

@@ -5,6 +5,7 @@ import { Contract } from 'ethers';
 export function useContract(address: string, abi) {
   const context = React.useContext(Web3Context);
   const [contract, setContract] = React.useState({});
+  const [isReady, setIsReady] = React.useState(false);
   React.useEffect(() => {
     if (context) {
       const newContract = new Contract(
@@ -21,7 +22,8 @@ export function useContract(address: string, abi) {
         };
       }, {});
       setContract(contractInterface);
+      setIsReady(true);
     }
   }, [context]);
-  return contract;
+  return [contract, isReady];
 }

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

@@ -60,7 +60,7 @@ const ABI = [
 
 const Default = () => {
   const { connectWallet, disconnectWallet, connected } = useWallet();
-  const contract = useContract(ADDRESS, ABI);
+  const [contract, isReady] = useContract(ADDRESS, ABI);
   const [state, setState] = React.useState({
     newGreeting: '',
     toAddress: '',
@@ -89,7 +89,10 @@ const Default = () => {
         <h3>Contract Methods</h3>
         <Button onClick={handleGreet}>greet</Button>
         <Divider />
-        <Button disabled={!state.newGreeting} onClick={handleSetGreeting}>
+        <Button
+          disabled={!state.newGreeting || !isReady}
+          onClick={handleSetGreeting}
+        >
           setGreeting
         </Button>
         <Input

packages/hooks/src/stories/UseTransaction.stories.tsx

@@ -71,7 +71,7 @@ const ABI = [
 
 const UsingUseContract = () => {
   const { connectWallet, disconnectWallet, connected } = useWallet();
-  const contract = useContract(ADDRESS, ABI);
+  const [contract, _] = useContract(ADDRESS, ABI);
   const [value, setValue] = React.useState('');
 
   const greet = async () => {
@@ -123,42 +123,3 @@ export const WithUseContract = () => {
     </Provider>
   );
 };
-
-const UsingProvider = () => {
-  const { connectWallet, connected, disconnectWallet } = useWallet();
-
-  const [execute, loading, error] = useTransaction(connectWallet);
-  const [
-    executeDisconnectWallet,
-    disconnectWalletLoading,
-    disconnectWalletError
-  ] = useTransaction(disconnectWallet);
-
-  if (connected) {
-    return (
-      <div>
-        <Button onClick={executeDisconnectWallet}>Disconnect Wallet</Button>
-        <Text>Loading: {disconnectWalletLoading.toString()}</Text>
-        <Text color={disconnectWalletError ? 'red' : 'black'}>
-          Error: {disconnectWalletError ? disconnectWalletError : 'No error'}
-        </Text>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <Button onClick={execute}>Connect Wallet</Button>
-      <Text>Loading: {loading.toString()}</Text>
-      <Text color={error ? 'red' : 'black'}>
-        Error: {error ? error : 'No error'}
-      </Text>
-    </div>
-  );
-};
-
-export const ConnectWallet = () => (
-  <Provider network={NETWORKS.mainnet}>
-    <UsingProvider />
-  </Provider>
-);