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

@@ -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

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>

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>
       )}

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}>

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:

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'],
     },