add mini cards for stats

components/ContributionModal.tsx

@@ -9,13 +9,13 @@ import useWalletStore from '../stores/useWalletStore'
 import Input from './Input'
 import Button from './Button'
 import { ConnectWalletButtonSmall } from './ConnectWalletButton'
+import PoolCountdown from './PoolCountdown'
 import Slider from './Slider'
 import Loading from './Loading'
 import WalletIcon from './WalletIcon'
 import useLargestAccounts from '../hooks/useLargestAccounts'
 import useVaults from '../hooks/useVaults'
-import moment from 'moment'
-import Countdown from 'react-countdown'
+import usePool from '../hooks/usePool'
 
 const ContributionModal = () => {
   const actions = useWalletStore((s) => s.actions)
@@ -23,13 +23,7 @@ const ContributionModal = () => {
   const wallet = useWalletStore((s) => s.current)
   const largestAccounts = useLargestAccounts()
   const vaults = useVaults()
-
-  const pool = useWalletStore((s) => s.pool)
-  // const startIdo = pool ? moment.unix(pool.startIdoTs.toNumber()) : undefined
-  const endIdo = pool ? moment.unix(pool.endIdoTs.toNumber()) : undefined
-  const endDeposits = pool
-    ? moment.unix(pool.endDepositsTs.toNumber())
-    : undefined
+  const { endIdo, endDeposits } = usePool()
 
   const usdcBalance = largestAccounts.usdc?.balance || 0
   const redeemableBalance = largestAccounts.redeemable?.balance || 0
@@ -79,7 +73,7 @@ const ContributionModal = () => {
   const onChangeAmountInput = (amount) => {
     setWalletAmount(totalBalance - amount)
     setContributionAmount(amount)
-    if (endDeposits.isBefore() && amount > redeemableBalance) {
+    if (endDeposits?.isBefore() && amount > redeemableBalance) {
       setErrorMessage('Deposits ended, contribution can not increase')
       setTimeout(() => setErrorMessage(null), 4000)
     }
@@ -87,7 +81,7 @@ const ContributionModal = () => {
 
   const onChangeSlider = (percentage) => {
     let newContribution = Math.round(percentage * totalBalance) / 100
-    if (endDeposits.isBefore() && newContribution > redeemableBalance) {
+    if (endDeposits?.isBefore() && newContribution > redeemableBalance) {
       newContribution = redeemableBalance
       setErrorMessage('Deposits ended, contribution can not increase')
       setTimeout(() => setErrorMessage(null), 4000)
@@ -98,7 +92,7 @@ const ContributionModal = () => {
   }
 
   const handleMax = () => {
-    if (endDeposits.isAfter()) {
+    if (endDeposits?.isAfter()) {
       setWalletAmount(0)
       setContributionAmount(totalBalance)
     } else {
@@ -136,36 +130,9 @@ const ContributionModal = () => {
   const disableFormInputs = submitted || !connected || loading
 
   const dontAddMore =
-    endDeposits.isBefore() && contributionAmount > redeemableBalance
+    endDeposits?.isBefore() && contributionAmount > redeemableBalance
   const disableSubmit = disableFormInputs || walletAmount < 0 || dontAddMore
 
-  const renderCountdown = ({ hours, minutes, seconds, completed }) => {
-    const now = new Date().getTime() / 1000
-    const message =
-      now > pool.endDepositsTs.toNumber() && now < pool.endIdoTs.toNumber()
-        ? 'Deposits are closed'
-        : 'The IDO has ended'
-    if (completed) {
-      return <p className="text-secondary-2-light">{message}</p>
-    } else {
-      return (
-        <div className="font-bold pt-2 text-fgd-1 text-base">
-          <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
-            {hours < 10 ? `0${hours}` : hours}
-          </span>
-          :
-          <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
-            {minutes < 10 ? `0${minutes}` : minutes}
-          </span>
-          :
-          <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
-            {seconds < 10 ? `0${seconds}` : seconds}
-          </span>
-        </div>
-      )
-    }
-  }
-
   return (
     <>
       <div className="bg-bkg-2 border border-bkg-3 col-span-7 p-7 rounded-lg shadow-lg">
@@ -341,9 +308,7 @@ const ContributionModal = () => {
               className={`mr-2`}
             />
             <div className="font-bold text-fgd-1 text-xl">
-              {vaults.usdc && vaults.mango
-                ? `$${vaults.usdc.balance / vaults.mango.balance}`
-                : 'N/A'}
+              {vaults.estimatedPrice}
             </div>
           </div>
         </div>
@@ -351,7 +316,7 @@ const ContributionModal = () => {
           <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.usdc?.balance.toLocaleString()}` || 'N/A'}
+              {vaults.usdcBalance}
             </div>
           </div>
         </div>
@@ -360,24 +325,17 @@ const ContributionModal = () => {
           <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.mango?.balance.toLocaleString() || 'N/A'}
+              {vaults.mangoBalance}
             </div>
           </div>
         </div>
         <div className="border-b border-bkg-4 py-4 text-center">
           <p className="text-fgd-3">Deposits Close</p>
-          {pool ? (
-            <Countdown
-              date={endDeposits?.format()}
-              renderer={renderCountdown}
-            />
-          ) : null}
+          <PoolCountdown date={endDeposits} />
         </div>
         <div className="pt-4 text-center">
           <p className="text-fgd-3">Withdrawals Close</p>
-          {pool ? (
-            <Countdown date={endIdo?.format()} renderer={renderCountdown} />
-          ) : null}
+          <PoolCountdown date={endIdo} />
         </div>
         {/* <p>
           Start: {startIdo?.fromNow()} ({startIdo?.format()})

components/PoolCountdown.tsx

@@ -0,0 +1,40 @@
+import usePool from '../hooks/usePool'
+import Countdown from 'react-countdown'
+import moment from 'moment'
+
+const PoolCountdown = (props: { date: moment.Moment }) => {
+  const { endIdo, endDeposits } = usePool()
+  const renderCountdown = ({ hours, minutes, seconds, completed }) => {
+    const message =
+      endDeposits?.isBefore() && endIdo?.isAfter()
+        ? 'Deposits are closed'
+        : 'The IDO has ended'
+    if (completed) {
+      return <p className="text-secondary-2-light">{message}</p>
+    } else {
+      return (
+        <div className="font-bold pt-2 text-fgd-1 text-base">
+          <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
+            {hours < 10 ? `0${hours}` : hours}
+          </span>
+          :
+          <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
+            {minutes < 10 ? `0${minutes}` : minutes}
+          </span>
+          :
+          <span className="bg-bkg-1 border border-bkg-4 mx-0.5 px-1.5 py-1 rounded">
+            {seconds < 10 ? `0${seconds}` : seconds}
+          </span>
+        </div>
+      )
+    }
+  }
+
+  if (props.date) {
+    return <Countdown date={props.date.format()} renderer={renderCountdown} />
+  } else {
+    return null
+  }
+}
+
+export default PoolCountdown

components/PoolInfoCards.tsx

@@ -0,0 +1,73 @@
+import usePool from '../hooks/usePool'
+import useVaults from '../hooks/useVaults'
+import PoolCountdown from './PoolCountdown'
+
+const Card = (props: any) => {
+  return (
+    <div
+      className="m-2 p-4 rounded-lg"
+      style={{ backgroundColor: 'rgba(44, 41, 66, 1)' }}
+    >
+      <p className="pb-2">{props.title}</p>
+      {props.children}
+    </div>
+  )
+}
+
+const PoolInfoCards = () => {
+  const { endIdo, endDeposits } = usePool()
+  const vaults = useVaults()
+
+  return (
+    <div className="flex flex-row justify-center mb-12">
+      <Card title="Deposits closing in">
+        <PoolCountdown date={endDeposits} />
+      </Card>
+
+      <Card title="Sale event ends in">
+        <PoolCountdown date={endIdo} />
+      </Card>
+
+      <Card title="Total $MNGO for sale">
+        <div className="flex">
+          <img className="h-5 mr-2 w-auto" src="/logo.svg" alt="MNGO" />
+          <div className="font-bold text-fgd-1 text-base">
+            {vaults.mangoBalance}
+          </div>
+        </div>
+      </Card>
+
+      <Card title="Total contributions">
+        <div className="flex">
+          <img
+            alt="USDC"
+            width="20"
+            height="20"
+            src="/icons/usdc.svg"
+            className={`mr-2`}
+          />{' '}
+          <div className="font-bold text-fgd-1 text-base">
+            {vaults.usdcBalance}
+          </div>
+        </div>
+      </Card>
+
+      <Card title="Estimated token price">
+        <div className="flex">
+          <img
+            alt="USDC"
+            width="20"
+            height="20"
+            src="/icons/usdc.svg"
+            className={`mr-2`}
+          />{' '}
+          <div className="font-bold text-fgd-1 text-base">
+            {vaults.estimatedPrice.substring(0, 9)}
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}
+
+export default PoolInfoCards

hooks/usePool.tsx

@@ -0,0 +1,13 @@
+import moment from 'moment'
+import useWalletStore from '../stores/useWalletStore'
+
+export default function usePool() {
+  const pool = useWalletStore((s) => s.pool)
+  const startIdo = pool ? moment.unix(pool.startIdoTs.toNumber()) : undefined
+  const endIdo = pool ? moment.unix(pool.endIdoTs.toNumber()) : undefined
+  const endDeposits = pool
+    ? moment.unix(pool.endDepositsTs.toNumber())
+    : undefined
+
+  return { pool, startIdo, endIdo, endDeposits }
+}

hooks/useVaults.tsx

@@ -22,5 +22,19 @@ export default function useVaults() {
     [mangoVault, mints]
   )
 
-  return { usdc, mango }
+  const usdcBalance = useMemo(
+    () => (usdc ? `${Math.round(usdc.balance).toLocaleString()}` : 'N/A'),
+    [usdc]
+  )
+  const mangoBalance = useMemo(
+    () => `${mango?.balance.toLocaleString()}` || 'N/A',
+    [mango]
+  )
+
+  const estimatedPrice = useMemo(
+    () => (usdc && mango ? `$${usdc.balance / mango.balance}` : 'N/A'),
+    [usdc, mango]
+  )
+
+  return { usdc, mango, usdcBalance, mangoBalance, estimatedPrice }
 }

pages/index.tsx

@@ -1,12 +1,15 @@
 import Notifications from '../components/Notification'
 import TopBar from '../components/TopBar'
 import ContributionModal from '../components/ContributionModal'
+import PoolInfoCards from '../components/PoolInfoCards'
 
 const Index = () => {
   return (
     <div className={`bg-bkg-1 text-fgd-1 transition-all`}>
       <TopBar />
       <Notifications />
+
+      <PoolInfoCards />
       <div className="flex justify-center">
         <div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">
           <ContributionModal />