Merge pull request #165 from skalenetwork/add-pricing-and-start-page

Add pricing and start page
skalenetwork · Dec 20, 2023 · 11ab3d7 · 11ab3d7
2 parents 826580e + 30f97c9
commit 11ab3d7
Show file tree

Hide file tree

Showing 70 changed files with 3,100 additions and 421 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,7 +24,7 @@ yarn-debug.log*
 yarn-error.log*
 
 .env
-src/metadata/metaportConfig*.ts
+src/data/metaportConfig*.ts
 src/meta/
 
 src/metadata/chainsData.json

diff --git a/build.sh b/build.sh
@@ -7,7 +7,7 @@ set -e
 export DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
 
 METAPORT_CONFIG_PATH=$DIR/config/$NETWORK_NAME.ts
-METAPORT_CONFIG_PATH_SRC=$DIR/src/metadata/metaportConfig.ts
+METAPORT_CONFIG_PATH_SRC=$DIR/src/data/metaportConfig.ts
 
 echo "Copying ${METAPORT_CONFIG_PATH} -> ${METAPORT_CONFIG_PATH_SRC}..."
 cp $METAPORT_CONFIG_PATH $METAPORT_CONFIG_PATH_SRC

diff --git a/bun.lockb b/bun.lockb
diff --git a/config/mainnet.ts b/config/mainnet.ts
@@ -63,12 +63,6 @@ export const METAPORT_CONFIG: interfaces.MetaportConfig = {
       symbol: 'HMT',
       iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/10347.png'
     },
-    ubxs: {
-      name: 'UBXS Token',
-      symbol: 'UBXS',
-      decimals: '6',
-      iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/17242.png'
-    },
     razor: {
       "decimals": "18",
       "name": "RAZOR Network",

diff --git a/index.html b/index.html
@@ -26,6 +26,7 @@
   <meta name="twitter:description" content="The SKALE Portal is designed to enhance your interaction with the SKALE Blockchain Network, providing a single website to bridge to SKALE, connect to different chains, and view SKALE statistics.">
   <meta name="twitter:image" content="https://portal.skale.space/portal.png">
 
+  <meta name="theme-color" content="#000000" />
 </head>
 
 <body>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "portal",
   "private": true,
-  "version": "2.0.2",
+  "version": "2.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,7 +15,7 @@
     "@mdx-js/rollup": "^2.3.0",
     "@mui/icons-material": "^5.14.8",
     "@mui/material": "^5.14.5",
-    "@skalenetwork/metaport": "2.0.2-develop.1",
+    "@skalenetwork/metaport": "2.0.3-develop.3",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@vercel/analytics": "^1.0.2",
     "eslint-config-prettier": "^9.0.0",
@@ -35,6 +35,7 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.4",
+    "bun-types": "^1.0.17",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",

diff --git a/public/apps.png b/public/apps.png
diff --git a/public/bridge.png b/public/bridge.png
diff --git a/public/chains.jpg b/public/chains.jpg
diff --git a/public/chains.png b/public/chains.png
diff --git a/public/portfolio.png b/public/portfolio.png
diff --git a/public/stats.png b/public/stats.png
diff --git a/src/App.scss b/src/App.scss
@@ -86,6 +86,8 @@ body {
   padding-right: 12px;
   padding-left: 8px;
 
+  min-height: 0 !important;
+
   .mp__iconConnect {
     margin-left: 10px;
     width: 18pt !important;
@@ -142,7 +144,7 @@ body {
 
 
 .br__modalInner {
-  max-height: calc(90vh - 300px);
+  max-height: calc(90vh - 250px);
   display: flex;
   /* relevant part */
   flex-direction: column;
@@ -158,15 +160,20 @@ body {
   overflow: hidden;
 }
 
-.br__modal {
-  .MuiContainer-root {
-    padding: 0px !important;
+.br__modalScroll {
+  @media screen and (min-height: 200px) {
+    max-height: calc(75vh - 180px);
   }
 
-  .br__modalScroll {
-    height: 100%;
-    overflow-y: auto;
+  @media screen and (min-height: 670px) and (min-width: 300px) {
+    max-height: calc(75vh - 520px);
   }
+
+  @media screen and (min-height: 670px) and (min-width: 900px) {
+    max-height: calc(75vh - 350px);
+  }
+
+  overflow-y: auto;
 }
 
 .drawerIconRi {
@@ -176,10 +183,14 @@ body {
   margin-right: 12px !important;
 }
 
-.br__modalScroll {
-  ::-webkit-scrollbar {
-    display: unset !important;
-  }
+// .br__modalScroll {
+//   ::-webkit-scrollbar {
+//     display: unset !important;
+//   }
+// }
+
+::-webkit-scrollbar-track {
+  height: 5px !important;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -219,24 +230,34 @@ 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;
 }
 
 .br__tile:hover {
-  box-shadow: 0px -4px 6px rgba(255, 255, 255, 0.1);
   transform: scale(1.05);
 }
 
 .br__tile {
-  height: 140px;
+  height: 150px;
+  border-radius: 25px !important;
+  border: 1px solid #171616 !important;
+}
+
+.pageCard {
+  height: 100% !important;
   border-radius: 25px !important;
   border: 1px rgb(44 44 44) solid !important;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
 }
 
 .br__tileLogo {
-  height: 95px;
+  height: 105px;
 
   img {
     max-height: 100%;
@@ -322,23 +343,46 @@ body::-webkit-scrollbar {
   width: 100%;
 }
 
+.btn {
+  text-transform: none !important;
+  font-size: 0.8025rem !important;
+  line-height: 1.6 !important;
+  letter-spacing: 0.02857em !important;
+  font-weight: 600 !important;
+  padding: 0.9em 3.5em !important;
+  border-radius: $sk-border-radius !important;
+  box-shadow: none !important;
+}
+
+.outlined {
+  background: rgba(41, 255, 148, 0.08)
+}
+
+.roundBtn {
+  min-width: 40px !important;
+  padding: 8px 11px !important;
+}
+
 .cardBtn {
   background: rgba(0, 0, 0, .506) !important;
-  border: 1px solid hsla(0, 0%, 51%, .35) !important;
+  border: 1px solid hsla(0, 0%, 51%, .1) !important;
   text-transform: none !important;
-  color: white !important;
-  padding: 5px 10px 5px 15px !important;
-  font-size: 0.6125rem !important;
+  color: #ffffffe6 !important;
+  padding: 6px 10px 6px 12px !important;
+  font-size: 0.7rem !important;
+  min-width: 55px;
+
+  width: 100%;
+
+  font-weight: 700 !important;
 
   svg {
-    width: 10pt;
-    height: 10pt;
+    width: 8pt;
+    height: 8pt;
   }
 
-  .MuiButton-endIcon {
-    margin-left: 5px !important;
-    margin-right: 2px !important;
-    // margin: 0 !important;
+  .MuiButton-startIcon {
+    margin-right: 5px !important;
   }
 }
 
@@ -437,16 +481,10 @@ code {
     }
   }
 
-  .titleSection {
-    background: rgba(0, 0, 0, 0.6) !important;
-    border-radius: 25px;
-    padding: 20px;
-  }
-
   .titleBadge {
     background: rgba(0, 0, 0, 0.6) !important;
     border-radius: 25px;
-    padding: 10px 15px;
+    padding: 5px;
 
     svg {
       width: 12px;
@@ -455,6 +493,12 @@ code {
   }
 }
 
+.titleSection {
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 25px;
+  padding: 20px;
+}
+
 button:focus {
   outline: none !important;
 }
@@ -472,4 +516,68 @@ button:focus {
 
 .MuiAccordion-rounded {
   box-shadow: none !important;
+}
+
+.startCardText {
+  margin: 120px 10px 10px 10px;
+  background: #00000066;
+  backdrop-filter: blur(10px) brightness(0.8);
+  border-radius: 25px;
+  padding: 10px 15px;
+}
+
+.startCardBg {
+  background-repeat: no-repeat;
+  background-size: cover;
+  border: none !important;
+  border: 1px solid #171616 !important;
+  box-shadow: none !important;
+}
+
+.startCardbridge {
+  background-image: url(/bridge.png);
+}
+
+.startCardchains {
+  background-image: url(/chains.png);
+}
+
+.startCardapps {
+  background-image: url(/apps.png);
+}
+
+
+.startCardstats {
+  background-image: url(/stats.png);
+}
+
+.startCardportfolio {
+  background-image: url(/portfolio.png);
+}
+
+
+.blackP {
+  color: #000000;
+}
+
+.divider {
+  border-bottom: 1px $border-color solid;
+  padding-bottom: 10px;
+}
+
+.flexi {
+  display: inline-flex;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  /* display: none; <- Crashes Chrome on hover */
+  -webkit-appearance: none;
+  margin: 0;
+  /* <-- Apparently some margin are still there even though it's hidden */
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+  /* Firefox */
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -30,7 +30,7 @@ import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'
 
 import Portal from './Portal'
 
-import { METAPORT_CONFIG } from './metadata/metaportConfig'
+import { METAPORT_CONFIG } from './data/metaportConfig'
 import { createMuiTheme } from './core/themes'
 
 import { META_TAGS } from './core/meta'

diff --git a/src/Portal.tsx b/src/Portal.tsx
@@ -21,27 +21,22 @@
  * @copyright SKALE Labs 2023-Present
  */
 
-import { useState } from 'react'
-
 import Box from '@mui/material/Box'
 import CssBaseline from '@mui/material/CssBaseline'
 
 import Header from './Header'
 import SkDrawer from './SkDrawer'
 import Router from './Router'
-import TermsModal from './components/TermsModal'
 
 import { useMetaportStore, useWagmiAccount, Debug, cls, cmn } from '@skalenetwork/metaport'
 
 export default function Portal() {
-  const [termsAccepted, setTermsAccepted] = useState<boolean>(false)
   const mpc = useMetaportStore((state) => state.mpc)
   const { address } = useWagmiAccount()
   if (!mpc) return <div></div>
   return (
     <Box sx={{ display: 'flex' }} className="AppWrap">
       <CssBaseline />
-      <TermsModal mpc={mpc} termsAccepted={termsAccepted} setTermsAccepted={setTermsAccepted} />
       <Header address={address} mpc={mpc} />
       <SkDrawer />
       <div className={cls(cmn.fullWidth)}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,7 @@ @@
       <meta name="twitter:description" content="The SKALE Portal is designed to enhance your interaction with the SKALE Blockchain Network, providing a single website to bridge to SKALE, connect to different chains, and view SKALE statistics.">
       <meta name="twitter:image" content="https://portal.skale.space/portal.png">
+      <meta name="theme-color" content="#000000" />
     </head>
     <body>
@@ Expand Down @@