Merge pull request #117 from forbole/network-ui-updates

[FWB-133] style: network UI updates

.commitlintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "header-max-length": [2, "always", 72],
+  },
+};

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}

package.json

@@ -14,6 +14,7 @@
     "lint:eslint": "eslint . --ext .ts,.tsx,.js,.jsx",
     "lint:prettier": "prettier --check src/**/* server/**/* graphql/**/*",
     "lint:prettier:fix": "prettier --write src/**/* server/**/* graphql/**/*",
+    "postinstall": "husky install",
     "prd": "pm2 start ecosystem.config.js",
     "start": "cross-env NODE_ENV=production node dist/index.js",
     "test": "echo no tests",
@@ -58,6 +59,8 @@
     "validator": "^13.7.0"
   },
   "devDependencies": {
+    "@commitlint/cli": "^18.4.2",
+    "@commitlint/config-conventional": "^18.4.2",
     "@playwright/test": "^1.39.0",
     "@svgr/webpack": "^8.1.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.1",
@@ -85,6 +88,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "express": "^4.18.1",
+    "husky": "^8.0.3",
     "i18next-parser": "^8.9.0",
     "nodemon": "^3.0.1",
     "postcss": "^8.4.27",

src/screens/network_guides/components/network_info/index.tsx

@@ -24,7 +24,19 @@ import { InfoCard } from "./components";
 import { useNetworkGuidesHook } from "./hooks";
 import { ContentBox, ContentCSS } from "./styles";
 
-const excludedNetworks = ["solana", "coreum", "gitopia", "sui"];
+const excludedImgChains = new Set([
+  "archway",
+  "coreum",
+  "gitopia",
+  "solana",
+  "sui",
+]);
+
+const mappings: Record<string, string> = {
+  "archway-network": "archway",
+  "crypto-org": "crypto.org",
+  "mars-protocol": "mars",
+};
 
 const NetworkInfo = ({ post }: any) => {
   const theme = useTheme();
@@ -36,13 +48,17 @@ const NetworkInfo = ({ post }: any) => {
   const { sanitize } = DOMPurify;
   const cmsLoader = ({ src, width, quality }: any) =>
     `${src}?w=${width}&q=${quality || 75}`;
-  const networkData =
-    // eslint-disable-next-line no-nested-ternary
-    tags.length <= 1
-      ? null
-      : tags[1].slug === "crypto-org"
-        ? getNetworkInfo("crypto.org")
-        : getNetworkInfo(tags[1].slug);
+
+  const networkData = (() => {
+    if (tags.length <= 1) return null;
+
+    const mapping = mappings[tags[1].slug as string];
+    if (mapping) {
+      return getNetworkInfo(mapping);
+    }
+
+    return getNetworkInfo(tags[1].slug);
+  })();
 
   const { cosmosNetworkGuides } = useNetworkGuidesHook();
 
@@ -58,8 +74,9 @@ const NetworkInfo = ({ post }: any) => {
     },
     [networkData],
   );
+
   const coverImage =
-    networkData?.graphql && !excludedNetworks.includes(networkData?.graphql)
+    networkData?.graphql && !excludedImgChains.has(networkData?.graphql)
       ? `/images/guides/how_to_stake_${networkData.graphql}.png`
       : featureImage;
 
@@ -142,7 +159,6 @@ const NetworkInfo = ({ post }: any) => {
                   />
                 ) : (
                   <Box
-                    id="foo"
                     style={{
                       height: onlyLargeScreen ? 90 : 52,
                       width: onlyLargeScreen ? 90 : 52,
@@ -151,19 +167,21 @@ const NetworkInfo = ({ post }: any) => {
                 )}
               </Box>
               <Box pl={onlyLargeScreen && networkData?.address ? 2 : 1}>
-                <Typography
-                  sx={{
-                    background: "rgba(255, 255, 255, 0.7)",
-                    borderRadius: theme.spacing(1),
-                    fontSize: theme.spacing(2),
-                    fontWeight: 600,
-                    padding: theme.spacing(1),
-                    paddingBottom: theme.spacing(1),
-                  }}
-                  variant="h3"
-                >
-                  {networkData?.name || ""}
-                </Typography>
+                {networkData?.name && (
+                  <Typography
+                    sx={{
+                      background: "rgba(255, 255, 255, 0.7)",
+                      borderRadius: theme.spacing(1),
+                      fontSize: theme.spacing(2),
+                      fontWeight: 600,
+                      padding: theme.spacing(1),
+                      paddingBottom: theme.spacing(1),
+                    }}
+                    variant="h3"
+                  >
+                    {networkData.name}
+                  </Typography>
+                )}
                 {networkData?.address && (
                   <Box
                     alignItems="center"

src/screens/staking/components/networks/components/network_grid/index.tsx

@@ -30,11 +30,15 @@ const NetworkGrid = () => {
     ...radixNetwork,
   };
 
+  const sortedNetworks = [...allNetworkData].sort((a, b) =>
+    a.name.localeCompare(b.name),
+  );
+
   return (
     <Box css={styles.root}>
       <Box className="home__networks">
         <LayoutGroup>
-          {allNetworkData.map((network, index) => (
+          {sortedNetworks.map((network, index) => (
             <NetworkCard
               key={network.name ?? index}
               network={network}

src/utils/network_info.ts

@@ -435,7 +435,7 @@ export const logos: IStringIndex = {
     graphql: "elrond",
     image: "/images/network/elrond.png",
     key: "elrond",
-    name: "Elrond",
+    name: "MultiversX",
   },
   "solana": {
     address: "76nwV8zz8tLz97SBRXH6uwHvgHXtqJDLQfF66jZhQ857",
@@ -509,7 +509,7 @@ export const logos: IStringIndex = {
   "nym": {
     denom: "NYX",
     graphql: "nym",
-    image: "/images/network/neutron.png",
+    image: "/images/network/nym.png",
     key: "nym",
     label: "NYM - NYX",
     name: "NYM",
@@ -648,22 +648,22 @@ export const logos: IStringIndex = {
     denom: "ARCH",
     graphql: "archway",
     guide: "how-to-stake-arch-on-archway-network",
-    image: "/images/network/archway.png",
+    image: "/images/network/archway.svg",
     key: "archway",
     label: "Archway",
     name: "Archway",
   },
   "coreum": {
-    denom: "",
+    denom: "CORE",
     graphql: "coreum",
     guide: "how-to-stake-core-on-coreum",
-    image: "/images/network/coreum.png",
+    image: "/images/network/coreum.svg",
     key: "coreum",
     label: "",
     name: "Coreum",
   },
   "humansai": {
-    denom: "",
+    denom: "HEART",
     graphql: "humansai",
     image: "/images/network/humansai.png",
     key: "humansai",
@@ -728,10 +728,10 @@ export const logos: IStringIndex = {
     name: "Quasar",
   },
   "gitopia": {
-    denom: "",
+    denom: "LORE",
     graphql: "gitopia",
     guide: "how-to-stake-lore-on-gitopia",
-    image: "/images/network/gitopia.png",
+    image: "/images/network/gitopia.svg",
     key: "gitopia",
     label: "",
     name: "Gitopia",
@@ -748,7 +748,7 @@ export const logos: IStringIndex = {
     denom: "",
     graphql: "sui",
     guide: "how-to-stake-sui-on-sui-network",
-    image: "/images/network/sui.png",
+    image: "/images/network/sui.svg",
     key: "sui",
     label: "",
     name: "Sui",
@@ -827,6 +827,7 @@ const cosmosNetworkKeys = [
 const getNetworkKeysArray = () => {
   const arr = [];
   cosmosNetworkKeys.map((key) => arr.push(key));
+
   arr.push("elrond", "solana", "oasis", "radix");
   arr.sort();