fix: "Select token" button text (Uniswap#546)

fix: select token button
FriggGroup · Mar 9, 2023 · 15e1f91 · 15e1f91
1 parent adabbcb
commit 15e1f91
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 8 deletions.
diff --git a/src/components/Swap/SwapActionButton/SwapButton.tsx b/src/components/Swap/SwapActionButton/SwapButton.tsx
@@ -29,8 +29,8 @@ import useOnSubmit from './useOnSubmit'
 export default function SwapButton({ disabled }: { disabled: boolean }) {
   const { account, chainId } = useWeb3React()
   const {
-    [Field.INPUT]: { usdc: inputUSDC },
-    [Field.OUTPUT]: { usdc: outputUSDC },
+    [Field.INPUT]: { usdc: inputUSDC, currency: inputCurrency },
+    [Field.OUTPUT]: { usdc: outputUSDC, currency: outputCurrency },
     trade: { trade, gasUseEstimateUSD },
     approval,
     allowance,
@@ -40,6 +40,7 @@ export default function SwapButton({ disabled }: { disabled: boolean }) {
   const deadline = useTransactionDeadline()
   const feeOptions = useAtomValue(feeOptionsAtom)
   const color = useTokenColorExtraction()
+  const missingToken = !inputCurrency || !outputCurrency
 
   const permit2Enabled = usePermit2Enabled()
   const { callback: swapRouterCallback } = useSwapCallback({
@@ -108,7 +109,7 @@ export default function SwapButton({ disabled }: { disabled: boolean }) {
   return (
     <>
       <ActionButton color={color} onClick={onClick} disabled={disabled}>
-        <Trans>Review swap</Trans>
+        {missingToken ? <Trans>Select token</Trans> : <Trans>Review swap</Trans>}
       </ActionButton>
       {trade && (
         <ResponsiveDialog open={open} setOpen={setOpen}>

diff --git a/src/components/Swap/Toolbar/Toolbar.test.tsx b/src/components/Swap/Toolbar/Toolbar.test.tsx
@@ -58,7 +58,7 @@ describe('Toolbar', () => {
       }
     )
     expect(component.queryByTestId('toolbar')).toBeNull()
-    expect(component.queryByText('Review swap')).toBeTruthy() // should be disabled
+    expect(component.queryByText('Select token')).toBeTruthy() // should be disabled
   })
 
   it('should render with both currencies specified, no amount input', () => {

diff --git a/src/components/TokenSelect/TokenButton.tsx b/src/components/TokenSelect/TokenButton.tsx
@@ -63,7 +63,7 @@ export default function TokenButton({ value, approved, disabled, onClick }: Toke
             color={'onAccent'}
             style={{ maxWidth: '10rem', textOverflow: 'ellipsis', overflow: 'hidden' }}
           >
-            <Trans>Select a token</Trans>
+            <Trans>Select token</Trans>
           </ThemedText.ButtonLarge>
         )}
         <ChevronDown strokeWidth={2} color={value ? 'primary' : 'onAccent'} />

diff --git a/src/components/TokenSelect/index.test.tsx b/src/components/TokenSelect/index.test.tsx
@@ -31,7 +31,7 @@ describe('TokenSelect.tsx', () => {
       const widget = renderTokenSelect(onTokenSelectorClick)
 
       await user.click(widget.getByRole('button'))
-      expect(widget.getByTestId('dialog-header').textContent).toBe('Select a token')
+      expect(widget.getByTestId('dialog-header').textContent).toBe('Select token')
     })
     it('should halt if the handler promise resolves to false', async () => {
       const user = userEvent.setup()

diff --git a/src/components/TokenSelect/index.tsx b/src/components/TokenSelect/index.tsx
@@ -95,14 +95,14 @@ export function TokenSelectDialogContent({ value, onSelect, onClose }: TokenSele
   if (!listHasTokens && isLoaded) {
     return (
       <Dialog color="container" onClose={onClose}>
-        <Header title={<Trans>Select a token</Trans>} />
+        <Header title={<Trans>Select token</Trans>} />
         <NoTokensAvailableOnNetwork />
       </Dialog>
     )
   }
   return (
     <TokenSelectContainer $pageCentered={isPageCentered ?? false}>
-      <Header title={<Trans>Select a token</Trans>} />
+      <Header title={<Trans>Select token</Trans>} />
       <Column gap={0.75}>
         <Column gap={0.75} style={{ margin: '0 0.5rem' }}>
           <Row pad={0.75} grow>