.env

@@ -0,0 +1 @@
+WALLET_CONNECT_PROJECT_ID=

README.md

@@ -81,19 +81,25 @@
    yarn
    ```
 
-4. Set up the Android device:
+4. In [.env](./.env) file add WalletConnect project id. You can generate your own ProjectId at https://cloud.walletconnect.com
+
+  ```
+  WALLET_CONNECT_PROJECT_ID=39bc93c...
+  ```
+
+5. Set up the Android device:
 
    - For a physical device, refer to the [React Native documentation for running on a physical device]("https://reactnative.dev/docs/running-on-device)
 
    - For a virtual device, continue with the steps.
 
-5. Start the application
+6. Start the application
 
    ```
    yarn start
    ```
 
-6. Press `a` to run the application on android
+7. Press `a` to run the application on android
 
 ## Setup for signature-requester-app
 

android/app/build.gradle

@@ -1,7 +1,8 @@
 apply plugin: "com.android.application"
+apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
 apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
-apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle") 
+apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
 
 /**
  * This is the configuration block to customize your React Native Android app.
@@ -75,7 +76,7 @@ android {
     packagingOptions {
         pickFirst '**/libcrypto.so'
     }
-    
+
     ndkVersion rootProject.ext.ndkVersion
     buildToolsVersion rootProject.ext.buildToolsVersion
     compileSdk rootProject.ext.compileSdkVersion

package.json

@@ -28,6 +28,7 @@
     "postinstall-postinstall": "^2.1.0",
     "react": "18.2.0",
     "react-native": "0.73.3",
+    "react-native-config": "^1.5.1",
     "react-native-get-random-values": "^1.10.0",
     "react-native-keychain": "^8.1.2",
     "react-native-paper": "^5.12.3",

react-native-config.d.ts

@@ -0,0 +1,9 @@
+// Reference: https://github.com/lugg/react-native-config?tab=readme-ov-file#typescript-declaration-for-your-env-file
+declare module 'react-native-config' {
+  export interface NativeConfig {
+    WALLET_CONNECT_PROJECT_ID: string;
+  }
+
+  export const Config: NativeConfig;
+  export default Config;
+}

utils/accounts.ts

@@ -1,6 +1,7 @@
 /*  Importing this library provides react native with a secure random source.
 For more information, "visit https://docs.ethers.org/v5/cookbook/react-native/#cookbook-reactnative-security" */
 import 'react-native-get-random-values';
+
 import '@ethersproject/shims';
 
 import { utils } from 'ethers';

utils/sign-message.ts

@@ -1,6 +1,7 @@
 /*  Importing this library provides react native with a secure random source.
 For more information, "visit https://docs.ethers.org/v5/cookbook/react-native/#cookbook-reactnative-security" */
 import 'react-native-get-random-values';
+
 import '@ethersproject/shims';
 
 import { Wallet } from 'ethers';

utils/utils.ts

@@ -1,6 +1,7 @@
 /*  Importing this library provides react native with a secure random source.
 For more information, "visit https://docs.ethers.org/v5/cookbook/react-native/#cookbook-reactnative-security" */
 import 'react-native-get-random-values';
+
 import '@ethersproject/shims';
 
 import { HDNode } from 'ethers/lib/utils';

utils/wallet-connect/WalletConnectUtils.tsx

@@ -1,6 +1,8 @@
+import { useState, useCallback, useEffect } from 'react';
+import Config from 'react-native-config';
+
 import '@walletconnect/react-native-compat';
 import '@ethersproject/shims';
-
 import { Core } from '@walletconnect/core';
 import { ICore } from '@walletconnect/types';
 import { Web3Wallet, IWeb3Wallet } from '@walletconnect/web3wallet';
@@ -8,13 +10,9 @@ import { Web3Wallet, IWeb3Wallet } from '@walletconnect/web3wallet';
 export let web3wallet: IWeb3Wallet;
 export let core: ICore;
 
-import { useState, useCallback, useEffect } from 'react';
-
 export async function createWeb3Wallet() {
-  // TODO: Move to dotenv
-  const ENV_PROJECT_ID = 'c97365bf9f06d12a7488de36240b0ff4';
   const core = new Core({
-    projectId: ENV_PROJECT_ID,
+    projectId: Config.WALLET_CONNECT_PROJECT_ID,
   });
 
   web3wallet = await Web3Wallet.init({

yarn.lock

@@ -7511,6 +7511,11 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-config@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/react-native-config/-/react-native-config-1.5.1.tgz#73c94f511493e9b7ff9350cdf351d203a1b05acc"
+  integrity sha512-g1xNgt1tV95FCX+iWz6YJonxXkQX0GdD3fB8xQtR1GUBEqweB9zMROW77gi2TygmYmUkBI7LU4pES+zcTyK4HA==
+
 react-native-get-random-values@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/react-native-get-random-values/-/react-native-get-random-values-1.10.0.tgz#c2c5f12a4ef8b1175145347b4a4b9f9a40d9ffc8"