Add Celo network (#172)

* Add Celo network * Add an alias for the /cla/ page * Add isNew * fix: showNew for the whole bottom row * chore: Bump version to 1.0.5 --------- Co-authored-by: Usame Algan <[email protected]>
safe-global · Apr 20, 2023 · 1e9c422 · 1e9c422
1 parent 31c6c21
commit 1e9c422
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 270 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "safe-homepage",
   "homepage": "https://github.com/safe-global/safe-homepage",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "scripts": {
     "build": "next build && next export",
     "lint": "tsc && next lint",

diff --git a/public/images/chainsLogos/CeloLogo.png b/public/images/chainsLogos/CeloLogo.png
diff --git a/src/components/common/MetaTags/index.tsx b/src/components/common/MetaTags/index.tsx
@@ -4,7 +4,7 @@ const defaultMetaTags = {
   pageTitle: 'Safe',
   description: 'Safe is the most trusted platform to manage digital assets on Ethereum',
   image: 'https://safe.global/images/og-image.png',
-  site: 'safe',
+  site: 'Safe',
 }
 
 const MetaTags = (props: Partial<typeof defaultMetaTags>) => {

diff --git a/src/components/common/Networks/index.tsx b/src/components/common/Networks/index.tsx
@@ -22,11 +22,19 @@ const defaultThemeColors = {
 type NetworksProps = {
   title: string
   text: string
-  networks: NetworkChipProps[][]
+  networks: NetworkChipProps[]
   chainsData: ChainProps[]
 }
 
-const NetworksRow = ({ networksRow, chainsData }: { networksRow: NetworkChipProps[]; chainsData: ChainProps[] }) => {
+const NetworksRow = ({
+  showNew,
+  networksRow,
+  chainsData,
+}: {
+  showNew?: boolean
+  networksRow: NetworkChipProps[]
+  chainsData: ChainProps[]
+}) => {
   return (
     <>
       {networksRow.map(({ name, icon, textColor, backgroundColor, isNew }, i) => {
@@ -35,14 +43,15 @@ const NetworksRow = ({ networksRow, chainsData }: { networksRow: NetworkChipProp
           textColor: chainData?.textColor || textColor || defaultThemeColors.textColor,
           backgroundColor: chainData?.backgroundColor || backgroundColor || defaultThemeColors.backgroundColor,
         }
-        return <NetworkChip key={`${name}_${i}`} icon={icon} name={name} isNew={isNew} {...chainColors} />
+        return <NetworkChip key={`${name}_${i}`} icon={icon} name={name} isNew={isNew && showNew} {...chainColors} />
       })}
     </>
   )
 }
 
 const Networks = ({ title, text, networks }: NetworksProps) => {
   const chainsData = useContext(ChainsContext)
+  const shuffledNetworks = networks.slice(2, 8).reverse().concat(networks.slice(8).reverse(), networks.slice(0, 2))
 
   return (
     <div className={layoutCss.containerMedium}>
@@ -51,10 +60,10 @@ const Networks = ({ title, text, networks }: NetworksProps) => {
       </Typography>
       <div className={css.networksWrapper}>
         <div className={css.gradientBase} />
-        {networks.map((networksRow, index) => (
+        {[0, 1].map((index) => (
           <Box key={index} display="flex" gap="8px" className={index === 0 ? css.slider : css.sliderReverse}>
-            <NetworksRow networksRow={networksRow} chainsData={chainsData} />
-            <NetworksRow networksRow={networksRow} chainsData={chainsData} />
+            <NetworksRow networksRow={networks} chainsData={chainsData} showNew={index === 1} />
+            <NetworksRow networksRow={shuffledNetworks} chainsData={chainsData} showNew={index === 1} />
           </Box>
         ))}
         <div className={clsx(css.gradientBase, css.gradientFlipped)} />

diff --git a/src/content/home.json b/src/content/home.json
@@ -32,139 +32,77 @@
     "title": "Available on 12+ networks",
     "text": "and more, including testnets",
     "networks": [
-      [
-        {
-          "name": "Ethereum Mainnet",
-          "icon": {
-            "src": "/images/chainsLogos/EthereumLogo.png",
-            "alt": "Ethereum logo"
-          }
-        },
-        {
-          "name": "BNB Smart Chain",
-          "icon": {
-            "src": "/images/chainsLogos/BNBLogo.png",
-            "alt": "BNB Chain logo"
-          }
-        },
-        {
-          "name": "Optimism",
-          "icon": {
-            "src": "/images/chainsLogos/OptimismLogo.png",
-            "alt": "Optimism logo"
-          }
-        },
-        {
-          "name": "Arbitrum",
-          "icon": {
-            "src": "/images/chainsLogos/ArbitrumLogo.png",
-            "alt": "Arbitrum logo"
-          }
-        },
-        {
-          "name": "Polygon",
-          "icon": {
-            "src": "/images/chainsLogos/PolygonLogo.png",
-            "alt": "Polygon logo"
-          }
-        },
-        {
-          "name": "Avalanche",
-          "icon": {
-            "src": "/images/chainsLogos/AvalancheLogo.png",
-            "alt": "Avalanche logo"
-          }
-        },
-        {
-          "name": "Gnosis Chain",
-          "icon": {
-            "src": "/images/chainsLogos/GnosisChainLogo.png",
-            "alt": "Gnosis Chain logo"
-          }
-        },
-        {
-          "name": "Aurora",
-          "icon": {
-            "src": "/images/chainsLogos/AuroraLogo.png",
-            "alt": "Aurora logo"
-          }
-        },
-        {
-          "name": "Arbitrum",
-          "icon": {
-            "src": "/images/chainsLogos/ArbitrumLogo.png",
-            "alt": "Arbitrum logo"
-          }
+      {
+        "name": "Ethereum Mainnet",
+        "icon": {
+          "src": "/images/chainsLogos/EthereumLogo.png",
+          "alt": "Ethereum logo"
         }
-      ],
-      [
-        {
-          "name": "Avalanche",
-          "icon": {
-            "src": "/images/chainsLogos/AvalancheLogo.png",
-            "alt": "Avalanche logo"
-          }
-        },
-        {
-          "name": "Gnosis Chain",
-          "icon": {
-            "src": "/images/chainsLogos/GnosisChainLogo.png",
-            "alt": "Gnosis Chain logo"
-          }
-        },
-        {
-          "name": "Optimism",
-          "icon": {
-            "src": "/images/chainsLogos/OptimismLogo.png",
-            "alt": "Optimism logo"
-          }
-        },
-        {
-          "name": "BNB Smart Chain",
-          "icon": {
-            "src": "/images/chainsLogos/BNBLogo.png",
-            "alt": "BNB Chain logo"
-          }
-        },
-        {
-          "name": "Ethereum Mainnet",
-          "icon": {
-            "src": "/images/chainsLogos/EthereumLogo.png",
-            "alt": "Ethereum logo"
-          }
-        },
-        {
-          "name": "Base",
-          "icon": {
-            "src": "/images/chainsLogos/BaseLogo.png",
-            "alt": "Base logo"
-          },
-          "backgroundColor": "#0151FE",
-          "textColor": "#ffffff",
-          "isNew": true
-        },
-        {
-          "name": "Polygon",
-          "icon": {
-            "src": "/images/chainsLogos/PolygonLogo.png",
-            "alt": "Polygon logo"
-          }
-        },
-        {
-          "name": "Aurora",
-          "icon": {
-            "src": "/images/chainsLogos/AuroraLogo.png",
-            "alt": "Aurora logo"
-          }
-        },
-        {
-          "name": "Arbitrum",
-          "icon": {
-            "src": "/images/chainsLogos/ArbitrumLogo.png",
-            "alt": "Arbitrum logo"
-          }
+      },
+      {
+        "name": "BNB Smart Chain",
+        "icon": {
+          "src": "/images/chainsLogos/BNBLogo.png",
+          "alt": "BNB Chain logo"
+        }
+      },
+      {
+        "name": "Optimism",
+        "icon": {
+          "src": "/images/chainsLogos/OptimismLogo.png",
+          "alt": "Optimism logo"
         }
-      ]
+      },
+      {
+        "name": "Arbitrum",
+        "icon": {
+          "src": "/images/chainsLogos/ArbitrumLogo.png",
+          "alt": "Arbitrum logo"
+        }
+      },
+      {
+        "name": "Polygon",
+        "icon": {
+          "src": "/images/chainsLogos/PolygonLogo.png",
+          "alt": "Polygon logo"
+        }
+      },
+      {
+        "name": "Avalanche",
+        "icon": {
+          "src": "/images/chainsLogos/AvalancheLogo.png",
+          "alt": "Avalanche logo"
+        }
+      },
+      {
+        "name": "Gnosis Chain",
+        "icon": {
+          "src": "/images/chainsLogos/GnosisChainLogo.png",
+          "alt": "Gnosis Chain logo"
+        }
+      },
+      {
+        "name": "Aurora",
+        "icon": {
+          "src": "/images/chainsLogos/AuroraLogo.png",
+          "alt": "Aurora logo"
+        }
+      },
+      {
+        "name": "Arbitrum",
+        "icon": {
+          "src": "/images/chainsLogos/ArbitrumLogo.png",
+          "alt": "Arbitrum logo"
+        }
+      },
+      {
+        "name": "Celo",
+        "icon": {
+          "src": "/images/chainsLogos/CeloLogo.png",
+          "alt": "Celo logo"
+        },
+        "isNew": true
+      }
     ],
     "component": "common/Networks"
   },