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