Merge pull request #162 from kavimaluskam/feature/testnet-local-environment

Feature: Testnet local environment

Author: Narb

frontend/.env.development

@@ -0,0 +1,9 @@
+NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT=0xbf114c4cbb4e70e6098589a918c84292cb40602a
+NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT_NETWORK=rinkeby
+NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER=rinkeby
+NEXT_PUBLIC_NETWORK_ID=4
+NEXT_PUBLIC_OPENSEA_DIRECT_LINK_PREFIX=https://testnets.opensea.io/assets/0xbf114c4cbb4e70e6098589a918c84292cb40602a
+NEXT_PUBLIC_OPENSEA_COLLECTION_LINK=https://testnets.opensea.io/collection/devs-for-revolution-kexfxbcvp8
+NEXT_PUBLIC_ETHER_SCAN_LINK_PREFIX=https://rinkeby.etherscan.io/address
+NEXT_PUBLIC_ETHERSCAN_TX_URL=https://rinkeby.etherscan.io/tx/
+NEXT_PUBLIC_INFURA_ID=

frontend/.env.production

@@ -0,0 +1,9 @@
+NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT=0x25ed58c027921E14D86380eA2646E3a1B5C55A8b
+NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT_NETWORK=mainnet
+NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER=homestead
+NEXT_PUBLIC_NETWORK_ID=1
+NEXT_PUBLIC_OPENSEA_DIRECT_LINK_PREFIX=https://opensea.io/assets/0x25ed58c027921E14D86380eA2646E3a1B5C55A8b
+NEXT_PUBLIC_OPENSEA_COLLECTION_LINK=https://opensea.io/collection/devs-for-revolution
+NEXT_PUBLIC_ETHER_SCAN_LINK_PREFIX=https://etherscan.io/address
+NEXT_PUBLIC_ETHERSCAN_TX_URL=https://etherscan.io/tx/
+NEXT_PUBLIC_INFURA_ID=

frontend/README.md

@@ -84,6 +84,8 @@ nvm install; # to install the version in .nvmrc
 2. Install dependencies by running `yarn`
 3. Start the development server with `yarn dev`
 4. Open development site by going to `http:localhost:3000`
+5. To test Walletconnect functionality, copy `.env.development` to `.env.local` and fill in your `INFURA_ID`.
+   `INFURA_ID` can be easily obtained by register at <https://infura.io/>, then create a new Ethereum project for free.
 
 ## Contributing
 

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",
   "remainingTokensText": "{{remainingTokens}} tokens left / {{uniqueAddressCount}} devs joined",
@@ -44,5 +45,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

@@ -27,9 +27,11 @@ import Web3Modal from 'web3modal';
 import { useTranslation } from 'next-i18next';
 import {
   DEVELOPER_DAO_CONTRACT,
+  DEVELOPER_DAO_CONTRACT_NETWORK,
   ERROR_CODE_TX_REJECTED_BY_USER,
-  MAINNET_NETWORK_ID,
+  NETWORK_ID,
   ETHERSCAN_TX_URL,
+  INFURA_ID,
 } from '../../utils/DeveloperDaoConstants';
 
 import MINT_CONTRACT from '../../artifacts/ddao.json';
@@ -45,7 +47,7 @@ const providerOptions = {
   walletconnect: {
     package: WalletConnectProvider,
     options: {
-      infuraId: process.env.NEXT_PUBLIC_INFURA_ID,
+      infuraId: INFURA_ID,
     },
   },
 };
@@ -65,7 +67,7 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
 
   useEffect(() => {
     const web3Modal = new Web3Modal({
-      network: 'mainnet',
+      network: DEVELOPER_DAO_CONTRACT_NETWORK,
       cacheProvider: false,
       providerOptions,
     });
@@ -91,7 +93,7 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
   };
 
   const _checkNetwork = (chainId: number) => {
-    if (chainId === MAINNET_NETWORK_ID) {
+    if (chainId === Number(NETWORK_ID)) {
       return true;
     }
     setNetworkError(true);
@@ -267,8 +269,15 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
           </ModalContent>
         </Modal>
       )}
-
-      {networkError && <Text color="red">{t('ethereumNetworkPrompt')}</Text>}
+      {networkError && (
+        <Text color="red">
+          {t(
+            DEVELOPER_DAO_CONTRACT_NETWORK === 'rinkeby'
+              ? 'ethereumDevNetworkPrompt'
+              : '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,10 @@ import {
   Link,
 } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
-import { TOKEN_FINDER_URL } from '../../utils/DeveloperDaoConstants';
+import {
+  DEVELOPER_DAO_CONTRACT_NETWORK,
+  TOKEN_FINDER_URL,
+} from '../../utils/DeveloperDaoConstants';
 import { useDevNFTSupply } from '../../hooks/useDevNFTSupply';
 
 // Layout for the Direct Mint Box
@@ -32,6 +36,9 @@ const DirectMintBox = () => {
         >
           <Stack spacing={6} align="center">
             <Logo w={52} h={52} />
+            {DEVELOPER_DAO_CONTRACT_NETWORK === 'rinkeby' && (
+              <Badge colorScheme="orange">{t('testnet')}</Badge>
+            )}
             <Heading fontSize={{ base: '1.25rem', sm: '2rem' }}>
               {t('mintPageHeader')}
             </Heading>

frontend/src/components/Footer/index.tsx

@@ -9,6 +9,11 @@ import {
   IconGitHub,
   IconDiscourse,
 } from '../Icons';
+import {
+  DEVELOPER_DAO_CONTRACT,
+  ETHER_SCAN_LINK_PREFIX,
+  OPENSEA_COLLECTION_LINK,
+} from '../../utils/DeveloperDaoConstants';
 
 function Footer() {
   const { t } = useTranslation();
@@ -24,7 +29,7 @@ function Footer() {
             <a
               title="OpenSea"
               className="mx-2 block"
-              href="https://opensea.io/collection/devs-for-revolution"
+              href={OPENSEA_COLLECTION_LINK}
               target="_blank"
               rel="noreferrer"
             >
@@ -35,7 +40,7 @@ function Footer() {
             <a
               title="Etherscan"
               className="mx-2 block"
-              href="https://etherscan.io/address/0x25ed58c027921e14d86380ea2646e3a1b5c55a8b"
+              href={`${ETHER_SCAN_LINK_PREFIX}/${DEVELOPER_DAO_CONTRACT}`}
               target="_blank"
               rel="noreferrer"
             >

frontend/src/hooks/useDevNFTSupply.ts

@@ -6,7 +6,10 @@ import {
   InfuraProvider,
 } from '@ethersproject/providers';
 
-import { DEVELOPER_DAO_CONTRACT } from '../utils/DeveloperDaoConstants';
+import {
+  DEVELOPER_DAO_CONTRACT,
+  DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER,
+} from '../utils/DeveloperDaoConstants';
 import { Ddao__factory } from '../../types/ethers-contracts/factories/Ddao__factory';
 
 // TokenIDs start at 1. Tokens 1-7777 (supply of 7777) are open to mint by anyone. 7778-8000 are locked to mint by contract owner
@@ -24,8 +27,16 @@ export function useDevNFTSupply() {
       const contract = Ddao__factory.connect(
         DEVELOPER_DAO_CONTRACT,
         new FallbackProvider([
-          { provider: new InfuraProvider() },
-          { provider: new AlchemyProvider() },
+          {
+            provider: new InfuraProvider(
+              DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER,
+            ),
+          },
+          {
+            provider: new AlchemyProvider(
+              DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER,
+            ),
+          },
         ]),
       );
 

frontend/src/pages/index.tsx

@@ -7,11 +7,14 @@ import { useTranslation } from 'next-i18next';
 import {
   DEVELOPER_DAO_CONTRACT,
   DEVELOPER_DAO_CONTRACT_ABI,
+  DEVELOPER_DAO_CONTRACT_NETWORK,
+  DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER,
   ETHER_SCAN_LINK_PREFIX,
   SITE_URL,
 } from '../utils/DeveloperDaoConstants';
 import {
   chakra,
+  Badge,
   Input,
   Text,
   Button,
@@ -33,7 +36,7 @@ function App() {
 
   const ethersConfig = {
     ethers: { Contract },
-    provider: getDefaultProvider('homestead'),
+    provider: getDefaultProvider(DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER),
   };
 
   const updateDeveloperId = useCallback(
@@ -60,6 +63,9 @@ function App() {
         <VStack mx="auto" px={4} spacing={5} w="full" maxW="lg">
           <Logo w={32} h={32} />
           <VStack w="full">
+            {DEVELOPER_DAO_CONTRACT_NETWORK === 'rinkeby' && (
+              <Badge colorScheme="orange">{t('testnet')}</Badge>
+            )}
             <Text fontSize="xl">{t('searchId')}</Text>
             <Input
               aria-label="Search by developer ID"
@@ -148,7 +154,7 @@ function Nft({ developerId }: { developerId: string }) {
             new ethers.Contract(
               DEVELOPER_DAO_CONTRACT,
               DEVELOPER_DAO_CONTRACT_ABI,
-              getDefaultProvider('homestead'),
+              getDefaultProvider(DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER),
             )
           }
         ></OtherDevsByOwnerContainer>

frontend/src/utils/DeveloperDaoConstants.ts

@@ -1,13 +1,26 @@
-export const DEVELOPER_DAO_CONTRACT =
-  '0x25ed58c027921E14D86380eA2646E3a1B5C55A8b';
+export const DEVELOPER_DAO_CONTRACT = process.env
+  .NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT as string;
+export const DEVELOPER_DAO_CONTRACT_NETWORK = process.env
+  .NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT_NETWORK as string;
+export const DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER = process.env
+  .NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT_NETWORK as string;
+export const NETWORK_ID = process.env.NEXT_PUBLIC_NETWORK_ID;
 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 OPENSEA_DIRECT_LINK_PREFIX = process.env
+  .NEXT_PUBLIC_OPENSEA_DIRECT_LINK_PREFIX as string;
+export const OPENSEA_COLLECTION_LINK = process.env
+  .NEXT_PUBLIC_OPENSEA_COLLECTION_LINK as string;
+export const ETHER_SCAN_LINK_PREFIX = process.env
+  .NEXT_PUBLIC_ETHER_SCAN_LINK_PREFIX as string;
+
 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 = 'https://developerdao.vercel.app/';
-export const ETHERSCAN_TX_URL = 'https://etherscan.io/tx/';
+export const ETHERSCAN_TX_URL = process.env
+  .NEXT_PUBLIC_ETHERSCAN_TX_URL as string;
+
+export const INFURA_ID = process.env.NEXT_PUBLIC_INFURA_ID as string;
 
 export const DEVELOPER_DAO_CONTRACT_ABI = [
   { inputs: [], stateMutability: 'nonpayable', type: 'constructor' },