feat: gas explanation modal (#189)

* new gas fees notif + modal + whitelist form link * updated endpoint to get number of everai bridged * fix: build * new gas notif * updated marketplace links
ArkProjectNFTs · Apr 15, 2024 · 4125aa4 · 4125aa4
1 parent 11bf920
commit 4125aa4
Show file tree

Hide file tree

Showing 13 changed files with 233 additions and 38 deletions.
diff --git a/apps/web/src/app/(routes)/bridge/_components/GasNotification.tsx b/apps/web/src/app/(routes)/bridge/_components/GasNotification.tsx
@@ -43,9 +43,11 @@ export default function GasNotification({ className }: GasNotificationProps) {
 
   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 className="mt-1.5 flex w-full items-center justify-between">
+        <p className="text-asteroid-grey-800 dark:text-asteroid-grey-900">
+          Estimated Gas fees
+        </p>
+        <b>{text}</b>
       </div>
     </Notification>
   );

diff --git a/apps/web/src/app/(routes)/bridge/_components/GasRefundInfoModal.tsx b/apps/web/src/app/(routes)/bridge/_components/GasRefundInfoModal.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+  Typography,
+} from "design-system";
+import { useState } from "react";
+
+export default function GasRefundInfoModal() {
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog onOpenChange={setOpen} open={open}>
+      <DialogTrigger onClick={() => setOpen(true)}>
+        <b className="underline">More</b>
+      </DialogTrigger>
+      <DialogContent className="flex max-w-md flex-col gap-6">
+        <Typography
+          className="mt-12 text-center"
+          component="h3"
+          variant="heading_light_m"
+        >
+          How do gas fee
+          <br />
+          refunds work?
+        </Typography>
+        <Typography component="p" variant="body_text_18">
+          The first <b>200 holders</b> who bridge Everai to Starknet are
+          eligible for refunds.
+          <br />
+          <br /> Each of these holders can receive a refund of up to <b>$40</b>.
+          <br />
+          <br />
+          The refund will be made in <b>STRK</b> directly to your Starknet
+          wallet.
+        </Typography>
+        <Button color="default" onClick={() => setOpen(false)} size="small">
+          Got it!
+        </Button>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/app/(routes)/bridge/_components/TransferEthereumNftsAction.tsx b/apps/web/src/app/(routes)/bridge/_components/TransferEthereumNftsAction.tsx
@@ -7,6 +7,7 @@ import useEthereumCollectionApproval from "../_hooks/useEthereumCollectionApprov
 import useEthereumNftDeposit from "../_hooks/useEthereumNftDeposit";
 import useNftSelection from "../_hooks/useNftSelection";
 import GasNotification from "./GasNotification";
+import GasRefundInfoModal from "./GasRefundInfoModal";
 
 function ApproveNfts() {
   const { approveForAll, isApproveLoading, isSigning } =
@@ -113,9 +114,10 @@ function TransferNfts() {
           <Notification
             className="mt-4"
             icon={<GasIcon />}
-            variant="mantis_green"
+            variant="space_blue"
           >
-            ArkProject will refund gas costs in Stark!
+            This transfer is eligible to a gas refund of up to 40$.{" "}
+            <GasRefundInfoModal />
           </Notification>
         </>
       )}

diff --git a/apps/web/src/app/(routes)/lounge/_components/MarketplacesList.tsx b/apps/web/src/app/(routes)/lounge/_components/MarketplacesList.tsx
@@ -74,7 +74,7 @@ export default function MarketplacesList() {
         </a>
         <a
           className="flex h-[5.625rem] items-center justify-between rounded-xl border border-asteroid-grey-100 bg-white px-6 transition-colors hover:bg-space-blue-100 dark:border-space-blue-800 dark:bg-space-blue-900 dark:hover:bg-space-blue-800"
-          href="/"
+          href="https://hyperflex.market/starknet/collection/0x02acee8c430f62333cf0e0e7a94b2347b5513b4c25f699461dd8d7b23c072478"
         >
           <Image
             alt="Flex"

diff --git a/apps/web/src/app/_components/ConnectEthereumButton.tsx b/apps/web/src/app/_components/ConnectEthereumButton.tsx
@@ -32,7 +32,7 @@ export default function ConnectEthereumButton() {
   return (
     <>
       <button
-        className="group flex items-center gap-2.5 rounded-full bg-space-blue-900 py-2 pl-3 pr-2 text-sm font-semibold text-white transition-colors hover:bg-space-blue-800 dark:bg-space-blue-800 dark:hover:bg-space-blue-900"
+        className="group flex flex-shrink-0 items-center gap-2.5 rounded-full bg-space-blue-900 py-2 pl-3 pr-2 text-sm font-semibold text-white transition-colors hover:bg-space-blue-800 dark:bg-space-blue-800 dark:hover:bg-space-blue-900"
         onClick={toggleConnectEthereumWalletModal}
       >
         <Typography variant="button_text_xs">

diff --git a/apps/web/src/app/_components/ConnectStarkNetButton.tsx b/apps/web/src/app/_components/ConnectStarkNetButton.tsx
@@ -31,7 +31,7 @@ export default function ConnectStarknetButton() {
   return (
     <>
       <button
-        className="group flex items-center gap-2.5 rounded-full bg-space-blue-900 py-2 pl-3 pr-2 text-sm font-semibold text-white transition-colors hover:bg-space-blue-800 dark:bg-space-blue-800 dark:hover:bg-space-blue-900"
+        className="group flex flex-shrink-0 items-center gap-2.5 rounded-full bg-space-blue-900 py-2 pl-3 pr-2 text-sm font-semibold text-white transition-colors hover:bg-space-blue-800 dark:bg-space-blue-800 dark:hover:bg-space-blue-900"
         onClick={toggleConnectStarknetWalletModal}
       >
         <Typography variant="button_text_xs">

diff --git a/apps/web/src/app/_components/Header.tsx b/apps/web/src/app/_components/Header.tsx
@@ -107,6 +107,18 @@ export default function Header() {
         </Link>
         <BridgeLink />
         <LoungeLink />
+        <a
+          href="https://everai.typeform.com/to/PMyHymLn"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <Typography
+            className="transition-colors hover:text-space-blue-source"
+            variant="heading_light_xxs"
+          >
+            Collection owner
+          </Typography>
+        </a>
       </div>
       <div className="hidden items-center gap-4 md:flex">
         <div className="flex gap-4">

diff --git a/apps/web/src/server/api/routers/l1Nfts.ts b/apps/web/src/server/api/routers/l1Nfts.ts
@@ -74,7 +74,6 @@ export const l1NftsRouter = createTRPCRouter({
         return {
           contractAddress: contract.address,
           isBridgeable,
-          // isBridgeable,
           media,
           name: contract.name ?? contract.symbol ?? "Unknown",
           totalBalance: contract.totalBalance,

diff --git a/apps/web/src/server/api/routers/stats.ts b/apps/web/src/server/api/routers/stats.ts
@@ -7,7 +7,7 @@ interface EveraiStatsApiResponse {
 export const statsRouter = createTRPCRouter({
   getEveraiBridgeNumber: publicProcedure.query(async () => {
     const everaiStatsResponse = await fetch(
-      "https://api.bridge.arkproject.dev/stats/0xC9ea1AFf83F0B35371729935E1bBecC41e590728"
+      "https://api.bridge.arkproject.dev/stats/0x9a38dec0590abc8c883d72e52391090e948ddf12"
     );
 
     const everaiStats =

diff --git a/packages/design-system/src/icons/GasIcon.tsx b/packages/design-system/src/icons/GasIcon.tsx
@@ -6,78 +6,76 @@ export function GasIcon() {
         height="32"
         viewBox="0 0 32 32"
         fill="none"
-        xmlns="http://www.w3.org/2000/svg"
         className="hidden dark:block"
       >
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
           d="M28 13.6631V10.0743C28 9.71868 27.8111 9.38978 27.5039 9.21057L24.6355 7.53735C23.6528 8.15711 23 9.25228 23 10.4999C23 12.4329 24.567 13.9999 26.5 13.9999C27.0368 13.9999 27.5454 13.8791 28 13.6631Z"
-          fill="#54BD48"
+          fill="#4394CD"
         />
         <path
           d="M28 13.6631L28.2145 14.1147L28.5 13.9791V13.6631H28ZM27.5039 9.21057L27.7558 8.77868V8.77868L27.5039 9.21057ZM24.6355 7.53735L24.8874 7.10546L24.6254 6.9526L24.3688 7.11444L24.6355 7.53735ZM27.5 10.0743V13.6631H28.5V10.0743H27.5ZM27.2519 9.64246C27.4055 9.73206 27.5 9.89652 27.5 10.0743H28.5C28.5 9.54085 28.2166 9.0475 27.7558 8.77868L27.2519 9.64246ZM24.3836 7.96924L27.2519 9.64246L27.7558 8.77868L24.8874 7.10546L24.3836 7.96924ZM23.5 10.4999C23.5 9.43106 24.0586 8.49231 24.9022 7.96027L24.3688 7.11444C23.247 7.82191 22.5 9.0735 22.5 10.4999H23.5ZM26.5 13.4999C24.8431 13.4999 23.5 12.1568 23.5 10.4999H22.5C22.5 12.7091 24.2909 14.4999 26.5 14.4999V13.4999ZM27.7855 13.2115C27.3964 13.3963 26.961 13.4999 26.5 13.4999V14.4999C27.1126 14.4999 27.6943 14.3619 28.2145 14.1147L27.7855 13.2115Z"
           fill="#0E2230"
         />
         <path
           d="M9 5.5H14C16.4853 5.5 18.5 7.51472 18.5 10V27.5H4.5V10C4.5 7.51472 6.51472 5.5 9 5.5Z"
-          fill="#54BD48"
+          fill="#4394CD"
           stroke="#0E2230"
         />
         <path
           d="M7.5 10C7.5 9.17157 8.17157 8.5 9 8.5H14C14.8284 8.5 15.5 9.17157 15.5 10V13C15.5 13.8284 14.8284 14.5 14 14.5H9C8.17157 14.5 7.5 13.8284 7.5 13V10Z"
-          fill="#96DC89"
+          fill="#83BFE9"
           stroke="#0E2230"
         />
         <path d="M1.5 27.5H25" stroke="#0E2230" stroke-linecap="round" />
         <path
           d="M22 6L27.5039 9.21059C27.8111 9.3898 28 9.7187 28 10.0744V21C28 22.1046 27.1046 23 26 23V23C24.8954 23 24 22.1046 24 21V18C24 16.8954 23.1046 16 22 16H19"
           stroke="#0E2230"
-          strokeLinecap="round"
+          stroke-linecap="round"
         />
       </svg>
 
       <svg
-        xmlns="http://www.w3.org/2000/svg"
         width="32"
         height="32"
         viewBox="0 0 32 32"
         fill="none"
         className="dark:hidden"
       >
-        <mask id="path-1-inside-1_3781_26467" fill="white">
+        <mask id="path-1-inside-1_3934_26694" fill="white">
           <path
-            fillRule="evenodd"
-            clipRule="evenodd"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
             d="M28.5 13.3726V11.7351C28.5 10.346 27.7794 9.05644 26.5964 8.32845L24.9915 7.34082C23.8136 7.90428 23 9.1071 23 10.4999C23 12.4329 24.567 13.9999 26.5 13.9999C27.2436 13.9999 27.9331 13.768 28.5 13.3726Z"
           />
         </mask>
         <path
-          fillRule="evenodd"
-          clipRule="evenodd"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
           d="M28.5 13.3726V11.7351C28.5 10.346 27.7794 9.05644 26.5964 8.32845L24.9915 7.34082C23.8136 7.90428 23 9.1071 23 10.4999C23 12.4329 24.567 13.9999 26.5 13.9999C27.2436 13.9999 27.9331 13.768 28.5 13.3726Z"
-          fill="#B4E1AC"
+          fill="#AAD3F1"
         />
         <path
           d="M28.5 13.3726L29.0721 14.1928L29.5 13.8943V13.3726H28.5ZM26.5964 8.32845L26.0723 9.18011L26.5964 8.32845ZM24.9915 7.34082L25.5156 6.48916L25.0515 6.20358L24.56 6.43872L24.9915 7.34082ZM27.5 11.7351V13.3726H29.5V11.7351H27.5ZM26.0723 9.18011C26.9595 9.7261 27.5 10.6933 27.5 11.7351H29.5C29.5 9.99878 28.5992 8.38678 27.1205 7.47679L26.0723 9.18011ZM24.4674 8.19248L26.0723 9.18011L27.1205 7.47679L25.5156 6.48916L24.4674 8.19248ZM24 10.4999C24 9.50656 24.5793 8.64651 25.423 8.24292L24.56 6.43872C23.0479 7.16206 22 8.70765 22 10.4999H24ZM26.5 12.9999C25.1193 12.9999 24 11.8807 24 10.4999H22C22 12.9852 24.0147 14.9999 26.5 14.9999V12.9999ZM27.9279 12.5524C27.5234 12.8346 27.0325 12.9999 26.5 12.9999V14.9999C27.4548 14.9999 28.3428 14.7015 29.0721 14.1928L27.9279 12.5524Z"
           fill="#0E2230"
-          mask="url(#path-1-inside-1_3781_26467)"
+          mask="url(#path-1-inside-1_3934_26694)"
         />
         <path
           d="M9 5.5H14C16.4853 5.5 18.5 7.51472 18.5 10V28H4.5V10C4.5 7.51472 6.51472 5.5 9 5.5Z"
-          fill="#B4E1AC"
+          fill="#AAD3F1"
           stroke="#0E2230"
         />
         <path
           d="M7.5 10C7.5 9.17157 8.17157 8.5 9 8.5H14C14.8284 8.5 15.5 9.17157 15.5 10V13C15.5 13.8284 14.8284 14.5 14 14.5H9C8.17157 14.5 7.5 13.8284 7.5 13V10Z"
-          fill="#E3FADE"
+          fill="#E9F5FE"
           stroke="#0E2230"
         />
         <path d="M1 28H22" stroke="#0E2230" stroke-linecap="round" />
         <path
           d="M22 6L27.5039 9.21059C27.8111 9.3898 28 9.7187 28 10.0744V21C28 22.1046 27.1046 23 26 23V23C24.8954 23 24 22.1046 24 21V17C24 15.8954 23.1046 15 22 15H19"
           stroke="#0E2230"
-          strokeLinecap="round"
+          stroke-linecap="round"
         />
       </svg>
     </>

diff --git a/packages/design-system/src/icons/HighFeesIcon.tsx b/packages/design-system/src/icons/HighFeesIcon.tsx
@@ -1,7 +1,13 @@
 export function HighFeesIcon() {
   return (
     <>
-      <svg width="33" height="32" viewBox="0 0 33 32" fill="none">
+      <svg
+        width="33"
+        height="32"
+        viewBox="0 0 33 32"
+        fill="none"
+        className="dark:hidden"
+      >
         <path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -34,6 +40,46 @@ export function HighFeesIcon() {
           fill="#0E2230"
         />
       </svg>
+
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        className="hidden dark:block"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.05476 22.997C2.67072 12.0156 8.44314 8 16.0003 8C23.5574 8 29.3298 12.0156 29.9458 22.997C30.0076 24.0999 29.1048 25 28.0003 25H19.4651C19.8055 24.4117 20.0002 23.7286 20.0002 23C20.0002 20.7909 18.2094 19 16.0002 19C13.7911 19 12.0002 20.7909 12.0002 23C12.0002 23.7286 12.195 24.4117 12.5354 25H4.00028C2.89571 25 1.9929 24.0999 2.05476 22.997Z"
+          fill="#ED424C"
+        />
+        <path
+          d="M2.05476 22.997L2.55397 23.025L2.05476 22.997ZM29.9458 22.997L30.445 22.969L29.9458 22.997ZM19.4651 25L19.0323 24.7496L18.5983 25.5H19.4651V25ZM12.5354 25V25.5H13.4022L12.9682 24.7496L12.5354 25ZM16.5003 8C16.5003 7.72386 16.2764 7.5 16.0003 7.5C15.7241 7.5 15.5003 7.72386 15.5003 8H16.5003ZM15.5003 12C15.5003 12.2761 15.7241 12.5 16.0003 12.5C16.2764 12.5 16.5003 12.2761 16.5003 12H15.5003ZM16.0003 7.5C12.1354 7.5 8.66248 8.52804 6.07752 11.0205C3.49373 13.5119 1.86802 17.3981 1.55554 22.969L2.55397 23.025C2.85746 17.6145 4.42593 14.0022 6.77163 11.7404C9.11616 9.47974 12.308 8.5 16.0003 8.5V7.5ZM30.445 22.969C30.1325 17.3981 28.5068 13.5119 25.923 11.0205C23.3381 8.52804 19.8651 7.5 16.0003 7.5V8.5C19.6925 8.5 22.8844 9.47974 25.2289 11.7404C27.5746 14.0022 29.1431 17.6145 29.4466 23.025L30.445 22.969ZM28.0003 25.5C29.3739 25.5 30.5239 24.3763 30.445 22.969L29.4466 23.025C29.4914 23.8234 28.8358 24.5 28.0003 24.5V25.5ZM19.4651 25.5H28.0003V24.5H19.4651V25.5ZM19.5002 23C19.5002 23.6383 19.3298 24.2353 19.0323 24.7496L19.8979 25.2504C20.2811 24.588 20.5002 23.8188 20.5002 23H19.5002ZM16.0002 19.5C17.9332 19.5 19.5002 21.067 19.5002 23H20.5002C20.5002 20.5147 18.4855 18.5 16.0002 18.5V19.5ZM12.5002 23C12.5002 21.067 14.0672 19.5 16.0002 19.5V18.5C13.515 18.5 11.5002 20.5147 11.5002 23H12.5002ZM12.9682 24.7496C12.6707 24.2353 12.5002 23.6383 12.5002 23H11.5002C11.5002 23.8188 11.7194 24.588 12.1026 25.2504L12.9682 24.7496ZM4.00028 25.5H12.5354V24.5H4.00028V25.5ZM1.55554 22.969C1.47661 24.3763 2.62666 25.5 4.00028 25.5V24.5C3.16475 24.5 2.50919 23.8234 2.55397 23.025L1.55554 22.969ZM15.5003 8V12H16.5003V8H15.5003Z"
+          fill="#0E2230"
+        />
+        <circle cx="16" cy="23" r="4" fill="#FF8A88" stroke="#0E2230" />
+        <path
+          d="M5.07505 13.8869L7.42536 15.6121"
+          stroke="#0E2230"
+          strokeLinecap="round"
+        />
+        <path
+          d="M27.4249 13.8869L25.0746 15.6121"
+          stroke="#0E2230"
+          strokeLinecap="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M19.8805 22.2613L20.3263 23.5255L25.912 20.6841C26.9766 20.1426 26.3672 18.5275 25.2102 18.8241L19.2109 20.3623L19.2234 20.3976C19.5861 20.9398 19.8198 21.5757 19.8805 22.2613Z"
+          fill="#FF8A88"
+        />
+        <path
+          d="M19.8805 22.2613L19.3825 22.3055L19.388 22.3682L19.409 22.4276L19.8805 22.2613ZM20.3263 23.5255L19.8548 23.6918L20.0445 24.2299L20.553 23.9712L20.3263 23.5255ZM25.912 20.6841L26.1387 21.1298L25.912 20.6841ZM25.2102 18.8241L25.3344 19.3085L25.2102 18.8241ZM19.2109 20.3623L19.0868 19.878L18.5578 20.0136L18.7394 20.5286L19.2109 20.3623ZM19.2234 20.3976L18.7518 20.5638L18.7728 20.6232L18.8078 20.6756L19.2234 20.3976ZM19.409 22.4276L19.8548 23.6918L20.7978 23.3593L20.3521 22.0951L19.409 22.4276ZM20.553 23.9712L26.1387 21.1298L25.6853 20.2385L20.0996 23.0799L20.553 23.9712ZM26.1387 21.1298C27.7355 20.3174 26.8215 17.8948 25.086 18.3398L25.3344 19.3085C25.9129 19.1602 26.2176 19.9677 25.6853 20.2385L26.1387 21.1298ZM25.086 18.3398L19.0868 19.878L19.3351 20.8466L25.3344 19.3085L25.086 18.3398ZM18.7394 20.5286L18.7518 20.5638L19.6949 20.2313L19.6825 20.196L18.7394 20.5286ZM18.8078 20.6756C19.1251 21.15 19.3294 21.7058 19.3825 22.3055L20.3786 22.2172C20.3103 21.4456 20.0471 20.7297 19.639 20.1195L18.8078 20.6756Z"
+          fill="#0E2230"
+        />
+      </svg>
     </>
   );
 }