Integrate wallet connect (#2)

* Configure stack navigation to display header

* Use wallet connect to connect with dApps

* Replace react-native alerts with js alerts

* Add example env file

* Remove unnecessary code

* Make UI changes

* Uncomment required code

* Remove unnecessary dependencies

* Remove any type

* Fix indentation

---------

Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Co-authored-by: Nabarun <nabarun@deepstacksoft.com>

.env.example

@@ -0,0 +1,4 @@
+REACT_APP_WALLET_CONNECT_PROJECT_ID=
+REACT_APP_DEFAULT_GAS_PRICE=0.025
+# Reference: https://github.com/cosmos/cosmos-sdk/issues/16020
+REACT_APP_GAS_ADJUSTMENT=2

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

config-overrides.js

@@ -1,4 +1,5 @@
 // TODO: Use Typescript
+const webpack = require('webpack')
 
 module.exports = function override(config, env) {
     config.module.rules.push({
@@ -26,6 +27,12 @@ module.exports = function override(config, env) {
       }
     });
 
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        Buffer: ["buffer", "Buffer"],
+      })
+    )
+
     config.module.rules.push({
       test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
       type: 'asset/resource'
@@ -34,6 +41,9 @@ module.exports = function override(config, env) {
     config.resolve.fallback = {
       crypto: require.resolve("crypto-browserify"),
       stream: require.resolve("stream-browserify"),
+      http: require.resolve('stream-http'),
+      https: require.resolve('https-browserify'),
+      url: false
     }
 
     config.resolve.alias['react-native$'] = require.resolve('react-native-web');

package.json

@@ -14,43 +14,31 @@
     "@hookform/resolvers": "^3.3.4",
     "@json-rpc-tools/utils": "^1.7.6",
     "@mui/material": "^5.16.4",
-    "@react-native-async-storage/async-storage": "^1.22.3",
-    "@react-native-community/netinfo": "^11.3.1",
     "@react-navigation/elements": "^1.3.30",
     "@react-navigation/native": "^6.1.10",
     "@react-navigation/native-stack": "^6.9.18",
+    "@react-navigation/stack": "^6.4.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
+    "@walletconnect/web3wallet": "^1.13.0",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
     "assert": "^2.1.0",
     "chain-registry": "^1.41.2",
     "cosmjs-types": "^0.9.0",
     "ethers": "5.7.2",
-    "http-browserify": "^1.7.0",
     "https-browserify": "^1.0.0",
     "lodash": "^4.17.21",
-    "patch-package": "^8.0.0",
     "react": "^18.3.1",
-    "react-art": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.2",
     "react-native": "^0.74.3",
-    "react-native-config": "^1.5.1",
     "react-native-get-random-values": "^1.10.0",
     "react-native-paper": "^5.12.3",
-    "react-native-quick-base64": "^2.0.8",
-    "react-native-quick-crypto": "^0.6.1",
     "react-native-safe-area-context": "^4.10.8",
     "react-native-screens": "^3.29.0",
-    "react-native-svg": "^15.1.0",
-    "react-native-url-polyfill": "^2.0.0",
     "react-native-vector-icons": "^10.1.0",
     "react-native-web": "^0.19.12",
     "react-scripts": "5.0.1",
+    "stream-http": "^3.2.0",
     "text-encoding-polyfill": "^0.6.7",
     "typescript": "^4.4.2",
     "use-debounce": "^10.0.0",
@@ -82,15 +70,12 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/preset-env": "^7.24.8",
-    "@babel/preset-flow": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
     "@types/lodash": "^4.17.7",
-    "babel-loader": "^9.1.3",
+    "@types/node": "^16.7.13",
-    "core-js": "^3.37.1",
+    "@types/react": "^18.0.0",
-    "react-app-rewired": "^2.2.1"
+    "@types/react-dom": "^18.0.0",
+    "crypto-browserify": "^3.12.0",
+    "react-app-rewired": "^2.2.1",
+    "stream-browserify": "^3.0.0"
   }
 }

src/App.tsx

@@ -1,233 +1,236 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Button, Snackbar, Text } from 'react-native-paper';
-// import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { TxBody, AuthInfo } from 'cosmjs-types/cosmos/tx/v1beta1/tx';
-// import { TxBody, AuthInfo } from 'cosmjs-types/cosmos/tx/v1beta1/tx';
 
-// import { SignClientTypes } from '@walletconnect/types';
+import { SignClientTypes } from '@walletconnect/types';
 import { useNavigation } from '@react-navigation/native';
 import {
-  NativeStackNavigationProp,
+createStackNavigator,
-  createNativeStackNavigator,
+StackNavigationProp,
-} from '@react-navigation/native-stack';
+} from '@react-navigation/stack';
-// import { getSdkError } from '@walletconnect/utils';
+import { getSdkError } from '@walletconnect/utils';
-// import { Web3WalletTypes } from '@walletconnect/web3wallet';
+import { Web3WalletTypes } from '@walletconnect/web3wallet';
-// import { formatJsonRpcResult } from '@json-rpc-tools/utils';
+import { formatJsonRpcResult } from '@json-rpc-tools/utils';
 
-// import PairingModal from './components/PairingModal';
+import PairingModal from './components/PairingModal';
-// import { useWalletConnect } from './context/WalletConnectContext';
+import { useWalletConnect } from './context/WalletConnectContext';
 import { useAccounts } from './context/AccountsContext';
 import InvalidPath from './screens/InvalidPath';
 import SignMessage from './screens/SignMessage';
 import HomeScreen from './screens/HomeScreen';
 import SignRequest from './screens/SignRequest';
 import AddSession from './screens/AddSession';
-// import WalletConnect from './screens/WalletConnect';
+import WalletConnect from './screens/WalletConnect';
 import ApproveTransaction from './screens/ApproveTransaction';
 import { StackParamsList } from './types';
-// import { web3wallet } from './utils/wallet-connect/WalletConnectUtils';
+import { web3wallet } from './utils/wallet-connect/WalletConnectUtils';
-// import { EIP155_SIGNING_METHODS } from './utils/wallet-connect/EIP155Data';
+import { EIP155_SIGNING_METHODS } from './utils/wallet-connect/EIP155Data';
-// import { getSignParamsMessage } from './utils/wallet-connect/helpers';
+import { getSignParamsMessage } from './utils/wallet-connect/helpers';
 import ApproveTransfer from './screens/ApproveTransfer';
 import AddNetwork from './screens/AddNetwork';
 import EditNetwork from './screens/EditNetwork';
-// import { COSMOS, EIP155 } from './utils/constants';
+import { COSMOS, EIP155 } from './utils/constants';
 import { useNetworks } from './context/NetworksContext';
-// import { NETWORK_METHODS } from './utils/wallet-connect/common-data';
+import { NETWORK_METHODS } from './utils/wallet-connect/common-data';
-// import { COSMOS_METHODS } from './utils/wallet-connect/COSMOSData';
+import { COSMOS_METHODS } from './utils/wallet-connect/COSMOSData';
 
-const Stack = createNativeStackNavigator<StackParamsList>();
+const Stack = createStackNavigator<StackParamsList>();
 
 const App = (): React.JSX.Element => {
   const navigation =
-    useNavigation<NativeStackNavigationProp<StackParamsList>>();
+    useNavigation<StackNavigationProp<StackParamsList>>();
 
-  // const { setActiveSessions } = useWalletConnect();
+  const { setActiveSessions } = useWalletConnect();
   const { accounts, setCurrentIndex } = useAccounts();
   const { networksData, selectedNetwork, setSelectedNetwork } = useNetworks();
   const [modalVisible, setModalVisible] = useState(false);
   const [toastVisible, setToastVisible] = useState(false);
-  // const [currentProposal, setCurrentProposal] = useState<
+  const [currentProposal, setCurrentProposal] = useState<
-  //   SignClientTypes.EventArguments['session_proposal'] | undefined
+    SignClientTypes.EventArguments['session_proposal'] | undefined
-  // >();
+  >();
 
-  // const onSessionProposal = useCallback(
+  const onSessionProposal = useCallback(
-  //   async (proposal: SignClientTypes.EventArguments['session_proposal']) => {
+    async (proposal: SignClientTypes.EventArguments['session_proposal']) => {
-  //     if (!accounts.length || !accounts.length) {
+      console.log("modal triggered")
-  //       const { id } = proposal;
+      debugger
-  //       await web3wallet!.rejectSession({
+      if (!accounts.length || !accounts.length) {
-  //         id,
+        const { id } = proposal;
-  //         reason: getSdkError('UNSUPPORTED_ACCOUNTS'),
+        await web3wallet!.rejectSession({
-  //       });
+          id,
-  //       return;
+          reason: getSdkError('UNSUPPORTED_ACCOUNTS'),
-  //     }
+        });
-  //     setModalVisible(true);
+        return;
-  //     setCurrentProposal(proposal);
+      }
-  //   },
+      setModalVisible(true);
-  //   [accounts],
+      setCurrentProposal(proposal);
-  // );
+    },
+    [accounts],
+  );
 
-  // const onSessionRequest = useCallback(
+  const onSessionRequest = useCallback(
-  //   async (requestEvent: Web3WalletTypes.SessionRequest) => {
+    async (requestEvent: Web3WalletTypes.SessionRequest) => {
-  //     const { topic, params, id } = requestEvent;
+      const { topic, params, id } = requestEvent;
-  //     const { request } = params;
+      const { request } = params;
 
-  //     const requestSessionData =
+      const requestSessionData =
-  //       web3wallet!.engine.signClient.session.get(topic);
+        web3wallet!.engine.signClient.session.get(topic);
-  //     switch (request.method) {
+      switch (request.method) {
-  //       case NETWORK_METHODS.GET_NETWORKS:
+        case NETWORK_METHODS.GET_NETWORKS:
-  //         const currentNetworkId = networksData.find(
+          const currentNetworkId = networksData.find(
-  //           networkData => networkData.networkId === selectedNetwork!.networkId,
+            networkData => networkData.networkId === selectedNetwork!.networkId,
-  //         )?.networkId;
+          )?.networkId;
 
-  //         const networkNamesData = networksData.map(networkData => {
+          const networkNamesData = networksData.map(networkData => {
-  //           return {
+            return {
-  //             id: networkData.networkId,
+              id: networkData.networkId,
-  //             name: networkData.networkName,
+              name: networkData.networkName,
-  //           };
+            };
-  //         });
+          });
 
-  //         const formattedResponse = formatJsonRpcResult(id, {
+          const formattedResponse = formatJsonRpcResult(id, {
-  //           currentNetworkId,
+            currentNetworkId,
-  //           networkNamesData,
+            networkNamesData,
-  //         });
+          });
 
-  //         await web3wallet!.respondSessionRequest({
+          await web3wallet!.respondSessionRequest({
-  //           topic,
+            topic,
-  //           response: formattedResponse,
+            response: formattedResponse,
-  //         });
+          });
-  //         break;
+          break;
 
-  //       case NETWORK_METHODS.CHANGE_NETWORK:
+        case NETWORK_METHODS.CHANGE_NETWORK:
-  //         const networkNameData = request.params[0];
+          const networkNameData = request.params[0];
-  //         const network = networksData.find(
+          const network = networksData.find(
-  //           networkData => networkData.networkId === networkNameData.id,
+            networkData => networkData.networkId === networkNameData.id,
-  //         );
+          );
-  //         setCurrentIndex(0);
+          setCurrentIndex(0);
-  //         setSelectedNetwork(network);
+          setSelectedNetwork(network);
 
-  //         const response = formatJsonRpcResult(id, {
+          const response = formatJsonRpcResult(id, {
-  //           response: 'true',
+            response: 'true',
-  //         });
+          });
 
-  //         await web3wallet!.respondSessionRequest({
+          await web3wallet!.respondSessionRequest({
-  //           topic,
+            topic,
-  //           response: response,
+            response: response,
-  //         });
+          });
-  //         break;
+          break;
 
-  //       case EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION:
+        case EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION:
-  //         navigation.navigate('ApproveTransfer', {
+          navigation.navigate('ApproveTransfer', {
-  //           transaction: request.params[0],
+            transaction: request.params[0],
-  //           requestEvent,
+            requestEvent,
-  //           requestSessionData,
+            requestSessionData,
-  //         });
+          });
-  //         break;
+          break;
 
-  //       case EIP155_SIGNING_METHODS.PERSONAL_SIGN:
+        case EIP155_SIGNING_METHODS.PERSONAL_SIGN:
-  //         navigation.navigate('SignRequest', {
+          navigation.navigate('SignRequest', {
-  //           namespace: EIP155,
+            namespace: EIP155,
-  //           address: request.params[1],
+            address: request.params[1],
-  //           message: getSignParamsMessage(request.params),
+            message: getSignParamsMessage(request.params),
-  //           requestEvent,
+            requestEvent,
-  //           requestSessionData,
+            requestSessionData,
-  //         });
+          });
-  //         break;
+          break;
 
-  //       case COSMOS_METHODS.COSMOS_SIGN_DIRECT:
+        case COSMOS_METHODS.COSMOS_SIGN_DIRECT:
-  //         const message = {
+          const message = {
-  //           txbody: TxBody.toJSON(
+            txbody: TxBody.toJSON(
-  //             TxBody.decode(
+              TxBody.decode(
-  //               Uint8Array.from(
+                Uint8Array.from(
-  //                 Buffer.from(request.params.signDoc.bodyBytes, 'hex'),
+                  Buffer.from(request.params.signDoc.bodyBytes, 'hex'),
-  //               ),
+                ),
-  //             ),
+              ),
-  //           ),
+            ),
-  //           authInfo: AuthInfo.toJSON(
+            authInfo: AuthInfo.toJSON(
-  //             AuthInfo.decode(
+              AuthInfo.decode(
-  //               Uint8Array.from(
+                Uint8Array.from(
-  //                 Buffer.from(request.params.signDoc.authInfoBytes, 'hex'),
+                  Buffer.from(request.params.signDoc.authInfoBytes, 'hex'),
-  //               ),
+                ),
-  //             ),
+              ),
-  //           ),
+            ),
-  //         };
+          };
-  //         navigation.navigate('SignRequest', {
+          navigation.navigate('SignRequest', {
-  //           namespace: COSMOS,
+            namespace: COSMOS,
-  //           address: request.params.signerAddress,
+            address: request.params.signerAddress,
-  //           message: JSON.stringify(message, undefined, 2),
+            message: JSON.stringify(message, undefined, 2),
-  //           requestEvent,
+            requestEvent,
-  //           requestSessionData,
+            requestSessionData,
-  //         });
+          });
-  //         break;
+          break;
 
-  //       case COSMOS_METHODS.COSMOS_SIGN_AMINO:
+        case COSMOS_METHODS.COSMOS_SIGN_AMINO:
-  //         navigation.navigate('SignRequest', {
+          navigation.navigate('SignRequest', {
-  //           namespace: COSMOS,
+            namespace: COSMOS,
-  //           address: request.params.signerAddress,
+            address: request.params.signerAddress,
-  //           message: request.params.signDoc.memo,
+            message: request.params.signDoc.memo,
-  //           requestEvent,
+            requestEvent,
-  //           requestSessionData,
+            requestSessionData,
-  //         });
+          });
-  //         break;
+          break;
 
-  //       case COSMOS_METHODS.COSMOS_SEND_TOKENS:
+        case COSMOS_METHODS.COSMOS_SEND_TOKENS:
-  //         navigation.navigate('ApproveTransfer', {
+          navigation.navigate('ApproveTransfer', {
-  //           transaction: request.params[0],
+            transaction: request.params[0],
-  //           requestEvent,
+            requestEvent,
-  //           requestSessionData,
+            requestSessionData,
-  //         });
+          });
-  //         break;
+          break;
 
-  //       case COSMOS_METHODS.COSMOS_SEND_TRANSACTION:
+        case COSMOS_METHODS.COSMOS_SEND_TRANSACTION:
-  //         const { transactionMessage, signer } = request.params;
+          const { transactionMessage, signer } = request.params;
-  //         navigation.navigate('ApproveTransaction', {
+          navigation.navigate('ApproveTransaction', {
-  //           transactionMessage,
+            transactionMessage,
-  //           signer,
+            signer,
-  //           requestEvent,
+            requestEvent,
-  //           requestSessionData,
+            requestSessionData,
-  //         });
+          });
-  //         break;
+          break;
 
-  //       default:
+        default:
-  //         throw new Error('Invalid method');
+          throw new Error('Invalid method');
-  //     }
+      }
-  //   },
+    },
-  //   [
+    [
-  //     navigation,
+      navigation,
-  //     networksData,
+      networksData,
-  //     setSelectedNetwork,
+      setSelectedNetwork,
-  //     setCurrentIndex,
+      setCurrentIndex,
-  //     selectedNetwork,
+      selectedNetwork,
-  //   ],
+    ],
-  // );
+  );
 
-  // const onSessionDelete = useCallback(() => {
+  const onSessionDelete = useCallback(() => {
-  //   const sessions = web3wallet!.getActiveSessions();
+    const sessions = web3wallet!.getActiveSessions();
-  //   setActiveSessions(sessions);
+    setActiveSessions(sessions);
-  // }, [setActiveSessions]);
+  }, [setActiveSessions]);
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   web3wallet?.on('session_proposal', onSessionProposal);
+    web3wallet?.on('session_proposal', onSessionProposal);
-  //   web3wallet?.on('session_request', onSessionRequest);
+    web3wallet?.on('session_request', onSessionRequest);
-  //   web3wallet?.on('session_delete', onSessionDelete);
+    web3wallet?.on('session_delete', onSessionDelete);
-  //   return () => {
+    return () => {
-  //     web3wallet?.off('session_proposal', onSessionProposal);
+      web3wallet?.off('session_proposal', onSessionProposal);
-  //     web3wallet?.off('session_request', onSessionRequest);
+      web3wallet?.off('session_request', onSessionRequest);
-  //     web3wallet?.off('session_delete', onSessionDelete);
+      web3wallet?.off('session_delete', onSessionDelete);
-  //   };
+    };
-  // });
+  });
 
   return (
     <>
-      <Stack.Navigator>
+      <Stack.Navigator
+        screenOptions={{
+          headerBackTitleVisible: true,
+        }}
+      >
         <Stack.Screen
           name="Laconic"
           component={HomeScreen}
           options={{
             // eslint-disable-next-line react/no-unstable-nested-components
             headerTitle: () => <Text variant="titleLarge">Laconic Wallet</Text>,
-            headerBackVisible: false,
+          }}        />
-          }}
-        />
         <Stack.Screen
           name="SignMessage"
           component={SignMessage}
@@ -236,24 +239,30 @@ const App = (): React.JSX.Element => {
             headerTitle: () => <Text variant="titleLarge">Sign Message</Text>,
           }}
         />
-        {/* <Stack.Screen
+        <Stack.Screen
           name="SignRequest"
           component={SignRequest}
           options={{
             // eslint-disable-next-line react/no-unstable-nested-components
             headerTitle: () => <Text variant="titleLarge">Sign Request</Text>,
           }}
-        /> */}
+        />
         <Stack.Screen
           name="InvalidPath"
           component={InvalidPath}
           options={{
             // eslint-disable-next-line react/no-unstable-nested-components
             headerTitle: () => <Text variant="titleLarge">Bad Request</Text>,
-            headerBackVisible: false,
           }}
         />
-        {/* <Stack.Screen
+      <Stack.Screen
+          name="AddSession"
+          component={AddSession}
+          options={{
+            title: 'New session',
+          }}
+        />
+        <Stack.Screen
           name="WalletConnect"
           component={WalletConnect}
           options={{
@@ -265,27 +274,18 @@ const App = (): React.JSX.Element => {
                 onPress={() => {
                   navigation.navigate('AddSession');
                 }}>
-                {<Icon name={'qrcode-scan'} size={20} />}
+                {<Text>PAIR</Text>}
               </Button>
             ),
           }}
-        /> */}
-
-        <Stack.Screen
-          name="AddSession"
-          component={AddSession}
-          options={{
-            title: 'New session',
-          }}
         />
-
+        <Stack.Screen
-        {/* <Stack.Screen
           name="ApproveTransfer"
           component={ApproveTransfer}
           options={{
             title: 'Approve transfer',
           }}
-        /> */}
+        />
         <Stack.Screen
           name="AddNetwork"
           component={AddNetwork}
@@ -300,21 +300,21 @@ const App = (): React.JSX.Element => {
             title: 'Edit Network',
           }}
         />
-        {/* <Stack.Screen
+        <Stack.Screen
           name="ApproveTransaction"
           component={ApproveTransaction}
           options={{
             title: 'Approve Transaction',
           }}
-        /> */}
+        />
       </Stack.Navigator>
-      {/* <PairingModal
+      <PairingModal
         visible={modalVisible}
         setModalVisible={setModalVisible}
         currentProposal={currentProposal}
         setCurrentProposal={setCurrentProposal}
         setToastVisible={setToastVisible}
-      /> */}
+      />
       <Snackbar
         visible={toastVisible}
         onDismiss={() => setToastVisible(false)}

src/components/Accounts.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { ScrollView, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { Button, List, Text, useTheme } from 'react-native-paper';
-// import { setInternetCredentials } from 'react-native-keychain';
 
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -17,6 +16,7 @@ import { useNetworks } from '../context/NetworksContext';
 import ConfirmDialog from './ConfirmDialog';
 import { getNamespaces } from '../utils/wallet-connect/helpers';
 import ShowPKDialog from './ShowPKDialog';
+import { setInternetCredentials } from '../utils/key-store';
 
 const Accounts = () => {
   const navigation =
@@ -103,11 +103,11 @@ const Accounts = () => {
       networkData => selectedNetwork!.networkId !== networkData.networkId,
     );
 
-    // await setInternetCredentials(
+    await setInternetCredentials(
-    //   'networks',
+      'networks',
-    //   '_',
+      '_',
-    //   JSON.stringify(updatedNetworks),
+      JSON.stringify(updatedNetworks),
-    // );
+    );
 
     setSelectedNetwork(updatedNetworks[0]);
     setCurrentIndex(0);
@@ -116,7 +116,7 @@ const Accounts = () => {
   };
 
   return (
-    <ScrollView>
+    <View>
       <View>
         <HDPathDialog
           visible={hdDialog}
@@ -153,76 +153,76 @@ const Accounts = () => {
         </View>
 
         <AccountDetails account={accounts[currentIndex]} />
-
+        <View style={styles.linkContainer}>
-        <View style={styles.signLink}>
-          <TouchableOpacity
-            onPress={() => {
-              navigation.navigate('SignMessage', {
-                selectedNamespace: selectedNetwork!.namespace,
-                selectedChainId: selectedNetwork!.chainId,
-                accountInfo: accounts[currentIndex],
-              });
-            }}>
-            <Text
-              variant="titleSmall"
-              style={[styles.hyperlink, { color: theme.colors.primary }]}>
-              Sign Message
-            </Text>
-          </TouchableOpacity>
-        </View>
-
-        <View style={styles.signLink}>
-          <TouchableOpacity
-            onPress={() => {
-              navigation.navigate('AddNetwork');
-            }}>
-            <Text
-              variant="titleSmall"
-              style={[styles.hyperlink, { color: theme.colors.primary }]}>
-              Add Network
-            </Text>
-          </TouchableOpacity>
-        </View>
-
-        <View style={styles.signLink}>
-          <TouchableOpacity
-            onPress={() => {
-              navigation.navigate('EditNetwork', {
-                selectedNetwork: selectedNetwork!,
-              });
-            }}>
-            <Text
-              variant="titleSmall"
-              style={[styles.hyperlink, { color: theme.colors.primary }]}>
-              Edit Network
-            </Text>
-          </TouchableOpacity>
-        </View>
-
-        {!selectedNetwork!.isDefault && (
           <View style={styles.signLink}>
             <TouchableOpacity
               onPress={() => {
-                setDeleteNetworkDialog(true);
+                navigation.navigate('SignMessage', {
+                  selectedNamespace: selectedNetwork!.namespace,
+                  selectedChainId: selectedNetwork!.chainId,
+                  accountInfo: accounts[currentIndex],
+                });
               }}>
               <Text
                 variant="titleSmall"
                 style={[styles.hyperlink, { color: theme.colors.primary }]}>
-                Delete Network
+                Sign Message
               </Text>
             </TouchableOpacity>
           </View>
-        )}
-        <ConfirmDialog
-          title="Delete Network"
-          visible={deleteNetworkDialog}
-          hideDialog={hideDeleteNetworkDialog}
-          onConfirm={handleRemove}
-        />
 
-        <ShowPKDialog />
+          <View style={styles.signLink}>
+            <TouchableOpacity
+              onPress={() => {
+                navigation.navigate('AddNetwork');
+              }}>
+              <Text
+                variant="titleSmall"
+                style={[styles.hyperlink, { color: theme.colors.primary }]}>
+                Add Network
+              </Text>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.signLink}>
+            <TouchableOpacity
+              onPress={() => {
+                navigation.navigate('EditNetwork', {
+                  selectedNetwork: selectedNetwork!,
+                });
+              }}>
+              <Text
+                variant="titleSmall"
+                style={[styles.hyperlink, { color: theme.colors.primary }]}>
+                Edit Network
+              </Text>
+            </TouchableOpacity>
+          </View>
+
+          {!selectedNetwork!.isDefault && (
+            <View style={styles.signLink}>
+              <TouchableOpacity
+                onPress={() => {
+                  setDeleteNetworkDialog(true);
+                }}>
+                <Text
+                  variant="titleSmall"
+                  style={[styles.hyperlink, { color: theme.colors.primary }]}>
+                  Delete Network
+                </Text>
+              </TouchableOpacity>
+            </View>
+          )}
+          <ConfirmDialog
+            title="Delete Network"
+            visible={deleteNetworkDialog}
+            hideDialog={hideDeleteNetworkDialog}
+            onConfirm={handleRemove}
+          />
+          <ShowPKDialog />
+        </View>
       </View>
-    </ScrollView>
+    </View>
   );
 };
 

src/components/PairingModal.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Image, View, Modal, ScrollView } from 'react-native';
 import { Button, Text } from 'react-native-paper';
-import { SvgUri } from 'react-native-svg';
 import mergeWith from 'lodash/mergeWith';
 
-// import { buildApprovedNamespaces, getSdkError } from '@walletconnect/utils';
+import { buildApprovedNamespaces, getSdkError } from '@walletconnect/utils';
 
 import { PairingModalProps } from '../types';
 import styles from '../styles/stylesheet';
@@ -26,12 +25,9 @@ const PairingModal = ({
   const [isLoading, setIsLoading] = useState(false);
   const [chainError, setChainError] = useState('');
 
-  // const dappName = currentProposal?.params?.proposer?.metadata.name;
+  const dappName = currentProposal?.params?.proposer?.metadata.name;
-  // const url = currentProposal?.params?.proposer?.metadata.url;
+  const url = currentProposal?.params?.proposer?.metadata.url;
-  // const icon = currentProposal?.params.proposer?.metadata.icons[0];
+  const icon = currentProposal?.params.proposer?.metadata.icons[0];
-  const dappName = undefined;
-  const url = undefined;
-  const icon = '.svg';
 
   const [walletConnectData, setWalletConnectData] = useState<{
     walletConnectMethods: string[];
@@ -98,9 +94,7 @@ const PairingModal = ({
         return;
       }
 
-      // const { optionalNamespaces, requiredNamespaces } = currentProposal.params;
+      const { optionalNamespaces, requiredNamespaces } = currentProposal.params;
-      const { optionalNamespaces, requiredNamespaces } = currentProposal;
-
       try {
         const nameSpaces = await getNamespaces(
           optionalNamespaces,
@@ -114,11 +108,11 @@ const PairingModal = ({
       } catch (err) {
         setChainError((err as Error).message);
 
-        // const { id } = currentProposal;
+        const { id } = currentProposal;
-        // await web3wallet!.rejectSession({
+        await web3wallet!.rejectSession({
-        //   id,
+          id,
-        //   reason: getSdkError('UNSUPPORTED_CHAINS'),
+          reason: getSdkError('UNSUPPORTED_CHAINS'),
-        // });
+        });
         setCurrentProposal(undefined);
         setWalletConnectData({
           walletConnectMethods: [],
@@ -143,11 +137,11 @@ const PairingModal = ({
     return (
       currentProposal &&
       supportedNamespaces
-      // &&
+      &&
-      // buildApprovedNamespaces({
+      buildApprovedNamespaces({
-      //   proposal: currentProposal.params,
+        proposal: currentProposal.params,
-      //   supportedNamespaces,
+        supportedNamespaces,
-      // })
+      })
     );
   }, [currentProposal, supportedNamespaces]);
 
@@ -188,11 +182,11 @@ const PairingModal = ({
 
   const handleReject = async () => {
     if (currentProposal) {
-      // const { id } = currentProposal;
+      const { id } = currentProposal;
-      // await web3wallet!.rejectSession({
+      await web3wallet!.rejectSession({
-      //   id,
+        id,
-      //   reason: getSdkError('USER_REJECTED_METHODS'),
+        reason: getSdkError('USER_REJECTED_METHODS'),
-      // });
+      });
 
       setModalVisible(false);
       setCurrentProposal(undefined);
@@ -214,7 +208,7 @@ const PairingModal = ({
                 <>
                   {icon.endsWith('.svg') ? (
                     <View style={styles.dappLogo}>
-                      <SvgUri height="50" width="50" uri={icon} />
+                      <Text>SvgURI requstIcon</Text>
                     </View>
                   ) : (
                     <Image style={styles.dappLogo} source={{ uri: icon }} />
@@ -243,7 +237,7 @@ const PairingModal = ({
                     <>
                       {icon.endsWith('.svg') ? (
                         <View style={styles.dappLogo}>
-                          <SvgUri height="50" width="50" uri={icon} />
+                          <Text>SvgURI requstIcon</Text>
                         </View>
                       ) : (
                         <Image style={styles.dappLogo} source={{ uri: icon }} />

src/context/AccountsContext.tsx

@@ -19,7 +19,7 @@ const useAccounts = () => {
   return accountsContext;
 };
 
-const AccountsProvider = ({ children }: { children: any }) => {
+const AccountsProvider = ({ children }: { children: React.ReactNode }) => {
   const [accounts, setAccounts] = useState<Account[]>([]);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
 

src/context/NetworksContext.tsx

@@ -27,7 +27,7 @@ const useNetworks = () => {
   return networksContext;
 };
 
-const NetworksProvider = ({ children }: { children: any }) => {
+const NetworksProvider = ({ children }: { children: React.ReactNode }) => {
   const [networksData, setNetworksData] = useState<NetworksDataState[]>([]);
   const [networkType, setNetworkType] = useState<string>(EIP155);
   const [selectedNetwork, setSelectedNetwork] = useState<NetworksDataState>();

src/context/WalletConnectContext.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
-// import { SessionTypes } from '@walletconnect/types';
+import { SessionTypes } from '@walletconnect/types';
 
 import { WalletConnectContextProps } from '../types';
 import { web3wallet } from '../utils/wallet-connect/WalletConnectUtils';
@@ -25,8 +25,7 @@ const WalletConnectProvider = ({ children }: { children: React.ReactNode }) => {
   }, []);
 
   const [activeSessions, setActiveSessions] = useState<
-    // Record<string, SessionTypes.Struct>
+    Record<string, SessionTypes.Struct>
-    Record<string, any>
   >({});
 
   return (

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { PaperProvider, MD3LightTheme as DefaultTheme, } from 'react-native-paper';
 import { NavigationContainer } from '@react-navigation/native';
 import { Platform } from 'react-native';
+import { Buffer } from 'buffer';
 
 import './index.css';
 import App from './App';
@@ -11,26 +12,7 @@ import { NetworksProvider } from './context/NetworksContext';
 import reportWebVitals from './reportWebVitals';
 import { WalletConnectProvider } from './context/WalletConnectContext';
 
-// // Generate the required CSS
+globalThis.Buffer = Buffer;
-// import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf';
-// const iconFontStyles = `@font-face {
-//   src: url(${iconFont});
-//   font-family: FontAwesome;
-// }`;
-
-// // Create a stylesheet
-// const style = document.createElement('style');
-// style.type = 'text/css';
-
-// // Append the iconFontStyles to the stylesheet
-// if (style.styleSheet) {
-//   style.styleSheet.cssText = iconFontStyles;
-// } else {
-//   style.appendChild(document.createTextNode(iconFontStyles));
-// }
-
-// // Inject the stylesheet into the document head
-// document.head.appendChild(style);
 
 const linking = {
   prefixes: ['https://wallet.laconic.com'],

src/screens/AddNetwork.tsx

@@ -30,6 +30,7 @@ import {
   getInternetCredentials,
   setInternetCredentials,
 } from '../utils/key-store';
+import styles from '../styles/stylesheet';
 
 const ethNetworkDataSchema = z.object({
   chainId: z.string().nonempty({ message: EMPTY_FIELD_ERROR }),
@@ -211,7 +212,7 @@ const AddNetwork = () => {
   }, [namespace, reset]);
 
   return (
-    <View>
+    <View style={styles.appContainer}>
       <SelectNetworkType updateNetworkType={updateNetworkType} />
 
       <Controller

src/screens/AddSession.tsx

@@ -1,13 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
-import { AppState, TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
 import { Button, Text, TextInput } from 'react-native-paper';
-// import {
-//   Camera,
-//   useCameraDevice,
-//   useCameraPermission,
-//   useCodeScanner,
-// } from 'react-native-vision-camera';
-import { Linking } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -20,30 +13,7 @@ const AddSession = () => {
   const navigation =
     useNavigation<NativeStackNavigationProp<StackParamsList>>();
 
-  // const { hasPermission, requestPermission } = useCameraPermission();
-  // const device = useCameraDevice('back');
-
   const [currentWCURI, setCurrentWCURI] = useState<string>('');
-  // const [isActive, setIsActive] = useState(AppState.currentState === 'active');
-  // const [isScanning, setScanning] = useState(true);
-
-  // const codeScanner = useCodeScanner({
-  //   codeTypes: ['qr'],
-  //   onCodeScanned: codes => {
-  //     if (isScanning) {
-  //       codes.forEach(code => {
-  //         if (code.value) {
-  //           setCurrentWCURI(code.value);
-  //           setScanning(false);
-  //         }
-  //       });
-  //     }
-  //   },
-  // });
-
-  const linkToSettings = async () => {
-    await Linking.openSettings();
-  };
 
   const pair = async () => {
     const pairing = await web3WalletPair({ uri: currentWCURI });
@@ -51,69 +21,25 @@ const AddSession = () => {
     return pairing;
   };
 
-  // useEffect(() => {
-  //   const handleAppStateChange = (newState: string) => {
-  //     setIsActive(newState === 'active');
-  //   };
-
-  //   AppState.addEventListener('change', handleAppStateChange);
-
-  //   if (!hasPermission) {
-  //     requestPermission();
-  //   }
-  // }, [hasPermission, requestPermission]);
-
   return (
     <View style={styles.appContainer}>
-      {/* {!hasPermission || !device ? ( */}
+      <View style={styles.inputContainer}>
-      {false ? (
+        <Text variant="titleMedium">Enter WalletConnect URI</Text>
-        <>
+        <TextInput
-          {/* <Text>
+          mode="outlined"
-            {!hasPermission
+          onChangeText={setCurrentWCURI}
-              ? 'No Camera Permission granted'
+          value={currentWCURI}
-              : 'No Camera Selected'}
+          numberOfLines={4}
-          </Text> */}
+          multiline={true}
-          <TouchableOpacity onPress={linkToSettings}>
+          style={styles.walletConnectUriText}
-            <Text variant="titleSmall" style={[styles.hyperlink]}>
+        />
-              Go to settings
-            </Text>
-          </TouchableOpacity>
-        </>
-      ) : (
-        <>
-          <View style={styles.cameraContainer}>
-            {/* {isActive ? (
-              <Camera
-                style={styles.camera}
-                device={device}
-                isActive={isActive}
-                codeScanner={codeScanner}
-                video={false}
-              />
-            ) : (
-              <Text>No Camera Selected!</Text>
-            )} */}
-          </View>
 
-          <View style={styles.inputContainer}>
+        <View style={styles.signButton}>
-            <Text variant="titleMedium">Enter WalletConnect URI</Text>
+          <Button mode="contained" onPress={pair}>
-            <TextInput
+            Pair Session
-              mode="outlined"
+          </Button>
-              onChangeText={setCurrentWCURI}
+        </View>
-              value={currentWCURI}
+      </View>
-              numberOfLines={4}
-              multiline={true}
-              style={styles.walletConnectUriText}
-            />
-
-            <View style={styles.signButton}>
-              <Button mode="contained" onPress={pair}>
-                Pair Session
-              </Button>
-            </View>
-          </View>
-        </>
-      )}
     </View>
   );
 };

src/screens/ApproveTransaction.tsx

@@ -1,8 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Image, ScrollView, View } from 'react-native';
 import { Button, Text, TextInput } from 'react-native-paper';
-import { SvgUri } from 'react-native-svg';
-import Config from 'react-native-config';
 
 import {
   NativeStackNavigationProp,
@@ -95,7 +93,11 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
           sender,
         );
         setCosmosStargateClient(client);
-      } catch (error: any) {
+      } catch (error) {
+        if (!(error instanceof Error)) {
+          throw error;
+        }
+
         setTxError(error.message);
         setIsTxErrorDialogOpen(true);
         const response = formatJsonRpcError(requestEventId, error.message);
@@ -141,10 +143,14 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
 
         setCosmosGasLimit(
           String(
-            Math.round(gasEstimation * Number(Config.DEFAULT_GAS_ADJUSTMENT)),
+            Math.round(gasEstimation * Number(process.env.REACT_APP_GAS_ADJUSTMENT)),
           ),
         );
-      } catch (error: any) {
+      } catch (error) {
+        if (!(error instanceof Error)) {
+          throw error;
+        }
+
         setTxError(error.message);
         setIsTxErrorDialogOpen(true);
         const response = formatJsonRpcError(requestEventId, error.message);
@@ -209,7 +215,11 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
       await web3wallet!.respondSessionRequest({ topic, response });
       setIsRequestAccepted(false);
       navigation.navigate('Laconic');
-    } catch (error: any) {
+    } catch (error) {
+      if (!(error instanceof Error)) {
+        throw error;
+      }
+
       setTxError(error.message);
       setIsTxErrorDialogOpen(true);
       const response = formatJsonRpcError(requestEventId, error.message);
@@ -235,7 +245,8 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
             <>
               {requestIcon.endsWith('.svg') ? (
                 <View style={styles.dappLogo}>
-                  <SvgUri height="50" width="50" uri={requestIcon} />
+                  {/* <SvgUri height="50" width="50" uri={requestIcon} /> */}
+                  <Text>SvgURI requstIcon</Text>
                 </View>
               ) : (
                 <Image style={styles.dappLogo} source={{ uri: requestIcon }} />

src/screens/ApproveTransfer.tsx

@@ -8,7 +8,6 @@ import {
   TextInput,
 } from 'react-native-paper';
 import { providers, BigNumber } from 'ethers';
-import Config from 'react-native-config';
 import { Deferrable } from 'ethers/lib/utils';
 
 import { useNavigation } from '@react-navigation/native';
@@ -150,7 +149,11 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
         );
 
         setCosmosStargateClient(client);
-      } catch (error: any) {
+      } catch (error) {
+        if (!(error instanceof Error)) {
+          throw error;
+        }
+
         setTxError(error.message);
         setIsTxErrorDialogOpen(true);
       }
@@ -170,7 +173,11 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
         );
 
         return ethProvider;
-      } catch (error: any) {
+      } catch (error) {
+        if (!(error instanceof Error)) {
+          throw error;
+        }
+
         setTxError(error.message);
         setIsTxErrorDialogOpen(true);
       }
@@ -330,7 +337,11 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
       const { topic } = requestEvent;
       await web3wallet!.respondSessionRequest({ topic, response });
       navigation.navigate('Laconic');
-    } catch (error: any) {
+    } catch (error) {
+      if (!(error instanceof Error)) {
+        throw error;
+      }
+
       setTxError(error.message);
       setIsTxErrorDialogOpen(true);
     }
@@ -368,7 +379,11 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
 
           setBalance(cosmosBalance?.amount!);
         }
-      } catch (error: any) {
+      } catch (error) {
+        if (!(error instanceof Error)) {
+          throw error;
+        }
+
         setTxError(error.message);
         setIsTxErrorDialogOpen(true);
       }
@@ -431,7 +446,11 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
           const gasLimit = await provider.estimateGas(transactionObject);
           setEthGasLimit(gasLimit);
         }
-      } catch (error: any) {
+      } catch (error) {
+        if (!(error instanceof Error)) {
+          throw error;
+        }
+
         setTxError(error.message);
         setIsTxErrorDialogOpen(true);
       }
@@ -457,10 +476,14 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
 
         setCosmosGasLimit(
           String(
-            Math.round(gasEstimation * Number(Config.DEFAULT_GAS_ADJUSTMENT)),
+            Math.round(gasEstimation * Number(process.env.REACT_APP_GAS_ADJUSTMENT)),
           ),
         );
-      } catch (error: any) {
+      } catch (error) {
+        if (!(error instanceof Error)) {
+          throw error;
+        }
+
         setTxError(error.message);
         setIsTxErrorDialogOpen(true);
       }

src/screens/EditNetwork.tsx

@@ -96,7 +96,7 @@ const EditNetwork = ({ route }: EditNetworkProps) => {
   );
 
   return (
-    <View>
+    <View style={styles.appContainer}>
       <View>
         <Text style={styles.subHeading}>
           Edit {networkData?.networkName} details

src/screens/HomeScreen.tsx

@@ -4,7 +4,7 @@ import { Button, Text } from 'react-native-paper';
 
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useNavigation } from '@react-navigation/native';
-// import { getSdkError } from '@walletconnect/utils';
+import { getSdkError } from '@walletconnect/utils';
 
 import { createWallet, resetWallet, retrieveAccounts } from '../utils/accounts';
 import { DialogComponent } from '../components/Dialog';
@@ -58,7 +58,6 @@ const HomeScreen = () => {
   const [isWalletCreating, setIsWalletCreating] = useState<boolean>(false);
   const [walletDialog, setWalletDialog] = useState<boolean>(false);
   const [resetWalletDialog, setResetWalletDialog] = useState<boolean>(false);
-  // const [isAccountsFetched, setIsAccountsFetched] = useState<boolean>(false);
   const [isAccountsFetched, setIsAccountsFetched] = useState<boolean>(true);
   const [phrase, setPhrase] = useState('');
 
@@ -99,14 +98,14 @@ const HomeScreen = () => {
     setNetworksData([]);
     setSelectedNetwork(undefined);
     await resetWallet();
-    // const sessions = web3wallet!.getActiveSessions();
+    const sessions = web3wallet!.getActiveSessions();
 
-    // Object.keys(sessions).forEach(async sessionId => {
+    Object.keys(sessions).forEach(async sessionId => {
-    //   await web3wallet!.disconnectSession({
+      await web3wallet!.disconnectSession({
-    //     topic: sessionId,
+        topic: sessionId,
-    //     reason: getSdkError('USER_DISCONNECTED'),
+        reason: getSdkError('USER_DISCONNECTED'),
-    //   });
+      });
-    // });
+    });
     setActiveSessions({});
 
     hideResetDialog();

src/screens/SignMessage.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, Alert } from 'react-native';
+import { View } from 'react-native';
 import { Button, Text, TextInput } from 'react-native-paper';
 
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
@@ -25,7 +25,7 @@ const SignMessage = ({ route }: SignProps) => {
       chainId,
       accountId: account.index,
     });
-    Alert.alert('Signature', signedMessage);
+    alert(`Signature ${signedMessage}`);
   };
 
   return (

src/screens/SignRequest.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Alert, Image, ScrollView, View } from 'react-native';
+import { Image, ScrollView, View } from 'react-native';
 import { ActivityIndicator, Button, Text, Appbar } from 'react-native-paper';
-import { SvgUri } from 'react-native-svg';
 
 import { useNavigation } from '@react-navigation/native';
 import {
@@ -210,7 +209,7 @@ const SignRequest = ({ route }: SignRequestProps) => {
         chainId,
         accountId: account.index,
       });
-      Alert.alert('Signature', signedMessage);
+      alert(`Signature ${signedMessage}`);
     }
   };
 
@@ -279,7 +278,7 @@ const SignRequest = ({ route }: SignRequestProps) => {
                 <>
                   {requestIcon.endsWith('.svg') ? (
                     <View style={styles.dappLogo}>
-                      <SvgUri height="50" width="50" uri={requestIcon} />
+                      <Text>SvgURI requstIcon</Text>
                     </View>
                   ) : (
                     <Image

src/screens/WalletConnect.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect } from 'react';
 import { Image, TouchableOpacity, View } from 'react-native';
 import { List, Text } from 'react-native-paper';
-import { SvgUri } from 'react-native-svg';
 
-// import { getSdkError } from '@walletconnect/utils';
+import { getSdkError } from '@walletconnect/utils';
 
 import { useWalletConnect } from '../context/WalletConnectContext';
 import { web3wallet } from '../utils/wallet-connect/WalletConnectUtils';
@@ -13,10 +12,10 @@ export default function WalletConnect() {
   const { activeSessions, setActiveSessions } = useWalletConnect();
 
   const disconnect = async (sessionId: string) => {
-    // await web3wallet!.disconnectSession({
+    await web3wallet!.disconnectSession({
-    //   topic: sessionId,
+      topic: sessionId,
-    //   reason: getSdkError('USER_DISCONNECTED'),
+      reason: getSdkError('USER_DISCONNECTED'),
-    // });
+    });
     const sessions = web3wallet?.getActiveSessions() || {};
     setActiveSessions(sessions);
     return;
@@ -48,11 +47,7 @@ export default function WalletConnect() {
                   <>
                     {session.peer.metadata.icons[0].endsWith('.svg') ? (
                       <View style={styles.dappLogo}>
-                        <SvgUri
+                        <Text>SvgURI peerMetaDataIcon</Text>
-                          height="50"
-                          width="50"
-                          uri={session.peer.metadata.icons[0]}
-                        />
                       </View>
                     ) : (
                       <Image

src/styles/stylesheet.js

@@ -218,17 +218,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     marginVertical: 3,
   },
-  cameraContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   inputContainer: {
     marginTop: 20,
   },
-  camera: {
-    width: 400,
-    height: 400,
-  },
   dappDetails: {
     display: 'flex',
     alignItems: 'center',
@@ -282,6 +274,9 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     padding: 8,
   },
+  linkContainer: {
+    paddingBottom: 72
+  }
 });
 
 export default styles;

src/types.ts

@@ -1,7 +1,7 @@
 import { PopulatedTransaction } from 'ethers';
 
-// import { SignClientTypes, SessionTypes } from '@walletconnect/types';
+import { SignClientTypes, SessionTypes } from '@walletconnect/types';
-// import { Web3WalletTypes } from '@walletconnect/web3wallet';
+import { Web3WalletTypes } from '@walletconnect/web3wallet';
 import { EncodeObject } from '@cosmjs/proto-signing';
 
 export type StackParamsList = {
@@ -15,17 +15,13 @@ export type StackParamsList = {
     namespace: string;
     address: string;
     message: string;
-    // requestEvent?: Web3WalletTypes.SessionRequest;
+    requestEvent?: Web3WalletTypes.SessionRequest;
-    // requestSessionData?: SessionTypes.Struct;
+    requestSessionData?: SessionTypes.Struct;
-    requestEvent?: any;
-    requestSessionData?: any;
   };
   ApproveTransfer: {
     transaction: PopulatedTransaction;
-    // requestEvent: Web3WalletTypes.SessionRequest;
+    requestEvent: Web3WalletTypes.SessionRequest;
-    // requestSessionData: SessionTypes.Struct;
+    requestSessionData: SessionTypes.Struct;
-    requestEvent: any;
-    requestSessionData: any;
   };
   InvalidPath: undefined;
   WalletConnect: undefined;
@@ -37,10 +33,8 @@ export type StackParamsList = {
   ApproveTransaction: {
     transactionMessage: EncodeObject;
     signer: string;
-    // requestEvent: Web3WalletTypes.SessionRequest;
+    requestEvent: Web3WalletTypes.SessionRequest;
-    // requestSessionData: SessionTypes.Struct;
+    requestSessionData: SessionTypes.Struct;
-    requestEvent: any;
-    requestSessionData: any;
   };
 };
 
@@ -120,21 +114,19 @@ export interface PairingModalProps {
   visible: boolean;
   setModalVisible: (arg1: boolean) => void;
   currentProposal:
-    // | SignClientTypes.EventArguments['session_proposal']
+    | SignClientTypes.EventArguments['session_proposal']
     | undefined;
   setCurrentProposal: (
-    arg1: 
+    arg1:
-      // | SignClientTypes.EventArguments['session_proposal'] 
+      | SignClientTypes.EventArguments['session_proposal']
       | undefined,
   ) => void;
   setToastVisible: (arg1: boolean) => void;
 }
 
 export interface WalletConnectContextProps {
-  // activeSessions: Record<string, SessionTypes.Struct>;
+  activeSessions: Record<string, SessionTypes.Struct>;
-  activeSessions: Record<string, any>;
   setActiveSessions: (
-    // activeSessions: Record<string, SessionTypes.Struct>,
+    activeSessions: Record<string, SessionTypes.Struct>,
-    activeSessions: Record<string, any>,
   ) => void;
 }

src/utils/misc.ts

@@ -119,14 +119,14 @@ const resetKeyServers = async (namespace: string) => {
 
   const networksData: NetworksDataState[] = JSON.parse(networksServer);
   const filteredNetworks = networksData.filter(
-    (network: any) => network.namespace === namespace,
+    network => network.namespace === namespace,
   );
 
   if (filteredNetworks.length === 0) {
     throw new Error(`No networks found for namespace ${namespace}.`);
   }
 
-  filteredNetworks.forEach(async (network: any) => {
+  filteredNetworks.forEach(async network => {
     const { chainId } = network;
     const namespaceChainId = `${namespace}:${chainId}`;
 

src/utils/wallet-connect/WalletConnectUtils.tsx

@@ -1,36 +1,32 @@
-import Config from 'react-native-config';
 
-// import '@walletconnect/react-native-compat';
 import '@ethersproject/shims';
-// import { Core } from '@walletconnect/core';
+import { Core } from '@walletconnect/core';
-// import { ICore } from '@walletconnect/types';
+import { ICore } from '@walletconnect/types';
-// import { Web3Wallet, IWeb3Wallet } from '@walletconnect/web3wallet';
+import { Web3Wallet, IWeb3Wallet } from '@walletconnect/web3wallet';
 
-export let web3wallet: 
+export let web3wallet:
-  // | IWeb3Wallet
+  | IWeb3Wallet
-  | any;
+  | undefined;
-export let core: 
+export let core: ICore;
-  // | ICore
-  | any;
 
 export async function createWeb3Wallet() {
-  // core = new Core({
+  core = new Core({
-  //   projectId: Config.WALLET_CONNECT_PROJECT_ID,
+    projectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
-  // });
+  });
 
-  // web3wallet = await Web3Wallet.init({
+  web3wallet = await Web3Wallet.init({
-  //   core,
+    core,
-  //   metadata: {
+    metadata: {
-  //     name: 'Laconic Wallet',
+      name: 'Laconic Wallet',
-  //     description: 'Laconic Wallet',
+      description: 'Laconic Wallet',
-  //     url: 'https://wallet.laconic.com/',
+      url: 'https://wallet.laconic.com/',
-  //     icons: ['https://avatars.githubusercontent.com/u/92608123'],
+      icons: ['https://avatars.githubusercontent.com/u/92608123'],
-  //   },
+    },
-  // });
+  });
 }
 
 export async function web3WalletPair(params: { uri: string }) {
   if (web3wallet) {
-    // return await web3wallet.core.pairing.pair({ uri: params.uri });
+    return await web3wallet.core.pairing.pair({ uri: params.uri });
   }
 }

src/utils/wallet-connect/helpers.ts

@@ -2,7 +2,7 @@
 
 import { utils } from 'ethers';
 
-// import { ProposalTypes } from '@walletconnect/types';
+import { ProposalTypes } from '@walletconnect/types';
 
 import { Account, NetworksDataState } from '../../types';
 import { EIP155_SIGNING_METHODS } from './EIP155Data';
@@ -35,10 +35,8 @@ export function getSignParamsMessage(params: string[]) {
 }
 
 export const getNamespaces = async (
-  // optionalNamespaces: ProposalTypes.OptionalNamespaces,
+  optionalNamespaces: ProposalTypes.OptionalNamespaces,
-  // requiredNamespaces: ProposalTypes.RequiredNamespaces,
+  requiredNamespaces: ProposalTypes.RequiredNamespaces,
-  optionalNamespaces: any,
-  requiredNamespaces: any,
   networksData: NetworksDataState[],
   selectedNetwork: NetworksDataState,
   accounts: Account[],

src/utils/wallet-connect/wallet-connect-requests.ts

@@ -2,8 +2,8 @@
 import { BigNumber, Wallet, providers } from 'ethers';
 
 import { formatJsonRpcError, formatJsonRpcResult } from '@json-rpc-tools/utils';
-// import { SignClientTypes } from '@walletconnect/types';
+import { SignClientTypes } from '@walletconnect/types';
-// import { getSdkError } from '@walletconnect/utils';
+import { getSdkError } from '@walletconnect/utils';
 import {
   SigningStargateClient,
   StdFee,
@@ -11,6 +11,7 @@ import {
 } from '@cosmjs/stargate';
 import { EncodeObject } from '@cosmjs/proto-signing';
 import { LaconicClient } from '@cerc-io/registry-sdk';
+import { Buffer } from 'buffer';
 
 import { EIP155_SIGNING_METHODS } from './EIP155Data';
 import { signDirectMessage, signEthMessage } from '../sign-message';
@@ -67,8 +68,7 @@ export type WalletConnectRequests =
   | CosmosSendTransaction;
 
 export async function approveWalletConnectRequest(
-  // requestEvent: SignClientTypes.EventArguments['session_request'],
+  requestEvent: SignClientTypes.EventArguments['session_request'],
-  requestEvent: any,
   account: Account,
   namespace: string,
   chainId: string,
@@ -207,15 +207,14 @@ export async function approveWalletConnectRequest(
       });
 
     default:
-      // throw new Error(getSdkError('INVALID_METHOD').message);
+      throw new Error(getSdkError('INVALID_METHOD').message);
   }
 }
 
 export function rejectWalletConnectRequest(
-  // request: SignClientTypes.EventArguments['session_request'],
+  request: SignClientTypes.EventArguments['session_request'],
-  request: any,
 ) {
-  // const { id } = request;
+  const { id } = request;
 
-  // return formatJsonRpcError(id, getSdkError('USER_REJECTED_METHODS').message);
+  return formatJsonRpcError(id, getSdkError('USER_REJECTED_METHODS').message);
 }