Merge pull request #169 from skalenetwork/add-pricing-launch-ts

Add pricing launch timestamp
skalenetwork · Jan 2, 2024 · fa75f18 · fa75f18
2 parents 11ab3d7 + 9afefc8
commit fa75f18
Show file tree

Hide file tree

Showing 14 changed files with 189 additions and 117 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -468,6 +468,8 @@ code {
 }
 
 .chainDetails {
+  max-width: calc(100vw - 32px);
+
   .logo {
     height: 60pt;
     margin: 30px 0;
@@ -491,6 +493,37 @@ code {
       height: 12px;
     }
   }
+
+  .monthInputWrap {
+    border-radius: 25px;
+    background: rgba(41, 255, 148, 0.08);
+    padding-left: 20px;
+  }
+
+  .monthInput {
+    width: 35pt;
+
+    input {
+      font-weight: 500;
+      line-height: 0.9;
+    }
+
+    .MuiInputBase-input {
+      padding: 0 !important;
+    }
+
+    .MuiInput-root::after {
+      display: none !important;
+      border-bottom: none !important;
+    }
+
+    .MuiInput-root::before {
+      display: none !important;
+      border-bottom: none !important;
+    }
+  }
+
+
 }
 
 .titleSection {

diff --git a/src/Router.tsx b/src/Router.tsx
@@ -21,6 +21,7 @@ import TermsModal from './components/TermsModal'
 
 import { getHistoryFromStorage, setHistoryToStorage } from './core/transferHistory'
 import { BRIDGE_PAGES } from './core/constants'
+import { pricingLaunchTsReached } from './core/paymaster'
 
 // import chainsJson from './chainsJson.json';
 
@@ -100,9 +101,11 @@ export default function Router() {
           <Route path="faq" element={<Faq />} />
           <Route path="terms-of-service" element={<Terms />} />
         </Route>
-        <Route path="admin">
-          <Route path=":name" element={<Admin mpc={mpc} />} />
-        </Route>
+        {pricingLaunchTsReached(mpc.config.skaleNetwork) ? (
+          <Route path="admin">
+            <Route path=":name" element={<Admin mpc={mpc} />} />
+          </Route>
+        ) : null}
       </Routes>
     </div>
   )

diff --git a/src/components/ChainAccordion.tsx b/src/components/ChainAccordion.tsx
@@ -54,14 +54,16 @@ import {
   HTTPS_PREFIX,
   WSS_PREFIX
 } from '../core/chain'
+import { pricingLaunchTsReached } from '../core/paymaster'
 
 export default function ChainAccordion(props: {
   schainName: string
   mpc: MetaportCore
   className?: string
 }) {
-  const proxyBase = PROXY_ENDPOINTS[props.mpc.config.skaleNetwork]
-  const explorerBase = BASE_EXPLORER_URLS[props.mpc.config.skaleNetwork]
+  const network = props.mpc.config.skaleNetwork
+  const proxyBase = PROXY_ENDPOINTS[network]
+  const explorerBase = BASE_EXPLORER_URLS[network]
 
   const rpcUrl = getRpcUrl(proxyBase, props.schainName, HTTPS_PREFIX)
   const rpcWssUrl = getRpcWsUrl(proxyBase, props.schainName, WSS_PREFIX)
@@ -190,11 +192,15 @@ export default function ChainAccordion(props: {
           explorerUrl={explorerUrl}
         />
       </AccordionSection>
-      <AccordionLink
-        title="Manage chain"
-        icon={<AdminPanelSettingsRoundedIcon />}
-        url={`/admin/${props.schainName}`}
-      />
+      {pricingLaunchTsReached(network) ? (
+        <AccordionLink
+          title="Manage chain"
+          icon={<AdminPanelSettingsRoundedIcon />}
+          url={`/admin/${props.schainName}`}
+        />
+      ) : (
+        <div></div>
+      )}
     </SkPaper>
   )
 }
diff --git a/src/components/CopySurface.tsx b/src/components/CopySurface.tsx
@@ -59,7 +59,7 @@ export default function CopySurface(props: {
     <div className={props.className}>
       <CopyToClipboard text={props.value} onCopy={handleClick}>
         <Tooltip title={copied ? 'Copied!' : 'Click to copy to clipboard'}>
-          <ButtonBase className="titleSection" style={{ width: '100%' }}>
+          <ButtonBase className="titleSection" style={{ width: '100%', height: '100%' }}>
             <div style={{ textAlign: 'left', overflow: 'auto' }} className={cmn.flexg}>
               <div className={cls(cmn.flex)}>
                 {props.tokenMetadata ? (

diff --git a/src/components/MonthSelector.tsx b/src/components/MonthSelector.tsx
@@ -24,7 +24,8 @@
 import { useState } from 'react'
 import Button from '@mui/material/Button'
 import TextField from '@mui/material/TextField'
-
+import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'
 import { cmn, cls } from '@skalenetwork/metaport'
 
 import { formatTimePeriod } from '../core/timeHelper'
@@ -52,7 +53,7 @@ export default function MonthSelector(props: {
   }
 
   return (
-    <div className={props.className}>
+    <div className={cls(props.className, cmn.flexcv, cmn.flex)}>
       {monthRecommendations
         .filter((x) => x <= props.max)
         .map((month: any, i: number) => (
@@ -69,48 +70,61 @@ export default function MonthSelector(props: {
         ))}
       {openCustom ? (
         <div className={cls('flexi', cmn.flexcv)}>
-          <TextField
-            size="small"
-            variant="standard"
-            type="number"
-            value={textPeriod}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              if (
-                parseFloat(event.target.value) < 0 ||
-                !Number.isInteger(Number(event.target.value))
-              ) {
-                setTextPeriod('')
-                return
-              }
-              setTextPeriod(event.target.value)
-            }}
-            className={cls(cmn.mri10)}
-          />
+          <div className={cls('monthInputWrap', cmn.flex, cmn.flexcv)}>
+            <TextField
+              variant="standard"
+              type="number"
+              value={textPeriod}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                if (
+                  parseFloat(event.target.value) < 0 ||
+                  !Number.isInteger(Number(event.target.value))
+                ) {
+                  setTextPeriod('')
+                  return
+                }
+                setTextPeriod(event.target.value)
+              }}
+              className={cls(cmn.mri10, 'monthInput')}
+              placeholder="0"
+            />
+            <Button
+              variant="text"
+              startIcon={<CheckCircleRoundedIcon />}
+              className={cls('roundBtn', 'outlined')}
+              onClick={() => {
+                if (
+                  textPeriod === undefined ||
+                  textPeriod === '' ||
+                  !Number.isInteger(Number(textPeriod)) ||
+                  Number(textPeriod) <= 0
+                ) {
+                  props.setErrorMsg('Incorrect top-up period')
+                  return
+                }
+                if (props.max < Number(textPeriod)) {
+                  props.setErrorMsg(`Max topup amount: ${formatTimePeriod(props.max, 'month')}`)
+                  return
+                }
+                setOpenCustom(false)
+                if (!monthRecommendations.includes(Number(textPeriod))) {
+                  setCustomPeriod(Number(textPeriod))
+                }
+                props.setTopupPeriod(Number(textPeriod))
+              }}
+            >
+              <p className={cls(cmn.p, cmn.p2)}>Apply</p>
+            </Button>
+          </div>
           <Button
+            startIcon={<CancelOutlinedIcon />}
             variant="text"
-            className={cls(cmn.mri10, 'roundBtn', 'outlined')}
+            className={cls('roundBtn', cmn.mleft5)}
             onClick={() => {
-              if (
-                textPeriod === undefined ||
-                textPeriod === '' ||
-                !Number.isInteger(Number(textPeriod)) ||
-                Number(textPeriod) <= 0
-              ) {
-                props.setErrorMsg('Incorrect top-up period')
-                return
-              }
-              if (props.max < Number(textPeriod)) {
-                props.setErrorMsg(`Max topup amount: ${formatTimePeriod(props.max, 'month')}`)
-                return
-              }
               setOpenCustom(false)
-              if (!monthRecommendations.includes(Number(textPeriod))) {
-                setCustomPeriod(Number(textPeriod))
-              }
-              props.setTopupPeriod(Number(textPeriod))
             }}
           >
-            <p className={cls(cmn.p, cmn.p2)}>Apply</p>
+            <p className={cls(cmn.p, cmn.p2)}>Close</p>
           </Button>
         </div>
       ) : (

diff --git a/src/components/PricingInfo.tsx b/src/components/PricingInfo.tsx
@@ -57,7 +57,8 @@ export default function PricingInfo(props: { info: PaymasterInfo }) {
 
   const elapsedPercentage = calculateElapsedPercentage(
     props.info.schain.paidUntil,
-    props.info.maxReplenishmentPeriod
+    props.info.maxReplenishmentPeriod,
+    props.info.effectiveTimestamp
   )
 
   function getDueDateStatus(days: number): DueDateStatus {
@@ -110,6 +111,11 @@ export default function PricingInfo(props: { info: PaymasterInfo }) {
           value={`${formatTimePeriod(Math.abs(untilDueDateMonths), 'month')} `}
           text={dueDateText}
           color={dueDateStatus}
+          textRi={
+            props.info.effectiveTimestamp
+              ? '// Current ts: ' + formatBigIntTimestampSeconds(props.info.effectiveTimestamp)
+              : ''
+          }
         />
       </SkStack>
     </div>

diff --git a/src/components/SchainDetails.tsx b/src/components/SchainDetails.tsx
@@ -24,7 +24,6 @@
 import { Helmet } from 'react-helmet'
 
 import Button from '@mui/material/Button'
-import Stack from '@mui/material/Stack'
 
 import AddCircleRoundedIcon from '@mui/icons-material/AddCircleRounded'
 import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded'
@@ -43,10 +42,12 @@ import {
   interfaces
 } from '@skalenetwork/metaport'
 
+import SkStack from './SkStack'
 import ChainLogo from './ChainLogo'
 import CopySurface from './CopySurface'
 import ChainAccordion from './ChainAccordion'
 import ChainCategories from './ChainCategories'
+import Tile from './Tile'
 
 import { MAINNET_CHAIN_LOGOS } from '../core/constants'
 import { getRpcUrl, getExplorerUrl, getChainId, HTTPS_PREFIX } from '../core/chain'
@@ -113,63 +114,65 @@ export default function SchainDetails(props: {
           <ChainLogo chainName={props.schainName} logos={MAINNET_CHAIN_LOGOS} />
           <div className={cls(cmn.flex, cmn.flexg)}></div>
         </div>
-
-        <Stack spacing={1}>
-          <div className={cls('titleSection')}>
-            <h2 className={cls(cmn.nom)}>{chainAlias}</h2>
-            <p className={cls(cmn.mtop5, cmn.p, cmn.p3, cmn.pSec)}>{chainDescription}</p>
-          </div>
-          <Stack spacing={1} direction={{ xs: 'column', sm: 'row' }} useFlexGap flexWrap="wrap">
-            <div className={cls('titleSection')}>
-              <Stack spacing={1} direction={{ xs: 'column', sm: 'row' }} useFlexGap flexWrap="wrap">
-                <div className={cls(cmn.mleft5)}>
+        <SkStack>
+          <Tile
+            grow
+            children={
+              <div>
+                <h2 className={cls(cmn.nom)}>{chainAlias}</h2>
+                <p className={cls(cmn.mtop5, cmn.p, cmn.p3, cmn.pSec)}>{chainDescription}</p>
+              </div>
+            }
+          />
+        </SkStack>
+        <SkStack className={cmn.mtop10}>
+          <Tile
+            children={
+              <SkStack>
+                <div>
                   <a target="_blank" rel="noreferrer" href={explorerUrl} className="undec">
                     <Button
-                      size="large"
+                      size="medium"
                       className={styles.btnAction}
                       startIcon={<WidgetsRoundedIcon />}
                     >
                       Block Explorer
                     </Button>
                   </a>
                 </div>
-                <div className={cls(cmn.mleft20)}>
+                <div>
                   <Button
                     startIcon={<AddCircleRoundedIcon />}
-                    size="large"
+                    size="medium"
                     className={styles.btnAction}
                     onClick={addNetwork}
                   >
                     Add network
                   </Button>
                 </div>
-                {props.chainMeta?.url ? (
-                  <div className={cls(cmn.mleft20)}>
+                <div>
+                  {props.chainMeta?.url ? (
                     <a
                       target="_blank"
                       rel="noreferrer"
                       href={props.chainMeta.url}
                       className="undec"
                     >
                       <Button
-                        size="large"
+                        size="medium"
                         className={styles.btnAction}
                         startIcon={<ArrowOutwardRoundedIcon />}
                       >
                         Open website
                       </Button>
                     </a>
-                  </div>
-                ) : null}
-              </Stack>
-            </div>
-            <CopySurface
-              className={cls(cmn.flexg)}
-              title="Chain ID"
-              value={chainIdInt.toString()}
-            />
-          </Stack>
-        </Stack>
+                  ) : null}
+                </div>
+              </SkStack>
+            }
+          />
+          <CopySurface className={cls(cmn.flexg)} title="Chain ID" value={chainIdInt.toString()} />
+        </SkStack>
       </SkPaper>
       <ChainAccordion mpc={props.mpc} schainName={props.schainName} />
     </div>

diff --git a/src/components/SkStack.tsx b/src/components/SkStack.tsx
@@ -30,6 +30,7 @@ export default function SkStack(props: {
 }) {
   return (
     <Stack
+      style={{ alignItems: 'stretch' }}
       spacing={1}
       direction={{ xs: 'column', md: 'row' }}
       useFlexGap