Merge pull request #26 from blockworks-foundation/emoji-rates
emoji rates
This commit is contained in:
saml33
GitHub
commit
5d7d49ff47
|
|
@ -4,6 +4,9 @@ import useBankRates from 'hooks/useBankRates'
|
|||
import useLeverageMax from 'hooks/useLeverageMax'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import SheenLoader from './shared/SheenLoader'
|
||||
import { SOL_YIELD } from './Stake'
|
||||
import Tooltip from './shared/Tooltip'
|
||||
import Link from 'next/link'
|
||||
|
||||
const HeroTokenButton = ({
|
||||
onClick,
|
||||
|
|
@ -32,9 +35,29 @@ const HeroTokenButton = ({
|
|||
? APY_Daily_Compound * 100
|
||||
: Math.max(estimatedNetAPYFor1xLev.APY, financialMetrics.APY)
|
||||
|
||||
const renderRateEmoji = (token: string, rate: number) => {
|
||||
if (token.toLowerCase().includes('sol')) {
|
||||
if (rate >= 20) {
|
||||
return '🎉'
|
||||
} else return ''
|
||||
}
|
||||
if (token === 'JLP') {
|
||||
if (rate >= 300) {
|
||||
return '🎉'
|
||||
} else return ''
|
||||
}
|
||||
if (token === 'USDC') {
|
||||
if (rate >= 20) {
|
||||
return '🎉'
|
||||
} else return ''
|
||||
}
|
||||
}
|
||||
|
||||
const emoji = renderRateEmoji(tokenName, UiRate)
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`inner-shadow-bottom default-transition w-full rounded-xl border border-th-bkg-3 bg-th-bkg-1 p-6 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`}
|
||||
className={`inner-shadow-bottom default-transition relative w-full rounded-xl border border-th-bkg-3 bg-th-bkg-1 p-6 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`}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div>
|
||||
|
|
@ -51,7 +74,7 @@ const HeroTokenButton = ({
|
|||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<p className={`text-th-fgd-1`}>{formatTokenSymbol(tokenName)}</p>
|
||||
<span className={`text-xl font-bold`}>
|
||||
<span className={`text-2xl font-bold`}>
|
||||
{!groupLoaded ? (
|
||||
<SheenLoader>
|
||||
<div className={`h-6 w-10 bg-th-bkg-2`} />
|
||||
|
|
@ -65,13 +88,62 @@ const HeroTokenButton = ({
|
|||
)}
|
||||
</span>
|
||||
{groupLoaded ? (
|
||||
<span className="text-sm text-th-fgd-4">
|
||||
{tokenName === 'USDC' ? 'APY' : 'Max APY'}
|
||||
</span>
|
||||
<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>
|
||||
{emoji ? (
|
||||
<div
|
||||
className="absolute left-0 top-0 h-0 w-0 rounded-tl-xl"
|
||||
style={{
|
||||
borderTopWidth: '100px',
|
||||
borderRightWidth: '100px',
|
||||
borderTopColor: 'var(--bkg-2)',
|
||||
borderRightColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
content={
|
||||
<>
|
||||
<p className="mb-2">
|
||||
The max APY is favorable right now. Rates can change very
|
||||
quickly. Make sure you understand the risks before boosting.
|
||||
</p>
|
||||
<Link href="/risks" shallow>
|
||||
Risks
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<span className="absolute bottom-12 left-4 text-2xl">{emoji}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
) : null}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,13 @@ const HomePage = () => {
|
|||
const setActiveTab = useCallback((tab: ActiveTab) => {
|
||||
return set((s) => {
|
||||
s.activeTab = tab
|
||||
s.selectedToken = ''
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
set((s) => {
|
||||
s.selectedToken = ''
|
||||
})
|
||||
}, [])
|
||||
|
||||
|
|
|
|||
|
|
@ -18,11 +18,16 @@ import Label from './forms/Label'
|
|||
import usePositions from 'hooks/usePositions'
|
||||
import { IconButton } from './shared/Button'
|
||||
import HeroTokenButton from './HeroTokenButton'
|
||||
import ButtonGroup from './forms/ButtonGroup'
|
||||
|
||||
const set = mangoStore.getState().set
|
||||
|
||||
export const SOL_YIELD = ['bSOL', 'MSOL', 'JitoSOL', 'JSOL']
|
||||
const USDC_YIELD = ['JLP', 'USDC']
|
||||
|
||||
const Stake = () => {
|
||||
const [activeFormTab, setActiveFormTab] = useState('Add')
|
||||
const [tokensToShow, setTokensToShow] = useState('All')
|
||||
const [showTokenSelect, setShowTokenSelect] = useState(false)
|
||||
const selectedToken = mangoStore((s) => s.selectedToken)
|
||||
const walletTokens = mangoStore((s) => s.wallet.tokens)
|
||||
|
|
@ -151,21 +156,36 @@ const Stake = () => {
|
|||
{selectableTokens.length ? (
|
||||
!selectedToken ? (
|
||||
<>
|
||||
<h2 className="mb-3 text-center text-lg font-normal">
|
||||
Select token to Boost!
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{selectableTokens.map((token) => (
|
||||
<HeroTokenButton
|
||||
key={token}
|
||||
onClick={() =>
|
||||
set((state) => {
|
||||
state.selectedToken = token
|
||||
})
|
||||
}
|
||||
tokenName={token}
|
||||
<div className="mb-6 flex flex-col items-center">
|
||||
<h2 className="mb-1 text-lg font-normal">Earn yield in</h2>
|
||||
<div className="w-full">
|
||||
<ButtonGroup
|
||||
activeValue={tokensToShow}
|
||||
onChange={(p) => setTokensToShow(p)}
|
||||
values={['All', 'SOL', 'USDC']}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{selectableTokens
|
||||
.filter((t) => {
|
||||
if (tokensToShow === 'SOL') {
|
||||
return SOL_YIELD.includes(t)
|
||||
} else if (tokensToShow === 'USDC') {
|
||||
return USDC_YIELD.includes(t)
|
||||
} else return t
|
||||
})
|
||||
.map((token) => (
|
||||
<HeroTokenButton
|
||||
key={token}
|
||||
onClick={() =>
|
||||
set((state) => {
|
||||
state.selectedToken = token
|
||||
})
|
||||
}
|
||||
tokenName={token}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
|
|
|
|||
Loading…
Reference in New Issue