vault stats styling

2021-07-06 23:25:55 +10:00 · 2021-07-06 23:25:55 +10:00 · 976e27c059
parent 6fb62ef7e1
commit 976e27c059
6 changed files with 132 additions and 76 deletions
--- a/components/ContributionModal.tsx
+++ b/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'
-
-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`}
-  }
-`
+import Countdown from 'react-countdown'

 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 ? (
-              <Button
-                className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
-                onClick={() => handleConnectDisconnect()}
-                secondary
-              >
-                <div className="flex items-center text-sm">
-                  <LinkIcon className="h-4 w-4 mr-1" />
-                  Disconnect
-                </div>
-              </Button>
-            ) : (
-              <ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
-                <div className="flex items-center justify-center text-sm">
-                  <LinkIcon className="h-4 w-4 mr-1" />
-                  Connect Wallet
-                </div>
-              </ConnectWalletButtonSmall>
-            )}
+            <div className="flex justify-center">
+              {connected ? (
+                <Button
+                  className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
+                  onClick={() => handleConnectDisconnect()}
+                  secondary
+                >
+                  <div className="flex items-center text-sm">
+                    <LinkIcon className="h-4 w-4 mr-1" />
+                    Disconnect
+                  </div>
+                </Button>
+              ) : (
+                <ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
+                  <div className="flex items-center justify-center text-sm">
+                    <LinkIcon className="h-4 w-4 mr-1" />
+                    Connect Wallet
+                  </div>
+                </ConnectWalletButtonSmall>
+              )}
+            </div>
          </>
        )}
-      </StyledModalWrapper>
-      <StyledModalBorder animate={submitted && connected} />
-      <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>
-      <p>
-        Estimated Price per Token:{' '}
-        {vaults.usdc && vaults.mango
-          ? vaults.usdc.balance / vaults.mango.balance
-          : 'N/A'}
-      </p>
-    </div>
+      </div>
+      <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">
+        <div className="border-b border-bkg-4 pb-4 text-center">
+          <p className="text-fgd-3">Estimated Token Price</p>
+          <div className="flex items-center justify-center pt-0.5">
+            <img
+              alt=""
+              width="20"
+              height="20"
+              src="/icons/usdc.svg"
+              className={`mr-2`}
+            />
+            <div className="font-bold text-fgd-1 text-xl">
+              {vaults.usdc && vaults.mango
+                ? `$${vaults.usdc.balance / vaults.mango.balance}`
+                : 'N/A'}
+            </div>
+          </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>
+    </>
  )
 }

--- a/package.json
+++ b/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"
  },
--- a/pages/index.tsx
+++ b/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">
-        <ContributionModal />
+      <div className="flex justify-center">
+        <div className="max-w-screen-md grid grid-cols-12 gap-4 w-full">
+          <ContributionModal />
+        </div>
      </div>
    </div>
  )
--- a/styles/index.css
+++ b/styles/index.css
@ -21,7 +21,7 @@ h2 {
 }

 p {
-  @apply text-fgd-4 text-sm;
+  @apply text-fgd-3 text-sm;
 }

 button {
--- a/tailwind.config.js
+++ b/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',
--- a/yarn.lock
+++ b/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"