From 1e9c4225f075ccd3e8a3177da4a12dbe85c18578 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Thu, 20 Apr 2023 16:37:26 +0300
Subject: [PATCH] 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 <usame@safe.global>
---
 package.json                             |   2 +-
 public/images/chainsLogos/CeloLogo.png   | Bin 0 -> 1751 bytes
 src/components/common/MetaTags/index.tsx |   2 +-
 src/components/common/Networks/index.tsx |  21 ++-
 src/content/home.json                    | 200 ++++++++---------------
 src/content/wallet.json                  | 200 ++++++++---------------
 src/pages/cla/index.tsx                  |   2 +
 7 files changed, 157 insertions(+), 270 deletions(-)
 create mode 100644 public/images/chainsLogos/CeloLogo.png
 create mode 100644 src/pages/cla/index.tsx

diff --git a/package.json b/package.json
index a7be84d0..328e8047 100644
--- 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
new file mode 100644
index 0000000000000000000000000000000000000000..5bf0e56c3b78db0cf4e4811133f0f0d666262e93
GIT binary patch
literal 1751
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

literal 0
HcmV?d00001

diff --git a/src/components/common/MetaTags/index.tsx b/src/components/common/MetaTags/index.tsx
index dc88127e..ae78fa1f 100644
--- 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
index de4477b0..65dc0de6 100644
--- 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,7 +43,7 @@ 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} />
       })}
     </>
   )
@@ -43,6 +51,7 @@ const NetworksRow = ({ networksRow, chainsData }: { networksRow: NetworkChipProp
 
 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
index 88550122..f7676c1e 100644
--- 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"
   },
diff --git a/src/content/wallet.json b/src/content/wallet.json
index f7b92e01..d6975559 100644
--- a/src/content/wallet.json
+++ b/src/content/wallet.json
@@ -142,139 +142,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"
   },
diff --git a/src/pages/cla/index.tsx b/src/pages/cla/index.tsx
new file mode 100644
index 00000000..36e3b87f
--- /dev/null
+++ b/src/pages/cla/index.tsx
@@ -0,0 +1,2 @@
+import CLAPage from '../cla'
+export default CLAPage