fix: style of sign page, some other issues. (#313)

* fix: missing of translation key. * style: tuning style for click-to-open-detail-popup token. * fix: ui bugs * fix: global approval state * fix: balance change * fix: advanced settings * Update CancelApproval.tsx * fix: ui bugs * fix: token approve icon * fix: selectTextOnFocus * fix: sign ui * Update GasSelectorHeader.tsx * Update ReceiverPopup.tsx * Update GasSelectorHeader.tsx * fix: remove autoFocus * fix: bugs * Update GasMenuButton.tsx * fix: broadcastMode * fix: temporary solutions for approval and swap (#316) * fix: temporary solutions for approval and swap * fix: swap ui * typo: literals change. --------- Co-authored-by: heisenberg <[email protected]> Co-authored-by: DMY <[email protected]>
RabbyHub · Jul 4, 2024 · cbfda8b · cbfda8b
1 parent 002bb9e
commit cbfda8b
Show file tree

Hide file tree

Showing 33 changed files with 440 additions and 228 deletions.
diff --git a/apps/mobile/src/assets/locales/en/messages.json b/apps/mobile/src/assets/locales/en/messages.json
@@ -579,6 +579,7 @@
         "error": "Failed to add to contacts"
       },
       "allowTransferModal": {
+        "title": "Confirm to allow transaction",
         "error": "incorrect password",
         "placeholder": "Enter the Password to Confirm",
         "validator__empty": "Please input password",

diff --git a/apps/mobile/src/components/Approval/components/Actions/CancelTx.tsx b/apps/mobile/src/components/Approval/components/Actions/CancelTx.tsx
@@ -20,6 +20,7 @@ const getStyle = (colors: AppColorsVariants) =>
       borderRadius: 6,
       padding: 12,
       position: 'relative',
+      marginBottom: 16,
     },
     internalTransaction: {
       padding: 0,

diff --git a/apps/mobile/src/components/Approval/components/Actions/ContractCall.tsx b/apps/mobile/src/components/Approval/components/Actions/ContractCall.tsx
@@ -181,7 +181,7 @@ const ContractCall = ({
             </Row>
             {
               <Row>
-                <Text>
+                <Text style={commonStyle.primaryText}>
                   {formatTokenAmount(
                     new BigNumber(requireData.payNativeTokenAmount)
                       .div(1e18)

diff --git a/apps/mobile/src/components/Approval/components/Actions/Send.tsx b/apps/mobile/src/components/Approval/components/Actions/Send.tsx
@@ -1,4 +1,4 @@
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Chain } from '@/constant/chains';
@@ -69,7 +69,10 @@ const Send = ({
                   </Text>
                   <Values.TokenSymbol
                     token={actionData.token}
-                    style={commonStyle.primaryText}
+                    style={StyleSheet.flatten([
+                      commonStyle.primaryText,
+                      commonStyle.clickableTokenText,
+                    ])}
                   />
                 </View>
               }

diff --git a/apps/mobile/src/components/Approval/components/Actions/SendNFT.tsx b/apps/mobile/src/components/Approval/components/Actions/SendNFT.tsx
@@ -13,6 +13,8 @@ import { SecurityListItem } from './components/SecurityListItem';
 import { useApprovalSecurityEngine } from '../../hooks/useApprovalSecurityEngine';
 import useCommonStyle from '../../hooks/useCommonStyle';
 import { SubCol, SubRow, SubTable } from './components/SubTable';
+import { ALIAS_ADDRESS } from '@/constant/gas';
+import { INTERNAL_REQUEST_SESSION } from '@/constant';
 
 const SendNFT = ({
   data,
@@ -45,6 +47,8 @@ const SendNFT = ({
 
   const sendNftRef = React.useRef(null);
   const sendNftAddressRef = React.useRef(null);
+  const isLabelAddress =
+    requireData.name && Object.values(ALIAS_ADDRESS).includes(requireData.name);
 
   return (
     <View>
@@ -146,13 +150,22 @@ const SendNFT = ({
             </SubCol>
           )}
           {!!requireData.name && (
-            <SubCol nested>
-              <SubRow> </SubRow>
+            <SubCol nested={!isLabelAddress}>
+              <SubRow>{isLabelAddress ? t('page.signTx.label') : ' '}</SubRow>
               <SubRow>
-                <Text style={commonStyle.subRowNestedText}>
-                  {requireData.name.replace(/^Token: /, 'Token ') +
-                    ' contract address'}
-                </Text>
+                {isLabelAddress ? (
+                  <LogoWithText
+                    text={requireData.name}
+                    logo={INTERNAL_REQUEST_SESSION.icon}
+                    logoSize={14}
+                    textStyle={commonStyle.subRowNestedText}
+                  />
+                ) : (
+                  <Text style={commonStyle.subRowNestedText}>
+                    {requireData.name.replace(/^Token: /, 'Token ') +
+                      ' contract address'}
+                  </Text>
+                )}
               </SubRow>
             </SubCol>
           )}

diff --git a/apps/mobile/src/components/Approval/components/Actions/TokenApprove.tsx b/apps/mobile/src/components/Approval/components/Actions/TokenApprove.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
 import BigNumber from 'bignumber.js';
 import { useTranslation } from 'react-i18next';
 import { Chain } from '@/constant/chains';
@@ -25,9 +25,10 @@ import {
 import { AppColorsVariants } from '@/constant/theme';
 import { useThemeColors } from '@/hooks/theme';
 import { BottomSheetInput } from '@/components/Input';
-import { Button } from '@/components/Button';
 import { TokenAmountItem } from './components/TokenAmountItem';
 import { SubTable, SubCol, SubRow } from './components/SubTable';
+import { FooterButtonGroup } from '@/components/FooterButton/FooterButtonGroup';
+import { RcIconUnknownToken } from '@/screens/Approvals/icons';
 
 interface ApproveAmountModalProps {
   amount: number | string;
@@ -41,14 +42,13 @@ interface ApproveAmountModalProps {
 const getStyle = (colors: AppColorsVariants) =>
   StyleSheet.create({
     mainView: {
-      paddingHorizontal: 20,
       backgroundColor: colors['neutral-bg-1'],
       height: '100%',
     },
     approveAmountFooter: {
       display: 'flex',
       flexDirection: 'row',
-      justifyContent: 'space-between',
+      justifyContent: 'center',
       marginTop: 12,
     },
     approveAmountFooterLeft: {
@@ -57,11 +57,11 @@ const getStyle = (colors: AppColorsVariants) =>
       color: colors['neutral-foot'],
     },
     approveAmountFooterBalance: {
-      fontSize: 12,
-      lineHeight: 14,
+      fontSize: 15,
+      lineHeight: 18,
       textAlign: 'right',
       textDecorationLine: 'underline',
-      color: colors['neutral-foot'],
+      color: colors['neutral-body'],
     },
     approveAmountButton: {
       display: 'flex',
@@ -75,6 +75,19 @@ const getStyle = (colors: AppColorsVariants) =>
       marginLeft: 4,
       color: colors['blue-default'],
     },
+    addonText: {
+      fontSize: 13,
+      lineHeight: 16,
+      color: colors['neutral-foot'],
+    },
+    inputText: {
+      fontSize: 15,
+      color: colors['neutral-title-1'],
+      flex: 1,
+    },
+    container: {
+      paddingHorizontal: 20,
+    },
   });
 
 const ApproveAmountModal = ({
@@ -133,60 +146,64 @@ const ApproveAmountModal = ({
       ref={modalRef}
       keyboardBlurBehavior="restore"
       onDismiss={onCancel}
-      snapPoints={['30%']}>
+      snapPoints={[300]}>
       <BottomSheetView style={styles.mainView}>
         <AppBottomSheetModalTitle
           title={t('page.signTx.tokenApprove.amountPopupTitle')}
         />
-        <View>
-          <View>
-            <BottomSheetInput
-              value={customAmount}
-              onChange={e => handleChange(e.nativeEvent.text)}
-              autoFocus
-              addonAfter={
-                <Text>{ellipsisTokenSymbol(getTokenSymbol(token), 4)}</Text>
-              }
-            />
-            <View style={styles.approveAmountFooter}>
-              <Text style={styles.approveAmountFooterLeft}>
-                ≈
+
+        <View style={styles.container}>
+          <BottomSheetInput
+            value={customAmount}
+            onChange={e => handleChange(e.nativeEvent.text)}
+            // autoFocus
+            style={styles.inputText}
+            addonAfter={
+              <Text style={styles.addonText}>
+                ≈{' '}
                 {ellipsisOverflowedText(
                   formatUsdValue(new BigNumber(tokenPrice).toFixed()),
                   18,
                   true,
                 )}
               </Text>
-              {balance && (
-                <Text
-                  style={styles.approveAmountFooterBalance}
-                  onPress={() => {
-                    setCustomAmount(balance);
-                  }}>
-                  {t('global.Balance')}:{' '}
-                  {formatAmount(new BigNumber(balance).toFixed(4))}
-                </Text>
-              )}
-            </View>
-            <View style={styles.approveAmountButton}>
-              <Button
-                buttonStyle={{
-                  width: 200,
-                  backgroundColor: colors['blue-default'],
-                  height: 44,
-                  padding: 10,
-                }}
-                titleStyle={{
-                  color: '#fff',
-                  fontSize: 15,
-                }}
-                onPress={handleSubmit}
-                title={t('global.confirmButton')}
-                disabled={!canSubmit}
-              />
-            </View>
+            }
+            addonBefore={
+              token.logo_url ? (
+                <Image
+                  source={{ uri: token.logo_url }}
+                  style={StyleSheet.flatten({
+                    width: 20,
+                    height: 20,
+                    marginRight: 8,
+                  })}
+                />
+              ) : (
+                <RcIconUnknownToken
+                  width={20}
+                  height={20}
+                  style={StyleSheet.flatten({
+                    marginRight: 8,
+                  })}
+                />
+              )
+            }
+          />
+          <View style={styles.approveAmountFooter}>
+            {balance && (
+              <Text
+                style={styles.approveAmountFooterBalance}
+                onPress={() => {
+                  setCustomAmount(balance);
+                }}>
+                {t('global.Balance')}:{' '}
+                {formatAmount(new BigNumber(balance).toFixed(4))}
+              </Text>
+            )}
           </View>
         </View>
+
+        <FooterButtonGroup onCancel={onCancel} onConfirm={handleSubmit} />
       </BottomSheetView>
     </AppBottomSheetModal>
   );

diff --git a/apps/mobile/src/components/Approval/components/Actions/components/AddressMemo.tsx b/apps/mobile/src/components/Approval/components/Actions/components/AddressMemo.tsx
@@ -10,7 +10,6 @@ import {
 import { BottomSheetInput } from '@/components/Input';
 import { AppColorsVariants } from '@/constant/theme';
 import { useThemeColors } from '@/hooks/theme';
-import { Button } from '@/components/Button';
 import { useAlias } from '@/hooks/alias';
 import IconEdit from '@/assets/icons/approval/editpen.svg';
 import { BottomSheetView } from '@gorhom/bottom-sheet';
@@ -20,6 +19,7 @@ import {
 } from '@/components/customized/BottomSheet';
 import useCommonStyle from '@/components/Approval/hooks/useCommonStyle';
 import { FooterButtonGroup } from '@/components/FooterButton/FooterButtonGroup';
+import { useApprovalAlias } from '@/components/Approval/hooks/useApprovalAlias';
 
 const getStyles = (colors: AppColorsVariants) =>
   StyleSheet.create({
@@ -40,7 +40,8 @@ const AddressMemo = ({
   address: string;
   textStyle?: TextStyle;
 }) => {
-  const [addressAlias, updateAlias] = useAlias(address);
+  const alias = useApprovalAlias();
+  const addressAlias = alias.accountMap[address]?.alias;
   const [visible, setVisible] = useState(false);
   const [inputText, setInputText] = useState(addressAlias || '');
   const [errorMessage, setErrorMessage] = useState('');
@@ -55,7 +56,7 @@ const AddressMemo = ({
     if (!inputText) {
       setErrorMessage('Please input address note');
     }
-    updateAlias(inputText);
+    alias.update(address, inputText);
     setVisible(false);
   };
 
@@ -67,6 +68,10 @@ const AddressMemo = ({
     setInputText(text);
   };
 
+  useEffect(() => {
+    alias.add(address);
+  }, [address, alias]);
+
   useEffect(() => {
     setInputText(addressAlias || '');
   }, [addressAlias]);
@@ -101,7 +106,7 @@ const AddressMemo = ({
         ref={modalRef}
         onDismiss={() => setVisible(false)}
         keyboardBlurBehavior="restore"
-        enableDynamicSizing>
+        snapPoints={[300]}>
         <BottomSheetView style={styles.mainView}>
           <AppBottomSheetModalTitle
             title={t('component.Contact.EditModal.title')}
@@ -110,7 +115,7 @@ const AddressMemo = ({
             <BottomSheetInput
               onChangeText={handleTextChange}
               maxLength={50}
-              autoFocus
+              // autoFocus
               value={inputText}
               placeholder="Please input address note"
             />

diff --git a/apps/mobile/src/components/Approval/components/Actions/components/DescItem.tsx b/apps/mobile/src/components/Approval/components/Actions/components/DescItem.tsx
@@ -6,23 +6,21 @@ import { AppColorsVariants } from '@/constant/theme';
 const getStyle = (colors: AppColorsVariants) =>
   StyleSheet.create({
     descItem: {
-      position: 'relative',
       paddingRight: 0,
       paddingLeft: 10,
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
       marginTop: 4,
+      justifyContent: 'flex-end',
     },
     ball: {
-      position: 'absolute',
-      left: 3,
       width: 3,
       height: 3,
       backgroundColor: colors['neutral-body'],
       borderRadius: 3,
-      top: '50%',
-      marginTop: -1.5,
+      marginRight: 6,
+      marginTop: 1.5,
     },
   });