Merge branch 'main' into crosschain-ui

Author: kumaryash90

.changeset/cool-pumpkins-punch.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Dont retry on quote errors, show fiat value in every step

.changeset/good-carpets-dream.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Handle updating session keys with new params and expose `shouldUpdateSessionKey` from `extensions/erc4337`

.changeset/many-cameras-cover.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add treasure and treasureTopaz chain definitions

apps/dashboard/package.json

@@ -89,6 +89,7 @@
     "react-table": "^7.8.0",
     "recharts": "2.15.1",
     "remark-gfm": "^4.0.0",
+    "responsive-rsc": "0.0.7",
     "server-only": "^0.0.1",
     "shiki": "1.27.0",
     "sonner": "^1.7.4",

apps/dashboard/src/@/api/team.ts

@@ -24,6 +24,7 @@ export type Team = {
   image?: string;
   billingPlan: "pro" | "growth" | "free" | "starter";
   billingStatus: "validPayment" | (string & {}) | null;
+  supportPlan: "pro" | "growth" | "free" | "starter";
   billingEmail: string | null;
   growthTrialEligible: false;
   enabledScopes: EnabledTeamScope[];
@@ -47,6 +48,10 @@ export async function getTeamBySlug(slug: string) {
   return null;
 }
 
+export function getTeamById(id: string) {
+  return getTeamBySlug(id);
+}
+
 export async function getTeams() {
   const token = await getAuthToken();
   if (!token) {

apps/dashboard/src/@/components/ui/DatePickerWithRange.tsx

@@ -27,6 +27,7 @@ export function DatePickerWithRange(props: {
   header?: React.ReactNode;
   footer?: React.ReactNode;
   labelOverride?: string;
+  popoverAlign?: "start" | "end" | "center";
 }) {
   const [screen, setScreen] = React.useState<"from" | "to">("from");
   const { from, to, setFrom, setTo } = props;
@@ -65,7 +66,11 @@ export function DatePickerWithRange(props: {
       </PopoverTrigger>
 
       {/* Popover */}
-      <PopoverContent className="w-auto p-0" align="start">
+      <PopoverContent
+        className="w-auto p-0"
+        align={props.popoverAlign || "start"}
+        sideOffset={10}
+      >
         <DynamicHeight>
           <div>
             {!isValid && (

apps/dashboard/src/app/(dashboard)/support/create-ticket/components/create-ticket.action.ts

@@ -1,10 +1,10 @@
 "use server";
 import "server-only";
 
-import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
-import { API_SERVER_URL } from "@/constants/env";
-import { cookies } from "next/headers";
-import { redirect } from "next/navigation";
+import { getTeamById } from "@/api/team";
+import { getRawAccount } from "../../../../account/settings/getAccount";
+import { getAuthTokenWalletAddress } from "../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../login/loginRedirect";
 
 type State = {
   success: boolean;
@@ -71,42 +71,46 @@ export async function createTicketAction(
   _previousState: State,
   formData: FormData,
 ) {
-  const cookieManager = await cookies();
-  const activeAccount = cookieManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
-  const token = activeAccount
-    ? cookieManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value
-    : null;
-  if (!activeAccount || !token) {
-    // user is not logged in, make them log in
-    redirect(`/login?next=${encodeURIComponent("/support")}`);
+  const teamId = formData.get("teamId")?.toString();
+
+  if (!teamId) {
+    return {
+      success: false,
+      message: "teamId is required",
+    };
   }
-  const accountRes = await fetch(`${API_SERVER_URL}/v1/account/me`, {
-    method: "GET",
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-  });
-  if (accountRes.status !== 200) {
-    // user is not logged in, make them log in
-    redirect(`/login?next=${encodeURIComponent("/support")}`);
+
+  const team = await getTeamById(teamId);
+
+  if (!team) {
+    return {
+      success: false,
+      message: `Team with id "${teamId}" not found`,
+    };
   }
 
-  const account = (await accountRes.json()) as {
-    data: { name: string; email: string; plan: string; id: string };
-  };
+  const [walletAddress, account] = await Promise.all([
+    getAuthTokenWalletAddress(),
+    getRawAccount(),
+  ]);
+
+  if (!walletAddress || !account) {
+    loginRedirect("/support");
+  }
 
-  const customerId = isValidPlan(account.data.plan)
-    ? planToCustomerId[account.data.plan]
-    : undefined;
+  const customerId = isValidPlan(team.supportPlan)
+    ? planToCustomerId[team.supportPlan]
+    : // fallback to "free" tier
+      planToCustomerId.free;
 
   const product = formData.get("product")?.toString() || "";
   const problemArea = formData.get("extraInfo_Problem_Area")?.toString() || "";
 
   const title = prepareEmailTitle(
     product,
     problemArea,
-    account.data.email,
-    account.data.name,
+    account.email || "",
+    account.name || "",
   );
 
   const keyVal: Record<string, string> = {};
@@ -117,10 +121,10 @@ export async function createTicketAction(
   const markdown = prepareEmailBody({
     product,
     markdownInput: keyVal.markdown || "",
-    email: account.data.email,
-    name: account.data.name,
+    email: account.email || "",
+    name: account.name || "",
     extraInfoInput: keyVal,
-    walletAddress: activeAccount,
+    walletAddress: walletAddress,
   });
 
   const content = {
@@ -129,9 +133,9 @@ export async function createTicketAction(
     markdown,
     status: "open",
     onBehalfOf: {
-      email: account.data.email,
-      name: account.data.name,
-      id: account.data.id,
+      email: account.email,
+      name: account.name,
+      id: account.id,
     },
     customerId,
     emailInboxId: process.env.UNTHREAD_EMAIL_INBOX_ID,

apps/dashboard/src/app/(dashboard)/support/create-ticket/components/create-ticket.client.tsx

@@ -3,6 +3,7 @@
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
 import { SupportForm_SelectInput } from "components/help/contact-forms/shared/SupportForm_SelectInput";
 import dynamic from "next/dynamic";
 import {
@@ -14,6 +15,7 @@ import {
 } from "react";
 import { useFormStatus } from "react-dom";
 import { toast } from "sonner";
+import { SupportForm_TeamSelection } from "../../../../../components/help/contact-forms/shared/SupportForm_TeamSelection";
 import { createTicketAction } from "./create-ticket.action";
 
 const ConnectSupportForm = dynamic(
@@ -75,14 +77,46 @@ const productOptions: { label: string; component: ReactElement }[] = [
   },
 ];
 
-export function CreateTicket() {
+function ProductAreaSelection(props: {
+  productLabel: string;
+  setProductLabel: (val: string) => void;
+}) {
+  const { productLabel, setProductLabel } = props;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <SupportForm_SelectInput
+        formLabel="What do you need help with?"
+        name="product"
+        options={productOptions.map((o) => o.label)}
+        promptText="Select a product"
+        onValueChange={setProductLabel}
+        value={productLabel}
+        required={true}
+      />
+      {productOptions.find((o) => o.label === productLabel)?.component}
+    </div>
+  );
+}
+
+export function CreateTicket(props: {
+  teams: {
+    name: string;
+    id: string;
+  }[];
+}) {
   const formRef = useRef<HTMLFormElement>(null);
+  const [selectedTeamId, setSelectedTeamId] = useState<string | undefined>(
+    props.teams[0]?.id,
+  );
+
   const [productLabel, setProductLabel] = useState("");
 
   const [state, formAction] = useActionState(createTicketAction, {
     message: "",
     success: false,
   });
+
   // needed here
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
@@ -112,16 +146,19 @@ export function CreateTicket() {
         <div className="h-7" />
 
         <div className="flex flex-col gap-6">
-          <SupportForm_SelectInput
-            formLabel="What do you need help with?"
-            name="product"
-            options={productOptions.map((o) => o.label)}
-            promptText="Select a product"
-            onValueChange={setProductLabel}
-            value={productLabel}
-            required={true}
+          {/* Don't conditionally render this - it has be rendered to submit the input values */}
+          <div className={cn(props.teams.length === 1 && "hidden")}>
+            <SupportForm_TeamSelection
+              selectedTeamId={selectedTeamId}
+              onChange={(teamId) => setSelectedTeamId(teamId)}
+              teams={props.teams}
+            />
+          </div>
+
+          <ProductAreaSelection
+            productLabel={productLabel}
+            setProductLabel={setProductLabel}
           />
-          {productOptions.find((o) => o.label === productLabel)?.component}
         </div>
       </div>
 

apps/dashboard/src/app/(dashboard)/support/create-ticket/page.tsx

@@ -1,3 +1,4 @@
+import { getTeams } from "@/api/team";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -7,17 +8,16 @@ import {
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import Link from "next/link";
-import { redirect } from "next/navigation";
-import { getAuthToken } from "../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../login/loginRedirect";
 import { CreateTicket } from "./components/create-ticket.client";
 
 export default async function Page() {
-  const authToken = await getAuthToken();
+  const teams = await getTeams();
 
-  if (!authToken) {
-    return redirect(
-      `/login?next=${encodeURIComponent("/support/create-ticket")}`,
-    );
+  const pagePath = "/support/create-ticket";
+
+  if (!teams || teams.length === 0) {
+    loginRedirect(pagePath);
   }
 
   return (
@@ -36,7 +36,12 @@ export default async function Page() {
         </BreadcrumbList>
       </Breadcrumb>
       <div className="container max-w-[750px] py-10">
-        <CreateTicket />
+        <CreateTicket
+          teams={teams.map((t) => ({
+            name: t.name,
+            id: t.id,
+          }))}
+        />
       </div>
     </div>
   );

apps/dashboard/src/app/(landing)/in-app-wallets/page.tsx

@@ -14,7 +14,6 @@ import analyticsImage from "../../../../public/assets/landingpage/desktop/analyt
 import authDesktopImage from "../../../../public/assets/landingpage/desktop/auth.png";
 import crossPlatformDesktopImage from "../../../../public/assets/landingpage/desktop/cross-platform.png";
 import enterpriseSecurityImage from "../../../../public/assets/landingpage/desktop/enterprise-security.png";
-import guestImage from "../../../../public/assets/landingpage/desktop/guest.png";
 import magicImage from "../../../../public/assets/landingpage/desktop/magic.png";
 import onboardImage from "../../../../public/assets/landingpage/desktop/onboard.png";
 import powerfulImage from "../../../../public/assets/landingpage/desktop/powerful.png";
@@ -24,7 +23,6 @@ import analyticsMobileImage from "../../../../public/assets/landingpage/mobile/a
 import authMobileImage from "../../../../public/assets/landingpage/mobile/auth.png";
 import crossPlatformMobileImage from "../../../../public/assets/landingpage/mobile/cross-platform.png";
 import enterpriseSecurityMobileImage from "../../../../public/assets/landingpage/mobile/enterprise-security.png";
-import guestMobileImage from "../../../../public/assets/landingpage/mobile/guest.png";
 import magicMobileImage from "../../../../public/assets/landingpage/mobile/magic.png";
 import mobileOnboardImage from "../../../../public/assets/landingpage/mobile/onboard.png";
 import powerfulMobileImage from "../../../../public/assets/landingpage/mobile/powerful.png";
@@ -190,16 +188,6 @@ export default function Page() {
           href="https://portal.thirdweb.com/connect/in-app-wallet/how-to/enable-gasless"
         />
 
-        <LandingCardWithImage
-          title="Guest mode"
-          description={`Allow anyone to use your app in seconds — with a wallet that's generated automatically when they press "Continue as guest."`}
-          image={guestImage}
-          mobileImage={guestMobileImage}
-          TRACKING_CATEGORY={TRACKING_CATEGORY}
-          href="https://portal.thirdweb.com/references/wallets/latest/LocalWallet"
-          colSpan={1}
-        />
-
         <LandingCardWithImage
           title="Bring your own auth"
           description="Integrate your authentication system and spin up in-app wallets for your users — new and existing."