Chain page improvements, sFUEL fix, UI improvements

package.json

@@ -13,9 +13,8 @@
     "build:base-sepolia-testnet": "bun run build:packages && NETWORK_NAME=base-sepolia-testnet bash scripts/build.sh",
     "build:base": "bun run build:packages && NETWORK_NAME=base bash scripts/build.sh",
     "build:qa": "bun run build:packages && NETWORK_NAME=legacy bash scripts/build.sh",
-    "dev": "bun run build:packages && vite",
+    "dev": "bunx concurrently -k -n CORE,METAPORT,PORTAL -c cyan,magenta,green 'bun run --cwd packages/core dev' 'bun run --cwd packages/metaport dev' 'bun run dev:portal'",
     "dev:portal": "vite",
-    "dev:watch": "bunx concurrently -k -n CORE,METAPORT,PORTAL -c cyan,magenta,green 'bun run --cwd packages/core dev' 'bun run --cwd packages/metaport dev' 'bun run dev:portal'",
     "build": "bun run build:mainnet",
     "lint": "eslint ./src --ext ts,tsx",
     "preview": "vite preview",

packages/core/src/networks.ts

@@ -73,6 +73,15 @@ export const MAINNET_BACKGROUNDS: { [key in types.SkaleNetwork]: string } = {
     'base-sepolia-testnet': 'linear-gradient(#008a47, #006936)',
 }
 
+export const NATIVE_TOKEN_SYMBOLS: { [key in types.SkaleNetwork]: string } = {
+    mainnet: 'sFUEL',
+    legacy: 'sFUEL',
+    regression: 'sFUEL',
+    testnet: 'sFUEL',
+    base: 'CREDIT',
+    'base-sepolia-testnet': 'CREDIT',
+}
+
 export function parse(networksEnv: string | undefined): types.SkaleNetwork[] {
     if (!networksEnv) throw new Error('VITE_NETWORKS environment variable is not defined');
     return networksEnv.split(',').map((network) => network.trim() as types.SkaleNetwork);

packages/metaport/src/core/wagmi_network.ts

@@ -22,7 +22,7 @@
  */
 
 import { Chain } from 'wagmi/chains'
-import { types, metadata, endpoints } from '@/core'
+import { types, metadata, endpoints, networks } from '@/core'
 
 import { getExplorerUrl } from './explorer'
 import { getChainId } from './chain_id'
@@ -40,8 +40,8 @@ export function constructWagmiChain(network: types.SkaleNetwork, chainName: stri
     name: name,
     nativeCurrency: {
       decimals: 18,
-      name: 'sFUEL',
-      symbol: 'sFUEL'
+      name: networks.NATIVE_TOKEN_SYMBOLS[network],
+      symbol: networks.NATIVE_TOKEN_SYMBOLS[network]
     },
     rpcUrls: {
       public: { http: [endpointHttp], webSocket: [endpointWs] },

src/App.scss

@@ -21,17 +21,23 @@ body {
 }
 
 .skLogo {
-  width: 75pt;
+  width: 65pt;
 }
 
 .skMessage {
   min-height: 58px;
 }
 
 .sk-header {
+  .MuiToolbar-root {
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+
   background-color: rgba(0, 0, 0, 0) !important;
-  -webkit-backdrop-filter: blur(80px) !important;
-  backdrop-filter: blur(80px) !important;
+  margin: 10px;
+  width: calc(100vw - 20px);
+  border-radius: 140px;
 }
 
 .bridge-light .logo {
@@ -40,7 +46,7 @@ body {
 
 .MuiAppBar-positionFixed {
   background-image: none !important;
-  padding: 10pt 0;
+  padding: 0;
 }
 
 

src/Header.tsx

@@ -57,34 +57,29 @@ export default function Header(props: {
       sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
     >
       <Toolbar className="flex items-center">
-        <div className="flex items-center">
-          <Link to="/" className="flex items-center">
-            <img src={logo} className="skLogo invert dark:invert-0" alt="logo" />
-          </Link>
-        </div>
-        <div className="flex items-center grow ml-2.5">
-          {constants.MAINNET_CHAIN_NAME !== 'mainnet' ? (
-            <Chip
-              label="TESTNET"
-              color="primary"
+        <Link to="/" className="flex items-center backdrop-blur-xs p-4 rounded-xl bg-background/50">
+          <img src={logo} className="skLogo invert dark:invert-0" alt="logo" />
+        </Link>
+        <div className="grow"></div>
+        <div className="flex backdrop-blur-xs p-3 rounded-xl bg-background/50">
+          <AccountMenu address={props.address} openProfileModal={props.openProfileModal} />
+          <NetworkSwitch mpc={props.mpc} />
+          <Tooltip title={mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}>
+            <IconButton
               size="small"
-              className="br__chipXs br__chipGray"
-            />
-          ) : null}
+              className="ml-1.5! h-8 w-8 rounded-full bg-card! text-foreground! hover:bg-muted"
+              onClick={toggleMode}
+            >
+              {mode === 'dark' ? (
+                <MoonStar className="h-4 w-4" />
+              ) : (
+                <SunMedium className="h-4 w-4" />
+              )}
+            </IconButton>
+          </Tooltip>
+          <HelpZen />
+          <MoreMenu />
         </div>
-        <AccountMenu address={props.address} openProfileModal={props.openProfileModal} />
-        <NetworkSwitch mpc={props.mpc} />
-        <Tooltip title={mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}>
-          <IconButton
-            size="small"
-            className="ml-1.5! h-8 w-8 rounded-full bg-card! text-foreground! hover:bg-muted"
-            onClick={toggleMode}
-          >
-            {mode === 'dark' ? <MoonStar className="h-4 w-4" /> : <SunMedium className="h-4 w-4" />}
-          </IconButton>
-        </Tooltip>
-        <HelpZen />
-        <MoreMenu />
       </Toolbar>
     </AppBar>
   )

src/Router.tsx

@@ -189,7 +189,9 @@ export default function Router(props: {
             <CircularProgress className="fullscreen-spin" />
           </div>
           <div className="flex items-center">
-            <h3 className="fullscreen-msg-text text-foreground! font-semibold">Loading SKALE Chains</h3>
+            <h3 className="fullscreen-msg-text text-foreground! font-semibold">
+              Loading SKALE Chains
+            </h3>
           </div>
         </div>
       </div>

src/components/CopySurface.tsx

@@ -30,12 +30,14 @@ import Tooltip from '@mui/material/Tooltip'
 import ButtonBase from '@mui/material/ButtonBase'
 import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import { CircleCheck, Copy } from 'lucide-react'
 
 export default function CopySurface(props: {
   title: string
   value: string | undefined
   className?: string
   tokenMetadata?: types.mp.TokenMetadata
+  icon?: React.ReactNode
 }) {
   const [copied, setCopied] = useState(false)
 
@@ -60,11 +62,11 @@ export default function CopySurface(props: {
       <CopyToClipboard text={props.value} onCopy={handleClick}>
         <Tooltip title={copied ? 'Copied!' : 'Click to copy to clipboard'}>
           <ButtonBase
-            className="bg-background! p-5! rounded-3xl!"
+            className="bg-background! p-5! rounded-3xl! ease-in-out transition-transform duration-150 active:scale-[0.99]"
             style={{ width: '100%', height: '100%' }}
           >
             <div style={{ textAlign: 'left', overflow: 'auto' }} className="grow">
-              <div className="flex">
+              <div className="flex items-center mb-1.5">
                 {props.tokenMetadata ? (
                   <div className="mr-1.5">
                     <TokenIcon
@@ -74,7 +76,8 @@ export default function CopySurface(props: {
                     />
                   </div>
                 ) : null}
-                <p className="text-xs text-secondary-foreground mb-1.5">
+                {props.icon && <div className="mr-1.5 text-secondary-foreground">{props.icon}</div>}
+                <p className="text-xs text-secondary-foreground">
                   {props.title}
                   {props.tokenMetadata
                     ? ` (${props.tokenMetadata.decimals ?? constants.DEFAULT_ERC20_DECIMALS})`
@@ -84,9 +87,13 @@ export default function CopySurface(props: {
               <p className="text-base font-semibold shortP text-foreground">{props.value}</p>
             </div>
             {copied ? (
-              <CheckCircleRoundedIcon color="success" className="ml-5 text-[17px]!" />
+              <div className="ml-5 shrink-0 p-2 bg-green-600 dark:bg-green-400 rounded-full">
+                <CircleCheck className="text-accent/90" size={17} />
+              </div>
             ) : (
-              <ContentCopyIcon className="text-secondary-foreground ml-5 text-[17px]!" />
+              <div className="ml-5 shrink-0 p-2 bg-muted-foreground/10 rounded-full">
+                <Copy className="text-accent-foreground/90 shrink-0" size={17} />
+              </div>
             )}
           </ButtonBase>
         </Tooltip>