diff --git a/components/ContentSection.tsx b/components/ContentSection.tsx index 1e4eb47..d6562bf 100644 --- a/components/ContentSection.tsx +++ b/components/ContentSection.tsx @@ -1,327 +1,345 @@ -import LinkLeft from './LinkLeft' import GradientText from './GradientText' const ContentSection = () => { return ( <> -
-
-
-

- It is still the early days. -

-

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

-
- - {/* Section 1 */} - -
-
-
-
-
-

- What is Mango? -

-

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

-

- Why the Insurance fund? -

-

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

-

- What is the $MNGO token? -

-

- The token is the foundation of the Mango DAO and will be a pivital building block in the future of the protocol. -

-

- Mango Governance tokens ($MNGO) will serve as the - incentive for those who can prove their work is useful to - the DAO. -

-
- - - -
-

- Why the token? -

-

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

- Checkout the whitepaper - -
-

- Token distribution. -

- -
-
- 80% -
-
- 10% -
-
- 5% -
-
- 5% -
-
-
-
-

- Mango DAO -

-

- A majority of the tokens will be locked in a smart contract only accessible through DAO governance votes. -

-
-
-

- Liquidity Incentives -

-

- Bootstraping liquidity is important, market makers and other participants should be incentivized to be active in the books. -

-
-
-

- Insurance Fund -

-

- MNGO will be exchange for funds commited to the insurance fund that helps protect Mango lenders. -

-
-
-

- Contributor Tokens -

-

- Tokens distributed to early contributors of the protocol are unlocked and not on a vesting schedule. -

-
-
-
-
-
-
-
-
+
+
+
+

+ How the token sale works +

+

+ Fairness and transparency for all participants. +

-
- - -{/* Section 2 */} -
-
-
-

- How the sale works. -

-

- We take the view that token sales should be simple, transparent and - fairly distributed. -

-
-
-
- -
-
-
-
-

- The 48 hour participation period begins. -

-

- The event will span over 2 days split into two periods,{' '} - - sale period - {' '} - and{' '} - grace period. -

-
-
-

- - Sale Period - -

-

- During the sale period, you may deposit or - withdraw USDC from the vault. During the sale - period, the $MNGO price can fluctuate. -

-
- -
-

- - Grace Period - -

-

- After 24 hours deposits will be restricted and only - withdrawals allowed. During the grace period - price can only go down. -

+
+
+
+
+
+
+

+ The token sale will span 48 hours +

+

+ The 48 hours consists of two 24 hour periods, the{' '} + + sale period + {' '} + and the{' '} + + grace period + + . +

+
+
+

+ + Sale period{' '} + + (first 24 hours) + + +

+

+ In the first 24 hours, you may deposit or withdraw + your USDC from the vault. During the sale period, + the MNGO price can fluctuate. +

+
+
+

+ + Grace period{' '} + + (second 24 hours) + + +

+

+ After 24 hours, deposits will be restricted and only + withdrawals allowed. During the grace period, the + MNGO price can only go down. +

+
-
-
-
-
-
-

- Deposit USDC into Vault. -

-

- Users deposit their USDC into the contribution vault during the - sale period locking in their ticket for $MNGO redemptions on sale completion. -

+
+
+
+ +
+

+ 1. Deposit your USDC +

+

+ During the + + {' '} + sale period + {' '} + you can deposit USDC into the vault. You can also change + this amount by withdrawing or depositing additional USDC + if you choose to. +

+
+
+
+
+
+
+
+ +
+

+ 2. Redeem you MNGO +

+

+ Once the{' '} + grace period ends + the MNGO tokens will be unlocked for redemption. The + number of tokens you'll receive will be + proportional to your USDC contribution. +

+
+
+
+
+
+
+
+
+

+ Why does it work this way? +

+

+ We wanted to build a mechanism that is fair and + transparent for all participants. No private sale, no + backroom deals with VCs, all players are on a level + playing field. +

+

+ The mechanism is simple but robust. This makes it easier + to build, use, and more importantly, harder to exploit. +

+
-
- -
- -
-
-
-
-

- MNGO unlocked and redeemable. -

-

- Once the grace period ends, MNGO will be unlocked for redemption from the distribution vault. -
-
- Users receive a token amount - in proportion to their USDC contribution.{' '} -

-
-
-
-
-
-
-
-
-

- Why does it work this way? -

-

- We wanted to build a mechanism that is fair and transparent for all participants. No private sale, no backroom deals with VCs, all players are on a level playing field. -

-

- The mechanism is simple but robust. This makes it easier to build, use, and more importantly, harder to exploit. -

- {/*

- We believe all "excess" value should be captured - by token holders in the DAO. -

*/} -
-
-
-
-
-
+
+
-
+
+
+

+ Why release MNGO token? +

+

+ The MNGO token in its inception will serve 3 primary purposes. +

+
+
+
+
+
+
+

+ Capitalize the Insurance Fund +

+

+ 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. +

+
+
+

+ Govern the Mango DAO +

+

+ 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. +

+
+
+

+ Incentivize liquidity +

+

+ Bootstraping liquidity is important in a new trading system. + Incentivising market makers and other liquidity providers + with MNGO tokens will benefit the protocol and its + participants. +

+
+
+
+

Token distribution

-{/* Section 3 */} -
-
-
-

- We want to be fully transparent. -

-

- We feel it is important to detail current risks to the system in order to give full transparency for participants in the insurance fund sale. +

+
+ + 80% + +
+
+ + 10% + +
+
+ + 5% + +
+
+ + 5% + +
+
+
+
+

+ Mango DAO +

+

+ 80% of MNGO tokens will be locked in a smart contract, + only accessible via DAO governance votes.

- -
-
-

- Unaudited smart contracts. -

-

- We take great care and forethought in the way we build our smart contracts, we opensource all code once - ready and work with many industry leading developers during creation. -
-
- While this is the case we cannot guarantee they are free of potential exploits. - Users should understand the risks when participating today and know what they are contribtuing too. -

+
+

+ Liquidity incentives +

+

+ 10% will be used to incentivize market makers and + liquidity providers to be active in the system. +

+
+
+

+ Insurance Fund +

+

+ 5% of MNGO tokens will be used to capitalize the Insurance + Fund that will protect lenders in the Mango Protocol. +

+
+
+

+ Team/contributor tokens +

+

+ 5% will be distributed to the team and early contributors. + These tokens are unlocked. +

-
-

- New token sale mechanism -

-

- The Mango token sale was designed with the goal of being as fair as possible to all participants. - However, there is a mechanism by which one or more participants with large amounts of capital could - discourage others from participating in the token sale. -
-
- During the deposit phase, these participants - could deposit very large amounts of USDC. This would drive up the average price of the token and - potentially discourage others from participating in the sale. -
-
Then, during the last minute - of the withdrawal phase, these large participants could withdraw much of their USDC, thus - receiving a much lower average price, depending on how successful they were at discouraging others. -
-
- Therefore, all participants should be aware of this potential behaviour during the sale and - make their best decisions accordingly. -

-
-
-

- Not fully decentralzed; yet. -

-

- Whilst the path to becoming decentralized is kicking off with the token sale, at inception the team will have control over the direction of the protocol until the governance mechanism is estabilshed and tools built out. -
-
- Contributers must trust the mango team until full decentralization is reached. - -
-
- We offer full transparency in during this phase of transition and will commit to creating a fair voting system for those participating in DAO votes in the future. -

+
+
- + +
+
+
+

+ Transparency builds trust +

+

+ There are risks in participating in the token sale. It's + important you understand them before deciding to commit your + funds. +

+
+ +
+
+

+ Unaudited smart contracts +

+

+ We take great care and forethought in the way we build our smart + contracts, we opensource all code once ready and work with many + industry leading developers during creation. +

+

+ While this is the case we cannot guarantee they are free of + potential exploits. Users should understand the risks when + participating today and know what they are contribtuing too. +

+
+
+

+ New token sale mechanism +

+

+ The Mango token sale was designed to be as fair as possible for + all participants. However, it is possible that one or more + participants with large amounts of capital could discourage + others from participating in the token sale. +

+

+ During the sale period (first 24 hours), these participants + could deposit very large amounts of USDC. This would drive up + the price of the token and potentially discourage others from + participating in the sale. +

+

+ Then, during the last minute of the withdrawal phase, these + large participants could withdraw much of their USDC, thus + receiving a much lower price, depending on how successful they + were at discouraging others. +

+
+
+

+ Not fully decentralzed; yet +

+

+ Whilst the path to becoming decentralized is kicking off with + the token sale, at inception the team will have control over the + direction of the protocol until the governance mechanism is + estabilshed and tools built out. +

+

+ Contributers must trust the mango team until full + decentralization is reached. +

+

+ We offer full transparency in during this phase of transition + and will commit to creating a fair voting system for those + participating in DAO votes in the future. +

+
+
+
+
+ ) } diff --git a/components/ContentSectionLead.tsx b/components/ContentSectionLead.tsx index 3c6ebb5..f6dbfa4 100644 --- a/components/ContentSectionLead.tsx +++ b/components/ContentSectionLead.tsx @@ -1,9 +1,7 @@ - const ContentSectionLead = () => { return (
- {/* Section 2 */}

diff --git a/components/ContributionModal.tsx b/components/ContributionModal.tsx index bdc12dd..5d2e9e1 100644 --- a/components/ContributionModal.tsx +++ b/components/ContributionModal.tsx @@ -172,8 +172,8 @@ const ContributionModal = () => { !editContribution && !(connected && toLateToDeposit) && ( <> -

The journey starts here.

-

When your're ready, deposit your USDC

+

The journey starts here

+

When you're ready, deposit your USDC

)} @@ -184,7 +184,7 @@ const ContributionModal = () => { toLateToDeposit && ( <>

We're sorry, you missed it.

-

Deposits are already closed

+

The sale period has ended

)} @@ -198,14 +198,14 @@ const ContributionModal = () => { {submitted && !submitting && ( <>

Your contribution amount

-

Thanks for contributing...

+

Unlock to edit your contribution

)} {editContribution && !submitting && ( <>

Funds unlocked

-

Increase or reduce your contribution...

+

Increase or reduce your contribution

)}
@@ -317,7 +317,7 @@ const ContributionModal = () => { >
{dontAddMore - ? 'Sorry you can’t add anymore 🥲' + ? 'Sorry, you can’t add anymore 🥲' : 'Set Contribution'}
diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx index fd26f9b..585c226 100644 --- a/components/HeroSection.tsx +++ b/components/HeroSection.tsx @@ -1,30 +1,19 @@ import GradientText from './GradientText' -import Button from './Button' -import Link from './Link' const HeroSection = () => { return (
-
-
+
+

- Claim your stake in the Mango Dao. + Claim your stake in the Mango Dao

-

- The Mango DAO is a self-governed protocol building a - decentralized financial ecosystem; by contributing you will receive a - stake in the DAO having control over future of the ecosystem and its products. +

+ Join us and contribute to the future direction of the Mango + Protocol and its products.

-
diff --git a/components/ModalSection.tsx b/components/ModalSection.tsx index 1f8a41f..d08e9c3 100644 --- a/components/ModalSection.tsx +++ b/components/ModalSection.tsx @@ -4,14 +4,14 @@ import StatsModal from './StatsModal' const ModalSection = () => { return ( <> -
+
-

+ {/*

Ready to contribute?

Join us and become a valued stakeholder in the Mango Dao. -

+

*/}
diff --git a/components/NavBarBeta.tsx b/components/NavBarBeta.tsx index 7946f43..c671675 100644 --- a/components/NavBarBeta.tsx +++ b/components/NavBarBeta.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from 'react' import MangoPill from '../components/MangoPill' //import MangoSale from '../components/MangoSale' -import Button from './Button' const NavBarBeta = () => { const [mobileMenuVisible, setMobileMenuVisible] = useState(false) @@ -400,13 +399,6 @@ const NavBarBeta = () => {
-
diff --git a/components/PoolCountdown.tsx b/components/PoolCountdown.tsx index 51e94c0..c43a1b6 100644 --- a/components/PoolCountdown.tsx +++ b/components/PoolCountdown.tsx @@ -15,8 +15,10 @@ const PoolCountdown = (props: { className?: string; date: moment.Moment }) => { return

{message}

} else { return ( -
- +
+ {/* */} {hours < 10 ? `0${hours}` : hours} diff --git a/components/ScrollToTop.tsx b/components/ScrollToTop.tsx new file mode 100644 index 0000000..31f1695 --- /dev/null +++ b/components/ScrollToTop.tsx @@ -0,0 +1,39 @@ +import React, { useEffect, useState } from 'react' +import { ChevronUpIcon } from '@heroicons/react/solid' + +export default function ScrollToTop() { + const [isVisible, setIsVisible] = useState(false) + + // Show button when page is scorlled upto given distance + const toggleVisibility = () => { + if (window.pageYOffset > 300) { + setIsVisible(true) + } else { + setIsVisible(false) + } + } + + // Set the top cordinate to 0 + // make scrolling smooth + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }) + } + + useEffect(() => { + window.addEventListener('scroll', toggleVisibility) + }, []) + + return ( + isVisible && ( +
+ +
+ ) + ) +} diff --git a/components/StatsModal.tsx b/components/StatsModal.tsx index 6e1af29..c72baf1 100644 --- a/components/StatsModal.tsx +++ b/components/StatsModal.tsx @@ -19,17 +19,17 @@ const StatsModal = () => { <>
-

Deposits end in:

+

Sale period ends in:

-

Grace Period ends in:

+

Grace period ends in:

-

Total USDC Deposited:

+

Total USDC deposited:

{
-

Estimated Token Price:

+

Estimated token price:

{
{vaults.mangoBalance}
-
+
- {/*

+ {/*

Start: {startIdo?.fromNow()} ({startIdo?.format()})

@@ -80,7 +80,7 @@ const StatsModal = () => {

Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}

Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}

*/} -
+
) diff --git a/pages/ContributionPage.tsx b/pages/ContributionPage.tsx index 05e0f22..0cc31e0 100644 --- a/pages/ContributionPage.tsx +++ b/pages/ContributionPage.tsx @@ -1,17 +1,17 @@ import ModalSection from '../components/ModalSection' -import PoolInfoCards from '../components/PoolInfoCards' import HeroSection from '../components/HeroSection' import ContentSection from '../components/ContentSection' import FooterSection from '../components/FooterSection' +import ScrollToTop from '../components/ScrollToTop' const ContributionPage = () => { return ( <> - - + + ) } diff --git a/public/img/mango-vault.png b/public/img/mango-vault.png new file mode 100644 index 0000000..791c39a Binary files /dev/null and b/public/img/mango-vault.png differ diff --git a/public/img/usdc-vault.png b/public/img/usdc-vault.png new file mode 100644 index 0000000..e3ec105 Binary files /dev/null and b/public/img/usdc-vault.png differ diff --git a/stores/useWalletStore.tsx b/stores/useWalletStore.tsx index e211d78..6cddea1 100644 --- a/stores/useWalletStore.tsx +++ b/stores/useWalletStore.tsx @@ -38,9 +38,9 @@ export const ENDPOINTS: EndpointInfo[] = [ programId: 'CRU6hX2GgtdabESgkoMswMrUdRFxHhCVYmS292VN1Nnn', // owned by governance //poolKey: 'GvSyVjGwLBeWdURMLDmSffQPqA8g547A6TURbbBnDpa4', // governance test // poolKey: '82ndgp58GXpwuLrEc9svHFdhiEsPaZoNUEWwgc79WHqk', // already over - poolKey: '5heMyYtJK1Us9Hx2w6s5rLDNj8RufeyCR1ZUJAVFLQL7', // long deposits + poolKey: '5heMyYtJK1Us9Hx2w6s5rLDNj8RufeyCR1ZUJAVFLQL7', // long deposits // poolKey: '7Dr2Ksnz5evoT9mEUgvvkmirH8KDC99b5oVPHbqSpx4K', // short deposit - //poolKey: 'CdKyD4Qazo72Bm6SsPBWrT1AnH1NEuoUzvQg7b67EBac', // not started yet + //poolKey: 'CdKyD4Qazo72Bm6SsPBWrT1AnH1NEuoUzvQg7b67EBac', // not started yet }, { name: 'localnet', diff --git a/styles/index.css b/styles/index.css index 15c982e..16d069e 100644 --- a/styles/index.css +++ b/styles/index.css @@ -31,3 +31,8 @@ button { .default-transition { @apply transition-all duration-300; } + +.large-text { + font-size: 2rem; + line-height: 2; +} diff --git a/tailwind.config.js b/tailwind.config.js index 3847805..b666a29 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -19,7 +19,6 @@ module.exports = { 'feature-four': "url('../public/img/feature4.png')", 'bg-texture': "url('../public/img/bgtexture.png')", 'bg-wave': "url('../public/img/bg-wave.png')", - }), height: { 650: '650px',