finish rough layout of redeem page
This commit is contained in:
parent
05f3417265
commit
5142f0c11b
|
@ -1,7 +1,7 @@
|
|||
interface InputProps {
|
||||
type: string
|
||||
value: any
|
||||
onChange: (e) => void
|
||||
onChange?: (e) => void
|
||||
className?: string
|
||||
disabled?: boolean
|
||||
[x: string]: any
|
||||
|
|
|
@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
|
|||
import { LinkIcon } from '@heroicons/react/solid'
|
||||
import useWalletStore from '../stores/useWalletStore'
|
||||
import Button from './Button'
|
||||
import Input from './Input'
|
||||
import { ConnectWalletButtonSmall } from './ConnectWalletButton'
|
||||
import Loading from './Loading'
|
||||
import useLargestAccounts from '../hooks/useLargestAccounts'
|
||||
|
@ -14,13 +15,12 @@ const RedeemModal = () => {
|
|||
const largestAccounts = useLargestAccounts()
|
||||
const vaults = useVaults()
|
||||
|
||||
const totalRaised = vaults.usdc?.balance
|
||||
const redeemableBalance = largestAccounts.redeemable?.balance || 0
|
||||
const mangoAvailable = vaults.usdc
|
||||
? (redeemableBalance * vaults.mango.balance) / vaults.usdc.balance
|
||||
: 0
|
||||
|
||||
console.log('balance', redeemableBalance, mangoAvailable)
|
||||
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
|
@ -58,12 +58,12 @@ const RedeemModal = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-bkg-2 border border-bkg-3 col-span-7 p-7 rounded-lg shadow-lg">
|
||||
<div className="bg-bkg-2 border border-bkg-3 p-7 rounded-lg shadow-lg">
|
||||
<div className="pb-4 text-center">
|
||||
{!submitting ? (
|
||||
<>
|
||||
<h2>Redeem your MNGO</h2>
|
||||
<p>Welcome to the DAO, let's build together.</p>
|
||||
{/* <p>Welcome to the DAO, let's build together.</p> */}
|
||||
</>
|
||||
) : null}
|
||||
|
||||
|
@ -80,11 +80,41 @@ const RedeemModal = () => {
|
|||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<span>Total raised</span>
|
||||
<Input
|
||||
className="border-0"
|
||||
disabled
|
||||
type="number"
|
||||
value={totalRaised}
|
||||
suffix="USDC"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`${
|
||||
connected ? 'opacity-100' : 'opacity-30'
|
||||
} pb-6 transiton-all duration-1000 w-full`}
|
||||
>
|
||||
<div>
|
||||
<span>Your contribution</span>
|
||||
<Input
|
||||
className="border-0"
|
||||
disabled
|
||||
type="number"
|
||||
value={redeemableBalance}
|
||||
suffix="USDC"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span>Redeemable amount</span>
|
||||
<Input
|
||||
className="border-0"
|
||||
disabled
|
||||
type="number"
|
||||
value={mangoAvailable}
|
||||
suffix="MNGO"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
onClick={() => handleRedeem()}
|
||||
|
|
|
@ -3,7 +3,7 @@ import PoolInfoCards from '../components/PoolInfoCards'
|
|||
import HeroSection from '../components/HeroSection'
|
||||
import LandingContent from '../components/LandingContent'
|
||||
|
||||
const SalePage = () => {
|
||||
const ContributionPage = () => {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
|
@ -18,4 +18,4 @@ const SalePage = () => {
|
|||
)
|
||||
}
|
||||
|
||||
export default SalePage
|
||||
export default ContributionPage
|
|
@ -1,9 +1,21 @@
|
|||
import RedeemModal from '../components/RedeemModal'
|
||||
import GradientText from '../components/GradientText'
|
||||
|
||||
const RedeemPage = () => {
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">
|
||||
<div className="justify-center grid grid-cols-12 gap-4 m-10">
|
||||
<div className="col-span-6 col-start-2">
|
||||
<h2 className="my-5 text-5xl 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="text-xl">
|
||||
Thank you for your contributions, soon you will be able to help decide
|
||||
the future of Mango.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-4 col-start-8 my-5">
|
||||
<RedeemModal />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import SalePage from './SalePage'
|
||||
import ContributionPage from './ContributionPage'
|
||||
import RedeemPage from './RedeemPage'
|
||||
import Notifications from '../components/Notification'
|
||||
import TopBar from '../components/TopBar'
|
||||
|
@ -12,7 +12,7 @@ const Index = () => {
|
|||
<div className={`bg-bkg-1 text-fgd-1 transition-all`}>
|
||||
<TopBar />
|
||||
<Notifications />
|
||||
{endIdo?.isAfter() && <SalePage />}
|
||||
{endIdo?.isAfter() && <ContributionPage />}
|
||||
{endIdo?.isBefore() && <RedeemPage />}
|
||||
</div>
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue