token tooltip details

blockworks-foundation · Jun 25, 2024 · dbbe924 · dbbe924
1 parent 88d016a
commit dbbe924
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 105 deletions.
diff --git a/components/HeroTokenButton.tsx b/components/HeroTokenButton.tsx
@@ -5,6 +5,10 @@ import SheenLoader from './shared/SheenLoader'
 import Tooltip from './shared/Tooltip'
 import Link from 'next/link'
 import { StakeableToken } from 'hooks/useStakeableTokens'
+import {
+  ArrowTopRightOnSquareIcon,
+  InformationCircleIcon,
+} from '@heroicons/react/20/solid'
 
 export const HERO_TOKEN_BUTTON_CLASSES =
   'inner-shadow-bottom default-transition relative w-full rounded-xl border border-th-bkg-3 bg-th-bkg-1 px-6 py-4 text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:bg-th-bkg-2 md:hover:focus-visible:border-th-fgd-4'
@@ -19,25 +23,10 @@ const HeroTokenButton = ({
   tokenInfo: StakeableToken
   onClick: () => void
 }) => {
-  const { symbol, name } = tokenInfo.token
-  const { APY } = tokenInfo.financialMetrics
-  // const leverage = useLeverageMax(symbol)
+  const { symbol, name } = tokenInfo.token ?? {}
+  const { estNetApy } = tokenInfo ?? {}
   const groupLoaded = mangoStore((s) => s.groupLoaded)
 
-  // const { stakeBankDepositRate, financialMetrics } = useBankRates(
-  //   symbol,
-  //   leverage,
-  // )
-
-  // const { financialMetrics: estimatedNetAPYFor1xLev } = useBankRates(symbol, 1)
-
-  // const APY_Daily_Compound =
-  //   Math.pow(1 + Number(stakeBankDepositRate) / 365, 365) - 1
-  // const UiRate =
-  //   symbol === 'USDC'
-  //     ? APY_Daily_Compound * 100
-  //     : Math.max(estimatedNetAPYFor1xLev.APY, financialMetrics.APY)
-
   const renderRateEmoji = (token: string, rate: number) => {
     if (token.toLowerCase().includes('sol')) {
       if (rate >= 20) {
@@ -56,7 +45,7 @@ const HeroTokenButton = ({
     }
   }
 
-  const emoji = renderRateEmoji(symbol, APY)
+  const emoji = renderRateEmoji(symbol, estNetApy)
 
   return (
     <button className={HERO_TOKEN_BUTTON_CLASSES} onClick={onClick}>
@@ -72,9 +61,48 @@ const HeroTokenButton = ({
           </div>
           <div className="flex w-full justify-between">
             <div className="text-left">
-              <span className="text-xl font-bold">
-                {formatTokenSymbol(symbol)}
-              </span>
+              <div className="flex items-center">
+                <span className="mr-1.5 text-xl font-bold">
+                  {formatTokenSymbol(symbol)}
+                </span>
+                <Tooltip
+                  content={
+                    <>
+                      <p>
+                        {tokenInfo?.token?.description
+                          ? tokenInfo.token.description
+                          : name}
+                      </p>
+                      <div className="flex">
+                        {tokenInfo?.token?.links?.website ? (
+                          <a
+                            className="mr-2 mt-2 flex items-center"
+                            href={tokenInfo.token.links.website}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <span className="mr-0.5">Website</span>
+                            <ArrowTopRightOnSquareIcon className="h-3 w-3" />
+                          </a>
+                        ) : null}
+                        {tokenInfo?.token?.links?.twitter ? (
+                          <a
+                            className="mt-2 flex items-center"
+                            href={tokenInfo.token.links.twitter}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <span className="mr-0.5">Twitter</span>
+                            <ArrowTopRightOnSquareIcon className="h-3 w-3" />
+                          </a>
+                        ) : null}
+                      </div>
+                    </>
+                  }
+                >
+                  <InformationCircleIcon className="mb-0.5 h-4 w-4 cursor-help text-th-bkg-4" />
+                </Tooltip>
+              </div>
               <p className={`text-xs text-th-fgd-4`}>{name}</p>
             </div>
             <div className="text-right">
@@ -103,43 +131,16 @@ const HeroTokenButton = ({
                     <SheenLoader>
                       <div className={`h-6 w-10 bg-th-bkg-2`} />
                     </SheenLoader>
-                  ) : !APY || isNaN(APY) ? (
+                  ) : !estNetApy || isNaN(estNetApy) ? (
                     <span className="text-base font-normal text-th-fgd-4">
                       Rate Unavailable
                     </span>
                   ) : (
-                    `${APY.toFixed(2)}%`
+                    `${estNetApy.toFixed(2)}%`
                   )}
                 </span>
               </div>
             </div>
-            {/* {groupLoaded ? (
-              <div className="mt-1 flex items-center">
-                {SOL_YIELD.includes(tokenName) ? (
-                  <>
-                    <Image
-                      className="mr-1.5"
-                      src={`/icons/sol.svg`}
-                      width={16}
-                      height={16}
-                      alt="SOL Logo"
-                    />
-                    <span className="text-sm text-th-fgd-4">Earn SOL</span>
-                  </>
-                ) : (
-                  <>
-                    <Image
-                      className="mr-1.5"
-                      src={`/icons/usdc.svg`}
-                      width={16}
-                      height={16}
-                      alt="USDC Logo"
-                    />
-                    <span className="text-sm text-th-fgd-4">Earn USDC</span>
-                  </>
-                )}
-              </div>
-            ) : null} */}
           </div>
         </div>
       </div>

diff --git a/components/NavTabs.tsx b/components/NavTabs.tsx
@@ -17,7 +17,7 @@ const NavTabs = <T extends Values>({
     <>
       {values.map(([value, count], i) => (
         <button
-          className={`mx-auto flex w-full items-center justify-center border-y-2 border-r border-th-fgd-1 py-3.5 font-bold first:rounded-l-lg first:border-l-2 last:rounded-r-lg last:border-r-2 ${
+          className={`mx-auto flex h-14 w-full items-center justify-center border-y-2 border-r border-th-fgd-1 font-bold first:rounded-l-xl first:border-l-2 last:rounded-r-xl last:border-r-2 ${
             activeValue === value
               ? 'inner-shadow-top-sm bg-th-active text-th-fgd-1'
               : 'inner-shadow-bottom-sm default-transition bg-th-bkg-1 text-th-fgd-1 md:hover:bg-th-bkg-2'

diff --git a/components/Positions.tsx b/components/Positions.tsx
@@ -97,11 +97,7 @@ const Positions = ({
       className={`rounded-2xl border-2 border-th-fgd-1 bg-th-bkg-1 p-6 text-th-fgd-1 md:p-8`}
     >
       <div className="mb-3 flex items-center space-x-3">
-        <IconButton
-          onClick={() => setShowAddRemove('')}
-          size="medium"
-          isPrimary
-        >
+        <IconButton onClick={() => setShowAddRemove('')} size="small" isPrimary>
           <ArrowLeftIcon className="h-5 w-5" />
         </IconButton>
         <h2>

diff --git a/components/Stake.tsx b/components/Stake.tsx
@@ -1,4 +1,3 @@
-import TokenButton from './TokenButton'
 import { useCallback, useMemo, useState } from 'react'
 import StakeForm from '@components/StakeForm'
 import mangoStore from '@store/mangoStore'
@@ -7,11 +6,14 @@ import {
   getStakableTokensDataForTokenName,
 } from 'utils/tokens'
 import { useViewport } from 'hooks/useViewport'
-import { ArrowTopRightOnSquareIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import {
+  ArrowLeftIcon,
+  ArrowTopRightOnSquareIcon,
+  XMarkIcon,
+} from '@heroicons/react/20/solid'
 import DespositForm from './DepositForm'
 import { EnterBottomExitBottom } from './shared/Transitions'
 import TokenSelect from './TokenSelect'
-import Label from './forms/Label'
 import { IconButton } from './shared/Button'
 import HeroTokenButton, {
   HERO_TOKEN_BUTTON_CLASSES,
@@ -72,8 +74,8 @@ const Stake = () => {
 
       // const aMaxAmount = aWalletBalance.maxAmount
       // const bMaxAmount = bWalletBalance.maxAmount
-      const aApy = a.financialMetrics.APY
-      const bApy = b.financialMetrics.APY
+      const aApy = a.estNetApy
+      const bApy = b.estNetApy
 
       // if (bMaxAmount !== aMaxAmount) {
       //   return bMaxAmount - aMaxAmount
@@ -134,8 +136,8 @@ const Stake = () => {
                     <p>Leverage up your liquid staking yield.</p>
                   </div>
                   <div className="p-6 md:p-8">
-                    <h2 className="mb-3 text-lg font-normal">
-                      What do you want to earn?
+                    <h2 className="mb-3 text-center text-lg font-normal">
+                      Select your yield
                     </h2>
                     <div className="grid grid-cols-2 gap-4 text-lg font-bold">
                       <button
@@ -209,13 +211,27 @@ const Stake = () => {
               </>
             ) : (
               <div className="p-6 md:p-8">
-                <div className="pb-6">
+                <div className="mb-3 flex items-center space-x-3">
+                  <IconButton
+                    onClick={() =>
+                      set((state) => {
+                        state.selectedToken = ''
+                      })
+                    }
+                    size="small"
+                    isPrimary
+                  >
+                    <ArrowLeftIcon className="h-5 w-5" />
+                  </IconButton>
+                  <h2>Boost! {selectedToken}</h2>
+                </div>
+                {/* <div className="pb-6">
                   <Label text="Token to Boost!" />
                   <TokenButton
                     onClick={() => setShowTokenSelect(true)}
                     tokenName={selectedToken}
                   />
-                </div>
+                </div> */}
                 {selectedToken === 'USDC' ? (
                   <DespositForm
                     token="USDC"

diff --git a/components/TokenButton.tsx b/components/TokenButton.tsx
@@ -22,7 +22,7 @@ const TokenButton = ({
     return stakeableTokens.find((token) => token.token.symbol === tokenName)
   }, [tokenName, stakeableTokens])
 
-  const apy = tokenInfo?.financialMetrics?.APY
+  const apy = tokenInfo?.estNetApy
 
   return (
     <button

diff --git a/components/TokenSelect.tsx b/components/TokenSelect.tsx
@@ -22,7 +22,7 @@ const TokenSelect = ({
   showPositionSize?: boolean
 }) => {
   const { symbol } = tokenInfo.token
-  const { APY } = tokenInfo.financialMetrics
+  const { estNetApy } = tokenInfo
   const groupLoaded = mangoStore((s) => s.groupLoaded)
   const walletTokens = mangoStore((s) => s.wallet.tokens)
   const { positions } = usePositions()
@@ -64,11 +64,11 @@ const TokenSelect = ({
                 <SheenLoader>
                   <div className={`h-5 w-10 bg-th-bkg-2`} />
                 </SheenLoader>
-              ) : !APY || isNaN(APY) ? (
+              ) : !estNetApy || isNaN(estNetApy) ? (
                 'Rate Unavailable'
               ) : symbol === 'USDC' ? (
                 <>
-                  {`${APY.toFixed(2)}%`}
+                  {`${estNetApy.toFixed(2)}%`}
                   <div className="mt-1 flex items-center">
                     <Image
                       className="mr-1"
@@ -84,7 +84,7 @@ const TokenSelect = ({
                 </>
               ) : (
                 <>
-                  {`${APY.toFixed(2)}%`}
+                  {`${estNetApy.toFixed(2)}%`}
                   <div className="mt-1">
                     {SOL_YIELD.includes(symbol) ? (
                       <div className="flex items-center">

diff --git a/hooks/useStakeableTokens.ts b/hooks/useStakeableTokens.ts
@@ -24,6 +24,7 @@ type FinancialMetrics = {
 export type StakeableToken = {
   token: StakeableTokensData
   financialMetrics: FinancialMetrics
+  estNetApy: number
 }
 
 const getLeverage = (
@@ -151,9 +152,6 @@ export default function useStakeableTokens() {
       ? jlpGroup?.banksMapByName.get(JLP_BORROW_TOKEN)?.[0]
       : lstGroup?.banksMapByName.get(LST_BORROW_TOKEN)?.[0]
 
-    //   const stakeBankDepositRate = stakeBank ? stakeBank.getDepositRate() : 0
-    //   const borrowBankBorrowRate = borrowBank ? Number(borrowBank.getBorrowRate()) : 0
-
     const tokenStakeRateAPY = stakeRates ? stakeRates[symbol.toLowerCase()] : 0
 
     const leverage = getLeverage(stakeBank, borrowBank, symbol)
@@ -163,7 +161,14 @@ export default function useStakeableTokens() {
       leverage,
       tokenStakeRateAPY,
     )
-    stakeableTokens.push({ token, financialMetrics })
+    const financialMetricsAt1x = getFinancialMetrics(
+      stakeBank,
+      borrowBank,
+      1,
+      tokenStakeRateAPY,
+    )
+    const estNetApy = Math.max(financialMetrics.APY, financialMetricsAt1x.APY)
+    stakeableTokens.push({ token, financialMetrics, estNetApy })
   }
   return { stakeableTokens }
 }