feat/fix: withdraw l1 error + wallet connect support + faq etc

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

@@ -15,6 +15,7 @@ export default function Page({ params: { address } }: PageProps) {
         <Link
           className="mb-10 flex h-12 items-center gap-1.5 rounded-full border-2 border-asteroid-grey-600 px-[0.875rem] py-3 text-asteroid-grey-600 transition-colors hover:border-asteroid-grey-800 hover:text-asteroid-grey-800 dark:border-space-blue-300 dark:text-space-blue-300 dark:hover:border-space-blue-200 dark:hover:text-space-blue-200"
           href="/bridge"
+          prefetch
         >
           {/* TODO @YohanTz: Export svg to icons file */}
           <svg

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

@@ -46,6 +46,7 @@ export default function CollectionGrid({
                   <Link
                     className="pb-2.5 pl-2.5"
                     href={`/bridge/${nftCollection.contractAddress}`}
+                    prefetch
                   >
                     {children}
                   </Link>

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

@@ -18,7 +18,7 @@ export default function TransferStarknetNftsAction() {
           icon={<ClockIcon />}
           variant="space_blue"
         >
-          <b>Important note: </b>You will have to wait about 4 hours before you
+          <b>Important note: </b>You will have to wait about 12 hours before you
           can claim your assets on Ethereum.
         </Notification>
       )}

apps/web/src/app/(routes)/faq/_components/FaqEntries.tsx

@@ -87,7 +87,7 @@ export default function FaqEntries({ className }: FaqEntriesProps) {
         security of your transactions on the blockchain.
       </FaqEntry>
       <FaqEntry title="How do gas fees refunds work?">
-        The first 200 holders who bridge their Everais to Starknet are eligible
+        The first 1000 holders who bridge their Everais to Starknet are eligible
         for refunds. Each of these holders can receive a refund of up to $40. At
         the end of the campaign on May 10, the refunds will be made in STRK
         tokens and sent directly to the Starknet wallet you used to bridge your
@@ -118,6 +118,11 @@ export default function FaqEntries({ className }: FaqEntriesProps) {
         Transfers typically complete within a few minutes to a few hours,
         depending on network congestion. We strive to ensure that your bridging
         experience is as efficient as possible.
+        <b>
+          Important note: From Starknet (L2) to (L1), the bridging time can take
+          up to 12 hours in certain circumstances due to the recently increased
+          size of the blocks!
+        </b>
       </FaqEntry>
       <FaqEntry title="Why can't I see my NFT on Starknet (L2)?">
         Some of the wallets (
@@ -201,7 +206,7 @@ export default function FaqEntries({ className }: FaqEntriesProps) {
         <br />
         First, you can follow the exact same process as when bridging to
         Starknet (L2), you just need to choose Ethereum (L1) as your
-        destination, and it may take up to 4 hours for you to be able to
+        destination, and it may take up to 12 hours for you to be able to
         withdraw your NFT.
         <br />
         <br />

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

@@ -36,7 +36,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="https://unframed.co/"
+          href="https://unframed.co/collection/0x02acee8c430f62333cf0e0e7a94b2347b5513b4c25f699461dd8d7b23c072478"
           rel="noreferrer"
           target="_blank"
         >

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

@@ -139,7 +139,7 @@ export default function NftTransferItem({
                 className="text-asteroid-grey-400"
                 variant="body_text_14"
               >
-                Transfer can take up to 4 hours
+                Transfer can take up to 12 hours
               </Typography>
             ) : null}
             <div className="flex items-center gap-2">

apps/web/src/app/(routes)/lounge/_hooks/useL1Withdraw.ts

@@ -20,7 +20,7 @@ export default function useL1Withdraw({ onSuccess }: UseL1WithdrawProps) {
       hash: withdrawHash,
     });
 
-  const utils = api.useContext();
+  const utils = api.useUtils();
 
   function withdraw(requestContent: Array<string>) {
     writeContractWithdraw({

apps/web/src/app/_lib/utils/connectors.ts

@@ -1,7 +1,6 @@
 import { InjectedConnector as InjectedStarknetConnector } from "@starknet-react/core";
 import { type StaticImageData } from "next/image";
-import { coinbaseWallet, injected } from "wagmi/connectors";
-// import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
+import { coinbaseWallet, injected, walletConnect } from "wagmi/connectors";
 
 import argentXLogo from "../../../../public/logos/argentX.png";
 import braavosLogo from "../../../../public/logos/braavos.png";
@@ -10,18 +9,15 @@ import metaMaskLogo from "../../../../public/logos/metamask.png";
 import walletConnectLogo from "../../../../public/logos/wallet_connect.png";
 import { type Chain } from "../../_types";
 
-/*
- * TODO @YohanTz: Handle Wallet Connect
- * const walletConnectProjectId = process.env.WALLETCONNECT_PROJECT_ID ?? "";
- */
-
 export const ethereumConnectors = [
   injected(),
-  //   new WalletConnectConnector({ options: { projectId: walletConnectProjectId } }),
   coinbaseWallet({
     appName: "Arklane",
     darkMode: true,
   }),
+  walletConnect({
+    projectId: "834a150924b84c5bac21ad1e5a32d40d",
+  }),
 ];
 
 export const DOWNLOAD_LINK_BY_CONNECTOR_ID: Record<string, string> = {

apps/web/src/server/api/helpers/l2nfts.ts

@@ -1,4 +1,4 @@
-import { validateAndParseAddress } from "starknet";
+import { Contract, RpcProvider, validateAndParseAddress } from "starknet";
 
 import { type NftMedia } from "../types";
 
@@ -115,6 +115,43 @@ export async function getL2ContractMetadata(contractAddress: string) {
   return contractInfo;
 }
 
+export async function getL2WhitelistedCollections() {
+  const provider = new RpcProvider({
+    nodeUrl: process.env.NEXT_PUBLIC_ALCHEMY_STARKNET_RPC_ENDPOINT,
+  });
+  const bridgeAddress = process.env.NEXT_PUBLIC_L2_BRIDGE_ADDRESS;
+
+  if (bridgeAddress === undefined) {
+    return undefined;
+  }
+
+  try {
+    const { abi: bridgeAbi } = await provider.getClassAt(bridgeAddress);
+
+    if (bridgeAbi === undefined) {
+      return undefined;
+    }
+
+    const bridgeContract = new Contract(
+      bridgeAbi,
+      bridgeAddress,
+      provider
+    ) as unknown as {
+      get_white_listed_collections: () => Promise<Array<string>>;
+    };
+
+    const whitelistedCollectionsResponse =
+      await bridgeContract.get_white_listed_collections();
+
+    return whitelistedCollectionsResponse.map((collection) =>
+      validateAndParseAddress(collection)
+    );
+  } catch (error) {
+    console.error(error);
+    return undefined;
+  }
+}
+
 export function getMediaObjectFromUrl(image: string | undefined): NftMedia {
   if (image === undefined) {
     return { format: "image", src: undefined };

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

@@ -8,6 +8,7 @@ import {
   getL2ContractsForOwner,
   getL2NftsForOwner,
   getL2NftsMetadataBatch,
+  getL2WhitelistedCollections,
   getMediaObjectFromUrl,
 } from "../helpers/l2nfts";
 import { type Collection, type Nft } from "../types";
@@ -36,17 +37,26 @@ export const l2NftsRouter = createTRPCRouter({
 
       try {
         const contractsForOwner = await getL2ContractsForOwner(address);
+        const whitelistedCollections = await getL2WhitelistedCollections();
 
         const collections: Array<Collection> = contractsForOwner.result.map(
           (contract) => {
             const media = getMediaObjectFromUrl(contract.image);
+            const isBridgeable =
+              whitelistedCollections === undefined ||
+              whitelistedCollections.some(
+                (whitelistedCollection) =>
+                  validateAndParseAddress(
+                    whitelistedCollection
+                  ).toLowerCase() ===
+                  validateAndParseAddress(
+                    contract.contract_address
+                  ).toLowerCase()
+              );
 
             return {
               contractAddress: contract.contract_address,
-              isBridgeable: true,
-
-              // isBridgeable:
-              //   contract.contract_address ===
+              isBridgeable,
               media,
               name: contract.name ?? contract.symbol ?? "Unknown",
               totalBalance: contract.tokens_count,