feat: add redstone (#54)

across-protocol · Aug 20, 2024 · ab63da1 · ab63da1
1 parent 797cfdf
commit ab63da1
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 4 deletions.
diff --git a/src/app/_assets/logos/redstone.svg b/src/app/_assets/logos/redstone.svg
diff --git 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/redstone.tsx b/src/app/_components/icons/gradient/logos/redstone.tsx
@@ -0,0 +1,49 @@
+import { LogoIconProps } from "./types";
+
+export function RedstoneIcon({ variant = "aqua", ...props }: LogoIconProps) {
+  const linearGradientBasedId = `paint_linear_gradient_${variant}`;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 200 200"
+      style={{ maskType: "luminance" }}
+      fill={`url(#${linearGradientBasedId}_5)`}
+      {...props}
+    >
+      <g clipPath="url(#redstone-a)">
+        <mask
+          id="redstone-b"
+          width="200"
+          height="200"
+          x="0"
+          y="0"
+          maskUnits="userSpaceOnUse"
+        >
+          <path fill="#fff" d="M200 0H0v200h200V0Z" />
+        </mask>
+        <g mask="url(#redstone-b)">
+          <path d="M75 75H50V50h25v25Z" opacity=".75" />
+          <path d="M75 100H50V75h25v25ZM75 125H50v-25h25v25Z" />
+          <path d="M75 150H50v-25h25v25ZM150 75h-25V50h25v25Z" opacity=".75" />
+          <path d="M150 100h-25V75h25v25ZM150 125h-25v-25h25v25Z" />
+          <path d="M150 150h-25v-25h25v25Z" opacity=".75" />
+          <path d="M100 150H75v-25h25v25ZM125 150h-25v-25h25v25ZM100 75H75V50h25v25ZM125 75h-25V50h25v25Z" />
+          <path fillOpacity=".25" d="M100 0H75v25h25V0Z" />
+          <path
+            fillOpacity=".75"
+            d="M125 175h-25v-25h25v25ZM175 100h-25v25h25v-25ZM50 125H25v-25h25v25ZM125 25h-25v25h25V25Z"
+          />
+          <path
+            fillOpacity=".25"
+            d="M125 0h-25v25h25V0ZM100 200H75v-25h25v25ZM125 200h-25v-25h25v25ZM200 75h-25v25h25V75ZM200 100h-25v25h25v-25ZM25 125H0v-25h25v25ZM25 100H0V75h25v25Z"
+          />
+          <path
+            fillOpacity=".75"
+            d="M100 25H75v25h25V25ZM100 175H75v-25h25v25ZM175 75h-25v25h25V75ZM50 100H25V75h25v25Z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git 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 { RedstoneIcon } from "./gradient/logos/redstone";
diff --git a/src/app/_components/supported-chains-section.tsx b/src/app/_components/supported-chains-section.tsx
@@ -11,6 +11,7 @@ import {
   BlastIcon,
   ScrollIcon,
   LiskIcon,
+  RedstoneIcon,
 } from "@/app/_components/icons";
 import { Text } from "@/app/_components/text";
 
@@ -59,7 +60,12 @@ const chains = [
   {
     label: "Lisk",
     Icon: LiskIcon,
-    containerClassName: "sm:col-start-3",
+    containerClassName: "",
+  },
+  {
+    label: "Redstone",
+    Icon: RedstoneIcon,
+    containerClassName: "",
   },
 ];
 
@@ -88,7 +94,7 @@ 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-5">
+      <div className="grid grid-cols-1 gap-x-12 gap-y-12 sm:grid-cols-3 sm:self-center md:grid-cols-4">
         {chains.map((chain, index) => (
           <div
             key={index}
@@ -108,7 +114,7 @@ export function SupportedChainsSection(props: { variant: "teal" | "purple" }) {
                 variant={props.variant}
               />
             </div>
-            <Text variant="body" className="capitalize text-light-300">
+            <Text variant="body" className="text-center capitalize text-light-300">
               {chain.label}
             </Text>
           </div>

diff --git 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 redstoneLogoSrc from "@/app/_assets/logos/redstone.svg";
 
 const chains = [
   {
@@ -48,6 +49,9 @@ const chains = [
   {
     logo: <Image src={liskLogoSrc} alt="lisk logo" />,
   },
+  {
+    logo: <Image src={redstoneLogoSrc} alt="redstone logo" />,
+  },
 ];
 
 export function SupportedChainsTicker() {