Feat/synapse UI max (#932)

* Update TokenInput onClickMax button to work, wrap in useCallback * Fix Max input for TokenInput * Update input to hide scrollbar * Fix Deposit bug * Wrap sumBigNUmbersFromState with useCallback to update when args change * Scratch above * Fix Pools approve function to point towards correct approver address * Input autocomplete off * Update PoolsCardTitle to not set via innerHtml * Line up LoadingSpinner to start of div, account for before pseudoclass * Update LoadingSpinner to not affect other instances * .. * Fix cypress gh actions issue * ... * Update DestinationTx.tsx * i think --------- Co-authored-by: Jonah Lin <[email protected]> Co-authored-by: Simon <[email protected]>
synapsecns · May 18, 2023 · 66f3dc4 · 66f3dc4
1 parent d574fed
commit 66f3dc4
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 29 deletions.
diff --git a/packages/synapse-interface/components/InteractiveInputRow.tsx b/packages/synapse-interface/components/InteractiveInputRow.tsx
@@ -97,11 +97,12 @@ const InteractiveInputRow = ({
             >
               <div className="overflow-x-scroll ">
                 <input
+                  autoComplete="off"
                   className={`
                     ${isConnected ? '-mt-2' : '-mt-0'}
                     focus:outline-none bg-transparent
                     w-[300px] max-w-[calc(100%-92px)]
-                    sm:min-w-[200px] sm:w-full
+                    sm:min-w-[200px] sm:w-full scrollbar-none
                   placeholder:text-[#88818C] text-white
                     text-opacity-80 text-lg md:text-2xl lg:text-2xl font-medium
                 `}

diff --git a/packages/synapse-interface/components/TokenInput.tsx b/packages/synapse-interface/components/TokenInput.tsx
@@ -1,9 +1,7 @@
+import { useCallback, MouseEvent } from 'react'
 import InteractiveInputRow from './InteractiveInputRow'
-import { formatBNToString } from '@bignumber/format'
-import { formatUnits } from '@ethersproject/units'
 import { displaySymbol } from '@utils/displaySymbol'
 import { Token } from '@types'
-import { BigNumber } from 'ethers'
 import { cleanNumberInput } from '@utils/cleanNumberInput'
 
 const TokenInput = ({
@@ -23,13 +21,14 @@ const TokenInput = ({
 }) => {
   const symbol = displaySymbol(chainId, token)
 
-  const onClickMax = (e) => {
-    e.preventDefault()
-    const maxStr = formatUnits(balanceStr, token.decimals[chainId])
-    if (maxStr != 'undefined') {
-      onChange(maxStr)
-    }
-  }
+  const onClickMax = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault()
+      onChange(balanceStr)
+    },
+    [onChange, balanceStr, token]
+  )
+
   return (
     <div className="items-center">
       <div className="w-full">

diff --git a/packages/synapse-interface/components/input/TokenAmountInput/index.tsx b/packages/synapse-interface/components/input/TokenAmountInput/index.tsx
@@ -140,6 +140,7 @@ const BridgeInputContainer = ({
               }
               value={inputString}
               name="inputRow"
+              autoComplete="off"
             />
           )}
           {isOrigin && isConnected && (

diff --git a/packages/synapse-interface/components/ui/tailwind/LoadingSpinner.tsx b/packages/synapse-interface/components/ui/tailwind/LoadingSpinner.tsx
@@ -1,9 +1,15 @@
-export default function LoadingSpinner({ className }: { className?: string }) {
+export default function LoadingSpinner({
+  className,
+  shift = false,
+}: {
+  className?: string
+  shift?: boolean
+}) {
   return (
     <div
       className={`inline-flex items-center justify-center pr-3 ${className}`}
     >
-      <div className="dot-flashing"></div>
+      <div className={`dot-flashing ${shift ? 'left-[12px]' : ''}`}></div>
     </div>
   )
 }
diff --git a/packages/synapse-interface/pages/bridge/BridgeWatcher/DestinationTx.tsx b/packages/synapse-interface/pages/bridge/BridgeWatcher/DestinationTx.tsx
@@ -21,7 +21,8 @@ import {
 } from '@utils/bridgeWatcher'
 const DestinationTx = memo((fromEvent: BridgeWatcherTx) => {
   const [toEvent, setToEvent] = useState<BridgeWatcherTx>()
-  const [toSynapseContract, setToSynapseContract] = useState<Contract>()
+  const [toSynapseContract, setToSynapseContract] =
+    useState<Contract>(undefined)
   const [toSigner, setToSigner] = useState<Signer>()
   const { data: toSignerRaw } = useSigner({ chainId: fromEvent.toChainId })
   const [completedConf, setCompletedConf] = useState(false)
@@ -89,7 +90,7 @@ const DestinationTx = memo((fromEvent: BridgeWatcherTx) => {
       )
     }
     setAttempted(true)
-    return
+    return null
   }
 
   useEffect(() => {
@@ -109,7 +110,7 @@ const DestinationTx = memo((fromEvent: BridgeWatcherTx) => {
       toEvent === undefined &&
       attempted
     ) {
-=      getToBridgeEvent().then((tx) => {
+      getToBridgeEvent().then((tx) => {
         setToEvent(tx)
       })
     }
@@ -118,8 +119,10 @@ const DestinationTx = memo((fromEvent: BridgeWatcherTx) => {
     if (toSynapseContract && toEvent === undefined && !completedConf) {
       getToBridgeEvent().then((tx) => {
         setToEvent(tx)
+        return
       })
     }
+    return
   }, [toSynapseContract])
   useEffect(() => {
     setToSigner(toSignerRaw)

diff --git a/packages/synapse-interface/pages/pool/poolManagement/Deposit.tsx b/packages/synapse-interface/pages/pool/poolManagement/Deposit.tsx
@@ -50,7 +50,9 @@ const Deposit = ({
     let sum = Zero
     pool?.poolTokens &&
       pool.poolTokens.map((token) => {
-        if (inputValue.bn[getAddress(token.addresses[chainId])]) {
+        if (!token.addresses[chainId]) return
+        const tokenAddress = getAddress(token.addresses[chainId])
+        if (inputValue.bn[tokenAddress]) {
           sum = sum.add(
             inputValue.bn[getAddress(token.addresses[chainId])].mul(
               BigNumber.from(10).pow(18 - token.decimals[chainId])
@@ -77,7 +79,7 @@ const Deposit = ({
         let allowances: Record<string, BigNumber> = {}
         for (const [key, value] of Object.entries(inputValue.bn)) {
           allowances[key] = await getTokenAllowance(
-            pool.addresses[chainId],
+            pool.swapAddresses[chainId],
             key,
             address,
             chainId
@@ -113,7 +115,7 @@ const Deposit = ({
 
   useEffect(() => {
     calculateMaxDeposits()
-  }, [inputValue, time])
+  }, [inputValue, time, pool, chainId, address])
 
   const onChangeInputValue = (token: Token, value: string) => {
     const bigNum = stringToBigNum(value, token.decimals[chainId]) ?? Zero
@@ -232,7 +234,7 @@ const Deposit = ({
   )
 }
 const correctToken = (token: Token) => {
-  let balanceToken
+  let balanceToken: Token | undefined
   if (token.symbol == WETH.symbol) {
     balanceToken = ETH
   } else if (token.symbol == AVWETH.symbol) {

diff --git a/packages/synapse-interface/pages/pools/PoolCard.tsx b/packages/synapse-interface/pages/pools/PoolCard.tsx
@@ -83,11 +83,11 @@ const PoolsListCard = memo(
                 chainName={chain?.name}
               />
             }
-            titleClassName="text-white font-light text-xl lg:min-w-[333px]"
+            titleClassName="text-white font-light text-xl"
             className={`
             bg-bgBase transition-all rounded-xl items-center
             hover:bg-bgLight
-              py-6 mt-4 pr-2
+              py-6 mt-4
               border border-transparent
               whitespace-wrap
             `}
@@ -110,8 +110,7 @@ const PoolsListCard = memo(
                   {poolData?.totalLockedUSDStr ? (
                     '$' + poolData?.totalLockedUSDStr
                   ) : (
-                    // <div className="w-12 h-6 rounded animate-pulse bg-slate-700" />
-                    <LoadingSpinner />
+                    <LoadingSpinner shift={true} />
                   )}
                 </div>
               </div>
@@ -145,13 +144,12 @@ const PoolsCardTitle = ({
   poolName: string
   chainImg: string
 }) => {
-  let displayPoolName = poolName?.replace(chainName, `<b>${chainName}</b>`)
+  let displayPoolName = poolName?.replace(chainName, `${chainName}`)
 
   return (
     <div className="flex items-center">
       <img src={chainImg} className="w-6 h-6 mr-2 rounded-full" />
-      {/* TODO: A better way to do this? */}
-      <div dangerouslySetInnerHTML={{ __html: displayPoolName }} />
+      <div className="font-semibold">{displayPoolName}</div>
     </div>
   )
 }

diff --git a/packages/synapse-interface/pages/swap/SwapCard.tsx b/packages/synapse-interface/pages/swap/SwapCard.tsx
@@ -297,6 +297,7 @@ const SwapCard = ({
       wallet
     )
     const allowance = await erc20.allowance(address, routerAddress)
+    console.log('allowance from getCurrentTokenAllowance: ', allowance)
     return allowance
   }
 
@@ -531,6 +532,9 @@ const SwapCard = ({
       z-20 rounded-3xl
     `,
   }
+
+  console.log('swapQuote?.allowance: ', swapQuote?.allowance)
+
   // TODO make this a function
   const ActionButton = useMemo(() => {
     let destAddrNotValid

diff --git a/packages/synapse-interface/utils/actions/approveAndDeposit.tsx b/packages/synapse-interface/utils/actions/approveAndDeposit.tsx
@@ -29,7 +29,7 @@ export const approve = async (
 
     if (token.symbol != WETH.symbol) {
       await approveToken(
-        pool.addresses[chainId],
+        pool.swapAddresses[chainId],
         chainId,
         token.symbol === AVWETH.symbol
           ? WETHE.addresses[chainId]
@@ -58,8 +58,10 @@ export const deposit = async (
 
     toast('Starting your deposit...')
 
+    const result = Array.from(Object.values(inputAmounts), (value) => value)
+
     let spendTransactionArgs = [
-      Object.values(inputAmounts),
+      result,
       minToMint,
       Math.round(new Date().getTime() / 1000 + 60 * 10),
     ]
@@ -69,6 +71,7 @@ export const deposit = async (
     )
 
     const tx = await spendTransaction.wait()
+
     const toastContent = (
       <div>
         <div>Liquidity added!</div>

diff --git a/packages/synapse-interface/utils/hooks/useSwapDepositContract.ts b/packages/synapse-interface/utils/hooks/useSwapDepositContract.ts
@@ -22,5 +22,6 @@ export const useSwapDepositContract = async (pool: Token, chainId: number) => {
 
   const swapContract = new Contract(poolAddress, abi, signer)
 
+  console.log('swapContract: ', swapContract)
   return swapContract
 }