From fbfd6b9709a99d400b47cd01c9b146ff0576cd56 Mon Sep 17 00:00:00 2001
From: Adwait Gharpure <69599306+Adw8@users.noreply.github.com>
Date: Mon, 18 Mar 2024 15:08:30 +0530
Subject: [PATCH] Add scroll to pairing modal (#60)

* Add scrolling to pairing modal

* Set wallet connect state empty before populating

---------

Co-authored-by: Adw8 <adwait@deepstacksoft.com>
---
 src/components/PairingModal.tsx | 83 ++++++++++++++++++---------------
 src/styles/stylesheet.js        |  1 +
 2 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/components/PairingModal.tsx b/src/components/PairingModal.tsx
index aa19cf8..3f282ac 100644
--- a/src/components/PairingModal.tsx
+++ b/src/components/PairingModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Image, View, Modal } from 'react-native';
+import { Image, View, Modal, ScrollView } from 'react-native';
 import { Button, Text } from 'react-native-paper';
 
 import { SessionTypes } from '@walletconnect/types';
@@ -39,6 +39,11 @@ const PairingModal = ({
     }
     const { params } = currentProposal;
     const { requiredNamespaces } = params;
+    setWalletConnectData({
+      walletConnectMethods: [],
+      walletConnectEvents: [],
+      walletConnectChains: [],
+    });
     Object.keys(requiredNamespaces).forEach(key => {
       switch (key) {
         case 'eip155':
@@ -176,47 +181,51 @@ const PairingModal = ({
 
   return (
     <Modal visible={visible} animationType="slide" transparent>
-      <View style={styles.container}>
+      <View style={{ flex: 1 }}>
         <View style={styles.modalContentContainer}>
-          {icon && (
-            <Image
-              style={styles.dappLogo}
-              source={icon ? { uri: icon } : undefined}
-            />
-          )}
+          <ScrollView showsVerticalScrollIndicator={true}>
+            <View style={styles.container}>
+              {icon && (
+                <Image
+                  style={styles.dappLogo}
+                  source={icon ? { uri: icon } : undefined}
+                />
+              )}
 
-          <Text variant="bodyMedium">{url}</Text>
-          <View style={styles.marginVertical8} />
-          <Text variant="titleMedium">Connect to this site?</Text>
-          <Text>Chains: {walletConnectData.walletConnectChains}</Text>
+              <Text variant="bodyMedium">{url}</Text>
+              <View style={styles.marginVertical8} />
+              <Text variant="titleMedium">Connect to this site?</Text>
+              <Text>Chains: {walletConnectData.walletConnectChains}</Text>
 
-          <View style={styles.marginVertical8}>
-            <Text variant="titleMedium">Methods Requested:</Text>
-            {walletConnectData.walletConnectMethods.map(method => (
-              <Text style={styles.centerText} key={method}>
-                {method}
-              </Text>
-            ))}
-          </View>
+              <View style={styles.marginVertical8}>
+                <Text variant="titleMedium">Methods Requested:</Text>
+                {walletConnectData.walletConnectMethods.map(method => (
+                  <Text style={styles.centerText} key={method}>
+                    {method}
+                  </Text>
+                ))}
+              </View>
 
-          <View style={styles.marginVertical8}>
-            <Text variant="titleMedium">Events Requested:</Text>
-            {walletConnectData.walletConnectEvents.map(event => (
-              <Text style={styles.centerText} key={event}>
-                {event}
-              </Text>
-            ))}
-          </View>
+              <View style={styles.marginVertical8}>
+                <Text variant="titleMedium">Events Requested:</Text>
+                {walletConnectData.walletConnectEvents.map(event => (
+                  <Text style={styles.centerText} key={event}>
+                    {event}
+                  </Text>
+                ))}
+              </View>
 
-          <View style={styles.flexRow}>
-            <Button mode="contained" onPress={() => handleAccept()}>
-              Accept
-            </Button>
-            <View style={styles.space} />
-            <Button mode="outlined" onPress={() => handleReject()}>
-              Cancel
-            </Button>
-          </View>
+              <View style={styles.flexRow}>
+                <Button mode="contained" onPress={() => handleAccept()}>
+                  Accept
+                </Button>
+                <View style={styles.space} />
+                <Button mode="outlined" onPress={() => handleReject()}>
+                  Cancel
+                </Button>
+              </View>
+            </View>
+          </ScrollView>
         </View>
       </View>
     </Modal>
diff --git a/src/styles/stylesheet.js b/src/styles/stylesheet.js
index 7bc6282..22f96a1 100644
--- a/src/styles/stylesheet.js
+++ b/src/styles/stylesheet.js
@@ -150,6 +150,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    marginBottom: 10,
   },
   modalContentContainer: {
     display: 'flex',