Updates incoming (#9)
* updating components, bringing in mcaps, adding wen pill * integrated sams changes to stats modal * updates on updates started redeem page content, some styling fixes, responsiveness etc. * illustrations phase 1 * illustration update * illustration update, added fake text * added mango cuts * color ape to man * cta image added * CTA styling * latest changes * illustration dump getting there, cohesion is forming. * update coin illustrations * Ape2MAN * ape2man floor fix * added text from notion * illustration updates lol added a pit vipers to first illustration * more illustration work not done but better than just a token lol * omg its getting there I think. * moar changes * moar * Mangooooooo Mangooooooo * mangooooooos mangooooo * road to mango lassi. LETS GO. * mcaps on muh lady, lol. * she needed shade under the cap. * detail to the mm card illu * first stab at the text in each card * removed secret border bombs * little change to candle style * added in liquidity incentives linkie * autoformat * switch pool to mainnet pool * switch endpoint to mango rpcpool * fix periods * less periods Co-authored-by: Maximilian Schneider <mail@maximilianschneider.net>
This commit is contained in:
Steven Sarmiento
GitHub
parent
cd0c090f81
commit
d3840eb578
|
|
@ -1,206 +1,154 @@
|
|||
import Button from './Button'
|
||||
import GradientText from './GradientText'
|
||||
import LinkLeft from './LinkLeft'
|
||||
//import GradientText from "./GradientText"
|
||||
|
||||
const ContentSection = () => {
|
||||
const ContentSectionRedeem = () => {
|
||||
return (
|
||||
<div className="bg-bkg-2 transform -skew-y-3 pt-12 pb-16 mb-16 -mt-32 z-0">
|
||||
<div className="max-w-7xl mx-auto px-4 py-40 transform skew-y-3">
|
||||
<div className="max-w-5xl mx-auto text-center">
|
||||
<h2 className="mb-8 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
||||
It is still the early days.
|
||||
</h2>
|
||||
<p className="mb-8 text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
|
||||
This is the first moment for non-developers to participate in
|
||||
helping build the Mango protocol by supporting the inception of the
|
||||
protocol's Insurance Fund.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Section 1 */}
|
||||
|
||||
<div className="py-16 xl:py-36 px-4 sm:px-6 lg:px-8 overflow-hidden">
|
||||
<div className="max-w-max lg:max-w-7xl mx-auto">
|
||||
<div className="relative">
|
||||
<div className="relative md:p-6">
|
||||
<div className="lg:grid lg:grid-cols-2 lg:gap-6">
|
||||
<div className="lg:max-w-none">
|
||||
<h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
|
||||
What is Mango?
|
||||
</h2>
|
||||
<p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
|
||||
Mango is a decentralized autonomous organization. Its
|
||||
purpose is to contribute maximum value for the defi
|
||||
ecosystem and its developer community to create
|
||||
commercially viable decentralized trading and lending
|
||||
products for traders.
|
||||
</p>
|
||||
|
||||
<h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
|
||||
Why the <GradientText>Insurance fund</GradientText>?
|
||||
</h2>
|
||||
<p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
|
||||
Mango protocol is powered by lenders providing their
|
||||
capital for the community to use for trading and borrowing
|
||||
purposes. The insurance fund is the last line of defense
|
||||
for protecting our mango lenders.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 lg:mt-0">
|
||||
<h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
|
||||
What is the <GradientText>$MNGO</GradientText> token?
|
||||
</h2>
|
||||
<p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
|
||||
We believe that substantial rewards to a strong developer
|
||||
community and liquidity incentives are the essential
|
||||
drivers for growth and therefore the foundation of the
|
||||
Mango DAO.
|
||||
</p>
|
||||
<p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
|
||||
Mango Governance tokens ($MNGO) will serve as the
|
||||
incentive for those who can prove their work is useful to
|
||||
the DAO.
|
||||
</p>
|
||||
<Button>Check out the whitepaper</Button>
|
||||
|
||||
<p className="text-white leading-relaxed py-4">
|
||||
<span className="text-mango-yellow font-semibold">
|
||||
$MNGO
|
||||
</span>{' '}
|
||||
were only provided to contributors who helped build the
|
||||
protocol.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
{/* Section 2 */}
|
||||
<div className="bg-bkg-2 transform -skew-y-3 pt-16 pb-16 mb-16 -mt-32 z-0">
|
||||
<div className="px-8 pt-24 pb-16 z-0 transform skew-y-3">
|
||||
<div className="max-w-7xl mx-auto py-16">
|
||||
<div className="max-w-4xl mb-24 mx-auto text-center">
|
||||
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
||||
Now what?
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-70">
|
||||
The journey has just begun, here's what happens next
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 2 */}
|
||||
<div className="max-w-4xl mb-12 mx-auto text-center">
|
||||
<h2 className="mb-8 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
|
||||
How it works.
|
||||
</h2>
|
||||
<p className="mb-8 text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
|
||||
We take the view that token sales should be simple, transparent and
|
||||
minimize randomness and luck in the distribution.
|
||||
</p>
|
||||
</div>
|
||||
<section className="">
|
||||
<div className="grid grid-cols-3 gap-6 mb-6">
|
||||
<div className="col-span-3 lg:col-span-1">
|
||||
<div className="bg-bkg-3 border border-bkg-4 bg-feature-one bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-mango-yellow font-semibold text-xl tracking-wide mb-2">
|
||||
Deposit your USDC contribution.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-base">
|
||||
Users deposit USDC into a vault during the event period to
|
||||
set their contribution amount.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-3 lg:col-span-2">
|
||||
<div className="bg-bkg-3 border border-bkg-4 bg-feature-two bg-contain lg:bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-mango-yellow font-semibold text-xl tracking-wide mb-2">
|
||||
48 hour participation period.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-base">
|
||||
The event will span over a 2 day period split into two
|
||||
sections,{' '}
|
||||
<span className="text-mango-green italic">
|
||||
Unrestricted
|
||||
</span>{' '}
|
||||
and{' '}
|
||||
<span className="text-mango-red italic">Restricted</span>.
|
||||
</p>
|
||||
<div className="flex flex-wrap overflow-hiddenm mt-8">
|
||||
<div className="w-full overflow-hidden lg:w-1/2 pr-4 mt-4">
|
||||
<p>
|
||||
<span className="text-mango-green italic">
|
||||
Unrestricted
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-white text-opacity-50">
|
||||
During the unrestricted period users may deposit or
|
||||
withdraw their USDC from the vault. During the
|
||||
unrestricted period price can fluctuate.
|
||||
<section className="">
|
||||
<div className="grid grid-cols-3 gap-6 mb-6">
|
||||
<div className="col-span-3 lg:col-span-2">
|
||||
<div className="bg-bkg-3 border border-bkg-4 bg-redeem-one bg-contain bg-bottom bg-no-repeat h-750 md:h-650 lg:h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
With power comes great responsibility
|
||||
</h2>
|
||||
<p className="text-white text-opacity-70 text-base">
|
||||
Mango is the first DAO on Solana to use on-chain
|
||||
governance, this is a big step towrds complete
|
||||
decentralization. It means that founding members do
|
||||
not control the DAO, the DAO is actually controlled by
|
||||
all of us; the MNGO holders.
|
||||
<br />
|
||||
<br />
|
||||
As MNGO holders our highest responsibility is to
|
||||
command and protect the DAO and it's value.
|
||||
Holders have the responsibility to make the rules and
|
||||
decide on the protocols future. Together we will build
|
||||
the constitution, together we will push for progress,
|
||||
together we will grow the protocol.{' '}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full mt-4 overflow-hidden lg:w-1/2">
|
||||
<p>
|
||||
<span className="text-mango-red italic">
|
||||
Restricted
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-white text-opacity-50">
|
||||
After 24 hours deposits will be restricted and only
|
||||
withdrawals allowed. During the restricted period
|
||||
price can only go down.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-3 lg:col-span-1">
|
||||
<div className="bg-bkg-3 border border-bkg-4 bg-redeem-three bg-contain bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
MNGO in the pool?
|
||||
</h2>
|
||||
<p className="text-white text-opacity-70 text-base">
|
||||
We all want MNGO to be traded on Mango V3 at launch.
|
||||
This means MNGO needs liquidity on-par with other top
|
||||
traded tokens on serum. There are no backroom deals,
|
||||
no one officially to make markets for us.
|
||||
<br />
|
||||
<br />
|
||||
We will be creating a Raydium pool with incentives to
|
||||
help provide initial liquidity but we also need the
|
||||
community to add liquidity to the pool and orderbooks.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
<div className="col-span-3 lg:col-span-2">
|
||||
<div className="bg-bkg-3 border border-bkg-4 bg-feature-three bg-contain lg:bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-mango-yellow font-semibold text-xl tracking-wide mb-2">
|
||||
Why does it work this way?
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-base mb-4">
|
||||
Simple mechanisms are easier to build, explain, understand
|
||||
and are harder to exploit. A transparent mechanism
|
||||
increases participation because buyers are more confident
|
||||
there are no hidden tricks that could harm them.
|
||||
</p>
|
||||
<p className="text-white text-opacity-50 text-base mb-4">
|
||||
Elements of luck engineered into the mechanism distribute
|
||||
value randomly to those who are most willing to do the
|
||||
arbitrary, worthless tasks to get the free value.
|
||||
</p>
|
||||
{/*<p className="text-white font-bold leading-relaxed">
|
||||
We believe all "excess" value should be captured
|
||||
by token holders in the DAO.
|
||||
</p>*/}
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
<div className="col-span-3 lg:col-span-1">
|
||||
<div className="bg-bkg-3 border border-bkg-4 bg-redeem-two bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
MNGO holder & maker of markets
|
||||
</h2>
|
||||
<p className="text-white text-opacity-70 text-base">
|
||||
Provide liquidity on the upcoming perp markets, the
|
||||
DAO will vote on liquidity incentives for perp
|
||||
markets,
|
||||
</p>
|
||||
<LinkLeft>link to SDK</LinkLeft>
|
||||
<LinkLeft>link to docs with devnet tutorial</LinkLeft>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-3 lg:col-span-2">
|
||||
<div className="bg-bkg-3 border border-bkg-4 bg-redeem-four bg-contain lg:bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-white font-semibold text-xl tracking-wide mb-2">
|
||||
The road to full decentralization
|
||||
</h2>
|
||||
<p className="text-white text-opacity-70 text-base mb-4">
|
||||
Starts off with the feeling (heres what we've
|
||||
done to keep mango decentralized) ends with the CTA of
|
||||
(heres how you can help, heres what we need)
|
||||
</p>
|
||||
<p className="text-white text-opacity-70 text-base mb-4">
|
||||
rough tech roadmap with link to trello
|
||||
</p>
|
||||
<p className="text-white text-opacity-70 text-base mb-4">
|
||||
if you can help us build it, send us proposals the DAO
|
||||
will vote on grants
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-3 lg:col-span-1">
|
||||
<div className="bg-bkg-3 bg-feature-four bg-cover bg-bottom bg-no-repeat h-650 w-full shadow-md rounded-xl overflow-hidden mx-auto">
|
||||
<div className="py-4 px-8 mt-3">
|
||||
<div className="flex flex-col mb-8">
|
||||
<h2 className="text-mango-yellow font-semibold text-xl tracking-wide mb-2">
|
||||
MNGO unlocked and distributed.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-base">
|
||||
At event conclusion $MNGO gets distributed in propotion to
|
||||
a users USDC contribution.{' '}
|
||||
</p>
|
||||
</section>
|
||||
<div className="bg-bkg-3 border border-bkg-4 rounded-xl shadow-md overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4 mt-8">
|
||||
<div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20 h-350">
|
||||
<div className="lg:self-center">
|
||||
<h2 className="text-3xl font-extrabold text-white sm:text-4xl">
|
||||
<span className="block">Join the Discord</span>
|
||||
</h2>
|
||||
<p className="mt-4 text-xl leading-6 text-white text-opacity-50">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat.{' '}
|
||||
</p>
|
||||
<div className="py-8">
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://trade.mango.markets"
|
||||
>
|
||||
<Button>Start trading now</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
|
||||
<img
|
||||
className="h-550 transform translate-x-2 translate-y-2 rounded-xl shadow-lg object-cover object-left-top sm:translate-x-12 lg:translate-y-16"
|
||||
src="../img/redeem5.png"
|
||||
alt="mango markets"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContentSection
|
||||
export default ContentSectionRedeem
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
//import LinkLeft from "./LinkLeft"
|
||||
import LinkLeft from './LinkLeft'
|
||||
|
||||
const ContentSectionRisks = () => {
|
||||
return (
|
||||
|
|
@ -80,11 +80,13 @@ const ContentSectionRisks = () => {
|
|||
distributing MNGO from the DAO will be inflationary.
|
||||
<br />
|
||||
<br />
|
||||
{/*
|
||||
<a rel="noreferrer" target="_blank" href="https://docs.mango.markets/mango-v3/liquidity-incentives">
|
||||
<LinkLeft>Learn about it in the docs</LinkLeft>
|
||||
</a>
|
||||
*/}
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="https://docs.mango.markets/mango-v3/liquidity-incentives"
|
||||
>
|
||||
<LinkLeft>Learn about it in the docs</LinkLeft>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@ const ContributionModal = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex-1 flex-col bg-bkg-2 border border-bkg-3 p-7 rounded-lg shadow-md z-10">
|
||||
<div className="flex-1 flex-col bg-bkg-2 border border-bkg-3 p-7 rounded-xl shadow-md z-10">
|
||||
<div className="pb-4 text-center">
|
||||
{!submitted &&
|
||||
!submitting &&
|
||||
|
|
@ -180,7 +180,7 @@ const ContributionModal = () => {
|
|||
!(connected && toLateToDeposit) && (
|
||||
<>
|
||||
<h2>The journey starts here.</h2>
|
||||
<p>When you're ready, deposit your USDC</p>
|
||||
<p>When you're ready, deposit your USDC.</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
|
@ -191,13 +191,13 @@ const ContributionModal = () => {
|
|||
toLateToDeposit && (
|
||||
<>
|
||||
<h2>We're sorry, you missed it.</h2>
|
||||
<p>The sale period has ended</p>
|
||||
<p>The sale period has ended.</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!submitted && submitting && (
|
||||
<>
|
||||
<h2>Approve the transaction</h2>
|
||||
<h2>Approve the transaction.</h2>
|
||||
<p>Almost there...</p>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -205,21 +205,21 @@ const ContributionModal = () => {
|
|||
{submitted && !submitting && (
|
||||
<>
|
||||
<h2>
|
||||
You've contributed ${usdFormat.format(contributionAmount)}
|
||||
You've contributed ${usdFormat.format(contributionAmount)}.
|
||||
</h2>
|
||||
<p>Unlock to edit your contribution amount</p>
|
||||
<p>Unlock to edit your contribution amount.</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{editContribution && !submitting && (
|
||||
<>
|
||||
<h2>
|
||||
You've contributed ${usdFormat.format(redeemableBalance)}
|
||||
</h2>{' '}
|
||||
You've contributed ${usdFormat.format(redeemableBalance)}.
|
||||
</h2>
|
||||
<p>
|
||||
{endDeposits?.isBefore() && endIdo?.isAfter()
|
||||
? 'You can only reduce your contribution during the grace period. Reducing cannot be reversed.'
|
||||
: 'Increase or reduce your contribution'}
|
||||
: 'Increase or reduce your contribution.'}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ const FooterSection = () => {
|
|||
>
|
||||
Perpetual Futures
|
||||
</a>{' '}
|
||||
<MangoPill />
|
||||
<MangoPill>SOON</MangoPill>
|
||||
</li>
|
||||
<li className="mb-4">
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@ import GradientText from './GradientText'
|
|||
import RedeemModal from './RedeemModal'
|
||||
const HeroSectionRedeem = () => {
|
||||
return (
|
||||
<section className="max-w-7xl mx-auto px-10">
|
||||
<div className="flex flex-col md:flex-row lg:flex-row m-10 mx-auto">
|
||||
<div className="flex-1">
|
||||
<h2 className="my-5 text-3xl lg:text-5xl text-white font-bold font-heading">
|
||||
<section className="max-w-5xl mx-auto px-4">
|
||||
<div className="flex flex-col md:flex-row lg:flex-row m-10 mx-auto gap-6 items-center">
|
||||
<div className="flex-1 px-4">
|
||||
<h2 className="mb-4 text-3xl md:text-5xl lg:text-5xl text-white font-bold font-heading">
|
||||
The event has ended. <br />
|
||||
It’s time to redeem your
|
||||
<GradientText>$MNGO</GradientText>
|
||||
</h2>
|
||||
<p className="lg:text-xl">
|
||||
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-70">
|
||||
Thank you for your contributions, soon you will be able to help
|
||||
decide the future of Mango.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
const MangoPill = () => {
|
||||
const MangoPill = (props: any) => {
|
||||
return (
|
||||
<div
|
||||
className="inline-flex items-center relative h-6 px-2 py-1 bg-gradient-to-br from-mango-red to-yellow-500
|
||||
rounded-full lg:-top-3 md:-top-3 sm:-top-3 xs:top-2"
|
||||
rounded-full lg:-top-3 md:-top-3 sm:-top-3 xs:-top-2"
|
||||
>
|
||||
<p className="text-white text-xs uppercase font-bold tracking-widest subpixel-antialiased">
|
||||
Soon
|
||||
{props.children}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ const NavBarBeta = () => {
|
|||
} absolute z-50 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2`}
|
||||
>
|
||||
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
|
||||
<div className="relative grid gap-6 bg-bkg-2 px-5 py-6 sm:gap-8 sm:p-8">
|
||||
<div className="relative grid gap-6 bg-bkg-2 px-5 py-6 sm:gap-8 sm:p-8">
|
||||
<h3 className="text-sm tracking-wide font-medium text-yellow-300 uppercase">
|
||||
Trading
|
||||
</h3>
|
||||
|
|
@ -170,7 +170,7 @@ const NavBarBeta = () => {
|
|||
|
||||
<div className="ml-4">
|
||||
<div className="text-base font-medium text-white">
|
||||
Perpetual Futures <MangoPill />
|
||||
Perpetual Futures <MangoPill>SOON</MangoPill>
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Cross-collateralized decentralized leveraged
|
||||
|
|
@ -242,6 +242,37 @@ const NavBarBeta = () => {
|
|||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<h3 className="text-sm tracking-wide font-medium text-yellow-300 uppercase">
|
||||
MERCH
|
||||
</h3>
|
||||
<a
|
||||
href="https://initialcapoffering.com/"
|
||||
className="-m-3 p-3 flex items-start rounded-lg hover:bg-bkg-3"
|
||||
>
|
||||
<svg
|
||||
width="29"
|
||||
height="24"
|
||||
viewBox="0 0 23 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.5 2.50029C15.8333 3.06167 18 5.91603 16 12.8424M14.5 2.50029C14.141 2.45542 13.7301 2.43894 13.2858 2.46255M14.5 2.50029C15.04 2.60153 15.539 2.72783 16 2.8758M5.5 11.0003C5.83333 10.8336 6.9 10.6002 8.5 11.0003C10.1027 11.401 13.6319 12.4439 16 12.8424M5.5 11.0003L1.5 14.0004C1.16667 14.3337 0.800001 14.9004 2 14.5004C3.5 14.0004 6 14.0004 9 16.0004C12 18.0004 16.5 15.0005 17.5 13.0004M5.5 11.0003C6.19231 4.42331 10.4294 2.61435 13.2858 2.46255M17.5 13.0004C19.1 13.0004 20 13.5004 20 13.5004C20.5 13.6671 21.5 13.7004 21.5 12.5004C21.5 11.1016 22.3696 4.92012 16 2.8758M17.5 13.0004C17.1027 13.0004 16.587 12.9412 16 12.8424M13.2858 2.46255C13.5 1 15 1.49993 15 1.49993C15 1.49993 16 1.49979 16 2.8758"
|
||||
stroke="#4F4C67"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
<div className="ml-4">
|
||||
<p className="text-base font-medium text-white">
|
||||
Mango Market Caps
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
The premier fashion choice for Mango lovers,
|
||||
traders, and lenders.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -384,12 +415,11 @@ const NavBarBeta = () => {
|
|||
|
||||
<a
|
||||
href="https://token.mango.markets"
|
||||
className="text-base font-medium text-gray-500 p-1 px-2 hover:bg-th-fgd-4 focus:outline-none rounded-md"
|
||||
className="text-base font-medium text-gray-500 p-1 px-2 hover:bg-bkg-3 focus:outline-none rounded-md"
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
<p>Mango DAO</p>
|
||||
<span style={{ width: '55px' }}></span>
|
||||
{/* <MangoPill /> */}{' '}
|
||||
<MangoPill>WEN</MangoPill>
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,9 @@ const RedeemModal = () => {
|
|||
setSubmitting(true)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
actions.fetchMints()
|
||||
}, [])
|
||||
// useEffect(() => {
|
||||
// actions.fetchMints()
|
||||
// }, [])
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
|
|
@ -70,18 +70,18 @@ const RedeemModal = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col bg-bkg-2 border border-bkg-3 p-7 rounded-lg shadow-lg">
|
||||
<div className="flex flex-col bg-bkg-2 border border-bkg-3 p-7 rounded-xl shadow-lg">
|
||||
<div className="pb-4 text-center">
|
||||
{!submitting ? (
|
||||
<>
|
||||
<h2>Redeem your MNGO</h2>
|
||||
{/* <p>Welcome to the DAO, let's build together.</p> */}
|
||||
<h2>Redeem your MNGO.</h2>
|
||||
<p>Welcome to the DAO, let's build together.</p>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{submitting ? (
|
||||
<>
|
||||
<h2>Approve the transaction</h2>
|
||||
<h2>Approve the transaction.</h2>
|
||||
<p>Almost there...</p>
|
||||
</>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@ import useWalletStore from '../stores/useWalletStore'
|
|||
export default function usePool() {
|
||||
const pool = useWalletStore((s) => s.pool)
|
||||
|
||||
/*
|
||||
const startIdo = pool ? moment.unix(pool.startIdoTs.toNumber()) : undefined
|
||||
const endIdo = pool ? moment.unix(pool.endIdoTs.toNumber()) : undefined
|
||||
const endDeposits = pool
|
||||
? moment.unix(pool.endDepositsTs.toNumber())
|
||||
: undefined
|
||||
*/
|
||||
|
||||
/*
|
||||
// override for announcement
|
||||
const unixTs = 1628553600
|
||||
const startIdo = moment.unix(unixTs)
|
||||
const endDeposits = moment.unix(unixTs).add(1, 'days')
|
||||
const endIdo = moment.unix(unixTs).add(2, 'days')
|
||||
*/
|
||||
|
||||
return { pool, startIdo, endIdo, endDeposits }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -397,6 +397,6 @@
|
|||
}
|
||||
],
|
||||
"metadata": {
|
||||
"address": "CRU6hX2GgtdabESgkoMswMrUdRFxHhCVYmS292VN1Nnn"
|
||||
"address": "6QXNNAPkPsWjd1j3qQJTvRFgSNPARMhF2tE8g1WeGyrM"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 411 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 342 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 740 KiB |
|
|
@ -26,10 +26,10 @@ import { calculateNativeAmountUnsafe } from '../utils/balance'
|
|||
export const ENDPOINTS: EndpointInfo[] = [
|
||||
{
|
||||
name: 'mainnet-beta',
|
||||
url: 'https://api.mainnet-beta.solana.com/',
|
||||
websocket: 'https://api.mainnet-beta.solana.com/',
|
||||
programId: '',
|
||||
poolKey: '',
|
||||
url: 'https://mango.rpcpool.com/',
|
||||
websocket: 'https://mango.rpcpool.com/',
|
||||
programId: '6QXNNAPkPsWjd1j3qQJTvRFgSNPARMhF2tE8g1WeGyrM',
|
||||
poolKey: 'AHBj9LAjxStT2YQHN6QdfHKpZLtEVr8ACqeFgYcPsTnr',
|
||||
},
|
||||
{
|
||||
name: 'devnet',
|
||||
|
|
@ -52,7 +52,7 @@ export const ENDPOINTS: EndpointInfo[] = [
|
|||
},
|
||||
]
|
||||
|
||||
const CLUSTER = 'devnet'
|
||||
const CLUSTER = 'mainnet-beta'
|
||||
const ENDPOINT = ENDPOINTS.find((e) => e.name === CLUSTER)
|
||||
const DEFAULT_CONNECTION = new Connection(ENDPOINT.url, 'recent')
|
||||
const WEBSOCKET_CONNECTION = new Connection(ENDPOINT.websocket, 'recent')
|
||||
|
|
|
|||
|
|
@ -22,8 +22,13 @@ module.exports = {
|
|||
'risk-two': "url('../public/img/risk2.png')",
|
||||
'risk-three': "url('../public/img/risk3.png')",
|
||||
'risk-four': "url('../public/img/risk4.png')",
|
||||
'redeem-one': "url('../public/img/redeem1.png')",
|
||||
'redeem-two': "url('../public/img/redeem2.png')",
|
||||
'redeem-three': "url('../public/img/redeem3.png')",
|
||||
'redeem-four': "url('../public/img/redeem4.png')",
|
||||
}),
|
||||
height: {
|
||||
350: '350px',
|
||||
550: '550px',
|
||||
650: '650px',
|
||||
750: '750px',
|
||||
|
|
|
|||
Loading…
Reference in New Issue