Merge branch 'main' into primitives/Modal

.github/workflows/chromatic.yml

@@ -24,18 +24,15 @@ jobs:
       - name: Determine if deployment should proceed
         id: set_output
         run: |
-          should_run=false
+          should_run=true
 
-          if [[ "${{ github.event_name }}" == "push" || "${{ github.event.pull_request.draft }}" == "false" ]]; then
-            if git diff --name-only ${{ github.event.before }} ${{ github.sha }} | grep -E '\.(mdx|tsx|ts|css|svg|png|jpg|jpeg)$'; then
-              echo "Deploying. Relevant file changes detected."
-              should_run=true
-            else
-              echo "Not deploying. No relevant file changes detected."
-            fi
+          if [[ "${{ github.event_name }}" == "pull_request" && "${{ github.event.pull_request.draft }}" == "true" ]]; then
+            echo "Not deploying. It is a draft pull request."
+            should_run=false
           else
-            echo "Not deploying. Not a push or non-draft PR."
+            echo "Deploying. It is a non-draft pull request."
           fi
+
           echo "should_run=${should_run}" >> $GITHUB_OUTPUT
 
   deploy_chromatic:

package.json

@@ -30,7 +30,6 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^2.0.2",
     "@eslint/js": "^9.11.1",
-    "@fontsource/dm-mono": "^5.1.0",
     "@storybook/addon-a11y": "8.3.5",
     "@storybook/addon-essentials": "8.3.5",
     "@storybook/addon-interactions": "8.3.5",
@@ -130,6 +129,7 @@
     "embla-carousel-react": "^8.3.0",
     "graphql-request": "^7.1.0",
     "input-otp": "^1.2.4",
+    "moment": "^2.30.1",
     "next-themes": "^0.3.0",
     "react-day-picker": "8.10.1",
     "react-hook-form": "^7.53.0",

src/assets/fonts/stylesheet.css

@@ -0,0 +1,82 @@
+/* DM Sans */
+@font-face {
+  font-family: "DM Sans";
+  font-style: italic;
+  font-weight: 100 1000;
+  font-display: swap;
+  src: url(./dm-sans/dm-sans-italic.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "DM Sans";
+  font-style: normal;
+  font-weight: 100 1000;
+  font-display: swap;
+  src: url(./dm-sans/dm-sans-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* DM Mono */
+
+@font-face {
+  font-family: "DM Mono";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url(./dm-mono/dm-mono-italic-300.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "DM Mono";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./dm-mono/dm-mono-italic-400.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "DM Mono";
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url(./dm-mono/dm-mono-italic-500.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "DM Mono";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(./dm-mono/dm-mono-normal-300.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "DM Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./dm-mono/dm-mono-normal-400.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "DM Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(./dm-mono/dm-mono-normal-500.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/assets/icons/index.ts

@@ -17,4 +17,9 @@ export { default as GithubIcon } from "./github.svg?react";
 export { default as TwitterIcon } from "./twitter.svg?react";
 
 // Cryptocurrency Icons
-export { default as ETHIcon } from "./eth.svg?react";
+export { default as ETHIcon } from "./networks/eth.svg?react";
+export { default as PolygonIcon } from "./networks/polygon.svg?react";
+export { default as ArbitrumIcon } from "./networks/arbitrum.svg?react";
+export { default as AvaxIcon } from "./networks/avax.svg?react";
+export { default as BaseIcon } from "./networks/base.svg?react";
+export { default as OptimismIcon } from "./networks/optimism.svg?react";

src/components/Badges/RoundBadge/RoundBadge.mdx

@@ -0,0 +1,28 @@
+import { Meta, Canvas, Story, Description, Controls, Stories } from "@storybook/blocks";
+
+import { RoundBadge } from "./RoundBadge";
+import * as RoundBadgeStories from "./RoundBadge.stories";
+
+<Meta title="Components/RoundBadge" component={RoundBadge} of={RoundBadgeStories} />
+
+# RoundBadge
+
+The `RoundBadge` component is a versatile UI element that indicates either the status or type of a round. It supports various states and categories, each represented by a distinct badge.
+
+# Example
+
+<Story of={RoundBadgeStories.RoundStatusBadge} />
+
+# Controls
+
+<Controls of={RoundBadgeStories.RoundStatusBadge} />
+
+<Story of={RoundBadgeStories.RoundTypeBadge} />
+
+# Controls
+
+<Controls of={RoundBadgeStories.RoundTypeBadge} />
+
+# Other variations
+
+<Stories />