feat(market): maket lp rewards (#253)

* feat(market): maket lp rewards * wip: vdot * wip: ui
zenlinkpro · May 22, 2024 · f469f68 · f469f68
1 parent 6444335
commit f469f68
Show file tree

Hide file tree

Showing 19 changed files with 407 additions and 67 deletions.
diff --git a/apps/gauge/components/GaugesChart/VotePercentChart.tsx b/apps/gauge/components/GaugesChart/VotePercentChart.tsx
@@ -18,6 +18,8 @@ const COLORS = [
   '#6BDF9EFF',
   '#F3E500FF',
   '#FF733EFF',
+  '#FF669DFF',
+  '#FFF176FF',
 ]
 
 export const VotePercentChart: FC = () => {
@@ -36,7 +38,7 @@ export const VotePercentChart: FC = () => {
       return []
 
     const sortedGauges = gauges.sort(
-      (a, b) => a.communityVotedPercentage.greaterThan(b.communityVotedPercentage) ? 1 : -1,
+      (a, b) => a.communityVotedPercentage.greaterThan(b.communityVotedPercentage) ? -1 : 1,
     )
     const topGauges = sortedGauges.slice(0, 7)
     const otherGauges = sortedGauges.slice(7)
@@ -64,8 +66,8 @@ export const VotePercentChart: FC = () => {
       .sort(
         (a, b) => (voteInputMap[a.id] || votedPercentMap[a.id])
           .greaterThan((voteInputMap[b.id] || votedPercentMap[b.id]))
-          ? 1
-          : -1,
+          ? -1
+          : 1,
       )
     const topGauges = sortedGauges.slice(0, 7)
     const otherGauges = sortedGauges.slice(7)

diff --git a/apps/gauge/pages/index.tsx b/apps/gauge/pages/index.tsx
@@ -26,13 +26,13 @@ function Gauge() {
             </div>
           </div>
         </section>
-        <div className="flex flex-col lg:grid lg:grid-cols-[690px_auto] gap-16">
+        <div className="flex flex-col lg:grid lg:grid-cols-[720px_auto] gap-16">
           <GaugeVotesProvider>
             <div className="flex flex-col order-1 gap-9">
               <GaugesSection />
             </div>
             <div className="flex flex-col order-2 gap-4">
-              <div className="p-6 rounded-xl border border-slate-500/20">
+              <div className="p-6 rounded-xl border border-slate-500/50 bg-white/50 dark:bg-slate-700/50">
                 <GaugesChart />
               </div>
             </div>

diff --git a/apps/gauge/pages/lock.tsx b/apps/gauge/pages/lock.tsx
@@ -26,40 +26,40 @@ function Lock() {
   return (
     <SWRConfig>
       <Layout breadcrumbs={LINKS}>
-        <Widget className="!bg-transparent border-transparent" id="Lock" maxWidth={440}>
-          <Widget.Content>
-            <Tab.Group>
-              <div className="flex max-w-sm justify-center mb-4 mx-auto">
-                <Tab.List className="flex w-3/5 space-x-1 rounded-full bg-blue-900/20 p-1">
-                  <Tab className={({ selected }) =>
-                    classNames(
-                      selected ? TAB_SELECTED_CLASS : TAB_NOT_SELECTED_CLASS,
-                      TAB_DEFAULT_CLASS,
-                    )}
-                  >
-                    <Trans>Lock</Trans>
-                  </Tab>
-                  <Tab className={({ selected }) =>
-                    classNames(
-                      selected ? TAB_SELECTED_CLASS : TAB_NOT_SELECTED_CLASS,
-                      TAB_DEFAULT_CLASS,
-                    )}
-                  >
-                    <Trans>Redeem</Trans>
-                  </Tab>
-                </Tab.List>
-              </div>
-              <Tab.Panels>
-                <Tab.Panel unmount={false}>
-                  <LockPanel />
-                </Tab.Panel>
-                <Tab.Panel unmount={false}>
-                  <RedeemPanel />
-                </Tab.Panel>
-              </Tab.Panels>
-            </Tab.Group>
-          </Widget.Content>
-        </Widget>
+        <Tab.Group>
+          <div className="flex flex-col items-center gap-5">
+            <Tab.List className="flex w-48 space-x-2 rounded-full bg-blue-900/20 p-1">
+              <Tab className={({ selected }) =>
+                classNames(
+                  selected ? TAB_SELECTED_CLASS : TAB_NOT_SELECTED_CLASS,
+                  TAB_DEFAULT_CLASS,
+                )}
+              >
+                <Trans>Lock</Trans>
+              </Tab>
+              <Tab className={({ selected }) =>
+                classNames(
+                  selected ? TAB_SELECTED_CLASS : TAB_NOT_SELECTED_CLASS,
+                  TAB_DEFAULT_CLASS,
+                )}
+              >
+                <Trans>Redeem</Trans>
+              </Tab>
+            </Tab.List>
+            <Widget className="bg-white/50 dark:bg-slate-700/50 p-6" id="Lock" maxWidth={440}>
+              <Widget.Content>
+                <Tab.Panels>
+                  <Tab.Panel unmount={false}>
+                    <LockPanel />
+                  </Tab.Panel>
+                  <Tab.Panel unmount={false}>
+                    <RedeemPanel />
+                  </Tab.Panel>
+                </Tab.Panels>
+              </Widget.Content>
+            </Widget>
+          </div>
+        </Tab.Group>
       </Layout>
     </SWRConfig>
   )
@@ -111,7 +111,7 @@ function LockPanel() {
   })
 
   return (
-    <div className="flex flex-col bg-white/50 dark:bg-slate-700/50 rounded-t-2xl px-6 py-4 gap-6">
+    <div className="flex flex-col gap-6">
       <div className="flex flex-col items-center">
         <Typography className="text-slate-800 dark:text-slate-200" variant="xl" weight={600}>
           <Trans>Update your Lock</Trans>
@@ -249,7 +249,7 @@ function RedeemPanel() {
   })
 
   return (
-    <div className="flex flex-col bg-white/50 dark:bg-slate-700/50 rounded-t-2xl px-6 py-4 gap-6">
+    <div className="flex flex-col gap-6">
       <div className="flex flex-col items-center">
         <Typography className="text-slate-800 dark:text-slate-200 mb-8" variant="xl" weight={600}>
           <Trans>Redeem Unlocked ZLK</Trans>
@@ -280,20 +280,20 @@ function RedeemPanel() {
         </div>
       </div>
       <Checker.Connected chainId={ParachainId.MOONBEAM} fullWidth size="md">
-          <Checker.Network chainId={ParachainId.MOONBEAM} fullWidth size="md">
-            <Button
-              disabled={!sendTransaction || isWritePending}
-              fullWidth
-              onClick={() => sendTransaction?.()}
-              size="md"
-            >
-              {
-                isWritePending
-                  ? <Dots><Trans>Confirm</Trans></Dots>
-                  : <Trans>Confirm</Trans>
-              }
-            </Button>
-          </Checker.Network>
+        <Checker.Network chainId={ParachainId.MOONBEAM} fullWidth size="md">
+          <Button
+            disabled={!sendTransaction || isWritePending}
+            fullWidth
+            onClick={() => sendTransaction?.()}
+            size="md"
+          >
+            {
+              isWritePending
+                ? <Dots><Trans>Confirm</Trans></Dots>
+                : <Trans>Confirm</Trans>
+            }
+          </Button>
+        </Checker.Network>
       </Checker.Connected>
     </div>
   )

diff --git a/apps/market/components/MarketSection/MarketActions/MarketAdd/MarketAddManualReviewModal.tsx b/apps/market/components/MarketSection/MarketActions/MarketAdd/MarketAddManualReviewModal.tsx
@@ -78,7 +78,7 @@ export const MarketAddManualReviewModal: FC<MarketAddManualReviewModalProps> = (
             onSuccess={createNotification}
             render={({ approved }) => {
               return (
-                <Button disabled={!approved || isWritePending} fullWidth onClick={() => sendTransaction?.()} size="md">
+                <Button className="mt-2" disabled={!approved || isWritePending} fullWidth onClick={() => sendTransaction?.()} size="md">
                   {isWritePending ? <Dots><Trans>Confirm transaction</Trans></Dots> : <Trans>Add</Trans>}
                 </Button>
               )

diff --git a/...rket/components/MarketSection/MarketActions/MarketMintAndRedeem/MarketMintReviewModal.tsx b/...rket/components/MarketSection/MarketActions/MarketMintAndRedeem/MarketMintReviewModal.tsx
@@ -63,7 +63,7 @@ export const MarketMintReviewModal: FC<MarketMintReviewModalProps> = ({
             onSuccess={createNotification}
             render={({ approved }) => {
               return (
-                <Button disabled={!approved || isWritePending} fullWidth onClick={() => sendTransaction?.()} size="md">
+                <Button className="mt-2" disabled={!approved || isWritePending} fullWidth onClick={() => sendTransaction?.()} size="md">
                   {isWritePending ? <Dots><Trans>Confirm transaction</Trans></Dots> : <Trans>Mint</Trans>}
                 </Button>
               )

diff --git a/...et/components/MarketSection/MarketActions/MarketMintAndRedeem/MarketRedeemReviewModal.tsx b/...et/components/MarketSection/MarketActions/MarketMintAndRedeem/MarketRedeemReviewModal.tsx
@@ -74,7 +74,7 @@ export const MarketRedeemReviewModal: FC<MarketRedeemReviewModalProps> = ({
             onSuccess={createNotification}
             render={({ approved }) => {
               return (
-                <Button disabled={!approved || isWritePending} fullWidth onClick={() => sendTransaction?.()} size="md">
+                <Button className="mt-2" disabled={!approved || isWritePending} fullWidth onClick={() => sendTransaction?.()} size="md">
                   {isWritePending ? <Dots><Trans>Confirm transaction</Trans></Dots> : <Trans>Redeem</Trans>}
                 </Button>
               )

diff --git a/...ket/components/MarketSection/MarketActions/MarketRemove/MarketRemoveManualReviewModal.tsx b/...ket/components/MarketSection/MarketActions/MarketRemove/MarketRemoveManualReviewModal.tsx
@@ -69,7 +69,7 @@ export const MarketRemoveManualReviewModal: FC<MarketRemoveManualModalProps> = (
             onSuccess={createNotification}
             render={({ approved }) => {
               return (
-                <Button disabled={!approved || isWritePending} fullWidth onClick={() => sendTransaction?.()} size="md">
+                <Button className="mt-2" disabled={!approved || isWritePending} fullWidth onClick={() => sendTransaction?.()} size="md">
                   {isWritePending ? <Dots><Trans>Confirm transaction</Trans></Dots> : <Trans>Remove</Trans>}
                 </Button>
               )

diff --git a/apps/market/components/MarketSection/MarketActions/MarketSwap/CurrencyInput.tsx b/apps/market/components/MarketSection/MarketActions/MarketSwap/CurrencyInput.tsx
@@ -32,6 +32,7 @@ export const CurrencyInput: FC<_CurrencyInputProps> = ({
   chainId,
   disabled,
   includeNative = false,
+  includeHotTokens = false,
   loading = false,
   isInputType,
 }) => {
@@ -60,6 +61,7 @@ export const CurrencyInput: FC<_CurrencyInputProps> = ({
       disableMaxButton={disableMaxButton}
       disabled={disabled}
       displayValue={displayValue}
+      includeHotTokens={includeHotTokens}
       includeNative={includeNative}
       loading={loading}
       onAddToken={onAddToken}

diff --git a/apps/market/components/MarketSection/MarketRewards/MarketLPRewards.tsx b/apps/market/components/MarketSection/MarketRewards/MarketLPRewards.tsx
@@ -0,0 +1,63 @@
+import { Trans } from '@lingui/macro'
+import type { Amount, Token } from '@zenlink-interface/currency'
+import { Currency, Typography } from '@zenlink-interface/ui'
+import { type FC, useMemo } from 'react'
+
+interface MarketLPRewardsProps {
+  isLoading: boolean
+  isError: boolean
+  data: Amount<Token>[] | undefined
+}
+
+export const MarketLPRewards: FC<MarketLPRewardsProps> = ({ data, isLoading, isError }) => {
+  const rewards = useMemo(() => {
+    if (!data)
+      return []
+    return data.filter(reward => reward.greaterThan(0))
+  }, [data])
+
+  if (isLoading && !isError) {
+    return (
+      <div className="flex flex-col gap-3 px-5 py-4">
+        <div className="flex justify-between mb-1 py-0.5">
+          <div className="h-[16px] bg-slate-300 dark:bg-slate-700 animate-pulse w-[100px] rounded-full" />
+          <div className="h-[16px] bg-slate-300 dark:bg-slate-700 animate-pulse w-[60px] rounded-full" />
+        </div>
+        <div className="flex justify-between py-0.5">
+          <div className="h-[16px] bg-slate-300 dark:bg-slate-700 animate-pulse w-[160px] rounded-full" />
+          <div className="h-[16px] bg-slate-300 dark:bg-slate-700 animate-pulse w-[60px] rounded-full" />
+        </div>
+        <div className="flex justify-between py-0.5">
+          <div className="h-[16px] bg-slate-300 dark:bg-slate-700 animate-pulse w-[160px] rounded-full" />
+          <div className="h-[16px] bg-slate-300 dark:bg-slate-700 animate-pulse w-[60px] rounded-full" />
+        </div>
+      </div>
+    )
+  }
+
+  if (!isLoading && !isError && rewards.length) {
+    return (
+      <div className="flex flex-col gap-3 px-5 py-4">
+        <div className="flex items-center justify-between">
+          <Typography className="text-slate-900 dark:text-slate-50 text-sm leading-5" weight={600}>
+            <Trans>
+              Market LP Rewards
+            </Trans>
+          </Typography>
+        </div>
+        {rewards.map(reward => (
+          <div className="flex items-center justify-between" key={reward.currency.wrapped.address}>
+            <div className="flex items-center gap-2">
+              <Currency.Icon currency={reward.currency} height={20} width={20} />
+              <Typography className="text-slate-700 dark:text-slate-300" variant="sm" weight={600}>
+                {reward?.toSignificant(6)} {reward.currency.symbol}
+              </Typography>
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return <></>
+}
diff --git a/apps/market/components/MarketSection/MarketRewards/MarketRewards.tsx b/apps/market/components/MarketSection/MarketRewards/MarketRewards.tsx
@@ -1,21 +1,28 @@
 import { Trans } from '@lingui/macro'
 import type { Market } from '@zenlink-interface/market'
 import { Button, Dots, Typography } from '@zenlink-interface/ui'
-import { useYtInterestAndRewards } from '@zenlink-interface/wagmi'
+import { useMarketRewards, useYtInterestAndRewards } from '@zenlink-interface/wagmi'
 import type { FC } from 'react'
 import { YtInterestAndRewards } from './YtInterestAndRewards'
 import { MarketRewardsReviewModal } from './MarketRewardsReviewModal'
+import { MarketLPRewards } from './MarketLPRewards'
 
 interface MarketRewardsProps {
   market: Market
 }
 
 export const MarketRewards: FC<MarketRewardsProps> = ({ market }) => {
   const {
-    data,
+    data: ytData,
     isLoading: isYtLoading,
     isError: isYtError,
-  } = useYtInterestAndRewards(market.chainId, [market], { enabled: true })
+  } = useYtInterestAndRewards(market.chainId, [market])
+
+  const {
+    data: lpRewardsData,
+    isLoading: isLpRewardsLoading,
+    isError: isLpRewardsError,
+  } = useMarketRewards(market.chainId, [market])
 
   return (
     <div className="flex flex-col shadow-sm border border-slate-500/20 bg-white/50 dark:bg-slate-700/50 rounded-2xl shadow-white/30 dark:shadow-black/30">
@@ -25,7 +32,8 @@ export const MarketRewards: FC<MarketRewardsProps> = ({ market }) => {
         </Typography>
         <MarketRewardsReviewModal
           chainId={market.chainId}
-          ytData={data?.[0]}
+          lpRewardsMarkets={[market]}
+          ytData={ytData?.[0]}
         >
           {({ isWritePending, setOpen }) => (
             <Button disabled={isWritePending} onClick={() => setOpen(true)} size="xs">
@@ -34,7 +42,8 @@ export const MarketRewards: FC<MarketRewardsProps> = ({ market }) => {
           )}
         </MarketRewardsReviewModal>
       </div>
-      <YtInterestAndRewards data={data?.[0]} isError={isYtError} isLoading={isYtLoading} />
+      <YtInterestAndRewards data={ytData?.[0]} isError={isYtError} isLoading={isYtLoading} />
+      <MarketLPRewards data={lpRewardsData?.[0]} isError={isLpRewardsError} isLoading={isLpRewardsLoading} />
     </div>
   )
 }
diff --git a/apps/market/components/MarketSection/MarketRewards/MarketRewardsReviewModal.tsx b/apps/market/components/MarketSection/MarketRewards/MarketRewardsReviewModal.tsx
@@ -3,25 +3,29 @@ import { Button, Dialog, Dots } from '@zenlink-interface/ui'
 import type { YtInterestAndRewardsResult } from '@zenlink-interface/wagmi'
 import { useRedeemRewardsReview } from '@zenlink-interface/wagmi'
 import { type FC, type ReactNode, useMemo, useState } from 'react'
+import type { Market } from '@zenlink-interface/market'
 import { YtInterestAndRewards } from './YtInterestAndRewards'
 
 interface MarketRewardsReviewModalProps {
   chainId: number
   ytData: YtInterestAndRewardsResult | undefined
+  lpRewardsMarkets: Market[] | undefined
   children: ({ isWritePending, setOpen }: { isWritePending: boolean, setOpen: (open: boolean) => void }) => ReactNode
 }
 
 export const MarketRewardsReviewModal: FC<MarketRewardsReviewModalProps> = ({
   chainId,
   ytData,
+  lpRewardsMarkets,
   children,
 }) => {
   const [open, setOpen] = useState(false)
 
-  const { isWritePending, sendTransaction, routerAddress } = useRedeemRewardsReview({
+  const { isWritePending, sendTransaction } = useRedeemRewardsReview({
     chainId,
     setOpen,
     yts: useMemo(() => ytData && [ytData.market.YT], [ytData]),
+    markets: useMemo(() => lpRewardsMarkets, [lpRewardsMarkets]),
   })
 
   return (

diff --git a/apps/market/components/MarketsSection/Tables/MarketsTable/Cells/columns.tsx b/apps/market/components/MarketsSection/Tables/MarketsTable/Cells/columns.tsx
@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/macro'
 import type { ColumnDef } from '@tanstack/react-table'
 import type { Market } from '@zenlink-interface/market'
+import { JSBI } from '@zenlink-interface/math'
 import { MarketTVLCell } from './MarketTVLCell'
 import { MarketNameCell } from './MarketNameCell'
 import { MarketMaturityCell } from './MarketMaturityCell'
@@ -28,7 +29,7 @@ export const NAME_COLUMN: ColumnDef<Market, unknown> = {
 export const MATURITY_COLUMN: ColumnDef<Market, unknown> = {
   id: 'maturity',
   header: _ => <Trans>Maturity</Trans>,
-  accessorFn: row => Number(row.expiry.toString()),
+  accessorFn: row => JSBI.toNumber(row.expiry),
   cell: props => <MarketMaturityCell row={props.row.original} />,
   size: 80,
   meta: {

diff --git a/packages/market/src/Token/implementations/index.ts b/packages/market/src/Token/implementations/index.ts
@@ -1 +1,2 @@
 export * from './stDOT'
+export * from './vDOT'