Code cleanup

Removed comments from code
Added some static text to translations
Moved Token Search website to constants.
Moved Infura ID to env variable

Added responsiveness to Mint Page

Resize buttons and Text based on screen width

Highlighted link

Highlighted Link to Token Search Page

Generic Human Readable Message

Added generic error message for failed transaction.

Author: Brian

frontend/public/locales/en/common.json

@@ -23,22 +23,23 @@
   "copyLinkToNFT": "Copy link to NFT",
   "linkCopied": "Link copied to clipboard",
   "tokenUnavailable": "Token ID may not be available",
-  "errorString": "error",
-  "successString" : "success",
   "NFTMintSuccess": "Your NFT should now be in your wallet!",
   "TokenMintMessage": "Token Minted",
   "tokenIDPlaceholder": "Enter Token ID",
   "mintTokenText" : "Mint your Token",
   "connectWalletText": "Connect Wallet",
   "ethereumNetworkPrompt": "Please Connect to the Ethereum Network",
   "availableTokensText": "View the available Token IDs",
-  "mintPageHeader": "DDAO Token Minter",
+  "mintPageHeader": "DEVS Token Minter",
   "projectsList": "A list of community projects created by the Developer DAO community.",
   "ddaoTokenSearch": "DDAO Token Search",
   "ddaoUnofficalFrontend": "Developer DAO Unofficial Frontend",
   "ddaoTokenVisualizer": "Developer DAO Token Visualizer",
   "by": "by",
   "otherTokensOwnedByThisAddress":"Other Tokens owned by this address",
   "noOtherTokens":"No other tokens owned by this address",
-  "userCancelTransaction": "Transaction Cancelled by User"
+  "userCancelTransaction": "Transaction Cancelled by User",
+  "transactionSending": "Transaction Being Sent",
+  "here": "here",
+  "errorMinting": "Unable to Mint NFT"
 }

frontend/src/components/DirectMint/DirectMint.tsx

@@ -13,7 +13,6 @@ import {
   DEVELOPER_DAO_CONTRACT,
   ERROR_CODE_TX_REJECTED_BY_USER,
   MAINNET_NETWORK_ID,
-  INFURA_ID,
 } from '../../utils/DeveloperDaoConstants';
 
 import MINT_CONTRACT from '../../artifacts/ddao.json';
@@ -27,15 +26,13 @@ interface DirectMintProps {
 
 const providerOptions = {
   walletconnect: {
-    package: WalletConnectProvider, // required
+    package: WalletConnectProvider,
     options: {
-      infuraId: INFURA_ID, // required
+      infuraId: process.env.INFURA_ID,
     },
   },
 };
 
-// Logic & buttons needed for Direct Minting
-// Can be reused anywhere else as needed
 const DirectMint = ({ developerId }: DirectMintProps) => {
   const { t } = useTranslation();
   const [userWallet, setUserWallet] = useState('');
@@ -47,9 +44,9 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
 
   useEffect(() => {
     const web3Modal = new Web3Modal({
-      network: 'mainnet', // optional
-      cacheProvider: false, // optional
-      providerOptions, // required
+      network: 'mainnet',
+      cacheProvider: false,
+      providerOptions,
     });
     setWeb3Modal(web3Modal);
   }, []);
@@ -66,7 +63,6 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
     const accounts = await _web3.listAccounts();
     const { chainId } = await _web3.getNetwork();
 
-    // MetaMask does not give you all accounts, only the selected account
     const selectedAccount = accounts[0];
 
     setUserWallet(selectedAccount);
@@ -90,17 +86,14 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
       return;
     }
 
-    // Subscribe to accounts change
     _provider.on('accountsChanged', (accounts: string) => {
       fetchAccountData();
     });
 
-    // Subscribe to chainId change
     _provider.on('chainChanged', (chainId: string) => {
       fetchAccountData();
     });
 
-    // Subscribe to networkId change
     _provider.on('networkChanged', (networkId: string) => {
       setNetworkError(false);
       fetchAccountData();
@@ -117,63 +110,42 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
     event,
   ) => {
     try {
-      // If a transaction fails, we save that error in the component's state.
-      // We only save one such error, so before sending a second transaction, we
-      // clear it.
-
-      // We send the transaction, and save its hash in the Dapp's state. This
-      // way we can indicate that we are waiting for it to be mined.
       const tx = await mint_contract.claim(tokenID);
 
-      //Alert transaction is in progress
       toast({
-        title: 'Transaction Being Sent',
+        title: t('transactionSending'),
         isClosable: true,
       });
 
-      // We use .wait() to wait for the transaction to be mined. This method
-      // returns the transaction's receipt.
       const receipt = await tx.wait();
 
-      // The receipt, contains a status flag, which is 0 to indicate an error.
       if (receipt.status === 0) {
-        // We can't know the exact error that make the transaction fail once it
-        // was mined, so we throw this generic one.
         throw new Error('Transaction failed');
       }
-
-      // If we got here, the transaction was successful, so you may want to
-      // update your state. Here, we update the user's balance.
     } catch (error: any) {
-      // We check the error code to see if this error was produced because the
-      // user rejected a tx. If that's the case, we do nothing.
       if (error.code === ERROR_CODE_TX_REJECTED_BY_USER) {
-        // resetFields();
         toast({
           title: t('userCancelTransaction'),
           status: 'error',
           isClosable: true,
         });
         return;
       }
-      // Other errors are logged and stored in the Dapp's state. This is used to
-      // show them to the user, and for debugging.
-      //console.error(error);
+
       toast({
-        title: error.code,
+        title: t('errorMinting'),
         description: t('tokenUnavailable'),
-        status: t('errorString'),
+        status: 'error',
         isClosable: true,
       });
       setTokenID('');
       return;
     }
-    // If we leave the try/catch, we aren't sending a tx anymore, so we clear
-    // this part of the state.
+
     toast({
       title: t('TokenMintMessage'),
       description: t('NFTMintSuccess'),
-      status: t('successString'),
+      status: 'success',
       isClosable: true,
     });
     setTokenID('');
@@ -182,7 +154,13 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
   return (
     <>
       {!userWallet && (
-        <Button w="100%" colorScheme="blue" onClick={connectWallet} mt="10">
+        <Button
+          w="100%"
+          colorScheme="blue"
+          onClick={connectWallet}
+          mt="10"
+          fontSize={{ base: 's', sm: 'xl' }}
+        >
           {t('connectWalletText')}
         </Button>
       )}
@@ -204,6 +182,7 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
         onClick={createTokenHandler}
         disabled={!userWallet || networkError}
         mt="10"
+        fontSize={{ base: 's', sm: 'xl' }}
       >
         {t('mintTokenText')}
       </Button>

frontend/src/components/DirectMint/DirectMintBox.tsx

@@ -11,6 +11,7 @@ import {
   Link,
 } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
+import { TOKEN_FINDER_URL } from '../../utils/DeveloperDaoConstants';
 
 // Layout for the Direct Mint Box
 // used on the minting page
@@ -19,14 +20,21 @@ const DirectMintBox = () => {
   return (
     <>
       <Container maxW="container.md" centerContent>
-        <Box borderWidth="4px" borderRadius="lg" w="75%" padding="20">
+        <Box
+          borderWidth="4px"
+          borderRadius="lg"
+          w={{ base: '75%', s: '90%' }}
+          padding="20"
+        >
           <Stack spacing={6} align="center">
             <Logo w={52} h={52} />
-            <Heading>{t('mintPageHeader')}</Heading>
-            <Text>
+            <Heading fontSize={{ base: '1.25rem', sm: '2rem' }}>
+              {t('mintPageHeader')}
+            </Heading>
+            <Text fontSize={{ base: 'xs', sm: 'xl' }}>
               {t('availableTokensText')}{' '}
-              <Link href="https://ddao.ibby.dev" isExternal>
-                here
+              <Link color="#3182ce" href={TOKEN_FINDER_URL} isExternal>
+                {t('here')}
               </Link>
             </Text>
             <DirectMint />

frontend/src/components/Nav/index.tsx

@@ -38,7 +38,7 @@ function Nav() {
             {t('home')}
           </Link>
           <Link href="/mint" passHref>
-            Mint your token
+            {t('mintTokenText')}
           </Link>
           <Link href="/projects" passHref>
             {t('projects')}

frontend/src/pages/index.tsx

@@ -23,7 +23,6 @@ import Logo from '../components/Logo';
 import PageLayout from '../layout/Page';
 import DevName from '../components/Search/Dev/DevName';
 import { useNftImageContent } from '../utils/useNftImageContent';
-import DirectMint from '../components/DirectMint/DirectMint';
 import OtherDevsByOwnerContainer from '../components/Search/OtherDevsByOwner/OtherDevsByOwner';
 
 function App() {

frontend/src/utils/DeveloperDaoConstants.ts

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