2024-04-02 20:17:19 -07:00
|
|
|
import Image from 'next/image'
|
|
|
|
import { formatTokenSymbol } from 'utils/tokens'
|
|
|
|
import mangoStore from '@store/mangoStore'
|
|
|
|
import SheenLoader from './shared/SheenLoader'
|
2024-05-06 20:13:25 -07:00
|
|
|
import Tooltip from './shared/Tooltip'
|
|
|
|
import Link from 'next/link'
|
2024-06-23 23:29:28 -07:00
|
|
|
import { StakeableToken } from 'hooks/useStakeableTokens'
|
2024-06-24 21:05:34 -07:00
|
|
|
import {
|
|
|
|
ArrowTopRightOnSquareIcon,
|
|
|
|
InformationCircleIcon,
|
|
|
|
} from '@heroicons/react/20/solid'
|
2024-06-23 23:29:28 -07:00
|
|
|
|
2024-07-08 20:04:58 -07:00
|
|
|
const HERO_TOKEN_BUTTON_CLASSES = `flex items-center rounded-xl raised-button-neutral group after:rounded-xl h-20 px-6 md:px-6 w-full after:border after:border-th-bkg-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50`
|
2024-06-23 23:29:28 -07:00
|
|
|
|
|
|
|
export const HERO_TOKEN_IMAGE_WRAPPER_CLASSES =
|
2024-07-08 20:04:58 -07:00
|
|
|
'inner-shadow-bottom-sm flex h-14 w-14 items-center justify-center rounded-full border border-th-bkg-2 bg-gradient-to-b from-th-bkg-1 to-th-bkg-2 shrink-0'
|
2024-04-02 20:17:19 -07:00
|
|
|
|
|
|
|
const HeroTokenButton = ({
|
|
|
|
onClick,
|
2024-06-23 23:29:28 -07:00
|
|
|
tokenInfo,
|
2024-04-02 20:17:19 -07:00
|
|
|
}: {
|
2024-06-23 23:29:28 -07:00
|
|
|
tokenInfo: StakeableToken
|
2024-04-02 20:17:19 -07:00
|
|
|
onClick: () => void
|
|
|
|
}) => {
|
2024-06-24 21:05:34 -07:00
|
|
|
const { symbol, name } = tokenInfo.token ?? {}
|
|
|
|
const { estNetApy } = tokenInfo ?? {}
|
2024-04-02 20:17:19 -07:00
|
|
|
const groupLoaded = mangoStore((s) => s.groupLoaded)
|
|
|
|
|
2024-04-09 21:41:06 -07:00
|
|
|
const renderRateEmoji = (token: string, rate: number) => {
|
|
|
|
if (token.toLowerCase().includes('sol')) {
|
2024-05-06 20:13:25 -07:00
|
|
|
if (rate >= 20) {
|
|
|
|
return '🎉'
|
|
|
|
} else return ''
|
2024-04-09 21:41:06 -07:00
|
|
|
}
|
|
|
|
if (token === 'JLP') {
|
2024-05-06 20:13:25 -07:00
|
|
|
if (rate >= 300) {
|
|
|
|
return '🎉'
|
|
|
|
} else return ''
|
2024-04-09 21:41:06 -07:00
|
|
|
}
|
|
|
|
if (token === 'USDC') {
|
2024-05-06 20:13:25 -07:00
|
|
|
if (rate >= 20) {
|
|
|
|
return '🎉'
|
|
|
|
} else return ''
|
2024-04-09 21:41:06 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-06-24 21:05:34 -07:00
|
|
|
const emoji = renderRateEmoji(symbol, estNetApy)
|
2024-05-06 20:13:25 -07:00
|
|
|
|
2024-04-02 20:17:19 -07:00
|
|
|
return (
|
2024-06-23 23:29:28 -07:00
|
|
|
<button className={HERO_TOKEN_BUTTON_CLASSES} onClick={onClick}>
|
2024-07-08 20:04:58 -07:00
|
|
|
<span className="mt-1 w-full group-hover:mt-2 group-active:mt-3">
|
|
|
|
<div className="flex items-center space-x-3">
|
|
|
|
<Image
|
|
|
|
src={`/icons/${symbol.toLowerCase()}.svg`}
|
|
|
|
width={40}
|
|
|
|
height={40}
|
|
|
|
alt="Select a token"
|
|
|
|
/>
|
2024-06-23 23:29:28 -07:00
|
|
|
<div className="flex w-full justify-between">
|
|
|
|
<div className="text-left">
|
2024-06-24 21:05:34 -07:00
|
|
|
<div className="flex items-center">
|
2024-07-08 20:04:58 -07:00
|
|
|
<span className="mr-1.5 text-lg font-bold">
|
2024-06-24 21:05:34 -07:00
|
|
|
{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>
|
2024-07-04 15:59:46 -07:00
|
|
|
<p className={`text-xs font-normal text-th-fgd-4`}>{name}</p>
|
2024-06-23 23:29:28 -07:00
|
|
|
</div>
|
|
|
|
<div className="text-right">
|
|
|
|
<p className={`text-xs text-th-fgd-4`}>Max APY</p>
|
2024-07-04 15:59:46 -07:00
|
|
|
<div className="flex items-center justify-end">
|
2024-06-23 23:29:28 -07:00
|
|
|
{emoji ? (
|
|
|
|
<Tooltip
|
|
|
|
content={
|
|
|
|
<>
|
|
|
|
<p className="mb-2">
|
|
|
|
The max APY is favorable right now. Rates can change
|
|
|
|
very quickly. Make sure you understand the risks
|
2024-07-17 04:08:38 -07:00
|
|
|
before using this product.
|
2024-06-23 23:29:28 -07:00
|
|
|
</p>
|
|
|
|
<Link href="/risks" shallow>
|
|
|
|
Risks
|
|
|
|
</Link>
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<span className="mr-2 text-lg">{emoji}</span>
|
|
|
|
</Tooltip>
|
|
|
|
) : null}
|
2024-07-10 04:24:08 -07:00
|
|
|
<span className={`text-lg font-bold`}>
|
2024-06-23 23:29:28 -07:00
|
|
|
{!groupLoaded ? (
|
|
|
|
<SheenLoader>
|
|
|
|
<div className={`h-6 w-10 bg-th-bkg-2`} />
|
|
|
|
</SheenLoader>
|
2024-06-24 21:05:34 -07:00
|
|
|
) : !estNetApy || isNaN(estNetApy) ? (
|
2024-06-23 23:29:28 -07:00
|
|
|
<span className="text-base font-normal text-th-fgd-4">
|
|
|
|
Rate Unavailable
|
|
|
|
</span>
|
|
|
|
) : (
|
2024-06-24 21:05:34 -07:00
|
|
|
`${estNetApy.toFixed(2)}%`
|
2024-06-23 23:29:28 -07:00
|
|
|
)}
|
2024-04-02 20:17:19 -07:00
|
|
|
</span>
|
2024-06-23 23:29:28 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-04-02 20:17:19 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-07-08 20:04:58 -07:00
|
|
|
</span>
|
2024-04-02 20:17:19 -07:00
|
|
|
</button>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default HeroTokenButton
|