From 0dea0082b4ff7dfed94c8a09e7341a1a74310ecb Mon Sep 17 00:00:00 2001
From: IshaVenikar <145848618+IshaVenikar@users.noreply.github.com>
Date: Mon, 1 Apr 2024 18:00:40 +0530
Subject: [PATCH] Display buttons above scroll in laconic-wallet approve
 screens (#72)

* Buttons outside scroll

* Fix ui for signRequest page

* Remove todo
---
 src/screens/ApproveTransaction.tsx | 96 ++++++++++++++++--------------
 src/screens/SignRequest.tsx        | 65 ++++++++++----------
 src/styles/stylesheet.js           | 10 ++--
 3 files changed, 88 insertions(+), 83 deletions(-)

diff --git a/src/screens/ApproveTransaction.tsx b/src/screens/ApproveTransaction.tsx
index 5eac3b0..a828806 100644
--- a/src/screens/ApproveTransaction.tsx
+++ b/src/screens/ApproveTransaction.tsx
@@ -209,53 +209,57 @@ const ApproveTransaction = ({ route }: SignRequestProps) => {
           <ActivityIndicator size="large" color="#0000ff" />
         </View>
       ) : (
-        <ScrollView contentContainerStyle={styles.appContainer}>
-          <View style={styles.dappDetails}>
-            {requestIcon && (
-              <Image
-                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!} />
+        <>
+          <ScrollView contentContainerStyle={styles.appContainer}>
+            <View style={styles.dappDetails}>
+              {requestIcon && (
+                <Image
+                  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!} />
+                )}
+              </View>
+            )}
+          </ScrollView>
           <View style={styles.buttonContainer}>
             <Button
               mode="contained"
@@ -271,7 +275,7 @@ const ApproveTransaction = ({ route }: SignRequestProps) => {
               No
             </Button>
           </View>
-        </ScrollView>
+        </>
       )}
     </>
   );
diff --git a/src/screens/SignRequest.tsx b/src/screens/SignRequest.tsx
index a109018..509deb6 100644
--- a/src/screens/SignRequest.tsx
+++ b/src/screens/SignRequest.tsx
@@ -221,38 +221,39 @@ const SignRequest = ({ route }: SignRequestProps) => {
           <ActivityIndicator size="large" color="#0000ff" />
         </View>
       ) : (
-        <ScrollView contentContainerStyle={styles.appContainer}>
-          <View style={styles.dappDetails}>
-            {requestIcon && (
-              <>
-                {requestIcon.endsWith('.svg') ? (
-                  <View style={styles.dappLogo}>
-                    <SvgUri height="50" width="50" uri={requestIcon} />
-                  </View>
-                ) : (
-                  <Image
-                    style={styles.dappLogo}
-                    source={{ uri: requestIcon }}
-                  />
-                )}
-              </>
-            )}
-            <Text>{requestName}</Text>
-            <Text variant="bodyMedium">{requestURL}</Text>
-          </View>
-          <AccountDetails account={account} />
-          {isCosmosSignDirect || isEthSendTransaction ? (
-            <View style={styles.requestDirectMessage}>
-              <ScrollView nestedScrollEnabled>
+        <>
+          <ScrollView contentContainerStyle={styles.appContainer}>
+            <View style={styles.dappDetails}>
+              {requestIcon && (
+                <>
+                  {requestIcon.endsWith('.svg') ? (
+                    <View style={styles.dappLogo}>
+                      <SvgUri height="50" width="50" uri={requestIcon} />
+                    </View>
+                  ) : (
+                    <Image
+                      style={styles.dappLogo}
+                      source={{ uri: requestIcon }}
+                    />
+                  )}
+                </>
+              )}
+              <Text>{requestName}</Text>
+              <Text variant="bodyMedium">{requestURL}</Text>
+            </View>
+            <AccountDetails account={account} />
+            {isCosmosSignDirect || isEthSendTransaction ? (
+              <View style={styles.requestDirectMessage}>
+                <ScrollView nestedScrollEnabled>
+                  <Text variant="bodyLarge">{message}</Text>
+                </ScrollView>
+              </View>
+            ) : (
+              <View style={styles.requestMessage}>
                 <Text variant="bodyLarge">{message}</Text>
-              </ScrollView>
-            </View>
-          ) : (
-            <View style={styles.requestMessage}>
-              <Text variant="bodyLarge">{message}</Text>
-            </View>
-          )}
-
+              </View>
+            )}
+          </ScrollView>
           <View style={styles.buttonContainer}>
             <Button mode="contained" onPress={signMessageHandler}>
               Yes
@@ -264,7 +265,7 @@ const SignRequest = ({ route }: SignRequestProps) => {
               No
             </Button>
           </View>
-        </ScrollView>
+        </>
       )}
     </>
   );
diff --git a/src/styles/stylesheet.js b/src/styles/stylesheet.js
index 6052bb6..eaf2084 100644
--- a/src/styles/stylesheet.js
+++ b/src/styles/stylesheet.js
@@ -125,21 +125,21 @@ const styles = StyleSheet.create({
   requestDirectMessage: {
     borderWidth: 1,
     borderRadius: 5,
-    marginTop: 50,
-    height: '40%',
+    marginTop: 20,
+    marginBottom: 50,
+    height: 500,
     alignItems: 'center',
     justifyContent: 'center',
     padding: 8,
   },
   approveTransaction: {
     height: '40%',
+    marginBottom: 30,
   },
-  // TODO: Fix button position
   buttonContainer: {
     flexDirection: 'row',
     marginLeft: 20,
-    marginTop: 20,
-    marginBottom: 150,
+    marginBottom: 10,
     justifyContent: 'space-evenly',
   },
   badRequestContainer: {