deep-stack/laconic-wallet
3
0
Fork 0
forked from cerc-io/laconic-wallet
Code Pull Requests Activity

Add scroll to pairing modal (#60)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/PairingModal.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; 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 { Button, Text } from 'react-native-paper';
import { SessionTypes } from '@walletconnect/types'; import { SessionTypes } from '@walletconnect/types';
@ -39,6 +39,11 @@ const PairingModal = ({
} }
const { params } = currentProposal; const { params } = currentProposal;
const { requiredNamespaces } = params; const { requiredNamespaces } = params;
setWalletConnectData({
walletConnectMethods: [],
walletConnectEvents: [],
walletConnectChains: [],
});
Object.keys(requiredNamespaces).forEach(key => { Object.keys(requiredNamespaces).forEach(key => {
switch (key) { switch (key) {
case 'eip155': case 'eip155':
@ -176,47 +181,51 @@ const PairingModal = ({
return ( return (
<Modal visible={visible} animationType="slide" transparent> <Modal visible={visible} animationType="slide" transparent>
<View style={styles.container}> <View style={{ flex: 1 }}>
<View style={styles.modalContentContainer}> <View style={styles.modalContentContainer}>
{icon && ( <ScrollView showsVerticalScrollIndicator={true}>
<Image <View style={styles.container}>
style={styles.dappLogo} {icon && (
source={icon ? { uri: icon } : undefined} <Image
/> style={styles.dappLogo}
)} source={icon ? { uri: icon } : undefined}
/>
)}
<Text variant="bodyMedium">{url}</Text> <Text variant="bodyMedium">{url}</Text>
<View style={styles.marginVertical8} /> <View style={styles.marginVertical8} />
<Text variant="titleMedium">Connect to this site?</Text> <Text variant="titleMedium">Connect to this site?</Text>
<Text>Chains: {walletConnectData.walletConnectChains}</Text> <Text>Chains: {walletConnectData.walletConnectChains}</Text>
<View style={styles.marginVertical8}> <View style={styles.marginVertical8}>
<Text variant="titleMedium">Methods Requested:</Text> <Text variant="titleMedium">Methods Requested:</Text>
{walletConnectData.walletConnectMethods.map(method => ( {walletConnectData.walletConnectMethods.map(method => (
<Text style={styles.centerText} key={method}> <Text style={styles.centerText} key={method}>
{method} {method}
</Text> </Text>
))} ))}
</View> </View>
<View style={styles.marginVertical8}> <View style={styles.marginVertical8}>
<Text variant="titleMedium">Events Requested:</Text> <Text variant="titleMedium">Events Requested:</Text>
{walletConnectData.walletConnectEvents.map(event => ( {walletConnectData.walletConnectEvents.map(event => (
<Text style={styles.centerText} key={event}> <Text style={styles.centerText} key={event}>
{event} {event}
</Text> </Text>
))} ))}
</View> </View>
<View style={styles.flexRow}> <View style={styles.flexRow}>
<Button mode="contained" onPress={() => handleAccept()}> <Button mode="contained" onPress={() => handleAccept()}>
Accept Accept
</Button> </Button>
<View style={styles.space} /> <View style={styles.space} />
<Button mode="outlined" onPress={() => handleReject()}> <Button mode="outlined" onPress={() => handleReject()}>
Cancel Cancel
</Button> </Button>
</View> </View>
</View>
</ScrollView>
</View> </View>
</View> </View>
</Modal> </Modal>

1
src/styles/stylesheet.js
View File

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