Added static strings to constants file and translations file.

Code cleanup

Author: Brian

frontend/_tests_/pages/mint.test.jsx

@@ -46,8 +46,13 @@ describe('Positive Interactions', () => {
       name: /connectWalletText/,
     });
 
+    const disconnectWalletButton = screen.getByRole('button', {
+      name: /disconnectWallet/,
+    });
+
     // - [Button] - Connect Wallet
     expect(connectWalletButton).toBeInTheDocument();
+    expect(disconnectWalletButton).toBeInTheDocument();
   });
 });
 

frontend/public/locales/en/common.json

@@ -42,5 +42,6 @@
   "transactionSending": "Transaction Being Sent",
   "here": "here",
   "errorMinting": "Unable to Mint NFT",
-  "disconnectWallet": "Disconnect Wallet"
+  "disconnectWallet": "Disconnect Wallet",
+  "etherscanMessage": "View your TX on Etherscan"
 }

frontend/src/components/DirectMint/DirectMint.tsx

@@ -30,6 +30,7 @@ import {
   DEVELOPER_DAO_CONTRACT,
   ERROR_CODE_TX_REJECTED_BY_USER,
   MAINNET_NETWORK_ID,
+  ETHERSCAN_TX_URL,
 } from '../../utils/DeveloperDaoConstants';
 
 import MINT_CONTRACT from '../../artifacts/ddao.json';
@@ -125,6 +126,8 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
     _provider.on('disconnect', (error: { code: number; message: string }) => {
       web3Modal?.clearCachedProvider();
       setUserWallet('');
+      setTxInProgress(false);
+      setTxReceipt('');
     });
 
     await fetchAccountData();
@@ -133,6 +136,8 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
   const disconnectWallet = async () => {
     await web3Modal?.clearCachedProvider();
     setUserWallet('');
+    setTxInProgress(false);
+    setTxReceipt('');
   };
 
   const tokenNameHandler: ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -218,26 +223,29 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
             {t('mintTokenText')}
           </Button>
 
-          {userWallet && (
-            <Button
-              w="100%"
-              colorScheme="orange"
-              onClick={disconnectWallet}
-              mt="10"
-              fontSize={{ base: 's', sm: 'xl' }}
-            >
-              {t('disconnectWallet')}
-            </Button>
-          )}
+          <Button
+            w="100%"
+            colorScheme="orange"
+            onClick={disconnectWallet}
+            mt="10"
+            fontSize={{ base: 's', sm: 'xl' }}
+          >
+            {t('disconnectWallet')}
+          </Button>
         </>
       )}
 
       {txInProgress && (
-        <Modal isOpen={isOpen} onClose={modalCloseHandler} isCentered>
+        <Modal
+          isOpen={isOpen}
+          onClose={modalCloseHandler}
+          closeOnOverlayClick={false}
+          isCentered
+        >
           <ModalOverlay />
           <ModalContent>
-            <ModalHeader>Minting your NFT...</ModalHeader>
-            <ModalCloseButton />
+            <ModalHeader>Processing transaction...</ModalHeader>
+            {txReceipt && <ModalCloseButton />}
             <ModalBody>
               <Center h="160px">
                 {!txReceipt && (
@@ -248,21 +256,14 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
                   />
                 )}
                 {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>
-                  </>
+                  <Link
+                    fontSize="lg"
+                    color="#3182ce"
+                    href={`${ETHERSCAN_TX_URL}${txReceipt}`}
+                    isExternal
+                  >
+                    {t('etherscanMessage')} <ExternalLinkIcon mx="2px" />
+                  </Link>
                 )}
               </Center>
             </ModalBody>

frontend/src/utils/DeveloperDaoConstants.ts

@@ -7,6 +7,7 @@ export const SITE_URL = 'https://developerdao.com';
 export const ERROR_CODE_TX_REJECTED_BY_USER = 4001;
 export const MAINNET_NETWORK_ID = 1;
 export const TOKEN_FINDER_URL = 'http://ddao.ibby.dev';
+export const ETHERSCAN_TX_URL = 'https://rinkeby.etherscan.io/tx/';
 
 export const DEVELOPER_DAO_CONTRACT_ABI = [
   { inputs: [], stateMutability: 'nonpayable', type: 'constructor' },