From d44d8a3092fb0fa00b2a0bd64ab187ad56eabb6a Mon Sep 17 00:00:00 2001
From: Adwait Gharpure <69599306+Adw8@users.noreply.github.com>
Date: Thu, 7 Mar 2024 15:28:12 +0530
Subject: [PATCH] UI changes for wallet-connect integration (#43)

* Change button position

* Add check for counterId

* Display complete uri

* Update readme

---------

Co-authored-by: Adw8 <adwait@deepstacksoft.com>
---
 README.md                                   |  4 ++--
 components/PairingModal.tsx                 |  8 ++++----
 components/SignRequest.tsx                  | 18 ++++++++++--------
 components/WalletConnect.tsx                |  5 ++++-
 utils/wallet-connect/EIP155Requests.ts      |  2 +-
 utils/wallet-connect/WalletConnectUtils.tsx |  2 +-
 6 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index d136cee..3baa401 100644
--- a/README.md
+++ b/README.md
@@ -95,7 +95,7 @@
 
 6. Press `a` to run the application on android
 
-## Setup for example-signer-app
+## Setup for signature-requester-app
 
 1. Clone the repository:
 
@@ -106,7 +106,7 @@
 2. Enter the project directory:
 
    ```
-   cd example-signer-app
+   cd signature-requester-app
    ```
 
 3. Install the dependancies
diff --git a/components/PairingModal.tsx b/components/PairingModal.tsx
index 63bf114..d29466c 100644
--- a/components/PairingModal.tsx
+++ b/components/PairingModal.tsx
@@ -99,13 +99,13 @@ const PairingModal = ({
           </View>
 
           <View style={styles.flexRow}>
-            <Button mode="outlined" onPress={() => handleReject()}>
-              Cancel
-            </Button>
-            <View style={styles.space} />
             <Button mode="contained" onPress={() => handleAccept()}>
               Accept
             </Button>
+            <View style={styles.space} />
+            <Button mode="outlined" onPress={() => handleReject()}>
+              Cancel
+            </Button>
           </View>
         </View>
       </View>
diff --git a/components/SignRequest.tsx b/components/SignRequest.tsx
index 5d7f7ab..2517f82 100644
--- a/components/SignRequest.tsx
+++ b/components/SignRequest.tsx
@@ -44,15 +44,16 @@ const SignRequest = ({ route }: SignRequestProps) => {
       return;
     }
 
-    if (requestAccount && requestAccount !== account) {
+    if (requestAccount !== account) {
       setAccount(requestAccount);
     }
-    if (requestMessage && requestMessage !== message) {
+    if (requestMessage !== message) {
       setMessage(decodeURIComponent(requestMessage));
     }
-    if (requestNetwork && requestNetwork !== network) {
+    if (requestNetwork !== network) {
       setNetwork(requestNetwork);
     }
+    setIsLoading(false);
   };
 
   const sanitizePath = (path: string) => {
@@ -90,7 +91,6 @@ const SignRequest = ({ route }: SignRequestProps) => {
         route.params?.address,
         route.params?.message,
       );
-    setIsLoading(false);
   }, [route]);
 
   const handleEIP155Request = async () => {
@@ -142,7 +142,9 @@ const SignRequest = ({ route }: SignRequestProps) => {
   return (
     <>
       {isLoading ? (
-        <ActivityIndicator />
+        <View style={styles.spinnerContainer}>
+          <ActivityIndicator size="large" color="#0000ff" />
+        </View>
       ) : (
         <View style={styles.appContainer}>
           <AccountDetails account={account} />
@@ -150,15 +152,15 @@ const SignRequest = ({ route }: SignRequestProps) => {
             <Text variant="bodyLarge">{message}</Text>
           </View>
           <View style={styles.buttonContainer}>
+            <Button mode="contained" onPress={signMessageHandler}>
+              Yes
+            </Button>
             <Button
               mode="contained"
               onPress={rejectRequestHandler}
               buttonColor="#B82B0D">
               No
             </Button>
-            <Button mode="contained" onPress={signMessageHandler}>
-              Yes
-            </Button>
           </View>
         </View>
       )}
diff --git a/components/WalletConnect.tsx b/components/WalletConnect.tsx
index 67e6786..eeac98d 100644
--- a/components/WalletConnect.tsx
+++ b/components/WalletConnect.tsx
@@ -81,11 +81,14 @@ const WalletConnect = () => {
           </View>
 
           <View style={styles.inputContainer}>
+            <Text variant="titleMedium">Enter WalletConnect URI</Text>
             <TextInput
               mode="outlined"
               onChangeText={setCurrentWCURI}
               value={currentWCURI}
-              placeholder="Enter WalletConnect URI"
+              numberOfLines={4}
+              multiline={true}
+              style={{ padding: 10 }}
             />
 
             <View style={styles.signButton}>
diff --git a/utils/wallet-connect/EIP155Requests.ts b/utils/wallet-connect/EIP155Requests.ts
index bdb207b..ff22243 100644
--- a/utils/wallet-connect/EIP155Requests.ts
+++ b/utils/wallet-connect/EIP155Requests.ts
@@ -18,7 +18,7 @@ export async function approveEIP155Request(
     case EIP155_SIGNING_METHODS.PERSONAL_SIGN:
       const message = getSignParamsMessage(request.params);
       const signedMessage =
-        counterId && (await signEthMessage(message, counterId));
+        counterId !== undefined && (await signEthMessage(message, counterId));
       return formatJsonRpcResult(id, signedMessage);
 
     default:
diff --git a/utils/wallet-connect/WalletConnectUtils.tsx b/utils/wallet-connect/WalletConnectUtils.tsx
index eb60607..6a37893 100644
--- a/utils/wallet-connect/WalletConnectUtils.tsx
+++ b/utils/wallet-connect/WalletConnectUtils.tsx
@@ -29,7 +29,7 @@ export async function createWeb3Wallet() {
     core,
     metadata: {
       name: 'Laconic Wallet',
-      description: 'ReactNative Laconic Wallet',
+      description: 'Laconic Wallet',
       url: 'https://wallet.laconic.com/',
       icons: ['https://avatars.githubusercontent.com/u/92608123'],
     },