pass wallet connect project id in envs

.env.template

@@ -51,3 +51,4 @@ NEXT_PUBLIC_API_PORT=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_PORT__
 # external services config
 NEXT_PUBLIC_SENTRY_DSN=__PLACEHOLDER_FOR_NEXT_PUBLIC_SENTRY_DSN__
 NEXT_PUBLIC_AUTH0_CLIENT_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_AUTH0_CLIENT_ID__
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID__

README.md

@@ -125,6 +125,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_SENTRY_DSN | `string` *(optional)* | Client key for your Sentry.io app | `<secret>` |
 | SENTRY_CSP_REPORT_URI | `string` *(optional)* | URL for sending CSP-reports to your Sentry.io app | `<secret>` |
 | NEXT_PUBLIC_AUTH0_CLIENT_ID | `string` *(optional)* | Client id for [Auth0](https://auth0.com/) provider | `<secret>` |
+| NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID | `string` | Project id for [WalletConnect](https://docs.walletconnect.com/2.0/web3modal/react/installation#obtain-project-id) integration | `<secret>` |
 
 ### Marketplace app configuration properties
 

configs/app/config.ts

@@ -115,6 +115,9 @@ const config = Object.freeze({
     showGasTracker: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER) === 'false' ? false : true,
     showAvgBlockTime: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME) === 'false' ? false : true,
   },
+  walletConnect: {
+    projectId: getEnvValue(process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID),
+  },
 });
 
 export default config;

ui/address/AddressContract.tsx

@@ -43,10 +43,8 @@ export const currentChain: Chain = {
 
 const chains = [ currentChain ];
 
-const PROJECT_ID = 'b4ed81be141093911032944632465175';
-
 const { provider } = configureChains(chains, [
-  walletConnectProvider({ projectId: PROJECT_ID }),
+  walletConnectProvider({ projectId: appConfig.walletConnect.projectId || '' }),
 ]);
 const wagmiClient = createClient({
   autoConnect: true,
@@ -69,7 +67,7 @@ const AddressContract = ({ tabs }: Props) => {
         <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
       </ContractContextProvider>
       <Web3Modal
-        projectId={ PROJECT_ID }
+        projectId={ appConfig.walletConnect.projectId }
         ethereumClient={ ethereumClient }
         themeZIndex={ Number(modalZIndex) }
         themeMode={ useColorModeValue('light', 'dark') }