improved the whole flow

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

@@ -110,10 +110,36 @@ function TransferAction() {
     <>
       {numberOfSelectedNfts > 0 && (
         <Typography
-          className="mt-8 rounded-xl bg-purple-100 p-3 text-dark-blue-950"
+          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"
           variant="body_text_14"
         >
+          <svg
+            className="flex-shrink-0"
+            fill="none"
+            height="32"
+            viewBox="0 0 32 32"
+            width="32"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M30.555 13.0686C30.7391 18.8906 26.2996 25.363 18.8398 26.5409C14.1036 27.2888 10.0434 25.9494 7.11476 23.7515C4.1716 21.5427 2.40664 18.497 2.20463 15.8707C2.00595 13.2876 3.3401 10.8487 5.91453 8.95722C8.4917 7.06374 12.2804 5.75054 16.8548 5.46463C21.4456 5.1777 24.7793 5.87994 27.0008 7.24017C29.1963 8.58448 30.349 10.5966 30.555 13.0686Z"
+              fill="#7D56E5"
+              stroke="#0E2230"
+            />
+            <path
+              d="M25.8054 14.2174C25.6899 12.2929 24.0361 10.8264 22.1116 10.942C20.1871 11.0575 18.7206 12.7112 18.8361 14.6358"
+              stroke="#0E2230"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M14.6758 15.4133C14.1347 13.5628 12.196 12.5013 10.3455 13.0423C8.495 13.5834 7.43347 15.5221 7.9745 17.3726"
+              stroke="#0E2230"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
           You must approve the selection of your assets before confirming the
           migration. Each collection will require a signature via your wallet.
         </Typography>
@@ -130,12 +156,13 @@ function TransferAction() {
         size="small"
       >
         <Typography variant="button_text_s">
-          {numberOfSelectedNfts === 0
+          {isApproveLoading
+            ? "Approve in progress..."
+            : numberOfSelectedNfts === 0
             ? `Confirm transfer to ${targetChain}`
             : "Approve the selected Nfts"}
         </Typography>
       </Button>
-      {isApproveLoading && "Loading..."}
     </>
   );
 }

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

@@ -108,14 +108,6 @@ export default function useTransferStarknetNfts() {
     selectedNfts[0] !== undefined
   ) {
     depositCallData = new CallData(bridgeContract?.abi);
-    console.table({
-      collection_l2: selectedNfts[0]?.collectionContractAddress ?? "",
-      owner_l1: ethereumAddress,
-      salt: Date.now(),
-      token_ids: selectedNfts.map((selectedNft) => selectedNft?.tokenId),
-      use_deposit_burn_auto: false,
-      use_withdraw_auto: true,
-    });
     depositCallData = depositCallData.compile("deposit_tokens", {
       collection_l2: selectedNfts[0]?.collectionContractAddress ?? "",
       owner_l1: ethereumAddress,

apps/web/src/app/(routes)/lounge/_components/NftCardStatus.tsx

@@ -3,11 +3,15 @@ import { Typography } from "design-system";
 import { type BridgeRequestEventStatus } from "~/server/api/routers/bridgeRequest";
 
 const variants: Record<BridgeRequestEventStatus, string> = {
-  deposit_initiated_l1: "bg-playground-purple-50 text-playground-purple-600",
-  deposit_initiated_l2: "bg-playground-purple-50 text-playground-purple-600",
+  deposit_initiated_l1:
+    "bg-playground-purple-50 text-playground-purple-600 dark:bg-playground-purple-200 dark:text-playground-purple-900",
+  deposit_initiated_l2:
+    "bg-playground-purple-50 text-playground-purple-600 dark:bg-playground-purple-200 dark:text-playground-purple-900",
   error: "bg-folly-red-50 text-folly-red-source",
-  withdraw_completed_l1: "bg-mantis-green-50 text-mantis-green-500",
-  withdraw_completed_l2: "bg-mantis-green-50 text-mantis-green-500",
+  withdraw_completed_l1:
+    "bg-mantis-green-50 text-mantis-green-500 dark:bg-mantis-green-200 dark:text-mantis-green-900",
+  withdraw_completed_l2:
+    "bg-mantis-green-50 text-mantis-green-500 dark:bg-mantis-green-200 dark:text-mantis-green-900",
 };
 
 const variantsToStatusText: Record<BridgeRequestEventStatus, string> = {

apps/web/src/app/(routes)/lounge/_components/NftTransferCard.tsx

@@ -15,13 +15,47 @@ interface NftTransferCard {
   statusTimestamp: number;
 }
 
+function utcUnixSecondsToIso8601(utcTs) {
+  const utcMs = utcTs * 1000;
+
+  const localDt = new Date();
+
+  // Get the local timezone offset in minutes and convert it to milliseconds.
+  const localOffset = localDt.getTimezoneOffset() * 60 * 1000;
+  // Calculate the local time.
+  const localTs = utcMs + localOffset;
+
+  const date = new Date(localTs);
+
+  // Get day, month, and year components from the Date object
+  const day = date.getDate();
+  const month = date.getMonth() + 1; // Months are zero-based, so add 1
+  const year = date.getFullYear();
+
+  // Get hours and minutes components from the Date object
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  // Format day, month, hours, and minutes to have leading zeros if necessary
+  const formattedDay = day < 10 ? "0" + day : day;
+  const formattedMonth = month < 10 ? "0" + month : month;
+  const formattedHours = hours < 10 ? "0" + hours : hours;
+  const formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
+
+  // Create the formatted date string in the format "dd/mm/yyyy HH:mm"
+  const formattedDateTime = `${formattedDay}/${formattedMonth}/${year} ${formattedHours}:${formattedMinutes}`;
+
+  return formattedDateTime;
+}
+
 export default function NftTransferCard({
   image,
   name,
   status,
   statusTimestamp,
 }: NftTransferCard) {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const readableDate = utcUnixSecondsToIso8601(statusTimestamp);
 
   function handleOpenModal() {
     setIsModalOpen(true);
@@ -64,7 +98,7 @@ export default function NftTransferCard({
         >
           Arrival
         </Typography>
-        <Typography variant="button_text_s">{statusTimestamp}</Typography>
+        <Typography variant="button_text_s">{readableDate}</Typography>
 
         <Typography
           className="mt-2 underline"

apps/web/src/app/(routes)/lounge/_components/NftTransferList.tsx

@@ -23,7 +23,7 @@ export default function NftTransferList() {
       {
         address: address ?? "",
       },
-      { enabled: address !== undefined, refetchInterval: 15000 }
+      { enabled: address !== undefined, refetchInterval: 3000 }
     );
 
   if (bridgeRequestData === undefined) {

apps/web/src/server/api/routers/bridgeRequest.ts

@@ -61,6 +61,7 @@ export const bridgeRequestRouter = createTRPCRouter({
       return bridgeRequests.map((bridgeRequest) => {
         const lastBridgeRequestEvent =
           bridgeRequest.events[bridgeRequest.events.length - 1];
+        console.log(bridgeRequest.req.hash);
         return {
           // sourceCollection: bridgeRequest.req.collection_src ?? "",
           sourceCollection: bridgeRequest.req.hash ?? "",

apps/web/src/server/api/routers/nfts.ts

@@ -93,17 +93,24 @@ export const nftsRouter = createTRPCRouter({
       const ownedNfts = (await ownedNftsResponse.json()) as {
         result: Array<{
           contract_address: string;
+          metadata?: { image: string; name: string };
           token_id: string;
         }>;
       };
 
       const rawNfts = ownedNfts.result.map((ownedNft) => {
+        // TODO @YohanTz: Handle images / videos properly
+
+        const regex = /\.mp4$/;
+        const imageURL = ownedNft.metadata?.image.replace(regex, ".jpg");
+
         return {
           collectionContractAddress: ownedNft.contract_address,
-          collectionName: "No metadata",
+          // TODO @YohanTz: Take collection name from api response
+          collectionName: "EveraiDuo",
           id: `${ownedNft.contract_address}-${ownedNft.token_id}`,
-          image: undefined,
-          title: `#${ownedNft.token_id}`,
+          image: imageURL,
+          title: ownedNft.metadata?.name ?? ownedNft.token_id,
           tokenId: ownedNft.token_id,
         };
       });