diff --git a/.env b/.env new file mode 100644 index 0000000..c039d12 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +WALLET_CONNECT_PROJECT_ID= diff --git a/README.md b/README.md index 3baa401..00651c7 100644 --- a/README.md +++ b/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 diff --git a/android/app/build.gradle b/android/app/build.gradle index ef0e4f9..b22c5df 100644 --- a/android/app/build.gradle +++ b/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 diff --git a/package.json b/package.json index d3dc40d..05620d5 100644 --- a/package.json +++ b/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", diff --git a/react-native-config.d.ts b/react-native-config.d.ts new file mode 100644 index 0000000..db50fa4 --- /dev/null +++ b/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; +} diff --git a/utils/accounts.ts b/utils/accounts.ts index a4678a2..75e25d3 100644 --- a/utils/accounts.ts +++ b/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'; diff --git a/utils/sign-message.ts b/utils/sign-message.ts index 44794c5..4d07e6b 100644 --- a/utils/sign-message.ts +++ b/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'; diff --git a/utils/utils.ts b/utils/utils.ts index 1602d0f..ceec650 100644 --- a/utils/utils.ts +++ b/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'; diff --git a/utils/wallet-connect/WalletConnectUtils.tsx b/utils/wallet-connect/WalletConnectUtils.tsx index 02e993c..e982a64 100644 --- a/utils/wallet-connect/WalletConnectUtils.tsx +++ b/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({ diff --git a/yarn.lock b/yarn.lock index 7c3b8b3..e0a57c5 100644 --- a/yarn.lock +++ b/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"