Merge branch 'feat-home-pin' into tmp/20241216

RabbyHub · Dec 16, 2024 · ecbaca6 · ecbaca6
2 parents ac435dc + 85fbaf8
commit ecbaca6
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 29 deletions.
diff --git a/apps/mobile/src/assets2024/icons/home/IconSend.svg b/apps/mobile/src/assets2024/icons/home/IconSend.svg
diff --git a/apps/mobile/src/components/AccountSelector/AccountsPanel.tsx b/apps/mobile/src/components/AccountSelector/AccountsPanel.tsx
@@ -229,14 +229,17 @@ const getAddressItemInPanelStyle = createGetStyles2024(ctx => {
 
     pinnedWrapper: {
       flexShrink: 0,
-      paddingHorizontal: 6,
-      paddingVertical: 4,
+      // paddingHorizontal: 6,
+      // paddingVertical: 4,
+      width: 33,
+      height: 20,
       marginLeft: 4,
-      borderRadius: 8,
+      borderRadius: 6,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: ctx.colors2024['brand-light-1'],
+      flexWrap: 'nowrap',
     },
     pinText: {
       color: ctx.colors2024['brand-default'],

diff --git a/apps/mobile/src/components/AccountSwitcher/AddressItemInPanel.tsx b/apps/mobile/src/components/AccountSwitcher/AddressItemInPanel.tsx
@@ -160,10 +160,11 @@ const getAddressItemInPanelStyle = createGetStyles2024(ctx => {
 
     pinnedWrapper: {
       flexShrink: 0,
-      paddingHorizontal: 6,
-      paddingVertical: 4,
       marginLeft: 4,
-      borderRadius: 8,
+      borderRadius: 6,
+      width: 33,
+      height: 20,
+      flexWrap: 'nowrap',
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',

diff --git a/apps/mobile/src/constant/layout.ts b/apps/mobile/src/constant/layout.ts
@@ -203,6 +203,12 @@ function makeScreenSpecConfig() {
       androidStatusBarBg: colors2024['neutral-bg-1'],
     };
 
+    const transparentDefault2024Conf = <ScreenStatusBarConf>{
+      barStyle: adaptiveStatusBarStyle,
+      iosStatusBarStyle: adaptiveIosStatusBarStyle,
+      androidStatusBarBg: 'transparent',
+    };
+
     const bg2DefaultConf = <ScreenStatusBarConf>{
       barStyle: adaptiveStatusBarStyle,
       iosStatusBarStyle: adaptiveIosStatusBarStyle,
@@ -228,7 +234,7 @@ function makeScreenSpecConfig() {
     };
 
     const themeSpecs = <ThemeType>{
-      '@default': !isDarkTheme ? card2DefaultConf : bg1DefaultConf,
+      '@default': bg1Default2024Conf,
       '@bg1default': { ...bg1DefaultConf },
       '@openeddapp': {
         barStyle: adaptiveStatusBarStyle,
@@ -239,8 +245,8 @@ function makeScreenSpecConfig() {
       GetStartedScreen2024: bg1DefaultConf,
       NewUserGetStarted2024: bg1DefaultConf,
 
-      Home: bg1DefaultConf,
-      MultiAddressHome: bg1Default2024Conf,
+      Home: transparentDefault2024Conf,
+      // MultiAddressHome: bg1Default2024Conf,
       Unlock: bg1DefaultConf,
       MultiAddressHistory: bg1Default2024Conf,
 
@@ -255,16 +261,25 @@ function makeScreenSpecConfig() {
       ImportSafeAddress: blueLightConf,
       ImportSuccess: blueLightConf,
       // ImportSuccess2024: blueLightConf,
-
+      Settings: !isDarkTheme ? card2DefaultConf : bg1DefaultConf,
+      SingleAddressHome: !isDarkTheme ? card2DefaultConf : bg1DefaultConf,
+      Receive: !isDarkTheme ? card2DefaultConf : bg1DefaultConf,
+      GasAccount: !isDarkTheme ? card2DefaultConf : bg1DefaultConf,
       Send: bg1Default2024Conf,
       MultiSend: bg1Default2024Conf,
       Swap: bg1Default2024Conf,
       MultiSwap: bg1Default2024Conf,
+      Bridge: bg1Default2024Conf,
+      MultiBridge: bg1Default2024Conf,
       // Receive: blueLightConf,
+      AddressList: bg1Default2024Conf,
+      SafeAddressList: bg1Default2024Conf,
+      WatchAddressList: bg1Default2024Conf,
+      ApprovalAddressList: bg1Default2024Conf,
 
       GnosisTransactionQueue: card2DefaultConf,
 
-      Approvals: bg2DefaultConf,
+      Approvals: bg1Default2024Conf,
 
       SetPassword: blueLightConf,
       SetPassword2024: bg1Default2024Conf,

diff --git a/apps/mobile/src/screens/Address/components/AddressItem.tsx b/apps/mobile/src/screens/Address/components/AddressItem.tsx
@@ -98,7 +98,7 @@ export const AddressItemEntry = (props: AddressItemProps) => {
         },
       },
       {
-        title: 'Edit Name',
+        title: 'Edit',
         icon: isDarkTheme
           ? require('@/assets/icons/ios_ic_rabby_icons/ic_rabby_menu_edit_dark.png')
           : require('@/assets/icons/ios_ic_rabby_icons/ic_rabby_menu_edit.png'),
@@ -109,7 +109,7 @@ export const AddressItemEntry = (props: AddressItemProps) => {
         },
       },
       {
-        title: 'Address Details',
+        title: 'Details',
         icon: isDarkTheme
           ? require('@/assets/icons/ios_ic_rabby_icons/ic_rabby_menu_more_dark.png')
           : require('@/assets/icons/ios_ic_rabby_icons/ic_rabby_menu_more.png'),

diff --git a/apps/mobile/src/screens/Address/components/PinBadge.tsx b/apps/mobile/src/screens/Address/components/PinBadge.tsx
@@ -5,13 +5,17 @@ import { Text, View } from 'react-native';
 
 const getStyle = createGetStyles2024(({ colors2024 }) => ({
   root: {
-    paddingHorizontal: 6,
-    paddingVertical: 4,
-    gap: 4,
-    borderRadius: 8,
+    // paddingHorizontal: 6,
+    // paddingVertical: 4,
+    // gap: 4,
+    borderRadius: 6,
     backgroundColor: colors2024['brand-light-1'],
     flexDirection: 'row',
-    // width: 33,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 33,
+    height: 20,
+    flexWrap: 'nowrap',
   },
   text: {
     fontSize: 14,
@@ -28,7 +32,9 @@ export const PinBadge = () => {
   return (
     <View style={styles.root}>
       {/* <PinSVG width={15} height={15} color={colors2024['brand-default']} /> */}
-      <Text style={styles.text}>Pin</Text>
+      <Text style={styles.text} numberOfLines={1}>
+        Pin
+      </Text>
     </View>
   );
 };
diff --git a/apps/mobile/src/screens/Home/MultiAddressHome.tsx b/apps/mobile/src/screens/Home/MultiAddressHome.tsx
@@ -132,14 +132,7 @@ function MultiAddressHome(): JSX.Element {
   const { styles, colors2024, isLight } = useTheme2024({ getStyle });
   const [pendingTxCount, setPendingTxCount] = useState(0);
   const timeRef = useRef<null | NodeJS.Timer>(null);
-
-  const { pinAddresses } = usePinAddresses({
-    disableAutoFetch: true,
-  });
   const { switchAccount } = useCurrentAccount();
-  const { accounts, fetchAccounts } = useAccounts({
-    disableAutoFetch: true,
-  });
 
   const { width } = Dimensions.get('window');
   const itemWidth =
@@ -508,7 +501,7 @@ function MultiAddressHome(): JSX.Element {
                         height={18}
                         borderRadius={5}
                       />
-                      <Text style={styles.gridText}>
+                      <Text style={styles.pinGridText}>
                         {calcPinPercent(item.balance || 0)}
                       </Text>
                     </TouchableOpacity>
@@ -685,6 +678,14 @@ const getStyle = createGetStyles2024(({ colors2024, isLight }) => ({
   pinHeader: {
     marginTop: -8,
   },
+  pinGridText: {
+    color: colors2024['neutral-body'],
+    fontWeight: '500',
+    fontSize: 16,
+    lineHeight: 20,
+    textAlign: 'left',
+    fontFamily: 'SF Pro Rounded',
+  },
   gridText: {
     color: colors2024['neutral-body'],
     fontWeight: '700',