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

auto format all the things

This commit is contained in:
Maximilian Schneider 2021-07-22 18:39:55 +02:00
parent 65df589632
commit 0b22c21339
5 changed files with 260 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
components/ContentSection.tsx
View File

@ -18,65 +18,62 @@ const ContentSection = () => {
{/* Section 1 */} {/* Section 1 */}
<div className="py-16 xl:py-36 px-4 sm:px-6 lg:px-8 overflow-hidden"> <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="max-w-max lg:max-w-7xl mx-auto">
<div className="relative"> <div className="relative">
<div className="relative md:p-6"> <div className="relative md:p-6">
<div className="lg:grid lg:grid-cols-2 lg:gap-6"> <div className="lg:grid lg:grid-cols-2 lg:gap-6">
<div className="lg:max-w-none"> <div className="lg:max-w-none">
<h2 className="text-3xl mb-6 leading-tight font-semibold font-heading"> <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
What is Mango? What is Mango?
</h2> </h2>
<p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed"> <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
Mango is a decentralized autonomous organization. Its purpose is Mango is a decentralized autonomous organization. Its
to contribute maximum value for the defi ecosystem and its purpose is to contribute maximum value for the defi
developer community to create commercially viable decentralized ecosystem and its developer community to create
trading and lending products for traders. commercially viable decentralized trading and lending
</p> products for traders.
</p>
<h2 className="text-3xl mb-6 leading-tight font-semibold font-heading"> <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
Why the{' '} Why the <GradientText>Insurance fund</GradientText>?
<GradientText> </h2>
Insurance fund <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
</GradientText> Mango protocol is powered by lenders providing their
? capital for the community to use for trading and borrowing
</h2> purposes. The insurance fund is the last line of defense
<p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed"> for protecting our mango lenders.
Mango protocol is powered by lenders providing their capital for </p>
the community to use for trading and borrowing purposes. The </div>
insurance fund is the last line of defense for protecting our
mango lenders.
</p>
</div>
<div className="mt-6 lg:mt-0"> <div className="mt-6 lg:mt-0">
<h2 className="text-3xl mb-6 leading-tight font-semibold font-heading"> <h2 className="text-3xl mb-6 leading-tight font-semibold font-heading">
What is the{' '} What is the <GradientText>$MNGO</GradientText> token?
<GradientText>$MNGO</GradientText>{' '} </h2>
token? <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
</h2> We believe that substantial rewards to a strong developer
<p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed"> community and liquidity incentives are the essential
We believe that substantial rewards to a strong developer drivers for growth and therefore the foundation of the
community and liquidity incentives are the essential drivers for Mango DAO.
growth and therefore the foundation of the Mango DAO. </p>
</p> <p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed">
<p className="mb-8 text-lg text-white text-opacity-50 leading-relaxed"> Mango Governance tokens ($MNGO) will serve as the
Mango Governance tokens ($MNGO) will serve as the incentive for incentive for those who can proove their work is useful to
those who can proove their work is useful to the DAO. the DAO.
</p> </p>
<Button>Check out the whitepaper</Button> <Button>Check out the whitepaper</Button>
<p className="text-white leading-relaxed py-4"> <p className="text-white leading-relaxed py-4">
<span className="text-mango-yellow">$MNGO</span> were only provided <span className="text-mango-yellow">$MNGO</span> were only
to developers who helped to build out the protocol. provided to developers who helped to build out the
</p> protocol.
</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
{/* Section 2 */} {/* Section 2 */}
<div className="max-w-4xl mb-12 mx-auto text-center"> <div className="max-w-4xl mb-12 mx-auto text-center">
@ -120,10 +117,7 @@ const ContentSection = () => {
Unrestricted Unrestricted
</span>{' '} </span>{' '}
and{' '} and{' '}
<span className="text-mango-red italic"> <span className="text-mango-red italic">Restricted</span>.
Restricted
</span>
.
</p> </p>
<div className="flex flex-wrap overflow-hiddenm mt-8"> <div className="flex flex-wrap overflow-hiddenm mt-8">
<div className="w-full overflow-hidden lg:w-1/2 pr-4"> <div className="w-full overflow-hidden lg:w-1/2 pr-4">

336
components/ContributionModal.tsx
View File

@ -150,192 +150,191 @@ const ContributionModal = () => {
return ( return (
<> <>
<div className="flex flex-wrap lg:flex-row justify-center"> <div className="flex flex-wrap lg:flex-row justify-center">
<div className="flex flex-col max-w-3xl bg-bkg-2 border border-bkg-3 p-7 rounded-lg shadow-md">
<div className="pb-4 text-center">
{!submitted && !submitting && !editContribution ? (
<>
<h2>This time has arrived.</h2>
<p>When ready, depost your USDC</p>
</>
) : null}
<div className="flex flex-col max-w-3xl bg-bkg-2 border border-bkg-3 p-7 rounded-lg shadow-md"> {!submitted && submitting ? (
<div className="pb-4 text-center"> <>
{!submitted && !submitting && !editContribution ? ( <h2>Approve the transaction</h2>
<> <p>Almost there...</p>
<h2>This time has arrived.</h2> </>
<p>When ready, depost your USDC</p> ) : null}
</>
) : null}
{!submitted && submitting ? ( {submitted && !submitting ? (
<> <>
<h2>Approve the transaction</h2> <h2>Your contribution amount</h2>
<p>Almost there...</p> <p>Thanks for contributing...</p>
</> </>
) : null} ) : null}
{submitted && !submitting ? ( {editContribution && !submitting ? (
<> <>
<h2>Your contribution amount</h2> <h2>Funds unlocked</h2>
<p>Thanks for contributing...</p> <p>Increase or reduce your contribution...</p>
</> </>
) : null} ) : null}
{editContribution && !submitting ? (
<>
<h2>Funds unlocked</h2>
<p>Increase or reduce your contribution...</p>
</>
) : null}
</div>
{submitting ? (
<div className="flex h-64 items-center justify-center">
<Loading className="h-6 w-6 mb-3 text-primary-light" />
</div> </div>
) : ( {submitting ? (
<> <div className="flex h-64 items-center justify-center">
<div <Loading className="h-6 w-6 mb-3 text-primary-light" />
className={`${ </div>
connected ? 'opacity-100' : 'opacity-30' ) : (
} pb-6 transiton-all duration-1000 w-full`} <>
>
<div className="flex justify-between pb-2">
<div className="flex items-center text-xs text-fgd-4">
<WalletIcon className="w-4 h-4 mr-1 text-fgd-3 fill-current" />
{connected ? (
loading ? (
<div className="bg-bkg-4 rounded w-10 h-4 animate-pulse" />
) : (
<span className="font-display text-fgd-1 ml-1">
{walletAmount}
</span>
)
) : (
'----'
)}
<img
alt=""
width="16"
height="16"
src="/icons/usdc.svg"
className={`ml-1`}
/>
</div>
<div className="flex">
{submitted ? (
<SmallButton
className="ring-1 ring-secondary-1-light ring-inset hover:ring-secondary-1-dark hover:bg-transparent hover:text-secondary-1-dark font-normal rounded text-secondary-1-light text-xs py-0.5 px-1.5 mr-2"
disabled={!connected}
onClick={() => handleEditContribution()}
>
Unlock
</SmallButton>
) : null}
<SmallButton
className={`${
disableFormInputs && 'opacity-30'
} bg-bkg-4 hover:bg-bkg-3 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
disabled={disableFormInputs}
onClick={() => handleMax()}
>
Max
</SmallButton>
</div>
</div>
<div className="flex items-center pb-4 relative">
{submitted ? (
<LockClosedIcon className="absolute text-secondary-2-light h-4 w-4 mb-0.5 left-2 z-10" />
) : null}
{editContribution ? (
<LockOpenIcon className="absolute text-secondary-1-light h-4 w-4 mb-0.5 left-2 z-10" />
) : null}
<Input
className={(submitted || editContribution) && 'pl-7'}
disabled={disableFormInputs}
type="text"
onChange={(e) => onChangeAmountInput(e.target.value)}
value={loading ? '' : contributionAmount}
suffix="USDC"
/>
</div>
<div <div
className={`${ className={`${
!submitted ? 'opacity-100' : 'opacity-30' connected ? 'opacity-100' : 'opacity-30'
} transiton-all duration-1000`} } pb-6 transiton-all duration-1000 w-full`}
> >
<div className="pb-12"> <div className="flex justify-between pb-2">
<Slider <div className="flex items-center text-xs text-fgd-4">
<WalletIcon className="w-4 h-4 mr-1 text-fgd-3 fill-current" />
{connected ? (
loading ? (
<div className="bg-bkg-4 rounded w-10 h-4 animate-pulse" />
) : (
<span className="font-display text-fgd-1 ml-1">
{walletAmount}
</span>
)
) : (
'----'
)}
<img
alt=""
width="16"
height="16"
src="/icons/usdc.svg"
className={`ml-1`}
/>
</div>
<div className="flex">
{submitted ? (
<SmallButton
className="ring-1 ring-secondary-1-light ring-inset hover:ring-secondary-1-dark hover:bg-transparent hover:text-secondary-1-dark font-normal rounded text-secondary-1-light text-xs py-0.5 px-1.5 mr-2"
disabled={!connected}
onClick={() => handleEditContribution()}
>
Unlock
</SmallButton>
) : null}
<SmallButton
className={`${
disableFormInputs && 'opacity-30'
} bg-bkg-4 hover:bg-bkg-3 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
disabled={disableFormInputs}
onClick={() => handleMax()}
>
Max
</SmallButton>
</div>
</div>
<div className="flex items-center pb-4 relative">
{submitted ? (
<LockClosedIcon className="absolute text-secondary-2-light h-4 w-4 mb-0.5 left-2 z-10" />
) : null}
{editContribution ? (
<LockOpenIcon className="absolute text-secondary-1-light h-4 w-4 mb-0.5 left-2 z-10" />
) : null}
<Input
className={(submitted || editContribution) && 'pl-7'}
disabled={disableFormInputs} disabled={disableFormInputs}
value={(100 * contributionAmount) / totalBalance} type="text"
onChange={(v) => onChangeSlider(v)} onChange={(e) => onChangeAmountInput(e.target.value)}
step={1} value={loading ? '' : contributionAmount}
maxButtonTransition={maxButtonTransition} suffix="USDC"
/> />
</div> </div>
<div className="h-12 pb-4"> <div
{errorMessage && ( className={`${
<div className="flex items-center pt-1.5 text-secondary-2-light"> !submitted ? 'opacity-100' : 'opacity-30'
<ExclamationCircleIcon className="h-4 w-4 mr-1.5" /> } transiton-all duration-1000`}
{errorMessage}
</div>
)}
</div>
<Button
onClick={() => handleSetContribution()}
className="w-full py-2.5"
disabled={disableSubmit}
> >
<div className={`flex items-center justify-center`}> <div className="pb-12">
{dontAddMore <Slider
? 'Sorry you can’t add anymore 🥲' disabled={disableFormInputs}
: 'Set Contribution'} value={(100 * contributionAmount) / totalBalance}
onChange={(v) => onChangeSlider(v)}
step={1}
maxButtonTransition={maxButtonTransition}
/>
</div> </div>
</Button> <div className="h-12 pb-4">
{errorMessage && (
<div className="flex items-center pt-1.5 text-secondary-2-light">
<ExclamationCircleIcon className="h-4 w-4 mr-1.5" />
{errorMessage}
</div>
)}
</div>
<Button
onClick={() => handleSetContribution()}
className="w-full py-2.5"
disabled={disableSubmit}
>
<div className={`flex items-center justify-center`}>
{dontAddMore
? 'Sorry you can’t add anymore 🥲'
: 'Set Contribution'}
</div>
</Button>
</div>
</div>
<div className="flex items-center justify-center">
<ConnectWalletButton onClick={handleConnectDisconnect} />
</div>
</>
)}
</div>
<div className="flex flex-col m-3 bg-gradient-to-br from-secondary-4-dark to-secondary-4-light border border-bkg-3 p-7 rounded-lg shadow-md">
<div className="border-b border-bkg-4 pb-4 text-center">
<p className="text-fgd-3">Estimated Token Price</p>
<div className="flex items-center justify-center pt-0.5">
<img
alt=""
width="20"
height="20"
src="/icons/usdc.svg"
className={`mr-2`}
/>
<div className="font-bold text-fgd-1 text-xl">
{priceFormat.format(vaults.estimatedPrice)}
</div> </div>
</div> </div>
<div className="flex items-center justify-center"> </div>
<ConnectWalletButton onClick={handleConnectDisconnect} /> <div className="border-b border-bkg-4 py-4 text-center">
</div> <p className="text-fgd-3">Total USDC Deposited</p>
</> <div className="flex items-center justify-center pt-0.5">
)} <div className="font-bold text-fgd-1 text-base">
</div> {vaults.usdcBalance}
</div>
<div className="flex flex-col m-3 bg-gradient-to-br from-secondary-4-dark to-secondary-4-light border border-bkg-3 p-7 rounded-lg shadow-md">
<div className="border-b border-bkg-4 pb-4 text-center">
<p className="text-fgd-3">Estimated Token Price</p>
<div className="flex items-center justify-center pt-0.5">
<img
alt=""
width="20"
height="20"
src="/icons/usdc.svg"
className={`mr-2`}
/>
<div className="font-bold text-fgd-1 text-xl">
{priceFormat.format(vaults.estimatedPrice)}
</div> </div>
</div> </div>
</div> <div className="border-b border-bkg-4 py-4 text-center">
<div className="border-b border-bkg-4 py-4 text-center"> <p className="text-fgd-3">Locked MNGO in Pool</p>
<p className="text-fgd-3">Total USDC Deposited</p> <div className="flex items-center justify-center pt-0.5">
<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-base"> <div className="font-bold text-fgd-1 text-base">
{vaults.usdcBalance} {vaults.mangoBalance}
</div>
</div> </div>
</div> </div>
</div> <div className="border-b border-bkg-4 py-4 text-center">
<div className="border-b border-bkg-4 py-4 text-center"> <p className="text-fgd-3">Deposits Close</p>
<p className="text-fgd-3">Locked MNGO in Pool</p> <PoolCountdown date={endDeposits} className="justify-center pt-1" />
<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-base">
{vaults.mangoBalance}
</div>
</div> </div>
</div> <div className="pt-4 text-center">
<div className="border-b border-bkg-4 py-4 text-center"> <p className="text-fgd-3">Withdrawals Close</p>
<p className="text-fgd-3">Deposits Close</p> <PoolCountdown date={endIdo} className="justify-center pt-1" />
<PoolCountdown date={endDeposits} className="justify-center pt-1" /> </div>
</div> {/* <p>
<div className="pt-4 text-center">
<p className="text-fgd-3">Withdrawals Close</p>
<PoolCountdown date={endIdo} className="justify-center pt-1" />
</div>
{/* <p>
Start: {startIdo?.fromNow()} ({startIdo?.format()}) Start: {startIdo?.fromNow()} ({startIdo?.format()})
</p> </p>
<p> <p>
@ -346,9 +345,8 @@ const ContributionModal = () => {
</p> </p>
<p>Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}</p> <p>Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}</p>
<p>Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}</p> */} <p>Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}</p> */}
</div>
</div> </div>
</div>
</> </>
) )
} }

28
components/ModalSection.tsx
View File

@ -1,20 +1,20 @@
import ContributionModal from "./ContributionModal" import ContributionModal from './ContributionModal'
const ModalSection = () => { const ModalSection = () => {
return ( return (
<> <>
<div className="max-w-5xl mx-auto text-center"> <div className="max-w-5xl mx-auto text-center">
<h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading"> <h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
It is still the early days. It is still the early days.
</h2> </h2>
<p className="mb-8 text-2xl text-white text-opacity-50"> <p className="mb-8 text-2xl text-white text-opacity-50">
This is the first moment for non-developers to participate in This is the first moment for non-developers to participate in helping
helping build the Mango protocol by supporting the inception of the build the Mango protocol by supporting the inception of the protocols
protocols Insurance Fund. Insurance Fund.
</p> </p>
</div> </div>
<ContributionModal /> <ContributionModal />
</> </>
) )
} }

4
components/PoolCountdown.tsx
View File

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

56
components/PoolInfoCards.tsx
View File

@ -25,13 +25,13 @@ const PoolInfoCards = () => {
return ( return (
<div className="max-w-3xl flex flex-col mx-auto px-6 mb-16 z-10"> <div className="max-w-3xl flex flex-col mx-auto px-6 mb-16 z-10">
<div className="flex flex-col lg:flex-row"> <div className="flex flex-col lg:flex-row">
<Card title="Deposits closing in"> <Card title="Deposits closing in">
<PoolCountdown date={endDeposits} /> <PoolCountdown date={endDeposits} />
</Card> </Card>
<Card title="Sale event ends in"> <Card title="Sale event ends in">
<PoolCountdown date={endIdo} /> <PoolCountdown date={endIdo} />
</Card> </Card>
</div> </div>
<Card title="Total contributions"> <Card title="Total contributions">
<div className="flex"> <div className="flex">
@ -48,30 +48,30 @@ const PoolInfoCards = () => {
</div> </div>
</Card> </Card>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
<Card title="Total $MNGO for sale"> <Card title="Total $MNGO for sale">
<div className="flex"> <div className="flex">
<img className="h-7 mr-2 w-auto" src="/logo.svg" alt="MNGO" /> <img className="h-7 mr-2 w-auto" src="/logo.svg" alt="MNGO" />
<div className="font-bold text-fgd-1 text-2xl"> <div className="font-bold text-fgd-1 text-2xl">
{vaults.mangoBalance} {vaults.mangoBalance}
</div>
</div> </div>
</div> </Card>
</Card> <Card title="Estimated token price">
<Card title="Estimated token price"> <div className="flex">
<div className="flex"> <img
<img alt="USDC"
alt="USDC" width="25"
width="25" height="25"
height="25" src="/icons/usdc.svg"
src="/icons/usdc.svg" className={`mr-2`}
className={`mr-2`} />{' '}
/>{' '} <div className="font-bold text-fgd-1 text-2xl">
<div className="font-bold text-fgd-1 text-2xl"> {vaults.estimatedPrice
{vaults.estimatedPrice ? numberFormat.format(vaults.estimatedPrice)
? numberFormat.format(vaults.estimatedPrice) : 'N/A'}
: 'N/A'} </div>
</div> </div>
</div> </Card>
</Card>
</div> </div>
</div> </div>
) )