Adapt env var with .env.development and .env.production

Author: kavimaluskam

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/$DEVELOPER_DAO_CONTRACT
+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://testnets.opensea.io/assets/$DEVELOPER_DAO_CONTRACT
+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/README.md

@@ -84,6 +84,7 @@ 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`.
 
 ## Contributing
 

frontend/src/components/DirectMint/DirectMint.tsx

@@ -26,12 +26,12 @@ 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,
   NETWORK_ID,
   ETHERSCAN_TX_URL,
+  INFURA_ID,
 } from '../../utils/DeveloperDaoConstants';
 
 import MINT_CONTRACT from '../../artifacts/ddao.json';
@@ -47,7 +47,7 @@ const providerOptions = {
   walletconnect: {
     package: WalletConnectProvider,
     options: {
-      infuraId: process.env.NEXT_PUBLIC_INFURA_ID,
+      infuraId: INFURA_ID,
     },
   },
 };
@@ -272,7 +272,7 @@ const DirectMint = ({ developerId }: DirectMintProps) => {
       {networkError && (
         <Text color="red">
           {t(
-            NODE_ENV === 'development'
+            DEVELOPER_DAO_CONTRACT_NETWORK === 'rinkeby'
               ? 'ethereumDevNetworkPrompt'
               : 'ethereumNetworkPrompt',
           )}

frontend/src/components/DirectMint/DirectMintBox.tsx

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

frontend/src/pages/index.tsx

@@ -5,9 +5,9 @@ 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,
   DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER,
   ETHER_SCAN_LINK_PREFIX,
   SITE_URL,
@@ -63,7 +63,7 @@ function App() {
         <VStack mx="auto" px={4} spacing={5} w="full" maxW="lg">
           <Logo w={32} h={32} />
           <VStack w="full">
-            {NODE_ENV === 'development' && (
+            {DEVELOPER_DAO_CONTRACT_NETWORK === 'rinkeby' && (
               <Badge colorScheme="orange">{t('testnet')}</Badge>
             )}
             <Text fontSize="xl">{t('searchId')}</Text>

frontend/src/utils/DeveloperDaoConstants.ts

@@ -1,35 +1,31 @@
-export const NODE_ENV = process.env.NODE_ENV || 'development';
 export const DEVELOPER_DAO_CONTRACT =
-  NODE_ENV === 'production'
-    ? '0x25ed58c027921E14D86380eA2646E3a1B5C55A8b'
-    : '0xbf114c4cbb4e70e6098589a918c84292cb40602a';
+  process.env.NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT ||
+  '0xbf114c4cbb4e70e6098589a918c84292cb40602a';
 export const DEVELOPER_DAO_CONTRACT_NETWORK =
-  NODE_ENV === 'production' ? 'mainnet' : 'rinkeby';
+  process.env.NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT_NETWORK || 'rinkeby';
 export const DEVELOPER_DAO_CONTRACT_NETWORK_PROVIDER =
-  NODE_ENV === 'production' ? 'homestead' : 'rinkeby';
-export const NETWORK_ID = NODE_ENV === 'production' ? 1 : 4;
+  process.env.NEXT_PUBLIC_DEVELOPER_DAO_CONTRACT_NETWORK || 'rinkeby';
+export const NETWORK_ID = process.env.NEXT_PUBLIC_NETWORK_ID || 4;
 export const DEVELOPER_DAO_WEBSITE = 'https://www.developerdao.com';
 export const OPENSEA_DIRECT_LINK_PREFIX =
-  NODE_ENV === 'production'
-    ? `https://opensea.io/assets/${DEVELOPER_DAO_CONTRACT}`
-    : `https://testnets.opensea.io/assets/${DEVELOPER_DAO_CONTRACT}`;
+  process.env.NEXT_PUBLIC_OPENSEA_DIRECT_LINK_PREFIX ||
+  `https://testnets.opensea.io/assets/${DEVELOPER_DAO_CONTRACT}`;
 export const OPENSEA_COLLECTION_LINK =
-  NODE_ENV === 'production'
-    ? `https://opensea.io/collection/devs-for-revolution`
-    : `https://testnets.opensea.io/collection/devs-for-revolution-kexfxbcvp8`;
+  process.env.NEXT_PUBLIC_OPENSEA_COLLECTION_LINK ||
+  `https://testnets.opensea.io/collection/devs-for-revolution-kexfxbcvp8`;
 export const ETHER_SCAN_LINK_PREFIX =
-  NODE_ENV === 'production'
-    ? 'https://etherscan.io/address'
-    : 'https://rinkeby.etherscan.io/address';
+  process.env.NEXT_PUBLIC_ETHER_SCAN_LINK_PREFIX ||
+  'https://rinkeby.etherscan.io/address';
 
 export const SITE_URL = 'https://developerdao.com';
 export const ERROR_CODE_TX_REJECTED_BY_USER = 4001;
 
 export const TOKEN_FINDER_URL = 'https://developerdao.vercel.app/';
 export const ETHERSCAN_TX_URL =
-  NODE_ENV === 'production'
-    ? 'https://etherscan.io/tx/'
-    : 'https://rinkeby.etherscan.io/tx/';
+  process.env.NEXT_PUBLIC_ETHERSCAN_TX_URL ||
+  'https://rinkeby.etherscan.io/tx/';
+
+export const INFURA_ID = process.env.NEXT_PUBLIC_INFURA_ID;
 
 export const DEVELOPER_DAO_CONTRACT_ABI = [
   { inputs: [], stateMutability: 'nonpayable', type: 'constructor' },