auto format all the things
This commit is contained in:
Maximilian Schneider
parent
65df589632
commit
0b22c21339
|
|
@ -18,65 +18,62 @@ const ContentSection = () => {
|
|||
|
||||
{/* 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-3xl 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>
|
||||
<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-3xl 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-3xl 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>
|
||||
<h2 className="text-3xl 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-3xl 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 proove their work is useful to the DAO.
|
||||
</p>
|
||||
<Button>Check out the whitepaper</Button>
|
||||
<div className="mt-6 lg:mt-0">
|
||||
<h2 className="text-3xl 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 proove 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">$MNGO</span> were only provided
|
||||
to developers who helped to build out the protocol.
|
||||
</p>
|
||||
<p className="text-white leading-relaxed py-4">
|
||||
<span className="text-mango-yellow">$MNGO</span> were only
|
||||
provided to developers who helped to build out the
|
||||
protocol.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Section 2 */}
|
||||
<div className="max-w-4xl mb-12 mx-auto text-center">
|
||||
|
|
@ -120,10 +117,7 @@ const ContentSection = () => {
|
|||
Unrestricted
|
||||
</span>{' '}
|
||||
and{' '}
|
||||
<span className="text-mango-red italic">
|
||||
Restricted
|
||||
</span>
|
||||
.
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -150,192 +150,191 @@ const ContributionModal = () => {
|
|||
|
||||
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">
|
||||
<div className="pb-4 text-center">
|
||||
{!submitted && !submitting && !editContribution ? (
|
||||
<>
|
||||
<h2>This time has arrived.</h2>
|
||||
<p>When ready, depost your USDC</p>
|
||||
</>
|
||||
) : null}
|
||||
{!submitted && submitting ? (
|
||||
<>
|
||||
<h2>Approve the transaction</h2>
|
||||
<p>Almost there...</p>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{!submitted && submitting ? (
|
||||
<>
|
||||
<h2>Approve the transaction</h2>
|
||||
<p>Almost there...</p>
|
||||
</>
|
||||
) : null}
|
||||
{submitted && !submitting ? (
|
||||
<>
|
||||
<h2>Your contribution amount</h2>
|
||||
<p>Thanks for contributing...</p>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{submitted && !submitting ? (
|
||||
<>
|
||||
<h2>Your contribution amount</h2>
|
||||
<p>Thanks for contributing...</p>
|
||||
</>
|
||||
) : 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" />
|
||||
{editContribution && !submitting ? (
|
||||
<>
|
||||
<h2>Funds unlocked</h2>
|
||||
<p>Increase or reduce your contribution...</p>
|
||||
</>
|
||||
) : null}
|
||||
</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">
|
||||
<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>
|
||||
{submitting ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<Loading className="h-6 w-6 mb-3 text-primary-light" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`${
|
||||
!submitted ? 'opacity-100' : 'opacity-30'
|
||||
} transiton-all duration-1000`}
|
||||
connected ? 'opacity-100' : 'opacity-30'
|
||||
} pb-6 transiton-all duration-1000 w-full`}
|
||||
>
|
||||
<div className="pb-12">
|
||||
<Slider
|
||||
<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}
|
||||
value={(100 * contributionAmount) / totalBalance}
|
||||
onChange={(v) => onChangeSlider(v)}
|
||||
step={1}
|
||||
maxButtonTransition={maxButtonTransition}
|
||||
type="text"
|
||||
onChange={(e) => onChangeAmountInput(e.target.value)}
|
||||
value={loading ? '' : contributionAmount}
|
||||
suffix="USDC"
|
||||
/>
|
||||
</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={`${
|
||||
!submitted ? 'opacity-100' : 'opacity-30'
|
||||
} transiton-all duration-1000`}
|
||||
>
|
||||
<div className={`flex items-center justify-center`}>
|
||||
{dontAddMore
|
||||
? 'Sorry you can’t add anymore 🥲'
|
||||
: 'Set Contribution'}
|
||||
<div className="pb-12">
|
||||
<Slider
|
||||
disabled={disableFormInputs}
|
||||
value={(100 * contributionAmount) / totalBalance}
|
||||
onChange={(v) => onChangeSlider(v)}
|
||||
step={1}
|
||||
maxButtonTransition={maxButtonTransition}
|
||||
/>
|
||||
</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 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 className="border-b border-bkg-4 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>
|
||||
<div className="border-b border-bkg-4 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 className="border-b border-bkg-4 py-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>
|
||||
<div className="border-b border-bkg-4 py-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 className="border-b border-bkg-4 py-4 text-center">
|
||||
<p className="text-fgd-3">Deposits Close</p>
|
||||
<PoolCountdown date={endDeposits} className="justify-center pt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-b border-bkg-4 py-4 text-center">
|
||||
<p className="text-fgd-3">Deposits Close</p>
|
||||
<PoolCountdown date={endDeposits} className="justify-center pt-1" />
|
||||
</div>
|
||||
<div className="pt-4 text-center">
|
||||
<p className="text-fgd-3">Withdrawals Close</p>
|
||||
<PoolCountdown date={endIdo} className="justify-center pt-1" />
|
||||
</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()})
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -346,9 +345,8 @@ const ContributionModal = () => {
|
|||
</p>
|
||||
<p>Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}</p>
|
||||
<p>Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}</p> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
import ContributionModal from "./ContributionModal"
|
||||
import ContributionModal from './ContributionModal'
|
||||
|
||||
const ModalSection = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="max-w-5xl mx-auto text-center">
|
||||
<h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
|
||||
It is still the early days.
|
||||
</h2>
|
||||
<p className="mb-8 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
|
||||
protocols Insurance Fund.
|
||||
</p>
|
||||
</div>
|
||||
<ContributionModal />
|
||||
</>
|
||||
<>
|
||||
<div className="max-w-5xl mx-auto text-center">
|
||||
<h2 className="mb-8 text-4xl lg:text-5xl text-white font-bold font-heading">
|
||||
It is still the early days.
|
||||
</h2>
|
||||
<p className="mb-8 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 protocols
|
||||
Insurance Fund.
|
||||
</p>
|
||||
</div>
|
||||
<ContributionModal />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,9 +15,7 @@ const PoolCountdown = (props: { className?: string; date: moment.Moment }) => {
|
|||
return <p className="text-mango-red">{message}</p>
|
||||
} else {
|
||||
return (
|
||||
<div
|
||||
className={`${props.className} font-bold text-white flex `}
|
||||
>
|
||||
<div className={`${props.className} font-bold text-white flex `}>
|
||||
<ClockIcon className="w-10 h-10 mr-2" />
|
||||
<span className="text-3xl">
|
||||
{/* <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded"> */}
|
||||
|
|
|
|||
|
|
@ -25,13 +25,13 @@ const PoolInfoCards = () => {
|
|||
return (
|
||||
<div className="max-w-3xl flex flex-col mx-auto px-6 mb-16 z-10">
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<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>
|
||||
</div>
|
||||
<Card title="Total contributions">
|
||||
<div className="flex">
|
||||
|
|
@ -48,30 +48,30 @@ const PoolInfoCards = () => {
|
|||
</div>
|
||||
</Card>
|
||||
<div className="flex flex-wrap">
|
||||
<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-2xl">
|
||||
{vaults.mangoBalance}
|
||||
<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-2xl">
|
||||
{vaults.mangoBalance}
|
||||
</div>
|
||||
</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-2xl">
|
||||
{vaults.estimatedPrice
|
||||
? numberFormat.format(vaults.estimatedPrice)
|
||||
: 'N/A'}
|
||||
</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-2xl">
|
||||
{vaults.estimatedPrice
|
||||
? numberFormat.format(vaults.estimatedPrice)
|
||||
: 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue