PR changes requested by team members

Added Translations, removed margins and incorporated Chakra UI Stacks.

Co-Authored-By: Nagma <[email protected]>

Author: 2 people

frontend/public/locales/en/common.json

@@ -15,5 +15,16 @@
   "hosting": "Hosting by:",
   "copyLinkToNFT": "Copy link to NFT",
   "linkCopied": "Link copied to clipboard",
-  "projects": "A list of community projects created by the Developer DAO community."
+  "projects": "A list of community projects created by the Developer DAO community.",
+  "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"
 }

frontend/src/components/DirectMint/DirectMint.tsx

@@ -4,16 +4,19 @@ import React, {
   useState,
   useEffect,
 } from 'react';
-import { useToast, Button, Input } from '@chakra-ui/react';
+import { useToast, Button, Input, Stack } from '@chakra-ui/react';
 import { ethers } from 'ethers';
 import WalletConnectProvider from '@walletconnect/web3-provider';
 import Web3Modal from 'web3modal';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
+import {
+  CONTRACT_ADDRESS,
+  ERROR_CODE_TX_REJECTED_BY_USER,
+  MAINNET_NETWORK_ID,
+  INFURA_ID,
+} from '../../utils/DeveloperDaoConstants';
 
 import MINT_CONTRACT from '../../artifacts/ddao.json';
-const CONTRACT_ADDRESS = '0x25ed58c027921e14d86380ea2646e3a1b5c55a8b';
-const ERROR_CODE_TX_REJECTED_BY_USER = 4001;
-const MAINNET_NETWORK_ID = 1;
 let _provider: any = null;
 let _signer: any = null;
 let mint_contract: Partial<ethers.Contract>;
@@ -26,7 +29,7 @@ const providerOptions = {
   walletconnect: {
     package: WalletConnectProvider, // required
     options: {
-      infuraId: '86ddbc7b94ff40af908eaed373ac95d6', // required
+      infuraId: INFURA_ID, // required
     },
   },
 };
@@ -158,8 +161,8 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
       //console.error(error);
       toast({
         title: error.code,
-        description: 'Token ID may not be available',
-        status: 'error',
+        description: t('tokenUnavailable'),
+        status: t('errorString'),
         isClosable: true,
       });
       setTokenID('');
@@ -168,9 +171,9 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
     // If we leave the try/catch, we aren't sending a tx anymore, so we clear
     // this part of the state.
     toast({
-      title: 'Token Minted',
-      description: 'Your NFT should now be in your wallet!',
-      status: 'success',
+      title: t('TokenMintMessage'),
+      description: t('NFTMintSuccess'),
+      status: t('successString'),
       isClosable: true,
     });
     setTokenID('');
@@ -180,7 +183,7 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
     <>
       {!userWallet && (
         <Button w="100%" colorScheme="blue" onClick={connectWallet} mt="10">
-          Connect Wallet
+          {t('connectWalletText')}
         </Button>
       )}
       {userWallet && (
@@ -190,21 +193,23 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
           value={tokenID}
           onChange={tokenNameHandler}
           type="text"
-          placeholder="Enter Token ID"
+          placeholder={t('tokenIDPlaceholder')}
           mt="10"
         ></Input>
       )}
+
       <Button
         w="100%"
         colorScheme="green"
         onClick={createTokenHandler}
         disabled={!userWallet || networkError}
         mt="10"
       >
-        Mint your token
+        {t('mintTokenText')}
       </Button>
+
       {networkError && (
-        <p className="network_error">Please Connect to the Ethereum Network</p>
+        <p className="network_error">{t('EthereumNetworkPrompt')}</p>
       )}
     </>
   );

frontend/src/components/DirectMint/DirectMintBox.tsx

@@ -1,20 +1,36 @@
 import React from 'react';
 import DirectMint from './DirectMint';
 import Logo from '../../components/Logo';
-import { Box, Container, Flex, Heading } from '@chakra-ui/react';
+import {
+  Box,
+  Container,
+  Flex,
+  Heading,
+  Stack,
+  Text,
+  Link,
+} from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
 
 // Layout for the Direct Mint Box
 // used on the minting page
 const DirectMintBox = () => {
+  const { t } = useTranslation();
   return (
     <>
       <Container maxW="container.md" centerContent>
         <Box borderWidth="4px" borderRadius="lg" w="75%" padding="20">
-          <Flex flexDirection="column" justify="center" align="center">
+          <Stack spacing={6} align="center">
             <Logo w={52} h={52} />
-            <Heading marginTop="6">DDAO Token Minter</Heading>
+            <Heading>{t('mintPageHeader')}</Heading>
+            <Text>
+              {t('availableTokensText')}{' '}
+              <Link href="https://ddao.ibby.dev" isExternal>
+                here
+              </Link>
+            </Text>
             <DirectMint />
-          </Flex>
+          </Stack>
         </Box>
       </Container>
     </>

frontend/src/pages/mint.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import DirectMintBox from '../components/DirectMint/DirectMintBox';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTranslation } from 'next-i18next';
 import PageLayout from '../layout/Page';
-import { useTranslation } from 'react-i18next';
 import { chakra } from '@chakra-ui/react';
 
 const Mint = () => {

frontend/src/utils/DeveloperDaoConstants.ts

@@ -4,3 +4,7 @@ export const DEVELOPER_DAO_WEBSITE = 'https://www.developerdao.com';
 export const OPENSEA_DIRECT_LINK_PREFIX = `https://opensea.io/assets/${DEVELOPER_DAO_CONTRACT}`;
 export const ETHER_SCAN_LINK_PREFIX = 'https://etherscan.io/address';
 export const SITE_URL = 'https://developerdao.com';
+export const CONTRACT_ADDRESS = '0x25ed58c027921e14d86380ea2646e3a1b5c55a8b';
+export const ERROR_CODE_TX_REJECTED_BY_USER = 4001;
+export const MAINNET_NETWORK_ID = 1;
+export const INFURA_ID = '86ddbc7b94ff40af908eaed373ac95d6';