blockworks-foundation
/
mango-token-sale
mirror of https://github.com/blockworks-foundation/mango-token-sale.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into max/ip-block

This commit is contained in:
Maximilian Schneider 2021-08-09 21:49:42 +02:00
parent 58b10d3822 d3840eb578
commit 505878c88b
33 changed files with 470 additions and 509 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

320
components/ContentSectionAbout.tsx
View File

@ -3,244 +3,108 @@ import GradientText from './GradientText'
const ContentSectionAbout = () => {
return (
<>
<div className="bg-bkg-2 transform -skew-y-3 pt-16 pb-16 mb-16 -mt-32 z-0">
<div className="max-w-7xl mx-auto px-8 pt-24 pb-16 transform skew-y-3">
{/* Section 1
<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&apos;s Insurance Fund.
</p>
</div>
<div className="overflow-hidden">
<div className="max-w-max lg:max-w-7xl mx-auto">
<div className="relative">
<div className="lg:grid lg:grid-cols-2 lg:gap-6 py-24 ">
<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 improve the Mango protocol for the greater defi
ecosystem. We aim to create commercially viable decentralized trading and lending
products.
</p>
<h2 className="mt-8 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">
The 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 in case the system fails.
</p>
<h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
What is the <GradientText>$MNGO</GradientText> token?
</h2>
<p className="mb-6 text-lg text-white text-opacity-50 leading-relaxed">
The token is the foundation of the Mango DAO and will be a pivital building block in the future of the protocol.
</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>
</div>
<div
id="about"
className="bg-bkg-2 transform -skew-y-3 pt-16 pb-16 mb-16 -mt-32 z-0"
>
<div className="max-w-7xl mx-auto px-8 pt-24 pb-16 transform skew-y-3">
<div className="py-16 ">
<div className="mb-16 max-w-4xl mx-auto text-center">
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
Why release <GradientText>MNGO</GradientText> token?
</h2>
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-70">
The MNGO token in its inception will serve 3 primary purposes.
</p>
</div>
<div className="mt-6 lg:mt-0">
<h2 className="text-2xl mb-6 leading-tight font-semibold font-heading">
Why the token?
<div className="overflow-hidden">
<div className="max-w-max lg:max-w-6xl mx-auto">
<div className="relative">
<div className="lg:grid lg:grid-cols-3 lg:gap-6">
<div className="lg:col-span-1">
<h2 className="text-2xl mb-4 leading-tight font-semibold font-heading">
Capitalize the Insurance Fund
</h2>
<p className="mb-2 text-lg text-white text-opacity-50 leading-relaxed">
The introduction of the token gives contributing members of the DAO a chance to mold the future of the protocol. The token also helps bootstrap liquidity to the platform buy offering incentives to market makers and participants in the system.
<p className="mb-8 text-base text-white text-opacity-70 leading-relaxed">
The Mango protocol relies on lenders to provide capital
for the others to use for trading and borrowing. The
capital in the Insurance Fund will be used to compensate
lenders in the unlikely event they incur losses.
</p>
</div>
<div className="lg:col-span-1">
<h2 className="text-2xl mb-4 leading-tight font-semibold font-heading">
Govern the Mango DAO
</h2>
<p className="mb-8 text-base text-white text-opacity-70 leading-relaxed">
MNGO tokens represent a direct stake in the Mango DAO. The
future direction of the Mango Protocol will be decided by
voting on proposals using MNGO tokens as the voting
mechanism.
</p>
</div>
<div className="lg:col-span-1">
<h2 className="text-2xl mb-4 leading-tight font-semibold font-heading">
Incentivize liquidity
</h2>
<p className="mb-8 text-base text-white text-opacity-70 leading-relaxed">
Bootstrapping liquidity is important in a new trading
system. Incentivizing market makers to provide it on our
order books with MNGO tokens will benefit the protocol and
its participants.
</p>
<LinkLeft>Checkout the whitepaper</LinkLeft>
<div className="mt-10 mb-8 px-5 py-2 bg-bkg-3 border border-bkg-4 shadow-md rounded-xl">
<h3 className="font-bold text-lg my-2">
Token distribution
</h3>
<div className="grid grid-cols-12 mt-4 py-1 px-1 rounded-md shadow-md bg-mango-med-dark">
<div className="col-span-8 bg-mango-green text-center rounded-l-sm py-1">
<span className="text-xs px-1 font-bold text-white">80%</span>
</div>
<div className="col-span-2 bg-mango-yellow text-center py-1">
<span className="text-xs px-1 font-bold text-white">10%</span>
</div>
<div className="col-span-1 bg-mango-red text-center py-1">
<span className="text-xs px-1 font-bold text-white">5%</span>
</div>
<div className="col-span-1 bg-blue-400 text-center rounded-r-sm py-1">
<span className="text-xs px-1 font-bold text-white">5%</span>
</div>
</div>
<div className="grid grid-cols-4 mt-4">
<div className="col-span-2 md:col-span-2 lg:col-span-1 m-1 p-1">
<p className="text-mango-green font-bold text-md my-2">
Mango DAO
</p>
<p className="text-xs text-white text-opacity-50">
A majority of the tokens will be locked in a smart contract only accessible through DAO governance votes.
</p>
</div>
<div className="col-span-2 md:col-span-2 lg:col-span-1 m-1 p-1">
<p className="text-mango-yellow font-bold text-md my-2">
Liquidity Incentives
</p>
<p className="text-xs text-white text-opacity-50">
Bootstraping liquidity is important, market makers and other participants should be incentivized to be active in the books.
</p>
</div>
<div className="col-span-2 md:col-span-2 lg:col-span-1 m-1 p-1">
<p className="text-mango-red font-bold text-md my-2">
Insurance Fund
</p>
<p className="text-xs text-white text-opacity-50">
MNGO will be exchange for funds commited to the insurance fund that helps protect Mango lenders.
</p>
</div>
<div className="col-span-2 md:col-span-2 lg:col-span-1 m-1 p-1">
<p className="text-blue-400 font-bold text-md my-2">
Contributor Tokens
</p>
<p className="text-xs text-white text-opacity-50">
Tokens distributed to early contributors of the protocol are unlocked and not on a vesting schedule.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
*/}
<div className="py-16 ">
<div className="mb-16 max-w-4xl mx-auto text-center">
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
Why release <GradientText>MNGO</GradientText> token?
</h2>
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-70">
The MNGO token in its inception will serve 3 primary purposes.
</p>
</div>
<div className="mt-10 py-5 px-5 bg-bkg-3 border border-bkg-4 shadow-md rounded-xl">
<h3 className="font-bold text-xl my-2">Token distribution</h3>
<div className="overflow-hidden">
<div className="max-w-max lg:max-w-6xl mx-auto">
<div className="relative">
<div className="lg:grid lg:grid-cols-3 lg:gap-6">
<div className="lg:col-span-1">
<h2 className="text-2xl mb-4 leading-tight font-semibold font-heading">
Capitalize the Insurance Fund
</h2>
<p className="mb-8 text-base text-white text-opacity-70 leading-relaxed">
The Mango protocol relies on lenders to provide capital
for the others to use for trading and borrowing. The
capital in the Insurance Fund will be used to compensate
lenders in the unlikely event they incur losses.
</p>
<div className="grid grid-cols-12 mt-4 py-1 px-1 rounded-md shadow-md bg-mango-med-dark">
<div className="col-span-10 bg-mango-green text-center rounded-l-sm py-1">
<span className="text-xs px-1 font-bold text-white">
90%
</span>
</div>
<div className="lg:col-span-1">
<h2 className="text-2xl mb-4 leading-tight font-semibold font-heading">
Govern the Mango DAO
</h2>
<p className="mb-8 text-base text-white text-opacity-70 leading-relaxed">
MNGO tokens represent a direct stake in the Mango DAO.
The future direction of the Mango Protocol will be
decided by voting on proposals using MNGO tokens as the
voting mechanism.
</p>
<div className="col-span-1 bg-mango-red text-center py-1">
<span className="text-xs px-1 font-bold text-white">
5%
</span>
</div>
<div className="lg:col-span-1">
<h2 className="text-2xl mb-4 leading-tight font-semibold font-heading">
Incentivize liquidity
</h2>
<p className="mb-8 text-base text-white text-opacity-70 leading-relaxed">
Bootstrapping liquidity is important in a new trading
system. Incentivizing market makers to provide it on our
order books with MNGO tokens will benefit the protocol
and its participants.
</p>
<div className="col-span-1 bg-blue-400 text-center rounded-r-sm py-1">
<span className="text-xs px-1 font-bold text-white">
5%
</span>
</div>
</div>
<div className="mt-10 py-5 px-5 bg-bkg-3 border border-bkg-4 shadow-md rounded-xl">
<h3 className="font-bold text-xl my-2">
Token distribution
</h3>
<div className="grid grid-cols-12 mt-4 py-1 px-1 rounded-md shadow-md bg-mango-med-dark">
<div className="col-span-10 bg-mango-green text-center rounded-l-sm py-1">
<span className="text-xs px-1 font-bold text-white">
90%
</span>
</div>
{/*
<div className="col-span-2 bg-mango-yellow text-center py-1">
<span className="text-xs px-1 font-bold text-white">
10%
</span>
</div>
*/}
<div className="col-span-1 bg-mango-red text-center py-1">
<span className="text-xs px-1 font-bold text-white">
5%
</span>
</div>
<div className="col-span-1 bg-blue-400 text-center rounded-r-sm py-1">
<span className="text-xs px-1 font-bold text-white">
5%
</span>
</div>
<div className="grid grid-cols-3 mt-4">
<div className="col-span-3 md:col-span-1 lg:col-span-1 m-1 p-1">
<p className="text-mango-green font-bold text-base my-2">
Mango DAO
</p>
<p className="text-white text-opacity-70">
90% of MNGO tokens will be locked in a smart contract,
only accessible via DAO governance votes.
</p>
</div>
<div className="grid grid-cols-3 mt-4">
<div className="col-span-3 md:col-span-1 lg:col-span-1 m-1 p-1">
<p className="text-mango-green font-bold text-base my-2">
Mango DAO
</p>
<p className="text-white text-opacity-70">
90% of MNGO tokens will be locked in a smart contract,
only accessible via DAO governance votes.
</p>
</div>
{/*
<div className="col-span-2 md:col-span-2 lg:col-span-1 m-1 p-1">
<p className="text-mango-yellow font-bold text-base my-2">
Liquidity incentives
</p>
<p className="text-white text-opacity-70">
10% will be used to incentivize market makers and
liquidity providers to be active in the system.
</p>
</div>
*/}
<div className="col-span-3 md:col-span-1 lg:col-span-1 m-1 p-1">
<p className="text-mango-red font-bold text-base my-2">
Insurance Fund
</p>
<p className="text-white text-opacity-70">
5% of MNGO tokens will be used to capitalize the
Insurance Fund that will protect lenders in the Mango
Protocol.
</p>
</div>
<div className="col-span-3 md:col-span-1 lg:col-span-1 m-1 p-1">
<p className="text-blue-400 font-bold text-base my-2">
Contributor tokens
</p>
<p className="text-white text-opacity-70">
5% will be distributed to the team and early
contributors. These tokens are unlocked.
</p>
</div>
<div className="col-span-3 md:col-span-1 lg:col-span-1 m-1 p-1">
<p className="text-mango-red font-bold text-base my-2">
Insurance Fund
</p>
<p className="text-white text-opacity-70">
5% of MNGO tokens will be used to capitalize the
Insurance Fund that will protect lenders in the Mango
Protocol.
</p>
</div>
<div className="col-span-3 md:col-span-1 lg:col-span-1 m-1 p-1">
<p className="text-blue-400 font-bold text-base my-2">
Contributor tokens
</p>
<p className="text-white text-opacity-70">
5% will be allocated to a distributed group of early
contributors, who worked tirelessly on this project over
the last year. These tokens are unlocked.
</p>
</div>
</div>
</div>
@ -249,7 +113,7 @@ const ContentSectionAbout = () => {
</div>
</div>
</div>
</>
</div>
)
}

310
components/ContentSectionRedeem.tsx
View File

@ -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&apos;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&apos;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&apos;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 &quot;excess&quot; 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 &amp; 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&apos;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

14
components/ContentSectionRisks.tsx
View File

@ -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>

65
components/ContributionModal.tsx
View File

@ -49,6 +49,8 @@ const ContributionModal = () => {
const [errorMessage, setErrorMessage] = useState(null)
const [refreshing, setRefreshing] = useState(false)
const usdFormat = new Intl.NumberFormat('en-US')
//onst priceFormat = new Intl.NumberFormat('en-US', {
// maximumSignificantDigits: 4,
//})
@ -86,7 +88,7 @@ const ContributionModal = () => {
setWalletAmount(totalBalance - amount)
setContributionAmount(amount)
if (endDeposits?.isBefore() && amount > redeemableBalance) {
setErrorMessage('Deposits ended, contribution can not increase')
setErrorMessage('Deposits ended, contribution cannot increase')
setTimeout(() => setErrorMessage(null), 4000)
}
}
@ -95,7 +97,7 @@ const ContributionModal = () => {
let newContribution = Math.round(percentage * totalBalance) / 100
if (endDeposits?.isBefore() && newContribution > redeemableBalance) {
newContribution = redeemableBalance
setErrorMessage('Deposits ended, contribution can not increase')
setErrorMessage('Deposits ended, contribution cannot increase')
setTimeout(() => setErrorMessage(null), 4000)
}
@ -155,19 +157,24 @@ const ContributionModal = () => {
}
}, [submitting])
const hasUSDC = usdcBalance > 0 || redeemableBalance > 0
const difference = contributionAmount - redeemableBalance
const toLateToDeposit =
endDeposits?.isBefore() && endIdo.isAfter() && !largestAccounts.redeemable
endDeposits?.isBefore() &&
endIdo.isAfter() &&
!largestAccounts.redeemable?.balance
const disableFormInputs =
submitted || !connected || loading || (connected && toLateToDeposit)
const dontAddMore =
endDeposits?.isBefore() && contributionAmount > redeemableBalance
const disableSubmit = disableFormInputs || walletAmount < 0 || dontAddMore
const disableSubmit = disableFormInputs || walletAmount <= 0 || dontAddMore
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 &&
@ -175,7 +182,7 @@ const ContributionModal = () => {
!(connected && toLateToDeposit) && (
<>
<h2>The journey starts here.</h2>
<p>When your&apos;re ready, deposit your USDC</p>
<p>When you&apos;re ready, deposit your USDC.</p>
</>
)}
@ -186,28 +193,36 @@ const ContributionModal = () => {
toLateToDeposit && (
<>
<h2>We&apos;re sorry, you missed it.</h2>
<p>Deposits are already closed</p>
<p>The sale period has ended.</p>
</>
)}
{!submitted && submitting && (
<>
<h2>Approve the transaction</h2>
<h2>Approve the transaction.</h2>
<p>Almost there...</p>
</>
)}
{submitted && !submitting && (
<>
<h2>Your contribution amount</h2>
<p>Thanks for contributing...</p>
<h2>
You&apos;ve contributed ${usdFormat.format(contributionAmount)}.
</h2>
<p>Unlock to edit your contribution amount.</p>
</>
)}
{editContribution && !submitting && (
<>
<h2>Funds unlocked</h2>
<p>Increase or reduce your contribution...</p>
<h2>
You&apos;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.'}
</p>
</>
)}
</div>
@ -226,20 +241,27 @@ const ContributionModal = () => {
<div className="flex items-center text-xs text-fgd-4">
<a
onClick={handleRefresh}
className={refreshing && 'animate-spin'}
className={
refreshing ? 'animate-spin' : 'hover:cursor-pointer'
}
>
<RefreshIcon
className={`w-4 h-4`}
style={{ transform: 'scaleX(-1)' }}
/>
</a>
<WalletIcon className="w-4 h-4 mx-1 text-fgd-3 fill-current" />
<div title="Wallet Icon">
<WalletIcon className="w-4 h-4 mx-1 text-fgd-3 fill-current" />
</div>
{connected ? (
loading ? (
<div className="bg-bkg-4 rounded w-10 h-4 animate-pulse" />
) : (
<span className="font-display text-fgd-1 ml-1">
{walletAmount.toFixed(2)}
<span
className="font-display text-fgd-3 ml-1"
title="Wallet USDC"
>
{usdFormat.format(walletAmount)}
</span>
)
) : (
@ -247,10 +269,11 @@ const ContributionModal = () => {
)}
<img
alt=""
title="Wallet USDC"
width="16"
height="16"
src="/icons/usdc.svg"
className={`ml-1`}
className="ml-1 opacity-75"
/>
</div>
<div className="flex">
@ -320,8 +343,12 @@ const ContributionModal = () => {
>
<div className={`flex items-center justify-center`}>
{dontAddMore
? 'Sorry you can’t add anymore 🥲'
: 'Set Contribution'}
? "Sorry you can't add anymore 🥲"
: !hasUSDC && connected
? 'Your USDC balance is 0'
: difference >= 0
? `Deposit $${usdFormat.format(difference)}`
: `Withdraw $${usdFormat.format(-difference)}`}
</div>
</Button>
) : (

2
components/FooterSection.tsx
View File

@ -136,7 +136,7 @@ const FooterSection = () => {
>
Perpetual Futures
</a>{' '}
<MangoPill />
<MangoPill>SOON</MangoPill>
</li>
<li className="mb-4">
<a

25
components/HeroSection.tsx
View File

@ -1,6 +1,15 @@
import { ChevronDownIcon } from '@heroicons/react/solid'
import GradientText from './GradientText'
import Button from './Button'
import Link from './Link'
function scrollToId(id: string) {
const element = document.getElementById(id)
const y = element.getBoundingClientRect().top + window.scrollY
window.scroll({
top: y,
behavior: 'smooth',
})
}
const HeroSection = () => {
return (
@ -16,12 +25,16 @@ const HeroSection = () => {
leverage trading &amp; lending.
</p>
</div>
<div className="mb-16 flex lg:flex-row md:flex-row lg:justify-center md:justify-center sm:justify-center">
<a className="sm:px-1" rel="noreferrer" target="_blank" href="#">
<Button>Contribute now</Button>
<div className="mb-16 flex flex-col items-center">
<a className="mb-6" onClick={() => scrollToId('contribute')}>
<Button>Contribute Now</Button>
</a>
<a className="pl-2 " rel="noreferrer" target="_blank" href="#">
<Link>Learn more</Link>
<a
className="cursor-pointer flex flex-col items-center text-fgd-1 hover:underline"
onClick={() => scrollToId('about')}
>
<div>Learn More</div>
<ChevronDownIcon className="h-5 w-5" />
</a>
</div>
</div>

7
components/HeroSectionLead.tsx
View File

@ -1,5 +1,6 @@
import GradientText from './GradientText'
import usePool from '../hooks/usePool'
import moment from 'moment-timezone'
const HeroSectionLead = () => {
const { startIdo } = usePool()
@ -12,7 +13,11 @@ const HeroSectionLead = () => {
<h2 className="mb-8 text-7xl text-white font-bold font-heading">
<GradientText>WEN</GradientText> TOKEN?
</h2>
<p className="mb-8 text-7xl">{startIdo?.fromNow()}</p>
<p className="mb-8 text-2xl">
{startIdo
?.tz(moment.tz.guess())
?.format('dddd, MMMM Do YYYY, h:mm:ss A z')}
</p>
</div>
</div>
</div>

10
components/HeroSectionRedeem.tsx
View File

@ -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&nbsp;
<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>

6
components/MangoPill.tsx
View File

@ -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>
)

4
components/ModalSection.tsx
View File

@ -4,13 +4,13 @@ import StatsModal from './StatsModal'
const ModalSection = () => {
return (
<>
<div className="pt-32 pb-48 px-4">
<div id="contribute" className="pt-32 pb-48 px-4">
<div className="max-w-5xl mx-auto text-center mb-12">
<h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
Ready to contribute?
</h2>
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
Join us and become a valued stakeholder in the Mango Dao.
Join us and become a valued stakeholder in the Mango DAO.
</p>
</div>
<div className="max-w-3xl flex flex-wrap md:flex-row lg:flex-row mx-auto">

56
components/NavBarBeta.tsx
View File

@ -1,7 +1,6 @@
import { useEffect, useState } from 'react'
import MangoPill from '../components/MangoPill'
//import MangoSale from '../components/MangoSale'
import Button from './Button'
// import Button from './Button'
const NavBarBeta = () => {
const [mobileMenuVisible, setMobileMenuVisible] = useState(false)
@ -111,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>
@ -171,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
@ -243,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>
@ -383,30 +413,24 @@ const NavBarBeta = () => {
</div>
</div>
{/*
<a
href="https://mango-token-sale.netlify.app"
className="text-base font-medium text-gray-500 p-1 px-2 hover:bg-th-fgd-4 focus:outline-none rounded-md"
>
*/}
<a
href="#"
onClick={doNothing}
className="disabled text-base font-medium text-gray-500 p-1 px-2 opacity-50"
href="https://token.mango.markets"
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>
<MangoPill />
<MangoPill>WEN</MangoPill>
</div>
</a>
</nav>
<div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
<div style={{ width: '310px' }} />
{/* <div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
<div>
<a rel="noreferrer" target="_blank" href="#">
<Button>Contribute now</Button>
</a>
</div>
</div>
</div> */}
</div>
</div>

2
components/Notification.tsx
View File

@ -17,7 +17,7 @@ const NotificationList = () => {
setNotificationStore((state) => {
state.notifications = notifications.slice(1, notifications.length)
})
}, 5000)
}, 6000)
return () => {
clearInterval(id)

6
components/PoolCountdown.tsx
View File

@ -15,8 +15,10 @@ const PoolCountdown = (props: { className?: string; date: moment.Moment }) => {
return <p className="text-mango-red text-xl">{message}</p>
} else {
return (
<div className={`${props.className} font-bold text-white flex `}>
<ClockIcon className="w-7 h-7 mr-3" />
<div
className={`${props.className} font-bold text-white flex items-center`}
>
<ClockIcon className="w-5 h-5 mr-2 mt-0.5 text-fgd-3" />
<span className="text-xl">
{/* <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded"> */}
{hours < 10 ? `0${hours}` : hours}

8
components/PoolInfoCards.tsx
View File

@ -24,14 +24,14 @@ const PoolInfoCards = () => {
return (
<div className="max-w-7xl flex flex-wrap mx-auto px-6 mb-16 z-10">
<Card title="Deposits closing in">
<Card title="Sale Period Ends">
<PoolCountdown date={endDeposits} />
</Card>
<Card title="Sale event ends in">
<Card title="Grace Period Ends">
<PoolCountdown date={endIdo} />
</Card>
<Card title="Total contributions">
<Card title="USDC Contributed">
<div className="flex">
<img
alt="USDC"
@ -45,7 +45,7 @@ const PoolInfoCards = () => {
</div>
</div>
</Card>
<Card title="Total $MNGO for sale">
<Card title="MNGO For Sale">
<div className="flex">
<img className="h-7 mr-2 w-auto" src="/logo.svg" alt="MNGO" />
<div className="font-bold text-fgd-1 text-xl">

14
components/RedeemModal.tsx
View File

@ -44,6 +44,10 @@ const RedeemModal = () => {
setSubmitting(true)
}
// useEffect(() => {
// actions.fetchMints()
// }, [])
useEffect(() => {
setLoading(true)
if (largestAccounts.redeemable) {
@ -66,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&apos;s build together.</p> */}
<h2>Redeem your MNGO.</h2>
<p>Welcome to the DAO, let&apos;s build together.</p>
</>
) : null}
{submitting ? (
<>
<h2>Approve the transaction</h2>
<h2>Approve the transaction.</h2>
<p>Almost there...</p>
</>
) : null}
@ -154,7 +158,7 @@ const RedeemModal = () => {
disabled={disableSubmit}
>
<div className={`flex items-center justify-center`}>
Redeem 🥭
Redeem {redeemableBalance} MNGO
</div>
</Button>
</div>

36
components/ScrollToTop.tsx Normal file
View File

@ -0,0 +1,36 @@
import React, { useEffect, useState } from 'react'
import { ChevronUpIcon } from '@heroicons/react/solid'
export default function ScrollToTop() {
const [isVisible, setIsVisible] = useState(false)
const toggleVisibility = () => {
if (window.pageYOffset > 300) {
setIsVisible(true)
} else {
setIsVisible(false)
}
}
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
}
useEffect(() => {
window.addEventListener('scroll', toggleVisibility)
}, [])
return (
isVisible && (
<div
className="cursor-pointer default-transition fixed bottom-2 lg:bottom-8 right-2 lg:right-8 bg-bkg-4 flex items-center justify-center h-10 rounded-full w-10 hover:bg-fgd-4"
onClick={scrollToTop}
>
<ChevronUpIcon className="h-6 w-6 text-primary-light" />
</div>
)
)
}

11
components/StatsModal.tsx
View File

@ -12,6 +12,7 @@ const StatsModal = () => {
// : 0
const priceFormat = new Intl.NumberFormat('en-US', {
minimumSignificantDigits: 4,
maximumSignificantDigits: 4,
})
@ -19,17 +20,17 @@ const StatsModal = () => {
<>
<div className="flex-1 m-3 sm:-ml-8 bg-secondary-4-dark border border-bkg-3 py-6 rounded-xl shadow-md divide-y-2 divide-white divide-opacity-5 z-0">
<div className="pb-4 text-center">
<p className="text-fgd-3">Deposits end in:</p>
<p className="text-fgd-3">Sale Period Ends</p>
<PoolCountdown date={endDeposits} className="justify-center pt-1" />
</div>
<div className="py-4 text-center">
<p className="text-fgd-3">Grace Period ends in:</p>
<p className="text-fgd-3">Grace Period Ends</p>
<PoolCountdown date={endIdo} className="justify-center pt-1" />
</div>
<div className="py-4 text-center">
<p className="text-fgd-3">Total USDC Deposited:</p>
<p className="text-fgd-3">USDC Contributed</p>
<div className="flex items-center justify-center pt-0.5">
<img
alt=""
@ -45,7 +46,7 @@ const StatsModal = () => {
</div>
<div className="py-4 text-center">
<p className="text-fgd-3">Estimated Token Price:</p>
<p className="text-fgd-3">Estimated Token Price</p>
<div className="flex items-center justify-center pt-0.5">
<img
alt=""
@ -61,7 +62,7 @@ const StatsModal = () => {
</div>
<div className="pt-4 text-center">
<p className="text-fgd-3">MNGO in vault:</p>
<p className="text-fgd-3">MNGO For Sale</p>
<div className="flex items-center justify-center pt-0.5">
<img className="h-5 mr-2 w-auto" src="/logo.svg" alt="mango" />
<div className="font-bold text-fgd-1 text-xl">

4
hooks/usePool.tsx
View File

@ -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 }
}

2
idls/ido_pool.json
View File

@ -397,6 +397,6 @@
}
],
"metadata": {
"address": "CRU6hX2GgtdabESgkoMswMrUdRFxHhCVYmS292VN1Nnn"
"address": "6QXNNAPkPsWjd1j3qQJTvRFgSNPARMhF2tE8g1WeGyrM"
}
}

1
package.json
View File

@ -31,6 +31,7 @@
"@solana/web3.js": "^1.5.0",
"immer": "^9.0.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"next": "latest",
"next-themes": "^0.0.14",
"rc-slider": "^9.7.2",

2
pages/ContributionPage.tsx
View File

@ -5,6 +5,7 @@ import ContentSectionAbout from '../components/ContentSectionAbout'
import ContentSectionSale from '../components/ContentSectionSale'
import ContentSectionRisks from '../components/ContentSectionRisks'
import FooterSection from '../components/FooterSection'
import ScrollToTop from '../components/ScrollToTop'
const ContributionPage = () => {
return (
@ -16,6 +17,7 @@ const ContributionPage = () => {
<ContentSectionRisks />
<ModalSection />
<FooterSection />
<ScrollToTop />
</>
)
}

2
pages/_app.tsx
View File

@ -11,7 +11,7 @@ function App({ Component, pageProps }) {
'Claim your stake in the Mango DAO. Join us in building Mango, the protocol for permissionless leverage trading & lending.'
const keywords =
'Mango Markets, Serum, SRM, Serum DEX, DEFI, Decentralized Finance, Decentralised Finance, Crypto, ERC20, Ethereum, Decentralize, Solana, SOL, SPL, Cross-Chain, Trading, Fastest, Fast, SerumBTC, SerumUSD, SRM Tokens, SPL Tokens'
const baseUrl = 'https://mango-token-sale.netlify.app'
const baseUrl = 'https://token.mango.markets'
return (
<>

BIN
public/img/redeem1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 KiB

BIN
public/img/redeem2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 KiB

BIN
public/img/redeem3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 411 KiB

BIN
public/img/redeem4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
public/img/redeem5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 342 KiB

BIN
public/preview.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 740 KiB

36
stores/useWalletStore.tsx
View File

@ -21,21 +21,22 @@ import { TOKEN_PROGRAM_ID } from '@solana/spl-token'
import { createAssociatedTokenAccount } from '../utils/associated'
import { sendTransaction } from '../utils/send'
import { DEFAULT_PROVIDER } from '../utils/wallet-adapters'
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',
url: 'https://cache.devnet.rpcpool.com',
websocket: 'https://cache.devnet.rpcpool.com',
// programId: '2oBtRS2AAQfsMxXQfg41fKFY9zjvHwSSD7G5idrCFziV', // owned by devnet key
programId: 'CRU6hX2GgtdabESgkoMswMrUdRFxHhCVYmS292VN1Nnn', // owned by governance
programId: '2oBtRS2AAQfsMxXQfg41fKFY9zjvHwSSD7G5idrCFziV', // owned by devnet key
// programId: 'CRU6hX2GgtdabESgkoMswMrUdRFxHhCVYmS292VN1Nnn', // owned by governance
//poolKey: 'GvSyVjGwLBeWdURMLDmSffQPqA8g547A6TURbbBnDpa4', // governance test
// poolKey: '82ndgp58GXpwuLrEc9svHFdhiEsPaZoNUEWwgc79WHqk', // already over
poolKey: '5heMyYtJK1Us9Hx2w6s5rLDNj8RufeyCR1ZUJAVFLQL7', // long deposits
@ -51,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')
@ -227,7 +228,6 @@ const useWalletStore = create<WalletStore>((set, get) => ({
current: wallet,
connection: { current: connection },
} = get()
const usdcDecimals = mints[usdcVault.mint.toBase58()].decimals
const redeemable = findLargestBalanceAccountForMint(
mints,
tokenAccounts,
@ -246,8 +246,10 @@ const useWalletStore = create<WalletStore>((set, get) => ({
)
if (difference > 0) {
const depositAmount = new anchor.BN(
difference * Math.pow(10, usdcDecimals)
const depositAmount = calculateNativeAmountUnsafe(
mints,
usdcVault.mint,
difference
)
console.log(depositAmount.toString(), 'exchangeUsdcForReemable')
@ -279,8 +281,10 @@ const useWalletStore = create<WalletStore>((set, get) => ({
)
await sendTransaction({ transaction, wallet, connection })
} else if (difference < 0) {
const withdrawAmount = new anchor.BN(
difference * -1 * Math.pow(10, usdcDecimals)
const withdrawAmount = calculateNativeAmountUnsafe(
mints,
usdcVault.mint,
-1 * difference
)
console.log(withdrawAmount.toString(), 'exchangeRedeemableForUsdc')
await program.rpc.exchangeRedeemableForUsdc(withdrawAmount, {
@ -367,7 +371,13 @@ const useWalletStore = create<WalletStore>((set, get) => ({
)
)
await sendTransaction({ transaction, wallet, connection })
await sendTransaction({
transaction,
wallet,
connection,
sendingMessage: 'Sending redeem MNGO transaction...',
successMessage: 'MNGO redeemed successfully!',
})
await Promise.all([
actions.fetchPool(),

5
tailwind.config.js
View File

@ -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',

10
utils/balance.tsx
View File

@ -24,3 +24,13 @@ export function calculateSupply(
const mint = mints[pk.toBase58()]
return mint && fixedPointToNumber(mint.supply, mint.decimals)
}
export function calculateNativeAmountUnsafe(
mints: { [pk: string]: MintAccount },
pk: PublicKey,
amount: number
): BN {
const mint = mints[pk.toBase58()]
const nativeAmount = Math.round(amount * Math.pow(10, mint.decimals))
return new BN(nativeAmount.toString())
}

12
utils/wallet-adapters/index.ts
View File

@ -6,6 +6,12 @@ const ASSET_URL =
'https://cdn.jsdelivr.net/gh/solana-labs/oyster@main/assets/wallets'
export const WALLET_PROVIDERS = [
{
name: 'Phantom',
url: 'https://www.phantom.app',
icon: `https://www.phantom.app/img/logo.png`,
adapter: PhantomWalletAdapter,
},
{
name: 'Sollet.io',
url: 'https://www.sollet.io',
@ -18,12 +24,6 @@ export const WALLET_PROVIDERS = [
icon: `${ASSET_URL}/sollet.svg`,
adapter: SolletExtensionAdapter as any,
},
{
name: 'Phantom',
url: 'https://www.phantom.app',
icon: `https://www.phantom.app/img/logo.png`,
adapter: PhantomWalletAdapter,
},
]
export const DEFAULT_PROVIDER = WALLET_PROVIDERS[0]

9
yarn.lock
View File

@ -4227,7 +4227,14 @@ modern-normalize@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.0.0.tgz#539d84a1e141338b01b346f3e27396d0ed17601e"
moment@^2.29.1:
moment-timezone@^0.5.33:
version "0.5.33"
resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.33.tgz#b252fd6bb57f341c9b59a5ab61a8e51a73bbd22c"
integrity sha512-PTc2vcT8K9J5/9rDEPe5czSIKgLoGsH8UNpA4qZTVw0Vd/Uz19geE9abbIOQKaAQFcnQ3v5YEXrbSc5BpshH+w==
dependencies:
moment ">= 2.9.0"
"moment@>= 2.9.0", moment@^2.29.1:
version "2.29.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==