From b2e4f04c75d86d5011428fbd91c382fc7e7c9bfd Mon Sep 17 00:00:00 2001
From: veeso <christian.visintin@veeso.dev>
Date: Fri, 6 Dec 2024 12:55:16 +0100
Subject: [PATCH] fix: roadmap

---
 src/js/components/App/pages/Home/Intro.tsx    |  2 +-
 src/js/components/App/pages/Home/Roadmap.tsx  | 24 ++++----
 src/js/components/App/pages/Presale.tsx       | 58 +++++++------------
 .../components/App/pages/Presale/BuyForm.tsx  | 10 ++--
 .../App/pages/Presale/PresaleForm.tsx         | 49 ++++++++++------
 src/js/utils/platform.ts                      |  8 +++
 6 files changed, 80 insertions(+), 71 deletions(-)
 create mode 100644 src/js/utils/platform.ts

diff --git a/src/js/components/App/pages/Home/Intro.tsx b/src/js/components/App/pages/Home/Intro.tsx
index 47e4a66..4a0e64b 100644
--- a/src/js/components/App/pages/Home/Intro.tsx
+++ b/src/js/components/App/pages/Home/Intro.tsx
@@ -14,7 +14,7 @@ const Intro = () => (
     </Container.Container>
     <Container.Container>
       <Heading.H1>
-        <span className="text-brandRed font-bold">EKOKE</span> DAO Marketplace
+        <span className="text-brandRed font-bold">EKOKE</span> DAO
       </Heading.H1>
     </Container.Container>
     <Container.Container>
diff --git a/src/js/components/App/pages/Home/Roadmap.tsx b/src/js/components/App/pages/Home/Roadmap.tsx
index cd89f58..920a9dc 100644
--- a/src/js/components/App/pages/Home/Roadmap.tsx
+++ b/src/js/components/App/pages/Home/Roadmap.tsx
@@ -24,27 +24,27 @@ const Roadmap = () => (
             will be open to everyone. It will continue until the end of the
             first quarter.
           </Milestone>
-          <Milestone title="SNS Launch" date="Q2">
-            The SNS will be launched in the second quarter. We'll base our DAO
-            on the the{' '}
-            <Link.Paragraph href={'https://nns.ic0.app'}>
-              Internet Computer SNS
-            </Link.Paragraph>
-            . The SNS will be the place where the EKOKE-DAO will be able to
-            discuss and vote on the decisions of the EKOKE-DAO.
-          </Milestone>
-          <Milestone title="EKOKE-DAO is registered" date="Q3">
+          <Milestone title="EKOKE-DAO is registered" date="Q2">
             EKOKE-DAO will be registered in the second quarter. The DAO will be
             registered as a DAO as recognized in the Wyoming state. The DAO will
             be able to buy and sell real-estate and to manage the funds of the
             EKOKE-DAO token holders. The DAO will be able to vote on the
             decisions of the EKOKE-DAO.
           </Milestone>
-          <Milestone title="First real-estate sold on EKOKE-DAO" date="Q4">
+          <Milestone title="First real-estate sold on EKOKE-DAO" date="Q3">
             We expect to sell the first real-estate on the EKOKE-DAO marketplace
-            in the fourth quarter. The real-estate will be sold in USDT and the
+            in the third quarter. The real-estate will be sold in USDT and the
             transaction will be done on the blockchain. The real-estate will be
           </Milestone>
+          <Milestone title="SNS Launch" date="Q4">
+            The SNS will be launched in the fourth quarter. We'll base our DAO
+            on the the{' '}
+            <Link.Paragraph href={'https://nns.ic0.app'}>
+              Internet Computer SNS
+            </Link.Paragraph>
+            . The SNS will be the place where the EKOKE-DAO will be able to
+            discuss and vote on the decisions of the EKOKE-DAO.
+          </Milestone>
         </Container.FlexResponsiveRow>
       </Container.Container>
       <Container.Container>
diff --git a/src/js/components/App/pages/Presale.tsx b/src/js/components/App/pages/Presale.tsx
index eb18ab3..51c28bc 100644
--- a/src/js/components/App/pages/Presale.tsx
+++ b/src/js/components/App/pages/Presale.tsx
@@ -15,6 +15,7 @@ import {
 } from '../../../utils/format';
 import PresaleForm from './Presale/PresaleForm';
 import Info from './Presale/Info';
+import Paragraph from '../../reusable/Paragraph';
 
 const BASE_PRICE = 1_000_000;
 const STEP = 100_000_000_000;
@@ -22,19 +23,30 @@ const STEP = 100_000_000_000;
 const Presale = () => (
   <Container.Container>
     <Heading.H1>EKOKE Presale</Heading.H1>
-    <WaitForMetamask otherwise={<LoginWithMetamask />}>
-      <PresaleBody />
-    </WaitForMetamask>
+    <Container.FlexResponsiveRow className="gap-4 items-start justify-around w-full">
+      <Container.Container className="flex-1">
+        <Container.Card className="!p-0">
+          <Info />
+        </Container.Card>
+      </Container.Container>
+      <Container.Container className="flex-1">
+        <Container.Card>
+          <WaitForMetamask otherwise={<LoginWithMetamask />}>
+            <PresaleBody />
+          </WaitForMetamask>
+        </Container.Card>
+      </Container.Container>
+    </Container.FlexResponsiveRow>
   </Container.Container>
 );
 
 const LoginWithMetamask = () => (
-  <Container.Container>
-    <span className="block text-lg">
-      Please login with Metamask to join the presale.
-    </span>
+  <Container.FlexCols className="items-center">
+    <Paragraph.Default className="!text-center text-lg">
+      Please login with <strong>Metamask</strong> to join the presale.
+    </Paragraph.Default>
     <MetamaskConnect />
-  </Container.Container>
+  </Container.FlexCols>
 );
 
 export interface PresaleStats {
@@ -131,36 +143,10 @@ const PresaleBody = () => {
   }, []);
 
   if (!stats) {
-    return (
-      <Container.FlexResponsiveRow className="gap-4 items-start justify-around">
-        <Container.Card>
-          <Container.Container className="p-8">
-            <Skeleton count={5} />
-          </Container.Container>
-        </Container.Card>
-        <Container.Card>
-          <Container.Container className="p-8">
-            <Skeleton count={5} />
-          </Container.Container>
-        </Container.Card>
-      </Container.FlexResponsiveRow>
-    );
+    return <Skeleton count={5} />;
   }
 
-  return (
-    <Container.FlexResponsiveRow className="gap-4 items-start justify-around w-full">
-      <Container.Container className="flex-1">
-        <Container.Card className="!p-0">
-          <Info />
-        </Container.Card>
-      </Container.Container>
-      <Container.Container className="flex-1">
-        <Container.Card>
-          <PresaleForm {...stats} />
-        </Container.Card>
-      </Container.Container>
-    </Container.FlexResponsiveRow>
-  );
+  return <PresaleForm {...stats} />;
 };
 
 export default Presale;
diff --git a/src/js/components/App/pages/Presale/BuyForm.tsx b/src/js/components/App/pages/Presale/BuyForm.tsx
index ee2f10b..68d4263 100644
--- a/src/js/components/App/pages/Presale/BuyForm.tsx
+++ b/src/js/components/App/pages/Presale/BuyForm.tsx
@@ -148,8 +148,8 @@ const BuyForm = ({ tokenPrice }: Props) => {
 
   return (
     <Container.FlexCols className="text-left gap-4">
-      <Container.Container>
-        <form onSubmit={onBuyTokens}>
+      <form onSubmit={onBuyTokens}>
+        <Container.FlexCols className="justify-center items-center">
           <Heading.H3>Buy EKOKE</Heading.H3>
           <Input.IconInput
             id="presale-buy-form-amount"
@@ -176,11 +176,11 @@ const BuyForm = ({ tokenPrice }: Props) => {
           >
             Buy {amount} EKOKE for {usdToPay.toString()} USDT
           </Button.Primary>
-        </form>
-      </Container.Container>
+        </Container.FlexCols>
+      </form>
       <hr />
       <Container.Container>
-        <span className="text-text">
+        <span className="text-text text-center block">
           You currently have a balance of{' '}
           <strong>
             {convertToHumanReadable(balance, EKOKE_DECIMALS, true)} EKOKE
diff --git a/src/js/components/App/pages/Presale/PresaleForm.tsx b/src/js/components/App/pages/Presale/PresaleForm.tsx
index 0860c5e..06d9820 100644
--- a/src/js/components/App/pages/Presale/PresaleForm.tsx
+++ b/src/js/components/App/pages/Presale/PresaleForm.tsx
@@ -8,7 +8,36 @@ import BuyForm from './BuyForm';
 const BASE_PRICE_USD = 1;
 
 const PresaleForm = (stats: PresaleStats) => {
-  const capToUse = Number(stats.softCap);
+  const softCap = Number(stats.softCap);
+  const usdtRaised = Number(stats.usdtRaised);
+  const tokensSold = Number(stats.tokensSold);
+  const softCapReached = usdtRaised >= softCap;
+  const capToUse = softCapReached ? Number(stats.presaleCap) : softCap;
+  const progressToUse = softCapReached ? tokensSold : usdtRaised;
+
+  const usdtProgress = (
+    <>
+      {stats.usdtRaised.toLocaleString('en-US', {
+        maximumFractionDigits: 0,
+        currency: 'USD',
+        style: 'currency',
+      })}{' '}
+      /{' '}
+      {capToUse.toLocaleString('en-US', {
+        maximumFractionDigits: 0,
+        currency: 'USD',
+        style: 'currency',
+      })}
+    </>
+  );
+
+  const progressBarDescription = softCapReached ? (
+    <strong>
+      {stats.tokensSold}/ {stats.presaleCap} EKOKE - {usdtProgress}
+    </strong>
+  ) : (
+    <strong>{usdtProgress}</strong>
+  );
 
   return (
     <Container.Container>
@@ -28,25 +57,11 @@ const PresaleForm = (stats: PresaleStats) => {
           <Container.FlexRow className="gap-2">
             <ProgressBar
               hideLabel
-              progress={Number(stats.tokensSold)}
+              progress={progressToUse}
               max={capToUse}
               className="h-[64px]"
             />
-            <span className="text-brandRed w-2/6">
-              <strong>
-                {stats.usdtRaised.toLocaleString('en-US', {
-                  maximumFractionDigits: 0,
-                  currency: 'USD',
-                  style: 'currency',
-                })}{' '}
-                /{' '}
-                {capToUse.toLocaleString('en-US', {
-                  maximumFractionDigits: 0,
-                  currency: 'USD',
-                  style: 'currency',
-                })}
-              </strong>
-            </span>
+            <span className="w-2/6">{progressBarDescription}</span>
           </Container.FlexRow>
         </Container.Container>
         <Container.Container className="p-8">
diff --git a/src/js/utils/platform.ts b/src/js/utils/platform.ts
new file mode 100644
index 0000000..26d3889
--- /dev/null
+++ b/src/js/utils/platform.ts
@@ -0,0 +1,8 @@
+export const isMobile = (): boolean =>
+  typeof navigator !== 'undefined' &&
+  navigator &&
+  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent,
+  );
+
+export default isMobile;