Added information during minting process for better user feedback

Author: Brian

frontend/_tests_/mocks/web3.js

@@ -0,0 +1,41 @@
+let defaultAccounts = [];
+let defaultNetwork = '1';
+let accounts = defaultAccounts.slice();
+let network = defaultNetwork;
+
+const web3Mock = {
+  eth: {
+    accounts: {
+      wallet: {
+        length: 0,
+      },
+    },
+    getAccounts: (cb) => cb(null, accounts),
+    net: {
+      getId: (cb) => cb(null, network),
+    },
+  },
+  currentProvider: {
+    enable: () => {
+      return Promise.resolve(accounts);
+    },
+  },
+  setNetwork: (v) => (network = v),
+  setAccounts: (v) => {
+    accounts = v;
+    accounts.forEach((address, i) => {
+      web3.eth.accounts.wallet[i] = {
+        address: address,
+      };
+    });
+    web3.eth.accounts.wallet.length = accounts.length;
+  },
+  restore: () => {
+    accounts = defaultAccounts.slice();
+    network = defaultNetwork;
+    web3.eth.accounts.wallet = { length: 0 };
+  },
+  version: '1.0.0-beta.20',
+};
+
+export default web3Mock;

frontend/_tests_/pages/mint.test.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import testCommonLink from '../utils/testCommons';
+import web3Mock from '../mocks/web3';
+
+import MintPage from '../../src/pages/mint';
+
+// Mocks
+
+// - Wallet mock
+
+// Tests
+
+// - Expected Negative Interactions
+
+// -- User unsuccessfully connects wallet
+
+// -- Browser does not have web3 support
+describe('Browser does not support Web3', () => {
+  it('Web3 not defined', () => {
+    const originalEthereum = global.window.ethereum;
+    render(<MintPage />);
+    expect(originalEthereum).toBeUndefined();
+  });
+});
+// -- Insufficient funds
+
+// -- Transaction failed (could not connect)
+
+// -- Token already minted
+
+// - Expected Positive Interactions
+
+// -- When user arrives on page mint button should be disabled, connect wallet should be enabled
+describe('Positive Interactions', () => {
+  it('Render page default correctly', () => {
+    render(<MintPage />);
+
+    const ddaoTokenSearch = screen.getByRole('link', {
+      name: /here/,
+    });
+
+    testCommonLink(ddaoTokenSearch, 'http://ddao.ibby.dev');
+
+    const connectWalletButton = screen.getByRole('button', {
+      name: /connectWalletText/,
+    });
+
+    // - [Button] - Connect Wallet
+    expect(connectWalletButton).toBeInTheDocument();
+  });
+});
+
+// -- User Connects Wallet Successfully
+
+// -- User sucessfully starts transacion to mint token
+
+// -- User successfully mints token

frontend/src/components/DirectMint/DirectMint.tsx

@@ -4,7 +4,24 @@ import React, {
   useState,
   useEffect,
 } from 'react';
-import { useToast, Button, Input, Text } from '@chakra-ui/react';
+import {
+  useToast,
+  Button,
+  Input,
+  Text,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  CircularProgress,
+  Center,
+  Link,
+  Stack,
+} from '@chakra-ui/react';
+import { ExternalLinkIcon } from '@chakra-ui/icons';
 import { ethers } from 'ethers';
 import WalletConnectProvider from '@walletconnect/web3-provider';
 import Web3Modal from 'web3modal';
@@ -39,6 +56,10 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
   const [tokenID, setTokenID] = useState(developerId ? developerId : '');
   const [networkError, setNetworkError] = useState(false);
   const [web3Modal, setWeb3Modal] = useState<Web3Modal>();
+  const [txInProgress, setTxInProgress] = useState(false);
+  const [txReceipt, setTxReceipt] = useState('');
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   const toast = useToast();
 
@@ -55,7 +76,8 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
     const _web3 = new ethers.providers.Web3Provider(_provider);
     _signer = _web3.getSigner();
     mint_contract = new ethers.Contract(
-      DEVELOPER_DAO_CONTRACT,
+      //DEVELOPER_DAO_CONTRACT,
+      '0xbf114c4cbb4e70e6098589a918c84292cb40602a',
       MINT_CONTRACT.abi,
       _signer,
     );
@@ -70,7 +92,8 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
   };
 
   const _checkNetwork = (chainId: number) => {
-    if (chainId === MAINNET_NETWORK_ID) {
+    if (chainId === 4) {
+      //MAINNET_NETWORK_ID) {
       return true;
     }
     setNetworkError(true);
@@ -121,18 +144,17 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
   ) => {
     try {
       const tx = await mint_contract.claim(tokenID);
-
-      toast({
-        title: t('transactionSending'),
-        isClosable: true,
-      });
+      setTxInProgress(true);
+      onOpen();
 
       const receipt = await tx.wait();
+      setTxReceipt(receipt.transactionHash);
 
       if (receipt.status === 0) {
         throw new Error('Transaction failed');
       }
     } catch (error: any) {
+      setTxInProgress(false);
       if (error.code === ERROR_CODE_TX_REJECTED_BY_USER) {
         toast({
           title: t('userCancelTransaction'),
@@ -151,16 +173,15 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
       setTokenID('');
       return;
     }
-
-    toast({
-      title: t('TokenMintMessage'),
-      description: t('NFTMintSuccess'),
-      status: 'success',
-      isClosable: true,
-    });
     setTokenID('');
   };
 
+  const modalCloseHandler = () => {
+    setTxInProgress(false);
+    setTxReceipt('');
+    onClose();
+  };
+
   return (
     <>
       {!userWallet && (
@@ -175,38 +196,78 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
         </Button>
       )}
       {userWallet && (
-        <Input
-          w="100%"
-          size="md"
-          value={tokenID}
-          onChange={tokenNameHandler}
-          type="text"
-          placeholder={t('tokenIDPlaceholder')}
-          mt="10"
-        ></Input>
-      )}
+        <>
+          <Input
+            w="100%"
+            size="md"
+            value={tokenID}
+            onChange={tokenNameHandler}
+            type="text"
+            placeholder={t('tokenIDPlaceholder')}
+            mt="10"
+          ></Input>
 
-      <Button
-        w="100%"
-        colorScheme="green"
-        onClick={createTokenHandler}
-        disabled={!userWallet || networkError}
-        mt="10"
-        fontSize={{ base: 's', sm: 'xl' }}
-      >
-        {t('mintTokenText')}
-      </Button>
+          <Button
+            w="100%"
+            colorScheme="green"
+            onClick={createTokenHandler}
+            disabled={networkError}
+            mt="10"
+            fontSize={{ base: 's', sm: 'xl' }}
+          >
+            {t('mintTokenText')}
+          </Button>
 
-      {userWallet && (
-        <Button
-          w="100%"
-          colorScheme="orange"
-          onClick={disconnectWallet}
-          mt="10"
-          fontSize={{ base: 's', sm: 'xl' }}
-        >
-          {t('disconnectWallet')}
-        </Button>
+          {userWallet && (
+            <Button
+              w="100%"
+              colorScheme="orange"
+              onClick={disconnectWallet}
+              mt="10"
+              fontSize={{ base: 's', sm: 'xl' }}
+            >
+              {t('disconnectWallet')}
+            </Button>
+          )}
+        </>
+      )}
+
+      {txInProgress && (
+        <Modal isOpen={isOpen} onClose={modalCloseHandler} isCentered>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>Minting your NFT...</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody>
+              <Center h="160px">
+                {!txReceipt && (
+                  <CircularProgress
+                    isIndeterminate
+                    color="green.300"
+                    size="100px"
+                  />
+                )}
+                {txReceipt && (
+                  <>
+                    <Stack spacing={6}>
+                      <Text color="green.500" fontSize="lg">
+                        Your NFT has been minted!
+                      </Text>
+                      <Link
+                        fontSize="lg"
+                        color="#3182ce"
+                        href={`https://rinkeby.etherscan.io/tx/${txReceipt}`}
+                        isExternal
+                      >
+                        View your TX on Etherscan <ExternalLinkIcon mx="2px" />
+                      </Link>
+                    </Stack>
+                  </>
+                )}
+              </Center>
+            </ModalBody>
+          </ModalContent>
+        </Modal>
       )}
 
       {networkError && <Text color="red">{t('ethereumNetworkPrompt')}</Text>}