new gas fees notif + modal + whitelist form link

ArkProjectNFTs · Apr 12, 2024 · 424f467 · 424f467
1 parent 5d6d41f
commit 424f467
Show file tree

Hide file tree

Showing 10 changed files with 212 additions and 17 deletions.
diff --git a/apps/web/src/app/(routes)/bridge/_components/GasNotification.tsx b/apps/web/src/app/(routes)/bridge/_components/GasNotification.tsx
@@ -44,8 +44,8 @@ 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>
+        <p>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 } =
@@ -115,7 +116,8 @@ function TransferNfts() {
             icon={<GasIcon />}
             variant="mantis_green"
           >
-            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/_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
@@ -73,8 +73,7 @@ export const l1NftsRouter = createTRPCRouter({
 
         return {
           contractAddress: contract.address,
-          isBridgeable,
-          // isBridgeable,
+          isBridgeable: true,
           media,
           name: contract.name ?? contract.symbol ?? "Unknown",
           totalBalance: contract.totalBalance,

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>
     </>
   );
 }