Fix custom address modal bug, add submit your project btn

skalenetwork · Jul 25, 2024 · 5dfafc0 · 5dfafc0
1 parent 7bd4d7b
commit 5dfafc0
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 41 deletions.
diff --git a/src/components/AppChains.tsx b/src/components/AppChains.tsx
@@ -35,6 +35,8 @@ export default function AppChains(props: {
   chainsMeta: interfaces.ChainsMetadataMap
   isXs: boolean
 }) {
+  if (props.schains.length === 0) return
+
   return (
     <div className={cls(cmn.mtop20)}>
       <div>

diff --git a/src/components/chains/HubTile.tsx b/src/components/chains/HubTile.tsx
@@ -70,16 +70,8 @@ export default function HubTile(props: {
       >
         <Tooltip title="Click to see Hub details">
           <div className={cls('titleSectionBg', cmn.flex, cmn.flexcv)}>
-
             <div
-              className={cls(
-                cmn.flex,
-                cmn.flexcv,
-                cmn.flexg,
-                cmn.mtop20,
-                cmn.mbott20,
-                cmn.mleft20
-              )}
+              className={cls(cmn.flex, cmn.flexcv, cmn.flexg, cmn.mtop20, cmn.mbott20, cmn.mleft20)}
             >
               <ChainLogo
                 network={props.network}
@@ -88,11 +80,7 @@ export default function HubTile(props: {
                 className={cls(styles.chainIconlg)}
               />
               <div
-                className={cls(
-                  [cmn.mleft20, !props.isXs],
-                  [cmn.mleft10, props.isXs],
-                  cmn.flexg
-                )}
+                className={cls([cmn.mleft20, !props.isXs], [cmn.mleft10, props.isXs], cmn.flexg)}
               >
                 <h4 className={cls(cmn.p, cmn.p700, 'pOneLine')}>{alias}</h4>
                 <p

diff --git a/src/components/delegation/RetrieveRewardModal.tsx b/src/components/delegation/RetrieveRewardModal.tsx
@@ -40,14 +40,6 @@ import Message from '../Message'
 import { ZERO_ADDRESS } from '../../core/constants'
 import SkBtn from '../SkBtn'
 
-const style = {
-  position: 'absolute' as 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: '100vw'
-}
-
 export default function RetrieveRewardModal(props: {
   address: interfaces.AddressType | undefined
   customRewardAddress: interfaces.AddressType | undefined
@@ -97,7 +89,16 @@ export default function RetrieveRewardModal(props: {
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
-        <Box sx={style}>
+        <Box
+          sx={{
+            position: 'absolute' as 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            minWidth: { xs: '100%', md: 'max-content' }
+          }}
+          className={cls(cmn.flexg, cmn.flexcv, cmn.flex, cmn.flexc)}
+        >
           <Container maxWidth="md">
             <SkPaper className={cls(cmn.nop)}>
               <SkPaper gray>

diff --git a/src/pages/Bridge.tsx b/src/pages/Bridge.tsx
@@ -60,21 +60,20 @@ export default function Bridge(props: { isXs: boolean }) {
 
   const mpc = useMetaportStore((state) => state.mpc)
 
-  const chainName1 = useMetaportStore((state) => state.chainName1)
-  const chainName2 = useMetaportStore((state) => state.chainName2)
-  const setChainName1 = useMetaportStore((state) => state.setChainName1)
-  const setChainName2 = useMetaportStore((state) => state.setChainName2)
-
-  const appName1 = useMetaportStore((state) => state.appName1)
-  const appName2 = useMetaportStore((state) => state.appName2)
-  const setAppName1 = useMetaportStore((state) => state.setAppName1)
-  const setAppName2 = useMetaportStore((state) => state.setAppName2)
-
-  const token = useMetaportStore((state) => state.token)
-  const tokens = useMetaportStore((state) => state.tokens)
-  const setToken = useMetaportStore((state) => state.setToken)
-
-  const transactionsHistory = useMetaportStore((state) => state.transactionsHistory)
+  const {
+    chainName1,
+    chainName2,
+    setChainName1,
+    setChainName2,
+    appName1,
+    appName2,
+    setAppName1,
+    setAppName2,
+    token,
+    tokens,
+    setToken,
+    transactionsHistory
+  } = useMetaportStore((state) => state)
 
   function validChainName(chainName: string | null): boolean {
     if (!chainName) return false

diff --git a/src/pages/Chains.tsx b/src/pages/Chains.tsx
@@ -27,7 +27,8 @@ import { useState, useEffect } from 'react'
 import Container from '@mui/material/Container'
 import Stack from '@mui/material/Stack'
 import CircularProgress from '@mui/material/CircularProgress'
-import ArrowOutwardRoundedIcon from '@mui/icons-material/ArrowOutwardRounded'
+import EditRoundedIcon from '@mui/icons-material/EditRounded'
+import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded'
 
 import HubsSection from '../components/HubsSection'
 import { getPrimaryCategory } from '../components/CategoryBadge'
@@ -116,7 +117,7 @@ export default function Chains(props: {
         <div className={cls(cmn.mbott20)}>
           <div className={cls(cmn.flex)}>
             <div className={cls(cmn.flex, cmn.flexg)}></div>
-            <div className={cls(cmn.flex, cmn.mtop10)}>
+            <div className={cls(cmn.flex, cmn.mtop10, cmn.mri10)}>
               <a
                 target="_blank"
                 rel="noreferrer"
@@ -126,12 +127,28 @@ export default function Chains(props: {
                 <Button
                   size="medium"
                   className={cls(styles.btnAction, 'btnMd', 'outlined', cmn.mri10)}
-                  endIcon={<ArrowOutwardRoundedIcon className={cls(styles.chainIconxs)} />}
+                  startIcon={<LanguageRoundedIcon className={cls(styles.chainIconxs)} />}
                 >
                   Explore All SKALE Projects
                 </Button>
               </a>
             </div>
+            <div className={cls(cmn.flex, cmn.mtop10, cmn.mleft10)}>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href="https://github.com/skalenetwork/skale-network/issues/new?assignees=dmytrotkk&labels=metadata&projects=&template=app_submission.yml&title=App+Metadata+Submission"
+                className="undec"
+              >
+                <Button
+                  size="medium"
+                  className={cls(styles.btnAction, 'btnMd', 'outlined', cmn.mri10)}
+                  startIcon={<EditRoundedIcon className={cls(styles.chainIconxs)} />}
+                >
+                  Submit Your Project
+                </Button>
+              </a>
+            </div>
             <div className={cls(cmn.flex, cmn.flexg)}></div>
           </div>
         </div>