Display account details in approve transaction page (#118)

* Display account in approve transaction page

* Change label

src/App.tsx

@@ -178,9 +178,10 @@ const App = (): React.JSX.Element => {
           break;
 
         case COSMOS_METHODS.COSMOS_SEND_TRANSACTION:
+          const { transactionMessage, signer } = request.params;
           navigation.navigate('ApproveTransaction', {
-            transactionMessage: request.params.transactionMessage,
+            transactionMessage,
-            signer: request.params.signer,
+            signer,
             requestEvent,
             requestSessionData,
           });

src/screens/ApproveTransaction.tsx

@@ -27,6 +27,7 @@ import {
 import { web3wallet } from '../utils/wallet-connect/WalletConnectUtils';
 import { MEMO } from './ApproveTransfer';
 import TxErrorDialog from '../components/TxErrorDialog';
+import AccountDetails from '../components/AccountDetails';
 
 type ApproveTransactionProps = NativeStackScreenProps<
   StackParamsList,
@@ -214,7 +215,7 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
 
   return (
     <>
-      <ScrollView contentContainerStyle={styles.appContainer}>
+      <ScrollView contentContainerStyle={styles.approveTransaction}>
         <View style={styles.dappDetails}>
           {requestIcon && (
             <>
@@ -228,18 +229,24 @@ const ApproveTransaction = ({ route }: ApproveTransactionProps) => {
             </>
           )}
           <Text>{requestName}</Text>
-          <Text variant="bodyMedium">{requestURL}</Text>
+          <Text variant="bodySmall">{requestURL}</Text>
         </View>
-        <Text style={styles.dataBoxLabel}>TX</Text>
+        <AccountDetails account={account} />
+        <Text variant="bodyLarge" style={styles.transactionLabel}>
+          Message:
+        </Text>
         <View style={styles.messageBody}>
           <Text variant="bodyLarge">
             {JSON.stringify(transactionMessage, null, 2)}
           </Text>
         </View>
         <>
-          <Text style={styles.dataBoxLabel}>Gas Limit</Text>
+          <Text variant="bodyLarge" style={styles.transactionLabel}>
+            Gas Limit:
+          </Text>
           <TextInput
             mode="outlined"
+            style={styles.transactionFeesInput}
             value={cosmosGasLimit}
             onChangeText={value => {
               if (IS_NUMBER_REGEX.test(value)) {

src/styles/stylesheet.js

@@ -213,10 +213,10 @@ const styles = StyleSheet.create({
   },
   messageBody: {
     borderWidth: 1,
-    borderRadius: 10,
+    borderRadius: 6,
     paddingVertical: 10,
     paddingHorizontal: 10,
-    marginVertical: 20,
+    marginVertical: 3,
   },
   cameraContainer: {
     justifyContent: 'center',
@@ -272,6 +272,16 @@ const styles = StyleSheet.create({
     marginVertical: 10,
   },
   transactionFeesInput: { marginBottom: 10 },
+  approveTransaction: {
+    flexGrow: 1,
+    marginTop: 0,
+    paddingHorizontal: 24,
+    paddingVertical: 5,
+  },
+  transactionLabel: {
+    fontWeight: '700',
+    padding: 8,
+  },
 });
 
 export default styles;