feat: add copy functionality for account address in gator permission item

Author: mj-kiwi

ui/components/multichain/pages/gator-permissions/components/review-gator-permission-item.test.tsx

@@ -15,10 +15,33 @@ import configureStore from '../../../../../store/store';
 import mockState from '../../../../../../test/data/mock-state.json';
 import { ReviewGatorPermissionItem } from './review-gator-permission-item';
 
+const mockAccountAddress = '0x4f71DA06987BfeDE90aF0b33E1e3e4ffDCEE7a63';
+const mockAccountName = 'Test Gator Account';
+
 const store = configureStore({
   ...mockState,
   metamask: {
     ...mockState.metamask,
+    internalAccounts: {
+      ...mockState.metamask.internalAccounts,
+      accounts: {
+        ...mockState.metamask.internalAccounts.accounts,
+        'test-account-id': {
+          address: mockAccountAddress,
+          id: 'test-account-id',
+          metadata: {
+            name: mockAccountName,
+            importTime: 0,
+            keyring: {
+              type: 'HD Key Tree',
+            },
+          },
+          options: {},
+          methods: [],
+          type: 'eip155:eoa',
+        },
+      },
+    },
   },
 });
 
@@ -43,8 +66,6 @@ describe('Permission List Item', () => {
   describe('render', () => {
     const mockOnClick = jest.fn();
     const mockNetworkName = 'Ethereum';
-    const mockSelectedAccountAddress =
-      '0x4f71DA06987BfeDE90aF0b33E1e3e4ffDCEE7a63';
     const mockStartTime = 1736271776; // January 7, 2025;
 
     describe('NATIVE token permissions', () => {
@@ -54,7 +75,7 @@ describe('Permission List Item', () => {
       > = {
         permissionResponse: {
           chainId: '0x1',
-          address: mockSelectedAccountAddress,
+          address: mockAccountAddress,
           permission: {
             type: 'native-token-stream',
             isAdjustmentAllowed: false,
@@ -81,7 +102,7 @@ describe('Permission List Item', () => {
       > = {
         permissionResponse: {
           chainId: '0x1',
-          address: mockSelectedAccountAddress,
+          address: mockAccountAddress,
           permission: {
             type: 'native-token-periodic',
             isAdjustmentAllowed: false,
@@ -173,6 +194,32 @@ describe('Permission List Item', () => {
         );
       });
 
+      it('renders account name and copy button with visual feedback', () => {
+        const { getByTestId } = renderWithProvider(
+          <ReviewGatorPermissionItem
+            networkName={mockNetworkName}
+            gatorPermission={mockNativeTokenStreamPermission}
+            onRevokeClick={() => mockOnClick()}
+          />,
+          store,
+        );
+
+        // Verify account name is displayed initially
+        const accountText = getByTestId('review-gator-permission-account-name');
+        expect(accountText).toBeInTheDocument();
+        expect(accountText).toHaveTextContent(mockAccountName);
+
+        // Verify copy button is present
+        const copyButton = getByTestId('review-gator-permission-copy-address');
+        expect(copyButton).toBeInTheDocument();
+
+        // Click copy button to test functionality
+        fireEvent.click(copyButton);
+
+        // After clicking, the text should change to "Address copied!"
+        expect(accountText).toHaveTextContent('Address copied!');
+      });
+
       it('renders native token periodic permission correctly', () => {
         const { container, getByTestId } = renderWithProvider(
           <ReviewGatorPermissionItem
@@ -243,7 +290,7 @@ describe('Permission List Item', () => {
       > = {
         permissionResponse: {
           chainId: '0x5',
-          address: mockSelectedAccountAddress,
+          address: mockAccountAddress,
           permission: {
             type: 'erc20-token-periodic',
             isAdjustmentAllowed: false,
@@ -270,7 +317,7 @@ describe('Permission List Item', () => {
       > = {
         permissionResponse: {
           chainId: '0x5',
-          address: mockSelectedAccountAddress,
+          address: mockAccountAddress,
           permission: {
             type: 'erc20-token-stream',
             isAdjustmentAllowed: false,
@@ -408,7 +455,7 @@ describe('Permission List Item', () => {
         > = {
           permissionResponse: {
             chainId: '0x5',
-            address: mockSelectedAccountAddress,
+            address: mockAccountAddress,
             permission: {
               type: 'erc20-token-stream',
               isAdjustmentAllowed: false,

ui/components/multichain/pages/gator-permissions/components/review-gator-permission-item.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useSelector } from 'react-redux';
 import { Hex } from '@metamask/utils';
 import {
@@ -32,6 +38,12 @@ import { getImageForChainId } from '../../../../../selectors/multichain';
 import { getURLHost, shortenAddress } from '../../../../../helpers/utils/util';
 import Card from '../../../../ui/card';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import { useCopyToClipboard } from '../../../../../hooks/useCopyToClipboard';
+import {
+  getInternalAccountByAddress,
+  getNativeTokenInfo,
+  selectERC20TokensByChain,
+} from '../../../../../selectors/selectors';
 import {
   convertTimestampToReadableDate,
   getPeriodFrequencyValueTranslationKey,
@@ -42,10 +54,6 @@ import {
 } from '../../../../../../shared/lib/gator-permissions';
 import { PreferredAvatar } from '../../../../app/preferred-avatar';
 import { BackgroundColor } from '../../../../../helpers/constants/design-system';
-import {
-  getNativeTokenInfo,
-  selectERC20TokensByChain,
-} from '../../../../../selectors/selectors';
 import { getTokenMetadata } from '../../../../../helpers/utils/token-util';
 import { getPendingRevocations } from '../../../../../selectors/gator-permissions/gator-permissions';
 
@@ -122,6 +130,62 @@ export const ReviewGatorPermissionItem = ({
     getNativeTokenInfo(state, chainId),
   ) as TokenMetadata;
   const pendingRevocations = useSelector(getPendingRevocations);
+  const internalAccount = useSelector((state) =>
+    getInternalAccountByAddress(state, permissionAccount),
+  );
+
+  // Copy functionality with visual feedback
+  const [accountText, setAccountText] = useState(
+    shortenAddress(permissionAccount),
+  );
+  const [addressCopied, setAddressCopied] = useState(false);
+  const [copyIcon, setCopyIcon] = useState(IconName.Copy);
+  const [copyMessage, setCopyMessage] = useState(accountText);
+
+  const timeoutRef = useRef<number | null>(null);
+  const [, handleCopy] = useCopyToClipboard();
+
+  // Cleanup timeout when component unmounts
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (internalAccount?.metadata?.name) {
+      setAccountText(internalAccount?.metadata?.name);
+    }
+  }, [internalAccount]);
+
+  // Update copy message when account changes
+  useEffect(() => {
+    setCopyMessage(accountText);
+  }, [accountText]);
+
+  // Handle copy button click
+  const handleCopyClick = useCallback(() => {
+    // Clear existing timeout if clicking multiple times
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    setAddressCopied(true);
+    handleCopy(permissionAccount);
+    setCopyMessage(t('addressCopied'));
+    setCopyIcon(IconName.CopySuccess);
+
+    // Reset state after 1 second
+    timeoutRef.current = window.setTimeout(() => {
+      setCopyMessage(accountText);
+      setCopyIcon(IconName.Copy);
+      setAddressCopied(false);
+      timeoutRef.current = null;
+    }, 1000);
+  }, [permissionAccount, accountText, handleCopy, t]);
 
   const tokenMetadata: TokenMetadata = useMemo(() => {
     if (tokenAddress) {
@@ -483,10 +547,27 @@ export const ReviewGatorPermissionItem = ({
             <PreferredAvatar address={permissionAccount} />
             <Text
               variant={TextVariant.BodyMd}
-              color={TextColor.TextAlternative}
+              color={
+                addressCopied
+                  ? TextColor.SuccessDefault
+                  : TextColor.TextAlternative
+              }
+              data-testid="review-gator-permission-account-name"
             >
-              {shortenAddress(permissionAccount)}
+              {copyMessage}
             </Text>
+            <ButtonIcon
+              iconName={copyIcon}
+              color={
+                addressCopied ? IconColor.SuccessDefault : IconColor.IconMuted
+              }
+              size={ButtonIconSize.Sm}
+              onClick={handleCopyClick}
+              ariaLabel={
+                addressCopied ? t('copiedExclamation') : t('copyToClipboard')
+              }
+              data-testid="review-gator-permission-copy-address"
+            />
           </Box>
         </Box>
       </Box>