finished the lounge whole flow

apps/web/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@headlessui/react": "1.7.10",
     "@heroicons/react": "^2.0.18",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toolbar": "^1.0.4",

apps/web/src/app/(routes)/bridge/[address]/page.tsx

@@ -3,7 +3,11 @@ import Link from "next/link";
 
 import TokenList from "./TokenList";
 
-export default function Page({ params }: { params: { address: string } }) {
+interface PageProps {
+  params: { address: string };
+}
+
+export default function Page({ params: { address } }: PageProps) {
   return (
     <>
       {/* TODO @YohanTz: Refacto to be a variant in the Button component */}
@@ -30,7 +34,7 @@ export default function Page({ params }: { params: { address: string } }) {
           <Typography variant="button_text_s">Back</Typography>
         </Link>
       </div>
-      <TokenList nftContractAddress={params.address} />
+      <TokenList nftContractAddress={address} />
     </>
   );
 }

apps/web/src/app/(routes)/bridge/_components/NftTransferSummary.tsx

@@ -7,8 +7,7 @@ import {
   Typography,
 } from "design-system";
 import Image from "next/image";
-import { redirect } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import useCurrentChain from "~/app/_hooks/useCurrentChain";
 import { api } from "~/utils/api";
@@ -21,20 +20,8 @@ function TransferAction() {
   const { sourceChain, targetChain } = useCurrentChain();
   const { totalSelectedNfts } = useNftSelection();
 
-  const {
-    approveForAll,
-    depositTokens,
-    isApproveLoading,
-    isApprovedForAll,
-    isDepositLoading,
-    isDepositSuccess,
-  } = useTransferNftsFromChain(sourceChain);
-
-  useEffect(() => {
-    if (isDepositSuccess) {
-      redirect("/lounge");
-    }
-  }, [isDepositSuccess]);
+  const { approveForAll, depositTokens, isApproveLoading, isApprovedForAll } =
+    useTransferNftsFromChain(sourceChain);
 
   return isApprovedForAll ? (
     <>
@@ -91,25 +78,13 @@ function TransferAction() {
       </Notification>
       <Button className="mt-8" onClick={() => depositTokens()} size="small">
         <Typography variant="button_text_s">
-          {isDepositLoading
-            ? "Approval in Progress..."
-            : `Confirm transfer to ${targetChain}`}
+          Confirm transfer to {targetChain}
         </Typography>
       </Button>
-      {isDepositLoading && (
-        <Image
-          alt="Bridge loading animation"
-          // className="fixed bottom-0 left-0 right-0 top-23 object-cover"
-          className="fixed inset-0 h-screen w-screen object-cover"
-          height={3000}
-          src="/medias/bridge_animation.gif"
-          width={3000}
-        />
-      )}
     </>
   ) : (
     <>
-      {totalSelectedNfts > 0 && (
+      {totalSelectedNfts > 0 && isApprovedForAll !== undefined && (
         <Typography
           className="mt-8 flex gap-2.5 rounded-xl bg-playground-purple-100 p-3 text-dark-blue-950 dark:bg-playground-purple-400"
           component="p"

apps/web/src/app/(routes)/bridge/_hooks/useTransferEthereumNfts.ts

@@ -1,6 +1,10 @@
+"use client";
+
 import { useAccount as useStarknetAccount } from "@starknet-react/core";
-import { erc721Abi } from "viem";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 import { parseGwei } from "viem";
+import { erc721Abi } from "viem";
 import {
   useAccount as useEthereumAccount,
   useReadContract,
@@ -10,6 +14,7 @@ import {
 
 import useNftSelection from "./useNftSelection";
 
+// TODO @YohanTz: Divide this hook in 2 (approve / deposit)
 export default function useTransferEthereumNfts() {
   const { selectedCollectionAddress, selectedTokenIds, totalSelectedNfts } =
     useNftSelection();
@@ -44,17 +49,15 @@ export default function useTransferEthereumNfts() {
     });
   }
 
-  console.log(approveHash);
-
   const { isLoading: isApproveLoading } = useWaitForTransactionReceipt({
     hash: approveHash,
   });
 
-  // console.log(isApproveLoading);
-
   const { data: depositHash, writeContract: writeContractDeposit } =
     useWriteContract();
 
+  const router = useRouter();
+
   function depositTokens() {
     writeContractDeposit({
       abi: [
@@ -107,15 +110,20 @@ export default function useTransferEthereumNfts() {
     });
   }
 
-  const { isLoading: isDepositLoading, isSuccess: isDepositSuccess } =
-    useWaitForTransactionReceipt({ hash: depositHash });
+  useEffect(() => {
+    if (depositHash !== undefined) {
+      void router.push(`lounge/${depositHash}`);
+    }
+  }, [depositHash, router]);
+
+  // const { isLoading: isDepositLoading, isSuccess: isDepositSuccess } =
+  //   useWaitForTransactionReceipt({ hash: depositHash });
 
   return {
     approveForAll: () => approveForAll(),
     depositTokens: () => depositTokens(),
+    depositTransactionHash: depositHash,
     isApproveLoading: isApproveLoading && approveHash !== undefined,
     isApprovedForAll,
-    isDepositLoading: isDepositLoading && depositHash !== undefined,
-    isDepositSuccess: isDepositSuccess && depositHash !== undefined,
   };
 }

apps/web/src/app/(routes)/bridge/_hooks/useTransferStarknetNfts.ts

@@ -12,6 +12,7 @@ import useNftSelection from "./useNftSelection";
 
 const L2_BRIDGE_ADDRESS = process.env.NEXT_PUBLIC_L2_BRIDGE_ADDRESS || "";
 
+// TODO @YohanTz: Divide this hook in 2 (approve / deposit)
 export default function useTransferStarknetNfts() {
   const { selectedCollectionAddress, selectedTokenIds } = useNftSelection();
 
@@ -128,19 +129,17 @@ export default function useTransferStarknetNfts() {
     ],
   });
 
-  const { isLoading: isDepositLoading, isSuccess: isDepositSuccess } =
-    useWaitForTransaction({
-      hash: depositData?.transaction_hash,
-    });
+  // const { isLoading: isDepositLoading, isSuccess: isDepositSuccess } =
+  //   useWaitForTransaction({
+  //     hash: depositData?.transaction_hash,
+  //   });
 
   return {
     approveForAll: () => approveForAll(),
     depositTokens: () => depositTokens(),
+    depositTransactionHash: depositData?.transaction_hash,
     isApproveLoading:
       isApproveLoading && approveData?.transaction_hash !== undefined,
     isApprovedForAll,
-    isDepositLoading:
-      isDepositLoading && depositData?.transaction_hash !== undefined,
-    isDepositSuccess,
   };
 }

apps/web/src/app/(routes)/lounge/[transactionHash]/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+import Image from "next/image";
+import { redirect } from "next/navigation";
+import { useEffect } from "react";
+
+import { api } from "~/utils/api";
+
+interface PageProps {
+  params: { transactionHash: string };
+}
+
+/**
+ * Page used when waiting for a deposit transaction to be detected by the bridge
+ */
+export default function Page({ params: { transactionHash } }: PageProps) {
+  console.log(transactionHash);
+  const { data: hasBridgeRequestBeenIndexed } =
+    api.bridgeRequest.getHasBrigeRequestIndexed.useQuery(
+      {
+        transactionHash,
+      },
+      { refetchInterval: 1000 }
+    );
+
+  useEffect(() => {
+    if (hasBridgeRequestBeenIndexed) {
+      redirect("/lounge");
+    }
+  }, [hasBridgeRequestBeenIndexed]);
+
+  return (
+    <Image
+      alt="Bridge loading animation"
+      className="fixed inset-0 h-screen w-screen object-cover"
+      height={3000}
+      src="/medias/bridge_animation.gif"
+      width={3000}
+    />
+  );
+}