Add sale end without vesting date

packages/web/package.json

@@ -36,7 +36,7 @@
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/walletconnect-connector": "^6.2.13",
     "bignumber.js": "^9.0.2",
-    "date-fns": "^2.28.0",
+    "dayjs": "^1.11.1",
     "lodash": "^4.17.21",
     "next": "^12.0.4",
     "react": "^17.0.2",

packages/web/src/components/dashboard/project-info-card.tsx

@@ -3,6 +3,7 @@
  */
 
 import { Card } from 'src/components/core/card';
+import { Loader } from 'src/components/core/loading';
 import { Separator } from 'src/components/core/separator';
 import { Text } from 'src/components/core/text';
 import { media } from 'src/styles/breakpoints';
@@ -14,8 +15,9 @@ import styled from 'styled-components';
  */
 
 type Props = {
-  myContribution: string;
   contributions: string;
+  isLoading: boolean;
+  myContribution: string;
   price: string;
   raised: string;
   vestingStart: string;
@@ -36,6 +38,20 @@ const StyledCard = styled(Card)`
   `}
 `;
 
+/**
+ * `LoadingCard` styled component.
+ */
+
+const LoadingCard = styled(Card)`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 2rem;
+  justify-content: center;
+  padding-top: 5rem;
+  position: relative;
+`;
+
 /**
  * `Label` styled component.
  */
@@ -80,7 +96,28 @@ const Value = styled(Text).attrs({ as: 'p' })`
  */
 
 export function ProjectInfoCard(props: Props) {
-  const { contributions, myContribution, price, raised, vestingStart } = props;
+  const {
+    contributions,
+    isLoading,
+    myContribution,
+    price,
+    raised,
+    vestingStart
+  } = props;
+
+  if (isLoading) {
+    return (
+      <LoadingCard>
+        <Text as={'p'} variant={'body2'}>
+          {'Loading'}
+        </Text>
+        <Loader size={1} />
+        <Text as={'p'} variant={'body'}>
+          {'We are fetching blockchain data...'}
+        </Text>
+      </LoadingCard>
+    );
+  }
 
   return (
     <StyledCard>
@@ -91,7 +128,7 @@ export function ProjectInfoCard(props: Props) {
           {'Citizend token sale'}
         </Text>
 
-        {vestingStart && (
+        {!!vestingStart && (
           <>
             <Text noMargin variant={'small'}>
               {'Vesting starting at:'}

packages/web/src/components/screens/dashboard.tsx

@@ -9,20 +9,22 @@ import { ProjectInfoCard } from 'src/components/dashboard/project-info-card';
 import { SaleForm } from 'src/components/dashboard/sale-form';
 import { SaleState, useSale } from 'src/hooks/use-sale';
 import { ShareReferralModal } from 'src/components/modals/share-referral-modal';
+import { UnknownDate } from 'src/components/unknown-date';
 import { Vesting } from 'src/components/vesting';
 import { Web3Provider } from '@ethersproject/providers';
 import { currencyConfig } from 'src/core/constants';
 import {
   formatCompactNumber,
   formatCurrency,
-  formatDate
+  formatFromUnix
 } from 'src/core/utils/formatters';
 
 import { media } from 'src/styles/breakpoints';
 import { useAppStatus } from 'src/hooks/use-app-status';
 import { useIsKYCApproved } from 'src/hooks/use-kyc-status';
 import { useWeb3React } from '@web3-react/core';
 import React, { useState } from 'react';
+import dayjs from 'dayjs';
 import styled from 'styled-components';
 
 /**
@@ -54,7 +56,7 @@ const getReferralStorageKey = (address: string) => `referralCode${address}`;
 export function DashboardScreen() {
   const { account } = useWeb3React<Web3Provider>();
   const { balance, contributions, price, raised } = useSale() as SaleState;
-  const { state, vestingStart } = useAppStatus();
+  const { isLoading, state, vestingStart } = useAppStatus();
   const kycApproved = useIsKYCApproved();
   const [isShareModalOpen, setIsShareModalOpen] = useState<boolean>(() => {
     return !window.localStorage.getItem(getReferralStorageKey(account));
@@ -67,24 +69,28 @@ export function DashboardScreen() {
       <StyledContainer>
         <ProjectInfoCard
           contributions={contributions}
+          isLoading={isLoading}
           myContribution={formatCurrency(balance, currencyConfig.aUsd)}
           price={formatCurrency(price, currencyConfig.aUsd)}
           raised={formatCompactNumber(raised, currencyConfig.aUsd)}
-          vestingStart={formatDate(vestingStart)}
+          vestingStart={
+            vestingStart === 0 ? undefined : formatFromUnix(vestingStart)
+          }
         />
 
-        {state === 'COUNTDOWN' && !!vestingStart && (
+        {!isLoading && state === 'COUNTDOWN' && !isNaN(vestingStart) && (
           <Countdown
-            date={vestingStart}
+            date={dayjs.unix(vestingStart).toISOString()}
             title={'Vesting period starting in:'}
           />
         )}
 
-        {state === 'SALE' && (
+        {!isLoading && state === 'VESTING_UNKNOWN' && <UnknownDate />}
+        {!isLoading && state === 'SALE' && (
           <SaleForm disabled={!kycApproved} tokenPrice={price} />
         )}
 
-        {state === 'VESTING' && <Vesting />}
+        {!isLoading && state === 'VESTING' && <Vesting />}
       </StyledContainer>
 
       <ShareReferralModal

packages/web/src/components/unknown-date.tsx

@@ -0,0 +1,64 @@
+/**
+ * Module dependencies.
+ */
+
+import { Text } from 'src/components/core/text';
+import React from 'react';
+import styled from 'styled-components';
+
+/**
+ * `Section` styled component.
+ */
+
+const Section = styled.section`
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
+`;
+
+/**
+ * `Container` styled component.
+ */
+
+const Container = styled.section`
+  margin: 0 auto;
+  max-width: 640px;
+  padding: 3rem 2rem 0;
+  text-align: center;
+`;
+
+/**
+ * `Title` styled component.
+ */
+
+const Title = styled(Text).attrs({ variant: 'lead' })`
+  display: block;
+  margin-bottom: 3rem;
+`;
+
+/**
+ * `Label` styled component.
+ */
+
+const Label = styled(Text).attrs({ variant: 'body' })`
+  margin: 0;
+  padding-top: 0.75rem;
+`;
+
+/**
+ * Export `UnknownDate` component.
+ */
+
+export function UnknownDate() {
+  return (
+    <Section>
+      <Container>
+        <Title>
+          {'Vesting will begin after the public sale has concluded'}
+        </Title>
+
+        <Label>{'Keep checking this page for updates.'}</Label>
+      </Container>
+    </Section>
+  );
+}

packages/web/src/components/vesting/index.tsx

@@ -6,11 +6,10 @@ import { ClaimActionCard } from './styles';
 import { InfoCard } from './info-card';
 import { LoadingModal } from 'src/components/modals/loading-modal';
 import { currencyConfig } from 'src/core/constants';
-import { formatCurrency, formatDate } from 'src/core/utils/formatters';
+import { formatCurrency } from 'src/core/utils/formatters';
 import { media } from 'src/styles/breakpoints';
 import { useClaim, useRefund, useVesting } from 'src/hooks/use-vesting';
 import React, { useMemo } from 'react';
-import formatISO from 'date-fns/formatISO';
 import styled from 'styled-components';
 
 /**
@@ -28,16 +27,6 @@ const Grid = styled.section`
   `}
 `;
 
-/**
- * `getFirstDayOfNextMonth`.
- */
-
-function getFirstDayOfNextMonth() {
-  const date = new Date();
-
-  return new Date(date.getFullYear(), date.getMonth() + 1, 1);
-}
-
 /**
  * Export `Vesting` component.
  */
@@ -62,9 +51,7 @@ export function Vesting() {
   return (
     <Grid>
       <InfoCard
-        nextRelease={formatDate(formatISO(getFirstDayOfNextMonth()), {
-          hideHours: true
-        })}
+        nextRelease={vestingState.nextRelease}
         tokens={tokens}
         totalClaimed={totalClaimed}
       />

packages/web/src/core/constants.ts

@@ -8,7 +8,7 @@ export const currencyConfig = {
     decimalPlaces: 12,
     decimalPlacesToDisplay: 6,
     skipTrailingZeros: true,
-    symbol: '$'
+    symbol: undefined
   },
   ctnd: {
     currency: 'CTND',

packages/web/src/core/utils/dayjs.ts

@@ -0,0 +1,21 @@
+/**
+ * Module dependencies.
+ */
+
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+/**
+ * Register `dayjs` plugins.
+ */
+
+dayjs.extend(timezone);
+dayjs.extend(utc);
+dayjs.tz.setDefault('Europe/Lisbon');
+
+/**
+ * Export dayjs with timezone.
+ */
+
+export default dayjs;