From 6bd4927656cd5af08042c233e56dfd1d4af6d5ae Mon Sep 17 00:00:00 2001
From: Gerhard Steenkamp <gerhard@umaproject.org>
Date: Wed, 7 Aug 2024 14:00:07 +0200
Subject: [PATCH 1/4] add zora logos

---
 src/app/_assets/logos/zora.svg                | 25 +++++++
 .../_components/icons/gradient/logos/zora.tsx | 73 +++++++++++++++++++
 src/app/_components/icons/index.tsx           |  1 +
 .../_components/supported-chains-section.tsx  |  6 ++
 .../_components/supported-chains-ticker.tsx   |  4 +
 5 files changed, 109 insertions(+)
 create mode 100644 src/app/_assets/logos/zora.svg
 create mode 100644 src/app/_components/icons/gradient/logos/zora.tsx

diff --git a/src/app/_assets/logos/zora.svg b/src/app/_assets/logos/zora.svg
new file mode 100644
index 0000000..69bc7b8
--- /dev/null
+++ b/src/app/_assets/logos/zora.svg
@@ -0,0 +1,25 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xml:space="preserve"
+  id="Layer_1"
+  x="0"
+  y="0"
+  style="enable-background: new 0 0 3487 1200"
+  version="1.1"
+  width="200"
+  height="30"
+  viewBox="0 0 3487 1200"
+>
+  <path
+    d="M0 1180.1v-212l499.8-752H56.2V19.8h696.6v182.1l-520.7 782h541.2v196.3H0v-.1z"
+    fill="#9DAAB3"
+  />
+  <path
+    d="M758.4 607.1c0-138.2 20.5-252.1 61.3-341.5C860.6 176.2 914 109.5 980 65.8 1046 21.9 1125.9 0 1219.9 0c136.2 0 247.1 52 332.8 155.9 85.7 104 128.6 252 128.6 444.1s-45.4 345.9-136.2 455.1c-79.7 96.6-187.9 144.8-324.6 144.8s-246.4-47.7-326.1-143.2c-90.7-109.2-136.1-259.1-136-449.6zm197.9-7.9c0 133.5 25.4 233.6 76.1 300.4 50.7 66.8 113.6 100.2 188.7 100.2 75 0 138.2-33.1 187.9-99.3s74.5-167.9 74.5-305.2c0-137.2-24.2-234-72.6-298.4-48.3-64.3-111.7-96.6-189.9-96.6s-141.9 32.4-191 97.4c-49.2 64.8-73.7 165.3-73.7 301.5zM1735.2 1180.1V19.8h404.4c103.4 0 177.3 10.4 221.6 31.2 44.4 20.9 80.8 57 109.2 108.4 28.5 51.4 42.7 113.1 42.7 184.8 0 90.8-21.7 163.8-65.3 219.3-43.4 55.5-105.2 90.3-185.5 104.5 41.2 29.5 75.2 61.9 102.1 97 26.9 35.1 63.6 98 110 188.8l115.6 226.4h-229.2l-139.1-252.5c-50-91.3-84-148.4-102-171.4s-37-38.8-57-47.5c-20.1-8.7-52.2-13.1-96.6-13.1h-39.6v484.4h-191.3zm191.6-669.6h142.5c87.1 0 142.5-3.8 166.2-11.5 23.8-7.7 43-23.1 57.8-46.3 14.7-23.2 22.1-54 22.1-92.6s-7.4-66.6-22.1-89c-14.8-22.4-34.8-37.8-60.2-46.3-18-5.8-69.9-8.7-155.9-8.7h-150.4v294.4z"
+    fill="#9DAAB3"
+  />
+  <path
+    d="M3487 1180.1h-208.2l-83.3-262.8h-380.9l-78.7 262.8h-204.2L2902.2 19.8h203.5L3487 1180.1zM3133.6 721l-131.4-430.6L2873.3 721h260.3z"
+    fill="#9DAAB3"
+  />
+</svg>
diff --git a/src/app/_components/icons/gradient/logos/zora.tsx b/src/app/_components/icons/gradient/logos/zora.tsx
new file mode 100644
index 0000000..f52af2a
--- /dev/null
+++ b/src/app/_components/icons/gradient/logos/zora.tsx
@@ -0,0 +1,73 @@
+import { LogoIconProps, LogoIconVariant } from "./types";
+
+export function ZoraIcon({ variant = "aqua", ...props }: LogoIconProps) {
+  const linearGradientBasedId = `paint_radial_gradient_${variant}`;
+
+  // use the darkest color in the gradient for the border
+  const baseColors: Record<LogoIconVariant, string> = {
+    purple: "#542999",
+    aqua: "#009A76",
+    teal: "#00719A",
+  };
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" {...props}>
+      <defs>
+        <radialGradient
+          id="paint_radial_gradient_aqua"
+          gradientTransform="translate(66.4578 24.3575) scale(75.2908)"
+          gradientUnits="userSpaceOnUse"
+          r="1"
+          cx="0"
+          cy="0%"
+        >
+          <stop offset="15.62%" stopColor="white" />
+          <stop offset="39.58%" stopColor="#6CF9D8" />
+          <stop offset="72.92%" stopColor="#29997F" />
+          <stop offset="90.63%" stopColor="#009A76" />
+          <stop offset="100%" stopColor="#009A76" />
+        </radialGradient>
+        <radialGradient
+          id="paint_radial_gradient_purple"
+          gradientTransform="translate(66.4578 24.3575) scale(75.2908)"
+          gradientUnits="userSpaceOnUse"
+          r="1"
+          cx="0"
+          cy="0%"
+        >
+          <stop offset="15.62%" stopColor="white" />
+          <stop offset="39.58%" stopColor="#A26CF9" />
+          <stop offset="72.92%" stopColor="#CCADFF" />
+          <stop offset="90.63%" stopColor="#542999" />
+          <stop offset="100%" stopColor="#542999" />
+        </radialGradient>
+        <radialGradient
+          id="paint_radial_gradient_teal"
+          gradientTransform="translate(66.4578 24.3575) scale(75.2908)"
+          gradientUnits="userSpaceOnUse"
+          r="1"
+          cx="0"
+          cy="0%"
+        >
+          <stop offset="15.62%" stopColor="white" />
+          <stop offset="39.58%" stopColor="#6CD3F9" />
+          <stop offset="72.92%" stopColor="#ADE9FF" />
+          <stop offset="90.63%" stopColor="#00719A" />
+          <stop offset="100%" stopColor="#00719A" />
+        </radialGradient>
+      </defs>
+      <g>
+        <path
+          d="M100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100C77.6142 100 100 77.6142 100 50Z"
+          fill={`url(#${linearGradientBasedId})`}
+        />
+        <path
+          stroke={baseColors[variant]}
+          fill="url(#radial_gradient)"
+          stroke-width="1"
+          d="M50,0.5c27.3,0,49.5,22.2,49.5,49.5S77.3,99.5,50,99.5S0.5,77.3,0.5,50S22.7,0.5,50,0.5z"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/index.tsx b/src/app/_components/icons/index.tsx
index 2ed1270..9b94594 100644
--- a/src/app/_components/icons/index.tsx
+++ b/src/app/_components/icons/index.tsx
@@ -50,3 +50,4 @@ export { ModeIcon } from "./gradient/logos/mode";
 export { BlastIcon } from "./gradient/logos/blast";
 export { ScrollIcon } from "./gradient/logos/scroll";
 export { LiskIcon } from "./gradient/logos/lisk";
+export { ZoraIcon } from "./gradient/logos/zora";
diff --git a/src/app/_components/supported-chains-section.tsx b/src/app/_components/supported-chains-section.tsx
index 8dbb10a..55fc60d 100644
--- a/src/app/_components/supported-chains-section.tsx
+++ b/src/app/_components/supported-chains-section.tsx
@@ -11,6 +11,7 @@ import {
   BlastIcon,
   ScrollIcon,
   LiskIcon,
+  ZoraIcon,
 } from "@/app/_components/icons";
 import { Text } from "@/app/_components/text";
 
@@ -61,6 +62,11 @@ const chains = [
     Icon: LiskIcon,
     containerClassName: "sm:col-start-3",
   },
+  {
+    label: "Zora",
+    Icon: ZoraIcon,
+    containerClassName: "sm:col-start-4",
+  },
 ];
 
 const variants = {
diff --git a/src/app/_components/supported-chains-ticker.tsx b/src/app/_components/supported-chains-ticker.tsx
index bfffdda..8e6b711 100644
--- a/src/app/_components/supported-chains-ticker.tsx
+++ b/src/app/_components/supported-chains-ticker.tsx
@@ -13,6 +13,7 @@ import modeLogoSrc from "@/app/_assets/logos/mode.svg";
 import blastLogoSrc from "@/app/_assets/logos/blast.svg";
 import scrollLogoSrc from "@/app/_assets/logos/scroll.svg";
 import liskLogoSrc from "@/app/_assets/logos/lisk.svg";
+import zoraLogoSrc from "@/app/_assets/logos/zora.svg";
 
 const chains = [
   {
@@ -48,6 +49,9 @@ const chains = [
   {
     logo: <Image src={liskLogoSrc} alt="lisk logo" />,
   },
+  {
+    logo: <Image src={zoraLogoSrc} alt="zora logo" />,
+  },
 ];
 
 export function SupportedChainsTicker() {

From ebdff99f51c27145f7952604801739aa5113ce9c Mon Sep 17 00:00:00 2001
From: Gerhard Steenkamp <gerhard@umaproject.org>
Date: Mon, 19 Aug 2024 11:22:54 +0200
Subject: [PATCH 2/4] jsx fixes

---
 src/app/_components/icons/gradient/chart-up.tsx   | 2 +-
 src/app/_components/icons/gradient/logos/zora.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/_components/icons/gradient/chart-up.tsx b/src/app/_components/icons/gradient/chart-up.tsx
index 7c6976f..f6d96f7 100644
--- a/src/app/_components/icons/gradient/chart-up.tsx
+++ b/src/app/_components/icons/gradient/chart-up.tsx
@@ -22,7 +22,7 @@ export function ChartUpIcon(props: SVGProps<SVGSVGElement>) {
         strokeWidth="10"
         strokeLinecap="round"
         strokeLinejoin="round"
-        stroke-dasharray="26 26"
+        strokeDasharray="26 26"
         mask="url(#path-1-inside-1_1942_3398)"
       />
       <path
diff --git a/src/app/_components/icons/gradient/logos/zora.tsx b/src/app/_components/icons/gradient/logos/zora.tsx
index f52af2a..9782db9 100644
--- a/src/app/_components/icons/gradient/logos/zora.tsx
+++ b/src/app/_components/icons/gradient/logos/zora.tsx
@@ -64,7 +64,7 @@ export function ZoraIcon({ variant = "aqua", ...props }: LogoIconProps) {
         <path
           stroke={baseColors[variant]}
           fill="url(#radial_gradient)"
-          stroke-width="1"
+          strokeWidth="1"
           d="M50,0.5c27.3,0,49.5,22.2,49.5,49.5S77.3,99.5,50,99.5S0.5,77.3,0.5,50S22.7,0.5,50,0.5z"
         />
       </g>

From 59631584409cf369e47426cc4ac584863c3acca3 Mon Sep 17 00:00:00 2001
From: Gerhard Steenkamp <gerhard@umaproject.org>
Date: Tue, 20 Aug 2024 17:26:12 +0200
Subject: [PATCH 3/4] auto columns on supported chains grid

---
 .../_components/supported-chains-section.tsx  | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/app/_components/supported-chains-section.tsx b/src/app/_components/supported-chains-section.tsx
index 8582e3b..fda9b3b 100644
--- a/src/app/_components/supported-chains-section.tsx
+++ b/src/app/_components/supported-chains-section.tsx
@@ -12,6 +12,7 @@ import {
   ScrollIcon,
   LiskIcon,
   RedstoneIcon,
+  ZoraIcon,
 } from "@/app/_components/icons";
 import { Text } from "@/app/_components/text";
 
@@ -67,6 +68,11 @@ const chains = [
     Icon: RedstoneIcon,
     containerClassName: "",
   },
+  {
+    label: "Zora",
+    Icon: ZoraIcon,
+    containerClassName: "",
+  },
 ];
 
 const variants = {
@@ -94,18 +100,26 @@ export function SupportedChainsSection(props: { variant: "teal" | "purple" }) {
           Supported Chains
         </Text>
       </div>
-      <div className="grid grid-cols-1 gap-x-12 gap-y-12 sm:grid-cols-3 sm:self-center md:grid-cols-4">
+      <div
+        style={
+          {
+            "--item-size-small": "88px",
+            "--item-size-large": "102px",
+          } as React.CSSProperties
+        }
+        className="grid w-full max-w-[800px] grid-cols-[repeat(auto-fill,minmax(var(--item-size-small),1fr))] gap-x-12 gap-y-12 sm:self-center md:grid-cols-[repeat(auto-fill,minmax(var(--item-size-large),1fr))]"
+      >
         {chains.map((chain, index) => (
           <div
             key={index}
             className={twMerge(
-              "flex flex-col items-center gap-4",
+              "flex w-[102px] flex-col items-center gap-4 justify-self-center",
               chain.containerClassName,
             )}
           >
             <div
               className={twMerge(
-                "flex h-[88px] w-[88px] flex-col items-center justify-center rounded-2xl md:h-[108px] md:w-[108px]",
+                "flex h-[--item-size-small] w-[--item-size-small] flex-col items-center justify-center rounded-2xl md:h-[--item-size-large] md:w-[--item-size-large]",
                 variants[props.variant].bgClassName,
               )}
             >

From 7b4dbe3887f5d9228aa615f172f4a0d32aad7042 Mon Sep 17 00:00:00 2001
From: Gerhard Steenkamp <gerhard@umaproject.org>
Date: Tue, 20 Aug 2024 17:34:19 +0200
Subject: [PATCH 4/4] refactor

---
 src/app/_components/supported-chains-section.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/app/_components/supported-chains-section.tsx b/src/app/_components/supported-chains-section.tsx
index fda9b3b..4ced50a 100644
--- a/src/app/_components/supported-chains-section.tsx
+++ b/src/app/_components/supported-chains-section.tsx
@@ -100,26 +100,18 @@ export function SupportedChainsSection(props: { variant: "teal" | "purple" }) {
           Supported Chains
         </Text>
       </div>
-      <div
-        style={
-          {
-            "--item-size-small": "88px",
-            "--item-size-large": "102px",
-          } as React.CSSProperties
-        }
-        className="grid w-full max-w-[800px] grid-cols-[repeat(auto-fill,minmax(var(--item-size-small),1fr))] gap-x-12 gap-y-12 sm:self-center md:grid-cols-[repeat(auto-fill,minmax(var(--item-size-large),1fr))]"
-      >
+      <div className="grid w-full max-w-[800px] grid-cols-[repeat(auto-fill,minmax(var(--item-size),1fr))] gap-x-12 gap-y-12 [--item-size:88px] sm:self-center md:[--item-size:102px]">
         {chains.map((chain, index) => (
           <div
             key={index}
             className={twMerge(
-              "flex w-[102px] flex-col items-center gap-4 justify-self-center",
+              "flex flex-col items-center gap-4 justify-self-center",
               chain.containerClassName,
             )}
           >
             <div
               className={twMerge(
-                "flex h-[--item-size-small] w-[--item-size-small] flex-col items-center justify-center rounded-2xl md:h-[--item-size-large] md:w-[--item-size-large]",
+                "flex h-[--item-size] w-[--item-size] flex-col items-center justify-center rounded-2xl",
                 variants[props.variant].bgClassName,
               )}
             >