Merge branch 'main' into acc_network_info

MetaMask · Oct 9, 2024 · 97bb4ad · 97bb4ad
2 parents 84a3928 + 9e3d268
commit 97bb4ad
Show file tree

Hide file tree

Showing 77 changed files with 19,475 additions and 26,990 deletions.
diff --git a/app/components/Base/Title/Title.tsx b/app/components/Base/Title/Title.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import Text from '../Text/Text';
 import { useTheme } from '../../../util/theme';
 import styles from './Title.styles';
-
+import Text from '../../../component-library/components/Texts/Text';
 interface TitleProps extends React.ComponentPropsWithoutRef<typeof Text> {
   centered?: boolean;
   hero?: boolean;

diff --git a/app/components/UI/AssetElement/index.test.tsx b/app/components/UI/AssetElement/index.test.tsx
@@ -17,7 +17,7 @@ describe('AssetElement', () => {
     balanceFiat: ' $1',
     logo: '',
     isETH: undefined,
-    balanceError: null,
+    hasBalanceError: false,
     decimals: 0,
     image: '',
   };

diff --git a/app/components/UI/AssetElement/index.tsx b/app/components/UI/AssetElement/index.tsx
@@ -88,7 +88,7 @@ const AssetElement: React.FC<AssetElementProps> = ({
         {balance && (
           <Text
             variant={
-              asset?.balanceError || asset.balanceFiat === TOKEN_RATE_UNDEFINED
+              asset?.hasBalanceError || asset.balanceFiat === TOKEN_RATE_UNDEFINED
                 ? TextVariant.BodySM
                 : TextVariant.BodyLGMedium
             }

diff --git a/app/components/UI/AssetOverview/AssetOverview.test.tsx b/app/components/UI/AssetOverview/AssetOverview.test.tsx
@@ -78,7 +78,7 @@ const asset = {
   symbol: 'ETH',
   name: 'Ethereum',
   isETH: undefined,
-  balanceError: null,
+  hasBalanceError: false,
   decimals: 18,
   address: '0x123',
   aggregators: [],

diff --git a/app/components/UI/AssetOverview/AssetOverview.tsx b/app/components/UI/AssetOverview/AssetOverview.tsx
@@ -263,7 +263,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
       style={styles.wrapper}
       {...generateTestId(Platform, TOKEN_ASSET_OVERVIEW)}
     >
-      {asset.balanceError ? (
+      {asset.hasBalanceError ? (
         renderWarning()
       ) : (
         <View>

diff --git a/app/components/UI/AssetOverview/AssetOverview.types.ts b/app/components/UI/AssetOverview/AssetOverview.types.ts
@@ -3,6 +3,6 @@ export interface Asset {
   decimals: number;
   name: string;
   symbol: string;
-  balanceError: boolean | undefined;
+  hasBalanceError: boolean;
   address: string;
 }
diff --git a/app/components/UI/AssetOverview/Balance/index.test.tsx b/app/components/UI/AssetOverview/Balance/index.test.tsx
@@ -25,7 +25,7 @@ jest.mock('@react-navigation/native', () => ({
 const mockDAI = {
   address: '0x6b175474e89094c44da98b954eedeac495271d0f',
   aggregators: ['Metamask', 'Coinmarketcap'],
-  balanceError: null,
+  hasBalanceError: false,
   balance: '6.49757',
   balanceFiat: '$6.49',
   decimals: 18,

diff --git a/app/components/UI/AssetOverview/TokenDetails/TokenDetails.test.tsx b/app/components/UI/AssetOverview/TokenDetails/TokenDetails.test.tsx
@@ -47,7 +47,7 @@ const mockDAI = {
   name: 'Dai Stablecoin',
   symbol: 'DAI',
   isETH: false,
-  balanceError: null,
+  hasBalanceError: false,
 };
 const mockAssets = {
   '0x6b175474e89094c44da98b954eedeac495271d0f': mockDAI,

diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js
@@ -1024,7 +1024,6 @@ export function getWalletNavbarOptions(
     ),
     headerRight: () => (
       <View style={styles.leftButtonContainer}>
-
         <View style={styles.notificationsWrapper}>
           {isNotificationsFeatureEnabled() && (
             <ButtonIcon
@@ -1046,10 +1045,10 @@ export function getWalletNavbarOptions(
                     : themeColors.background.transparent,
                 },
               ]}
-            />)}
+            />
+          )}
         </View>
 
-
         <ButtonIcon
           iconColor={IconColor.Primary}
           onPress={openQRScanner}
@@ -1129,12 +1128,12 @@ export function getImportTokenNavbarOptions(
             onClose
               ? () => onClose()
               : () =>
-                navigation.navigate(Routes.WALLET.HOME, {
-                  screen: Routes.WALLET.TAB_STACK_FLOW,
-                  params: {
-                    screen: Routes.WALLET_VIEW,
-                  },
-                })
+                  navigation.navigate(Routes.WALLET.HOME, {
+                    screen: Routes.WALLET.TAB_STACK_FLOW,
+                    params: {
+                      screen: Routes.WALLET_VIEW,
+                    },
+                  })
           }
         />
       </TouchableOpacity>
@@ -1189,14 +1188,14 @@ export function getNftDetailsNavbarOptions(
     ),
     headerRight: onRightPress
       ? () => (
-        <TouchableOpacity style={styles.backButton} onPress={onRightPress}>
-          <Icon
-            name={IconName.MoreVertical}
-            size={IconSize.Lg}
-            style={innerStyles.headerBackIcon}
-          />
-        </TouchableOpacity>
-      )
+          <TouchableOpacity style={styles.backButton} onPress={onRightPress}>
+            <Icon
+              name={IconName.MoreVertical}
+              size={IconSize.Lg}
+              style={innerStyles.headerBackIcon}
+            />
+          </TouchableOpacity>
+        )
       : () => <View />,
     headerStyle: [
       innerStyles.headerStyle,
@@ -1312,15 +1311,15 @@ export function getNetworkNavbarOptions(
     ),
     headerRight: onRightPress
       ? () => (
-        <TouchableOpacity style={styles.backButton} onPress={onRightPress}>
-          <MaterialCommunityIcon
-            name={'dots-horizontal'}
-            size={28}
-            style={innerStyles.headerIcon}
-          />
-        </TouchableOpacity>
-        // eslint-disable-next-line no-mixed-spaces-and-tabs
-      )
+          <TouchableOpacity style={styles.backButton} onPress={onRightPress}>
+            <MaterialCommunityIcon
+              name={'dots-horizontal'}
+              size={28}
+              style={innerStyles.headerIcon}
+            />
+          </TouchableOpacity>
+          // eslint-disable-next-line no-mixed-spaces-and-tabs
+        )
       : () => <View />,
     headerStyle: [
       innerStyles.headerStyle,
@@ -1825,7 +1824,7 @@ export const getSettingsNavigationOptions = (title, themeColors) => {
   };
 };
 
-export function getStakeInputNavbar(navigation, themeColors) {
+export function getStakingNavbar(title, navigation, themeColors) {
   const innerStyles = StyleSheet.create({
     headerButtonText: {
       color: themeColors.primary.default,
@@ -1838,7 +1837,6 @@ export function getStakeInputNavbar(navigation, themeColors) {
       elevation: 0,
     },
   });
-  const title = strings('stake.stake_eth');
   return {
     headerTitle: () => (
       <NavbarTitle title={title} disableNetwork translate={false} />

diff --git a/app/components/UI/Ramp/Views/BuildQuote/BuildQuote.tsx b/app/components/UI/Ramp/Views/BuildQuote/BuildQuote.tsx
@@ -27,8 +27,6 @@ import useAddressBalance from '../../../../hooks/useAddressBalance/useAddressBal
 import { Asset } from '../../../../hooks/useAddressBalance/useAddressBalance.types';
 import useModalHandler from '../../../../Base/hooks/useModalHandler';
 
-import Text from '../../../../Base/Text';
-import BaseListItem from '../../../../Base/ListItem';
 import BaseSelectorButton from '../../../../Base/SelectorButton';
 import StyledButton from '../../../StyledButton';
 
@@ -73,10 +71,16 @@ import {
 import useGasPriceEstimation from '../../hooks/useGasPriceEstimation';
 import useIntentAmount from '../../hooks/useIntentAmount';
 
-// TODO: Convert into typescript and correctly type
-// TODO: Replace "any" with type
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ListItem = BaseListItem as any;
+import ListItem from '../../../../../component-library/components/List/ListItem';
+import ListItemColumn, {
+  WidthType,
+} from '../../../../../component-library/components/List/ListItemColumn';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../../../component-library/components/Texts/Text';
+import ListItemColumnEnd from '../../components/ListItemColumnEnd';
+
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const SelectorButton = BaseSelectorButton as any;
@@ -604,25 +608,29 @@ const BuildQuote = () => {
               <SkeletonText thick smaller spacingHorizontal />
             </View>
             <SkeletonText thin small spacingTop spacingVertical />
-            <Box>
-              <ListItem.Content>
-                <ListItem.Body>
-                  <ListItem.Icon>
-                    <SkeletonText />
-                  </ListItem.Icon>
-                </ListItem.Body>
-                <SkeletonText smaller thin />
-              </ListItem.Content>
+            <Box compact>
+              <ListItem>
+                <ListItemColumn>
+                  <SkeletonText />
+                </ListItemColumn>
+                <ListItemColumnEnd widthType={WidthType.Fill}>
+                  <SkeletonText thin smaller />
+                </ListItemColumnEnd>
+              </ListItem>
             </Box>
             <SkeletonText spacingTopSmall spacingVertical thin medium />
             <SkeletonText thin smaller spacingVertical />
-            <Box>
-              <ListItem.Content>
-                <ListItem.Body>
-                  <SkeletonText small />
-                </ListItem.Body>
-                <SkeletonText smaller thin />
-              </ListItem.Content>
+            <Box compact>
+              <ListItem>
+                <ListItemColumn>
+                  <View style={styles.flexRow}>
+                    <SkeletonText medium />
+                  </View>
+                </ListItemColumn>
+                <ListItemColumnEnd widthType={WidthType.Fill}>
+                  <SkeletonText thin small />
+                </ListItemColumnEnd>
+              </ListItem>
             </Box>
             <SkeletonText spacingTopSmall spacingVertical thin medium />
           </ScreenLayout.Content>
@@ -720,9 +728,7 @@ const BuildQuote = () => {
                 accessible
                 onPress={handleChangeRegion}
               >
-                <Text reset style={styles.flagText}>
-                  {selectedRegion?.emoji}
-                </Text>
+                <Text style={styles.flagText}>{selectedRegion?.emoji}</Text>
               </SelectorButton>
               {isSell ? (
                 <>
@@ -732,7 +738,7 @@ const BuildQuote = () => {
                     accessible
                     onPress={handleFiatSelectorPress}
                   >
-                    <Text primary centered>
+                    <Text variant={TextVariant.BodyLGMedium}>
                       {currentFiatCurrency?.symbol}
                     </Text>
                   </SelectorButton>
@@ -758,7 +764,10 @@ const BuildQuote = () => {
             />
             {addressBalance ? (
               <Row>
-                <Text small grey>
+                <Text
+                  variant={TextVariant.BodySM}
+                  color={TextColor.Alternative}
+                >
                   {strings('fiat_on_ramp_aggregator.current_balance')}:{' '}
                   {addressBalance}
                   {balanceFiat ? ` ≈ ${balanceFiat}` : null}
@@ -785,21 +794,21 @@ const BuildQuote = () => {
               !hasInsufficientBalance &&
               amountIsOverGas && (
                 <Row>
-                  <Text red small>
+                  <Text variant={TextVariant.BodySM} color={TextColor.Error}>
                     {strings('fiat_on_ramp_aggregator.enter_lower_gas_fees')}
                   </Text>
                 </Row>
               )}
             {hasInsufficientBalance && (
               <Row>
-                <Text red small>
+                <Text variant={TextVariant.BodySM} color={TextColor.Error}>
                   {strings('fiat_on_ramp_aggregator.insufficient_balance')}
                 </Text>
               </Row>
             )}
             {!hasInsufficientBalance && amountIsBelowMinimum && limits && (
               <Row>
-                <Text red small>
+                <Text variant={TextVariant.BodySM} color={TextColor.Error}>
                   {isBuy ? (
                     <>
                       {strings('fiat_on_ramp_aggregator.minimum')}{' '}
@@ -814,7 +823,7 @@ const BuildQuote = () => {
             )}
             {!hasInsufficientBalance && amountIsAboveMaximum && limits && (
               <Row>
-                <Text red small>
+                <Text variant={TextVariant.BodySM} color={TextColor.Error}>
                   {isBuy ? (
                     <>
                       {strings('fiat_on_ramp_aggregator.maximum')}{' '}