2023-09-12 17:37:41 -07:00
|
|
|
import Image from 'next/image'
|
2023-09-14 21:24:29 -07:00
|
|
|
import { formatTokenSymbol } from 'utils/tokens'
|
2023-09-25 17:50:05 -07:00
|
|
|
import useBankRates from 'hooks/useBankRates'
|
|
|
|
import useLeverageMax from 'hooks/useLeverageMax'
|
2023-09-12 17:37:41 -07:00
|
|
|
|
2023-09-25 06:48:39 -07:00
|
|
|
const TokenButton = ({
|
|
|
|
handleTokenSelect,
|
|
|
|
selectedToken,
|
|
|
|
tokenName,
|
|
|
|
}: {
|
|
|
|
tokenName: string
|
|
|
|
selectedToken: string
|
|
|
|
handleTokenSelect: (v: string) => void
|
|
|
|
}) => {
|
2024-02-24 09:34:30 -08:00
|
|
|
const leverage = useLeverageMax(tokenName) * 0.9
|
|
|
|
|
2024-02-27 07:30:05 -08:00
|
|
|
const { stakeBankDepositRate, financialMetrics } = useBankRates(
|
2024-02-20 13:41:06 -08:00
|
|
|
tokenName,
|
|
|
|
leverage,
|
|
|
|
)
|
2024-02-22 08:02:05 -08:00
|
|
|
|
2024-02-27 07:30:05 -08:00
|
|
|
const { financialMetrics: estimatedNetAPYFor1xLev } = useBankRates(
|
2024-02-24 16:09:28 -08:00
|
|
|
tokenName,
|
|
|
|
1,
|
|
|
|
)
|
|
|
|
|
|
|
|
const UiRate =
|
|
|
|
tokenName === 'USDC'
|
2024-02-27 07:35:16 -08:00
|
|
|
? Number(stakeBankDepositRate) * 100
|
2024-02-27 07:30:05 -08:00
|
|
|
: Math.max(estimatedNetAPYFor1xLev.APY, financialMetrics.APY)
|
2023-09-14 20:48:49 -07:00
|
|
|
|
2023-09-12 17:37:41 -07:00
|
|
|
return (
|
2023-09-14 06:18:39 -07:00
|
|
|
<button
|
2023-09-22 06:33:36 -07:00
|
|
|
className={`col-span-1 flex items-center justify-center border-r border-th-fgd-1 p-4 first:rounded-tl-[13px] last:rounded-tr-[13px] last:border-r-0 hover:cursor-pointer ${
|
|
|
|
selectedToken === tokenName
|
2023-09-25 06:48:39 -07:00
|
|
|
? 'inner-shadow-top bg-th-active'
|
2023-09-22 06:33:36 -07:00
|
|
|
: 'inner-shadow-bottom default-transition bg-th-bkg-1 md:hover:bg-th-bkg-2'
|
2023-09-14 06:18:39 -07:00
|
|
|
}`}
|
|
|
|
onClick={() => handleTokenSelect(tokenName)}
|
|
|
|
>
|
|
|
|
<div className="flex flex-col items-center">
|
2023-09-22 06:33:36 -07:00
|
|
|
<div
|
|
|
|
className={`flex h-12 w-12 items-center justify-center rounded-full border ${
|
|
|
|
selectedToken === tokenName
|
2023-09-25 06:48:39 -07:00
|
|
|
? 'inner-shadow-top-sm border-th-bkg-1 bg-gradient-to-b from-th-active to-th-active-dark'
|
2023-09-22 06:33:36 -07:00
|
|
|
: 'inner-shadow-bottom-sm border-th-bkg-2 bg-gradient-to-b from-th-bkg-1 to-th-bkg-2'
|
|
|
|
}`}
|
|
|
|
>
|
|
|
|
<Image
|
|
|
|
src={`/icons/${tokenName.toLowerCase()}.svg`}
|
|
|
|
width={24}
|
|
|
|
height={24}
|
|
|
|
alt="Select a token"
|
|
|
|
/>
|
|
|
|
</div>
|
2023-09-25 06:48:39 -07:00
|
|
|
<span className={`mt-1 text-lg font-bold text-th-fgd-1`}>
|
2023-09-14 21:24:29 -07:00
|
|
|
{formatTokenSymbol(tokenName)}
|
2023-09-14 06:18:39 -07:00
|
|
|
</span>
|
2023-09-22 06:33:36 -07:00
|
|
|
<span
|
2023-09-25 06:48:39 -07:00
|
|
|
className={`font-medium ${
|
|
|
|
selectedToken === tokenName ? 'text-th-fgd-1' : 'text-th-fgd-4'
|
2023-09-22 06:33:36 -07:00
|
|
|
}`}
|
|
|
|
>
|
2023-09-25 17:50:05 -07:00
|
|
|
{
|
|
|
|
// isLoading ? (
|
|
|
|
// <SheenLoader>
|
|
|
|
// <div
|
|
|
|
// className={`h-5 w-10 ${
|
|
|
|
// selectedToken === tokenName
|
|
|
|
// ? 'bg-th-active-dark'
|
|
|
|
// : 'bg-th-bkg-2'
|
|
|
|
// }`}
|
|
|
|
// />
|
|
|
|
// </SheenLoader>
|
|
|
|
// ) :
|
2024-02-24 09:34:30 -08:00
|
|
|
tokenName === 'USDC'
|
|
|
|
? `${UiRate.toFixed(2)}%`
|
|
|
|
: `Up to ${UiRate.toFixed(2)}%`
|
2023-09-25 17:50:05 -07:00
|
|
|
}
|
2023-09-14 20:48:49 -07:00
|
|
|
</span>
|
2023-09-12 17:37:41 -07:00
|
|
|
</div>
|
|
|
|
</button>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TokenButton
|