Merge branch 'main' into ph/engineWallets

Author: MananTank

apps/dashboard/src/@3rdweb-sdk/react/hooks/useLoggedInUser.ts

@@ -56,9 +56,7 @@ export function useLoggedInUser(): {
     retry: false,
     queryFn: async () => {
       const searchParams = new URLSearchParams();
-      if (pathname) {
-        searchParams.set("pathname", pathname);
-      }
+
       if (connectedAddress) {
         searchParams.set("address", connectedAddress);
       }
@@ -76,10 +74,18 @@ export function useLoggedInUser(): {
   // legit use-case for now
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (query.data?.redirectTo) {
-      router.replace(query.data.redirectTo);
+    if (query.data?.isLoggedIn === false) {
+      // not using useSearchParams hook here to avoid adding Suspense boundaries everywhere this hook is being used
+      const currentHref = new URL(window.location.href);
+      const currentPathname = currentHref.pathname;
+      const currentSearchParams = currentHref.searchParams.toString();
+      router.replace(
+        buildLoginPath(
+          `${currentPathname}${currentSearchParams ? `?${currentSearchParams}` : ""}`,
+        ),
+      );
     }
-  }, [query.data?.redirectTo, router]);
+  }, [query.data?.isLoggedIn, router]);
 
   // if we are "disconnected" we are not logged in
   if (connectionStatus === "disconnected") {
@@ -135,3 +141,7 @@ export function useLoggedInUser(): {
       : null,
   };
 }
+
+function buildLoginPath(pathname: string | undefined): string {
+  return `/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`;
+}

apps/dashboard/src/app/api/auth/ensure-login/route.ts

@@ -4,20 +4,13 @@ import { cookies } from "next/headers";
 import { type NextRequest, NextResponse } from "next/server";
 import { getAddress } from "thirdweb/utils";
 
-export type EnsureLoginPayload = {
-  pathname: string;
-  address?: string;
-};
-
 export type EnsureLoginResponse = {
   isLoggedIn: boolean;
   jwt?: string;
-  redirectTo?: string;
 };
 
 export const GET = async (req: NextRequest) => {
   const address = req.nextUrl.searchParams.get("address");
-  const pathname = req.nextUrl.searchParams.get("pathname");
 
   const cookieStore = cookies();
   // if we are "disconnected" we are not logged in, clear the cookie and redirect to login
@@ -34,7 +27,6 @@ export const GET = async (req: NextRequest) => {
     cookieStore.delete(COOKIE_ACTIVE_ACCOUNT);
     return NextResponse.json({
       isLoggedIn: false,
-      redirectTo: buildLoginPath(pathname),
     });
   }
 
@@ -49,7 +41,6 @@ export const GET = async (req: NextRequest) => {
     cookieStore.delete(COOKIE_ACTIVE_ACCOUNT);
     return NextResponse.json({
       isLoggedIn: false,
-      redirectTo: buildLoginPath(pathname),
     });
   }
 
@@ -65,7 +56,6 @@ export const GET = async (req: NextRequest) => {
     cookieStore.delete(authCookieName);
     return NextResponse.json({
       isLoggedIn: false,
-      redirectTo: buildLoginPath(pathname),
     });
   }
 
@@ -87,7 +77,3 @@ export const GET = async (req: NextRequest) => {
   // if everything is good simply return true
   return NextResponse.json({ isLoggedIn: true, jwt: token });
 };
-
-function buildLoginPath(pathname?: string | null): string {
-  return `/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`;
-}

apps/dashboard/src/components/settings/Account/Billing/ApplyCouponCard.stories.tsx

@@ -54,6 +54,14 @@ function statusStub(status: number) {
 function Story() {
   return (
     <div className="container flex max-w-[1100px] flex-col gap-10 py-10">
+      <BadgeContainer label="Prefill code - XYZ, Success - 200">
+        <ApplyCouponCardUI
+          submit={statusStub(200)}
+          onCouponApplied={undefined}
+          prefillPromoCode="XYZ"
+        />
+      </BadgeContainer>
+
       <BadgeContainer label="Success - 200">
         <ApplyCouponCardUI
           submit={statusStub(200)}

apps/dashboard/src/components/settings/Account/Billing/CouponCard.tsx

@@ -16,7 +16,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { format, fromUnixTime } from "date-fns";
 import { TagIcon } from "lucide-react";
-import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -37,9 +38,13 @@ function ApplyCouponCard(props: {
   teamId: string | undefined;
   onCouponApplied: (data: ActiveCouponResponse) => void;
 }) {
+  const searchParams = useSearchParams();
+  const couponCode = searchParams?.get("coupon");
   return (
     <ApplyCouponCardUI
       onCouponApplied={props.onCouponApplied}
+      prefillPromoCode={couponCode || undefined}
+      scrollIntoView={!!couponCode}
       submit={async (promoCode: string) => {
         const res = await fetch("/api/server-proxy/api/v1/coupons/redeem", {
           method: "POST",
@@ -79,14 +84,30 @@ export function ApplyCouponCardUI(props: {
     data: null | ActiveCouponResponse;
   }>;
   onCouponApplied: ((data: ActiveCouponResponse) => void) | undefined;
+  prefillPromoCode?: string;
+  scrollIntoView?: boolean;
 }) {
+  const containerRef = useRef<HTMLFormElement | null>(null);
   const form = useForm<z.infer<typeof couponFormSchema>>({
     resolver: zodResolver(couponFormSchema),
     defaultValues: {
-      promoCode: "",
+      promoCode: props.prefillPromoCode,
     },
   });
 
+  const scrolled = useRef(false);
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (props.scrollIntoView && !scrolled.current) {
+      const el = containerRef.current;
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "start" });
+        el.querySelector("input")?.focus();
+        scrolled.current = true;
+      }
+    }
+  }, [props.scrollIntoView]);
+
   const applyCoupon = useMutation({
     mutationFn: (promoCode: string) => props.submit(promoCode),
   });
@@ -133,7 +154,7 @@ export function ApplyCouponCardUI(props: {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
+      <form onSubmit={form.handleSubmit(onSubmit)} ref={containerRef}>
         <SettingsCard
           header={{
             title: "Apply Coupon",
@@ -272,11 +293,7 @@ export function CouponSection(props: { teamId: string | undefined }) {
   });
 
   if (activeCoupon.isPending) {
-    return (
-      <div className="flex h-[300px] items-center justify-center rounded-lg border border-border bg-muted/50">
-        <Spinner className="size-6" />
-      </div>
-    );
+    return <LoadingCouponSection />;
   }
 
   const couponData = optimisticCouponData
@@ -296,17 +313,27 @@ export function CouponSection(props: { teamId: string | undefined }) {
   }
 
   return (
-    <ApplyCouponCard
-      teamId={props.teamId}
-      onCouponApplied={(coupon) => {
-        setOptimisticCouponData({
-          type: "added",
-          data: coupon,
-        });
-        activeCoupon.refetch().then(() => {
-          setOptimisticCouponData(undefined);
-        });
-      }}
-    />
+    <Suspense fallback={<LoadingCouponSection />}>
+      <ApplyCouponCard
+        teamId={props.teamId}
+        onCouponApplied={(coupon) => {
+          setOptimisticCouponData({
+            type: "added",
+            data: coupon,
+          });
+          activeCoupon.refetch().then(() => {
+            setOptimisticCouponData(undefined);
+          });
+        }}
+      />
+    </Suspense>
+  );
+}
+
+function LoadingCouponSection() {
+  return (
+    <div className="flex h-[300px] items-center justify-center rounded-lg border border-border bg-muted/50">
+      <Spinner className="size-6" />
+    </div>
   );
 }

apps/dashboard/src/middleware.ts

@@ -32,11 +32,13 @@ export async function middleware(request: NextRequest) {
     // check if the user is logged in (has a valid auth cookie)
 
     if (!authCookie) {
+      const searchParamsString = request.nextUrl.searchParams.toString();
+
       // if not logged in, rewrite to login page
       return redirect(
         request,
         "/login",
-        `next=${encodeURIComponent(pathname)}`,
+        `next=${encodeURIComponent(`${pathname}${searchParamsString ? `?${searchParamsString}` : ""}`)}`,
         false,
       );
     }

packages/thirdweb/CHANGELOG.md

@@ -1,5 +1,17 @@
 # thirdweb
 
+## 5.61.4
+
+### Patch Changes
+
+- [#4969](https://github.com/thirdweb-dev/js/pull/4969) [`3446b4c`](https://github.com/thirdweb-dev/js/commit/3446b4cabf0a8b877c344d810f97fd571753df2e) Thanks [@MananTank](https://github.com/MananTank)! - Remove extra text shown in Error Message in Pay UI
+
+## 5.61.3
+
+### Patch Changes
+
+- [#4965](https://github.com/thirdweb-dev/js/pull/4965) [`24981a7`](https://github.com/thirdweb-dev/js/commit/24981a7f60c2a45976c748826339822d81154ce3) Thanks [@joaquim-verges](https://github.com/joaquim-verges)! - Respect raw accountSalt passed as hex
+
 ## 5.61.2
 
 ### Patch Changes

packages/thirdweb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thirdweb",
-  "version": "5.61.2",
+  "version": "5.61.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thirdweb-dev/js.git#main"

packages/thirdweb/src/extensions/erc721/read/getNFT.test.ts

@@ -1,6 +1,16 @@
 import { describe, expect, it } from "vitest";
 
+import { ANVIL_CHAIN } from "~test/chains.js";
+import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";
+import { TEST_CLIENT } from "~test/test-clients.js";
 import { DOODLES_CONTRACT } from "~test/test-contracts.js";
+import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
+import { getContract } from "../../../contract/contract.js";
+import { deployERC721Contract } from "../../../extensions/prebuilts/deploy-erc721.js";
+import { sendAndConfirmTransaction } from "../../../transaction/actions/send-and-confirm-transaction.js";
+import { parseNFT } from "../../../utils/nft/parseNft.js";
+import { setTokenURI } from "../__generated__/INFTMetadata/write/setTokenURI.js";
+import { mintTo } from "../write/mintTo.js";
 import { getNFT } from "./getNFT.js";
 
 describe.runIf(process.env.TW_SECRET_KEY)("erc721.getNFT", () => {
@@ -89,4 +99,60 @@ describe.runIf(process.env.TW_SECRET_KEY)("erc721.getNFT", () => {
       }
     `);
   });
+
+  it("should return a default value if the URI of the token doesn't exist", async () => {
+    /**
+     * To create this test scenario, we first deploy an NFTCollection/Edition contract,
+     * mint a token, then purposefully change that token's URI to an empty string, using setTokenURI
+     */
+    const contract = getContract({
+      address: await deployERC721Contract({
+        chain: ANVIL_CHAIN,
+        client: TEST_CLIENT,
+        account: TEST_ACCOUNT_A,
+        type: "TokenERC721",
+        params: {
+          name: "",
+          contractURI: TEST_CONTRACT_URI,
+        },
+      }),
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+    });
+
+    await sendAndConfirmTransaction({
+      transaction: mintTo({
+        contract,
+        nft: { name: "token 0" },
+        to: TEST_ACCOUNT_A.address,
+      }),
+      account: TEST_ACCOUNT_A,
+    });
+
+    await sendAndConfirmTransaction({
+      transaction: setTokenURI({
+        contract,
+        tokenId: 0n,
+        // Need to have some spaces because NFTMetadata.sol does not allow to update an empty valud
+        uri: "  ",
+      }),
+      account: TEST_ACCOUNT_A,
+    });
+
+    expect(await getNFT({ contract, tokenId: 0n })).toStrictEqual(
+      parseNFT(
+        {
+          id: 0n,
+          type: "ERC721",
+          uri: "",
+        },
+        {
+          tokenId: 0n,
+          tokenUri: "",
+          type: "ERC721",
+          owner: null,
+        },
+      ),
+    );
+  });
 });

packages/thirdweb/src/extensions/erc721/read/getNFT.ts

@@ -48,7 +48,7 @@ export async function getNFT(
       : null,
   ]);
 
-  if (!uri) {
+  if (!uri?.trim()) {
     return parseNFT(
       {
         id: options.tokenId,