From 86d5d9eeabf14ad47b2d5ab700459a5adcc26eba Mon Sep 17 00:00:00 2001
From: Dmytro <dmitry.tkk@gmail.com>
Date: Thu, 21 Dec 2023 13:27:27 +0000
Subject: [PATCH 1/4] Add pricing launch timestamp

---
 src/Router.tsx                    |  9 ++++++---
 src/components/ChainAccordion.tsx | 20 +++++++++++++-------
 src/core/paymaster.ts             |  9 +++++++++
 src/data/paymaster.ts             | 12 ++++++++----
 4 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/src/Router.tsx b/src/Router.tsx
index 2e1f5e6..bc0f985 100644
--- 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
index 09446f7..3ce0804 100644
--- 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/core/paymaster.ts b/src/core/paymaster.ts
index e916a1b..c2b22f8 100644
--- a/src/core/paymaster.ts
+++ b/src/core/paymaster.ts
@@ -23,6 +23,7 @@
 import { Contract, id, InterfaceAbi } from 'ethers'
 import { MetaportCore, interfaces } from '@skalenetwork/metaport'
 import PAYMASTER_INFO from '../data/paymaster'
+import { getCurrentTsBigInt } from './timeHelper'
 
 export interface PaymasterInfo {
   maxReplenishmentPeriod: bigint
@@ -61,6 +62,10 @@ export function getPaymasterAddress(skaleNetwork: interfaces.SkaleNetwork): stri
   return PAYMASTER_INFO.networks[skaleNetwork].address
 }
 
+export function getPaymasterLaunchTs(skaleNetwork: interfaces.SkaleNetwork): bigint {
+  return BigInt(PAYMASTER_INFO.networks[skaleNetwork].launchTs)
+}
+
 export function getPaymasterAbi(): InterfaceAbi {
   return PAYMASTER_INFO.abi
 }
@@ -73,6 +78,10 @@ export function initPaymaster(mpc: MetaportCore): Contract {
   return new Contract(paymasterAddress, getPaymasterAbi(), provider)
 }
 
+export function pricingLaunchTsReached(skaleNetwork: interfaces.SkaleNetwork): boolean {
+  return getPaymasterLaunchTs(skaleNetwork) < getCurrentTsBigInt()
+}
+
 export async function getPaymasterInfo(
   paymaster: Contract,
   targetChainName: string,
diff --git a/src/data/paymaster.ts b/src/data/paymaster.ts
index 2a55115..0c675af 100644
--- a/src/data/paymaster.ts
+++ b/src/data/paymaster.ts
@@ -2,19 +2,23 @@ export default {
   networks: {
     mainnet: {
       chain: 'elated-tan-skat',
-      address: '0x'
+      address: '0x',
+      launchTs: '0'
     },
     staging: {
       chain: 'staging-perfect-parallel-gacrux',
-      address: '0xeF18D694e7659C1Ed5dE7e83E72e871b32f3fE69'
+      address: '0xeF18D694e7659C1Ed5dE7e83E72e871b32f3fE69',
+      launchTs: '0'
     },
     legacy: {
       chain: 'skale-innocent-nasty',
-      address: '0xCa1B0A6236BBA2b30F7260863b56209a97351853'
+      address: '0xCa1B0A6236BBA2b30F7260863b56209a97351853',
+      launchTs: '1708521648'
     },
     regression: {
       chain: '',
-      address: '0x'
+      address: '0x',
+      launchTs: '0'
     }
   },
   abi: [

From 0180714991ad1a5f743123b7336288144a2318be Mon Sep 17 00:00:00 2001
From: Dmytro <dmitry.tkk@gmail.com>
Date: Thu, 28 Dec 2023 18:26:58 +0000
Subject: [PATCH 2/4] Update schain overview page css, fix elapsed time func

---
 src/components/CopySurface.tsx   |  2 +-
 src/components/PricingInfo.tsx   |  8 +++++-
 src/components/SchainDetails.tsx | 46 +++++++++++++++-----------------
 src/components/SkStack.tsx       |  1 +
 src/components/Tile.tsx          | 36 +++++++++++++------------
 src/core/timeHelper.ts           | 11 ++++----
 src/data/paymaster.ts            |  6 ++---
 src/pages/Schain.tsx             | 10 +------
 8 files changed, 59 insertions(+), 61 deletions(-)

diff --git a/src/components/CopySurface.tsx b/src/components/CopySurface.tsx
index 8a1a406..6d80ae1 100644
--- 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/PricingInfo.tsx b/src/components/PricingInfo.tsx
index 83ee25e..8c430cb 100644
--- 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
index 30ac9b8..398ca9c 100644
--- 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,19 +114,20 @@ 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}>
+        <SkStack>
           <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>
+        <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 />}
                     >
@@ -133,18 +135,18 @@ export default function SchainDetails(props: {
                     </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"
@@ -152,24 +154,20 @@ export default function SchainDetails(props: {
                       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
index e862cf8..5ff9d0c 100644
--- 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
diff --git a/src/components/Tile.tsx b/src/components/Tile.tsx
index 3723393..947cc75 100644
--- a/src/components/Tile.tsx
+++ b/src/components/Tile.tsx
@@ -29,7 +29,7 @@ import { cmn, cls, styles } from '@skalenetwork/metaport'
 import { DueDateStatus } from '../core/paymaster'
 
 export default function Tile(props: {
-  text: string
+  text?: string
   value?: string
   textRi?: string
   icon?: ReactElement
@@ -44,24 +44,26 @@ export default function Tile(props: {
   const color = props.color ? theme.palette[props.color].main : 'rgba(0, 0, 0, 0.6)'
   return (
     <div
-      className={cls(props.className, styles.fullHeight, 'titleSection', [cmn.flexg, props.grow])}
+      className={cls(props.className, styles.fullHefight, 'titleSection', [cmn.flexg, props.grow])}
       style={{ background: color }}
     >
-      <div
-        className={cls(
-          cmn.flex,
-          cmn.flexcv,
-          cmn.mbott5,
-          [cmn.pSec, !props.color],
-          ['blackP', props.color]
-        )}
-      >
-        {props.icon ? (
-          <div className={cls(cmn.mri5, cmn.flex, styles.chainIconxs)}>{props.icon}</div>
-        ) : null}
-        <p className={cls(cmn.p, cmn.p4, cmn.flex, cmn.flexg)}>{props.text}</p>
-        <p className={cls(cmn.p, cmn.p4, cmn.flex, cmn.mleft5)}>{props.textRi}</p>
-      </div>
+      {props.text ? (
+        <div
+          className={cls(
+            cmn.flex,
+            cmn.flexcv,
+            cmn.mbott5,
+            [cmn.pSec, !props.color],
+            ['blackP', props.color]
+          )}
+        >
+          {props.icon ? (
+            <div className={cls(cmn.mri5, cmn.flex, styles.chainIconxs)}>{props.icon}</div>
+          ) : null}
+          <p className={cls(cmn.p, cmn.p4, cmn.flex, cmn.flexg)}>{props.text}</p>
+          <p className={cls(cmn.p, cmn.p4, cmn.flex, cmn.mleft5)}>{props.textRi}</p>
+        </div>
+      ) : null}
       <div className={cls(cmn.flex, cmn.flexcv)}>
         {props.value ? (
           <p
diff --git a/src/core/timeHelper.ts b/src/core/timeHelper.ts
index 52359e6..57cf6b2 100644
--- a/src/core/timeHelper.ts
+++ b/src/core/timeHelper.ts
@@ -31,10 +31,8 @@ export function formatBigIntTimestampSeconds(timestamp: bigint): string {
 }
 
 export function daysBetweenTimestamps(from: bigint, to: bigint): number {
-  const fromDate = new Date(Number(from * 1000n))
-  const toDate = new Date(Number(to * 1000n))
-  const diffInMs = fromDate.getTime() - toDate.getTime()
-  const diffInDays = diffInMs / (1000 * 60 * 60 * 24)
+  const diffInSec = Number(from - to)
+  const diffInDays = diffInSec / (60 * 60 * 24)
   return Math.round(diffInDays) * -1
 }
 
@@ -58,16 +56,17 @@ export function monthsBetweenNowAndTimestamp(timestamp: bigint, customCurrentTs?
 
 export function calculateElapsedPercentage(
   tsInSeconds: bigint,
-  maxReplenishmentPeriod: bigint
+  maxReplenishmentPeriod: bigint,
+  customCurrentTs?: bigint
 ): number {
   const tsDate = new Date(Number(tsInSeconds * 1000n))
   const futureTime = new Date()
   futureTime.setMonth(futureTime.getMonth() + Number(maxReplenishmentPeriod))
 
   const currentTime = new Date()
+  const currentTimeMs = customCurrentTs ? Number(customCurrentTs) * 1000 : currentTime.getTime()
 
   const tsTimeMs = tsDate.getTime()
-  const currentTimeMs = currentTime.getTime()
   const futureTimeMs = futureTime.getTime()
 
   const totalDuration = futureTimeMs - currentTimeMs
diff --git a/src/data/paymaster.ts b/src/data/paymaster.ts
index 0c675af..77f2763 100644
--- a/src/data/paymaster.ts
+++ b/src/data/paymaster.ts
@@ -11,9 +11,9 @@ export default {
       launchTs: '0'
     },
     legacy: {
-      chain: 'skale-innocent-nasty',
-      address: '0xCa1B0A6236BBA2b30F7260863b56209a97351853',
-      launchTs: '1708521648'
+      chain: 'international-villainous-zaurak',
+      address: '0x1f55e3Bce4B973dcC8540188f8F2038DC89891E6',
+      launchTs: '0'
     },
     regression: {
       chain: '',
diff --git a/src/pages/Schain.tsx b/src/pages/Schain.tsx
index d52b4ab..1c1d576 100644
--- a/src/pages/Schain.tsx
+++ b/src/pages/Schain.tsx
@@ -25,7 +25,6 @@ import { useEffect } from 'react'
 
 import { useParams } from 'react-router-dom'
 import Container from '@mui/material/Container'
-import Stack from '@mui/material/Stack'
 import SchainDetails from '../components/SchainDetails'
 import CircularProgress from '@mui/material/CircularProgress'
 
@@ -75,14 +74,7 @@ export default function Schain(props: { loadSchains: any; schains: any[]; mpc: M
 
   return (
     <Container maxWidth="md">
-      <Stack spacing={0}>
-        <SchainDetails
-          schainName={name}
-          chain={chain}
-          chainMeta={chainsMeta[name]}
-          mpc={props.mpc}
-        />
-      </Stack>
+      <SchainDetails schainName={name} chain={chain} chainMeta={chainsMeta[name]} mpc={props.mpc} />
     </Container>
   )
 }

From 71c1b44def2224d70374f33f4265bd4ab2a55cab Mon Sep 17 00:00:00 2001
From: Dmytro <dmitry.tkk@gmail.com>
Date: Tue, 2 Jan 2024 17:33:16 +0000
Subject: [PATCH 3/4] Minor CSS changes

---
 src/App.scss                     |  2 ++
 src/components/SchainDetails.tsx | 11 +++++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index d92d4c5..f6b2e0a 100644
--- 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;
diff --git a/src/components/SchainDetails.tsx b/src/components/SchainDetails.tsx
index 398ca9c..0000722 100644
--- a/src/components/SchainDetails.tsx
+++ b/src/components/SchainDetails.tsx
@@ -115,10 +115,13 @@ export default function SchainDetails(props: {
           <div className={cls(cmn.flex, cmn.flexg)}></div>
         </div>
         <SkStack>
-          <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>
+          <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

From 9afefc8cd0f19483580dce135b4936014c302b54 Mon Sep 17 00:00:00 2001
From: Dmytro <dmitry.tkk@gmail.com>
Date: Tue, 2 Jan 2024 19:39:10 +0000
Subject: [PATCH 4/4] Update month selector in sChain pricing

---
 src/App.scss                     | 31 +++++++++++
 src/components/MonthSelector.tsx | 90 ++++++++++++++++++--------------
 src/components/SchainDetails.tsx | 10 ++--
 src/pages/Admin.tsx              |  4 +-
 4 files changed, 91 insertions(+), 44 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index f6b2e0a..dc9ca4a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -493,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/components/MonthSelector.tsx b/src/components/MonthSelector.tsx
index d05f35c..b2990d2 100644
--- 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/SchainDetails.tsx b/src/components/SchainDetails.tsx
index 0000722..3fd7e58 100644
--- a/src/components/SchainDetails.tsx
+++ b/src/components/SchainDetails.tsx
@@ -117,10 +117,12 @@ export default function SchainDetails(props: {
         <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>}
+            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}>
diff --git a/src/pages/Admin.tsx b/src/pages/Admin.tsx
index 4cd322f..d263264 100644
--- a/src/pages/Admin.tsx
+++ b/src/pages/Admin.tsx
@@ -41,8 +41,8 @@ export default function Admin(props: { mpc: MetaportCore }) {
   const alias = getChainAlias(network, name)
 
   return (
-    <Container maxWidth="md" className="chainDetails">
-      <SkPaper gray className={cls(cmn.mtop10)}>
+    <Container maxWidth="md">
+      <SkPaper gray className={cls(cmn.mtop10, 'chainDetails')}>
         <div className={cls(cmn.flex, cmn.flexcv)}>
           <div className={cls(cmn.flex, cmn.flexcv, 'titleBadge')}>
             <div className={cmn.flex}>