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

Display buttons above scroll in laconic-wallet approve screens (#72)

Browse Source 
* Buttons outside scroll

* Fix ui for signRequest page

* Remove todo
This commit is contained in:
IshaVenikar 2024-04-01 18:00:40 +05:30 committed by GitHub
parent d50cfbfe84
commit 0dea0082b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 88 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/screens/ApproveTransaction.tsx
View File

@ -209,53 +209,57 @@ const ApproveTransaction = ({ route }: SignRequestProps) => {
<ActivityIndicator size="large" color="#0000ff" /> <ActivityIndicator size="large" color="#0000ff" />
</View> </View>
) : ( ) : (
<ScrollView contentContainerStyle={styles.appContainer}> <>
<View style={styles.dappDetails}> <ScrollView contentContainerStyle={styles.appContainer}>
{requestIcon && ( <View style={styles.dappDetails}>
<Image {requestIcon && (
style={styles.dappLogo} <Image
source={requestIcon ? { uri: requestIcon } : undefined} style={styles.dappLogo}
/> source={requestIcon ? { uri: requestIcon } : undefined}
)} />
<Text>{requestName}</Text>
<Text variant="bodyMedium">{requestURL}</Text>
</View>
<View style={styles.dataBoxContainer}>
<Text style={styles.dataBoxLabel}>From</Text>
<View style={styles.dataBox}>
<AccountDetails account={account} />
</View>
</View>
<DataBox
label={`Balance ${
network === 'eth' ? '(Wei)' : `(${COSMOS_DENOM})`
}`}
data={
balance === '' || balance === undefined
? 'Loading balance...'
: `${balance}`
}
/>
{transaction && (
<View style={styles.approveTransaction}>
<DataBox label="To" data={transaction.to!} />
<DataBox
label={`Amount ${
network === 'eth' ? '(Wei)' : `(${COSMOS_DENOM})`
}`}
data={BigNumber.from(transaction.value?.toString()).toString()}
/>
<DataBox
label={`Gas Fees ${
network === 'eth' ? '(Wei)' : `(${COSMOS_DENOM})`
}`}
data={gasFees!}
/>
{network === 'eth' && (
<DataBox label="Data" data={transaction.data!} />
)} )}
<Text>{requestName}</Text>
<Text variant="bodyMedium">{requestURL}</Text>
</View> </View>
)} <View style={styles.dataBoxContainer}>
<Text style={styles.dataBoxLabel}>From</Text>
<View style={styles.dataBox}>
<AccountDetails account={account} />
</View>
</View>
<DataBox
label={`Balance ${
network === 'eth' ? '(Wei)' : `(${COSMOS_DENOM})`
}`}
data={
balance === '' || balance === undefined
? 'Loading balance...'
: `${balance}`
}
/>
{transaction && (
<View style={styles.approveTransaction}>
<DataBox label="To" data={transaction.to!} />
<DataBox
label={`Amount ${
network === 'eth' ? '(Wei)' : `(${COSMOS_DENOM})`
}`}
data={BigNumber.from(
transaction.value?.toString(),
).toString()}
/>
<DataBox
label={`Gas Fees ${
network === 'eth' ? '(Wei)' : `(${COSMOS_DENOM})`
}`}
data={gasFees!}
/>
{network === 'eth' && (
<DataBox label="Data" data={transaction.data!} />
)}
</View>
)}
</ScrollView>
<View style={styles.buttonContainer}> <View style={styles.buttonContainer}>
<Button <Button
mode="contained" mode="contained"
@ -271,7 +275,7 @@ const ApproveTransaction = ({ route }: SignRequestProps) => {
No No
</Button> </Button>
</View> </View>
</ScrollView> </>
)} )}
</> </>
); );

65
src/screens/SignRequest.tsx
View File

@ -221,38 +221,39 @@ const SignRequest = ({ route }: SignRequestProps) => {
<ActivityIndicator size="large" color="#0000ff" /> <ActivityIndicator size="large" color="#0000ff" />
</View> </View>
) : ( ) : (
<ScrollView contentContainerStyle={styles.appContainer}> <>
<View style={styles.dappDetails}> <ScrollView contentContainerStyle={styles.appContainer}>
{requestIcon && ( <View style={styles.dappDetails}>
<> {requestIcon && (
{requestIcon.endsWith('.svg') ? ( <>
<View style={styles.dappLogo}> {requestIcon.endsWith('.svg') ? (
<SvgUri height="50" width="50" uri={requestIcon} /> <View style={styles.dappLogo}>
</View> <SvgUri height="50" width="50" uri={requestIcon} />
) : ( </View>
<Image ) : (
style={styles.dappLogo} <Image
source={{ uri: requestIcon }} style={styles.dappLogo}
/> source={{ uri: requestIcon }}
)} />
</> )}
)} </>
<Text>{requestName}</Text> )}
<Text variant="bodyMedium">{requestURL}</Text> <Text>{requestName}</Text>
</View> <Text variant="bodyMedium">{requestURL}</Text>
<AccountDetails account={account} /> </View>
{isCosmosSignDirect || isEthSendTransaction ? ( <AccountDetails account={account} />
<View style={styles.requestDirectMessage}> {isCosmosSignDirect || isEthSendTransaction ? (
<ScrollView nestedScrollEnabled> <View style={styles.requestDirectMessage}>
<ScrollView nestedScrollEnabled>
<Text variant="bodyLarge">{message}</Text>
</ScrollView>
</View>
) : (
<View style={styles.requestMessage}>
<Text variant="bodyLarge">{message}</Text> <Text variant="bodyLarge">{message}</Text>
</ScrollView> </View>
</View> )}
) : ( </ScrollView>
<View style={styles.requestMessage}>
<Text variant="bodyLarge">{message}</Text>
</View>
)}
<View style={styles.buttonContainer}> <View style={styles.buttonContainer}>
<Button mode="contained" onPress={signMessageHandler}> <Button mode="contained" onPress={signMessageHandler}>
Yes Yes
@ -264,7 +265,7 @@ const SignRequest = ({ route }: SignRequestProps) => {
No No
</Button> </Button>
</View> </View>
</ScrollView> </>
)} )}
</> </>
); );

10
src/styles/stylesheet.js
View File

@ -125,21 +125,21 @@ const styles = StyleSheet.create({
requestDirectMessage: { requestDirectMessage: {
borderWidth: 1, borderWidth: 1,
borderRadius: 5, borderRadius: 5,
marginTop: 50, marginTop: 20,
height: '40%', marginBottom: 50,
height: 500,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
padding: 8, padding: 8,
}, },
approveTransaction: { approveTransaction: {
height: '40%', height: '40%',
marginBottom: 30,
}, },
// TODO: Fix button position
buttonContainer: { buttonContainer: {
flexDirection: 'row', flexDirection: 'row',
marginLeft: 20, marginLeft: 20,
marginTop: 20, marginBottom: 10,
marginBottom: 150,
justifyContent: 'space-evenly', justifyContent: 'space-evenly',
}, },
badRequestContainer: { badRequestContainer: {