saml33
GitHub
commit
fdd6c0f938
|
|
@ -399,7 +399,7 @@ function EditLeverageForm({
|
|||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`w-full rounded-xl border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
|
||||
className={`w-full rounded-lg border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
|
||||
open ? 'rounded-b-none border-b-0' : ''
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import Link from 'next/link'
|
||||
import DiscordIcon from './icons/DiscordIcon'
|
||||
import { XIcon } from './icons/XIcon'
|
||||
import MangoMade from './icons/MangoMade'
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="my-6 flex items-center justify-between rounded-lg border-2 border-th-fgd-1 bg-th-bkg-1 px-6 py-4">
|
||||
<div className="my-6 flex items-center justify-between rounded-xl border-2 border-th-fgd-1 bg-th-bkg-1 px-6 py-4">
|
||||
<a
|
||||
href="https://app.mango.markets"
|
||||
rel="noopener noreferrer"
|
||||
className="text-th-fgd-4 focus:outline-none md:hover:text-th-fgd-2"
|
||||
href="https://mango.markets"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<span className="font-bold text-th-fgd-1">Powered by 🥭</span>
|
||||
<MangoMade className="h-4 w-auto" />
|
||||
</a>
|
||||
<div className="flex items-center space-x-4">
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -10,11 +10,10 @@ import {
|
|||
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 font-semibold'
|
||||
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`
|
||||
|
||||
export const HERO_TOKEN_IMAGE_WRAPPER_CLASSES =
|
||||
'inner-shadow-bottom-sm mb-2 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'
|
||||
'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'
|
||||
|
||||
const HeroTokenButton = ({
|
||||
onClick,
|
||||
|
|
@ -49,20 +48,18 @@ const HeroTokenButton = ({
|
|||
|
||||
return (
|
||||
<button className={HERO_TOKEN_BUTTON_CLASSES} onClick={onClick}>
|
||||
<div>
|
||||
<div className="flex items-center space-x-2.5">
|
||||
<div className={HERO_TOKEN_IMAGE_WRAPPER_CLASSES}>
|
||||
<Image
|
||||
src={`/icons/${symbol.toLowerCase()}.svg`}
|
||||
width={32}
|
||||
height={32}
|
||||
alt="Select a token"
|
||||
/>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<div className="flex w-full justify-between">
|
||||
<div className="text-left">
|
||||
<div className="flex items-center">
|
||||
<span className="mr-1.5 text-xl font-bold">
|
||||
<span className="mr-1.5 text-lg font-bold">
|
||||
{formatTokenSymbol(symbol)}
|
||||
</span>
|
||||
<Tooltip
|
||||
|
|
@ -115,7 +112,7 @@ const HeroTokenButton = ({
|
|||
<p className="mb-2">
|
||||
The max APY is favorable right now. Rates can change
|
||||
very quickly. Make sure you understand the risks
|
||||
before boosting.
|
||||
before using this product.
|
||||
</p>
|
||||
<Link href="/risks" shallow>
|
||||
Risks
|
||||
|
|
@ -126,7 +123,7 @@ const HeroTokenButton = ({
|
|||
<span className="mr-2 text-lg">{emoji}</span>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
<span className={`text-xl font-bold`}>
|
||||
<span className={`text-lg font-bold`}>
|
||||
{!groupLoaded ? (
|
||||
<SheenLoader>
|
||||
<div className={`h-6 w-10 bg-th-bkg-2`} />
|
||||
|
|
@ -143,7 +140,7 @@ const HeroTokenButton = ({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const HomePage = () => {
|
|||
<NavTabs
|
||||
activeValue={activeTab}
|
||||
values={[
|
||||
['Boost!', 0],
|
||||
['Earn', 0],
|
||||
['Positions', positions.length],
|
||||
['Activity', 0],
|
||||
]}
|
||||
|
|
@ -70,7 +70,7 @@ const TabContent = ({
|
|||
setActiveTab: (tab: ActiveTab) => void
|
||||
}) => {
|
||||
switch (activeTab) {
|
||||
case 'Boost!':
|
||||
case 'Earn':
|
||||
return <Stake />
|
||||
case 'Positions':
|
||||
return <Positions setActiveTab={setActiveTab} />
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const HowItWorks = () => {
|
|||
<div className="mt-6 rounded-lg border-2 border-th-fgd-1 bg-th-bkg-1 p-6">
|
||||
<h2 className="mb-1">Before you jump in</h2>
|
||||
<p className="mb-6 leading-relaxed">
|
||||
Boost! is high risk. Make sure you understand how it works before
|
||||
This product is high risk. Make sure you understand how it works before
|
||||
risking any funds.
|
||||
</p>
|
||||
<h3 className="mb-1">The basics of JLP</h3>
|
||||
|
|
@ -18,12 +18,12 @@ const HowItWorks = () => {
|
|||
all perp trading fees. This is automatically accrued in the price of JLP
|
||||
over time and is represented as an APR.
|
||||
</p>
|
||||
<h3 className="mb-1">The basics of boosting JLP</h3>
|
||||
<h3 className="mb-1">The basics of adding leverage to JLP</h3>
|
||||
<p className="mb-3 leading-relaxed">
|
||||
Boost! offers a simple way to add leverage to your JLP position. It
|
||||
works by borrowing USDC against your deposited JLP and then swapping the
|
||||
borrowed USDC to JLP. This leaves you with more JLP than you deposited
|
||||
and a borrowed amount of USDC.
|
||||
This product offers a simple way to add leverage to your JLP position.
|
||||
It works by borrowing USDC against your deposited JLP and then swapping
|
||||
the borrowed USDC to JLP. This leaves you with more JLP than you
|
||||
deposited and a borrowed amount of USDC.
|
||||
</p>
|
||||
<p className="mb-6 leading-relaxed">
|
||||
The idea is to increase your return by harvesting more of the native
|
||||
|
|
@ -31,7 +31,7 @@ const HowItWorks = () => {
|
|||
JLP yield. As long as your borrow costs are less than the extra JLP
|
||||
yield you make a profit.
|
||||
</p>
|
||||
<h3 className="mb-1">Is boosting JLP always profitable?</h3>
|
||||
<h3 className="mb-1">Is adding leverage to JLP always profitable?</h3>
|
||||
<p className="mb-3 leading-relaxed">
|
||||
No. For one, there is a real risk of liquidation. If the price of JLP
|
||||
drops below your liquidation threshold you will lose some or all of your
|
||||
|
|
@ -46,7 +46,7 @@ const HowItWorks = () => {
|
|||
This variable APR can change significantly and frequently depending on
|
||||
the ratio or USDC deposits and borrows. It is charged continuosly on the
|
||||
balance of your USDC borrow and paid to USDC depositors (lenders) on
|
||||
Boost!.
|
||||
yield.fans
|
||||
</p>
|
||||
<h4 className="mb-1">USDC Loan Origination Fee</h4>
|
||||
<p className="mb-3 leading-relaxed">
|
||||
|
|
@ -77,26 +77,22 @@ const HowItWorks = () => {
|
|||
</p>
|
||||
<h4 className="mb-1">Position Entry Costs</h4>
|
||||
<p className="mb-3 leading-relaxed">
|
||||
When boosting JLP the USDC you borrow gets swapped via Jupiter to more
|
||||
JLP. This can incur some slippage resulting in an entry price worse than
|
||||
expected.
|
||||
When adding leverage to JLP the USDC you borrow gets swapped via Jupiter
|
||||
to more JLP. This can incur some slippage resulting in an entry price
|
||||
worse than expected.
|
||||
</p>
|
||||
<p className="mb-6 leading-relaxed">
|
||||
So, for boosting JLP to be profitable the extra yield needs to be
|
||||
So, for leveraging JLP to be profitable the extra yield needs to be
|
||||
greater than these costs. It can also take some time for your position
|
||||
to be in profit because of the upfront fees paid to borrow USDC.
|
||||
</p>
|
||||
<h3 className="mb-1">Boosting USDC</h3>
|
||||
<h3 className="mb-1">Depositing USDC</h3>
|
||||
<p className="mb-6 leading-relaxed">
|
||||
Boosting USDC is simply supplying it to the lending pool. Your USDC
|
||||
balance will be lent to JLP boosters and will continously earn the
|
||||
variable interest rate. There are no fees associated with lending USDC.
|
||||
Depositing USDC is simply supplying it to the lending pool. Your USDC
|
||||
balance will be lent to users leveraging JLP and will continously earn
|
||||
the variable interest rate. There are no fees associated with lending
|
||||
USDC.
|
||||
</p>
|
||||
{/* <p className="mb-3 leading-relaxed">
|
||||
There are no fees associated with lending USDC but there are risks. If
|
||||
there was a catastrophic failure in JLP or Boost! you could lose all of
|
||||
your funds.
|
||||
</p> */}
|
||||
<h3 className="mb-1">Risks</h3>
|
||||
<p className="mb-3 leading-relaxed">
|
||||
The following risks are non-exhaustive.
|
||||
|
|
@ -108,44 +104,45 @@ const HowItWorks = () => {
|
|||
result in total loss of funds.
|
||||
</p>
|
||||
<p className="mb-3 leading-relaxed">
|
||||
If JLP were to have a large depegging event it could leave Boost! with
|
||||
bad debt. JLP boosters would lose due to JLP losing value and USDC
|
||||
depositors would lose if the JLP was unable to be liquidated in time.
|
||||
If JLP were to have a large depegging event it could leave the product
|
||||
with bad debt. Users leveraging JLP would lose due to JLP losing value
|
||||
and USDC depositors would lose if the JLP was unable to be liquidated in
|
||||
time.
|
||||
</p>
|
||||
<h4 className="mb-1">Oracles</h4>
|
||||
<p className="mb-3 leading-relaxed">
|
||||
Boost! uses 3rd party oracle providers for pricing data. It is possible
|
||||
that bad data from these oracle services could result in liquidations
|
||||
and/or total loss of funds.
|
||||
This product uses 3rd party oracle providers for pricing data. It is
|
||||
possible that bad data from these oracle services could result in
|
||||
liquidations and/or total loss of funds.
|
||||
</p>
|
||||
<h4 className="mb-1">Liquidity</h4>
|
||||
<p className="mb-3 leading-relaxed">
|
||||
Opening and closing positions on Boost! relies on swapping between JLP
|
||||
and USDC without significant price impact. During an extreme market
|
||||
event there could be issues liquidating positions effectively. This
|
||||
could affect the liquidity available to open/close positions.
|
||||
Opening and closing positions relies on swapping between JLP and USDC
|
||||
without significant price impact. During an extreme market event there
|
||||
could be issues liquidating positions effectively. This could affect the
|
||||
liquidity available to open/close positions.
|
||||
</p>
|
||||
<h4 className="mb-1">Boost! Code</h4>
|
||||
<h4 className="mb-1">Code</h4>
|
||||
<p className="mb-3 leading-relaxed">
|
||||
Boost! is an integration with the Mango v4 contracts. These are audited
|
||||
by{' '}
|
||||
This product is an integration with the Mango v4 contracts. These are
|
||||
audited by{' '}
|
||||
<a href="https://osec.io/" rel="noopener noreferrer" target="_blank">
|
||||
OtterSec
|
||||
</a>{' '}
|
||||
on every release. It is still possible for exploitable vulnerabilities
|
||||
to exist that could result in total loss of funds.
|
||||
</p>
|
||||
<h4 className="mb-1">Boost! UI</h4>
|
||||
<h4 className="mb-1">UI</h4>
|
||||
<p className="mb-3 leading-relaxed">
|
||||
As the Boost! UI changes fairly regularly it's possible for errors
|
||||
to be introduced that could temporaily affect your ability to enter or
|
||||
exit positions.
|
||||
As the UI changes fairly regularly it's possible for errors to be
|
||||
introduced that could temporaily affect your ability to enter or exit
|
||||
positions.
|
||||
</p>
|
||||
<h4 className="mb-1">Solana Network and RPCs</h4>
|
||||
<p className="mb-3 leading-relaxed">
|
||||
Boost! relies on the Solana Network and external RPCs to function. If
|
||||
these services are down access to your funds on Boost! will be affected.
|
||||
If this coincides with a market event you could lose funds.
|
||||
This product relies on the Solana Network and external RPCs to function.
|
||||
If these services are down access to your funds will be affected. If
|
||||
this coincides with a market event you could lose funds.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@ import { ArrowPathIcon } from '@heroicons/react/20/solid'
|
|||
import mangoStore from '@store/mangoStore'
|
||||
import TopBar from './TopBar'
|
||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
import { ACCEPT_TERMS_KEY, SECONDS } from '../utils/constants'
|
||||
import {
|
||||
ACCEPT_TERMS_KEY,
|
||||
SECONDS,
|
||||
YIELD_FANS_INTRO_KEY,
|
||||
} from '../utils/constants'
|
||||
import useInterval from './shared/useInterval'
|
||||
import { Transition } from '@headlessui/react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
|
@ -13,6 +17,9 @@ import Footer from './Footer'
|
|||
import useIpAddress from 'hooks/useIpAddress'
|
||||
import RestrictedCountryModal from './shared/RestrictedCountryModal'
|
||||
import { useRouter } from 'next/router'
|
||||
import Modal from './shared/Modal'
|
||||
import Button from './shared/Button'
|
||||
import Image from 'next/image'
|
||||
|
||||
export const NON_RESTRICTED_JURISDICTION_KEY = 'non-restricted-jurisdiction-0.1'
|
||||
|
||||
|
|
@ -36,23 +43,13 @@ const Layout = ({ children }: { children: ReactNode }) => {
|
|||
{/* <div className="border-th-primary-4 from-th-primary-3 to-th-primary-2 absolute bottom-0 h-44 w-full border-b-[20px] bg-gradient-to-b" /> */}
|
||||
<div className="relative z-10">
|
||||
<TopBar />
|
||||
<div className="mx-auto max-w-3xl px-6 pb-20 lg:px-12">
|
||||
<div className="mx-auto max-w-3xl px-6 pb-20 md:pb-12 lg:px-12">
|
||||
{children}
|
||||
<Footer />
|
||||
</div>
|
||||
{/* <div className="fixed bottom-8 right-8 hidden lg:block">
|
||||
<a
|
||||
className="flex items-center rounded-md border-b-2 border-th-bkg-3 bg-th-bkg-1 px-2 py-0.5 text-th-fgd-1"
|
||||
target="_blank"
|
||||
href="https://boost-v1.mango.markets/"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span className="mr-1.5 block font-bold">Boost! v1</span>
|
||||
<ArrowTopRightOnSquareIcon className="h-5 w-5" />
|
||||
</a>
|
||||
</div> */}
|
||||
<DeployRefreshManager />
|
||||
<TermsOfUse />
|
||||
<YieldFansIntro />
|
||||
<RestrictedCountryCheck
|
||||
ipCountry={ipCountry}
|
||||
loadingIpCountry={loadingIpCountry}
|
||||
|
|
@ -71,25 +68,61 @@ const TermsOfUse = () => {
|
|||
ACCEPT_TERMS_KEY,
|
||||
'',
|
||||
)
|
||||
const [yieldFansIntro] = useLocalStorageState(YIELD_FANS_INTRO_KEY, false)
|
||||
|
||||
const showTermsOfUse = useMemo(() => {
|
||||
return (
|
||||
(!acceptTerms || acceptTerms < termsLastUpdated) && asPath !== '/risks'
|
||||
(!acceptTerms || acceptTerms < termsLastUpdated) &&
|
||||
asPath !== '/risks' &&
|
||||
yieldFansIntro
|
||||
)
|
||||
}, [acceptTerms, asPath])
|
||||
}, [acceptTerms, asPath, yieldFansIntro])
|
||||
|
||||
const handleClose = () => {
|
||||
setAcceptTerms(Date.now())
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{showTermsOfUse ? (
|
||||
<TermsOfUseModal
|
||||
isOpen={showTermsOfUse}
|
||||
onClose={() => setAcceptTerms(Date.now())}
|
||||
/>
|
||||
<TermsOfUseModal isOpen={showTermsOfUse} onClose={handleClose} />
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const YieldFansIntro = () => {
|
||||
const [yieldFansIntro, setYieldFansIntro] = useLocalStorageState(
|
||||
YIELD_FANS_INTRO_KEY,
|
||||
false,
|
||||
)
|
||||
|
||||
return !yieldFansIntro ? (
|
||||
<Modal isOpen={!yieldFansIntro} onClose={() => setYieldFansIntro(true)}>
|
||||
<div className="flex flex-col items-center">
|
||||
<Image
|
||||
className="mb-3"
|
||||
src="/logos/yield-fans.png"
|
||||
alt="Logo"
|
||||
height={48}
|
||||
width={48}
|
||||
/>
|
||||
<h2 className="mb-1 text-center">New name. Same APYs.</h2>
|
||||
<p className="text-center">
|
||||
Are you a fan of epic yields? Boost! is now yield.fan
|
||||
</p>
|
||||
<Button
|
||||
className="mt-6"
|
||||
onClick={() => setYieldFansIntro(true)}
|
||||
size="medium"
|
||||
>
|
||||
Let's Go
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
) : null
|
||||
}
|
||||
|
||||
function DeployRefreshManager(): JSX.Element | null {
|
||||
const { t } = useTranslation('common')
|
||||
const [newBuildAvailable, setNewBuildAvailable] = useState(false)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
const Logo = ({ className }: { className?: string }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 256 256"
|
||||
fill="currentColor"
|
||||
// style={{ width: '100%', height: 'auto' }}
|
||||
>
|
||||
<g clip-path="url(#clip0_362_155)">
|
||||
<circle cx="128" cy="128" r="128" fill="black" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M128.001 17.0662C66.7343 17.0662 17.0678 66.7327 17.0678 128C17.0678 189.266 66.7343 238.933 128.001 238.933C189.268 238.933 238.934 189.266 238.934 128C238.934 66.7327 189.268 17.0662 128.001 17.0662ZM8.53442 128C8.53442 62.0199 62.0215 8.53284 128.001 8.53284C193.981 8.53284 247.468 62.0199 247.468 128C247.468 193.979 193.981 247.466 128.001 247.466C62.0215 247.466 8.53442 193.979 8.53442 128Z"
|
||||
fill="#EBF441"
|
||||
/>
|
||||
<path
|
||||
d="M83.7194 123.353C82.5758 123.514 81.5543 123.256 80.6547 122.578C79.7552 121.9 79.2223 120.969 79.056 119.786L78.4408 115.409L80.4398 116.757C77.7811 117.01 75.4468 116.996 73.4369 116.716C71.427 116.435 69.772 116.105 68.472 115.724C67.3801 115.395 66.5564 114.827 66.0007 114.021C65.4844 113.209 65.202 112.344 65.1534 111.425C65.1442 110.502 65.363 109.627 65.8098 108.8C66.2566 107.973 66.8971 107.38 67.7314 107.022C68.5996 106.618 69.6613 106.59 70.9164 106.936C71.766 107.259 73.0128 107.546 74.6567 107.798C76.3345 108.004 78.3564 107.941 80.7225 107.609C82.3788 107.376 83.6579 107.035 84.56 106.587C85.5016 106.133 86.1335 105.622 86.4558 105.054C86.812 104.441 86.9457 103.819 86.857 103.188C86.7739 102.596 86.5469 102.125 86.176 101.775C85.839 101.38 85.3131 101.072 84.5984 100.851C83.8781 100.59 82.9071 100.405 81.6852 100.295L74.8015 99.815C71.0177 99.5023 68.083 98.5073 65.9975 96.83C63.9458 95.1076 62.7011 92.6888 62.2632 89.5734C61.9307 87.2074 62.206 85.0172 63.0891 83.0031C64.0061 80.944 65.4265 79.176 67.3503 77.6992C69.3135 76.2169 71.6926 75.1185 74.4875 74.404L72.8543 75.659L72.2973 71.6958C72.1311 70.5127 72.3868 69.4715 73.0647 68.5719C73.7425 67.6724 74.6533 67.1422 75.7969 66.9815C76.9799 66.8153 78.0212 67.0711 78.9207 67.7489C79.8203 68.4268 80.3532 69.3572 80.5194 70.5402L81.0764 74.5034L79.1439 73.6289C80.648 73.4578 82.3008 73.4869 84.1025 73.7162C85.8986 73.9061 87.5027 74.304 88.9149 74.9098C89.8884 75.2556 90.6108 75.8176 91.0821 76.5958C91.5928 77.3685 91.85 78.197 91.8536 79.0811C91.8911 79.9204 91.681 80.714 91.2231 81.4619C90.8047 82.2044 90.1586 82.7576 89.2848 83.1217C88.445 83.4408 87.3778 83.4299 86.0833 83.0891C85.1208 82.8222 84.0512 82.6508 82.8743 82.575C81.7314 82.4541 80.2923 82.5156 78.5572 82.7594C76.4672 83.0532 74.903 83.655 73.8647 84.565C72.8658 85.4695 72.4495 86.5132 72.6158 87.6962C72.7266 88.4849 73.1363 89.111 73.8449 89.5744C74.5873 89.9928 75.8538 90.2773 77.6443 90.4278L84.5955 90.9589C88.4582 91.2605 91.4126 92.2528 93.4587 93.9357C95.5387 95.5736 96.7921 97.9108 97.2189 100.947C97.5514 103.313 97.2733 105.484 96.3847 107.458C95.496 109.433 94.1067 111.136 92.2169 112.568C90.3664 113.994 88.1253 115.073 85.4937 115.805L86.6546 114.194L87.2781 118.631C87.4444 119.814 87.1886 120.855 86.5108 121.755C85.8723 122.649 84.9419 123.182 83.7194 123.353Z"
|
||||
fill="#EBF441"
|
||||
/>
|
||||
<path
|
||||
d="M170.459 112.962C169.315 113.122 168.294 112.864 167.394 112.186C166.495 111.508 165.962 110.578 165.796 109.395L165.18 105.017L167.179 106.365C164.521 106.618 162.186 106.604 160.176 106.324C158.167 106.043 156.512 105.713 155.211 105.333C154.12 105.004 153.296 104.436 152.74 103.629C152.224 102.817 151.941 101.952 151.893 101.034C151.884 100.11 152.103 99.2349 152.549 98.408C152.996 97.5812 153.637 96.9885 154.471 96.63C155.339 96.2264 156.401 96.1979 157.656 96.5443C158.506 96.8672 159.752 97.1544 161.396 97.406C163.074 97.6125 165.096 97.5495 167.462 97.217C169.118 96.9842 170.397 96.6436 171.3 96.1951C172.241 95.7411 172.873 95.23 173.195 94.6619C173.551 94.0489 173.685 93.4269 173.597 92.7959C173.513 92.2044 173.286 91.7337 172.915 91.3836C172.578 90.9887 172.053 90.6805 171.338 90.4593C170.618 90.1986 169.647 90.0133 168.425 89.9036L161.541 89.4233C157.757 89.1106 154.823 88.1156 152.737 86.4382C150.685 84.7159 149.441 82.2971 149.003 79.1817C148.67 76.8156 148.945 74.6255 149.829 72.6114C150.746 70.5522 152.166 68.7843 154.09 67.3075C156.053 65.8252 158.432 64.7268 161.227 64.0123L159.594 65.2672L159.037 61.3041C158.871 60.121 159.126 59.0797 159.804 58.1802C160.482 57.2807 161.393 56.7505 162.536 56.5898C163.719 56.4235 164.761 56.6793 165.66 57.3572C166.56 58.035 167.093 58.9655 167.259 60.1485L167.816 64.1117L165.883 63.2372C167.387 63.066 169.04 63.0951 170.842 63.3245C172.638 63.5144 174.242 63.9123 175.654 64.5181C176.628 64.8638 177.35 65.4258 177.822 66.2041C178.332 66.9768 178.589 67.8052 178.593 68.6894C178.631 69.5286 178.42 70.3222 177.963 71.0702C177.544 71.8126 176.898 72.3659 176.024 72.73C175.184 73.0491 174.117 73.0382 172.823 72.6974C171.86 72.4305 170.791 72.2591 169.614 72.1832C168.471 72.0624 167.032 72.1239 165.297 72.3677C163.207 72.6615 161.642 73.2633 160.604 74.1733C159.605 75.0777 159.189 76.1215 159.355 77.3045C159.466 78.0932 159.876 78.7193 160.584 79.1827C161.327 79.6011 162.593 79.8856 164.384 80.0361L171.335 80.5671C175.198 80.8688 178.152 81.861 180.198 83.5439C182.278 85.1819 183.532 87.519 183.958 90.5555C184.291 92.9216 184.013 95.092 183.124 97.0667C182.236 99.0414 180.846 100.745 178.956 102.176C177.106 103.603 174.865 104.682 172.233 105.414L173.394 103.803L174.018 108.239C174.184 109.422 173.928 110.463 173.25 111.363C172.612 112.257 171.681 112.79 170.459 112.962Z"
|
||||
fill="#EBF441"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M188.682 118.51C186.826 119.96 186.496 122.642 187.947 124.499C189.398 126.355 192.079 126.685 193.936 125.234L199.569 120.833C195.984 154.032 170.281 181.839 135.713 186.697C101.025 191.572 68.5491 171.774 56.0461 140.665C56.0139 140.585 55.9796 140.506 55.9432 140.429L59.6221 138.371C61.6786 137.221 62.4131 134.621 61.2627 132.565C60.1122 130.508 57.5125 129.774 55.456 130.924L40.5616 139.256C38.5051 140.407 37.7706 143.007 38.921 145.063C40.0715 147.12 42.6712 147.854 44.7277 146.704L48.4451 144.624C62.602 178.84 98.526 200.541 136.9 195.148C152.63 192.937 166.709 186.464 178.135 177.06L188.646 184.981C195.686 190.286 205.693 188.88 210.998 181.84C216.303 174.8 214.897 164.793 207.857 159.488L198.468 152.413C203.45 143.239 206.738 133.083 207.978 122.416L211.903 127.44C213.354 129.297 216.035 129.626 217.892 128.175C219.749 126.725 220.078 124.043 218.627 122.186L205.493 105.375L188.682 118.51ZM191.58 163.076C192.412 161.98 193.217 160.863 193.995 159.727L202.721 166.303C205.997 168.772 206.652 173.428 204.183 176.704C201.715 179.98 197.058 180.635 193.782 178.166L184.541 171.203C185.56 170.169 186.551 169.11 187.513 168.026L193.005 172.164C194.416 173.227 196.422 172.945 197.486 171.534C198.55 170.122 198.268 168.116 196.856 167.052L191.58 163.076Z"
|
||||
fill="#EBF441"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_362_155">
|
||||
<rect width="256" height="256" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Logo
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import { useTheme } from 'next-themes'
|
||||
|
||||
type Values = string | number
|
||||
|
||||
interface NavTabsProps<T extends Values> {
|
||||
|
|
@ -17,24 +19,31 @@ const NavTabs = <T extends Values>({
|
|||
<>
|
||||
{values.map(([value, count], i) => (
|
||||
<button
|
||||
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 ${
|
||||
className={`relative 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-top-sm bg-th-active text-th-primary-2'
|
||||
: 'inner-shadow-bottom-sm default-transition bg-th-bkg-1 text-th-fgd-1 md:hover:bg-th-bkg-2'
|
||||
}`}
|
||||
key={`${value}` + i}
|
||||
onClick={() => onChange(value)}
|
||||
>
|
||||
{count ? <div className="mr-1.5 h-5 w-5" /> : null}
|
||||
{names ? names[i] : value}
|
||||
{count ? (
|
||||
<div
|
||||
className={`ml-2 rounded ${
|
||||
className={`ml-1.5 h-5 w-5 rounded-full text-xs ${
|
||||
value === activeValue ? 'bg-th-bkg-1' : 'bg-th-bkg-3'
|
||||
} px-1.5 py-0.5 `}
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm text-th-fgd-2">{count}</span>
|
||||
</div>
|
||||
) : null}
|
||||
{value === activeValue ? (
|
||||
<>
|
||||
<ZigZagLine className="absolute bottom-1.5 w-20" />
|
||||
<ZigZagLine className="absolute top-1.5 w-20" />
|
||||
</>
|
||||
) : null}
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
|
|
@ -42,3 +51,16 @@ const NavTabs = <T extends Values>({
|
|||
}
|
||||
|
||||
export default NavTabs
|
||||
|
||||
const ZigZagLine = ({ className }: { className?: string }) => {
|
||||
const { theme } = useTheme()
|
||||
return (
|
||||
<div
|
||||
className={`h-2 ${
|
||||
theme === 'Light'
|
||||
? `bg-[url('/images/zigzag.svg')]`
|
||||
: `bg-[url('/images/zigzag-dark.svg')]`
|
||||
} bg-contain bg-no-repeat ${className}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
|
|||
import UnstakeForm from './UnstakeForm'
|
||||
import StakeForm from './StakeForm'
|
||||
import DespositForm from './DepositForm'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
const set = mangoStore.getState().set
|
||||
|
||||
|
|
@ -60,7 +61,7 @@ const Positions = ({
|
|||
|
||||
return !showAddRemove ? (
|
||||
<>
|
||||
<div className="mb-2 flex items-center justify-between rounded-lg border-2 border-th-fgd-1 bg-th-bkg-1 px-6 py-3.5">
|
||||
<div className="mb-2 flex items-center justify-between rounded-xl border-2 border-th-fgd-1 bg-th-bkg-1 px-6 py-3.5">
|
||||
<p className="font-medium">{`You have ${numberOfPositions} active position${
|
||||
numberOfPositions !== 1 ? 's' : ''
|
||||
}`}</p>
|
||||
|
|
@ -87,8 +88,11 @@ const Positions = ({
|
|||
) : null
|
||||
})
|
||||
) : (
|
||||
<div className="flex justify-center rounded-2xl border-2 border-th-fgd-1 bg-th-bkg-1 p-6">
|
||||
<span>Nothing to see here...</span>
|
||||
<div className="flex min-h-[336px] items-center justify-center rounded-2xl border-2 border-th-fgd-1 bg-th-bkg-1 p-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-xl">😑</span>
|
||||
<span>Nothing to see here...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -145,13 +149,14 @@ const PositionItem = ({
|
|||
borrowBank: Bank | undefined
|
||||
}) => {
|
||||
const { connected } = useWallet()
|
||||
const { theme } = useTheme()
|
||||
const { jlpGroup, lstGroup } = useMangoGroup()
|
||||
const { stakeBalance, bank, pnl, acct, solPnl } = position
|
||||
const [showEditLeverageModal, setShowEditLeverageModal] = useState(false)
|
||||
const isJlpGroup = bank.name === 'JLP' || bank.name === 'USDC'
|
||||
|
||||
const handleAddNoPosition = (token: string) => {
|
||||
setActiveTab('Boost!')
|
||||
setActiveTab('Earn')
|
||||
set((state) => {
|
||||
state.selectedToken = token
|
||||
})
|
||||
|
|
@ -217,13 +222,9 @@ const PositionItem = ({
|
|||
|
||||
return (
|
||||
<div className="rounded-2xl border-2 border-th-fgd-1 bg-th-bkg-1 p-6">
|
||||
<div className="mb-4 flex flex-col border-b border-th-bkg-3 pb-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex flex-col pb-6 md:flex-row md:items-center md:justify-between">
|
||||
<div className="mb-4 flex items-center space-x-3 md:mb-0">
|
||||
<div
|
||||
className={`inner-shadow-bottom-sm flex h-12 w-12 items-center justify-center rounded-full border border-th-bkg-2 bg-gradient-to-b from-th-bkg-1 to-th-bkg-2`}
|
||||
>
|
||||
<TokenLogo bank={bank} size={28} />
|
||||
</div>
|
||||
<TokenLogo bank={bank} size={40} />
|
||||
<div>
|
||||
<h3>{formatTokenSymbol(bank.name)}</h3>
|
||||
<p>${bank.uiPrice.toFixed(2)}</p>
|
||||
|
|
@ -243,12 +244,19 @@ const PositionItem = ({
|
|||
) : (
|
||||
<Button onClick={() => handleAddNoPosition(bank.name)}>
|
||||
<p className="mb-1 text-base tracking-wider text-th-bkg-1">
|
||||
{`Boost! ${bank.name}`}
|
||||
{`Add`}
|
||||
</p>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div
|
||||
className={`bg-x-repeat h-2 w-full ${
|
||||
theme === 'Light'
|
||||
? `bg-[url('/images/zigzag-repeat.svg')]`
|
||||
: `bg-[url('/images/zigzag-repeat-dark.svg')]`
|
||||
} bg-contain opacity-20`}
|
||||
/>
|
||||
<div className="grid grid-cols-1 gap-4 pt-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<p className="mb-1 text-th-fgd-4">Position Size</p>
|
||||
<span className="text-xl font-bold text-th-fgd-1">
|
||||
|
|
@ -392,10 +400,12 @@ const PositionItem = ({
|
|||
})
|
||||
setShowEditLeverageModal(!showEditLeverageModal)
|
||||
}}
|
||||
className="default-transition flex items-center rounded-md border-b-2 border-th-bkg-4 bg-th-bkg-2 px-2.5 py-1 text-th-fgd-1 md:hover:bg-th-bkg-3"
|
||||
className="raised-button-neutral group flex h-8 items-center rounded-lg px-3 after:rounded-lg after:border after:border-th-bkg-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<AdjustmentsHorizontalIcon className="mr-1.5 h-4 w-4" />
|
||||
<span className="font-bold">Edit</span>
|
||||
<span className="flex w-full items-center group-hover:mt-1 group-active:mt-2">
|
||||
<AdjustmentsHorizontalIcon className="mr-1.5 h-4 w-4" />
|
||||
<span className="font-bold">Edit</span>
|
||||
</span>
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,15 +7,14 @@ import DespositForm from './DepositForm'
|
|||
import { EnterBottomExitBottom } from './shared/Transitions'
|
||||
import TokenSelect from './TokenSelect'
|
||||
import { IconButton } from './shared/Button'
|
||||
import HeroTokenButton, {
|
||||
HERO_TOKEN_BUTTON_CLASSES,
|
||||
HERO_TOKEN_IMAGE_WRAPPER_CLASSES,
|
||||
} from './HeroTokenButton'
|
||||
import Image from 'next/image'
|
||||
import HeroTokenButton from './HeroTokenButton'
|
||||
import useStakeableTokens, { StakeableToken } from 'hooks/useStakeableTokens'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
const set = mangoStore.getState().set
|
||||
|
||||
export const YIELD_BUTTON_CLASSES = `flex items-center justify-center rounded-xl raised-button-neutral group after:rounded-xl h-32 px-6 md:px-6 w-full after:border after:border-th-bkg-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50`
|
||||
|
||||
export const SOL_YIELD = [
|
||||
'bSOL',
|
||||
'MSOL',
|
||||
|
|
@ -28,13 +27,11 @@ export const SOL_YIELD = [
|
|||
'mangoSOL',
|
||||
'compassSOL',
|
||||
]
|
||||
const USDC_YIELD = ['JLP', 'USDC']
|
||||
|
||||
const Stake = () => {
|
||||
const [tokensToShow, setTokensToShow] = useState('')
|
||||
const { theme } = useTheme()
|
||||
const [showTokenSelect, setShowTokenSelect] = useState(false)
|
||||
const selectedToken = mangoStore((s) => s.selectedToken)
|
||||
// const walletTokens = mangoStore((s) => s.wallet.tokens)
|
||||
const { stakeableTokens } = useStakeableTokens()
|
||||
|
||||
const handleTokenSelect = useCallback((token: string) => {
|
||||
|
|
@ -46,33 +43,8 @@ const Stake = () => {
|
|||
|
||||
const selectableTokens = useMemo(() => {
|
||||
return stakeableTokens.sort((a: StakeableToken, b: StakeableToken) => {
|
||||
// const aClientContext = getStakableTokensDataForTokenName(
|
||||
// a.token.symbol,
|
||||
// ).clientContext
|
||||
// const aWalletBalance = walletBalanceForToken(
|
||||
// walletTokens,
|
||||
// a.token.symbol,
|
||||
// aClientContext,
|
||||
// )
|
||||
// const bClientContext = getStakableTokensDataForTokenName(
|
||||
// b.token.symbol,
|
||||
// ).clientContext
|
||||
// const bWalletBalance = walletBalanceForToken(
|
||||
// walletTokens,
|
||||
// b.token.symbol,
|
||||
// bClientContext,
|
||||
// )
|
||||
|
||||
// const aMaxAmount = aWalletBalance.maxAmount
|
||||
// const bMaxAmount = bWalletBalance.maxAmount
|
||||
const aApy = a.estNetApy
|
||||
const bApy = b.estNetApy
|
||||
|
||||
// if (bMaxAmount !== aMaxAmount) {
|
||||
// return bMaxAmount - aMaxAmount
|
||||
// } else {
|
||||
// return bApy - aApy
|
||||
// }
|
||||
return bApy - aApy
|
||||
})
|
||||
}, [stakeableTokens])
|
||||
|
|
@ -122,83 +94,39 @@ const Stake = () => {
|
|||
!selectedToken ? (
|
||||
<>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-full border-b border-th-bkg-3 pb-6 text-center md:pb-8">
|
||||
<h1 className="mb-1">Let's Boost!</h1>
|
||||
<p>Leverage up your liquid staking yield.</p>
|
||||
</div>
|
||||
<div className="w-full py-6 md:py-8">
|
||||
<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
|
||||
className={`${HERO_TOKEN_BUTTON_CLASSES} ${
|
||||
tokensToShow === 'SOL' ? 'bg-th-bkg-2' : ''
|
||||
}`}
|
||||
onClick={() => setTokensToShow('SOL')}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={HERO_TOKEN_IMAGE_WRAPPER_CLASSES}>
|
||||
<Image
|
||||
src={`/icons/sol.svg`}
|
||||
width={32}
|
||||
height={32}
|
||||
alt="Select a token"
|
||||
/>
|
||||
</div>
|
||||
<span>SOL</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className={`${HERO_TOKEN_BUTTON_CLASSES} ${
|
||||
tokensToShow === 'USDC' ? 'bg-th-bkg-2' : ''
|
||||
}`}
|
||||
onClick={() => setTokensToShow('USDC')}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={HERO_TOKEN_IMAGE_WRAPPER_CLASSES}>
|
||||
<Image
|
||||
src={`/icons/usdc.svg`}
|
||||
width={32}
|
||||
height={32}
|
||||
alt="Select a token"
|
||||
/>
|
||||
</div>
|
||||
<span>USDC</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-full pb-6 text-center md:pb-8">
|
||||
<h1 className="mb-1">Welcome yield fan 👋</h1>
|
||||
<p>
|
||||
It's time to leverage up your liquid staking yield.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`bg-x-repeat h-2 w-full ${
|
||||
theme === 'Light'
|
||||
? `bg-[url('/images/zigzag-repeat.svg')]`
|
||||
: `bg-[url('/images/zigzag-repeat-dark.svg')]`
|
||||
} bg-contain opacity-20`}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3 pt-6 md:pt-8">
|
||||
<h2 className="text-center text-lg font-normal">
|
||||
Select to earn leveraged yield
|
||||
</h2>
|
||||
{selectableTokens.map((token) => {
|
||||
const { symbol } = token.token
|
||||
return (
|
||||
<HeroTokenButton
|
||||
key={symbol}
|
||||
onClick={() =>
|
||||
set((state) => {
|
||||
state.selectedToken = symbol
|
||||
})
|
||||
}
|
||||
tokenInfo={token}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{tokensToShow ? (
|
||||
<div className="space-y-3 border-t border-th-bkg-3 pt-6 md:pt-8">
|
||||
<h2 className="text-center text-lg font-normal">
|
||||
Select a token to Boost!
|
||||
</h2>
|
||||
{selectableTokens
|
||||
.filter((t) => {
|
||||
if (tokensToShow === 'SOL') {
|
||||
return SOL_YIELD.includes(t.token.symbol)
|
||||
} else if (tokensToShow === 'USDC') {
|
||||
return USDC_YIELD.includes(t.token.symbol)
|
||||
} else return
|
||||
})
|
||||
.map((token) => {
|
||||
const { symbol } = token.token
|
||||
return (
|
||||
<HeroTokenButton
|
||||
key={symbol}
|
||||
onClick={() =>
|
||||
set((state) => {
|
||||
state.selectedToken = symbol
|
||||
})
|
||||
}
|
||||
tokenInfo={token}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
|
@ -214,7 +142,7 @@ const Stake = () => {
|
|||
>
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
<h2>Boost! {selectedToken}</h2>
|
||||
<h2>Add {selectedToken}</h2>
|
||||
</div>
|
||||
{selectedToken === 'USDC' ? (
|
||||
<DespositForm
|
||||
|
|
@ -243,36 +171,6 @@ const Stake = () => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* {selectedToken ? (
|
||||
<div className="fixed bottom-0 left-0 z-20 w-full lg:bottom-8 lg:left-8 lg:w-auto">
|
||||
{isDesktop ? (
|
||||
<a
|
||||
className="raised-button text-shadow group flex h-20 w-20 cursor-pointer items-center justify-center p-3 text-center text-base font-extrabold after:rounded-full"
|
||||
href={swapUrl}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<div className="group-hover:mt-1 group-active:mt-2">
|
||||
<p className="text-th-bkg-1">Buy</p>
|
||||
<p className="-mt-1.5 text-th-bkg-1">
|
||||
{formatTokenSymbol(selectedToken)}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
) : (
|
||||
<div className="flex justify-end border-t-2 border-th-fgd-1 bg-th-bkg-1 px-4 py-3">
|
||||
<a href={swapUrl} rel="noopener noreferrer" target="_blank">
|
||||
<div className="flex items-center">
|
||||
<span className="mr-1.5 font-bold">{`Buy ${formatTokenSymbol(
|
||||
selectedToken,
|
||||
)}`}</span>
|
||||
<ArrowTopRightOnSquareIcon className="-mt-0.5 h-5 w-5" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null} */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,17 +54,16 @@ import {
|
|||
JLP_BORROW_TOKEN,
|
||||
LST_BORROW_TOKEN,
|
||||
} from 'utils/constants'
|
||||
import {
|
||||
HERO_TOKEN_BUTTON_CLASSES,
|
||||
HERO_TOKEN_IMAGE_WRAPPER_CLASSES,
|
||||
} from './HeroTokenButton'
|
||||
import { HERO_TOKEN_IMAGE_WRAPPER_CLASSES } from './HeroTokenButton'
|
||||
import Image from 'next/image'
|
||||
import useQuoteRoutes from 'hooks/useQuoteRoutes'
|
||||
import { YIELD_BUTTON_CLASSES } from './Stake'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
const set = mangoStore.getState().set
|
||||
|
||||
export const NUMBERFORMAT_CLASSES =
|
||||
'inner-shadow-top-sm w-full rounded-xl border border-th-bkg-3 bg-th-input-bkg p-3 pl-12 pr-4 text-left font-bold text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-bkg-4 md:hover:focus-visible:border-th-fgd-4'
|
||||
'inner-shadow-top-sm w-full rounded-lg border border-th-bkg-3 bg-th-input-bkg p-3 pl-12 pr-4 text-left font-bold text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-bkg-4 md:hover:focus-visible:border-th-fgd-4'
|
||||
|
||||
interface StakeFormProps {
|
||||
token: string
|
||||
|
|
@ -107,6 +106,7 @@ export const walletBalanceForToken = (
|
|||
// }
|
||||
|
||||
function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
|
||||
const { theme } = useTheme()
|
||||
const { t } = useTranslation(['common', 'account'])
|
||||
const [depositToken, setDepositToken] = useState(selectedToken)
|
||||
const [inputAmount, setInputAmount] = useState('')
|
||||
|
|
@ -418,50 +418,67 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<h2 className="mb-3 text-center text-lg font-normal">Token to deposit</h2>
|
||||
<div className="mb-6 grid grid-cols-2 gap-4 border-b border-th-bkg-3 pb-6 text-lg font-bold md:pb-8">
|
||||
<h2 className="text-center text-lg font-normal">Token to deposit</h2>
|
||||
<p className="mb-4 text-center text-sm text-th-fgd-4">
|
||||
(If you deposit {clientContext === 'jlp' ? 'USDC' : 'SOL'} it will be
|
||||
swapped to {selectedToken})
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-4 pb-6 text-lg font-bold md:pb-8">
|
||||
<button
|
||||
className={`${HERO_TOKEN_BUTTON_CLASSES} ${
|
||||
depositToken === selectedToken ? 'bg-th-bkg-2' : ''
|
||||
className={`${YIELD_BUTTON_CLASSES} ${
|
||||
depositToken === selectedToken
|
||||
? 'after:bg-th-bkg-2 after:md:hover:bg-th-bkg-2'
|
||||
: ''
|
||||
}`}
|
||||
onClick={() => handleDepositTokenChange(selectedToken)}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={HERO_TOKEN_IMAGE_WRAPPER_CLASSES}>
|
||||
<div className="flex flex-col items-center group-hover:mt-2 group-active:mt-3">
|
||||
<div className="rounded-full border-4 border-th-bkg-1">
|
||||
<Image
|
||||
src={`/icons/${selectedToken.toLowerCase()}.svg`}
|
||||
width={32}
|
||||
height={32}
|
||||
width={40}
|
||||
height={40}
|
||||
alt="Select a token"
|
||||
/>
|
||||
</div>
|
||||
<span>{selectedToken}</span>
|
||||
<span className="mt-3 leading-none">{selectedToken}</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
className={`${HERO_TOKEN_BUTTON_CLASSES} ${
|
||||
depositToken !== selectedToken ? 'bg-th-bkg-2' : ''
|
||||
className={`${YIELD_BUTTON_CLASSES} ${
|
||||
depositToken !== selectedToken
|
||||
? 'after:bg-th-bkg-2 after:md:hover:bg-th-bkg-2'
|
||||
: ''
|
||||
}`}
|
||||
onClick={() =>
|
||||
handleDepositTokenChange(clientContext === 'jlp' ? 'USDC' : 'SOL')
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className={HERO_TOKEN_IMAGE_WRAPPER_CLASSES}>
|
||||
<div className="flex flex-col items-center group-hover:mt-2 group-active:mt-3">
|
||||
<div className="rounded-full border-4 border-th-bkg-1">
|
||||
<Image
|
||||
src={
|
||||
clientContext === 'jlp' ? '/icons/usdc.svg' : '/icons/sol.svg'
|
||||
}
|
||||
width={32}
|
||||
height={32}
|
||||
width={40}
|
||||
height={40}
|
||||
alt="Select a token"
|
||||
/>
|
||||
</div>
|
||||
<span>{clientContext === 'jlp' ? 'USDC' : 'SOL'}</span>
|
||||
<span className="mt-3 leading-none">
|
||||
{clientContext === 'jlp' ? 'USDC' : 'SOL'}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between">
|
||||
<div
|
||||
className={`bg-x-repeat h-2 w-full ${
|
||||
theme === 'Light'
|
||||
? `bg-[url('/images/zigzag-repeat.svg')]`
|
||||
: `bg-[url('/images/zigzag-repeat-dark.svg')]`
|
||||
} bg-contain opacity-20`}
|
||||
/>
|
||||
<div className="flex flex-col justify-between pt-6 md:pt-8">
|
||||
<div className="pb-8">
|
||||
<SolBalanceWarnings
|
||||
amount={inputAmount}
|
||||
|
|
@ -482,9 +499,9 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
|
|||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-2 border-b border-th-bkg-3 pb-6 md:pb-8">
|
||||
<div className="grid grid-cols-2 pb-6 md:pb-8">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text="Amount to Boost!" />
|
||||
<Label text="Amount" />
|
||||
<div className="mb-2 flex items-center space-x-2">
|
||||
<MaxAmountButton
|
||||
decimals={tokenMax.maxDecimals}
|
||||
|
|
@ -543,7 +560,7 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
|
|||
desc={
|
||||
<div>
|
||||
<p>
|
||||
No {formatTokenSymbol(selectedToken)} balance to Boost!{' '}
|
||||
No {formatTokenSymbol(selectedToken)} balance to add.{' '}
|
||||
<a
|
||||
className="font-bold"
|
||||
href={`https://app.mango.markets/swap?in=USDC&out=${selectedToken}&walletSwap=true`}
|
||||
|
|
@ -574,7 +591,7 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
|
|||
<InlineNotification
|
||||
desc={`Your ${inputAmount} ${depositToken} will be swapped to ${
|
||||
uiOutAmount ? `~${uiOutAmount}` : ''
|
||||
} ${selectedToken} before Boosting!`}
|
||||
} ${selectedToken}`}
|
||||
type="info"
|
||||
/>
|
||||
)}
|
||||
|
|
@ -594,6 +611,13 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
|
|||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div
|
||||
className={`bg-x-repeat h-2 w-full ${
|
||||
theme === 'Light'
|
||||
? `bg-[url('/images/zigzag-repeat.svg')]`
|
||||
: `bg-[url('/images/zigzag-repeat-dark.svg')]`
|
||||
} bg-contain opacity-20`}
|
||||
/>
|
||||
<div className="mt-6 md:mt-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label text="Leverage" />
|
||||
|
|
@ -612,7 +636,7 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
|
|||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`w-full rounded-xl border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
|
||||
className={`w-full rounded-lg border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
|
||||
open ? 'rounded-b-none border-b-0' : ''
|
||||
}`}
|
||||
>
|
||||
|
|
@ -843,7 +867,7 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
|
|||
})}
|
||||
</div>
|
||||
) : ipAllowed ? (
|
||||
`Boost! ${
|
||||
`Add ${
|
||||
isSwapMode && uiOutAmount ? uiOutAmount : inputAmount
|
||||
} ${formatTokenSymbol(selectedToken)}`
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@ import useOnlineStatus from 'hooks/useOnlineStatus'
|
|||
import ThemeToggle from './ThemeToggle'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import BoostLogo from './BoostLogo'
|
||||
import { IconButton } from './shared/Button'
|
||||
import { Transition } from '@headlessui/react'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import Image from 'next/image'
|
||||
|
||||
const TopBar = () => {
|
||||
const { connected } = useWallet()
|
||||
|
|
@ -32,23 +32,18 @@ const TopBar = () => {
|
|||
<div className="mb-8 grid h-20 grid-cols-9 px-6">
|
||||
<div className="col-span-3 flex items-center sm:col-span-1 md:col-span-3">
|
||||
<Link href="/" shallow={true}>
|
||||
<div className="group flex items-center">
|
||||
<BoostLogo className="h-auto w-12 shrink-0 cursor-pointer group-hover:animate-shake" />
|
||||
<span className="text-shadow ml-2 hidden text-[32px] font-black text-th-bkg-1 md:block">
|
||||
Boost!
|
||||
</span>
|
||||
<div className="ml-2.5 hidden rounded border border-th-fgd-1 bg-th-active px-1.5 py-1 md:block">
|
||||
<span className="block font-mono text-xxs font-black leading-none text-th-fgd-1">
|
||||
v2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Image
|
||||
src="/logos/yield-fans.png"
|
||||
alt="Logo"
|
||||
height={48}
|
||||
width={48}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="col-span-3 flex items-center space-x-4 sm:col-span-4 md:col-span-3 md:justify-center">
|
||||
{!isMobile ? (
|
||||
<>
|
||||
<NavLink active={pathname === '/'} path="/" text="Boost!" />
|
||||
<NavLink active={pathname === '/'} path="/" text="Home" />
|
||||
<NavLink
|
||||
active={pathname === '/stats'}
|
||||
path="/stats"
|
||||
|
|
|
|||
|
|
@ -8,14 +8,16 @@ import SheenLoader from './shared/SheenLoader'
|
|||
const TransactionHistory = () => {
|
||||
const { history, isLoading, refetch } = useAccountHistory()
|
||||
return (
|
||||
<div className="flex min-h-[380px] flex-col space-y-2 rounded-2xl border-2 border-th-fgd-1 bg-th-bkg-1 p-6">
|
||||
<div className="text-center text-sm opacity-50">
|
||||
History may be delayed by a few minutes.{' '}
|
||||
<div className="flex min-h-[398px] flex-col space-y-2 rounded-2xl border-2 border-th-fgd-1 bg-th-bkg-1 p-6">
|
||||
<div className="text-center text-sm">
|
||||
<span className="text-th-fgd-4">
|
||||
History may be delayed by a few minutes.
|
||||
</span>{' '}
|
||||
<button
|
||||
className="text-blue-400 hover:text-blue-600 active:text-purple-900"
|
||||
className="text-th-link md:hover:text-th-link-hover"
|
||||
onClick={() => refetch()}
|
||||
>
|
||||
Click to refresh.
|
||||
Click to refresh
|
||||
</button>
|
||||
</div>
|
||||
{history?.length ? (
|
||||
|
|
@ -38,7 +40,10 @@ const TransactionHistory = () => {
|
|||
))
|
||||
) : (
|
||||
<div className="flex grow flex-col items-center justify-center">
|
||||
<span className="text-center">No activity found...</span>
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-xl">😑</span>
|
||||
<span>No activity found...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -382,12 +382,12 @@ function UnstakeForm({
|
|||
) : (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`w-full rounded-xl border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
|
||||
className={`w-full rounded-lg border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
|
||||
open ? 'rounded-b-none border-b-0' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium">Staked Amount</p>
|
||||
<p className="font-medium">Staked amount</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-lg font-bold text-th-fgd-1">
|
||||
<FormatNumericValue
|
||||
|
|
@ -405,7 +405,7 @@ function UnstakeForm({
|
|||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="space-y-2 rounded-xl rounded-t-none border-2 border-t-0 border-th-bkg-3 px-4 pb-3">
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">Staked Amount</p>
|
||||
<p className="text-th-fgd-4">Staked amount</p>
|
||||
<span className="font-bold text-th-fgd-1">
|
||||
<BankAmountWithValue
|
||||
amount={tokenMax.maxAmount}
|
||||
|
|
@ -415,7 +415,7 @@ function UnstakeForm({
|
|||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">
|
||||
Staked Amount with borrow
|
||||
Staked amount with borrow
|
||||
</p>
|
||||
<span className="font-bold text-th-fgd-1">
|
||||
<BankAmountWithValue
|
||||
|
|
|
|||
|
|
@ -3,93 +3,92 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
|||
|
||||
const FAQS = [
|
||||
{
|
||||
question: 'Why would I want to Boost!?',
|
||||
question: 'Why would I want to add leverage?',
|
||||
answer: (
|
||||
<>
|
||||
<h3>JLP/Liquid staking tokens</h3>
|
||||
<p>
|
||||
Boost! let's you easily add leverage to your token positions. The
|
||||
tokens listed on Boost! (excluding USDC) all have native yield so in
|
||||
the right market conditions you can borrow to increase your exposure
|
||||
to this native yield. When the extra yield is larger than your cost of
|
||||
borrowing you earn more yield than you would by simply holding the
|
||||
token.
|
||||
The tokens listed on yield.fan (excluding USDC) all have native yield
|
||||
so in the right market conditions you can borrow to increase your
|
||||
exposure to this native yield. When the extra yield is larger than
|
||||
your cost of borrowing you earn more yield than you would by simply
|
||||
holding the token.
|
||||
</p>
|
||||
<h3>USDC</h3>
|
||||
<p>
|
||||
Boosting USDC is different in that when you deposit USDC you are
|
||||
adding it to the lending pool for JLP boosters. There is no leverage
|
||||
involved and JLP borrowers pay a variable interest rate to borrow your
|
||||
USDC.
|
||||
USDC is different in that when you deposit USDC you are adding it to
|
||||
the lending pool for users adding leverage to JLP. There is no
|
||||
leverage involved and JLP borrowers pay a variable interest rate to
|
||||
borrow your USDC.
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'How does Boost! work?',
|
||||
question: 'How does it work?',
|
||||
answer: (
|
||||
<>
|
||||
<h3>JLP</h3>
|
||||
<p>
|
||||
Boosting JLP works by using your deposited JLP as collateral to borrow
|
||||
USDC which is then swapped to JLP. This leaves you with an increased
|
||||
balance of JLP and a borrowed amount of USDC.
|
||||
Adding leverage to JLP works by using your deposited JLP as collateral
|
||||
to borrow USDC which is then swapped to JLP. This leaves you with an
|
||||
increased balance of JLP and a borrowed amount of USDC.
|
||||
</p>
|
||||
<p>The JLP pool is completely isolated from Mango v4.</p>
|
||||
<h3>Liquid staking tokens (LSTs)</h3>
|
||||
<p>
|
||||
Boosting liquid staking tokens (mSOL, JitoSOL, bSOL etc) works by
|
||||
using your deposited token as collateral to borrow SOL which is then
|
||||
swapped to more of your deposited token. This leaves you with an
|
||||
increased balance of your LST and a borrowed amount of USDC.
|
||||
Adding leverage to liquid staking tokens (mSOL, JitoSOL, bSOL etc)
|
||||
works by using your deposited token as collateral to borrow SOL which
|
||||
is then swapped to more of your deposited token. This leaves you with
|
||||
an increased balance of your LST and a borrowed amount of USDC.
|
||||
</p>
|
||||
<p>
|
||||
The pools for LSTs on Boost! draw from the same liquidity available on
|
||||
Mango v4.
|
||||
The pools for LSTs on yield.fan draw from the same liquidity available
|
||||
on Mango v4.
|
||||
</p>
|
||||
<h3>USDC</h3>
|
||||
<p>
|
||||
USDC is part of the isolated JLP group. When you deposit USDC it will
|
||||
be lent out to JLP boosters. You earn a varialbe interest rate in
|
||||
return that is determined by the amount of USDC deposited and the
|
||||
amount borrowed.
|
||||
be lent out to users adding leverage to JLP. You earn a varialbe
|
||||
interest rate in return that is determined by the amount of USDC
|
||||
deposited and the amount borrowed.
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'How does unboosting work?',
|
||||
question: 'How do I withdraw?',
|
||||
answer: (
|
||||
<>
|
||||
<h3>JLP/Liquid staking tokens</h3>
|
||||
<p>
|
||||
Unboosting works by unwinding your leveraged position. Your borrow
|
||||
will be repaid by swapping the token you boosted to the token you
|
||||
Withdrawals work by unwinding your leveraged position. Your borrow
|
||||
will be repaid by swapping the token you leveraged to the token you
|
||||
borrowed with the remainder being withdrawn to your wallet.
|
||||
</p>
|
||||
<p>
|
||||
There are no fees associated with unboosting however, there could be
|
||||
There are no fees associated with withdrawals however, there could be
|
||||
up to 1% slippage when swapping to repay your loan.
|
||||
</p>
|
||||
<h3>USDC</h3>
|
||||
<p>
|
||||
Unboosting USDC removes it from the lending pool and withdraws it to
|
||||
Withdrawing USDC removes it from the lending pool and withdraws it to
|
||||
your wallet.
|
||||
</p>
|
||||
<p>There are no fees associated with unboosting USDC.</p>
|
||||
<p>There are no fees associated with withdrawing USDC.</p>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'Is boosting always profitalbe?',
|
||||
question: 'Is adding leverage always profitalbe?',
|
||||
answer: (
|
||||
<>
|
||||
<h3>JLP/Liquid staking tokens</h3>
|
||||
<p>
|
||||
No. For one, there is a risk of liquidation (especially when boosting
|
||||
JLP). If the price of your boosted token drops below your liquidation
|
||||
threshold you will lose some or all of your funds. This risk increases
|
||||
with the amount of leverage you use.
|
||||
No. For one, there is a risk of liquidation (especially when
|
||||
leveraging JLP). If the price of your leveraged token drops below your
|
||||
liquidation threshold you will lose some or all of your funds. This
|
||||
risk increases with the amount of leverage you use.
|
||||
</p>
|
||||
<p>
|
||||
There are also fees and costs for borrowing that will affect your
|
||||
|
|
@ -99,9 +98,9 @@ const FAQS = [
|
|||
</p>
|
||||
<h3>USDC</h3>
|
||||
<p>
|
||||
Boosting USDC is always profitable unless there is a systemic failure
|
||||
that results in loss of funds. See the risks FAQ to learn about some
|
||||
of the potential risks of using Boost!
|
||||
Depositing USDC is always profitable unless there is a systemic
|
||||
failure that results in loss of funds. See the risks FAQ to learn
|
||||
about some of the potential risks of using yield.fan
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
|
|
@ -110,14 +109,14 @@ const FAQS = [
|
|||
question: 'What are the costs/fees?',
|
||||
answer: (
|
||||
<>
|
||||
<p>The costs and fees depend on the token you are boosting.</p>
|
||||
<p>The costs and fees depend on the token you are leveraging.</p>
|
||||
<h3>JLP/Liquid staking tokens</h3>
|
||||
<p className="font-bold">Borrow Interest Rate</p>
|
||||
<p>
|
||||
This variable APR can change significantly and frequently depending on
|
||||
the ratio of deposits and borrows. It is charged continuosly on the
|
||||
balance of your USDC or SOL borrow and paid to USDC depositors
|
||||
(lenders) on Boost! and SOL depositors on Mango v4.
|
||||
(lenders) on yield.fan and SOL depositors on Mango v4.
|
||||
</p>
|
||||
<p className="font-bold">Loan Origination Fee</p>
|
||||
<p>
|
||||
|
|
@ -149,12 +148,12 @@ const FAQS = [
|
|||
</p>
|
||||
<p className="font-bold">Position Entry Costs</p>
|
||||
<p>
|
||||
When boosting the USDC or SOL you borrow gets swapped via Jupiter to
|
||||
more of your boosted token. This can incur up to 1% slippage resulting
|
||||
in an entry price worse than expected.
|
||||
When adding funds the USDC or SOL you borrow gets swapped via Jupiter
|
||||
to more of your leveraged token. This can incur up to 1% slippage
|
||||
resulting in an entry price worse than expected.
|
||||
</p>
|
||||
<h3>USDC</h3>
|
||||
<p>There are no fees associated with boosting USDC.</p>
|
||||
<p>There are no fees associated with depositing USDC.</p>
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
|
@ -165,8 +164,8 @@ const FAQS = [
|
|||
<p>
|
||||
When you open a leveraged position there are some immediate costs
|
||||
associated with borrowing. You'll be paying a loan origination
|
||||
fee, interest on the borrowed amount, and a collateral fee (if
|
||||
boosting JLP) instantaneously. Over time and in the right market
|
||||
fee, interest on the borrowed amount, and a collateral fee (if adding
|
||||
leverage to JLP) instantaneously. Over time and in the right market
|
||||
conditions your "Total Earned" will become positive.
|
||||
</p>
|
||||
</>
|
||||
|
|
@ -178,12 +177,12 @@ const FAQS = [
|
|||
<>
|
||||
<p>
|
||||
The following risks are non-exhaustive. It's important to have a
|
||||
good understanding of these risks and how Boost! works before
|
||||
good understanding of these risks and how yield.fan works before
|
||||
depositing any funds
|
||||
</p>
|
||||
<h3>Code</h3>
|
||||
<p>
|
||||
Boost! is an integration with the Mango v4 program. Although it is
|
||||
yield.fan is an integration with the Mango v4 program. Although it is
|
||||
open source and has been audited extensively, it's possible bugs
|
||||
and exploits exist that could result in the loss of funds. It's
|
||||
also possible for a bug in the UI to affect the ability to open and
|
||||
|
|
@ -198,27 +197,24 @@ const FAQS = [
|
|||
</p>
|
||||
<h3>Liquidity</h3>
|
||||
<p>
|
||||
Opening and closing positions on Boost! relies on swapping between the
|
||||
staking tokens and USDC without significant price impact. During an
|
||||
extreme market event there could be issues liquidating positions
|
||||
effectively. This could affect the liquidity available to open/close
|
||||
positions.
|
||||
Opening and closing positions relies on swapping between the staking
|
||||
tokens and USDC without significant price impact. During an extreme
|
||||
market event there could be issues liquidating positions effectively.
|
||||
This could affect the liquidity available to open/close positions.
|
||||
</p>
|
||||
<h3>Oracles</h3>
|
||||
<p>
|
||||
The price data for Boost! comes from third party oracle providers.
|
||||
It's possible for the data to be incorrect due to a failure with
|
||||
the oracle provider. This could result in bad liquidations and loss of
|
||||
funds.
|
||||
The price data comes from third party oracle providers. It's
|
||||
possible for the data to be incorrect due to a failure with the oracle
|
||||
provider. This could result in bad liquidations and loss of funds.
|
||||
</p>
|
||||
<h3>Yield Duration</h3>
|
||||
<p>
|
||||
When you borrow USDC or SOL to open a position on Boost! you'll
|
||||
be paying an initial loan origination fee, interest on the borrowed
|
||||
amount, and a collateral fee (if boosting JLP) instantaneously. This
|
||||
means you could open a position and close it before earning any
|
||||
additional yeild, whilst paying interest and collateral fees to borrow
|
||||
USDC or SOL.
|
||||
When you borrow USDC or SOL to open a position you'll be paying
|
||||
an initial loan origination fee, interest on the borrowed amount, and
|
||||
a collateral fee instantaneously. This means you could open a position
|
||||
and close it before earning any additional yeild, whilst paying
|
||||
interest and collateral fees to borrow USDC or SOL.
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
|
|
@ -228,16 +224,16 @@ const FAQS = [
|
|||
answer: (
|
||||
<p>
|
||||
The price of JLP vs USDC. JLP is a liquidity pool provider token
|
||||
composed of assets, trading fees and traders profits and losses. Boost!
|
||||
increases the position size of your staking token by borrowing USDC.
|
||||
This means you earn more of the staking reward every epoch. It's
|
||||
important to account for the cost of borrowing USDC. This is displayed
|
||||
in the UI.
|
||||
composed of assets, trading fees and traders profits and losses.
|
||||
yield.fan increases the position size of your staking token by borrowing
|
||||
USDC. This means you earn more of the staking reward every epoch.
|
||||
It's important to account for the cost of borrowing USDC. This is
|
||||
displayed in the UI.
|
||||
</p>
|
||||
),
|
||||
},
|
||||
{
|
||||
question: 'Why is my Ledger not working with Boost!?',
|
||||
question: 'Why is my Ledger not working?',
|
||||
answer: (
|
||||
<p>
|
||||
If your Ledger isn't working it's most likely because it
|
||||
|
|
@ -246,10 +242,10 @@ const FAQS = [
|
|||
),
|
||||
},
|
||||
{
|
||||
question: 'Who made Boost!?',
|
||||
question: 'Who made this?',
|
||||
answer: (
|
||||
<p>
|
||||
Boost! is made and maintained by long-term contributors to{' '}
|
||||
yield.fan is made and maintained by long-term contributors to{' '}
|
||||
<a
|
||||
href="https://dao.mango.markets"
|
||||
target="_blank"
|
||||
|
|
@ -268,127 +264,6 @@ const FaqsPage = () => {
|
|||
<div className="rounded-2xl border-2 border-th-fgd-1 bg-th-bkg-1 p-6">
|
||||
<h1 className="mb-4">FAQs</h1>
|
||||
<div className="space-y-2">
|
||||
{/* <Disclosure key={'How does Boost! work?'}>
|
||||
{({ open }) => (
|
||||
<div>
|
||||
<Disclosure.Button
|
||||
className={`w-full rounded-xl border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
|
||||
open ? 'rounded-b-none border-b-0' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium">{'How does Boost! work?'}</p>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : ''
|
||||
} h-6 w-6 shrink-0 text-th-fgd-1`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="space-y-2 rounded-xl rounded-t-none border-2 border-t-0 border-th-bkg-3 px-4 pb-3">
|
||||
<p>
|
||||
Leveraged staking with Boost! amplifies yields by recursively
|
||||
borrowing and lending between SOL and its supported tokens:
|
||||
mSOL, jitoSOL, bSOL, and stSOL. Users can deposit any of these
|
||||
tokens and then borrow SOL to enhance their returns.
|
||||
</p>
|
||||
|
||||
<p>Example with jitoSOL:</p>
|
||||
<ul className="list-inside list-disc">
|
||||
<li>
|
||||
A user deposits jitoSOL into Mango's borrowing/lending
|
||||
program via Boost!.
|
||||
</li>
|
||||
<li>
|
||||
Boost! then leverages the deposited jitoSOL to borrow SOL,
|
||||
based on the user's desired leverage ratio on Mango.
|
||||
</li>
|
||||
<li>
|
||||
This process effectively increases the user's position
|
||||
size in jitoSOL, amplifying the base yield.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
When the returns from staking surpass the costs of borrowing,
|
||||
users enjoy a premium from this enhanced staking with Boost!.
|
||||
</p>
|
||||
</Disclosure.Panel>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure>
|
||||
<Disclosure key={'What are the risks?'}>
|
||||
{({ open }) => (
|
||||
<div>
|
||||
<Disclosure.Button
|
||||
className={`w-full rounded-xl border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
|
||||
open ? 'rounded-b-none border-b-0' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium">{'What are the risks?'}</p>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : ''
|
||||
} h-6 w-6 shrink-0 text-th-fgd-1`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="space-y-2 rounded-xl rounded-t-none border-2 border-t-0 border-th-bkg-3 px-4 pb-3">
|
||||
<ul className="list-inside list-disc">
|
||||
<li>
|
||||
There's a risk that tokens like mSOL, jitoSOL, bSOL, or
|
||||
stSOL may deviate significantly from the SOL price. If the
|
||||
token prices drop by 20% or SOL gains a premium of 18.5%,
|
||||
your position may face liquidation, particularly for high
|
||||
leverage positions. Deppegs, although infrequent, can occur
|
||||
due to market liquidity, pricing anomalies, or smart
|
||||
contract bugs.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Liquidity pertains to quickly converting staked tokens into
|
||||
SOL without major price impact.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
The underlying liqduid staking tokens as well as Mango are
|
||||
susceptible to risks linked to smart contract flaws and UI
|
||||
mishaps, which might lead to unexpected results or fund
|
||||
losses.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
If your margin ratio falls below maintenance, you risk
|
||||
liquidation. A drop in staked asset value below the
|
||||
maintenance margin can result in partial or total sale of
|
||||
your collateral. Your liquidation ratio is displayed in the
|
||||
user interface.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Mango depends on external oracles for pricing. Inaccuracies
|
||||
from these oracles, whether due to technical issues,
|
||||
manipulation, etc., can cause undesired liquidations,
|
||||
potentially causing losses.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Instant SOL borrow interest payments contrast with token
|
||||
staking rewards paid every epoch (~2.5 days). Thus, users
|
||||
entering and exiting within these boundaries might pay
|
||||
interest without gaining staking rewards. It's vital to
|
||||
be familiar with{' '}
|
||||
<a href="https://docs.solana.com/cluster/stake-delegation-and-rewards">
|
||||
Solana staking mechanics
|
||||
</a>
|
||||
.
|
||||
</li>
|
||||
</ul>
|
||||
</Disclosure.Panel>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure> */}
|
||||
{FAQS.map((faq) => {
|
||||
const { question, answer } = faq
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,176 @@
|
|||
const MangoMade = ({ className }: { className?: string }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 160 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g clip-path="url(#clip0_238_56)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M79.2508 5.57714C79.2508 5.57724 79.2509 5.57703 79.2508 5.57714C79.8851 5.90256 80.5793 6.01374 81.2435 6.01181C81.6294 6.36625 81.9504 6.78256 82.2521 7.21006C82.3772 7.38863 82.49 7.5755 82.5898 7.76931C82.8204 8.21356 82.9901 8.68356 83.1618 9.15906C83.2121 9.29856 83.2626 9.4385 83.3149 9.57838C83.3313 9.63825 83.3484 9.69819 83.3662 9.75813L83.3671 9.75788C83.6323 10.6673 84.0194 11.6386 84.5381 12.4407C84.7097 12.7041 84.9014 12.9538 85.1124 13.1869C85.1539 13.2319 85.1964 13.2764 85.2389 13.3209C85.4376 13.529 85.6378 13.7388 85.7513 14.001C85.8924 14.3279 85.8816 14.7038 85.7967 15.0497C85.3959 16.6799 83.8259 17.1083 82.3255 17.1478L82.3262 17.1459C81.7636 17.1571 81.2049 17.1152 80.7096 17.0644C80.7096 17.0644 78.3203 16.8171 76.2949 15.3364L76.2296 15.2879C75.9932 15.1117 75.7677 14.9214 75.5543 14.7179C74.9866 14.1761 74.4815 13.5616 74.0953 12.887C74.0979 12.8844 74.1004 12.8818 74.103 12.8793C74.0573 12.797 74.0135 12.7139 73.9715 12.6299C73.5979 11.8821 73.3701 11.068 73.3598 10.2027C73.3422 8.75075 73.839 7.26381 74.7831 6.18577C74.7828 6.18488 74.7825 6.18398 74.7821 6.18309C75.2933 5.62312 75.9323 5.18322 76.6888 4.93277C77.1629 4.77432 77.6608 4.69824 78.1607 4.70784C78.4649 5.06502 78.835 5.36016 79.2508 5.57714ZM78.0869 15.0771C78.4288 14.9523 78.7526 14.7846 79.0546 14.5778C78.7507 14.7831 78.4264 14.9511 78.0869 15.0771Z"
|
||||
fill="url(#paint0_linear_238_56)"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M84.2102 4.39452C84.2105 4.39452 84.2107 4.39452 84.211 4.39451L84.2316 4.38122C81.5677 -0.162882 78.0845 3.41472 78.0845 3.41472L78.0894 3.42348C78.0896 3.42342 78.0892 3.42354 78.0894 3.42348C80.0924 6.93523 83.8985 4.59479 84.2102 4.39452Z"
|
||||
fill="url(#paint1_linear_238_56)"
|
||||
/>
|
||||
<path
|
||||
d="M80.9079 12.2213C80.1738 13.976 78.7644 15.1379 77.0569 15.3139C77.0202 15.3188 76.5529 15.3557 76.2949 15.3366C78.3202 16.8173 80.7095 17.0646 80.7095 17.0646C81.221 17.1171 81.8 17.1601 82.3812 17.1448C82.5859 16.6106 82.701 15.9988 82.668 15.3048C82.5913 13.6929 83.526 12.8653 84.538 12.4408C84.0194 11.6387 83.6322 10.6674 83.3671 9.75806C82.5768 9.96831 81.573 10.6294 80.9079 12.2213Z"
|
||||
fill="url(#paint2_linear_238_56)"
|
||||
/>
|
||||
<path
|
||||
d="M82.6362 15.2932C82.6695 15.9872 82.5304 16.6135 82.3257 17.1477C83.8261 17.1082 85.3961 16.6798 85.7969 15.0496C85.8818 14.7037 85.8926 14.3278 85.7514 14.001C85.6137 13.6825 85.3482 13.4416 85.1126 13.1868C84.8922 12.9434 84.6924 12.6821 84.5151 12.4056C83.5038 12.8303 82.5596 13.6815 82.6362 15.2932Z"
|
||||
fill="url(#paint3_linear_238_56)"
|
||||
/>
|
||||
<path
|
||||
d="M83.3148 9.57836C83.0843 8.96142 82.888 8.34379 82.5896 7.76929C82.4899 7.57542 82.3771 7.38861 82.252 7.21004C81.9503 6.78254 81.6293 6.36623 81.2434 6.01179C80.5793 6.01371 79.8852 5.90221 79.2509 5.57678C78.6085 6.48804 77.8734 8.03392 78.5463 9.79842C79.5399 12.4043 77.5235 14.1852 76.2295 15.2879L76.2949 15.3364C76.5374 15.3554 76.7813 15.3519 77.0233 15.326C78.7306 15.1498 80.2216 13.9599 80.9557 12.2054C81.6211 10.6135 82.5889 10.0089 83.3782 9.79842C83.3559 9.72504 83.3348 9.65167 83.3148 9.57836Z"
|
||||
fill="url(#paint4_linear_238_56)"
|
||||
/>
|
||||
<path
|
||||
d="M74.8526 6.10828C73.8634 7.19188 73.3418 8.7157 73.3598 10.2029C73.3701 11.0682 73.5979 11.8823 73.9715 12.6301C74.0276 12.7423 74.087 12.853 74.1498 12.9622C76.2294 10.8747 75.4781 7.76426 74.8526 6.10828Z"
|
||||
fill="url(#paint5_linear_238_56)"
|
||||
/>
|
||||
<path
|
||||
d="M78.5818 9.79844C77.9089 8.03325 78.6275 6.4975 79.2692 5.58642C78.846 5.3686 78.4697 5.07014 78.1611 4.70784C77.6612 4.69824 77.1633 4.77432 76.6892 4.93277C75.9327 5.18322 75.2938 5.62312 74.7826 6.18309C75.3943 7.80269 76.1294 10.8453 74.0957 12.887C74.482 13.5616 74.987 14.1761 75.5547 14.7179C75.7786 14.9314 76.0158 15.1304 76.265 15.3138C77.559 14.2116 79.5753 12.4043 78.5818 9.79844Z"
|
||||
fill="url(#paint6_linear_238_56)"
|
||||
/>
|
||||
<path
|
||||
d="M81.0904 3.7043C82.4985 4.2599 83.4847 4.41038 84.1997 4.38888L84.2204 4.3756C81.5564 -0.168495 78.0732 3.40911 78.0732 3.40911L78.0783 3.41802C78.8297 3.28484 79.9216 3.24342 81.0904 3.7043Z"
|
||||
fill="url(#paint7_linear_238_56)"
|
||||
/>
|
||||
<path
|
||||
d="M81.1078 3.67278C79.9398 3.2126 78.8415 3.23008 78.0776 3.41796C80.0807 6.92983 83.8876 4.58894 84.199 4.38882C83.4835 4.41032 82.5159 4.22838 81.1078 3.67278Z"
|
||||
fill="url(#paint8_linear_238_56)"
|
||||
/>
|
||||
<path d="M64.2891 2C65.0781 2 65.793 2.11679 66.4336 2.35036C67.0742 2.58394 67.6172 2.90316 68.0625 3.30803C68.5156 3.7129 68.8633 4.18783 69.1055 4.73285C69.3477 5.27007 69.4688 5.84234 69.4688 6.44963V13.5504C69.4688 14.1577 69.3477 14.7338 69.1055 15.2788C68.8633 15.8161 68.5156 16.2871 68.0625 16.692C67.6172 17.0968 67.0742 17.4161 66.4336 17.6496C65.793 17.8832 65.0781 18 64.2891 18H60.6797C59.8906 18 59.1758 17.8832 58.5352 17.6496C57.8945 17.4161 57.3477 17.0968 56.8945 16.692C56.4492 16.2871 56.1055 15.8161 55.8633 15.2788C55.6211 14.7338 55.5 14.1577 55.5 13.5504V6.44963C55.5 5.84234 55.6211 5.27007 55.8633 4.73285C56.1055 4.18783 56.4492 3.7129 56.8945 3.30803C57.3477 2.90316 57.8945 2.58394 58.5352 2.35036C59.1758 2.11679 59.8906 2 60.6797 2H64.2891ZM66.7031 4.94307L66.5391 3.96204L65.8008 3.2146L64.5938 3.05109H61.4531L60.2578 3.2146L59.5078 3.96204L59.3672 4.94307V10.8292L59.5078 11.8336L60.2812 12.5693L61.4531 12.7095H64.5938L65.8008 12.5693L66.5391 11.8336L66.7031 10.8292V4.94307ZM65.2969 11.3547L64.5234 11.4715H61.5234L60.7617 11.3547L60.5859 10.654V5.05985L60.7031 4.41752L61.5234 4.28905H64.5234L65.3438 4.41752L65.4609 5.10657V10.7007L65.2969 11.3547Z" />
|
||||
<path d="M47.8125 4.26569H50.8594L52.0664 4.46423L52.3008 3.2146L50.9414 3.05109H47.7891L46.5938 3.23796L45.8438 3.9854L45.6797 4.96642V10.8292L45.8438 11.8336L46.6172 12.5693L47.7891 12.7095H50.7188L51.9023 12.5693L52.6641 11.8336L52.8281 10.8292V7.75766H49.4297V9.0073H51.5859V10.654C51.5469 10.7786 51.5195 10.8954 51.5039 11.0044C51.4883 11.1134 51.4609 11.2302 51.4219 11.3547L50.6484 11.4715H47.8125L47.0977 11.3547L46.9336 10.6073V5.08321L47.0508 4.44088L47.8125 4.26569ZM50.4141 2C51.2031 2 51.918 2.11679 52.5586 2.35036C53.1992 2.58394 53.7422 2.90316 54.1875 3.30803C54.6406 3.7129 54.9883 4.18783 55.2305 4.73285C55.4727 5.27007 55.5938 5.84234 55.5938 6.44963V13.5504C55.5938 14.1577 55.4727 14.7338 55.2305 15.2788C54.9883 15.8161 54.6406 16.2871 54.1875 16.692C53.7422 17.0968 53.1992 17.4161 52.5586 17.6496C51.918 17.8832 51.2031 18 50.4141 18H46.8047C46.0156 18 45.3008 17.8832 44.6602 17.6496C44.0195 17.4161 43.4727 17.0968 43.0195 16.692C42.5742 16.2871 42.2305 15.8161 41.9883 15.2788C41.7461 14.7338 41.625 14.1577 41.625 13.5504V6.44963C41.625 5.84234 41.7461 5.27007 41.9883 4.73285C42.2305 4.18783 42.5742 3.7129 43.0195 3.30803C43.4727 2.90316 44.0195 2.58394 44.6602 2.35036C45.3008 2.11679 46.0156 2 46.8047 2H50.4141Z" />
|
||||
<path d="M38.7188 4.91971L38.5547 3.93869L37.8047 3.19124L36.6094 3.05109H33.6797L31.5703 3.34307V12.7095H32.8125V4.41752L33.7266 4.26569H36.5391L37.3477 4.39416L37.4648 5.08321V12.7095H38.7188V4.91971ZM36.5391 2C37.3281 2 38.043 2.11679 38.6836 2.35036C39.3242 2.58394 39.8672 2.90316 40.3125 3.30803C40.7656 3.7129 41.1133 4.18783 41.3555 4.73285C41.5977 5.27007 41.7188 5.84234 41.7188 6.44963V13.5504C41.7188 14.1577 41.5977 14.7338 41.3555 15.2788C41.1133 15.8161 40.7656 16.2871 40.3125 16.692C39.8672 17.0968 39.3242 17.4161 38.6836 17.6496C38.043 17.8832 37.3281 18 36.5391 18H32.9297C32.1406 18 31.4258 17.8832 30.7852 17.6496C30.1445 17.4161 29.5977 17.0968 29.1445 16.692C28.6992 16.2871 28.3555 15.8161 28.1133 15.2788C27.8711 14.7338 27.75 14.1577 27.75 13.5504V6.44963C27.75 5.84234 27.8711 5.27007 28.1133 4.73285C28.3555 4.18783 28.6992 3.7129 29.1445 3.30803C29.5977 2.90316 30.1445 2.58394 30.7852 2.35036C31.4258 2.11679 32.1406 2 32.9297 2H36.5391Z" />
|
||||
<path d="M8.78906 2C9.57812 2 10.293 2.11679 10.9336 2.35036C11.5742 2.58394 12.1172 2.90316 12.5625 3.30803C13.0156 3.7129 13.3633 4.18783 13.6055 4.73285C13.8477 5.27007 13.9688 5.84234 13.9688 6.44963V13.5504C13.9688 14.1577 13.8477 14.7338 13.6055 15.2788C13.3633 15.8161 13.0156 16.2871 12.5625 16.692C12.1172 17.0968 11.5742 17.4161 10.9336 17.6496C10.293 17.8832 9.57812 18 8.78906 18H5.17969C4.39062 18 3.67578 17.8832 3.03516 17.6496C2.39453 17.4161 1.84766 17.0968 1.39453 16.692C0.949219 16.2871 0.605469 15.8161 0.363281 15.2788C0.121094 14.7338 0 14.1577 0 13.5504V6.44963C0 5.84234 0.121094 5.27007 0.363281 4.73285C0.605469 4.18783 0.949219 3.7129 1.39453 3.30803C1.84766 2.90316 2.39453 2.58394 3.03516 2.35036C3.67578 2.11679 4.39062 2 5.17969 2H8.78906ZM6.96094 3.23796L6.31641 3.05109H4.78125L3.79688 3.2146L3.04688 3.96204V12.7095H4.30078V4.39416C4.41016 4.3708 4.50781 4.35523 4.59375 4.34745C4.67969 4.33966 4.77344 4.32019 4.875 4.28905H6.21094C6.29688 4.32019 6.37891 4.33966 6.45703 4.34745C6.54297 4.35523 6.62891 4.3708 6.71484 4.39416V9.34599H7.96875V4.39416L8.47266 4.28905H9.82031C9.91406 4.32019 10.0078 4.33966 10.1016 4.34745C10.1953 4.35523 10.293 4.3708 10.3945 4.39416V12.7095H11.6367V3.96204L10.8984 3.2146L9.91406 3.05109H8.37891L7.74609 3.23796L7.34766 4.0438L6.96094 3.23796Z" />
|
||||
<path d="M22.7422 1.94531C23.5312 1.94531 24.2461 2.0625 24.8867 2.29688C25.5273 2.53125 26.0703 2.85156 26.5156 3.25781C26.9688 3.66406 27.3164 4.14062 27.5586 4.6875C27.8008 5.22656 27.9219 5.80078 27.9219 6.41016V13.5352C27.9219 14.1445 27.8008 14.7227 27.5586 15.2695C27.3164 15.8086 26.9688 16.2812 26.5156 16.6875C26.0703 17.0938 25.5273 17.4141 24.8867 17.6484C24.2461 17.8828 23.5312 18 22.7422 18H19.1328C18.3438 18 17.6289 17.8828 16.9883 17.6484C16.3477 17.4141 15.8008 17.0938 15.3477 16.6875C14.9023 16.2812 14.5586 15.8086 14.3164 15.2695C14.0742 14.7227 13.9531 14.1445 13.9531 13.5352V6.41016C13.9531 5.80078 14.0742 5.22656 14.3164 4.6875C14.5586 4.14062 14.9023 3.66406 15.3477 3.25781C15.8008 2.85156 16.3477 2.53125 16.9883 2.29688C17.6289 2.0625 18.3438 1.94531 19.1328 1.94531H22.7422ZM23.8203 12.6914H25.1562L24.2305 3.96094L23.5039 3.23438L21.9453 3H20.6914L19.1328 3.23438L18.418 3.96094L17.457 12.6914H18.8516L19.0391 10.1953L19.1562 9.11719H23.4805L23.5977 10.1953L23.8203 12.6914ZM23 4.41797C23.0547 5.05078 23.1172 5.64844 23.1875 6.21094C23.2578 6.77344 23.3242 7.36719 23.3867 7.99219H19.2617L19.6133 4.41797C19.832 4.39453 20.0195 4.36719 20.1758 4.33594C20.3398 4.30469 20.5312 4.27344 20.75 4.24219H21.8984L23 4.41797Z" />
|
||||
<path d="M150.332 9.16448L153.369 11.7115L156.421 9.15134H156.426V4.39416C156.324 4.3708 156.227 4.35523 156.133 4.34745C156.039 4.33966 155.945 4.32019 155.852 4.28905H154.504L154 4.39416V6.3562H152.746V4.39416C152.66 4.3708 152.574 4.35523 152.488 4.34745C152.41 4.33966 152.328 4.32019 152.242 4.28905H150.906C150.805 4.32019 150.711 4.33966 150.625 4.34745C150.539 4.35523 150.441 4.3708 150.332 4.39416V9.16448Z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M156.965 2.35036C156.324 2.11679 155.609 2 154.82 2H151.211C150.422 2 149.707 2.11679 149.066 2.35036C148.426 2.58394 147.879 2.90316 147.426 3.30803C146.98 3.7129 146.637 4.18783 146.395 4.73285C146.152 5.27007 146.031 5.84234 146.031 6.44963V13.5504C146.031 14.1577 146.152 14.7338 146.395 15.2788C146.637 15.8161 146.98 16.2871 147.426 16.692C147.879 17.0968 148.426 17.4161 149.066 17.6496C149.707 17.8832 150.422 18 151.211 18H154.82C155.609 18 156.324 17.8832 156.965 17.6496C157.605 17.4161 158.148 17.0968 158.594 16.692C159.047 16.2871 159.395 15.8161 159.637 15.2788C159.879 14.7338 160 14.1577 160 13.5504V6.44963C160 5.84234 159.879 5.27007 159.637 4.73285C159.395 4.18783 159.047 3.7129 158.594 3.30803C158.148 2.90316 157.605 2.58394 156.965 2.35036ZM152.348 3.05109L152.992 3.23796L153.379 4.0438L153.777 3.23796L154.41 3.05109H155.945L156.93 3.2146L157.668 3.96204V9.42774L157.664 9.43141V9.48552L154.219 12.3747L154.145 12.4253L154.059 12.4876C153.374 13.0053 153.369 13.0015 152.542 12.3925L152.523 12.3786L149.078 9.48942V3.96204L149.828 3.2146L150.812 3.05109H152.348Z"
|
||||
/>
|
||||
<path d="M140.852 2C141.641 2 142.355 2.11679 142.996 2.35036C143.637 2.58394 144.18 2.90316 144.625 3.30803C145.078 3.7129 145.426 4.18783 145.668 4.73285C145.91 5.27007 146.031 5.84234 146.031 6.44963V13.5504C146.031 14.1577 145.91 14.7338 145.668 15.2788C145.426 15.8161 145.078 16.2871 144.625 16.692C144.18 17.0968 143.637 17.4161 142.996 17.6496C142.355 17.8832 141.641 18 140.852 18H137.242C136.453 18 135.738 17.8832 135.098 17.6496C134.457 17.4161 133.91 17.0968 133.457 16.692C133.012 16.2871 132.668 15.8161 132.426 15.2788C132.184 14.7338 132.062 14.1577 132.062 13.5504V6.44963C132.062 5.84234 132.184 5.27007 132.426 4.73285C132.668 4.18783 133.012 3.7129 133.457 3.30803C133.91 2.90316 134.457 2.58394 135.098 2.35036C135.738 2.11679 136.453 2 137.242 2H140.852ZM142.387 4.91971L142.211 3.93869L141.473 3.19124L140.289 3.05109H137.746L136.574 3.19124L135.836 3.93869L135.66 4.91971V10.4672L135.836 11.4482L136.574 12.1839L137.746 12.3358H140.699L142.07 12.1606L141.777 10.8993L140.676 11.0861H137.828L137.078 10.9693L136.914 10.2686V7.86277H142.387V4.91971ZM136.914 6.6365V5.05985L137.008 4.39416L137.828 4.26569H140.219L141.016 4.39416L141.133 5.08321V6.6365H136.914Z" />
|
||||
<path d="M126.977 2C127.766 2 128.48 2.11679 129.121 2.35036C129.762 2.58394 130.305 2.90316 130.75 3.30803C131.203 3.7129 131.551 4.18783 131.793 4.73285C132.035 5.27007 132.156 5.84234 132.156 6.44963V13.5504C132.156 14.1577 132.035 14.7338 131.793 15.2788C131.551 15.8161 131.203 16.2871 130.75 16.692C130.305 17.0968 129.762 17.4161 129.121 17.6496C128.48 17.8832 127.766 18 126.977 18H123.367C122.578 18 121.863 17.8832 121.223 17.6496C120.582 17.4161 120.035 17.0968 119.582 16.692C119.137 16.2871 118.793 15.8161 118.551 15.2788C118.309 14.7338 118.188 14.1577 118.188 13.5504V6.44963C118.188 5.84234 118.309 5.27007 118.551 4.73285C118.793 4.18783 119.137 3.7129 119.582 3.30803C120.035 2.90316 120.582 2.58394 121.223 2.35036C121.863 2.11679 122.578 2 123.367 2H126.977ZM129.414 4.94307L129.25 3.96204L128.512 3.2146L127.305 3.05109H122.078V12.7095H127.305L128.512 12.5693L129.25 11.8336L129.414 10.8292V4.94307ZM128.008 11.3547L127.234 11.4715H123.297V4.28905H127.234L128.055 4.41752L128.172 5.10657V10.7007L128.008 11.3547Z" />
|
||||
<path d="M99.2266 2C100.016 2 100.73 2.11679 101.371 2.35036C102.012 2.58394 102.555 2.90316 103 3.30803C103.453 3.7129 103.801 4.18783 104.043 4.73285C104.285 5.27007 104.406 5.84234 104.406 6.44963V13.5504C104.406 14.1577 104.285 14.7338 104.043 15.2788C103.801 15.8161 103.453 16.2871 103 16.692C102.555 17.0968 102.012 17.4161 101.371 17.6496C100.73 17.8832 100.016 18 99.2266 18H95.6172C94.8281 18 94.1133 17.8832 93.4727 17.6496C92.832 17.4161 92.2852 17.0968 91.832 16.692C91.3867 16.2871 91.043 15.8161 90.8008 15.2788C90.5586 14.7338 90.4375 14.1577 90.4375 13.5504V6.44963C90.4375 5.84234 90.5586 5.27007 90.8008 4.73285C91.043 4.18783 91.3867 3.7129 91.832 3.30803C92.2852 2.90316 92.832 2.58394 93.4727 2.35036C94.1133 2.11679 94.8281 2 95.6172 2H99.2266ZM97.3984 3.23796L96.7539 3.05109H95.2188L94.2344 3.2146L93.4844 3.96204V12.7095H94.7383V4.39416C94.8477 4.3708 94.9453 4.35523 95.0312 4.34745C95.1172 4.33966 95.2109 4.32019 95.3125 4.28905H96.6484C96.7344 4.32019 96.8164 4.33966 96.8945 4.34745C96.9805 4.35523 97.0664 4.3708 97.1523 4.39416V9.34599H98.4062V4.39416L98.9102 4.28905H100.258C100.352 4.32019 100.445 4.33966 100.539 4.34745C100.633 4.35523 100.73 4.3708 100.832 4.39416V12.7095H102.074V3.96204L101.336 3.2146L100.352 3.05109H98.8164L98.1836 3.23796L97.7852 4.0438L97.3984 3.23796Z" />
|
||||
<path d="M113.18 1.94531C113.969 1.94531 114.684 2.0625 115.324 2.29688C115.965 2.53125 116.508 2.85156 116.953 3.25781C117.406 3.66406 117.754 4.14062 117.996 4.6875C118.238 5.22656 118.359 5.80078 118.359 6.41016V13.5352C118.359 14.1445 118.238 14.7227 117.996 15.2695C117.754 15.8086 117.406 16.2812 116.953 16.6875C116.508 17.0938 115.965 17.4141 115.324 17.6484C114.684 17.8828 113.969 18 113.18 18H109.57C108.781 18 108.066 17.8828 107.426 17.6484C106.785 17.4141 106.238 17.0938 105.785 16.6875C105.34 16.2812 104.996 15.8086 104.754 15.2695C104.512 14.7227 104.391 14.1445 104.391 13.5352V6.41016C104.391 5.80078 104.512 5.22656 104.754 4.6875C104.996 4.14062 105.34 3.66406 105.785 3.25781C106.238 2.85156 106.785 2.53125 107.426 2.29688C108.066 2.0625 108.781 1.94531 109.57 1.94531H113.18ZM114.258 12.6914H115.594L114.668 3.96094L113.941 3.23438L112.383 3H111.129L109.57 3.23438L108.855 3.96094L107.895 12.6914H109.289L109.477 10.1953L109.594 9.11719H113.918L114.035 10.1953L114.258 12.6914ZM113.438 4.41797C113.492 5.05078 113.555 5.64844 113.625 6.21094C113.695 6.77344 113.762 7.36719 113.824 7.99219H109.699L110.051 4.41797C110.27 4.39453 110.457 4.36719 110.613 4.33594C110.777 4.30469 110.969 4.27344 111.188 4.24219H112.336L113.438 4.41797Z" />
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_238_56"
|
||||
x1="71.8012"
|
||||
y1="6.83919"
|
||||
x2="88.09"
|
||||
y2="16.6003"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#E54033" />
|
||||
<stop offset="0.489583" stop-color="#FECA1A" />
|
||||
<stop offset="1" stop-color="#AFD803" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_238_56"
|
||||
x1="4680.92"
|
||||
y1="546.556"
|
||||
x2="3661.19"
|
||||
y2="-502.379"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0.15" stop-color="#6CBF00" />
|
||||
<stop offset="1" stop-color="#AFD803" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_238_56"
|
||||
x1="74.6138"
|
||||
y1="15.4597"
|
||||
x2="84.8205"
|
||||
y2="12.9779"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0.21" stop-color="#E54033" />
|
||||
<stop offset="0.84" stop-color="#FECA1A" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear_238_56"
|
||||
x1="82.6555"
|
||||
y1="14.771"
|
||||
x2="85.8049"
|
||||
y2="14.7946"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#FECA1A" />
|
||||
<stop offset="0.4" stop-color="#FECA1A" />
|
||||
<stop offset="1" stop-color="#AFD803" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint4_linear_238_56"
|
||||
x1="75.5264"
|
||||
y1="15.5231"
|
||||
x2="81.9834"
|
||||
y2="6.78148"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0.16" stop-color="#E54033" />
|
||||
<stop offset="0.84" stop-color="#FECA1A" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint5_linear_238_56"
|
||||
x1="74.5862"
|
||||
y1="6.83745"
|
||||
x2="74.3003"
|
||||
y2="12.4836"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#FECA1A" />
|
||||
<stop offset="0.76" stop-color="#E54033" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint6_linear_238_56"
|
||||
x1="77.7453"
|
||||
y1="5.3711"
|
||||
x2="76.0208"
|
||||
y2="11.9193"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0.16" stop-color="#FECA1A" />
|
||||
<stop offset="1" stop-color="#E54033" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint7_linear_238_56"
|
||||
x1="78.4128"
|
||||
y1="2.23603"
|
||||
x2="84.7978"
|
||||
y2="4.58952"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0.15" stop-color="#6CBF00" />
|
||||
<stop offset="1" stop-color="#AFD803" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint8_linear_238_56"
|
||||
x1="4680.9"
|
||||
y1="546.551"
|
||||
x2="3661.17"
|
||||
y2="-502.385"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0.15" stop-color="#6CBF00" />
|
||||
<stop offset="1" stop-color="#AFD803" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_238_56">
|
||||
<rect width="160" height="20" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default MangoMade
|
||||
|
|
@ -5,10 +5,11 @@ import Button from '@components/shared/Button'
|
|||
import { CheckCircleIcon } from '@heroicons/react/20/solid'
|
||||
import { useState } from 'react'
|
||||
import Checkbox from '@components/forms/Checkbox'
|
||||
import BoostLogo from '@components/BoostLogo'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
|
||||
const { t } = useTranslation('common')
|
||||
const { theme } = useTheme()
|
||||
const [acceptTerms, setAcceptTerms] = useState(false)
|
||||
|
||||
return (
|
||||
|
|
@ -17,37 +18,35 @@ const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
|
|||
onClose={onClose}
|
||||
disableOutsideClose
|
||||
hideClose
|
||||
panelClassNames="md:max-w-2xl bg-gradient-to-br from-th-bkg-2 to-th-bkg-1"
|
||||
panelClassNames="md:max-w-xl bg-th-bkg-1"
|
||||
>
|
||||
<div className="mb-6">
|
||||
<div className="mb-4 border-b border-th-bkg-3 pb-4">
|
||||
<div className="group mb-2 flex items-center justify-center">
|
||||
<BoostLogo className="h-auto w-12 shrink-0 cursor-pointer group-hover:animate-shake" />
|
||||
<span className="text-shadow ml-2 block text-[32px] font-black text-th-bkg-1">
|
||||
Boost!
|
||||
</span>
|
||||
<div className="ml-2.5 hidden rounded border border-th-fgd-1 bg-th-active px-1.5 py-1 md:block">
|
||||
<span className="block font-mono text-xxs font-black leading-none text-th-fgd-1">
|
||||
v2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-lg">
|
||||
Earn boosted yield on your JLP and liquid staking tokens.
|
||||
</p>
|
||||
<div className="flex flex-col items-center pb-4">
|
||||
<h2 className="mt-2 text-xl">Accept terms</h2>
|
||||
</div>
|
||||
<ul className="space-y-2 border-b border-th-bkg-3 pb-4">
|
||||
<div
|
||||
className={`bg-x-repeat h-2 w-full ${
|
||||
theme === 'Light'
|
||||
? `bg-[url('/images/zigzag-repeat.svg')]`
|
||||
: `bg-[url('/images/zigzag-repeat-dark.svg')]`
|
||||
} bg-contain opacity-20`}
|
||||
/>
|
||||
<ul className="space-y-3 py-4">
|
||||
<li className="flex items-center">
|
||||
<CheckCircleIcon className="mr-2 h-5 w-5 shrink-0 text-th-success" />
|
||||
<span>Easily add leverage to boost your yield.</span>
|
||||
<span className="leading-tight">
|
||||
Easily add leverage to increase your yield.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircleIcon className="mr-2 h-5 w-5 shrink-0 text-th-success" />
|
||||
<span>No lockup. Remove your assets when you want.</span>
|
||||
<span className="leading-tight">
|
||||
No lockup. Remove your assets when you want.
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<CheckCircleIcon className="mr-2 h-5 w-5 shrink-0 text-th-success" />
|
||||
<span>
|
||||
<span className="leading-tight">
|
||||
Powered by{' '}
|
||||
<a
|
||||
href="https://app.mango.markets"
|
||||
|
|
@ -60,6 +59,13 @@ const TermsOfUseModal = ({ isOpen, onClose }: ModalProps) => {
|
|||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
className={`bg-x-repeat h-2 w-full ${
|
||||
theme === 'Light'
|
||||
? `bg-[url('/images/zigzag-repeat.svg')]`
|
||||
: `bg-[url('/images/zigzag-repeat-dark.svg')]`
|
||||
} bg-contain opacity-20`}
|
||||
/>
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={acceptTerms}
|
||||
|
|
|
|||
|
|
@ -29,10 +29,10 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
|
|||
<button
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`flex items-center justify-center rounded-xl ${
|
||||
className={`flex items-center justify-center rounded-lg ${
|
||||
secondary
|
||||
? 'border border-th-button focus-visible:border-th-fgd-4 md:hover:border-th-button-hover'
|
||||
: 'raised-button text-shadow group text-xl text-th-bkg-1 after:rounded-xl'
|
||||
: 'raised-button text-shadow text-th-button-text group text-xl after:rounded-lg'
|
||||
} ${
|
||||
size === 'medium'
|
||||
? 'h-10 px-4'
|
||||
|
|
@ -88,9 +88,11 @@ export const IconButton = forwardRef<
|
|||
hideBg
|
||||
? 'md:hover:text-th-active'
|
||||
: `group after:rounded-full ${
|
||||
isPrimary ? 'raised-button' : 'raised-button-neutral'
|
||||
isPrimary
|
||||
? 'raised-button text-[#110B11]'
|
||||
: 'raised-button-neutral text-th-fgd-1'
|
||||
}`
|
||||
} text-th-fgd-1 focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4
|
||||
} focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4
|
||||
disabled:text-th-fgd-4 md:disabled:hover:text-th-fgd-4 ${className} focus-visible:text-th-active`}
|
||||
ref={ref}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ function Modal({
|
|||
className="relative z-40 overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
className={`fixed inset-0 backdrop-brightness-[0.4] ${
|
||||
className={`fixed inset-0 backdrop-brightness-[0.2] ${
|
||||
disableOutsideClose ? 'pointer-events-none' : ''
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -46,9 +46,9 @@ import PlausibleProvider from 'next-plausible'
|
|||
// init react-query
|
||||
export const queryClient = new QueryClient()
|
||||
|
||||
const metaTitle = 'Boost!'
|
||||
const metaTitle = 'For Fans of Yield'
|
||||
const metaDescription =
|
||||
'Earn boosted yield on JLP, mSOL, JitoSOL, bSOL and USDC. Powered by Mango'
|
||||
'Earn leveraged yield on JLP and Liquid Staking Tokens. Powered by Mango'
|
||||
|
||||
// Do not add hooks to this component, that will cause unnecessary rerenders
|
||||
// Top level state hydrating/updating should go in MangoProvider
|
||||
|
|
@ -101,7 +101,7 @@ function MyApp({ Component, pageProps }: AppProps) {
|
|||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Boost!</title>
|
||||
<title>For Fans of Yield | Yield Fan</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta property="og:title" content={metaTitle} />
|
||||
<meta name="description" content={metaDescription} />
|
||||
|
|
@ -118,7 +118,7 @@ function MyApp({ Component, pageProps }: AppProps) {
|
|||
<meta name="twitter:description" content={metaDescription} />
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="https://boost.mango.markets/images/1200x675-share.png?345678790"
|
||||
content="https://yield.fan/images/1200x675-share.png?445678790"
|
||||
/>
|
||||
<meta name="google" content="notranslate" />
|
||||
<link rel="manifest" href="/manifest.json"></link>
|
||||
|
|
@ -176,7 +176,7 @@ const Telemetry = () => {
|
|||
|
||||
return (
|
||||
<PlausibleProvider
|
||||
domain="boost.mango.markets"
|
||||
domain="yield.fan"
|
||||
customDomain="https://pl.mngo.cloud"
|
||||
trackLocalhost={true}
|
||||
selfHosted={true}
|
||||
|
|
|
|||
153
pages/risks.tsx
153
pages/risks.tsx
|
|
@ -15,11 +15,11 @@ const Risks: NextPage = () => {
|
|||
<h1 className="mb-4">Risks</h1>
|
||||
<p className="mb-3">
|
||||
<b>KEY INVESTOR INFORMATION:</b> This document provides you with key
|
||||
information about the Mango Markets Boost! Leveraged Staking product and
|
||||
the risks involved. It is not marketing material. The information is
|
||||
required to help you understand the nature and risks of investing in
|
||||
this product.You are advised to read it so you can make an informed
|
||||
decision about whether to invest.
|
||||
information about this Leveraged Staking product and the risks involved.
|
||||
It is not marketing material. The information is required to help you
|
||||
understand the nature and risks of investing in this product.You are
|
||||
advised to read it so you can make an informed decision about whether to
|
||||
invest.
|
||||
</p>
|
||||
<p className="mb-3">
|
||||
<b>IMPORTANT INFORMATION: CAPITAL AT RISK</b> The value and income of
|
||||
|
|
@ -37,15 +37,15 @@ const Risks: NextPage = () => {
|
|||
blockchains, operate independently of Mango Markets DAO.
|
||||
</p>
|
||||
<p className="mb-3">
|
||||
This leverage product, known as Boost! v2, allows users to deposit JLP
|
||||
This leverage product, known as yield.fan, allows users to deposit JLP
|
||||
and SOL liquid staking tokens (LSTs), to be used as collateral in the
|
||||
borrowing of USDC (if boosting JLP) or SOL (if boosting LSTs) at a
|
||||
borrowing of USDC (if leveraging JLP) or SOL (if leveraging LSTs) at a
|
||||
variable interest rate. The USDC or SOL is used to purchase additional
|
||||
tokens, creating increased exposure.
|
||||
</p>
|
||||
<p className="mb-3">
|
||||
The product entails various fees, including variable collateral fee
|
||||
rates (if boosting JLP), loan origination fees, and variable loan
|
||||
rates (if leveraging JLP), loan origination fees, and variable loan
|
||||
maintenance fees. The value of your position is directly affected by
|
||||
changes in the USDC or SOL interest rate and the market value of the
|
||||
deposited tokens. Typically, an increase in borrow interest rates, or a
|
||||
|
|
@ -53,49 +53,48 @@ const Risks: NextPage = () => {
|
|||
the value of your position, potentially resulting in liquidation.
|
||||
</p>
|
||||
<p className="mb-3">
|
||||
The Boost! leverage staking product relies on external oracles to
|
||||
provide real-time price feeds for deposited tokens, USDC and SOL. These
|
||||
oracles are essential for ensuring accurate collateral valuation.
|
||||
However, investors should be aware that oracle data is subject to risks
|
||||
of manipulation, delay, or inaccuracies. Such issues with oracle feeds
|
||||
can lead to improper valuation of deposited assets, potentially
|
||||
triggering unintended liquidations or affecting the overall performance
|
||||
of your investment.
|
||||
This leverage staking product relies on external oracles to provide
|
||||
real-time price feeds for deposited tokens, USDC and SOL. These oracles
|
||||
are essential for ensuring accurate collateral valuation. However,
|
||||
investors should be aware that oracle data is subject to risks of
|
||||
manipulation, delay, or inaccuracies. Such issues with oracle feeds can
|
||||
lead to improper valuation of deposited assets, potentially triggering
|
||||
unintended liquidations or affecting the overall performance of your
|
||||
investment.
|
||||
</p>
|
||||
<p className="mb-3">
|
||||
Investors should also be aware of the inherent smart-contract risks
|
||||
associated with the Boost! leverage staking on the Mango Markets DAO.
|
||||
These risks include, but are not limited to, vulnerabilities in the
|
||||
contract code that could potentially be exploited, leading to financial
|
||||
loss.
|
||||
associated with this product. These risks include, but are not limited
|
||||
to, vulnerabilities in the contract code that could potentially be
|
||||
exploited, leading to financial loss.
|
||||
</p>
|
||||
<p className="mb-6 font-bold">
|
||||
Please consider these risks carefully before using Mango Markets Boost!
|
||||
Leveraged Staking.
|
||||
Please consider these risks carefully before using yield.fan
|
||||
</p>
|
||||
<h3 className="mb-3">1. Why Boost JLP or LSTs?</h3>
|
||||
<h3 className="mb-3">1. Why add leverage to JLP or LSTs?</h3>
|
||||
<p className="mb-6">
|
||||
Increased Exposure and Returns: Amplifies investment in JLP/LSTs,
|
||||
leveraging USDC/SOL to enhance yield potential and market position
|
||||
without the need for extra capital.
|
||||
</p>
|
||||
<h3 className="mb-3">2. Why Not Boost JLP or LSTs?</h3>
|
||||
<h3 className="mb-3">2. Why Not add leverage to JLP or LSTs?</h3>
|
||||
<p className="mb-6">
|
||||
Risk of Liquidation: High volatility in the JLP/LST and USDC/SOL market
|
||||
can rapidly depreciate collateral value, triggering liquidations and
|
||||
potential loss of investment.
|
||||
</p>
|
||||
<h3 className="mb-3">3. Boosting</h3>
|
||||
<h3 className="mb-3">3. Adding leverage</h3>
|
||||
<p className="mb-3">
|
||||
Boosting offers a significant advantage by amplifying investors'
|
||||
exposure to JLP/LSTs and their associated yield through USDC or SOL
|
||||
borrowing, which facilitates the acquisition of additional amounts of
|
||||
JLP or LSTs, enhancing potential gains. This strategic leverage allows
|
||||
investors to expand their market position and potentially increase
|
||||
returns without the need for additional capital investment upfront. The
|
||||
product operates within a framework of carefully calibrated risk
|
||||
parameters, managed by the Mango DAO, to balance growth opportunities
|
||||
against the inherent risks of the JLP/LST and USDC/SOL markets.
|
||||
Adding leverage offers a significant advantage by amplifying
|
||||
investors' exposure to JLP/LSTs and their associated yield through
|
||||
USDC or SOL borrowing, which facilitates the acquisition of additional
|
||||
amounts of JLP or LSTs, enhancing potential gains. This strategic
|
||||
leverage allows investors to expand their market position and
|
||||
potentially increase returns without the need for additional capital
|
||||
investment upfront. The product operates within a framework of carefully
|
||||
calibrated risk parameters, managed by the Mango DAO, to balance growth
|
||||
opportunities against the inherent risks of the JLP/LST and USDC/SOL
|
||||
markets.
|
||||
</p>
|
||||
<p className="mb-3">
|
||||
However, this increased exposure is not without its costs. The primary
|
||||
|
|
@ -151,7 +150,7 @@ const Risks: NextPage = () => {
|
|||
<h3 className="mb-3">5. Objectives and Policy</h3>
|
||||
<ul className="ml-6 list-outside list-disc">
|
||||
<li className="mb-3">
|
||||
Boost! v2 augments the investor's exposure to the deposited
|
||||
yield.fan augments the investor's exposure to the deposited
|
||||
tokens by leveraging USDC or SOL borrowing to finance the acquisition
|
||||
of additional amounts of the deposited asset, which is designated as
|
||||
"Collateral".
|
||||
|
|
@ -164,13 +163,13 @@ const Risks: NextPage = () => {
|
|||
adjusting it in accordance with their risk management strategy.
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
When boosting JLP the collateral of deposited tokens is subject to a
|
||||
fixed rate fee, which is imposed in direct proportion to the extent of
|
||||
the collateral that is secured by outstanding liabilities. In the
|
||||
context of liquidations, a distinct and typically lower value, known
|
||||
as the "maintenance asset weight", comes into play,
|
||||
representing the "weighted assets" threshold for triggering
|
||||
liquidation.
|
||||
When adding leverage to JLP the collateral of deposited tokens is
|
||||
subject to a fixed rate fee, which is imposed in direct proportion to
|
||||
the extent of the collateral that is secured by outstanding
|
||||
liabilities. In the context of liquidations, a distinct and typically
|
||||
lower value, known as the "maintenance asset weight", comes
|
||||
into play, representing the "weighted assets" threshold for
|
||||
triggering liquidation.
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
The USDC and SOL borrow rates are dynamically adjusted based on the
|
||||
|
|
@ -183,11 +182,12 @@ const Risks: NextPage = () => {
|
|||
</li>
|
||||
<li className="mb-3">
|
||||
The effectiveness of leveraging JLP and the associated USDC borrowing
|
||||
rates are directly influenced by Boost! USDC, a distinct service on
|
||||
rates are directly influenced by USDC deposits, a distinct service on
|
||||
the platform designed for USDC lending. The interplay between JLP
|
||||
leverage and Boost USDC underscores the importance of understanding
|
||||
the inherent risks of Boost USDC when utilizing JLP for investment
|
||||
strategies. JLP and USDC are isolated from the LST pool.
|
||||
leverage and deposited USDC underscores the importance of
|
||||
understanding the inherent risks of deposited USDC when utilizing JLP
|
||||
for investment strategies. JLP and USDC are isolated from the LST
|
||||
pool.
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
A liquidation event is initiated when the combined value of the
|
||||
|
|
@ -211,7 +211,7 @@ const Risks: NextPage = () => {
|
|||
</li>
|
||||
</ul>
|
||||
<p className="mb-6">
|
||||
For more information on Mango Boost, risks and charges please contact{' '}
|
||||
For more information on yield.fan, risks and charges please contact{' '}
|
||||
<a
|
||||
href="https://discord.gg/pV5mybZYY8"
|
||||
target="_blank"
|
||||
|
|
@ -220,18 +220,17 @@ const Risks: NextPage = () => {
|
|||
https://discord.gg/pV5mybZYY8
|
||||
</a>
|
||||
</p>
|
||||
<h3 className="mb-3">6. Interdependence with Boost USDC</h3>
|
||||
<h3 className="mb-3">6. Interdependence with deposited USDC</h3>
|
||||
<p className="mb-6">
|
||||
The "Boost JLP" product intricately relies on the "Boost
|
||||
USDC" , serving as a mechanism for deposits within the ecosystem.
|
||||
Specifically, the Boost USDC product facilitates the deposit of USDC,
|
||||
which is a critical component in enabling the leveraging features of
|
||||
Boost JLP. This interdependence underscores a strategic approach to
|
||||
liquidity management and leverage within the platform, where the
|
||||
availability and conditions of USDC deposits directly influence the
|
||||
operational dynamics of Boost JLP. As such, users engaging with Boost
|
||||
JLP are implicitly interacting with the underlying mechanisms and risks
|
||||
associated with Boost USDC.
|
||||
The "Leveraged JLP" product intricately relies on the
|
||||
deposited USDC, serving as a mechanism for deposits within the
|
||||
ecosystem. Specifically, USDC deposits are a critical component in
|
||||
enabling the leveraging of JLP. This interdependence underscores a
|
||||
strategic approach to liquidity management and leverage within the
|
||||
platform, where the availability and conditions of USDC deposits
|
||||
directly influence the operational dynamics of leveraged JLP. As such,
|
||||
users engaging with JLP are implicitly interacting with the underlying
|
||||
mechanisms and risks associated with the deposited USDC.
|
||||
</p>
|
||||
<h3 className="mb-3">7. Charges</h3>
|
||||
<p className="mb-3">
|
||||
|
|
@ -253,10 +252,10 @@ const Risks: NextPage = () => {
|
|||
rate falls within a 0-10 percent Annual Percentage Rate (APR).
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
Collateral Fee Rate, This is a percentage fee for boosting JLP,
|
||||
assessed on the collateral deposited by the borrower. It fluctuates
|
||||
based on the ratio of weighted liabilities to weighted collateral,
|
||||
affecting the overall cost of borrowing.
|
||||
Collateral Fee Rate, This is a percentage fee for adding leverage to
|
||||
JLP and other LSTs, assessed on the collateral deposited by the
|
||||
borrower. It fluctuates based on the ratio of weighted liabilities to
|
||||
weighted collateral, affecting the overall cost of borrowing.
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
Swap Fees, When positions are initiated by swapping USDC or SOL for a
|
||||
|
|
@ -268,13 +267,12 @@ const Risks: NextPage = () => {
|
|||
<h3 className="mb-3">8. JLP and LST Specific Risks</h3>
|
||||
<h4 className="mb-2">8.1 Disclaimer on Jupiter Token Management</h4>
|
||||
<p className="mb-3">
|
||||
It is important for users to understand that the Boost platform does not
|
||||
have any control over the management, performance, or operational
|
||||
strategies of JLP or any of the LSTs. Users should conduct their own due
|
||||
diligence and assess the risks involved when engaging with these tokens.
|
||||
Boost! accepts no responsibility for any financial outcomes related to
|
||||
the fluctuation in value, liquidity, or regulatory changes affecting
|
||||
these tokens.
|
||||
It is important for users to understand that the platform does not have
|
||||
any control over the management, performance, or operational strategies
|
||||
of JLP or any of the LSTs. Users should conduct their own due diligence
|
||||
and assess the risks involved when engaging with these tokens. We accept
|
||||
no responsibility for any financial outcomes related to the fluctuation
|
||||
in value, liquidity, or regulatory changes affecting these tokens.
|
||||
</p>
|
||||
<h4 className="mb-2">
|
||||
8.2 Risks Associated with Accepting JLP/LST Deposits
|
||||
|
|
@ -301,9 +299,8 @@ const Risks: NextPage = () => {
|
|||
</ul>
|
||||
<h3 className="mb-3">9. General Risks</h3>
|
||||
<p className="mb-3">
|
||||
The below describes the potential risks faced by users of Boost!,
|
||||
categorized into general risks, platform-specific risks, and market
|
||||
operation risks
|
||||
The below describes the potential risks faced by users categorized into
|
||||
general risks, platform-specific risks, and market operation risks
|
||||
</p>
|
||||
<ul className="ml-6 list-outside list-disc">
|
||||
<li className="mb-3">
|
||||
|
|
@ -324,14 +321,14 @@ const Risks: NextPage = () => {
|
|||
<p className="mb-3">
|
||||
Solana Network Risks: Solana's architecture, designed for high
|
||||
throughput and low transaction costs, faces challenges that can impact
|
||||
users on the Boost platform. Key areas of concern include:
|
||||
users on the platform. Key areas of concern include:
|
||||
</p>
|
||||
<ul className="ml-6 list-outside list-disc">
|
||||
<li className="mb-3">
|
||||
Wallet Loss: The decentralized nature of blockchain technology means
|
||||
that wallet security is paramount. Users losing access to their
|
||||
private keys will find themselves permanently unable to access their
|
||||
funds on Boost, with no centralized authority to facilitate recovery.
|
||||
funds, with no centralized authority to facilitate recovery.
|
||||
</li>
|
||||
<li className="mb-3">
|
||||
Infrastructure Risks: The Solana network is not immune to downtimes or
|
||||
|
|
@ -373,7 +370,7 @@ const Risks: NextPage = () => {
|
|||
</ul>
|
||||
<h4 className="mb-2">9.3 Disclaimer on Oracle Management</h4>
|
||||
<p className="mb-6">
|
||||
It is crucial for platform users to acknowledge that Boost! does not
|
||||
It is crucial for platform users to acknowledge that yield.fan does not
|
||||
control or manage the oracle services provided by Switchboard, Pyth, or
|
||||
any other third-party oracle providers. As such, we are not liable for
|
||||
any discrepancies, inaccuracies, or failures of the oracle services. In
|
||||
|
|
@ -382,9 +379,9 @@ const Risks: NextPage = () => {
|
|||
received data, underscoring the importance of users' awareness of
|
||||
these oracle provider risks.
|
||||
</p>
|
||||
<h3 className="mb-3">10. Boost! Specific Risks</h3>
|
||||
<h3 className="mb-3">10. Specific Risks</h3>
|
||||
<p className="mb-3">
|
||||
The "Boost" products within the Mango Markets ecosystem,
|
||||
The "yield.fan" products within the Mango Markets ecosystem,
|
||||
designed to enhance user engagement through leveraged positions and
|
||||
liquidity provision, carry their own set of specific risks. These risks
|
||||
stem from operational complexities, market volatilities, and
|
||||
|
|
@ -394,7 +391,7 @@ const Risks: NextPage = () => {
|
|||
</p>
|
||||
<ul className="ml-6 list-outside list-disc">
|
||||
<li className="mb-3">
|
||||
Operational Risks: Bugs or vulnerabilities in the deployed Boost
|
||||
Operational Risks: Bugs or vulnerabilities in the deployed Mango
|
||||
program or governance mechanisms could lead to incorrect behavior or
|
||||
loss of funds.
|
||||
</li>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.1 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="159" height="14" viewBox="0 0 159 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25.4009 13L13.4009 1L1.40088 13" stroke="#110B11" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M49.4009 13L37.4009 1L25.4009 13" stroke="#110B11" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M73.4009 13L61.4009 1L49.4009 13" stroke="#110B11" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M97.4009 13L85.4009 1L73.4009 13" stroke="#110B11" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M121.401 13L109.401 1L97.4009 13" stroke="#110B11" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M145.401 13L133.401 1L121.401 13" stroke="#110B11" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M157.401 1L145.401 13" stroke="#110B11" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 976 B |
|
|
@ -0,0 +1,15 @@
|
|||
<svg width="144" height="14" viewBox="0 0 144 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_369_250)">
|
||||
<path d="M24 13L12 1L0 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M48 13L36 1L24 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M72 13L60 1L48 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M96 13L84 1L72 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M120 13L108 1L96 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M144 13L132 1L120 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_369_250">
|
||||
<rect width="144" height="14" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 906 B |
|
|
@ -0,0 +1,15 @@
|
|||
<svg width="144" height="14" viewBox="0 0 144 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_369_250)">
|
||||
<path d="M24 13L12 1L0 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M48 13L36 1L24 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M72 13L60 1L48 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M96 13L84 1L72 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M120 13L108 1L96 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M144 13L132 1L120 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_369_250">
|
||||
<rect width="144" height="14" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 906 B |
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="159" height="14" viewBox="0 0 159 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M25.4009 13L13.4009 1L1.40088 13" stroke="#F1F778" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M49.4009 13L37.4009 1L25.4009 13" stroke="#F1F778" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M73.4009 13L61.4009 1L49.4009 13" stroke="#F1F778" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M97.4009 13L85.4009 1L73.4009 13" stroke="#F1F778" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M121.401 13L109.401 1L97.4009 13" stroke="#F1F778" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M145.401 13L133.401 1L121.401 13" stroke="#F1F778" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M157.401 1L145.401 13" stroke="#F1F778" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 976 B |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -170,7 +170,7 @@ export const DEFAULT_TRADE_FORM: TradeForm = {
|
|||
reduceOnly: false,
|
||||
}
|
||||
|
||||
export type ActiveTab = 'Boost!' | 'Positions' | 'Activity'
|
||||
export type ActiveTab = 'Earn' | 'Positions' | 'Activity'
|
||||
|
||||
export type MangoStore = {
|
||||
// leverage stake
|
||||
|
|
@ -347,7 +347,7 @@ const mangoStore = create<MangoStore>()(
|
|||
|
||||
return {
|
||||
// leverage stake
|
||||
activeTab: 'Boost!',
|
||||
activeTab: 'Earn',
|
||||
selectedToken: '',
|
||||
estimatedMaxAPY: {
|
||||
current: 0,
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ th {
|
|||
--fgd-3: theme('colors.light-theme.fgd-3');
|
||||
--fgd-4: theme('colors.light-theme.fgd-4');
|
||||
--button: theme('colors.light-theme.button.DEFAULT');
|
||||
--button-text: theme('colors.light-theme.button.text');
|
||||
--input-bkg: theme('colors.light-theme.input.bkg');
|
||||
--input-border: theme('colors.light-theme.input.border');
|
||||
--input-border-hover: theme('colors.light-theme.input.borderDark');
|
||||
|
|
@ -115,6 +116,7 @@ th {
|
|||
--fgd-3: theme('colors.dark-theme.fgd-3');
|
||||
--fgd-4: theme('colors.dark-theme.fgd-4');
|
||||
--button: theme('colors.dark-theme.button.DEFAULT');
|
||||
--button-text: theme('colors.dark-theme.button.text');
|
||||
--button-hover: theme('colors.dark-theme.button.hover');
|
||||
--input-bkg: theme('colors.dark-theme.input.bkg');
|
||||
--input-border: theme('colors.dark-theme.input.border');
|
||||
|
|
@ -299,7 +301,7 @@ table p {
|
|||
}
|
||||
|
||||
#range-slider-gradient .range-slider__range {
|
||||
@apply rounded-full bg-gradient-to-r from-th-success via-th-active to-th-error shadow-[inset_0_2px_0px_rgba(0,0,0,0.15)];
|
||||
@apply rounded-full bg-gradient-to-r from-th-success via-th-warning to-th-error shadow-[inset_0_2px_0px_rgba(0,0,0,0.15)];
|
||||
background-size: 200% 100%;
|
||||
background-position: 50% 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,19 +17,20 @@ module.exports = {
|
|||
colors: {
|
||||
'light-theme': {
|
||||
active: {
|
||||
DEFAULT: '#ECEE8F',
|
||||
dark: '#E2E480',
|
||||
DEFAULT: '#110B11',
|
||||
dark: '#000',
|
||||
},
|
||||
button: {
|
||||
DEFAULT: '#A0DDCC',
|
||||
hover: '#5EC1AD',
|
||||
DEFAULT: '#47D1FF',
|
||||
hover: '#00BBF9',
|
||||
text: '#FFFFFF',
|
||||
},
|
||||
input: {
|
||||
bkg: '#F2F2F2',
|
||||
border: 'hsl(0, 0%, 33%)',
|
||||
borderDark: 'hsl(0, 0%, 23%)',
|
||||
},
|
||||
link: { DEFAULT: '#889FD3', hover: '#728DC8' },
|
||||
link: { DEFAULT: '#9425A7', hover: '#6B1B79' },
|
||||
error: '#EA6161',
|
||||
success: '#51E44E',
|
||||
warning: '#EAB348',
|
||||
|
|
@ -41,19 +42,20 @@ module.exports = {
|
|||
'fgd-2': 'hsl(0, 0%, 15%)',
|
||||
'fgd-3': 'hsl(0, 0%, 30%)',
|
||||
'fgd-4': 'hsl(0, 0%, 40%)',
|
||||
'primary-1': '#99ADD9',
|
||||
'primary-2': '#889FD3',
|
||||
'primary-3': '#728DC8',
|
||||
'primary-1': '#EBF441',
|
||||
'primary-2': '#F1F778',
|
||||
'primary-3': '#110B11',
|
||||
'primary-4': '#627DB8',
|
||||
},
|
||||
'dark-theme': {
|
||||
active: {
|
||||
DEFAULT: '#E29997',
|
||||
DEFAULT: '#EBF441',
|
||||
dark: '#B57A79',
|
||||
},
|
||||
button: {
|
||||
DEFAULT: '#99ADD9',
|
||||
hover: '#7284AC',
|
||||
DEFAULT: '#47D1FF',
|
||||
hover: '#00BBF9',
|
||||
text: '#110B11',
|
||||
},
|
||||
input: {
|
||||
bkg: '#352130',
|
||||
|
|
@ -93,6 +95,7 @@ module.exports = {
|
|||
'th-link': 'var(--link)',
|
||||
'th-link-hover': 'var(--link-hover)',
|
||||
'th-button': 'var(--button)',
|
||||
'th-button-text': 'var(--button-text)',
|
||||
'th-button-hover': 'var(--button-hover)',
|
||||
'th-input-bkg': 'var(--input-bkg)',
|
||||
'th-input-border': 'var(--input-border)',
|
||||
|
|
|
|||
|
|
@ -269,6 +269,7 @@ export const SWAP_MARGIN_KEY = 'swapMargin-0.1'
|
|||
export const SHOW_SWAP_INTRO_MODAL = 'showSwapModal-0.1'
|
||||
|
||||
export const ACCEPT_TERMS_KEY = 'termsOfUseAccepted-0.1'
|
||||
export const YIELD_FANS_INTRO_KEY = 'YieldFansIntro-0.1'
|
||||
|
||||
export const TRADE_LAYOUT_KEY = 'tradeLayoutKey-0.1'
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue