Merge branch 'main' into feat/stake-805-integrate-stake-method

MetaMask · Oct 21, 2024 · 58b3aea · 58b3aea
2 parents 78dafc2 + 3cabaab
commit 58b3aea
Show file tree

Hide file tree

Showing 32 changed files with 2,302 additions and 589 deletions.
diff --git a/.js.env.example b/.js.env.example
@@ -90,7 +90,10 @@ export MM_ENABLE_SETTINGS_PAGE_DEV_OPTIONS="true"
 # The endpoint used to submit errors and tracing data to Sentry for dev environment.
 # export MM_SENTRY_DSN_DEV=
 
-# Multichain Feature flag
-export MULTICHAIN_V1=""
+# Per dapp selected network (Amon Hen) feature flag
+export MM_PER_DAPP_SELECTED_NETWORK=""
+
+export MM_CHAIN_PERMISSIONS=""
+
 #Multichain feature flag specific to UI changes
 export MM_MULTICHAIN_V1_ENABLED=""
diff --git a/app/components/UI/AssetOverview/TokenDetails/TokenDetails.tsx b/app/components/UI/AssetOverview/TokenDetails/TokenDetails.tsx
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import i18n from '../../../../../locales/i18n';
 import { useStyles } from '../../../../component-library/hooks';
 import styleSheet from './TokenDetails.styles';
-import { formatAddress, safeToChecksumAddress } from '../../../../util/address';
+import { safeToChecksumAddress } from '../../../../util/address';
 import { selectTokenList } from '../../../../selectors/tokenListController';
 import { selectContractExchangeRates } from '../../../../selectors/tokenRatesController';
 import {
@@ -75,13 +75,12 @@ const TokenDetails: React.FC<TokenDetailsProps> = ({ asset }) => {
 
   const tokenDetails: TokenDetails = asset.isETH
     ? {
-        contractAddress: formatAddress(zeroAddress(), 'short'),
+        contractAddress: zeroAddress(),
         tokenDecimal: 18,
         tokenList: '',
       }
     : {
-        contractAddress:
-          formatAddress(tokenContractAddress as string, 'short') || null,
+        contractAddress: tokenContractAddress || null,
         tokenDecimal: tokenMetadata?.decimals || null,
         tokenList: tokenMetadata?.aggregators.join(', ') || null,
       };

diff --git a/app/components/UI/AssetOverview/TokenDetails/TokenDetailsList/TokenDetailsList.tsx b/app/components/UI/AssetOverview/TokenDetails/TokenDetailsList/TokenDetailsList.tsx
@@ -17,6 +17,7 @@ import Icon, {
 import ClipboardManager from '../../../../../core/ClipboardManager';
 import { TokenDetails } from '../TokenDetails';
 import TokenDetailsListItem from '../TokenDetailsListItem';
+import { formatAddress } from '../../../../../util/address';
 
 interface TokenDetailsListProps {
   tokenDetails: TokenDetails;
@@ -62,7 +63,7 @@ const TokenDetailsList: React.FC<TokenDetailsListProps> = ({
               onPress={copyAccountToClipboard}
             >
               <Text color={TextColor.Primary} variant={TextVariant.BodySM}>
-                {tokenDetails.contractAddress}
+                {formatAddress(tokenDetails.contractAddress, 'short')}
               </Text>
               <Icon
                 name={IconName.Copy}

diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.test.tsx b/app/components/UI/PermissionsSummary/PermissionsSummary.test.tsx
@@ -29,6 +29,24 @@ const mockInitialState = {
 };
 
 describe('PermissionsSummary', () => {
+  it('should render correctly for network switch', () => {
+    const { toJSON } = renderWithProvider(
+      <PermissionsSummary
+        currentPageInformation={{
+          currentEnsName: '',
+          icon: '',
+          url: 'https://app.uniswap.org/',
+        }}
+        customNetworkInformation={{
+          chainName: 'Sepolia',
+          chainId: '0x1',
+        }}
+        isNetworkSwitch
+      />,
+      { state: mockInitialState },
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
   it('should render correctly', () => {
     const { toJSON } = renderWithProvider(
       <PermissionsSummary

diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.tsx b/app/components/UI/PermissionsSummary/PermissionsSummary.tsx
@@ -1,6 +1,11 @@
 import React, { useCallback } from 'react';
 import StyledButton from '../StyledButton';
-import { SafeAreaView, TouchableOpacity, View } from 'react-native';
+import {
+  ImageSourcePropType,
+  SafeAreaView,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { strings } from '../../../../locales/i18n';
 import { useTheme } from '../../../util/theme';
@@ -30,19 +35,21 @@ import useSelectedAccount from '../Tabs/TabThumbnail/useSelectedAccount';
 import styleSheet from './PermissionsSummary.styles';
 import { useStyles } from '../../../component-library/hooks';
 import { PermissionsSummaryProps } from './PermissionsSummary.types';
-import { useSelector } from 'react-redux';
-import { selectNetworkName } from '../../../selectors/networkInfos';
 import { USER_INTENT } from '../../../constants/permissions';
 import Routes from '../../../constants/navigation/Routes';
 import ButtonIcon, {
   ButtonIconSizes,
 } from '../../../component-library/components/Buttons/ButtonIcon';
+import { getNetworkImageSource } from '../../../util/networks';
 
 const PermissionsSummary = ({
   currentPageInformation,
+  customNetworkInformation,
   onEdit,
   onEditNetworks,
   onBack,
+  onCancel,
+  onConfirm,
   onUserAction,
   showActionButtons = true,
   isAlreadyConnected = true,
@@ -54,14 +61,26 @@ const PermissionsSummary = ({
   const { styles } = useStyles(styleSheet, { isRenderedAsBottomSheet });
   const { navigate } = useNavigation();
   const selectedAccount = useSelectedAccount();
-  const networkName = useSelector(selectNetworkName);
+
+  // if network switch, we get the chain name from the customNetworkInformation
+  let chainName = '';
+  let chainImage: ImageSourcePropType;
+  if (isNetworkSwitch && customNetworkInformation?.chainId) {
+    chainName = customNetworkInformation?.chainName;
+    // @ts-expect-error getNetworkImageSource is not implemented in typescript
+    chainImage = getNetworkImageSource({
+      chainId: customNetworkInformation?.chainId,
+    });
+  }
 
   const confirm = () => {
     onUserAction?.(USER_INTENT.Confirm);
+    onConfirm?.();
   };
 
   const cancel = () => {
     onUserAction?.(USER_INTENT.Cancel);
+    onCancel?.();
   };
 
   const handleEditAccountsButtonPress = () => {
@@ -208,21 +227,33 @@ const PermissionsSummary = ({
               {strings('permissions.use_enabled_networks')}
             </TextComponent>
             <View style={styles.permissionRequestNetworkInfo}>
-              <View style={styles.permissionRequestNetworkName}>
-                <TextComponent numberOfLines={1} ellipsizeMode="tail">
-                  <TextComponent variant={TextVariant.BodySM}>
-                    {strings('permissions.requesting_for')}
-                  </TextComponent>
-                  <TextComponent variant={TextVariant.BodySMMedium}>
-                    {networkName}
-                  </TextComponent>
-                </TextComponent>
-              </View>
-              <View style={styles.avatarGroup}>
-                <AvatarGroup
-                  avatarPropsList={SAMPLE_AVATARGROUP_PROPS.avatarPropsList}
-                />
-              </View>
+              {isNetworkSwitch && (
+                <>
+                  <View style={styles.permissionRequestNetworkName}>
+                    <TextComponent numberOfLines={1} ellipsizeMode="tail">
+                      <TextComponent variant={TextVariant.BodySM}>
+                        {strings('permissions.requesting_for')}
+                      </TextComponent>
+                      <TextComponent variant={TextVariant.BodySMMedium}>
+                        {chainName}
+                      </TextComponent>
+                    </TextComponent>
+                  </View>
+                  <Avatar
+                    variant={AvatarVariant.Network}
+                    size={AvatarSize.Xs}
+                    name={chainName}
+                    imageSource={chainImage}
+                  />
+                </>
+              )}
+              {!isNetworkSwitch && (
+                <View style={styles.avatarGroup}>
+                  <AvatarGroup
+                    avatarPropsList={SAMPLE_AVATARGROUP_PROPS.avatarPropsList}
+                  />
+                </View>
+              )}
             </View>
           </View>
           {!isNetworkSwitch && renderEndAccessory()}
@@ -247,6 +278,7 @@ const PermissionsSummary = ({
                   })}
             </TextComponent>
           </View>
+          {/*TODO These should be conditional upon which permissions are being requested*/}
           {!isNetworkSwitch && renderAccountPermissionsRequestInfoCard()}
           {renderNetworkPermissionsRequestInfoCard()}
         </View>

diff --git a/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts b/app/components/UI/PermissionsSummary/PermissionsSummary.types.ts
@@ -9,10 +9,16 @@ export interface PermissionsSummaryProps {
   onEdit?: () => void;
   onEditNetworks?: () => void;
   onBack?: () => void;
+  onCancel?: () => void;
+  onConfirm?: () => void;
   onUserAction?: React.Dispatch<React.SetStateAction<USER_INTENT>>;
   showActionButtons?: boolean;
   isAlreadyConnected?: boolean;
   isRenderedAsBottomSheet?: boolean;
   isDisconnectAllShown?: boolean;
   isNetworkSwitch?: boolean;
+  customNetworkInformation?: {
+    chainName: string;
+    chainId: string;
+  };
 }