feat(HW-947): migrate form wallet-connect -> reown libraries

haqq-network · Dec 20, 2024 · 7cf39dc · 7cf39dc
1 parent 95f8ab5
commit 7cf39dc
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 316 deletions.
diff --git a/index.js b/index.js
@@ -1,6 +1,6 @@
+import '@walletconnect/react-native-compat';
 import 'node-libs-react-native/globals';
 import '@ethersproject/shims';
-import '@walletconnect/react-native-compat';
 import {AppRegistry, I18nManager, LogBox} from 'react-native';
 import './global';
 import './src/modifiers/json-rpc-provider.modifier';

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1151,7 +1151,7 @@ PODS:
     - React-Core
   - react-native-cameraroll (4.1.2):
     - React-Core
-  - react-native-compat (2.11.2):
+  - react-native-compat (2.17.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1184,7 +1184,7 @@ PODS:
     - React-Core
   - react-native-geolocation (3.1.0):
     - React-Core
-  - react-native-get-random-values (1.9.0):
+  - react-native-get-random-values (1.11.0):
     - React-Core
   - react-native-image-picker (5.6.0):
     - React-Core
@@ -2175,13 +2175,13 @@ SPEC CHECKSUMS:
   react-native-blur: cfdad7b3c01d725ab62a8a729f42ea463998afa2
   react-native-camera: 3eae183c1d111103963f3dd913b65d01aef8110f
   react-native-cameraroll: 2957f2bce63ae896a848fbe0d5352c1bd4d20866
-  react-native-compat: 0468620f537a51ce0d3f4ba65bda6872240b9a0d
+  react-native-compat: eb7b3009f60050060c611ab7a4bb4cd07bc4223d
   react-native-config: 86038147314e2e6d10ea9972022aa171e6b1d4d8
   react-native-cookies: f54fcded06bb0cda05c11d86788020b43528a26c
   react-native-detector: 751696a5534f6bbc11be87515cca3d8d32593d73
   react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
   react-native-geolocation: ef66fb798d96284c6043f0b16c15d9d1d4955db4
-  react-native-get-random-values: dee677497c6a740b71e5612e8dbd83e7539ed5bb
+  react-native-get-random-values: 21325b2244dfa6b58878f51f9aa42821e7ba3d06
   react-native-image-picker: db60857e03d63721f19b6f4027de20429ddd9cba
   react-native-in-app-review: db8bb167a5f238e7ceca5c242d6b36ce8c4404a4
   react-native-mmkv: 8c9a677e64a1ac89b0c6cf240feea528318b3074

diff --git a/package.json b/package.json
@@ -68,13 +68,13 @@
     "@react-navigation/native": "6.1.7",
     "@react-navigation/native-stack": "6.9.13",
     "@react-navigation/stack": "6.3.17",
+    "@reown/walletkit": "1.1.2",
     "@sentry/react-native": "5.33.1",
     "@tradle/react-native-http": "2.0.1",
-    "@walletconnect/core": "2.11.2",
-    "@walletconnect/react-native-compat": "2.11.2",
-    "@walletconnect/sign-client": "2.11.2",
-    "@walletconnect/utils": "2.11.2",
-    "@walletconnect/web3wallet": "1.10.2",
+    "@walletconnect/core": "2.17.3",
+    "@walletconnect/react-native-compat": "2.17.3",
+    "@walletconnect/sign-client": "2.17.3",
+    "@walletconnect/utils": "2.17.3",
     "assert": "2.0.0",
     "bech32-converting": "1.0.9",
     "big-integer": "1.6.51",
@@ -86,6 +86,7 @@
     "dotenv": "16.4.5",
     "events": "3.3.0",
     "fast-sha256": "1.3.0",
+    "fast-text-encoding": "1.0.6",
     "https-browserify": "~1.0.0",
     "js-sha3": "0.8.0",
     "json-rpc-engine": "6.1.0",
@@ -120,7 +121,7 @@
     "react-native-encrypted-storage": "4.0.3",
     "react-native-fs": "2.20.0",
     "react-native-gesture-handler": "2.19.0",
-    "react-native-get-random-values": "1.9.0",
+    "react-native-get-random-values": "1.11.0",
     "react-native-image-picker": "5.6.0",
     "react-native-in-app-review": "4.3.3",
     "react-native-json-tree": "1.3.0",
@@ -200,7 +201,7 @@
     "@types/sha.js": "2.4.1",
     "@typescript-eslint/eslint-plugin": "6.0.0",
     "@typescript-eslint/parser": "6.0.0",
-    "@walletconnect/types": "2.11.2",
+    "@walletconnect/types": "2.17.3",
     "babel-jest": "29.7.0",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-react-remove-properties": "0.3.0",

diff --git a/src/components/backup-warning/backup-warning.tsx b/src/components/backup-warning/backup-warning.tsx
@@ -137,7 +137,6 @@ const styles = StyleSheet.create({
   agree: {marginBottom: 4, flexDirection: 'row'},
   agreeText: {
     flex: 1,
-    color: Color.textBase2,
     marginLeft: 12,
     marginBottom: 4,
   },

diff --git a/src/components/wallet-card/protection-badge.tsx b/src/components/wallet-card/protection-badge.tsx
@@ -125,23 +125,6 @@ export const ProtectionBadge = ({
             <Spacer width={8} />
           </>
         )}
-        {!!walletConnectSessions?.length && (
-          <>
-            <IconButton
-              onPress={onWalletConnect}
-              style={[styles.protection, styles.walletConnectApps]}>
-              <Icon i16 name={IconsName.link} color={Color.graphicBase3} />
-              <Spacer width={4} />
-              <Text
-                variant={TextVariant.t15}
-                i18n={I18N.walletCardConnectedApps}
-                i18params={{count: `${walletConnectSessions?.length}`}}
-                color={Color.textBase3}
-              />
-            </IconButton>
-            <Spacer width={8} />
-          </>
-        )}
         {protectionStatus === ProtectionStatus.full && (
           <>
             <IconButton style={styles.protection}>
@@ -170,6 +153,23 @@ export const ProtectionBadge = ({
           <Spacer width={8} />
         </>
       </First>
+      {!!walletConnectSessions?.length && (
+        <>
+          <IconButton
+            onPress={onWalletConnect}
+            style={[styles.protection, styles.walletConnectApps]}>
+            <Icon i16 name={IconsName.link} color={Color.graphicBase3} />
+            <Spacer width={4} />
+            <Text
+              variant={TextVariant.t15}
+              i18n={I18N.walletCardConnectedApps}
+              i18params={{count: `${walletConnectSessions?.length}`}}
+              color={Color.textBase3}
+            />
+          </IconButton>
+          <Spacer width={8} />
+        </>
+      )}
     </View>
   );
 };

diff --git a/src/debug-vars.ts b/src/debug-vars.ts
@@ -35,7 +35,7 @@ const production: DebugVars = {
 const debug: DebugVars = {
   enableSentry: false,
   enableWeb3BrowserIncognito: false,
-  enableWalletConnectLogger: false,
+  enableWalletConnectLogger: true,
   enableCaptchaLogger: true,
   enableSkipPinOnLogin: false,
   enableWeb3BrowserLogger: true,

diff --git a/src/screens/HomeStack/TransactionStack/transaction-sum.tsx b/src/screens/HomeStack/TransactionStack/transaction-sum.tsx
@@ -196,8 +196,22 @@ export const TransactionSumScreen = observer(() => {
   }, [navigation]);
 
   useEffectAsync(async () => {
-    const b = Wallet.getBalance(route.params.from, 'available', provider);
-    const estimate = await getFee(b);
+    const getMinAmount = () => {
+      const token = route.params.token;
+      // for network native coin
+      if (token.symbol === provider.denom) {
+        return new Balance(0.0000001, 0);
+      }
+
+      // for others tokens
+      return new Balance(
+        Number(`0.${'0'.repeat(token.decimals! - 1)}1`),
+        token.decimals!,
+        token.symbol!,
+      );
+    };
+
+    const estimate = await getFee(getMinAmount());
     setFee(estimate?.expectedFee ?? null);
   }, [to]);
 

diff --git a/src/services/wallet-connect.ts b/src/services/wallet-connect.ts
@@ -1,13 +1,11 @@
-import {EventEmitter} from 'events';
-
+import {IWalletKit, WalletKit} from '@reown/walletkit';
 import {Core} from '@walletconnect/core';
 import {ICore, SignClientTypes} from '@walletconnect/types';
 import {
   buildApprovedNamespaces,
   getSdkError,
   parseUri,
 } from '@walletconnect/utils';
-import {IWeb3Wallet, Web3Wallet} from '@walletconnect/web3wallet';
 import Config from 'react-native-config';
 
 import {app} from '@app/contexts';
@@ -43,11 +41,12 @@ export const WC_PAIRING_URLS_KEY = 'wallet_connect_pairing_urls';
 
 export class WalletConnect extends Initializable {
   static instance = new WalletConnect();
-  private _client: IWeb3Wallet | null = null;
+  private _client: IWalletKit | null = null;
   private _core: ICore | null = null;
   private _initAttempts = 0;
   private _initStartTime = 0;
   private _handledJsonRpcEvents = new Map<string, boolean>();
+  private _handledUri: string[] = [];
 
   public getActiveSessions() {
     return this._client?.engine?.signClient?.session?.getAll?.() || [];
@@ -82,10 +81,9 @@ export class WalletConnect extends Initializable {
       this._core = new Core({
         logger: DEBUG_VARS.enableWalletConnectLogger ? 'debug' : 'error',
         projectId: Config.WALLET_CONNECT_PROJECT_ID,
-        relayUrl: Config.WALLET_CONNECT_RELAY_URL,
       });
 
-      this._client = await Web3Wallet.init({
+      this._client = await WalletKit.init({
         core: this._core,
         metadata: {
           name: 'HAQQ Wallet',
@@ -97,38 +95,35 @@ export class WalletConnect extends Initializable {
 
       this._emitActiveSessions();
 
-      this
-        // https://docs.walletconnect.com/2.0/javascript/web3wallet/wallet-usage#responding-to-session-requests
-        ._walletConnectOnEvent('session_proposal', proposal => {
-          logger.log('🟢 session_proposal', proposal);
-          app.emit(Events.onWalletConnectApproveConnection, proposal);
-        })
-        // https://docs.walletconnect.com/2.0/javascript/web3wallet/wallet-usage#responding-to-session-requests
-        .on('session_request', async event => {
-          const handledKey = `${event.id}-${event.topic}`;
-          if (this._handledJsonRpcEvents.get(handledKey)) {
-            return logger.log('🟣 session_request already in progress', event);
-          }
-          this._handledJsonRpcEvents.set(handledKey, true);
-          logger.log('🟢 session_request', event);
-          app.emit(Events.onWalletConnectSignTransaction, event);
-        })
-        // https://docs.walletconnect.com/2.0/javascript/web3wallet/wallet-usage#extend-a-session
-        .on('session_update', async event => {
-          logger.log('🟢 session_update', JSON.stringify(event, null, 2));
-          await this._client?.extendSession?.({topic: event?.topic});
-          this._emitActiveSessions();
-        })
-        .on('session_expire', this._emitActiveSessions.bind(this))
-        .on('session_delete', this._emitActiveSessions.bind(this))
-        .on('session_request_expire', async ({id}) => {
-          try {
-            await this.rejectSession(id, 'Session request expired');
-          } catch (err) {
-            logger.error('session_request_expire', err);
-          }
-          this._emitActiveSessions.bind(this);
-        });
+      this._client.on('session_proposal', proposal => {
+        logger.log('🟢 session_proposal', proposal);
+        app.emit(Events.onWalletConnectApproveConnection, proposal);
+      });
+
+      this._client.on('session_request', async event => {
+        logger.log('🟢 session_request', event);
+        const handledKey = `${event.id}-${event.topic}`;
+        if (this._handledJsonRpcEvents.get(handledKey)) {
+          return logger.log('🟣 session_request already in progress', event);
+        }
+        this._handledJsonRpcEvents.set(handledKey, true);
+        app.emit(Events.onWalletConnectSignTransaction, event);
+      });
+      // @ts-ignore
+      this._client.on('session_update', async event => {
+        logger.log('🟢 session_update', JSON.stringify(event, null, 2));
+        this._emitActiveSessions();
+      });
+
+      this._client.on('session_delete', this._emitActiveSessions.bind(this));
+      this._client.on('session_request_expire', async ({id}) => {
+        try {
+          await this.rejectSession(id, 'Session request expired');
+        } catch (err) {
+          logger.error('session_request_expire', err);
+        }
+        this._emitActiveSessions.bind(this);
+      });
 
       this._core.relayer.on('relayer_connect', async () => {
         // connection to the relay server is established
@@ -192,7 +187,7 @@ export class WalletConnect extends Initializable {
         chainId: `eip155:${chainId}`,
       });
     } catch (err) {
-      logger.error('emitChainChange', {topic}, err);
+      Logger.error('emitChainChange', {topic, chainId}, err);
     }
   }
 
@@ -251,6 +246,10 @@ export class WalletConnect extends Initializable {
 
   public async pair(uri: string) {
     try {
+      if (this._handledUri.includes(uri)) {
+        return;
+      }
+      this._handledUri.push(uri);
       await this.awaitForInitialization();
       const pairedUrls = this.getPairedUrls();
       if (!uri?.startsWith('wc:')) {
@@ -458,18 +457,4 @@ export class WalletConnect extends Initializable {
     this._client = null;
     await this.init();
   }
-
-  // typed fix for `Web3Wallet.on`
-  private _walletConnectOnEvent<EventName extends WalletConnectEventTypes>(
-    eventName: EventName,
-    cb: (event: SignClientTypes.EventArguments[EventName]) => void,
-  ) {
-    // @ts-ignore
-    return this._client?.on?.(eventName, cb) as unknown as Omit<
-      EventEmitter,
-      'on'
-    > & {
-      on: typeof WalletConnect.instance._walletConnectOnEvent;
-    };
-  }
 }