From 7a1809c7288ef7d7d2e37a1391ce369a2d62f1ae Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Thu, 22 Jun 2023 14:16:21 +0200
Subject: [PATCH] Button text

---
 .../balances/AssetsTable/index.test.tsx       | 480 ------------------
 src/components/balances/SendButton/index.tsx  |   4 +-
 2 files changed, 3 insertions(+), 481 deletions(-)
 delete mode 100644 src/components/balances/AssetsTable/index.test.tsx

diff --git a/src/components/balances/AssetsTable/index.test.tsx b/src/components/balances/AssetsTable/index.test.tsx
deleted file mode 100644
index 759db503d8..0000000000
--- a/src/components/balances/AssetsTable/index.test.tsx
+++ /dev/null
@@ -1,480 +0,0 @@
-import * as useChainId from '@/hooks/useChainId'
-import useHiddenTokens from '@/hooks/useHiddenTokens'
-import { TOKEN_LISTS } from '@/store/settingsSlice'
-import { act, fireEvent, getByRole, getByTestId, render, waitFor } from '@/tests/test-utils'
-import { safeParseUnits } from '@/utils/formatters'
-import { TokenType } from '@safe-global/safe-gateway-typescript-sdk'
-import { hexZeroPad } from 'ethers/lib/utils'
-import { useState } from 'react'
-import AssetsTable from '.'
-import { COLLAPSE_TIMEOUT_MS } from './useHideAssets'
-
-const getParentRow = (element: HTMLElement | null) => {
-  while (element !== null) {
-    if (element.tagName.toLowerCase() === 'tr') {
-      return element
-    }
-    element = element.parentElement
-  }
-  return null
-}
-
-const TestComponent = () => {
-  const [showHidden, setShowHidden] = useState(false)
-  const hiddenTokens = useHiddenTokens()
-  return (
-    <>
-      <AssetsTable showHiddenAssets={showHidden} setShowHiddenAssets={setShowHidden} />
-      <button data-testid="showHidden" onClick={() => setShowHidden((prev) => !prev)} />
-      <ul>
-        {hiddenTokens.map((token) => (
-          <li key={token}>{token}</li>
-        ))}
-      </ul>
-    </>
-  )
-}
-
-describe('AssetsTable', () => {
-  beforeEach(() => {
-    window.localStorage.clear()
-    jest.clearAllMocks()
-    jest.spyOn(useChainId, 'default').mockReturnValue('5')
-    jest.useFakeTimers()
-  })
-
-  test('select and deselect hidden assets', async () => {
-    const mockHiddenAssets = {
-      '5': [hexZeroPad('0x2', 20), hexZeroPad('0x3', 20)],
-    }
-    const mockBalances = {
-      data: {
-        fiatTotal: '300',
-        items: [
-          {
-            balance: safeParseUnits('100', 18)!.toString(),
-            fiatBalance: '100',
-            fiatConversion: '1',
-            tokenInfo: {
-              address: hexZeroPad('0x2', 20),
-              decimals: 18,
-              logoUri: '',
-              name: 'DAI',
-              symbol: 'DAI',
-              type: TokenType.ERC20,
-            },
-          },
-          {
-            balance: safeParseUnits('200', 18)!.toString(),
-            fiatBalance: '200',
-            fiatConversion: '1',
-            tokenInfo: {
-              address: hexZeroPad('0x3', 20),
-              decimals: 18,
-              logoUri: '',
-              name: 'SPAM',
-              symbol: 'SPM',
-              type: TokenType.ERC20,
-            },
-          },
-        ],
-      },
-      loading: false,
-      error: undefined,
-    }
-
-    const result = render(<TestComponent />, {
-      initialReduxState: {
-        balances: mockBalances,
-        settings: {
-          currency: 'usd',
-          hiddenTokens: mockHiddenAssets,
-          tokenList: TOKEN_LISTS.ALL,
-          shortName: {
-            show: true,
-            copy: true,
-            qr: true,
-          },
-          theme: {
-            darkMode: true,
-          },
-          env: {
-            tenderly: {
-              url: '',
-              accessToken: '',
-            },
-            rpc: {},
-          },
-          signing: {
-            onChainSigning: false,
-          },
-          transactionExecution: true,
-        },
-      },
-    })
-
-    const toggleHiddenButton = result.getByTestId('showHidden')
-
-    // Show only hidden assets
-    fireEvent.click(toggleHiddenButton)
-
-    await waitFor(() => {
-      expect(result.queryByText('100 DAI')).not.toBeNull()
-      expect(result.queryByText('200 SPM')).not.toBeNull()
-    })
-
-    // unhide both tokens
-    let tableRow = getParentRow(result.getByText('100 DAI'))
-    expect(tableRow).not.toBeNull()
-    fireEvent.click(getByRole(tableRow!, 'checkbox'))
-
-    tableRow = getParentRow(result.getByText('200 SPM'))
-    expect(tableRow).not.toBeNull()
-    fireEvent.click(getByRole(tableRow!, 'checkbox'))
-
-    // hide them again
-    tableRow = getParentRow(result.getByText('100 DAI'))
-    expect(tableRow).not.toBeNull()
-    fireEvent.click(getByRole(tableRow!, 'checkbox'))
-
-    tableRow = getParentRow(result.getByText('200 SPM'))
-    expect(tableRow).not.toBeNull()
-    fireEvent.click(getByRole(tableRow!, 'checkbox'))
-
-    const saveButton = result.getByText('Save')
-    fireEvent.click(saveButton)
-
-    // Both tokens should still be hidden
-    expect(result.queryByText('100 DAI')).toBeNull()
-    expect(result.queryByText('200 SPM')).toBeNull()
-  })
-
-  test('Deselect all and save', async () => {
-    const mockHiddenAssets = {
-      '5': [hexZeroPad('0x2', 20), hexZeroPad('0x3', 20), hexZeroPad('0xdead', 20)],
-    }
-    const mockBalances = {
-      data: {
-        fiatTotal: '300',
-        items: [
-          {
-            balance: safeParseUnits('100', 18)!.toString(),
-            fiatBalance: '100',
-            fiatConversion: '1',
-            tokenInfo: {
-              address: hexZeroPad('0x2', 20),
-              decimals: 18,
-              logoUri: '',
-              name: 'DAI',
-              symbol: 'DAI',
-              type: TokenType.ERC20,
-            },
-          },
-          {
-            balance: safeParseUnits('200', 18)!.toString(),
-            fiatBalance: '200',
-            fiatConversion: '1',
-            tokenInfo: {
-              address: hexZeroPad('0x3', 20),
-              decimals: 18,
-              logoUri: '',
-              name: 'SPAM',
-              symbol: 'SPM',
-              type: TokenType.ERC20,
-            },
-          },
-        ],
-      },
-      loading: false,
-      error: undefined,
-    }
-
-    const result = render(<TestComponent />, {
-      initialReduxState: {
-        balances: mockBalances,
-        settings: {
-          currency: 'usd',
-          hiddenTokens: mockHiddenAssets,
-          tokenList: TOKEN_LISTS.ALL,
-          shortName: {
-            show: true,
-            copy: true,
-            qr: true,
-          },
-          theme: {
-            darkMode: true,
-          },
-          env: {
-            tenderly: {
-              url: '',
-              accessToken: '',
-            },
-            rpc: {},
-          },
-          signing: {
-            onChainSigning: false,
-          },
-          transactionExecution: true,
-        },
-      },
-    })
-
-    const toggleHiddenButton = result.getByTestId('showHidden')
-
-    // Show only hidden assets
-    fireEvent.click(toggleHiddenButton)
-
-    await waitFor(() => {
-      expect(result.queryByText('100 DAI')).not.toBeNull()
-      expect(result.queryByText('200 SPM')).not.toBeNull()
-    })
-
-    // Expect 3 hidden token addresses
-    expect(result.queryByText(hexZeroPad('0x2', 20))).not.toBeNull()
-    expect(result.queryByText(hexZeroPad('0x3', 20))).not.toBeNull()
-    expect(result.queryByText(hexZeroPad('0xdead', 20))).not.toBeNull()
-
-    fireEvent.click(result.getByText('Deselect all'))
-    fireEvent.click(result.getByText('Save'))
-
-    await waitFor(() => {
-      // Menu should disappear
-      expect(result.queryByText('Save')).toBeNull()
-      // Assets should still be visible (unhidden)
-      expect(result.queryByText('100 DAI')).not.toBeNull()
-      expect(result.queryByText('200 SPM')).not.toBeNull()
-    })
-
-    // Expect one hidden token, which was not part of the current balance
-    expect(result.queryByText(hexZeroPad('0x2', 20))).toBeNull()
-    expect(result.queryByText(hexZeroPad('0x3', 20))).toBeNull()
-    expect(result.queryByText(hexZeroPad('0xdead', 20))).not.toBeNull()
-  })
-
-  test('immediately hide visible assets', async () => {
-    const mockHiddenAssets = {
-      '5': [],
-    }
-    const mockBalances = {
-      data: {
-        fiatTotal: '300',
-        items: [
-          {
-            balance: safeParseUnits('100', 18)!.toString(),
-            fiatBalance: '100',
-            fiatConversion: '1',
-            tokenInfo: {
-              address: hexZeroPad('0x2', 20),
-              decimals: 18,
-              logoUri: '',
-              name: 'DAI',
-              symbol: 'DAI',
-              type: TokenType.ERC20,
-            },
-          },
-          {
-            balance: safeParseUnits('200', 18)!.toString(),
-            fiatBalance: '200',
-            fiatConversion: '1',
-            tokenInfo: {
-              address: hexZeroPad('0x3', 20),
-              decimals: 18,
-              logoUri: '',
-              name: 'SPAM',
-              symbol: 'SPM',
-              type: TokenType.ERC20,
-            },
-          },
-        ],
-      },
-      loading: false,
-      error: undefined,
-    }
-
-    const result = render(<TestComponent />, {
-      initialReduxState: {
-        balances: mockBalances,
-        settings: {
-          currency: 'usd',
-          hiddenTokens: mockHiddenAssets,
-          tokenList: TOKEN_LISTS.ALL,
-          shortName: {
-            show: true,
-            copy: true,
-            qr: true,
-          },
-          theme: {
-            darkMode: true,
-          },
-          env: {
-            tenderly: {
-              url: '',
-              accessToken: '',
-            },
-            rpc: {},
-          },
-          signing: {
-            onChainSigning: false,
-          },
-          transactionExecution: true,
-        },
-      },
-    })
-
-    // Initially we see all tokens
-    expect(result.queryByText('100 DAI')).not.toBeNull()
-    expect(result.queryByText('200 SPM')).not.toBeNull()
-
-    // hide one token
-    let tableRow = getParentRow(result.getByText('200 SPM'))
-    expect(tableRow).not.toBeNull()
-    fireEvent.click(getByTestId(tableRow!, 'VisibilityOutlinedIcon'))
-
-    // As the animation runs for 300ms it is still visible in the first 299 ms
-    jest.advanceTimersByTime(COLLAPSE_TIMEOUT_MS - 1)
-    expect(result.queryByText('200 SPM')).not.toBeNull()
-
-    act(() => jest.advanceTimersByTime(1))
-    // We only see DAI
-    expect(result.queryByText('100 DAI')).not.toBeNull()
-    expect(result.queryByText('200 SPM')).toBeNull()
-
-    // Hide 2nd token
-    tableRow = getParentRow(result.getByText('100 DAI'))
-    expect(tableRow).not.toBeNull()
-    fireEvent.click(getByTestId(tableRow!, 'VisibilityOutlinedIcon'))
-
-    act(() => jest.advanceTimersByTime(COLLAPSE_TIMEOUT_MS))
-
-    expect(result.queryByText('100 DAI')).toBeNull()
-    expect(result.queryByText('200 SPM')).toBeNull()
-  })
-
-  test('hideAndUnhideAssets', async () => {
-    const mockHiddenAssets = {
-      '5': [],
-    }
-    const mockBalances = {
-      data: {
-        fiatTotal: '300',
-        items: [
-          {
-            balance: safeParseUnits('100', 18)!.toString(),
-            fiatBalance: '100',
-            fiatConversion: '1',
-            tokenInfo: {
-              address: hexZeroPad('0x2', 20),
-              decimals: 18,
-              logoUri: '',
-              name: 'DAI',
-              symbol: 'DAI',
-              type: TokenType.ERC20,
-            },
-          },
-          {
-            balance: safeParseUnits('200', 18)!.toString(),
-            fiatBalance: '200',
-            fiatConversion: '1',
-            tokenInfo: {
-              address: hexZeroPad('0x3', 20),
-              decimals: 18,
-              logoUri: '',
-              name: 'SPAM',
-              symbol: 'SPM',
-              type: TokenType.ERC20,
-            },
-          },
-        ],
-      },
-      loading: false,
-      error: undefined,
-    }
-
-    const result = render(<TestComponent />, {
-      initialReduxState: {
-        balances: mockBalances,
-        settings: {
-          currency: 'usd',
-          hiddenTokens: mockHiddenAssets,
-          tokenList: TOKEN_LISTS.ALL,
-          shortName: {
-            show: true,
-            copy: true,
-            qr: true,
-          },
-          theme: {
-            darkMode: true,
-          },
-          env: {
-            tenderly: {
-              url: '',
-              accessToken: '',
-            },
-            rpc: {},
-          },
-          signing: {
-            onChainSigning: false,
-          },
-          transactionExecution: true,
-        },
-      },
-    })
-
-    const toggleHiddenButton = result.getByTestId('showHidden')
-
-    // Initially we see all tokens (as none are hidden)
-    expect(result.queryByText('100 DAI')).not.toBeNull()
-    expect(result.queryByText('200 SPM')).not.toBeNull()
-
-    // toggle spam token
-    let tableRow = getParentRow(result.getByText('200 SPM'))
-    expect(tableRow).not.toBeNull()
-
-    // hide button
-    fireEvent.click(getByTestId(tableRow!, 'VisibilityOutlinedIcon'))
-
-    // SPAM token is hidden now
-    await waitFor(() => {
-      expect(result.queryByText('100 DAI')).not.toBeNull()
-      expect(result.queryByText('200 SPM')).toBeNull()
-    })
-
-    // show hidden tokens
-    fireEvent.click(toggleHiddenButton)
-
-    // All assets are visible
-    await waitFor(() => {
-      expect(result.queryByText('100 DAI')).not.toBeNull()
-      expect(result.queryByText('200 SPM')).not.toBeNull()
-    })
-
-    // Unhide token & reset (make no changes)
-    tableRow = getParentRow(result.getByText('200 SPM'))
-    expect(tableRow).not.toBeNull()
-    fireEvent.click(getByRole(tableRow!, 'checkbox'))
-    const resetButton = result.getByText('Cancel')
-    fireEvent.click(resetButton)
-
-    // SPAM token is hidden again
-    await waitFor(() => {
-      expect(result.queryByText('100 DAI')).not.toBeNull()
-      expect(result.queryByText('200 SPM')).toBeNull()
-    })
-
-    // show hidden tokens
-    fireEvent.click(toggleHiddenButton)
-
-    // Unhide token & apply
-    tableRow = getParentRow(result.getByText('200 SPM'))
-    expect(tableRow).not.toBeNull()
-    fireEvent.click(getByRole(tableRow!, 'checkbox'))
-    const saveButton = result.getByText('Save')
-    fireEvent.click(saveButton)
-
-    // Both tokens are visible again
-    await waitFor(() => {
-      expect(result.queryByText('100 DAI')).not.toBeNull()
-      expect(result.queryByText('200 SPM')).not.toBeNull()
-    })
-  })
-})
diff --git a/src/components/balances/SendButton/index.tsx b/src/components/balances/SendButton/index.tsx
index 157820778f..3ac54a9d8b 100644
--- a/src/components/balances/SendButton/index.tsx
+++ b/src/components/balances/SendButton/index.tsx
@@ -18,7 +18,7 @@ const SendButton = ({ tokenAddresses }: { tokenAddresses: string[] }): ReactElem
             variant="contained"
             color="primary"
             size="small"
-            sx={{ ml: 2, py: '11.25px' }}
+            sx={{ ml: 2, py: '11.25px', minWidth: '10.5em' }}
             onClick={(e) => {
               e.preventDefault()
 
@@ -29,6 +29,8 @@ const SendButton = ({ tokenAddresses }: { tokenAddresses: string[] }): ReactElem
             disabled={!isOk || tokenAddresses.length === 0}
           >
             Send
+            {tokenAddresses.length > 0 ? ' ' + tokenAddresses.length : ''}
+            {' token' + (tokenAddresses.length === 1 ? '' : 's')}
           </Button>
         </Track>
       )}