feat: intergrate aggregation trade in market swap (#257)

* feat: intergrate aggregation trade in market swap * fix: pnpm version * wip * wip * wip * wip * wip * wip * wip * wip * wip * fix: lock gauge * wip: onsuccess
zenlinkpro · Jun 3, 2024 · bd1f632 · bd1f632
1 parent d841ec2
commit bd1f632
Show file tree

Hide file tree

Showing 51 changed files with 4,623 additions and 5,283 deletions.
diff --git a/.github/workflows/apps-analytics.yml b/.github/workflows/apps-analytics.yml
@@ -29,9 +29,8 @@ jobs:
         with:
           fetch-depth: 2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

diff --git a/.github/workflows/apps-gauge.yml b/.github/workflows/apps-gauge.yml
@@ -29,9 +29,8 @@ jobs:
         with:
           fetch-depth: 2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

diff --git a/.github/workflows/apps-market.yml b/.github/workflows/apps-market.yml
@@ -29,9 +29,8 @@ jobs:
         with:
           fetch-depth: 2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

diff --git a/.github/workflows/apps-pool.yml b/.github/workflows/apps-pool.yml
@@ -29,9 +29,8 @@ jobs:
         with:
           fetch-depth: 2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

diff --git a/.github/workflows/apps-referrals.yml b/.github/workflows/apps-referrals.yml
@@ -29,9 +29,8 @@ jobs:
         with:
           fetch-depth: 2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

diff --git a/.github/workflows/apps-swap.yml b/.github/workflows/apps-swap.yml
@@ -29,9 +29,8 @@ jobs:
         with:
           fetch-depth: 2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

diff --git a/.github/workflows/packages.yml b/.github/workflows/packages.yml
@@ -27,9 +27,8 @@ jobs:
         with:
           fetch-depth: 2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

diff --git a/apps/gauge/pages/lock.tsx b/apps/gauge/pages/lock.tsx
@@ -104,10 +104,16 @@ function LockPanel() {
     return undefined
   }, [ZLKOnMoonbeam, increaseLockPosition, ve])
 
+  const onClear = useCallback(() => {
+    setInput('')
+    setDuration(Duration['N/A'])
+  }, [])
+
   const { isWritePending, sendTransaction, veAddress } = useLockVeReview({
     chainId: ParachainId.MOONBEAM,
     amount: additionalAmount,
     newExpiry: increaseLockPosition?.newExpiry,
+    onSuccess: onClear,
   })
 
   return (
@@ -191,49 +197,42 @@ function LockPanel() {
           </div>
         )}
         <Checker.Connected chainId={ParachainId.MOONBEAM} fullWidth size="md">
-          <Checker.Amounts
-            amounts={[additionalAmount]}
-            chainId={ParachainId.MOONBEAM}
-            fullWidth
-            size="md"
-          >
-            <Checker.Network chainId={ParachainId.MOONBEAM} fullWidth size="md">
-              <Approve
-                chainId={ParachainId.MOONBEAM}
-                className="flex-grow !justify-end"
-                components={(
-                  <Approve.Components>
-                    <Approve.Token
-                      address={veAddress}
-                      amount={additionalAmount}
-                      chainId={ParachainId.MOONBEAM}
-                      className="whitespace-nowrap"
-                      enabled={additionalAmount?.currency?.isToken}
-                      fullWidth
-                      size="md"
-                    />
-                  </Approve.Components>
-                )}
-                onSuccess={createNotification}
-                render={({ approved }) => {
-                  return (
-                    <Button
-                      disabled={!approved || !sendTransaction || isWritePending}
-                      fullWidth
-                      onClick={() => sendTransaction?.()}
-                      size="md"
-                    >
-                      {
-                        isWritePending
-                          ? <Dots><Trans>Confirm</Trans></Dots>
-                          : <Trans>Confirm</Trans>
-                      }
-                    </Button>
-                  )
-                }}
-              />
-            </Checker.Network>
-          </Checker.Amounts>
+          <Checker.Network chainId={ParachainId.MOONBEAM} fullWidth size="md">
+            <Approve
+              chainId={ParachainId.MOONBEAM}
+              className="flex-grow !justify-end"
+              components={(
+                <Approve.Components>
+                  <Approve.Token
+                    address={veAddress}
+                    amount={additionalAmount}
+                    chainId={ParachainId.MOONBEAM}
+                    className="whitespace-nowrap"
+                    enabled={additionalAmount?.currency?.isToken}
+                    fullWidth
+                    size="md"
+                  />
+                </Approve.Components>
+              )}
+              onSuccess={createNotification}
+              render={({ approved }) => {
+                return (
+                  <Button
+                    disabled={!approved || !sendTransaction || isWritePending}
+                    fullWidth
+                    onClick={() => sendTransaction?.()}
+                    size="md"
+                  >
+                    {
+                      isWritePending
+                        ? <Dots><Trans>Confirm</Trans></Dots>
+                        : <Trans>Confirm</Trans>
+                    }
+                  </Button>
+                )
+              }}
+            />
+          </Checker.Network>
         </Checker.Connected>
       </div>
     </div>

diff --git a/apps/market/components/MarketSection/MarketActions/MarketSwap/MarketSwapPanel.tsx b/apps/market/components/MarketSection/MarketActions/MarketSwap/MarketSwapPanel.tsx
@@ -5,7 +5,10 @@ import { type FC, useCallback, useMemo, useState } from 'react'
 import { Checker } from '@zenlink-interface/compat'
 import { Button, Dots } from '@zenlink-interface/ui'
 import { Trans } from '@lingui/macro'
-import { TradeProvider } from './TradeProvider'
+import { useTokens } from 'lib/state/token-lists'
+import { useSettings } from '@zenlink-interface/shared'
+import { Percent, ZERO } from '@zenlink-interface/math'
+import { TradeProvider, useTrade } from './TradeProvider'
 import { CurrencyInput } from './CurrencyInput'
 import { MarketSwapReviewModal } from './MarketSwapReviewModal'
 import { SwapStatsDisclosure } from './SwapStatsDisclosure'
@@ -19,15 +22,20 @@ interface TokenMap {
   [address: string]: Token
 }
 
+const SWAP_DEFAULT_SLIPPAGE = new Percent(100, 10_000) // 1.00%
+
 export const MarketSwapPanel: FC<MarketSwapPanelProps> = ({ market, isPt }) => {
+  const tokenMap = useTokens(market.chainId)
+
   const defaultTokenMap: TokenMap = useMemo(() => {
     const initialTokenMap = {
+      ...tokenMap,
       [market.SY.yieldToken.address]: market.SY.yieldToken,
     }
     return isPt
       ? { ...initialTokenMap, [market.YT.address]: market.YT }
       : { ...initialTokenMap, [market.PT.address]: market.PT }
-  }, [isPt, market.PT, market.SY.yieldToken, market.YT])
+  }, [isPt, market.PT, market.SY.yieldToken, market.YT, tokenMap])
 
   const [input, setInput] = useState<string>('')
   const [[inputToken, outputToken], setTokens] = useState<[Type | undefined, Type | undefined]>(
@@ -83,8 +91,8 @@ export const MarketSwapPanel: FC<MarketSwapPanelProps> = ({ market, isPt }) => {
           chainId={market.chainId}
           className="p-3 bg-white/50 dark:bg-slate-700/50 rounded-2xl"
           currency={inputToken}
-          includeHotTokens={false}
-          includeNative={false}
+          includeHotTokens
+          includeNative
           isInputType
           loading={!inputToken}
           onChange={onInput}
@@ -109,8 +117,8 @@ export const MarketSwapPanel: FC<MarketSwapPanelProps> = ({ market, isPt }) => {
             currency={outputToken}
             disableMaxButton
             disabled
-            includeHotTokens={false}
-            includeNative={false}
+            includeHotTokens
+            includeNative
             isInputType={false}
             loading={!outputToken}
             onChange={onOutput}
@@ -130,15 +138,7 @@ export const MarketSwapPanel: FC<MarketSwapPanelProps> = ({ market, isPt }) => {
                 <Checker.Network chainId={market.chainId} fullWidth size="md">
                   <MarketSwapReviewModal chainId={market.chainId} market={market} onSuccess={onSuccess}>
                     {({ isWritePending, setOpen }) => {
-                      return (
-                        <Button disabled={isWritePending} fullWidth onClick={() => setOpen(true)} size="md">
-                          {
-                            isWritePending
-                              ? <Dots><Trans>Confirm transaction</Trans></Dots>
-                              : <Trans>Swap</Trans>
-                          }
-                        </Button>
-                      )
+                      return <SwapButton isWritePending={isWritePending} setOpen={setOpen} />
                     }}
                   </MarketSwapReviewModal>
                 </Checker.Network>
@@ -150,3 +150,49 @@ export const MarketSwapPanel: FC<MarketSwapPanelProps> = ({ market, isPt }) => {
     </TradeProvider>
   )
 }
+
+const SwapButton: FC<{
+  isWritePending: boolean
+  setOpen: (open: boolean) => void
+}> = ({ isWritePending, setOpen }) => {
+  const { isLoading: isLoadingTrade, trade, isSyncing } = useTrade()
+  const [{ slippageTolerance }] = useSettings()
+  const swapSlippage = useMemo(
+    () => (slippageTolerance ? new Percent(slippageTolerance * 100, 10_000) : SWAP_DEFAULT_SLIPPAGE),
+    [slippageTolerance],
+  )
+
+  const onClick = useCallback(() => {
+    setOpen(true)
+  }, [setOpen])
+
+  return (
+    <Checker.Custom
+      guard={(
+        <Button disabled fullWidth size="md">
+          <Trans>No trade found</Trans>
+        </Button>
+      )}
+      showGuardIfTrue={!trade && !isLoadingTrade && !isSyncing}
+    >
+      <Button
+        disabled={
+          isWritePending
+          || trade?.minimumAmountOut(swapSlippage)?.equalTo(ZERO)
+          || Boolean(!trade)
+        }
+        fullWidth
+        onClick={onClick}
+        size="md"
+      >
+        {
+          isLoadingTrade
+            ? <Trans>Finding Best Price</Trans>
+            : isWritePending
+              ? <Dots><Trans>Confirm transaction</Trans></Dots>
+              : <Trans>Swap</Trans>
+        }
+      </Button>
+    </Checker.Custom>
+  )
+}