From 424f4675b34777d07202bfcb6297fe21b1805014 Mon Sep 17 00:00:00 2001 From: YohanTz Date: Fri, 12 Apr 2024 15:31:32 +0200 Subject: [PATCH] new gas fees notif + modal + whitelist form link --- .../bridge/_components/GasNotification.tsx | 4 +- .../bridge/_components/GasRefundInfoModal.tsx | 45 ++++++++++++++ .../TransferEthereumNftsAction.tsx | 4 +- .../app/_components/ConnectEthereumButton.tsx | 2 +- .../app/_components/ConnectStarkNetButton.tsx | 2 +- apps/web/src/app/_components/Header.tsx | 12 ++++ apps/web/src/server/api/routers/l1Nfts.ts | 3 +- .../design-system/src/icons/HighFeesIcon.tsx | 48 ++++++++++++++- .../design-system/src/icons/LowFeesIcon.tsx | 61 ++++++++++++++++--- .../src/icons/MediumFeesIcon.tsx | 48 ++++++++++++++- 10 files changed, 212 insertions(+), 17 deletions(-) create mode 100644 apps/web/src/app/(routes)/bridge/_components/GasRefundInfoModal.tsx diff --git a/apps/web/src/app/(routes)/bridge/_components/GasNotification.tsx b/apps/web/src/app/(routes)/bridge/_components/GasNotification.tsx index e6f99911..393c6b98 100644 --- 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 (
-

Current Gas price

-

{text}

+

Estimated Gas fees

+ {text}
); diff --git a/apps/web/src/app/(routes)/bridge/_components/GasRefundInfoModal.tsx b/apps/web/src/app/(routes)/bridge/_components/GasRefundInfoModal.tsx new file mode 100644 index 00000000..c74da51e --- /dev/null +++ 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 ( + + setOpen(true)}> + More + + + + How do gas fee +
+ refunds work? + + + The first 200 holders who bridge Everai to Starknet are + eligible for refunds. +
+
Each of these holders can receive a refund of up to $40. +
+
+ The refund will be made in STRK directly to your Starknet + wallet. + + + + + ); +} diff --git a/apps/web/src/app/(routes)/bridge/_components/TransferEthereumNftsAction.tsx b/apps/web/src/app/(routes)/bridge/_components/TransferEthereumNftsAction.tsx index 4a85d682..a9dd099e 100644 --- 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={} variant="mantis_green" > - ArkProject will refund gas costs in Stark! + This transfer is eligible to a gas refund of up to 40$.{" "} + )} diff --git a/apps/web/src/app/_components/ConnectEthereumButton.tsx b/apps/web/src/app/_components/ConnectEthereumButton.tsx index 699566e2..332ab4f4 100644 --- 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 ( <>