diff --git a/components/ContributionModal.tsx b/components/ContributionModal.tsx index 6781a14..14dccf9 100644 --- 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` - 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

{message}

+ } else { + return ( +
+ + {hours < 10 ? `0${hours}` : hours} + + : + + {minutes < 10 ? `0${minutes}` : minutes} + + : + + {seconds < 10 ? `0${seconds}` : seconds} + +
+ ) + } + } + return ( -
- + <> +
{!submitted && !submitting && !editContribution ? ( <> -

Plant your seed

+

Plant Your Seed

This is the start of something big.

) : null} @@ -172,7 +171,7 @@ const ContributionModal = () => { ) : null}
{submitting ? ( -
+
) : ( @@ -268,47 +267,93 @@ const ContributionModal = () => {
- {connected ? ( - - ) : ( - -
- - Connect Wallet -
- - )} +
+ {connected ? ( + + ) : ( + +
+ + Connect Wallet +
+ + )} +
)} - - -

- Start: {startIdo?.fromNow()} ({startIdo?.format()}) -

-

- End Deposits: {endDeposits?.fromNow()} ({endDeposits?.format()}) -

-

- End Withdraws: {endIdo?.fromNow()} ({endIdo?.format()}) -

-

Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}

-

Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}

-

- Estimated Price per Token:{' '} - {vaults.usdc && vaults.mango - ? vaults.usdc.balance / vaults.mango.balance - : 'N/A'} -

-
+ +
+
+

Estimated Token Price

+
+ +
+ {vaults.usdc && vaults.mango + ? `$${vaults.usdc.balance / vaults.mango.balance}` + : 'N/A'} +
+
+
+
+

Total USDC Deposited

+
+
+ {`$${vaults.usdc?.balance.toLocaleString()}` || 'N/A'} +
+
+
+
+

Locked MNGO in Pool

+
+ mango +
+ {vaults.mango?.balance.toLocaleString() || 'N/A'} +
+
+
+
+

Deposits Close

+ {pool ? ( + + ) : null} +
+
+

Withdrawals Close

+ {pool ? ( + + ) : null} +
+ {/*

+ Start: {startIdo?.fromNow()} ({startIdo?.format()}) +

+

+ End Deposits: {endDeposits?.fromNow()} ({endDeposits?.format()}) +

+

+ End Withdraws: {endIdo?.fromNow()} ({endIdo?.format()}) +

+

Current USDC in Pool: {vaults.usdc?.balance || 'N/A'}

+

Locked MNGO in Pool: {vaults.mango?.balance || 'N/A'}

*/} +
+ ) } diff --git a/package.json b/package.json index d859af7..13dbf1a 100644 --- 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" }, diff --git a/pages/index.tsx b/pages/index.tsx index 536a4d6..f1edf6d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -7,8 +7,10 @@ const Index = () => {
-
- +
+
+ +
) diff --git a/styles/index.css b/styles/index.css index 11a1432..15c982e 100644 --- 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 { diff --git a/tailwind.config.js b/tailwind.config.js index 8facae2..f0f9bf0 100644 --- 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', diff --git a/yarn.lock b/yarn.lock index ee16d78..70bdc62 100644 --- 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"