From 5142f0c11b38f2282922f5a4986b8699bf049c26 Mon Sep 17 00:00:00 2001
From: Maximilian Schneider <mail@maximilianschneider.net>
Date: Tue, 13 Jul 2021 02:59:53 +0200
Subject: [PATCH] finish rough layout of redeem page

---
 components/Input.tsx                         |  2 +-
 components/RedeemModal.tsx                   | 38 +++++++++++++++++---
 pages/{SalePage.tsx => ContributionPage.tsx} |  4 +--
 pages/RedeemPage.tsx                         | 16 +++++++--
 pages/index.tsx                              |  4 +--
 5 files changed, 53 insertions(+), 11 deletions(-)
 rename pages/{SalePage.tsx => ContributionPage.tsx} (88%)

diff --git a/components/Input.tsx b/components/Input.tsx
index 486aec3..c49d8e2 100644
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -1,7 +1,7 @@
 interface InputProps {
   type: string
   value: any
-  onChange: (e) => void
+  onChange?: (e) => void
   className?: string
   disabled?: boolean
   [x: string]: any
diff --git a/components/RedeemModal.tsx b/components/RedeemModal.tsx
index 9f3e41d..e424061 100644
--- a/components/RedeemModal.tsx
+++ b/components/RedeemModal.tsx
@@ -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&apos;s build together.</p>
+              {/* <p>Welcome to the DAO, let&apos;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()}
diff --git a/pages/SalePage.tsx b/pages/ContributionPage.tsx
similarity index 88%
rename from pages/SalePage.tsx
rename to pages/ContributionPage.tsx
index d6e19f0..e516de3 100644
--- a/pages/SalePage.tsx
+++ b/pages/ContributionPage.tsx
@@ -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
diff --git a/pages/RedeemPage.tsx b/pages/RedeemPage.tsx
index 6efd94d..df0c94d 100644
--- a/pages/RedeemPage.tsx
+++ b/pages/RedeemPage.tsx
@@ -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&nbsp;
+          <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>
diff --git a/pages/index.tsx b/pages/index.tsx
index 444d755..492d2cd 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -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>
   )