From 4f896361bec5c9d35a265a5d3bb0540bbea7a2b1 Mon Sep 17 00:00:00 2001
From: Jordan Frankfurt <jordanwfrankfurt@gmail.com>
Date: Tue, 11 Jan 2022 09:50:39 -0600
Subject: [PATCH] fix(widgets): correctly position the arrows (#3083)

* correctly position the arrows

* update reverse button css and remove popover logic

* px->em
---
 src/lib/components/Swap/Input.tsx         | 17 ++++++++---------
 src/lib/components/Swap/ReverseButton.tsx |  5 +++--
 src/lib/components/Swap/index.tsx         |  5 ++---
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/Swap/Input.tsx b/src/lib/components/Swap/Input.tsx
index cdde14df30..162ac8ae0b 100644
--- a/src/lib/components/Swap/Input.tsx
+++ b/src/lib/components/Swap/Input.tsx
@@ -1,15 +1,16 @@
 import { Trans } from '@lingui/macro'
+import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useAtomValue } from 'jotai/utils'
 import { inputAtom, useUpdateInputToken, useUpdateInputValue } from 'lib/state/swap'
 import styled, { ThemedText } from 'lib/theme'
-import { ReactNode } from 'react'
 
 import Column from '../Column'
 import Row from '../Row'
 import TokenImg from '../TokenImg'
 import TokenInput from './TokenInput'
 
-const mockBalance = 123.45
+const mockToken = new Token(1, '0x8b3192f5eebd8579568a2ed41e6feb402f93f73f', 9, 'STM', 'Saitama')
+const mockCurrencyAmount = CurrencyAmount.fromRawAmount(mockToken, '134108514895957704114061')
 
 const InputColumn = styled(Column)<{ approved?: boolean }>`
   margin: 0.75em;
@@ -23,14 +24,13 @@ const InputColumn = styled(Column)<{ approved?: boolean }>`
 
 interface InputProps {
   disabled?: boolean
-  children: ReactNode
 }
 
-export default function Input({ disabled, children }: InputProps) {
+export default function Input({ disabled }: InputProps) {
   const input = useAtomValue(inputAtom)
   const setValue = useUpdateInputValue(inputAtom)
   const setToken = useUpdateInputToken(inputAtom)
-  const balance = mockBalance
+  const balance = mockCurrencyAmount
 
   return (
     <InputColumn gap={0.5} approved={input.approved !== false}>
@@ -42,7 +42,7 @@ export default function Input({ disabled, children }: InputProps) {
       <TokenInput
         input={input}
         disabled={disabled}
-        onMax={balance ? () => setValue(balance) : undefined}
+        onMax={balance ? () => setValue(1234) : undefined}
         onChangeInput={setValue}
         onChangeToken={setToken}
       >
@@ -50,15 +50,14 @@ export default function Input({ disabled, children }: InputProps) {
           <Row>
             {input.usdc ? `~ $${input.usdc.toLocaleString('en')}` : '-'}
             {balance && (
-              <ThemedText.Body2 color={input.value && input.value > balance ? 'error' : undefined}>
-                Balance: <span style={{ userSelect: 'text' }}>{balance}</span>
+              <ThemedText.Body2 color={input.value && balance.lessThan(input.value) ? 'error' : undefined}>
+                Balance: <span style={{ userSelect: 'text' }}>{balance.toExact()}</span>
               </ThemedText.Body2>
             )}
           </Row>
         </ThemedText.Body2>
       </TokenInput>
       <Row />
-      {children}
     </InputColumn>
   )
 }
diff --git a/src/lib/components/Swap/ReverseButton.tsx b/src/lib/components/Swap/ReverseButton.tsx
index 4ac5fa45bd..b2c1b0a15b 100644
--- a/src/lib/components/Swap/ReverseButton.tsx
+++ b/src/lib/components/Swap/ReverseButton.tsx
@@ -8,9 +8,10 @@ import Button from '../Button'
 import Row from '../Row'
 
 const ReverseRow = styled(Row)`
-  bottom: -1.5em;
+  left: 50%;
   position: absolute;
-  width: 100%;
+  top: 7.45em;
+  transform: translateX(-50%);
   z-index: ${Layer.OVERLAY};
 `
 
diff --git a/src/lib/components/Swap/index.tsx b/src/lib/components/Swap/index.tsx
index b214c02f1c..0d4389247e 100644
--- a/src/lib/components/Swap/index.tsx
+++ b/src/lib/components/Swap/index.tsx
@@ -23,9 +23,8 @@ export default function Swap() {
       </Header>
       <div ref={setBoundary}>
         <BoundaryProvider value={boundary}>
-          <Input disabled={!active}>
-            <ReverseButton disabled={!active} />
-          </Input>
+          <Input disabled={!active} />
+          <ReverseButton disabled={!active} />
           <Output disabled={!active}>
             <Toolbar disabled={!active} />
             <SwapButton />