feat: add hyperliquid (#99)

Signed-off-by: james-a-morris <[email protected]>
across-protocol · Feb 19, 2025 · d3e2103 · d3e2103
1 parent 97a6b90
commit d3e2103
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 0 deletions.
diff --git a/src/app/_assets/logos/hyperliquid.svg b/src/app/_assets/logos/hyperliquid.svg
diff --git a/src/app/_components/icons/gradient/logos/hyperliquid.tsx 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
@@ -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
@@ -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
@@ -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() {