vault stats styling

components/ContributionModal.tsx

@@ -1,6 +1,4 @@
 import { useEffect, useState } from 'react'
-import styled from '@emotion/styled'
-import tw from 'twin.macro'
 import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/outline'
 import { LinkIcon } from '@heroicons/react/solid'
 import useWalletStore from '../stores/useWalletStore'
@@ -13,33 +11,7 @@ import WalletIcon from './WalletIcon'
 import useLargestAccounts from '../hooks/useLargestAccounts'
 import useVaults from '../hooks/useVaults'
 import moment from 'moment'
-
+import Countdown from 'react-countdown'
-const StyledModalWrapper = styled.div`
-  height: 414px;
-  ${tw`bg-bkg-2 flex flex-col items-center relative rounded-lg shadow-lg p-7 w-96`}
-`
-type StyledModalBorderProps = {
-  animate: boolean
-}
-
-const StyledModalBorder = styled.div<StyledModalBorderProps>`
-  height: 416px;
-  width: 386px;
-  top: -1px;
-  left: -1px;
-  z-index: -1;
-  position: absolute;
-
-  :after {
-    content: '';
-    background-size: 300% 300%;
-    ${tw`bg-bkg-3 absolute top-0 left-0 right-0 bottom-0 rounded-lg`}
-
-    ${({ animate }) =>
-      animate &&
-      tw`animate-gradient opacity-60 bg-gradient-to-br from-secondary-1-light via-secondary-3-light to-primary-light`}
-  }
-`
 
 const ContributionModal = () => {
   const actions = useWalletStore((s) => s.actions)
@@ -49,7 +21,7 @@ const ContributionModal = () => {
   const vaults = useVaults()
 
   const pool = useWalletStore((s) => s.pool)
-  const startIdo = pool ? moment.unix(pool.startIdoTs.toNumber()) : undefined
+  // 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())
@@ -139,13 +111,40 @@ const ContributionModal = () => {
 
   const disableFormInputs = submitted || !connected || loading
 
+  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="relative z-10">
+    <>
-      <StyledModalWrapper>
+      <div className="bg-bkg-2 border border-bkg-3 col-span-7 p-7 rounded-lg shadow-lg">
         <div className="pb-4 text-center">
           {!submitted && !submitting && !editContribution ? (
             <>
-              <h2>Plant your seed</h2>
+              <h2>Plant Your Seed</h2>
               <p>This is the start of something big.</p>
             </>
           ) : null}
@@ -172,7 +171,7 @@ const ContributionModal = () => {
           ) : null}
         </div>
         {submitting ? (
-          <div className="flex items-center h-full">
+          <div className="flex h-64 items-center justify-center">
             <Loading className="h-6 w-6 mb-3 text-primary-light" />
           </div>
         ) : (
@@ -268,47 +267,93 @@ const ContributionModal = () => {
                 </Button>
               </div>
             </div>
-            {connected ? (
+            <div className="flex justify-center">
-              <Button
+              {connected ? (
-                className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
+                <Button
-                onClick={() => handleConnectDisconnect()}
+                  className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
-                secondary
+                  onClick={() => handleConnectDisconnect()}
-              >
+                  secondary
-                <div className="flex items-center text-sm">
+                >
-                  <LinkIcon className="h-4 w-4 mr-1" />
+                  <div className="flex items-center text-sm">
-                  Disconnect
+                    <LinkIcon className="h-4 w-4 mr-1" />
-                </div>
+                    Disconnect
-              </Button>
+                  </div>
-            ) : (
+                </Button>
-              <ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
+              ) : (
-                <div className="flex items-center justify-center text-sm">
+                <ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
-                  <LinkIcon className="h-4 w-4 mr-1" />
+                  <div className="flex items-center justify-center text-sm">
-                  Connect Wallet
+                    <LinkIcon className="h-4 w-4 mr-1" />
-                </div>
+                    Connect Wallet
-              </ConnectWalletButtonSmall>
+                  </div>
-            )}
+                </ConnectWalletButtonSmall>
+              )}
+            </div>
           </>
         )}
-      </StyledModalWrapper>
+      </div>
-      <StyledModalBorder animate={submitted && connected} />
+      <div className="bg-gradient-to-br from-secondary-4-dark to-secondary-4-light border border-bkg-3 col-span-5 p-7 rounded-lg shadow-lg">
-      <p>
+        <div className="border-b border-bkg-4 pb-4 text-center">
-        Start: {startIdo?.fromNow()} ({startIdo?.format()})
+          <p className="text-fgd-3">Estimated Token Price</p>
-      </p>
+          <div className="flex items-center justify-center pt-0.5">
-      <p>
+            <img
-        End Deposits: {endDeposits?.fromNow()} ({endDeposits?.format()})
+              alt=""
-      </p>
+              width="20"
-      <p>
+              height="20"
-        End Withdraws: {endIdo?.fromNow()} ({endIdo?.format()})
+              src="/icons/usdc.svg"
-      </p>
+              className={`mr-2`}
-      <p>Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}</p>
+            />
-      <p>Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}</p>
+            <div className="font-bold text-fgd-1 text-xl">
-      <p>
+              {vaults.usdc && vaults.mango
-        Estimated Price per Token:{' '}
+                ? `$${vaults.usdc.balance / vaults.mango.balance}`
-        {vaults.usdc && vaults.mango
+                : 'N/A'}
-          ? vaults.usdc.balance / vaults.mango.balance
+            </div>
-          : 'N/A'}
+          </div>
-      </p>
+        </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.usdc?.balance.toLocaleString()}` || 'N/A'}
+            </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.mango?.balance.toLocaleString() || 'N/A'}
+            </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}
+        </div>
+        <div className="pt-4 text-center">
+          <p className="text-fgd-3">Withdrawals Close</p>
+          {pool ? (
+            <Countdown date={endIdo?.format()} renderer={renderCountdown} />
+          ) : null}
+        </div>
+        {/* <p>
+          Start: {startIdo?.fromNow()} ({startIdo?.format()})
+        </p>
+        <p>
+          End Deposits: {endDeposits?.fromNow()} ({endDeposits?.format()})
+        </p>
+        <p>
+          End Withdraws: {endIdo?.fromNow()} ({endIdo?.format()})
+        </p>
+        <p>Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}</p>
+        <p>Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}</p> */}
+      </div>
+    </>
   )
 }
 

package.json

@@ -35,6 +35,7 @@
     "next-themes": "^0.0.14",
     "rc-slider": "^9.7.2",
     "react": "^17.0.1",
+    "react-countdown": "^2.3.2",
     "react-dom": "^17.0.1",
     "zustand": "^3.4.1"
   },

pages/index.tsx

@@ -7,8 +7,10 @@ const Index = () => {
     <div className={`bg-bkg-1 text-fgd-1 transition-all`}>
       <TopBar />
       <Notifications />
-      <div className="grid grid-cols-1 place-items-center">
+      <div className="flex justify-center">
-        <ContributionModal />
+        <div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">
+          <ContributionModal />
+        </div>
       </div>
     </div>
   )

styles/index.css

@@ -21,7 +21,7 @@ h2 {
 }
 
 p {
-  @apply text-fgd-4 text-sm;
+  @apply text-fgd-3 text-sm;
 }
 
 button {

tailwind.config.js

@@ -20,6 +20,7 @@ module.exports = {
         'secondary-1': { light: '#AFD803', dark: '#6CBF00' },
         'secondary-2': { light: '#E54033', dark: '#C7251A' },
         'secondary-3': { light: '#026DF7', dark: '#0259CA' },
+        'secondary-4': { light: '#262145', dark: '#1B1735' },
         'bkg-1': '#141125',
         'bkg-2': '#242132',
         'bkg-3': '#393549',

yarn.lock

@@ -5273,6 +5273,13 @@ rc-util@^5.0.0, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0:
     react-is "^16.12.0"
     shallowequal "^1.1.0"
 
+react-countdown@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/react-countdown/-/react-countdown-2.3.2.tgz#4cc27f28f2dcd47237ee66e4b9f6d2a21fc0b0ad"
+  integrity sha512-Q4SADotHtgOxNWhDdvgupmKVL0pMB9DvoFcxv5AzjsxVhzOVxnttMbAywgqeOdruwEAmnPhOhNv/awAgkwru2w==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-dom@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"