Update home page, add admin area

src/App.scss

@@ -230,7 +230,7 @@ body::-webkit-scrollbar {
 }
 
 .br__tile {
-  box-shadow: 0px -4px 6px rgba(255, 255, 255, 0.05);
+  // box-shadow: 0px -4px 6px rgba(255, 255, 255, 0.05);
   transform-style: preserve-3d;
   transition: all 0.3s ease;
 }
@@ -349,7 +349,7 @@ body::-webkit-scrollbar {
   background: rgba(0, 0, 0, .506) !important;
   border: 1px solid hsla(0, 0%, 51%, .1) !important;
   text-transform: none !important;
-  color: white !important;
+  color: #ffffffe6 !important;
   padding: 6px 10px 6px 12px !important;
   font-size: 0.6rem !important;
   min-width: 55px;
@@ -472,7 +472,7 @@ code {
 }
 
 .titleSection {
-  background: rgba(0, 0, 0, 0.6) !important;
+  background: rgba(0, 0, 0, 0.6);
   border-radius: 25px;
   padding: 20px;
 }
@@ -499,7 +499,7 @@ button:focus {
 .startCardText {
   margin: 120px 10px 10px 10px;
   background: #00000066;
-  backdrop-filter: blur(15px) brightness(0.6);
+  backdrop-filter: blur(10px) brightness(0.8);
   border-radius: 25px;
   padding: 10px 15px;
 }
@@ -531,4 +531,14 @@ button:focus {
 
 .startCardportfolio {
   background-image: url(/portfolio.png);
+}
+
+
+.blackP {
+  color: #000000 
+}
+
+.divider {
+  border-bottom: 1px $border-color solid;
+  padding-bottom: 10px;
 }

src/Router.tsx

@@ -5,18 +5,18 @@ import { Helmet } from 'react-helmet'
 import { useLocation, Routes, Route } from 'react-router-dom'
 import { useMetaportStore, PROXY_ENDPOINTS, type MetaportState } from '@skalenetwork/metaport'
 
-import Bridge from './components/Bridge'
-import Faq from './components/Faq'
-import Terms from './components/Terms'
-import Network from './components/Chains'
+import Bridge from './pages/Bridge'
+import Faq from './pages/Faq'
+import Terms from './pages/Terms'
+import Network from './pages/Chains'
 import Schain from './components/Schain'
-import Stats from './components/Stats'
-import Apps from './components/Apps'
+import Stats from './pages/Stats'
+import Apps from './pages/Apps'
 import App from './components/App'
-import History from './components/History'
-import Portfolio from './components/Portfolio'
-import Admin from './components/Admin'
-import Start from './components/Start'
+import History from './pages/History'
+import Portfolio from './pages/Portfolio'
+import Admin from './pages/Admin'
+import Start from './pages/Start'
 import TermsModal from './components/TermsModal'
 
 import { getHistoryFromStorage, setHistoryToStorage } from './core/transferHistory'

src/components/AccordionSection.tsx

@@ -41,7 +41,7 @@ export default function AccordionSection(props: {
   className?: string
 }) {
   return (
-    <div className={props.className}>
+    <div className={cls(props.className)}>
       <ButtonBase
         onClick={() => props.handleChange(props.panel)}
         className={cls(cmn.fullWidth, cmn.flex, cmn.pleft, cmn.bordRad)}

src/components/ChainAccordion.tsx

@@ -191,7 +191,7 @@ export default function ChainAccordion(props: {
         />
       </AccordionSection>
       <AccordionLink
-        title="Admin area"
+        title="Manage chain"
         icon={<AdminPanelSettingsRoundedIcon />}
         url={`/admin/${props.schainName}`}
       />

src/components/FaqAccordion/FaqAccordion.tsx → src/components/FaqAccordion.tsx

@@ -24,8 +24,8 @@
 import { useState } from 'react'
 import { cls, cmn, SkPaper } from '@skalenetwork/metaport'
 
-import AccordionSection from '../AccordionSection'
-import { FAQ } from '../../core/constants'
+import AccordionSection from './AccordionSection'
+import { FAQ } from '../core/constants'
 
 export default function FaqAccordion() {
   const [expanded, setExpanded] = useState<string | false>(false)

src/components/MonthSlider.tsx

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * SKALE portal
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @file LinkSurface.tsx
+ * @copyright SKALE Labs 2023-Present
+ */
+
+import Box from '@mui/material/Box'
+import Slider from '@mui/material/Slider'
+
+const marks = [
+  {
+    value: 1,
+    label: '1m'
+  },
+  {
+    value: 3,
+    label: '3m'
+  },
+  {
+    value: 6,
+    label: '6m'
+  },
+  {
+    value: 9,
+    label: '9m'
+  },
+  {
+    value: 12,
+    label: '12m'
+  }
+]
+
+function valuetext(value: number) {
+  return `${value}°C`
+}
+
+export default function DiscreteSliderMarks() {
+  return (
+    <Box>
+      <Slider
+        max={12}
+        aria-label="Custom marks"
+        defaultValue={3}
+        getAriaValueText={valuetext}
+        step={1}
+        valueLabelDisplay="auto"
+        marks={marks}
+      />
+    </Box>
+  )
+}

src/components/MoreMenu/MoreMenu.tsx → src/components/MoreMenu.tsx

@@ -38,8 +38,8 @@ import InventoryOutlinedIcon from '@mui/icons-material/InventoryOutlined'
 
 import { cls, styles, cmn } from '@skalenetwork/metaport'
 
-import { DISCORD_INVITE_URL } from '../../core/constants'
-import discordLogo from '../../assets/discord-mark-white.svg'
+import { DISCORD_INVITE_URL } from '../core/constants'
+import discordLogo from '../assets/discord-mark-white.svg'
 
 export default function MoreMenu() {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

src/components/PageCard.tsx

@@ -32,7 +32,7 @@ export default function PageCard(props: { name: string; icon: any; description:
           <div className={cls('br__tile pageCard startCardBg ' + `startCard${props.name}`)}>
             <div className="startCardText">
               <div className={cls(cmn.flex, cmn.flexg, cmn.flexcv)}>
-                <div className={cls(cmn.mri5, cmn.flex, cmn.flexcv)}>{props.icon}</div>
+                {/* <div className={cls(cmn.mri5, cmn.flex, cmn.flexcv)}>{props.icon}</div> */}
                 <p
                   className={cls(cmn.cap, cmn.nom, cmn.pPrim, cmn.p)}
                   style={{ fontSize: '1.5rem', fontWeight: 700 }}

src/components/SchainDetails.tsx

@@ -24,6 +24,8 @@
 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'
 import WidgetsRoundedIcon from '@mui/icons-material/WidgetsRounded'
@@ -111,55 +113,63 @@ export default function SchainDetails(props: {
           <ChainLogo chainName={props.schainName} logos={MAINNET_CHAIN_LOGOS} />
           <div className={cls(cmn.flex, cmn.flexg)}></div>
         </div>
-        <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>
-        <div className={cls(cmn.flex, cmn.flexcv, cmn.flexw)}>
-          <div className={cls('titleSection', cmn.mtop10)}>
-            <div className={cls(cmn.flex, cmn.flexw)}>
-              <div className={cls(cmn.mleft5)}>
-                <a target="_blank" rel="noreferrer" href={explorerUrl} className="undec">
-                  <Button
-                    size="large"
-                    className={styles.btnAction}
-                    startIcon={<WidgetsRoundedIcon />}
-                  >
-                    Block Explorer
-                  </Button>
-                </a>
-              </div>
-              <div className={cls(cmn.mleft20)}>
-                <Button
-                  startIcon={<AddCircleRoundedIcon />}
-                  size="large"
-                  className={styles.btnAction}
-                  onClick={addNetwork}
-                >
-                  Add network
-                </Button>
-              </div>
-              {props.chainMeta?.url ? (
-                <div className={cls(cmn.mleft20)}>
-                  <a target="_blank" rel="noreferrer" href={props.chainMeta.url} className="undec">
+
+        <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)}>
+                  <a target="_blank" rel="noreferrer" href={explorerUrl} className="undec">
                     <Button
                       size="large"
                       className={styles.btnAction}
-                      startIcon={<ArrowOutwardRoundedIcon />}
+                      startIcon={<WidgetsRoundedIcon />}
                     >
-                      Open website
+                      Block Explorer
                     </Button>
                   </a>
                 </div>
-              ) : null}
+                <div className={cls(cmn.mleft20)}>
+                  <Button
+                    startIcon={<AddCircleRoundedIcon />}
+                    size="large"
+                    className={styles.btnAction}
+                    onClick={addNetwork}
+                  >
+                    Add network
+                  </Button>
+                </div>
+                {props.chainMeta?.url ? (
+                  <div className={cls(cmn.mleft20)}>
+                    <a
+                      target="_blank"
+                      rel="noreferrer"
+                      href={props.chainMeta.url}
+                      className="undec"
+                    >
+                      <Button
+                        size="large"
+                        className={styles.btnAction}
+                        startIcon={<ArrowOutwardRoundedIcon />}
+                      >
+                        Open website
+                      </Button>
+                    </a>
+                  </div>
+                ) : null}
+              </Stack>
             </div>
-          </div>
-          <CopySurface
-            className={cls(cmn.mtop10, cmn.mleft10, cmn.flexg)}
-            title="Chain ID"
-            value={chainIdInt.toString()}
-          />
-        </div>
+            <CopySurface
+              className={cls(cmn.flexg)}
+              title="Chain ID"
+              value={chainIdInt.toString()}
+            />
+          </Stack>
+        </Stack>
       </SkPaper>
       <ChainAccordion mpc={props.mpc} schainName={props.schainName} />
     </div>

src/components/TermsModal.tsx

@@ -35,7 +35,7 @@ import GradingRoundedIcon from '@mui/icons-material/GradingRounded'
 import { type MetaportCore, SkPaper, cls, cmn, styles } from '@skalenetwork/metaport'
 
 import { PORTAL_URLS } from '../core/constants'
-import TermsOfService from './Terms/terms-of-service.mdx'
+import TermsOfService from '../terms-of-service.mdx'
 
 export default function TermsModal(props: {
   mpc: MetaportCore