Merge pull request #204 from DistributedCollective/development

temp changes for mainnet
DistributedCollective · Jan 15, 2021 · 8a81853 · 8a81853 · vercel · Jan 15, 2021
2 parents 9eccac4 + b2414c3
commit 8a81853
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 44 deletions.
diff --git a/src/app/containers/SalesPage/hooks/useSaleEndTime.ts b/src/app/containers/SalesPage/hooks/useSaleEndTime.ts
@@ -1,13 +1,20 @@
 import { useEffect, useState } from 'react';
 import moment from 'moment';
 import { useCacheCallWithValue } from '../../../hooks/useCacheCallWithValue';
+import { currentNetwork } from '../../../../utils/classifiers';
 
 // 12.30 GTM, 15th Jan
 const DATE_FORMAT = 'HH:mm [GMT], Do MMM';
 
 export function useSaleEndTime() {
   const [endDate, setEndDate] = useState(
-    moment('2021-01-15 15:30+0').utc(false).toDate(),
+    moment(
+      currentNetwork === 'testnet'
+        ? '2021-01-15 15:30+0'
+        : '2021-01-21 15:30+0',
+    )
+      .utc(false)
+      .toDate(),
   );
   const [endDateString, setEndDateString] = useState(
     moment(endDate).format(DATE_FORMAT),

diff --git a/src/app/containers/SalesPage/index.tsx b/src/app/containers/SalesPage/index.tsx
@@ -126,20 +126,24 @@ export function SalesPage() {
           </div>
         )}
 
-        {!isConnected ? (
-          <Screen1 />
-        ) : (
+        {currentNetwork === 'testnet' && (
           <>
-            {Number(state.maxDeposit) === 0 ? (
-              <EnterCodeLanding />
+            {!isConnected ? (
+              <Screen1 />
             ) : (
               <>
-                {state.step === 1 && <Screen1 />}
-                {state.step === 2 && <Screen2 />}
-                {state.step === 3 && <Screen3 />}
-                {state.step === 4 && <Screen4 />}
-                {state.step === 5 && <Screen5 />}
-                {state.step === 6 && <Screen6 />}
+                {Number(state.maxDeposit) === 0 ? (
+                  <EnterCodeLanding />
+                ) : (
+                  <>
+                    {state.step === 1 && <Screen1 />}
+                    {state.step === 2 && <Screen2 />}
+                    {state.step === 3 && <Screen3 />}
+                    {state.step === 4 && <Screen4 />}
+                    {state.step === 5 && <Screen5 />}
+                    {state.step === 6 && <Screen6 />}
+                  </>
+                )}
               </>
             )}
           </>

diff --git a/src/app/containers/SalesPage/screen1/index.tsx b/src/app/containers/SalesPage/screen1/index.tsx
@@ -11,7 +11,7 @@ import { useDispatch } from 'react-redux';
 const StyledContent = styled.div`
   height: 620px;
   background: var(--sales-background);
-  max-width: 1200px;
+  max-width: 1235px;
   margin: 40px auto;
   border-radius: 20px;
   display: flex;

diff --git a/src/app/containers/SalesPage/screen2/index.tsx b/src/app/containers/SalesPage/screen2/index.tsx
@@ -83,7 +83,7 @@ export default function Screen2() {
 
   return (
     <StyledContent>
-      <p className="content-header">Welcome to the SOV Genesis Sale</p>
+      <p className="content-header">Welcome to the SOV* Genesis Sale</p>
       <div className="d-flex flex-column align-items-center flex-lg-row px-3 pb-5">
         <div className="left-box position-relative mr-lg-5">
           <div className="mb-3 mr-2 ml-2 position-relative d-inline-block">

diff --git a/src/app/containers/SalesPage/screen4/index.tsx b/src/app/containers/SalesPage/screen4/index.tsx
@@ -11,32 +11,54 @@ import SOVCalculator from 'app/components/SOVCalculator';
 
 const StyledContent = styled.div`
   background: var(--sales-background);
-  max-width: 1200px;
+  max-width: 1235px;
   margin: 40px auto;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   position: relative;
+  .tab-item button {
+    font-size: 20px;
+  }
   .tab-content {
     background: black;
     min-height: 560px;
     height: 100%;
     position: relative;
-    padding-left: 15px;
-    padding-right: 15px;
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
     padding-bottom: 25px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
     .content-header {
       font-size: 28px;
       text-align: center;
       margin-top: 1em;
+      margin-bottom: 1.4rem;
+    }
+    .support-text {
+      font-size: 14px;
+      margin-top: 30px;
     }
     a {
-      color: var(--gold) !important;
+      color: var(--gold);
       font-weight: normal;
       font-size: 14px;
     }
+    p {
+      margin-bottom: 0.4rem;
+    }
+    ul {
+      padding: 0 18px;
+      margin: 0 0 3px 0;
+      li {
+        font-size: 16px;
+        font-weight: 300;
+        span {
+          font-size: 14px;
+        }
+      }
+    }
   }
 `;
 
@@ -47,7 +69,7 @@ export default function Screen4() {
   return (
     <StyledContent>
       <div className="d-flex flex-row">
-        <div>
+        <div className="tab-item">
           <Tab
             text={'BTC'}
             active={activeTrades}
@@ -56,7 +78,7 @@ export default function Screen4() {
             <img src={BTCLogo} alt="BTC" /> BTC
           </Tab>
         </div>
-        <div>
+        <div className="tab-item">
           <Tab
             text={'RBTC'}
             active={!activeTrades}

diff --git a/src/app/containers/SalesPage/screen5/index.tsx b/src/app/containers/SalesPage/screen5/index.tsx
@@ -6,7 +6,7 @@ import { actions } from '../slice';
 
 const StyledContent = styled.div`
   background: var(--sales-background);
-  max-width: 1200px;
+  max-width: 1235px;
   min-height: 620px;
   margin: 40px auto;
   border-radius: 20px;

diff --git a/src/app/containers/SendRBTC/index.tsx b/src/app/containers/SendRBTC/index.tsx
@@ -38,12 +38,16 @@ interface StyledProps {
 
 const Wrapper = styled.div`
   width: 320px;
+  margin-right: 10px;
   ${(props: StyledProps) =>
     props.background &&
     css`
       background: ${props.background};
     `}
   border-radius: 10px;
+  .rbtc-text {
+    font-size: 18px;
+  }
   .header {
     display: flex;
     justify-content: center;
@@ -60,25 +64,54 @@ const Wrapper = styled.div`
   .gas-fee {
     border-bottom: 1px solid grey;
     border-top: 1px solid grey;
-    padding: 1em 0;
+    padding: 0.9em 0 0.7rem;
     justify-content: center;
     text-align: center;
     font-size: 14px;
+    margin-top: 6px;
+    font-family: 'Work Sans';
+    letter-spacing: 0;
+    font-weight: 300;
+    span {
+      padding-left: 10px;
+    }
   }
   .rbtc-input {
     background: white;
     text-align: center;
     border-radius: 8px;
     padding: 10px;
     color: black;
+    height: 50px;
+    font-size: 22px;
+    font-family: 'Work Sans';
+    font-weight: 300;
+    margin-bottom: 4px;
   }
   .sov-res {
     text-align: center;
     background: #707070;
     border-radius: 8px;
-    padding: 10px;
+    padding: 9px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-size: 20px;
+    font-weight: 600;
     margin: 10px 0 20px 0;
+    span {
+      font-size: 14px;
+      font-weight: 100;
+      padding-left: 6px;
+    }
+  }
+  .font-sale-sm {
+    font-size: 14px;
+    font-weight: 100;
+    a {
+      color: white !important;
+      font-weight: 100 !important;
+    }
   }
   .content {
     padding: 20px;
@@ -117,21 +150,25 @@ const StyledButton = styled.button.attrs(_ => ({
   type: 'button',
 }))`
   border: none;
-  background: rgb(78, 205, 196);
+  background: #4ecdc4;
   color: white;
   height: 48px;
   text-align: center;
+  font-size: 24px;
+  letter-spacing: 0;
+  font-family: 'Work Sans';
+  transition: background 0.3s;
   ${media.xl`
-    height: 50px;
+    height: 60px;
     padding: 2px 20px;
     border-radius: 8px;
     font-weight: 600;
-  
+
     &:hover, &:focus {
-      background: rgba(78, 205, 196, 0.75) !important;
+      background: rgba(78, 205, 196, 0.9) !important;
     }
     &:active:hover {
-      background: rgb(78, 205, 196) !important;
+      background: #4ECDC4 !important;
     }
     `}
   ${props =>
@@ -292,12 +329,14 @@ export default function SendRBTC() {
   return !showTx ? (
     <div>
       <p className="content-header">Buy SOV with (r)BTC</p>
-      <div className="row">
-        <div className="col-md-6">
+      <div className="row justify-content-around">
+        <div className="col-md-5">
           <div className="mb-4">
             <p className="mb-2">Deposit limits:</p>
-            <li>MIN: {weiToNumberFormat(minDeposit, 8)} BTC</li>
-            <li>MAX: {weiToNumberFormat(maxDeposit, 8)} BTC</li>
+            <ul>
+              <li>MIN: {weiToNumberFormat(minDeposit, 8)} BTC</li>
+              <li>MAX: {weiToNumberFormat(maxDeposit, 8)} BTC</li>
+            </ul>
             <a
               href="/sales#"
               className="d-block"
@@ -322,47 +361,57 @@ export default function SendRBTC() {
           <div>
             <p>Instructions: </p>
             <div>
-              <li>Buy SOV with (r)BTC in your engaged wallet</li>
-              <li>Please allow up to 5 mins for the transaction to process</li>
+              <ul>
+                <li className="mb-2">
+                  <span>Buy SOV with (r)BTC in your engaged wallet</span>
+                </li>
+                <li className="mb-4">
+                  <span>
+                    Please allow up to 5 mins for the transaction to process
+                  </span>
+                </li>
+              </ul>
             </div>
 
-            <p>
+            <p className="support-text mt-1">
               For support please join us on{' '}
               <a href="https://discord.com/invite/J22WS6z" target="_new">
                 discord.com/invite/J22WS6z
               </a>
             </p>
           </div>
         </div>
-        <div className="col-md-6 d-flex justify-content-end">
+        <div className="col-md-4 d-flex justify-content-end">
           <Wrapper className="d-flex flex-column">
-            <p className="mb-1">Send (r)BTC:</p>
+            <p className="mb-2 rbtc-text">Send (r)BTC:</p>
             <input
               className="rbtc-input"
               type="text"
               placeholder="0.00000000"
               value={amount}
               onChange={e => setAmount(handleNumber(e.target.value))}
             />
-            <p className="text-center font-sale-sm mt-3">
+            <p className="text-center font-sale-sm mt-2">
               Available Balance:{' '}
               <a href="/sales#" onClick={addAllBalance}>
                 {weiToNumberFormat(balance, 8)}
               </a>{' '}
               (r)BTC
             </p>
             <p className="gas-fee">
-              Estimated Gas Fee*: ≈ {weiToNumberFormat(gasEstimation, 8)} (r)BTC
+              Estimated Gas Fee*:{' '}
+              <span>≈ {weiToNumberFormat(gasEstimation, 8)} (r)BTC</span>
             </p>
-            <p className="text-center">
+            <p className="text-center mt-1 mb-2">
               <Icon icon="arrow-down" iconSize={35} />
             </p>
-            <p className="mb-0">Receive SOV:</p>
+            <p className="mb-0 rbtc-text">Receive SOV:</p>
             <LoadableValue
               loading={loading}
               value={
-                <p className="sov-res">
-                  {toNumberFormat(sovToReceive)} ≈ {numberToUSD(price, 2)}
+                <p className="sov-res mb-4">
+                  {toNumberFormat(sovToReceive)}{' '}
+                  <span>≈ {numberToUSD(price, 2)}</span>
                 </p>
               }
             />
@@ -371,7 +420,11 @@ export default function SendRBTC() {
               {...tx}
               displayAbsolute={false}
             />
-            <StyledButton onClick={handleBuy} disabled={!canSubmit}>
+            <StyledButton
+              className="mt-1"
+              onClick={handleBuy}
+              disabled={!canSubmit}
+            >
               BUY SOV
             </StyledButton>
           </Wrapper>