2023-09-14 20:48:49 -07:00
|
|
|
import useStakeApr from 'hooks/useStakeAprs'
|
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-14 22:57:39 -07:00
|
|
|
import SheenLoader from './shared/SheenLoader'
|
2023-09-12 17:37:41 -07:00
|
|
|
|
|
|
|
const TokenButton = ({
|
|
|
|
handleTokenSelect,
|
|
|
|
selectedToken,
|
|
|
|
tokenName,
|
|
|
|
}: {
|
|
|
|
tokenName: string
|
|
|
|
selectedToken: string
|
|
|
|
handleTokenSelect: (v: string) => void
|
|
|
|
}) => {
|
2023-09-14 22:57:39 -07:00
|
|
|
const {
|
|
|
|
data: stakeAprs,
|
|
|
|
isLoading: loadingStakeAprs,
|
|
|
|
isFetching: fetchingStakeAprs,
|
|
|
|
} = useStakeApr()
|
|
|
|
|
|
|
|
const loadingAprs = loadingStakeAprs || fetchingStakeAprs
|
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
|
|
|
|
className={`col-span-1 flex items-center justify-center border-r border-th-fgd-1 p-4 first:rounded-tl-2xl last:rounded-tr-2xl last:border-transparent hover:cursor-pointer ${
|
|
|
|
selectedToken === tokenName ? 'bg-th-bkg-2' : ''
|
|
|
|
}`}
|
|
|
|
onClick={() => handleTokenSelect(tokenName)}
|
|
|
|
>
|
|
|
|
<div className="flex flex-col items-center">
|
2023-09-12 17:37:41 -07:00
|
|
|
<Image
|
|
|
|
src={`/icons/${tokenName.toLowerCase()}.svg`}
|
2023-09-14 06:18:39 -07:00
|
|
|
width={40}
|
|
|
|
height={40}
|
2023-09-12 17:37:41 -07:00
|
|
|
alt="Select a token"
|
|
|
|
/>
|
2023-09-14 06:18:39 -07:00
|
|
|
<span className="mt-2 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-14 20:48:49 -07:00
|
|
|
<span>
|
2023-09-14 22:57:39 -07:00
|
|
|
{loadingAprs ? (
|
|
|
|
<SheenLoader className="mt-0.5">
|
|
|
|
<div className="h-5 w-10 bg-th-bkg-3" />
|
|
|
|
</SheenLoader>
|
|
|
|
) : stakeAprs?.[tokenName.toLowerCase()] ? (
|
|
|
|
`${(stakeAprs?.[tokenName.toLowerCase()] * 100).toFixed(2)}%`
|
|
|
|
) : null}
|
2023-09-14 20:48:49 -07:00
|
|
|
</span>
|
2023-09-12 17:37:41 -07:00
|
|
|
</div>
|
|
|
|
</button>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default TokenButton
|