Done get best swap

IX-Swap · Jan 7, 2025 · 2fc430a · 2fc430a
1 parent b9c0ebe
commit 2fc430a
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 99 deletions.
diff --git a/src/pages/DexV2/Swap/components/SwapCard.tsx b/src/pages/DexV2/Swap/components/SwapCard.tsx
@@ -72,6 +72,7 @@ const SwapCard: React.FC = () => {
     return 'Swap'
   }, [swapping.wrapType, swapping.tokenIn?.symbol, swapping.tokenOut?.symbol])
   const pools: SubgraphPoolBase[] = swapping.sor.pools
+  console.log('pools', pools)
   const error = useMemo(() => {
     if (isMismatchedNetwork) {
       return {
@@ -162,11 +163,25 @@ const SwapCard: React.FC = () => {
     // modalSwapPreviewIsOpen.value = false;  TODO: Review UX
   }
 
+  async function swap() {
+    return swapping.swap(() => {
+      swapping.resetAmounts()
+      // emit('close');
+    })
+  }
+
   useEffect(() => {
     populateInitialTokens()
     setInitialized(true)
   }, [])
 
+  useEffect(() => {
+    // if (!swapping.isLoading) {
+    //   swapping.handleAmountChange()
+    // }
+  }, [tokenInAmount, tokenOutAmount])
+
+  console.log("swapping.isLoading", swapping.isLoading)
   return (
     <Container>
       <Flex justifyContent="space-between" alignItems="center">
@@ -187,24 +202,18 @@ const SwapCard: React.FC = () => {
       </Flex>
 
       <SwapPair
-        tokenInAmount={tokenInAmount}
-        tokenInAddress={tokenInAddress}
-        tokenOutAmount={tokenOutAmount}
-        tokenOutAddress={tokenOutAddress}
         exactIn={exactIn}
         swapLoading={swapping.isBalancerSwap ? swapping.isLoading : false}
         effectivePriceMessage={swapping.effectivePriceMessage}
         amountChange={swapping.handleAmountChange}
-        setTokenInAddress={setTokenInAddress}
-        setTokenOutAddress={setTokenOutAddress}
-        setTokenInAmount={setTokenInAmount}
-        setTokenOutAmount={setTokenOutAmount}
         setExactIn={setExactIn}
       />
 
       <SwapDetail />
 
-      <div>{account ? <ButtonPrimary>Next</ButtonPrimary> : <ButtonPrimary>Connect Wallet</ButtonPrimary>}</div>
+      <div>
+        {account ? <ButtonPrimary onClick={swap}>Next</ButtonPrimary> : <ButtonPrimary>Connect Wallet</ButtonPrimary>}
+      </div>
     </Container>
   )
 }

diff --git a/src/pages/DexV2/Swap/components/SwapPair.tsx b/src/pages/DexV2/Swap/components/SwapPair.tsx
@@ -7,130 +7,104 @@ import SwapIcon from 'assets/images/dex-v2/swap.svg'
 import { emptyToken, UseSwapping } from 'state/dexV2/swap/useSwapping'
 import useNumbers from 'hooks/dex-v2/useNumbers'
 import { useTokens } from 'state/dexV2/tokens/hooks/useTokens'
+import { useSwapState } from 'state/dexV2/swap/useSwapState'
 
 type Props = {
-  tokenInAmount: string
-  tokenInAddress: string
-  tokenOutAmount: string
-  tokenOutAddress: string
   exactIn: boolean
   priceImpact?: number
   effectivePriceMessage?: UseSwapping['effectivePriceMessage']
   swapLoading?: boolean
   amountChange: () => void
-  setTokenInAmount: (amount: string) => void
-  setTokenOutAmount: (amount: string) => void
-  setTokenInAddress: (address: string) => void
-  setTokenOutAddress: (address: string) => void
   setExactIn: (exactIn: boolean) => void
 }
 
 const SwapPair: React.FC<Props> = ({
-  tokenInAmount,
-  tokenInAddress,
-  tokenOutAmount,
-  tokenOutAddress,
   exactIn,
   priceImpact,
   effectivePriceMessage,
   swapLoading,
   amountChange,
   setExactIn,
-  setTokenInAmount,
-  setTokenOutAmount,
-  setTokenInAddress,
-  setTokenOutAddress,
 }) => {
   const { fNum } = useNumbers()
   const { getToken } = useTokens()
+  const {
+    tokenInAddress,
+    tokenOutAddress,
+    tokenInAmount,
+    tokenOutAmount,
+    setTokenInAddress,
+    setTokenOutAddress,
+    setTokenInAmount,
+    setTokenOutAmount,
+    setInitialized,
+  } = useSwapState()
 
-  const [_tokenInAmount, setLocalTokenInAmount] = useState('')
-  const [_tokenOutAmount, setLocalTokenOutAmount] = useState('')
-  const [_tokenInAddress, setLocalTokenInAddress] = useState('')
-  const [_tokenOutAddress, setLocalTokenOutAddress] = useState('')
   const [isInRate, setIsInRate] = useState(true)
   const [typingTimeout, setTypingTimeout] = useState<any>(undefined)
 
-  const missingToken = !_tokenInAddress || !_tokenOutAddress
-  const missingAmount = !_tokenInAmount || !_tokenOutAmount
+  const missingToken = !tokenInAddress || !tokenOutAddress
+  const missingAmount = !tokenInAmount || !tokenOutAmount
 
-  const tokenIn = _tokenInAddress ? getToken(_tokenInAddress) : emptyToken
-  const tokenOut = _tokenOutAddress ? getToken(_tokenOutAddress) : emptyToken
-
-  function preventUpdatesOnTyping(callback: () => void) {
-    if (typingTimeout.value) {
-      clearTimeout(typingTimeout.value)
-    }
-    typingTimeout.value = setTimeout(() => {
-      callback()
-    }, 300)
-  }
+  const tokenIn = tokenInAddress ? getToken(tokenInAddress) : emptyToken
+  const tokenOut = tokenOutAddress ? getToken(tokenOutAddress) : emptyToken
 
   function handleInAmountChange(value: string): void {
     setTokenInAmount(value)
-    preventUpdatesOnTyping(() => {
-      amountChange()
-    })
+    setExactIn(true)
   }
 
   function handleOutAmountChange(value: string): void {
     setTokenOutAmount(value)
-    preventUpdatesOnTyping(() => {
-      amountChange()
-    })
+    setExactIn(false)
   }
 
   function handleTokenSwitch(): void {
     setExactIn(!exactIn)
-    setTokenInAmount(_tokenOutAmount)
-    setTokenInAddress(_tokenOutAddress)
-    setTokenOutAmount(_tokenInAmount)
-    setTokenOutAddress(_tokenInAddress)
+    setTokenInAmount(tokenOutAmount)
+    setTokenInAddress(tokenOutAddress)
+    setTokenOutAmount(tokenInAmount)
+    setTokenOutAddress(tokenInAddress)
     amountChange()
   }
 
   async function handleInputTokenChange(newTokenIn: string) {
-    if (newTokenIn === _tokenOutAddress) {
+    if (newTokenIn === tokenOutAddress) {
       handleTokenSwitch()
       return
     }
     setTokenInAddress(newTokenIn)
   }
 
   async function handleOutputTokenChange(newTokenOut: string) {
-    if (newTokenOut === _tokenInAddress) {
+    if (newTokenOut === tokenInAddress) {
       handleTokenSwitch()
       return
     }
     setTokenOutAddress(newTokenOut)
   }
 
-  useEffect(() => {
-    setLocalTokenInAmount(tokenInAmount)
-    setLocalTokenOutAmount(tokenOutAmount)
-    setLocalTokenInAddress(tokenInAddress)
-    setLocalTokenOutAddress(tokenOutAddress)
-  }, [tokenInAmount, tokenOutAmount, tokenInAddress, tokenOutAddress])
-
   useEffect(() => {
     // populates initial tokenOutAmount
     if (tokenOutAmount) {
       handleOutAmountChange(tokenOutAmount)
     }
   }, [])
 
+  console.log('tokenInAmount', tokenInAmount)
+  console.log('tokenOutAmount', tokenOutAmount)
+
   return (
     <Container>
       <div>
         <TokenInput
-          amount={_tokenInAmount}
-          address={_tokenInAddress}
+          amount={tokenInAmount}
+          address={tokenInAddress}
           name="tokenIn"
           excludedTokens={[]}
           autoFocus
           updateAmount={handleInAmountChange}
           updateAddress={handleInputTokenChange}
-          // input={() => setExactIn(true)}
           setMax={() => setExactIn(true)}
         />
       </div>
@@ -139,16 +113,15 @@ const SwapPair: React.FC<Props> = ({
       </SwapIconWrapper>
       <Box mt={24}>
         <TokenInput
-          amount={_tokenInAmount}
-          address={_tokenOutAddress}
+          amount={tokenOutAmount}
+          address={tokenOutAddress}
           name="tokenOut"
           excludedTokens={[]}
           noRules
           noMax
           disableNativeAssetBuffer
-          updateAmount={handleInAmountChange}
-          updateAddress={handleInputTokenChange}
-          // input={() => setExactIn(true)}
+          updateAmount={handleOutAmountChange}
+          updateAddress={handleOutputTokenChange}
         />
       </Box>
     </Container>