UI adjustment for testnet on developement enviornment

Author: kavimaluskam

frontend/public/locales/en/common.json

@@ -28,6 +28,7 @@
   "tokenIDPlaceholder": "Enter Token ID",
   "mintTokenText" : "Mint your Token",
   "connectWalletText": "Connect Wallet",
+  "ethereumDevNetworkPrompt": "Please Connect to the Ethereum Rinkeby Testnet",
   "ethereumNetworkPrompt": "Please Connect to the Ethereum Mainnet",
   "availableTokensText": "View the available Token IDs",
   "mintPageHeader": "DEVS Token Minter",
@@ -43,5 +44,6 @@
   "here": "here",
   "errorMinting": "Unable to Mint NFT",
   "disconnectWallet": "Disconnect Wallet",
-  "etherscanMessage": "View your TX on Etherscan"
+  "etherscanMessage": "View your TX on Etherscan",
+  "testnet": "Testnet"
 }

frontend/src/components/DirectMint/DirectMint.tsx

@@ -26,6 +26,7 @@ import WalletConnectProvider from '@walletconnect/web3-provider';
 import Web3Modal from 'web3modal';
 import { useTranslation } from 'next-i18next';
 import {
+  NODE_ENV,
   DEVELOPER_DAO_CONTRACT,
   DEVELOPER_DAO_CONTRACT_NETWORK,
   ERROR_CODE_TX_REJECTED_BY_USER,
@@ -269,7 +270,12 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
         </Modal>
       )}
 
-      {networkError && <Text color="red">{t('ethereumNetworkPrompt')}</Text>}
+      {networkError && NODE_ENV === 'development' && (
+        <Text color="red">{t('ethereumDevNetworkPrompt')}</Text>
+      )}
+      {networkError && NODE_ENV === 'production' && (
+        <Text color="red">{t('ethereumNetworkPrompt')}</Text>
+      )}
     </>
   );
 };

frontend/src/components/DirectMint/DirectMintBox.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import DirectMint from './DirectMint';
 import Logo from '../../components/Logo';
 import {
+  Badge,
   Box,
   Container,
   Flex,
@@ -11,7 +12,7 @@ import {
   Link,
 } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
-import { TOKEN_FINDER_URL } from '../../utils/DeveloperDaoConstants';
+import { NODE_ENV, TOKEN_FINDER_URL } from '../../utils/DeveloperDaoConstants';
 
 // Layout for the Direct Mint Box
 // used on the minting page
@@ -28,6 +29,9 @@ const DirectMintBox = () => {
         >
           <Stack spacing={6} align="center">
             <Logo w={52} h={52} />
+            {NODE_ENV === 'development' && (
+              <Badge colorScheme="orange">{t('testnet')}</Badge>
+            )}
             <Heading fontSize={{ base: '1.25rem', sm: '2rem' }}>
               {t('mintPageHeader')}
             </Heading>

frontend/src/pages/index.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useTranslation } from 'next-i18next';
 import {
+  NODE_ENV,
   DEVELOPER_DAO_CONTRACT,
   DEVELOPER_DAO_CONTRACT_ABI,
   DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER,
@@ -13,6 +14,7 @@ import {
 } from '../utils/DeveloperDaoConstants';
 import {
   chakra,
+  Badge,
   Input,
   Text,
   Button,
@@ -61,6 +63,9 @@ function App() {
         <VStack mx="auto" px={4} spacing={5} w="full" maxW="lg">
           <Logo w={32} h={32} />
           <VStack w="full">
+            {NODE_ENV === 'development' && (
+              <Badge colorScheme="orange">{t('testnet')}</Badge>
+            )}
             <Text fontSize="xl">{t('searchId')}</Text>
             <Input
               aria-label="Search by developer ID"