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>

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