From d3e210306f4d80d30adcacb400a691f0d04277b7 Mon Sep 17 00:00:00 2001
From: "James Morris, MS" <96435344+james-a-morris@users.noreply.github.com>
Date: Wed, 19 Feb 2025 11:25:22 -0500
Subject: [PATCH] feat: add hyperliquid (#99)

Signed-off-by: james-a-morris <jaamorris@cs.stonybrook.edu>
---
 src/app/_assets/logos/hyperliquid.svg         | 14 +++
 .../icons/gradient/logos/hyperliquid.tsx      | 96 +++++++++++++++++++
 src/app/_components/icons/index.tsx           |  1 +
 .../_components/supported-chains-section.tsx  |  5 +
 .../_components/supported-chains-ticker.tsx   |  4 +
 5 files changed, 120 insertions(+)
 create mode 100644 src/app/_assets/logos/hyperliquid.svg
 create mode 100644 src/app/_components/icons/gradient/logos/hyperliquid.tsx

diff --git a/src/app/_assets/logos/hyperliquid.svg b/src/app/_assets/logos/hyperliquid.svg
new file mode 100644
index 0000000..d6faa88
--- /dev/null
+++ b/src/app/_assets/logos/hyperliquid.svg
@@ -0,0 +1,14 @@
+<svg width="370" height="57" viewBox="0 0 370 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M65.3 23.7996C65.3 45.2996 52.1 52.1996 45.1 46.0996C39.4 41.0996 37.7 30.4996 29.1 29.3996C18.2 28.0996 17.2 42.5996 10 42.5996C1.6 42.5996 0 30.4996 0 24.1996C0 17.7996 1.8 9.09956 8.9 9.09956C17.2 9.09956 17.7 21.5996 28.1 20.8996C38.4 20.1996 38.6 7.19957 45.4 1.69957C51.3 -3.20043 65.3 1.99957 65.3 23.7996Z" fill="#9DAAB3"/>
+<path d="M96.2998 43.7996V2.09955H100.3V20.1996H124.7V2.09955H128.6V43.8996H124.7V23.5995H100.3V43.8996H96.2998V43.7996Z" fill="#9DAAB3"/>
+<path d="M139 56.4996L144.4 43.0996L132.7 14.9996H136.8L144.5 33.9996C144.9 35.1996 145.6 36.6996 146.4 38.5996C146.5 38.2996 146.6 37.9996 146.8 37.6996C146.9 37.3996 147 37.0996 147.2 36.7996C147.4 36.2996 147.7 35.7996 147.8 35.2996C147.9 34.7996 148.1 34.3996 148.3 33.8996L155.5 14.8996H159.4L143 56.3996H139V56.4996Z" fill="#9DAAB3"/>
+<path d="M163.2 56.4996V14.9996H166.9V16.7996C166.9 17.1996 166.9 17.4996 166.9 17.8996C166.9 18.2996 166.9 18.6996 166.9 19.0996C166.9 19.2996 166.9 19.4996 166.9 19.6996C166.9 19.8996 166.9 20.0996 166.9 20.2996C167.9 18.4996 169.2 16.9996 171.1 15.8996C172.9 14.7996 174.9 14.1996 177.2 14.1996C179.9 14.1996 182.2 14.8996 184.2 16.1996C186.2 17.4996 187.7 19.2996 188.8 21.5996C189.9 23.8996 190.4 26.4996 190.4 29.3996C190.4 32.3996 189.9 34.9996 188.8 37.2996C187.7 39.5996 186.1 41.3996 184.2 42.7996C182.2 44.0996 179.9 44.7996 177.4 44.7996C175.2 44.7996 173.3 44.2996 171.4 43.1996C169.6 42.1996 168.2 40.5996 167.1 38.5996C167.1 38.8996 167.1 39.1996 167.1 39.5996C167.1 39.8996 167.1 40.1996 167.1 40.4996C167.1 40.6996 167.1 40.9996 167.1 41.1996C167.1 41.3996 167.1 41.5996 167.1 41.7996V56.5996H163.2V56.4996ZM176.6 41.6996C178.6 41.6996 180.3 41.1996 181.8 40.0996C183.3 38.9996 184.4 37.5996 185.3 35.6996C186.1 33.7996 186.5 31.6996 186.5 29.2996C186.5 26.8996 186.1 24.7996 185.3 22.9996C184.5 21.1996 183.3 19.6996 181.8 18.6996C180.3 17.6996 178.6 17.1996 176.6 17.1996C174.7 17.1996 173 17.6996 171.5 18.6996C170 19.6996 168.8 21.0996 168 22.9996C167.2 24.7996 166.7 26.9996 166.7 29.3996C166.7 31.7996 167.1 33.9996 168 35.7996C168.8 37.6996 170 39.0996 171.5 40.1996C173 41.2996 174.7 41.6996 176.6 41.6996Z" fill="#9DAAB3"/>
+<path d="M208.1 44.6996C205.4 44.6996 203 44.0996 200.9 42.8996C198.8 41.6996 197.2 39.8995 196.1 37.5995C195 35.2995 194.4 32.4996 194.4 29.2996C194.4 26.3996 195 23.7996 196.2 21.4995C197.4 19.1995 199 17.3995 201 16.0995C203 14.7995 205.3 14.0995 207.8 14.0995C210.5 14.0995 212.8 14.6995 214.8 15.9995C216.7 17.1995 218.2 18.9996 219.2 21.1996C220.2 23.4996 220.7 26.0995 220.7 29.0995V29.8996H198.1C198.1 32.3996 198.5 34.4996 199.4 36.2996C200.3 38.0996 201.4 39.3996 202.9 40.2996C204.4 41.1996 206.2 41.6996 208.1 41.6996C210.4 41.6996 212.3 41.1995 213.9 40.0995C215.4 38.9995 216.4 37.2995 216.7 35.0995H220.4C220.1 36.8995 219.5 38.5996 218.4 39.9995C217.4 41.3995 216 42.5996 214.2 43.3996C212.6 44.1996 210.5 44.6996 208.1 44.6996ZM216.7 27.0995C216.7 24.0995 215.9 21.6996 214.3 19.8996C212.7 18.0996 210.6 17.1996 207.8 17.1996C205.1 17.1996 202.9 18.0995 201.2 19.9995C199.5 21.8995 198.5 24.1995 198.2 27.0995H216.7Z" fill="#9DAAB3"/>
+<path d="M226.4 43.7996V14.9996H230.1V16.8996C230.1 17.1996 230.1 17.4996 230.1 17.7996C230.1 18.0996 230.1 18.3996 230.1 18.6996C230.1 18.9996 230.1 19.3996 230.1 19.6996C230.1 19.9996 230.1 20.3996 230.1 20.7996C230.9 18.8996 232.1 17.2996 233.9 16.0996C235.6 14.8996 237.6 14.1996 239.9 14.1996C240.5 14.1996 241 14.1996 241.5 14.2996V17.8996C240.8 17.7996 240.2 17.7996 239.7 17.7996C237.8 17.7996 236.1 18.1996 234.7 19.0996C233.3 19.9996 232.2 21.1996 231.4 22.7996C230.6 24.3996 230.2 26.2996 230.2 28.3996V43.8996H226.4V43.7996Z" fill="#9DAAB3"/>
+<path d="M250.7 42.9996L250.5 43.7996H238.8L239 42.9996C242.2 42.6996 243.6 41.6996 244.1 39.2996L250.7 8.19958C251.4 4.99958 250.4 4.49958 247 5.19958L247.2 4.39957L254.4 1.99957H255.2L247.3 39.3996C246.7 41.6996 247.6 42.6996 250.7 42.9996Z" fill="#9DAAB3"/>
+<path d="M264 42.9995L263.8 43.7996H252L252.2 42.9995C255.4 42.6996 256.8 41.6996 257.3 39.2996L261.3 20.2996C262 17.0996 261.1 16.5996 257.6 17.2996L257.8 16.4995L265 14.0995H265.8L260.5 39.2996C260 41.6996 260.9 42.6996 264 42.9995ZM266 3.59955C267.6 3.59955 268.6 4.79955 268.4 6.39955C268.2 7.99955 266.8 9.09955 265.3 9.09955C263.7 9.09955 262.6 7.89955 262.8 6.39955C262.9 4.79955 264.3 3.59955 266 3.59955Z" fill="#9DAAB3"/>
+<path d="M284.2 52.1996L287.4 37.2996C285.4 41.6996 281.1 44.6996 276.7 44.6996C269.5 44.6996 266.1 37.8996 268.3 27.7996C269.8 20.3996 276.4 14.0995 284.2 14.0995C287.8 14.0995 290.8 15.6995 292 18.0995L294.7 14.0995H295.5L287.3 52.1996C286.7 54.7996 288.8 55.2996 290.9 55.6996L290.7 56.4996H277.2L277.4 55.6996C281.4 55.2996 283.7 54.7996 284.2 52.1996ZM278.7 42.5995C282.4 42.5995 286.1 39.3995 287.9 35.5995L290.3 24.1996C290.9 20.0996 289 15.7996 283.3 15.7996C277.9 15.7996 273.3 20.6996 271.8 27.7996C270 36.4996 272.6 42.5995 278.7 42.5995Z" fill="#9DAAB3"/>
+<path d="M335.8 42.9995L335.6 43.7996H323.8L324 42.9995C327.2 42.6996 328.6 41.6996 329.1 39.2996L333.1 20.2996C333.8 17.0996 332.9 16.5996 329.4 17.2996L329.6 16.4995L336.8 14.0995H337.6L332.3 39.2996C331.8 41.6996 332.7 42.6996 335.8 42.9995ZM337.8 3.59955C339.4 3.59955 340.4 4.79955 340.2 6.39955C340 7.99955 338.6 9.09955 337.1 9.09955C335.5 9.09955 334.4 7.89955 334.6 6.39955C334.8 4.79955 336.2 3.59955 337.8 3.59955Z" fill="#9DAAB3"/>
+<path d="M319.1 39.1996L321.8 26.4995L324.4 14.0995H323.6L316.4 16.4995L316.2 17.2996C319.6 16.5996 320.5 17.0996 319.9 20.2996L316.5 36.4995C312.7 39.9995 310.1 42.0995 306.8 42.0995C302.8 42.0995 300.7 39.3996 301.7 34.6996L306.1 14.0995H305.3L298.1 16.4995L297.9 17.2996C301.3 16.5996 302.3 17.0996 301.6 20.2996L298.5 35.0995C297.3 40.5995 300.1 44.5995 305.2 44.5995C308.6 44.5995 311.6 42.6996 316.3 37.6996L316.1 38.6996L315.1 43.5995H322.6L322.8 42.6996C319.5 42.5996 318.6 41.6996 319.1 39.1996Z" fill="#9DAAB3"/>
+<path d="M367.2 12.9996L369.5 1.89957H368.7L361.5 4.29957L361.3 5.09956C364.7 4.39956 365.6 4.89956 365 8.09956L363 17.5996C361.7 15.4996 358.9 14.0996 355.7 14.0996C347.8 14.0996 341.3 20.3996 339.6 28.2996C337.6 37.8996 340.9 44.6996 348.1 44.6996C352.6 44.6996 356.9 41.5996 358.9 37.1996L358.4 39.6996L357.5 43.7996L365 43.6996L365.2 42.8996C362.1 42.5996 361.2 41.5996 361.7 39.1996L367.2 12.9996ZM359.2 35.4996C357.5 39.3996 353.7 42.5996 350 42.5996C343.9 42.5996 341.3 36.4996 343 28.2996C344.6 20.5996 349.3 15.7996 354.7 15.7996C360.5 15.7996 362.4 20.3996 361.6 24.4996L361.3 25.7996L359.2 35.4996Z" fill="#9DAAB3"/>
+</svg>
diff --git a/src/app/_components/icons/gradient/logos/hyperliquid.tsx b/src/app/_components/icons/gradient/logos/hyperliquid.tsx
new file mode 100644
index 0000000..e545c34
--- /dev/null
+++ b/src/app/_components/icons/gradient/logos/hyperliquid.tsx
@@ -0,0 +1,96 @@
+import { LogoIconProps } from "./types";
+
+export function HyperliquidIcon({ variant = "aqua", ...props }: LogoIconProps) {
+  const linearGradientBasedId = `paint_linear_gradient_${variant}`;
+  return (
+    <svg
+      width="144"
+      height="144"
+      viewBox="0 0 144 144"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fill={`url(#${linearGradientBasedId}_1)`}
+        d="M144 71.6991C144 119.306 114.866 134.582 99.5156 120.98C86.8804 109.889 83.1211 86.4521 64.116 84.0456C39.9942 81.0113 37.9057 113.133 22.0334 113.133C3.5504 113.133 0 86.2428 0 72.4315C0 58.3063 3.96809 39.0542 19.736 39.0542C38.1146 39.0542 39.1588 66.5722 62.132 65.1073C85.0007 63.5379 85.4184 34.8689 100.247 22.6271C113.195 12.0593 144 23.4641 144 71.6991Z"
+      />
+      <defs>
+        <filter
+          id="filter0_b_564_7528"
+          x="-13.5"
+          y="-13"
+          width="72"
+          height="73"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="6.75" />
+          <feComposite
+            in2="SourceAlpha"
+            operator="in"
+            result="effect1_backgroundBlur_564_7528"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_backgroundBlur_564_7528"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint_linear_gradient_aqua_1"
+          x1="22.5649"
+          y1="0.641113"
+          x2="22.5649"
+          y2="45.6088"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stopColor="#6CF9D8" />
+          <stop offset="0.386534" stopColor="#B1FFED" />
+          <stop offset="0.508728" stopColor="white" />
+          <stop offset="0.513716" stopColor="#009A76" />
+          <stop offset="0.620948" stopColor="#C1FFF0" />
+          <stop offset="0.708229" stopColor="#29997F" />
+          <stop offset="0.78803" stopColor="#ADFFEC" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_purple_1"
+          x1="22.5649"
+          y1="0.641113"
+          x2="22.5649"
+          y2="72.5005"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stopColor="#A26CF9" />
+          <stop offset="0.386534" stopColor="#CEB1FF" />
+          <stop offset="0.508728" stopColor="white" />
+          <stop offset="0.513716" stopColor="#3B009A" />
+          <stop offset="0.620948" stopColor="#D8C1FF" />
+          <stop offset="0.708229" stopColor="#542999" />
+          <stop offset="0.78803" stopColor="#CCADFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint_linear_gradient_teal_1"
+          x1="22.5649"
+          y1="0.641113"
+          x2="22.5649"
+          y2="45.6088"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.234414" stopColor="#6CD3F9" />
+          <stop offset="0.386534" stopColor="#B1EAFF" />
+          <stop offset="0.508728" stopColor="white" />
+          <stop offset="0.513716" stopColor="#00719A" />
+          <stop offset="0.620948" stopColor="#C1EEFF" />
+          <stop offset="0.708229" stopColor="#297B99" />
+          <stop offset="0.78803" stopColor="#ADE9FF" />
+        </linearGradient>
+        <clipPath id="clip0_2_7">
+          <rect width="45" height="45" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/app/_components/icons/index.tsx b/src/app/_components/icons/index.tsx
index 24c194b..5af7985 100644
--- a/src/app/_components/icons/index.tsx
+++ b/src/app/_components/icons/index.tsx
@@ -60,3 +60,4 @@ export { AlephZeroIcon } from "./gradient/logos/alephzero";
 export { InkIcon } from "./gradient/logos/ink";
 export { SoneiumIcon } from "./gradient/logos/soneium";
 export { UnichainIcon } from "./gradient/logos/unichain";
+export { HyperliquidIcon } from "./gradient/logos/hyperliquid";
diff --git a/src/app/_components/supported-chains-section.tsx b/src/app/_components/supported-chains-section.tsx
index 6e385c9..a17c15f 100644
--- a/src/app/_components/supported-chains-section.tsx
+++ b/src/app/_components/supported-chains-section.tsx
@@ -18,6 +18,7 @@ import {
   InkIcon,
   SoneiumIcon,
   UnichainIcon,
+  HyperliquidIcon,
 } from "@/app/_components/icons";
 import { Text } from "@/app/_components/text";
 
@@ -98,6 +99,10 @@ const chains = [
     label: "Unichain",
     Icon: UnichainIcon,
   },
+  {
+    label: "Hyperliquid",
+    Icon: HyperliquidIcon,
+  },
 ];
 
 const variants = {
diff --git a/src/app/_components/supported-chains-ticker.tsx b/src/app/_components/supported-chains-ticker.tsx
index 2155126..37faafd 100644
--- a/src/app/_components/supported-chains-ticker.tsx
+++ b/src/app/_components/supported-chains-ticker.tsx
@@ -20,6 +20,7 @@ import alephZeroIconSrc from "@/app/_assets/logos/alephzero.svg";
 import inkLogoSrc from "@/app/_assets/logos/ink.svg";
 import soneiumLogoSrc from "@/app/_assets/logos/soneium.svg";
 import unichainLofoSrc from "@/app/_assets/logos/unichain.svg";
+import hyperliquidLogoSrc from "@/app/_assets/logos/hyperliquid.svg";
 
 const chains = [
   {
@@ -76,6 +77,9 @@ const chains = [
   {
     logo: <Image className="px-4" src={unichainLofoSrc} alt="unichain logo" />,
   },
+  {
+    logo: <Image className="px-4" src={hyperliquidLogoSrc} alt="hyperliquid logo" />,
+  },
 ];
 
 export function SupportedChainsTicker() {