skalenetwork · dmytrotkk · Nov 13, 2023 · Nov 13, 2023 · Nov 13, 2023 · Nov 13, 2023
@@ -31,4 +31,7 @@ src/metadata/chainsData.json
 src/metadata/faucet.json
 .vercel
 
-chainsJson.json
+chainsJson.json
+
+public/sitemap.xml
+public/robots.txt
@@ -32,5 +32,7 @@ fi
 
 node generate-imports.cjs ./src/meta/logos
 
+bash generate_sitemap.sh
+
 echo "Building..."
 yarn build
@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Set BASE_URL to the provided environment variable, or use the default if it's not set
+BASE_URL="${BASE_URL:-https://portal.skale.space}"
+
+# Read the template and replace {BASE_URL} with the actual BASE_URL
+sed "s|{BASE_URL}|$BASE_URL|g" sitemap_template.xml > public/sitemap.xml
+sed "s|{BASE_URL}|$BASE_URL|g" robots_template.txt > public/robots.txt
+
+echo "Sitemap and robots.txt generated successfully."
@@ -9,7 +9,17 @@
   </script>
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>SKALE Portal</title>
+  <title>SKALE Portal - The Entry Point to the SKALE Blockchain</title>
+  <meta name="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="robots" content="index, follow" />
+  <meta name="keywords" content="skale,blockchain,bridge,web3,chains,stats">
+  <meta http-equiv="Content-Language" content="en-us">
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="SKALE Portal - The Entry Point to the SKALE Blockchain" />
+  <meta property="og: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 property="og:image" content="https://portal-git-hotfix-safari-images-bug-skale-network.vercel.app/chains.jpg" />
 </head>
 
 <body>

@@ -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.0-develop.13",
+    "@skalenetwork/metaport": "2.0.1",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@vercel/analytics": "^1.0.2",
     "eslint-config-prettier": "^9.0.0",
@@ -24,12 +24,14 @@
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-jazzicon": "^1.0.4",
     "react-router-dom": "^6.15.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/react-helmet": "^6.1.9",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.4",

@@ -0,0 +1,2 @@
+User-agent: *
+Sitemap: {BASE_URL}/sitemap.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+    <url>
+        <loc>
+            {BASE_URL}
+        </loc>
+    </url>
+    <url>
+        <loc>
+            {BASE_URL}/chains
+        </loc>
+    </url>
+    <url>
+        <loc>
+            {BASE_URL}/bridge/history
+        </loc>
+    </url>
+    <url>
+        <loc>
+            {BASE_URL}/other/faq
+        </loc>
+    </url>
+    <url>
+        <loc>
+            {BASE_URL}/stats
+        </loc>
+    </url>
+    <url>
+        <loc>
+            {BASE_URL}/portfolio
+        </loc>
+    </url>
+</urlset>
@@ -377,14 +377,9 @@ code {
   overflow: auto;
 }
 
-
-.inheritSize {
-  width: inherit;
-  height: inherit;
-}
-
 .inheritSize:has(.br__tileDefaultLogo) {
   width: 100% !important;
+  height: inherit;
 }
 
 .br__tileDefaultLogo {

@@ -21,7 +21,7 @@
  * @copyright SKALE Labs 2023-Present
  */
 
-import './App.scss'
+import { Helmet } from 'react-helmet'
 
 import { MetaportProvider, getMetaportTheme } from '@skalenetwork/metaport'
 import '@skalenetwork/metaport/dist/style.css'
@@ -33,6 +33,8 @@ import Portal from './Portal'
 import { METAPORT_CONFIG } from './metadata/metaportConfig'
 import { createMuiTheme } from './core/themes'
 
+import { META_TAGS } from './core/meta'
+
 METAPORT_CONFIG.mainnetEndpoint = import.meta.env.VITE_MAINNET_ENDPOINT
 METAPORT_CONFIG.projectId = import.meta.env.VITE_WC_PROJECT_ID
 
@@ -46,6 +48,12 @@ export default function App() {
       className={'bridge ' + (isDarkMode ? 'bridge-dark' : 'bridge-light')}
       style={{ background: mpTheme.background }}
     >
+      <Helmet>
+        <title>{META_TAGS.main.title}</title>
+        <meta name="description" content={META_TAGS.main.description} />
+        <meta property="og:title" content={META_TAGS.main.title} />
+        <meta property="og:description" content={META_TAGS.main.description} />
+      </Helmet>
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={muiTheme}>
           <MetaportProvider config={METAPORT_CONFIG}>

@@ -1,6 +1,8 @@
 import './App.scss'
 
 import { useState, useEffect } from 'react'
+import { Helmet } from 'react-helmet'
+import { useLocation } from 'react-router-dom'
 import { Routes, Route } from 'react-router-dom'
 import { useMetaportStore, PROXY_ENDPOINTS, type MetaportState } from '@skalenetwork/metaport'
 
@@ -20,6 +22,9 @@ import { getHistoryFromStorage, setHistoryToStorage } from './core/transferHisto
 // import chainsJson from './chainsJson.json';
 
 export default function Router() {
+  const location = useLocation()
+  const currentUrl = `${window.location.origin}${location.pathname}${location.search}`
+
   const [schains, setSchains] = useState<any[]>([])
 
   const mpc = useMetaportStore((state: MetaportState) => state.mpc)
@@ -49,36 +54,39 @@ export default function Router() {
   }
 
   return (
-    <Routes>
-      <Route index element={<Bridge />} />
-      <Route path="bridge">
-        <Route path="history" element={<History />} />
-      </Route>
-      <Route path="portfolio" element={<Portfolio mpc={mpc} />} />
-      <Route
-        path="chains"
-        element={<Network loadSchains={loadSchains} schains={schains} mpc={mpc} />}
-      />
-      <Route path="chains">
+    <div>
+      <Helmet>
+        <meta property="og:url" content={currentUrl} />
+      </Helmet>
+      <Routes>
+        <Route index element={<Bridge />} />
+        <Route path="bridge">
+          <Route path="history" element={<History />} />
+        </Route>
+        <Route path="portfolio" element={<Portfolio mpc={mpc} />} />
         <Route
-          path=":name"
-          element={<Schain loadSchains={loadSchains} schains={schains} mpc={mpc} />}
+          path="chains"
+          element={<Network loadSchains={loadSchains} schains={schains} mpc={mpc} />}
         />
-      </Route>
-      <Route path="apps" element={<Apps />} />
-      <Route path="apps">
-        <Route path=":name" element={<App />} />
-      </Route>
-      <Route path="stats" element={<Stats />} />
-      <Route path="other">
-        <Route path="faq" element={<Faq />} />
-        <Route path="terms-of-service" element={<Terms />} />
-      </Route>
-      <Route path="admin">
-        <Route path=":name" element={<Admin mpc={mpc} />} />
-      </Route>
-    </Routes>
-    //     </CSSTransition>
-    // </TransitionGroup>
+        <Route path="chains">
+          <Route
+            path=":name"
+            element={<Schain loadSchains={loadSchains} schains={schains} mpc={mpc} />}
+          />
+        </Route>
+        <Route path="apps" element={<Apps />} />
+        <Route path="apps">
+          <Route path=":name" element={<App />} />
+        </Route>
+        <Route path="stats" element={<Stats />} />
+        <Route path="other">
+          <Route path="faq" element={<Faq />} />
+          <Route path="terms-of-service" element={<Terms />} />
+        </Route>
+        <Route path="admin">
+          <Route path=":name" element={<Admin mpc={mpc} />} />
+        </Route>
+      </Routes>
+    </div>
   )
 }
@@ -21,16 +21,15 @@
  * @copyright SKALE Labs 2023-Present
  */
 
+import { Helmet } from 'react-helmet'
+
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
 import Container from '@mui/material/Container'
 import Stack from '@mui/material/Stack'
 import GradeRoundedIcon from '@mui/icons-material/GradeRounded'
 
-import Message from './Message'
-import BridgeBody from './BridgeBody'
-
 import {
   CHAINS_META,
   cls,
@@ -42,6 +41,11 @@ import {
   TransactionData
 } from '@skalenetwork/metaport'
 
+import Message from './Message'
+import BridgeBody from './BridgeBody'
+
+import { META_TAGS } from '../core/meta'
+
 interface TokenParams {
   keyname: string | null
   type: dataclasses.TokenType | null
@@ -154,6 +158,12 @@ export default function Bridge() {
 
   return (
     <Container maxWidth="sm">
+      <Helmet>
+        <title>{META_TAGS.bridge.title}</title>
+        <meta name="description" content={META_TAGS.bridge.description} />
+        <meta property="og:title" content={META_TAGS.bridge.title} />
+        <meta property="og:description" content={META_TAGS.bridge.description} />
+      </Helmet>
       <Stack spacing={0}>
         <div className={cls(cmn.flex, cmn.mbott10)}>
           <h2 className={cls(cmn.nom)}>Transfer</h2>

@@ -22,10 +22,10 @@
  */
 
 import Button from '@mui/material/Button'
-import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded';
+import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded'
 import { cmn, cls } from '@skalenetwork/metaport'
 import CategoryBadge, { isString } from './CategoryBadge'
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom'
 
 export default function ChainCategories(props: {
   category: string | string[] | undefined
@@ -35,7 +35,7 @@ export default function ChainCategories(props: {
   return (
     <div className={cmn.flex}>
       <Link to="/chains" className="undec fullWidth">
-        <Button className='titleBadge'>
+        <Button className="titleBadge">
           <ArrowBackIosNewRoundedIcon className={cls(cmn.pPdrim)} />
           <p className={cls(cmn.p, cmn.p4, cmn.pPdrim, cmn.mleft5)}>All Chains</p>
         </Button>

@@ -21,16 +21,25 @@
  * @copyright SKALE Labs 2023-Present
  */
 
+import { Helmet } from 'react-helmet'
+
 import Container from '@mui/material/Container'
 import Stack from '@mui/material/Stack'
 
 import { cmn, cls } from '@skalenetwork/metaport'
 
 import FaqAccordion from '../FaqAccordion'
+import { META_TAGS } from '../../core/meta'
 
 export default function Faq() {
   return (
     <Container maxWidth="md">
+      <Helmet>
+        <title>{META_TAGS.faq.title}</title>
+        <meta name="description" content={META_TAGS.faq.description} />
+        <meta property="og:title" content={META_TAGS.faq.title} />
+        <meta property="og:description" content={META_TAGS.faq.description} />
+      </Helmet>
       <Stack spacing={0}>
         <div className={cls(cmn.flex)}>
           <h2 className={cls(cmn.nom)}>FAQ</h2>

@@ -21,6 +21,8 @@
  * @copyright SKALE Labs 2023-Present
  */
 
+import { Helmet } from 'react-helmet'
+
 import Stack from '@mui/material/Stack'
 import Button from '@mui/material/Button'
 import Container from '@mui/material/Container'
@@ -34,6 +36,7 @@ import {
 } from '@skalenetwork/metaport'
 
 import { setHistoryToStorage } from '../core/transferHistory'
+import { META_TAGS } from '../core/meta'
 
 export default function History() {
   const mpc = useMetaportStore((state) => state.mpc)
@@ -48,6 +51,12 @@ export default function History() {
 
   return (
     <Container maxWidth="md">
+      <Helmet>
+        <title>{META_TAGS.history.title}</title>
+        <meta name="description" content={META_TAGS.history.description} />
+        <meta property="og:title" content={META_TAGS.history.title} />
+        <meta property="og:description" content={META_TAGS.history.description} />
+      </Helmet>
       <Stack spacing={0}>
         <div className={cls(cmn.flex, cmn.flexcv)}>
           <div className={cls(cmn.flexg)}>

@@ -41,7 +41,6 @@ import { cls, styles, cmn } from '@skalenetwork/metaport'
 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)
   const open = Boolean(anchorEl)
@@ -136,18 +135,15 @@ export default function MoreMenu() {
             </div>
           </MenuItem>
         </a>
-        <a
-          className="undec fullWidth"
-          target="_blank"
-          href={DISCORD_INVITE_URL}
-          rel="noreferrer"
-        >
+        <a className="undec fullWidth" target="_blank" href={DISCORD_INVITE_URL} rel="noreferrer">
           <MenuItem onClick={handleClose} className="undec">
             <div className={cmn.flex}>
               <img
                 src={discordLogo}
                 className={cmn.mri10}
-                style={{ width: '22px', height: '22px' }} alt="discord logo" />
+                style={{ width: '22px', height: '22px' }}
+                alt="discord logo"
+              />
             </div>
             <div className={cls(cmn.flex, cmn.flexg)}>Discord</div>
             <div className={cls(cmn.flex, cmn.mleft10)}>