reformat
This commit is contained in:
Maximilian Schneider
parent
13fd50418e
commit
344f64f36f
|
|
@ -168,8 +168,10 @@ const ContentSection = () => {
|
|||
<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
|
||||
<span className="text-mango-yellow font-semibold">
|
||||
$MNGO
|
||||
</span>{' '}
|
||||
were only provided to contributors who helped build the
|
||||
protocol.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -185,7 +187,8 @@ const ContentSection = () => {
|
|||
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 fairly distributed.
|
||||
We take the view that token sales should be simple, transparent and
|
||||
fairly distributed.
|
||||
</p>
|
||||
</div>
|
||||
<section className="">
|
||||
|
|
@ -214,7 +217,7 @@ const ContentSection = () => {
|
|||
48 hour participation period.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-base">
|
||||
The event will span over 2 days split into two periods,{' '}
|
||||
The event will span over 2 days split into two periods,{' '}
|
||||
<span className="text-mango-green italic">
|
||||
Unrestricted
|
||||
</span>{' '}
|
||||
|
|
@ -229,7 +232,9 @@ const ContentSection = () => {
|
|||
</span>
|
||||
</p>
|
||||
<p className="text-white text-opacity-50">
|
||||
During the unrestricted period, you may deposit or withdraw USDC from the vault. During the unrestricted period, the $MNGO price can fluctuate.
|
||||
During the unrestricted period, you may deposit or
|
||||
withdraw USDC from the vault. During the unrestricted
|
||||
period, the $MNGO price can fluctuate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -240,7 +245,9 @@ const ContentSection = () => {
|
|||
</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.
|
||||
After 24 hours deposits will be restricted and only
|
||||
withdrawals allowed. During the restricted period
|
||||
price can only go down.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -285,7 +292,8 @@ const ContentSection = () => {
|
|||
MNGO unlocked and redeemable.
|
||||
</h2>
|
||||
<p className="text-white text-opacity-50 text-base">
|
||||
On conclusion of the token sale, $MNGO will be distributed in proportion to your USDC contribution.{' '}
|
||||
On conclusion of the token sale, $MNGO will be distributed
|
||||
in proportion to your USDC contribution.{' '}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -64,8 +64,10 @@ const ContentSection = () => {
|
|||
<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
|
||||
<span className="text-mango-yellow font-semibold">
|
||||
$MNGO
|
||||
</span>{' '}
|
||||
were only provided to contributors who helped build the
|
||||
protocol.
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -165,170 +165,170 @@ 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="pb-4 text-center">
|
||||
{!submitted &&
|
||||
!submitting &&
|
||||
!editContribution &&
|
||||
!(connected && toLateToDeposit) && (
|
||||
<>
|
||||
<h2>The journey starts here.</h2>
|
||||
<p>When your're ready, deposit your USDC</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!submitted &&
|
||||
!submitting &&
|
||||
!editContribution &&
|
||||
connected &&
|
||||
toLateToDeposit && (
|
||||
<>
|
||||
<h2>We're sorry, you missed it.</h2>
|
||||
<p>Deposits are already closed</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{!submitted && submitting && (
|
||||
<div className="flex-1 flex-col bg-bkg-2 border border-bkg-3 p-7 rounded-lg shadow-md z-10">
|
||||
<div className="pb-4 text-center">
|
||||
{!submitted &&
|
||||
!submitting &&
|
||||
!editContribution &&
|
||||
!(connected && toLateToDeposit) && (
|
||||
<>
|
||||
<h2>Approve the transaction</h2>
|
||||
<p>Almost there...</p>
|
||||
<h2>The journey starts here.</h2>
|
||||
<p>When your're ready, deposit your USDC</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{submitted && !submitting && (
|
||||
{!submitted &&
|
||||
!submitting &&
|
||||
!editContribution &&
|
||||
connected &&
|
||||
toLateToDeposit && (
|
||||
<>
|
||||
<h2>Your contribution amount</h2>
|
||||
<p>Thanks for contributing...</p>
|
||||
<h2>We're sorry, you missed it.</h2>
|
||||
<p>Deposits are already closed</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{editContribution && !submitting && (
|
||||
<>
|
||||
<h2>Funds unlocked</h2>
|
||||
<p>Increase or reduce your contribution...</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{submitting ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loading className="h-6 w-6 mb-3 text-primary-light" />
|
||||
</div>
|
||||
) : (
|
||||
{!submitted && submitting && (
|
||||
<>
|
||||
<div
|
||||
className={`${
|
||||
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">
|
||||
<a
|
||||
onClick={handleRefresh}
|
||||
className={refreshing && 'animate-spin'}
|
||||
>
|
||||
<RefreshIcon
|
||||
className={`w-4 h-4`}
|
||||
style={{ transform: 'scaleX(-1)' }}
|
||||
/>
|
||||
</a>
|
||||
<WalletIcon className="w-4 h-4 mx-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.toFixed(2)}
|
||||
</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
|
||||
className={`${
|
||||
!submitted ? 'opacity-100' : 'opacity-30'
|
||||
} transiton-all duration-1000`}
|
||||
>
|
||||
<div className="pb-12">
|
||||
<Slider
|
||||
disabled={disableFormInputs}
|
||||
value={(100 * contributionAmount) / totalBalance}
|
||||
onChange={(v) => onChangeSlider(v)}
|
||||
step={1}
|
||||
maxButtonTransition={maxButtonTransition}
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
<h2>Approve the transaction</h2>
|
||||
<p>Almost there...</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{submitted && !submitting && (
|
||||
<>
|
||||
<h2>Your contribution amount</h2>
|
||||
<p>Thanks for contributing...</p>
|
||||
</>
|
||||
)}
|
||||
|
||||
{editContribution && !submitting && (
|
||||
<>
|
||||
<h2>Funds unlocked</h2>
|
||||
<p>Increase or reduce your contribution...</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{submitting ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loading className="h-6 w-6 mb-3 text-primary-light" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`${
|
||||
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">
|
||||
<a
|
||||
onClick={handleRefresh}
|
||||
className={refreshing && 'animate-spin'}
|
||||
>
|
||||
<RefreshIcon
|
||||
className={`w-4 h-4`}
|
||||
style={{ transform: 'scaleX(-1)' }}
|
||||
/>
|
||||
</a>
|
||||
<WalletIcon className="w-4 h-4 mx-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.toFixed(2)}
|
||||
</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
|
||||
className={`${
|
||||
!submitted ? 'opacity-100' : 'opacity-30'
|
||||
} transiton-all duration-1000`}
|
||||
>
|
||||
<div className="pb-12">
|
||||
<Slider
|
||||
disabled={disableFormInputs}
|
||||
value={(100 * contributionAmount) / totalBalance}
|
||||
onChange={(v) => onChangeSlider(v)}
|
||||
step={1}
|
||||
maxButtonTransition={maxButtonTransition}
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,30 +9,22 @@ const HeroSection = () => {
|
|||
<div className="relative pt-16 md:pt-32 pb-2">
|
||||
<div className="mb-8 mx-auto text-left md:text-center lg:text-center">
|
||||
<h2 className="mb-8 text-3xl md:text-5xl lg:text-5xl text-white font-bold font-heading">
|
||||
Claim your stake in the <GradientText>Mango Dao</GradientText>.
|
||||
Claim your stake in the <GradientText>Mango Dao</GradientText>.
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl lg:text-2xl text-white text-opacity-50">
|
||||
The Mango Dao is a self-governance protocol building a decentralized financial ecosystem. By contributing you will have a stake in the future of the ecosystem and its products.
|
||||
The Mango Dao is a self-governance protocol building a
|
||||
decentralized financial ecosystem. By contributing you will have a
|
||||
stake in the future of the ecosystem and its products.
|
||||
</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>
|
||||
</a>
|
||||
<a
|
||||
className="pl-2 "
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="#"
|
||||
>
|
||||
<Link>Learn more</Link>
|
||||
</a>
|
||||
</div>
|
||||
<a className="sm:px-1" rel="noreferrer" target="_blank" href="#">
|
||||
<Button>Contribute now</Button>
|
||||
</a>
|
||||
<a className="pl-2 " rel="noreferrer" target="_blank" href="#">
|
||||
<Link>Learn more</Link>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ 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-7xl">{startIdo?.fromNow()}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
import GradientText from './GradientText'
|
||||
import RedeemModal
|
||||
from './RedeemModal'
|
||||
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">
|
||||
The event has ended. <br />
|
||||
It’s time to redeem your
|
||||
<GradientText>$MNGO</GradientText>
|
||||
</h2>
|
||||
<p className="lg:text-xl">
|
||||
Thank you for your contributions, soon you will be able to help decide
|
||||
the future of Mango.
|
||||
</p>
|
||||
<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">
|
||||
The event has ended. <br />
|
||||
It’s time to redeem your
|
||||
<GradientText>$MNGO</GradientText>
|
||||
</h2>
|
||||
<p className="lg:text-xl">
|
||||
Thank you for your contributions, soon you will be able to help
|
||||
decide the future of Mango.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-1 my-5 z-10">
|
||||
<RedeemModal />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 my-5 z-10">
|
||||
<RedeemModal />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import StatsModal from './StatsModal'
|
|||
const ModalSection = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="pt-48 pb-48 px-4">
|
||||
<div className="max-w-5xl mx-auto text-center">
|
||||
<div className="pt-48 pb-48 px-4">
|
||||
<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">
|
||||
Ready to contribute?
|
||||
</h2>
|
||||
|
|
@ -17,8 +17,7 @@ const ModalSection = () => {
|
|||
<ContributionModal />
|
||||
<StatsModal />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -402,11 +402,7 @@ const NavBarBeta = () => {
|
|||
</nav>
|
||||
<div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
|
||||
<div>
|
||||
<a
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
href="#"
|
||||
>
|
||||
<a rel="noreferrer" target="_blank" href="#">
|
||||
<Button>Contribute now</Button>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@ const PoolInfoCards = () => {
|
|||
|
||||
return (
|
||||
<div className="max-w-7xl flex flex-wrap mx-auto px-6 mb-16 z-10">
|
||||
<Card title="Deposits closing in">
|
||||
<PoolCountdown date={endDeposits} />
|
||||
</Card>
|
||||
<Card title="Deposits closing in">
|
||||
<PoolCountdown date={endDeposits} />
|
||||
</Card>
|
||||
|
||||
<Card title="Sale event ends in">
|
||||
<PoolCountdown date={endIdo} />
|
||||
</Card>
|
||||
<Card title="Sale event ends in">
|
||||
<PoolCountdown date={endIdo} />
|
||||
</Card>
|
||||
<Card title="Total contributions">
|
||||
<div className="flex">
|
||||
<img
|
||||
|
|
@ -45,30 +45,30 @@ const PoolInfoCards = () => {
|
|||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="Total $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">
|
||||
{vaults.mangoBalance}
|
||||
</div>
|
||||
<Card title="Total $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">
|
||||
{vaults.mangoBalance}
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="Estimated token price">
|
||||
<div className="flex">
|
||||
<img
|
||||
alt="USDC"
|
||||
width="25"
|
||||
height="25"
|
||||
src="/icons/usdc.svg"
|
||||
className={`mr-2`}
|
||||
/>{' '}
|
||||
<div className="font-bold text-fgd-1 text-xl">
|
||||
{vaults.estimatedPrice
|
||||
? numberFormat.format(vaults.estimatedPrice)
|
||||
: 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="Estimated token price">
|
||||
<div className="flex">
|
||||
<img
|
||||
alt="USDC"
|
||||
width="25"
|
||||
height="25"
|
||||
src="/icons/usdc.svg"
|
||||
className={`mr-2`}
|
||||
/>{' '}
|
||||
<div className="font-bold text-fgd-1 text-xl">
|
||||
{vaults.estimatedPrice
|
||||
? numberFormat.format(vaults.estimatedPrice)
|
||||
: 'N/A'}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
|
||||
import PoolCountdown from './PoolCountdown'
|
||||
import useVaults from '../hooks/useVaults'
|
||||
import usePool from '../hooks/usePool'
|
||||
import 'twin.macro'
|
||||
|
||||
|
||||
const StatsModal = () => {
|
||||
const vaults = useVaults()
|
||||
const { endIdo, endDeposits } = usePool()
|
||||
|
|
@ -13,59 +11,57 @@ const StatsModal = () => {
|
|||
// ? (redeemableBalance * vaults.mango.balance) / vaults.usdc.balance
|
||||
// : 0
|
||||
|
||||
|
||||
const priceFormat = new Intl.NumberFormat('en-US', {
|
||||
maximumSignificantDigits: 4,
|
||||
})
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex-1 m-3 sm:-ml-8 bg-gradient-to-br from-secondary-4-dark to-secondary-4-light border border-bkg-3 p-7 rounded-xl shadow-md divide-y-2 divide-white divide-opacity-10 z-0">
|
||||
<div className="pb-4 text-center">
|
||||
<p className="text-fgd-3">Deposits Close</p>
|
||||
<PoolCountdown date={endDeposits} className="justify-center pt-1" />
|
||||
</div>
|
||||
|
||||
<div className="py-4 text-center">
|
||||
<p className="text-fgd-3">Withdrawals Close</p>
|
||||
<PoolCountdown date={endIdo} className="justify-center pt-1" />
|
||||
</div>
|
||||
<div className="flex-1 m-3 sm:-ml-8 bg-gradient-to-br from-secondary-4-dark to-secondary-4-light border border-bkg-3 p-7 rounded-xl shadow-md divide-y-2 divide-white divide-opacity-10 z-0">
|
||||
<div className="pb-4 text-center">
|
||||
<p className="text-fgd-3">Deposits Close</p>
|
||||
<PoolCountdown date={endDeposits} className="justify-center pt-1" />
|
||||
</div>
|
||||
|
||||
<div className="py-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 className="py-4 text-center">
|
||||
<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">
|
||||
{vaults.usdcBalance}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-4 text-center">
|
||||
<p className="text-fgd-3">Locked MNGO in Pool</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-base">
|
||||
{vaults.mangoBalance}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-4 text-center">
|
||||
<p className="text-fgd-3">Withdrawals Close</p>
|
||||
<PoolCountdown date={endIdo} className="justify-center pt-1" />
|
||||
</div>
|
||||
|
||||
{/* <p>
|
||||
<div className="py-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 className="py-4 text-center">
|
||||
<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">
|
||||
{vaults.usdcBalance}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-4 text-center">
|
||||
<p className="text-fgd-3">Locked MNGO in Pool</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-base">
|
||||
{vaults.mangoBalance}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <p>
|
||||
Start: {startIdo?.fromNow()} ({startIdo?.format()})
|
||||
</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ import HeroSectionRedeem from '../components/HeroSectionRedeem'
|
|||
const RedeemPage = () => {
|
||||
return (
|
||||
<>
|
||||
<HeroSectionRedeem />
|
||||
<ContentSectionRedeem />
|
||||
<FooterSection />
|
||||
<HeroSectionRedeem />
|
||||
<ContentSectionRedeem />
|
||||
<FooterSection />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue