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>
This commit is contained in:
Adwait Gharpure 2024-03-18 15:08:30 +05:30 committed by GitHub
parent 8ed4c33beb
commit fbfd6b9709
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 37 deletions

View File

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

View File

@ -150,6 +150,7 @@ const styles = StyleSheet.create({
flex: 1,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
},
modalContentContainer: {
display: 'flex',