update: address copy component has been simplified and temporarily re…

…moved wallt action component (may even remove in the future)
MetaMask · Oct 11, 2024 · 80ede6d · 80ede6d
1 parent 43505e9
commit 80ede6d
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 454 deletions.
diff --git a/app/components/UI/AddressCopy/AddressCopy.styles.ts b/app/components/UI/AddressCopy/AddressCopy.styles.ts
@@ -1,26 +1,14 @@
 import { StyleSheet } from 'react-native';
-// External dependencies.
-import { Theme } from '../../../util/theme/models';
 
-const styleSheet = (params: { theme: Theme }) => {
-  const { theme } = params;
-  const { colors } = theme;
-
-  return StyleSheet.create({
+const styleSheet = () =>
+  StyleSheet.create({
     address: {
       flexDirection: 'row',
       alignItems: 'center',
     },
     copyButton: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      backgroundColor: colors.primary.muted,
-      borderRadius: 20,
-      paddingHorizontal: 12,
       padding: 4,
-      marginLeft: 12,
     },
-    icon: { marginLeft: 4 },
   });
-};
+
 export default styleSheet;
diff --git a/app/components/UI/AddressCopy/AddressCopy.tsx b/app/components/UI/AddressCopy/AddressCopy.tsx
@@ -3,12 +3,7 @@ import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 // External dependencies
-import Text, {
-  TextColor,
-  TextVariant,
-} from '../../../component-library/components/Texts/Text';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { formatAddress } from '../../../util/address';
 import Icon, {
   IconColor,
   IconName,
@@ -25,12 +20,11 @@ import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletV
 
 // Internal dependencies
 import styleSheet from './AddressCopy.styles';
-import { AddressCopyProps } from './AddressCopy.types';
 import { selectSelectedInternalAccount } from '../../../selectors/accountsController';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { toChecksumHexAddress } from '@metamask/controller-utils';
 
-const AddressCopy = ({ formatAddressType = 'full' }: AddressCopyProps) => {
+const AddressCopy = () => {
   const { styles } = useStyles(styleSheet, {});
 
   const dispatch = useDispatch();
@@ -69,28 +63,15 @@ const AddressCopy = ({ formatAddressType = 'full' }: AddressCopyProps) => {
   };
   return (
     <View style={styles.address}>
-      <Text variant={TextVariant.BodySMBold}>
-        {strings('asset_overview.address')}:
-      </Text>
       <TouchableOpacity
         style={styles.copyButton}
         onPress={copyAccountToClipboard}
         testID={WalletViewSelectorsIDs.ACCOUNT_COPY_BUTTON}
       >
-        <Text
-          color={TextColor.Primary}
-          variant={TextVariant.BodySMMedium}
-          testID={WalletViewSelectorsIDs.ACCOUNT_ADDRESS}
-        >
-          {selectedInternalAccount
-            ? formatAddress(selectedInternalAccount.address, formatAddressType)
-            : null}
-        </Text>
         <Icon
           name={IconName.Copy}
-          size={IconSize.Sm}
-          color={IconColor.Primary}
-          style={styles.icon}
+          size={IconSize.Lg}
+          color={IconColor.Default}
         />
       </TouchableOpacity>
     </View>

diff --git a/app/components/UI/AddressCopy/AddressCopy.types.ts b/app/components/UI/AddressCopy/AddressCopy.types.ts
diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js
@@ -53,6 +53,7 @@ import Icon, {
 } from '../../../component-library/components/Icons/Icon';
 import { AddContactViewSelectorsIDs } from '../../../../e2e/selectors/Settings/Contacts/AddContactView.selectors';
 import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/wallet/ImportTokenView.selectors';
+import AddressCopy from '../AddressCopy';
 
 const trackEvent = (event, params = {}) => {
   MetaMetrics.getInstance().trackEvent(event, params);
@@ -129,11 +130,13 @@ const styles = StyleSheet.create({
     width: 8,
     height: 8,
     borderRadius: 4,
-
     position: 'absolute',
     top: 2,
     right: 10,
   },
+  addressCopyWrapper: {
+    marginHorizontal: 4,
+  },
 });
 
 const metamask_name = require('../../../images/metamask-name.png'); // eslint-disable-line
@@ -1024,6 +1027,9 @@ export function getWalletNavbarOptions(
     ),
     headerRight: () => (
       <View style={styles.leftButtonContainer}>
+        <View style={styles.addressCopyWrapper}>
+          <AddressCopy />
+        </View>
         <View style={styles.notificationsWrapper}>
           {isNotificationsFeatureEnabled() && (
             <ButtonIcon
@@ -1050,7 +1056,7 @@ export function getWalletNavbarOptions(
         </View>
 
         <ButtonIcon
-          iconColor={IconColor.Primary}
+          iconColor={IconColor.Default}
           onPress={openQRScanner}
           iconName={IconName.Scan}
           size={IconSize.Xl}

diff --git a/app/components/UI/WalletAccount/WalletAccount.test.tsx b/app/components/UI/WalletAccount/WalletAccount.test.tsx
@@ -103,13 +103,6 @@ describe('WalletAccount', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('shows the account address', () => {
-    const { getByTestId } = renderWithProvider(<WalletAccount />, {
-      state: mockInitialState,
-    });
-    expect(getByTestId(WalletViewSelectorsIDs.ACCOUNT_ADDRESS)).toBeDefined();
-  });
-
   it('copies the account address to the clipboard when the copy button is pressed', async () => {
     const { getByTestId } = renderWithProvider(<WalletAccount />, {
       state: mockInitialState,

diff --git a/app/components/UI/WalletAccount/__snapshots__/WalletAccount.test.tsx.snap b/app/components/UI/WalletAccount/__snapshots__/WalletAccount.test.tsx.snap
@@ -248,22 +248,6 @@ exports[`WalletAccount renders correctly 1`] = `
         }
       }
     >
-      <Text
-        accessibilityRole="text"
-        style={
-          {
-            "color": "#141618",
-            "fontFamily": "EuclidCircularB-Bold",
-            "fontSize": 12,
-            "fontWeight": "700",
-            "letterSpacing": 0,
-            "lineHeight": 20,
-          }
-        }
-      >
-        Address
-        :
-      </Text>
       <RNGestureHandlerButton
         collapsable={false}
         onGestureEvent={[Function]}
@@ -278,45 +262,22 @@ exports[`WalletAccount renders correctly 1`] = `
           collapsable={false}
           style={
             {
-              "alignItems": "center",
-              "backgroundColor": "#0376c91a",
-              "borderRadius": 20,
-              "flexDirection": "row",
-              "marginLeft": 12,
               "opacity": 1,
               "padding": 4,
-              "paddingHorizontal": 12,
             }
           }
         >
-          <Text
-            accessibilityRole="text"
-            style={
-              {
-                "color": "#0376c9",
-                "fontFamily": "EuclidCircularB-Medium",
-                "fontSize": 12,
-                "fontWeight": "500",
-                "letterSpacing": 0,
-                "lineHeight": 20,
-              }
-            }
-            testID="wallet-account-address"
-          >
-            0xC496...a756
-          </Text>
           <SvgMock
-            color="#0376c9"
-            height={16}
+            color="#141618"
+            height={24}
             name="Copy"
             style={
               {
-                "height": 16,
-                "marginLeft": 4,
-                "width": 16,
+                "height": 24,
+                "width": 24,
               }
             }
-            width={16}
+            width={24}
           />
         </View>
       </RNGestureHandlerButton>