feat: added gas price indicator (#184)

* added gas price indicator * text color update
ArkProjectNFTs · Apr 9, 2024 · 5d6d41f · 5d6d41f
1 parent 271177b
commit 5d6d41f
Show file tree

Hide file tree

Showing 12 changed files with 226 additions and 4 deletions.
diff --git a/apps/web/src/app/(routes)/bridge/_components/GasNotification.tsx b/apps/web/src/app/(routes)/bridge/_components/GasNotification.tsx
@@ -0,0 +1,52 @@
+import {
+  HighFeesIcon,
+  LowFeesIcon,
+  MediumFeesIcon,
+  Notification,
+} from "design-system";
+import { type ComponentProps } from "react";
+
+import { api } from "~/utils/api";
+
+interface GasNotificationProps {
+  className?: string;
+}
+
+function getFeesIcon(gasPrice: number): {
+  icon?: React.ReactNode;
+  text: string;
+  variant: ComponentProps<typeof Notification>["variant"];
+} {
+  if (gasPrice >= 45) {
+    return { icon: <HighFeesIcon />, text: "HIGH", variant: "folly_red" };
+  } else if (gasPrice >= 25) {
+    return {
+      icon: <MediumFeesIcon />,
+      text: "MID",
+      variant: "sunshine_yellow",
+    };
+  }
+  return { icon: <LowFeesIcon />, text: "LOW", variant: "mantis_green" };
+}
+
+export default function GasNotification({ className }: GasNotificationProps) {
+  const { data: gasPrice } = api.gasInfo.getCurrentGasPrice.useQuery(
+    undefined,
+    { refetchInterval: 5000 }
+  );
+
+  if (gasPrice === undefined) {
+    return null;
+  }
+
+  const { icon, text, variant } = getFeesIcon(gasPrice);
+
+  return (
+    <Notification className={className} icon={icon} variant={variant}>
+      <div className="mt-1.5 flex w-full items-center justify-between text-asteroid-grey-800 dark:text-asteroid-grey-900">
+        <p>Current Gas price</p>
+        <p>{text}</p>
+      </div>
+    </Notification>
+  );
+}
diff --git a/apps/web/src/app/(routes)/bridge/_components/TransferEthereumNftsAction.tsx b/apps/web/src/app/(routes)/bridge/_components/TransferEthereumNftsAction.tsx
@@ -1,9 +1,12 @@
 import clsx from "clsx";
 import { Button, GasIcon, Notification, Typography } from "design-system";
 
+import { api } from "~/utils/api";
+
 import useEthereumCollectionApproval from "../_hooks/useEthereumCollectionApproval";
 import useEthereumNftDeposit from "../_hooks/useEthereumNftDeposit";
 import useNftSelection from "../_hooks/useNftSelection";
+import GasNotification from "./GasNotification";
 
 function ApproveNfts() {
   const { approveForAll, isApproveLoading, isSigning } =
@@ -98,14 +101,17 @@ function TransferNfts() {
   const { depositTokens, isSigning } = useEthereumNftDeposit();
   const { totalSelectedNfts } = useNftSelection();
 
+  api.gasInfo.getCurrentGasPrice.useQuery();
+
   const disabled = totalSelectedNfts === 0 || isSigning;
 
   return (
     <>
       {totalSelectedNfts > 0 && (
         <>
+          <GasNotification className="mt-8" />
           <Notification
-            className="mt-8"
+            className="mt-4"
             icon={<GasIcon />}
             variant="mantis_green"
           >

diff --git a/apps/web/src/server/api/root.ts b/apps/web/src/server/api/root.ts
@@ -1,6 +1,7 @@
 import { createTRPCRouter } from "~/server/api/trpc";
 
 import { bridgeRequestRouter } from "./routers/bridgeRequest";
+import { gasInfoRouter } from "./routers/gasInfo";
 import { l1NftsRouter } from "./routers/l1Nfts";
 import { l2NftsRouter } from "./routers/l2Nfts";
 import { statsRouter } from "./routers/stats";
@@ -12,6 +13,7 @@ import { statsRouter } from "./routers/stats";
  */
 export const appRouter = createTRPCRouter({
   bridgeRequest: bridgeRequestRouter,
+  gasInfo: gasInfoRouter,
   l1Nfts: l1NftsRouter,
   l2Nfts: l2NftsRouter,
   stats: statsRouter,

diff --git a/apps/web/src/server/api/routers/gasInfo.ts b/apps/web/src/server/api/routers/gasInfo.ts
@@ -0,0 +1,35 @@
+import { createTRPCRouter, publicProcedure } from "../trpc";
+
+interface EtherscanGasInfoResponse {
+  result: {
+    FastGasPrice: string;
+    LastBlock: string;
+    ProposeGasPrice: string;
+    SafeGasPrice: string;
+    gasUsedRatio: string;
+    suggestBaseFee: string;
+  };
+}
+
+export const gasInfoRouter = createTRPCRouter({
+  getCurrentGasPrice: publicProcedure.query(async () => {
+    const url = `${
+      process.env.ETHERSCAN_API_DOMAIN ?? ""
+    }?module=gastracker&action=gasoracle&apikey=${
+      process.env.ETHERSCAN_API_KEY
+    }`;
+
+    try {
+      const gasPriceResponse = await fetch(url, {
+        headers: { "Content-Type": "application/json" },
+      });
+
+      const gasPrice =
+        (await gasPriceResponse.json()) as EtherscanGasInfoResponse;
+
+      return parseInt(gasPrice.result.SafeGasPrice);
+    } catch (error) {
+      console.error(error);
+    }
+  }),
+});
diff --git a/apps/web/src/server/api/routers/l1Nfts.ts b/apps/web/src/server/api/routers/l1Nfts.ts
@@ -74,6 +74,7 @@ export const l1NftsRouter = createTRPCRouter({
         return {
           contractAddress: contract.address,
           isBridgeable,
+          // isBridgeable,
           media,
           name: contract.name ?? contract.symbol ?? "Unknown",
           totalBalance: contract.totalBalance,

diff --git a/packages/design-system/src/components/Notification.tsx b/packages/design-system/src/components/Notification.tsx
@@ -8,6 +8,10 @@ const variants = {
     "bg-playground-purple-100 text-playground-purple-800 dark:bg-playground-purple-300 dark:text-playground-purple-900",
   space_blue:
     "bg-space-blue-100 text-space-blue-800 dark:bg-space-blue-300 dark:text-space-blue-900",
+  sunshine_yellow:
+    "bg-sunshine-yellow-100 text-sunshine-yellow-800 dark:bg-sunshine-yellow-300 dark:text-sunshine-yellow-900",
+  folly_red:
+    "bg-folly-red-100 text-folly-red-800 dark:bg-folly-red-300 dark:text-folly-red-900",
 };
 
 interface NotificationsProps {
@@ -32,7 +36,7 @@ export function Notification({
       )}
     >
       <span className="flex-shrink-0">{icon}</span>
-      <Typography variant="body_text_14" component="p">
+      <Typography variant="body_text_14" component="p" className="w-full">
         {children}
       </Typography>
     </div>

diff --git a/packages/design-system/src/icons/HighFeesIcon.tsx b/packages/design-system/src/icons/HighFeesIcon.tsx
@@ -0,0 +1,39 @@
+export function HighFeesIcon() {
+  return (
+    <>
+      <svg width="33" height="32" viewBox="0 0 33 32" fill="none">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.55476 22.997C3.17072 12.0156 8.94314 8 16.5003 8C24.0574 8 29.8298 12.0156 30.4458 22.997C30.5076 24.0999 29.6048 25 28.5003 25H19.9651C20.3055 24.4117 20.5002 23.7286 20.5002 23C20.5002 20.7909 18.7094 19 16.5002 19C14.2911 19 12.5002 20.7909 12.5002 23C12.5002 23.7286 12.695 24.4117 13.0354 25H4.50028C3.39571 25 2.4929 24.0999 2.55476 22.997Z"
+          fill="#FF8A88"
+        />
+        <path
+          d="M2.55476 22.997L3.05397 23.025L2.55476 22.997ZM30.4458 22.997L30.945 22.969L30.4458 22.997ZM19.9651 25L19.5323 24.7496L19.0983 25.5H19.9651V25ZM13.0354 25V25.5H13.9022L13.4682 24.7496L13.0354 25ZM17.0003 8C17.0003 7.72386 16.7764 7.5 16.5003 7.5C16.2241 7.5 16.0003 7.72386 16.0003 8H17.0003ZM16.0003 12C16.0003 12.2761 16.2241 12.5 16.5003 12.5C16.7764 12.5 17.0003 12.2761 17.0003 12H16.0003ZM16.5003 7.5C12.6354 7.5 9.16248 8.52804 6.57752 11.0205C3.99373 13.5119 2.36802 17.3981 2.05554 22.969L3.05397 23.025C3.35746 17.6145 4.92593 14.0022 7.27163 11.7404C9.61616 9.47974 12.808 8.5 16.5003 8.5V7.5ZM30.945 22.969C30.6325 17.3981 29.0068 13.5119 26.423 11.0205C23.8381 8.52804 20.3651 7.5 16.5003 7.5V8.5C20.1925 8.5 23.3844 9.47974 25.7289 11.7404C28.0746 14.0022 29.6431 17.6145 29.9466 23.025L30.945 22.969ZM28.5003 25.5C29.8739 25.5 31.0239 24.3763 30.945 22.969L29.9466 23.025C29.9914 23.8234 29.3358 24.5 28.5003 24.5V25.5ZM19.9651 25.5H28.5003V24.5H19.9651V25.5ZM20.0002 23C20.0002 23.6383 19.8298 24.2353 19.5323 24.7496L20.3979 25.2504C20.7811 24.588 21.0002 23.8188 21.0002 23H20.0002ZM16.5002 19.5C18.4332 19.5 20.0002 21.067 20.0002 23H21.0002C21.0002 20.5147 18.9855 18.5 16.5002 18.5V19.5ZM13.0002 23C13.0002 21.067 14.5672 19.5 16.5002 19.5V18.5C14.015 18.5 12.0002 20.5147 12.0002 23H13.0002ZM13.4682 24.7496C13.1707 24.2353 13.0002 23.6383 13.0002 23H12.0002C12.0002 23.8188 12.2194 24.588 12.6026 25.2504L13.4682 24.7496ZM4.50028 25.5H13.0354V24.5H4.50028V25.5ZM2.05554 22.969C1.97661 24.3763 3.12666 25.5 4.50028 25.5V24.5C3.66475 24.5 3.00919 23.8234 3.05397 23.025L2.05554 22.969ZM16.0003 8V12H17.0003V8H16.0003Z"
+          fill="#0E2230"
+        />
+        <circle cx="16.5" cy="23" r="4" fill="#FFABA7" stroke="#0E2230" />
+        <path
+          d="M5.57505 13.8869L7.92536 15.6121"
+          stroke="#0E2230"
+          strokeLinecap="round"
+        />
+        <path
+          d="M27.9249 13.8869L25.5746 15.6121"
+          stroke="#0E2230"
+          strokeLinecap="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M20.3805 22.2613L20.8263 23.5255L26.412 20.6841C27.4766 20.1425 26.8672 18.5274 25.7102 18.8241L19.7109 20.3623L19.7234 20.3975C20.0861 20.9398 20.3198 21.5757 20.3805 22.2613Z"
+          fill="#FFABA7"
+        />
+        <path
+          d="M20.3805 22.2613L19.8825 22.3054L19.888 22.3681L19.909 22.4275L20.3805 22.2613ZM20.8263 23.5255L20.3548 23.6917L20.5445 24.2298L21.053 23.9711L20.8263 23.5255ZM26.412 20.6841L26.6387 21.1297L26.412 20.6841ZM25.7102 18.8241L25.8344 19.3084L25.7102 18.8241ZM19.7109 20.3623L19.5868 19.8779L19.0578 20.0135L19.2394 20.5285L19.7109 20.3623ZM19.7234 20.3975L19.2518 20.5638L19.2728 20.6232L19.3078 20.6755L19.7234 20.3975ZM19.909 22.4275L20.3548 23.6917L21.2978 23.3592L20.8521 22.095L19.909 22.4275ZM21.053 23.9711L26.6387 21.1297L26.1853 20.2384L20.5996 23.0798L21.053 23.9711ZM26.6387 21.1297C28.2355 20.3174 27.3215 17.8948 25.586 18.3398L25.8344 19.3084C26.4129 19.1601 26.7176 19.9676 26.1853 20.2384L26.6387 21.1297ZM25.586 18.3398L19.5868 19.8779L19.8351 20.8466L25.8344 19.3084L25.586 18.3398ZM19.2394 20.5285L19.2518 20.5638L20.1949 20.2312L20.1825 20.196L19.2394 20.5285ZM19.3078 20.6755C19.6251 21.1499 19.8294 21.7057 19.8825 22.3054L20.8786 22.2172C20.8103 21.4456 20.5471 20.7296 20.139 20.1195L19.3078 20.6755Z"
+          fill="#0E2230"
+        />
+      </svg>
+    </>
+  );
+}
diff --git a/packages/design-system/src/icons/LowFeesIcon.tsx b/packages/design-system/src/icons/LowFeesIcon.tsx
@@ -0,0 +1,39 @@
+export function LowFeesIcon() {
+  return (
+    <>
+      <svg width="33" height="32" viewBox="0 0 33 32" fill="none">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.55476 22.997C3.17072 12.0156 8.94314 8 16.5003 8C24.0574 8 29.8298 12.0156 30.4458 22.997C30.5076 24.0999 29.6048 25 28.5003 25H19.9651C20.3055 24.4117 20.5002 23.7286 20.5002 23C20.5002 20.7909 18.7094 19 16.5002 19C14.2911 19 12.5002 20.7909 12.5002 23C12.5002 23.7286 12.695 24.4117 13.0354 25H4.50028C3.39571 25 2.4929 24.0999 2.55476 22.997Z"
+          fill="#96DC89"
+        />
+        <path
+          d="M2.55476 22.997L3.05397 23.025L2.55476 22.997ZM30.4458 22.997L30.945 22.969L30.4458 22.997ZM19.9651 25L19.5323 24.7496L19.0983 25.5H19.9651V25ZM13.0354 25V25.5H13.9022L13.4682 24.7496L13.0354 25ZM17.0003 8C17.0003 7.72386 16.7764 7.5 16.5003 7.5C16.2241 7.5 16.0003 7.72386 16.0003 8H17.0003ZM16.0003 12C16.0003 12.2761 16.2241 12.5 16.5003 12.5C16.7764 12.5 17.0003 12.2761 17.0003 12H16.0003ZM16.5003 7.5C12.6354 7.5 9.16248 8.52804 6.57752 11.0205C3.99373 13.5119 2.36802 17.3981 2.05554 22.969L3.05397 23.025C3.35746 17.6145 4.92593 14.0022 7.27163 11.7404C9.61616 9.47974 12.808 8.5 16.5003 8.5V7.5ZM30.945 22.969C30.6325 17.3981 29.0068 13.5119 26.423 11.0205C23.8381 8.52804 20.3651 7.5 16.5003 7.5V8.5C20.1925 8.5 23.3844 9.47974 25.7289 11.7404C28.0746 14.0022 29.6431 17.6145 29.9466 23.025L30.945 22.969ZM28.5003 25.5C29.8739 25.5 31.0239 24.3763 30.945 22.969L29.9466 23.025C29.9914 23.8234 29.3358 24.5 28.5003 24.5V25.5ZM19.9651 25.5H28.5003V24.5H19.9651V25.5ZM20.0002 23C20.0002 23.6383 19.8298 24.2353 19.5323 24.7496L20.3979 25.2504C20.7811 24.588 21.0002 23.8188 21.0002 23H20.0002ZM16.5002 19.5C18.4332 19.5 20.0002 21.067 20.0002 23H21.0002C21.0002 20.5147 18.9855 18.5 16.5002 18.5V19.5ZM13.0002 23C13.0002 21.067 14.5672 19.5 16.5002 19.5V18.5C14.015 18.5 12.0002 20.5147 12.0002 23H13.0002ZM13.4682 24.7496C13.1707 24.2353 13.0002 23.6383 13.0002 23H12.0002C12.0002 23.8188 12.2194 24.588 12.6026 25.2504L13.4682 24.7496ZM4.50028 25.5H13.0354V24.5H4.50028V25.5ZM2.05554 22.969C1.97661 24.3763 3.12666 25.5 4.50028 25.5V24.5C3.66475 24.5 3.00919 23.8234 3.05397 23.025L2.05554 22.969ZM16.0003 8V12H17.0003V8H16.0003Z"
+          fill="#0E2230"
+        />
+        <circle cx="16.5" cy="23" r="4" fill="#B8E6B0" stroke="#0E2230" />
+        <path
+          d="M5.57505 13.8869L7.92536 15.6121"
+          stroke="#0E2230"
+          strokeLinecap="round"
+        />
+        <path
+          d="M27.9249 13.8869L25.5746 15.6121"
+          stroke="#0E2230"
+          strokeLinecap="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13.1492 20.2827L7.46029 18.8241C6.30329 18.5274 5.69393 20.1425 6.75853 20.6841L12.3442 23.5255L12.4446 23.2408C12.4129 23.0381 12.3965 22.8303 12.3965 22.6188C12.3965 21.7468 12.6755 20.9399 13.1492 20.2827Z"
+          fill="#B8E6B0"
+        />
+        <path
+          d="M7.46029 18.8241L7.33611 19.3084H7.33611L7.46029 18.8241ZM13.1492 20.2827L13.5548 20.575L13.9833 19.9804L13.2734 19.7983L13.1492 20.2827ZM6.75853 20.6841L6.53183 21.1297H6.53183L6.75853 20.6841ZM12.3442 23.5255L12.1175 23.9711L12.626 24.2298L12.8157 23.6917L12.3442 23.5255ZM12.4446 23.2408L12.9161 23.407L12.958 23.2882L12.9386 23.1636L12.4446 23.2408ZM7.33611 19.3084L13.025 20.767L13.2734 19.7983L7.58447 18.3398L7.33611 19.3084ZM6.98523 20.2384C6.45292 19.9676 6.75762 19.1601 7.33611 19.3084L7.58447 18.3398C5.84896 17.8948 4.93494 20.3174 6.53183 21.1297L6.98523 20.2384ZM12.5709 23.0798L6.98523 20.2384L6.53183 21.1297L12.1175 23.9711L12.5709 23.0798ZM11.973 23.0745L11.8726 23.3592L12.8157 23.6917L12.9161 23.407L11.973 23.0745ZM12.9386 23.1636C12.9109 22.9864 12.8965 22.8044 12.8965 22.6188H11.8965C11.8965 22.8562 11.9149 23.0898 11.9506 23.3179L12.9386 23.1636ZM12.8965 22.6188C12.8965 21.8551 13.1405 21.15 13.5548 20.575L12.7435 19.9903C12.2106 20.7299 11.8965 21.6384 11.8965 22.6188H12.8965Z"
+          fill="#0E2230"
+        />
+      </svg>
+    </>
+  );
+}
diff --git a/packages/design-system/src/icons/MediumFeesIcon.tsx b/packages/design-system/src/icons/MediumFeesIcon.tsx
@@ -0,0 +1,39 @@
+export function MediumFeesIcon() {
+  return (
+    <>
+      <svg width="33" height="32" viewBox="0 0 33 32" fill="none">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M2.55476 22.997C3.17072 12.0156 8.94314 8 16.5003 8C24.0574 8 29.8298 12.0156 30.4458 22.997C30.5076 24.0999 29.6048 25 28.5003 25H19.9651C20.3055 24.4117 20.5002 23.7286 20.5002 23C20.5002 20.7909 18.7094 19 16.5002 19C14.2911 19 12.5002 20.7909 12.5002 23C12.5002 23.7286 12.695 24.4117 13.0354 25H4.50028C3.39571 25 2.4929 24.0999 2.55476 22.997Z"
+          fill="#FFE76A"
+        />
+        <path
+          d="M2.55476 22.997L3.05397 23.025L2.55476 22.997ZM30.4458 22.997L30.945 22.969L30.4458 22.997ZM19.9651 25L19.5323 24.7496L19.0983 25.5H19.9651V25ZM13.0354 25V25.5H13.9022L13.4682 24.7496L13.0354 25ZM17.0003 8C17.0003 7.72386 16.7764 7.5 16.5003 7.5C16.2241 7.5 16.0003 7.72386 16.0003 8H17.0003ZM16.0003 12C16.0003 12.2761 16.2241 12.5 16.5003 12.5C16.7764 12.5 17.0003 12.2761 17.0003 12H16.0003ZM16.5003 7.5C12.6354 7.5 9.16248 8.52804 6.57752 11.0205C3.99373 13.5119 2.36802 17.3981 2.05554 22.969L3.05397 23.025C3.35746 17.6145 4.92593 14.0022 7.27163 11.7404C9.61616 9.47974 12.808 8.5 16.5003 8.5V7.5ZM30.945 22.969C30.6325 17.3981 29.0068 13.5119 26.423 11.0205C23.8381 8.52804 20.3651 7.5 16.5003 7.5V8.5C20.1925 8.5 23.3844 9.47974 25.7289 11.7404C28.0746 14.0022 29.6431 17.6145 29.9466 23.025L30.945 22.969ZM28.5003 25.5C29.8739 25.5 31.0239 24.3763 30.945 22.969L29.9466 23.025C29.9914 23.8234 29.3358 24.5 28.5003 24.5V25.5ZM19.9651 25.5H28.5003V24.5H19.9651V25.5ZM20.0002 23C20.0002 23.6383 19.8298 24.2353 19.5323 24.7496L20.3979 25.2504C20.7811 24.588 21.0002 23.8188 21.0002 23H20.0002ZM16.5002 19.5C18.4332 19.5 20.0002 21.067 20.0002 23H21.0002C21.0002 20.5147 18.9855 18.5 16.5002 18.5V19.5ZM13.0002 23C13.0002 21.067 14.5672 19.5 16.5002 19.5V18.5C14.015 18.5 12.0002 20.5147 12.0002 23H13.0002ZM13.4682 24.7496C13.1707 24.2353 13.0002 23.6383 13.0002 23H12.0002C12.0002 23.8188 12.2194 24.588 12.6026 25.2504L13.4682 24.7496ZM4.50028 25.5H13.0354V24.5H4.50028V25.5ZM2.05554 22.969C1.97661 24.3763 3.12666 25.5 4.50028 25.5V24.5C3.66475 24.5 3.00919 23.8234 3.05397 23.025L2.05554 22.969ZM16.0003 8V12H17.0003V8H16.0003Z"
+          fill="#0E2230"
+        />
+        <circle cx="16.5" cy="23" r="4" fill="#FFEF96" stroke="#0E2230" />
+        <path
+          d="M5.57505 13.8869L7.92536 15.6121"
+          stroke="#0E2230"
+          strokeLinecap="round"
+        />
+        <path
+          d="M27.9249 13.8869L25.5746 15.6121"
+          stroke="#0E2230"
+          strokeLinecap="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.9496 18.9314L17.4488 13.3312C17.3424 12.1416 15.6166 12.106 15.4612 13.2903L14.7139 18.9889C15.2254 18.7514 15.7956 18.6188 16.3967 18.6188C16.9474 18.6188 17.4721 18.7301 17.9496 18.9314Z"
+          fill="#FFEF96"
+        />
+        <path
+          d="M17.4488 13.3312L16.9508 13.3758L17.4488 13.3312ZM17.9496 18.9314L17.7553 19.3921L18.5217 19.7152L18.4476 18.8868L17.9496 18.9314ZM15.4612 13.2903L14.9655 13.2253L15.4612 13.2903ZM14.7139 18.9889L14.2181 18.9239L14.0999 19.8253L14.9245 19.4424L14.7139 18.9889ZM16.9508 13.3758L17.4516 18.9759L18.4476 18.8868L17.9468 13.2867L16.9508 13.3758ZM15.957 13.3553C16.0347 12.7631 16.8976 12.7809 16.9508 13.3758L17.9468 13.2867C17.7872 11.5022 15.1985 11.4488 14.9655 13.2253L15.957 13.3553ZM15.2096 19.0539L15.957 13.3553L14.9655 13.2253L14.2181 18.9239L15.2096 19.0539ZM14.9245 19.4424C15.3714 19.2349 15.8698 19.1188 16.3967 19.1188V18.1188C15.7213 18.1188 15.0794 18.2679 14.5033 18.5354L14.9245 19.4424ZM16.3967 19.1188C16.8795 19.1188 17.3382 19.2162 17.7553 19.3921L18.1438 18.4707C17.606 18.2439 17.0153 18.1188 16.3967 18.1188V19.1188Z"
+          fill="#0E2230"
+        />
+      </svg>
+    </>
+  );
+}
diff --git a/packages/design-system/src/icons/MinusIcon.tsx b/packages/design-system/src/icons/MinusIcon.tsx
@@ -9,7 +9,7 @@ export function MinusIcon({ className }: MinusIconProps) {
       height="21"
       viewBox="0 0 20 21"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <path
         d="M16.6667 11.3334H3.33333C3.11232 11.3334 2.90036 11.2456 2.74408 11.0893C2.5878 10.9331 2.5 10.7211 2.5 10.5001C2.5 10.2791 2.5878 10.0671 2.74408 9.91083C2.90036 9.75455 3.11232 9.66675 3.33333 9.66675H16.6667C16.8877 9.66675 17.0996 9.75455 17.2559 9.91083C17.4122 10.0671 17.5 10.2791 17.5 10.5001C17.5 10.7211 17.4122 10.9331 17.2559 11.0893C17.0996 11.2456 16.8877 11.3334 16.6667 11.3334Z"

diff --git a/packages/design-system/src/index.tsx b/packages/design-system/src/index.tsx
@@ -33,3 +33,6 @@ export { PlusIcon } from "./icons/PlusIcon";
 export { MinusIcon } from "./icons/MinusIcon";
 export { GasIcon } from "./icons/GasIcon";
 export { ClockIcon } from "./icons/ClockIcon";
+export { LowFeesIcon } from "./icons/LowFeesIcon";
+export { MediumFeesIcon } from "./icons/MediumFeesIcon";
+export { HighFeesIcon } from "./icons/HighFeesIcon";
diff --git a/turbo.json b/turbo.json
@@ -31,7 +31,9 @@
     "PORT",
     "IPFS_GATEWAY",
     "NEXT_PUBLIC_ALCHEMY_STARKNET_RPC_ENDPOINT",
-    "NEXT_PUBLIC_ENVIRONMENT"
+    "NEXT_PUBLIC_ENVIRONMENT",
+    "ETHERSCAN_API_KEY",
+    "ETHERSCAN_API_DOMAIN"
   ],
   "pipeline": {
     "build:l1": {