From 4b2e47f300eb161e1da95ac73be2e669fae0f213 Mon Sep 17 00:00:00 2001
From: 0xMasayoshi <0xMasayoshi@protonmail.com>
Date: Mon, 11 Nov 2024 03:18:29 +0700
Subject: [PATCH] feat: ZapInfoCard

---
 .../(evm)/[chainId]/pool/v2/add/page.tsx      |   6 +
 .../src/ui/pool/SmartPoolLiquidityWidget.tsx  |   2 +-
 .../Add/SteerPositionZap.tsx                  |  13 +-
 .../SteerStrategies/SteerBaseStrategy.tsx     |   2 +-
 apps/web/src/ui/pool/ZapInfoCard.tsx          |  85 ++++++++
 apps/web/src/ui/pool/ZapRouteDialog.tsx       | 184 ++++++++++++++++++
 apps/web/src/ui/pool/ZapSectionLegacy.tsx     |  80 ++++----
 7 files changed, 334 insertions(+), 38 deletions(-)
 create mode 100644 apps/web/src/ui/pool/ZapInfoCard.tsx
 create mode 100644 apps/web/src/ui/pool/ZapRouteDialog.tsx

diff --git a/apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/add/page.tsx b/apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/add/page.tsx
index c4d729383c..79fa60f9ed 100644
--- a/apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/add/page.tsx
+++ b/apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/add/page.tsx
@@ -32,6 +32,7 @@ import { AddSectionReviewModalLegacy } from 'src/ui/pool/AddSectionReviewModalLe
 import { SelectNetworkWidget } from 'src/ui/pool/SelectNetworkWidget'
 import { SelectTokensWidget } from 'src/ui/pool/SelectTokensWidget'
 import { ToggleZapCard } from 'src/ui/pool/ToggleZapCard'
+import { ZapInfoCard } from 'src/ui/pool/ZapInfoCard'
 import { ChainId, ChainKey, TESTNET_CHAIN_IDS } from 'sushi/chain'
 import {
   SUSHISWAP_V2_ROUTER_ADDRESS,
@@ -317,6 +318,11 @@ const ZapWidget: FC<ZapWidgetProps> = ({ chainId, pool, poolState, title }) => {
           </Checker.Network>
         </Checker.Connect>
       </CheckerProvider>
+      <ZapInfoCard
+        zapResponse={zapResponse}
+        inputCurrency={inputCurrency}
+        pool={pool}
+      />
     </>
   )
 }
diff --git a/apps/web/src/ui/pool/SmartPoolLiquidityWidget.tsx b/apps/web/src/ui/pool/SmartPoolLiquidityWidget.tsx
index a3dc5e9af0..e31dead651 100644
--- a/apps/web/src/ui/pool/SmartPoolLiquidityWidget.tsx
+++ b/apps/web/src/ui/pool/SmartPoolLiquidityWidget.tsx
@@ -60,7 +60,7 @@ export const SmartPoolLiquidityWidget: FC<SmartPoolLiquidityWidgetProps> = ({
         <ToggleZapCard checked={useZap} onCheckedChange={setUseZap} />
       ) : null}
       {useZap ? (
-        <SteerPositionZap vault={vault} />
+        <SteerPositionZap vault={vault} tokenRatios={tokenRatios} />
       ) : (
         <SteerPositionAddProvider>
           <SteerPositionAdd vault={vault} />
diff --git a/apps/web/src/ui/pool/Steer/SteerLiquidityManagement/Add/SteerPositionZap.tsx b/apps/web/src/ui/pool/Steer/SteerLiquidityManagement/Add/SteerPositionZap.tsx
index 22fe43f028..cc67a1632b 100644
--- a/apps/web/src/ui/pool/Steer/SteerLiquidityManagement/Add/SteerPositionZap.tsx
+++ b/apps/web/src/ui/pool/Steer/SteerLiquidityManagement/Add/SteerPositionZap.tsx
@@ -8,15 +8,20 @@ import { useZap } from 'src/lib/hooks'
 import { Web3Input } from 'src/lib/wagmi/components/web3-input'
 import { Checker } from 'src/lib/wagmi/systems/Checker'
 import { CheckerProvider } from 'src/lib/wagmi/systems/Checker/Provider'
+import { ZapInfoCard } from 'src/ui/pool/ZapInfoCard'
 import { defaultCurrency, isWNativeSupported } from 'sushi/config'
 import { Amount, Type, tryParseAmount } from 'sushi/currency'
 import { useAccount, useEstimateGas, useSendTransaction } from 'wagmi'
 
 interface SteerPositionAddProps {
   vault: VaultV1
+  tokenRatios?: { token0: number; token1: number }
 }
 
-export const SteerPositionZap: FC<SteerPositionAddProps> = ({ vault }) => {
+export const SteerPositionZap: FC<SteerPositionAddProps> = ({
+  vault,
+  tokenRatios,
+}) => {
   const { address } = useAccount()
 
   const [inputAmount, setInputAmount] = useState('')
@@ -117,6 +122,12 @@ export const SteerPositionZap: FC<SteerPositionAddProps> = ({ vault }) => {
           </Checker.Connect>
         </Checker.Guard>
       </CheckerProvider>
+      <ZapInfoCard
+        zapResponse={zapResponse}
+        inputCurrency={inputCurrency}
+        pool={vault}
+        tokenRatios={tokenRatios}
+      />
     </div>
   )
 }
diff --git a/apps/web/src/ui/pool/Steer/SteerStrategies/SteerBaseStrategy.tsx b/apps/web/src/ui/pool/Steer/SteerStrategies/SteerBaseStrategy.tsx
index 45b52f3ee9..5ae3845ac5 100644
--- a/apps/web/src/ui/pool/Steer/SteerStrategies/SteerBaseStrategy.tsx
+++ b/apps/web/src/ui/pool/Steer/SteerStrategies/SteerBaseStrategy.tsx
@@ -95,7 +95,7 @@ export const SteerBaseStrategy: SteerStrategyComponent = ({
                   <ToggleZapCard checked={useZap} onCheckedChange={setUseZap} />
                 ) : null}
                 {useZap ? (
-                  <SteerPositionZap vault={vault} />
+                  <SteerPositionZap vault={vault} tokenRatios={tokenRatios} />
                 ) : (
                   <SteerPositionAddProvider>
                     <SteerPositionAdd vault={vault} />
diff --git a/apps/web/src/ui/pool/ZapInfoCard.tsx b/apps/web/src/ui/pool/ZapInfoCard.tsx
new file mode 100644
index 0000000000..d3999aec89
--- /dev/null
+++ b/apps/web/src/ui/pool/ZapInfoCard.tsx
@@ -0,0 +1,85 @@
+import { SteerVault } from '@sushiswap/steer-sdk'
+import {
+  Card,
+  CardContent,
+  Collapsible,
+  SkeletonBox,
+  SkeletonText,
+  classNames,
+} from '@sushiswap/ui'
+import { FC, useMemo } from 'react'
+import { ZapResponse } from 'src/lib/hooks'
+import {
+  warningSeverity,
+  warningSeverityClassName,
+} from 'src/lib/swap/warningSeverity'
+import { Type } from 'sushi/currency'
+import { Percent, ZERO } from 'sushi/math'
+import { SushiSwapV2Pool } from 'sushi/pool'
+import { ZapRouteDialog } from './ZapRouteDialog'
+
+interface ZapInfoCardProps {
+  zapResponse?: ZapResponse
+  inputCurrency: Type
+  pool: SushiSwapV2Pool | SteerVault | null
+  tokenRatios?: { token0: number; token1: number }
+}
+
+export const ZapInfoCard: FC<ZapInfoCardProps> = ({
+  zapResponse,
+  inputCurrency,
+  pool,
+  tokenRatios,
+}) => {
+  const priceImpact = useMemo(
+    () =>
+      typeof zapResponse?.priceImpact === 'number'
+        ? new Percent(zapResponse.priceImpact, 10_000)
+        : undefined,
+    [zapResponse],
+  )
+
+  return (
+    <Collapsible open={Boolean(zapResponse)}>
+      <Card variant="outline">
+        <CardContent className="!pt-3 !pb-3 !px-5">
+          <div className="flex justify-between items-center gap-2">
+            <span className="font-medium">Price impact</span>
+            <span
+              className={classNames(
+                warningSeverityClassName(warningSeverity(priceImpact)),
+                'text-sm font-medium text-right',
+              )}
+            >
+              {!priceImpact ? (
+                <SkeletonBox className="h-4 py-0.5 w-[40px]" />
+              ) : priceImpact ? (
+                `${
+                  priceImpact?.lessThan(ZERO)
+                    ? '+'
+                    : priceImpact?.greaterThan(ZERO)
+                      ? '-'
+                      : ''
+                }${Math.abs(Number(priceImpact?.toFixed(2)))}%`
+              ) : null}
+            </span>
+          </div>
+          <div className="flex justify-between items-center gap-2">
+            <span className="font-medium">Route</span>
+            {pool ? (
+              <ZapRouteDialog
+                inputCurrency={inputCurrency}
+                pool={pool}
+                tokenRatios={tokenRatios}
+              >
+                <span className="underline font-medium">View Route</span>
+              </ZapRouteDialog>
+            ) : (
+              <SkeletonText />
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </Collapsible>
+  )
+}
diff --git a/apps/web/src/ui/pool/ZapRouteDialog.tsx b/apps/web/src/ui/pool/ZapRouteDialog.tsx
new file mode 100644
index 0000000000..b2841ee43e
--- /dev/null
+++ b/apps/web/src/ui/pool/ZapRouteDialog.tsx
@@ -0,0 +1,184 @@
+import { SteerVault } from '@sushiswap/steer-sdk'
+import {
+  Currency,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@sushiswap/ui'
+import { FC, ReactNode, useMemo } from 'react'
+import { Token, Type } from 'sushi/currency'
+import { formatPercent } from 'sushi/format'
+import { SushiSwapV2Pool } from 'sushi/pool'
+
+interface ZapRouteDialogProps {
+  children: ReactNode
+  inputCurrency: Type
+  pool: SushiSwapV2Pool | SteerVault
+  tokenRatios?: { token0: number; token1: number }
+}
+
+export const ZapRouteDialog: FC<ZapRouteDialogProps> = ({
+  children,
+  inputCurrency,
+  pool,
+  tokenRatios,
+}) => {
+  const [token0, token1] = useMemo(
+    () => [
+      pool.token0 instanceof Token ? pool.token0 : new Token(pool.token0),
+      pool.token1 instanceof Token ? pool.token1 : new Token(pool.token1),
+    ],
+    [pool],
+  )
+
+  return (
+    <Dialog>
+      <DialogTrigger>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Route</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3">
+          <span className="text-sm text-muted-foreground">Split & Swap</span>
+          <div className="bg-secondary rounded-xl flex flex-col gap-1">
+            <div className="px-5 py-2 grid grid-cols-3 gap-3 items-center">
+              <div className="flex items-center gap-1">
+                <Currency.Icon
+                  disableLink
+                  currency={inputCurrency}
+                  width={16}
+                  height={16}
+                />
+                <span className="text-sm font-semibold truncate">
+                  {inputCurrency.symbol}
+                </span>
+              </div>
+              <div className="flex flex-col items-center">
+                <div className="text-sm font-medium truncate">
+                  {pool instanceof SushiSwapV2Pool
+                    ? '50%'
+                    : tokenRatios
+                      ? `${formatPercent(tokenRatios.token0)}`
+                      : '-%'}
+                </div>
+                <span className="text-[10px] font-medium text-muted-foreground truncate">
+                  SushiSwap
+                </span>
+              </div>
+              <div className="flex items-center justify-end gap-1">
+                <Currency.Icon
+                  disableLink
+                  currency={token0}
+                  width={16}
+                  height={16}
+                />
+                <span className="text-sm font-semibold truncate">
+                  {token0.symbol}
+                </span>
+              </div>
+            </div>
+            <div className="px-5 py-2 grid grid-cols-3 gap-3 items-center">
+              <div className="flex items-center gap-1">
+                <Currency.Icon
+                  disableLink
+                  currency={inputCurrency}
+                  width={16}
+                  height={16}
+                />
+                <span className="text-sm font-semibold truncate">
+                  {inputCurrency.symbol}
+                </span>
+              </div>
+              <div className="flex flex-col items-center">
+                <div className="text-sm font-medium truncate">
+                  {pool instanceof SushiSwapV2Pool
+                    ? '50%'
+                    : tokenRatios
+                      ? `${formatPercent(tokenRatios.token1)}`
+                      : '-%'}
+                </div>
+                <span className="text-[10px] font-medium text-muted-foreground truncate">
+                  SushiSwap
+                </span>
+              </div>
+              <div className="flex items-center justify-end gap-1">
+                <Currency.Icon
+                  disableLink
+                  currency={token1}
+                  width={16}
+                  height={16}
+                />
+                <span className="text-sm font-semibold truncate">
+                  {token1.symbol}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          <span className="text-sm text-muted-foreground">Add Liquidity</span>
+          <div className="bg-secondary rounded-xl flex flex-col gap-1">
+            <div className="px-5 py-2 grid grid-cols-3 gap-3 items-center">
+              <div className="flex flex-col gap-0.5">
+                <div className="flex items-center gap-1">
+                  <Currency.Icon
+                    disableLink
+                    currency={token0}
+                    width={16}
+                    height={16}
+                  />
+                  <span className="text-sm font-semibold truncate">
+                    {token0.symbol}
+                  </span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Currency.Icon
+                    disableLink
+                    currency={token1}
+                    width={16}
+                    height={16}
+                  />
+                  <span className="text-sm font-semibold truncate">
+                    {token1.symbol}
+                  </span>
+                </div>
+              </div>
+              <div className="flex flex-col items-center">
+                <div className="text-sm font-medium truncate">100%</div>
+                <span className="text-[10px] font-medium text-muted-foreground truncate">
+                  Deposit to{' '}
+                  {pool instanceof SushiSwapV2Pool ? 'SushiSwap V2' : 'Steer'}
+                </span>
+              </div>
+              <div className="flex items-center justify-end gap-1">
+                <span className="inline-flex items-center">
+                  <Currency.Icon
+                    disableLink
+                    currency={token0}
+                    width={16}
+                    height={16}
+                  />
+                  <div className="-ml-1 inline-flex">
+                    <Currency.Icon
+                      disableLink
+                      currency={token1}
+                      width={16}
+                      height={16}
+                    />
+                  </div>
+                </span>
+                <span className="text-sm font-semibold truncate">
+                  {pool instanceof SushiSwapV2Pool ? 'SLP' : 'Steer LP'}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/web/src/ui/pool/ZapSectionLegacy.tsx b/apps/web/src/ui/pool/ZapSectionLegacy.tsx
index ed1da0733e..79a1749ffa 100644
--- a/apps/web/src/ui/pool/ZapSectionLegacy.tsx
+++ b/apps/web/src/ui/pool/ZapSectionLegacy.tsx
@@ -31,6 +31,7 @@ import { SushiSwapV2Pool } from 'sushi/pool'
 import { useAccount, useEstimateGas, useSendTransaction } from 'wagmi'
 import { useZap } from '../../lib/hooks'
 import { ToggleZapCard } from './ToggleZapCard'
+import { ZapInfoCard } from './ZapInfoCard'
 
 interface ZapSectionLegacyProps {
   chainId: SushiSwapV2ChainId
@@ -134,44 +135,53 @@ export const ZapSectionLegacy: FC<ZapSectionLegacyProps> = ({
         allowNative={isWNativeSupported(chainId)}
       />
       <WidgetFooter>
-        <CheckerProvider>
-          <Checker.Connect fullWidth>
-            <Checker.Network fullWidth chainId={chainId}>
-              <Checker.Amounts
-                fullWidth
-                chainId={chainId}
-                amount={parsedInputAmount}
-              >
-                <Checker.ApproveERC20
-                  id="approve-token"
-                  className="whitespace-nowrap"
+        <div className="flex flex-col gap-4 w-full">
+          <CheckerProvider>
+            <Checker.Connect fullWidth>
+              <Checker.Network fullWidth chainId={chainId}>
+                <Checker.Amounts
                   fullWidth
+                  chainId={chainId}
                   amount={parsedInputAmount}
-                  contract={zapResponse?.tx.to}
                 >
-                  <Checker.Success tag={APPROVE_TAG_ZAP_LEGACY}>
-                    <Button
-                      size="xl"
-                      fullWidth
-                      testId="zap-liquidity"
-                      onClick={() => preparedTx && sendTransaction(preparedTx)}
-                      loading={!preparedTx || isWritePending}
-                      disabled={isZapError || isEstGasError}
-                    >
-                      {isZapError || isEstGasError ? (
-                        'Shoot! Something went wrong :('
-                      ) : isWritePending ? (
-                        <Dots>Add Liquidity</Dots>
-                      ) : (
-                        'Add Liquidity'
-                      )}
-                    </Button>
-                  </Checker.Success>
-                </Checker.ApproveERC20>
-              </Checker.Amounts>
-            </Checker.Network>
-          </Checker.Connect>
-        </CheckerProvider>
+                  <Checker.ApproveERC20
+                    id="approve-token"
+                    className="whitespace-nowrap"
+                    fullWidth
+                    amount={parsedInputAmount}
+                    contract={zapResponse?.tx.to}
+                  >
+                    <Checker.Success tag={APPROVE_TAG_ZAP_LEGACY}>
+                      <Button
+                        size="xl"
+                        fullWidth
+                        testId="zap-liquidity"
+                        onClick={() =>
+                          preparedTx && sendTransaction(preparedTx)
+                        }
+                        loading={!preparedTx || isWritePending}
+                        disabled={isZapError || isEstGasError}
+                      >
+                        {isZapError || isEstGasError ? (
+                          'Shoot! Something went wrong :('
+                        ) : isWritePending ? (
+                          <Dots>Add Liquidity</Dots>
+                        ) : (
+                          'Add Liquidity'
+                        )}
+                      </Button>
+                    </Checker.Success>
+                  </Checker.ApproveERC20>
+                </Checker.Amounts>
+              </Checker.Network>
+            </Checker.Connect>
+          </CheckerProvider>
+          <ZapInfoCard
+            zapResponse={zapResponse}
+            inputCurrency={inputCurrency}
+            pool={pool}
+          />
+        </div>
       </WidgetFooter>
     </Widget>
   )