Merge branch 'main' into yash/extension-input

Author: kumaryash90

.changeset/fifty-hoops-build.md

@@ -67,8 +67,8 @@
     "input-otp": "^1.4.1",
     "ioredis": "^5.6.0",
     "ipaddr.js": "^2.2.0",
-    "lucide-react": "0.482.0",
-    "next": "15.2.2",
+    "lucide-react": "0.483.0",
+    "next": "15.2.3",
     "next-plausible": "^3.12.4",
     "next-themes": "^0.4.6",
     "nextjs-toploader": "^1.6.12",
@@ -106,8 +106,8 @@
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
     "@chromatic-com/storybook": "3.2.6",
-    "@next/bundle-analyzer": "15.2.2",
-    "@next/eslint-plugin-next": "15.2.2",
+    "@next/bundle-analyzer": "15.2.3",
+    "@next/eslint-plugin-next": "15.2.3",
     "@playwright/test": "1.51.1",
     "@storybook/addon-essentials": "8.6.4",
     "@storybook/addon-interactions": "8.6.4",

.changeset/silver-chairs-return.md

@@ -0,0 +1,53 @@
+import { API_SERVER_URL, THIRDWEB_API_SECRET } from "../constants/env";
+
+export type SMSCountryTiers = {
+  tier1: string[];
+  tier2: string[];
+  tier3: string[];
+  tier4: string[];
+  tier5: string[];
+};
+
+export async function getSMSCountryTiers() {
+  if (!THIRDWEB_API_SECRET) {
+    throw new Error("API_SERVER_SECRET is not set");
+  }
+  const res = await fetch(`${API_SERVER_URL}/v1/sms/list-country-tiers`, {
+    headers: {
+      "Content-Type": "application/json",
+      "x-service-api-key": THIRDWEB_API_SECRET,
+    },
+    next: {
+      revalidate: 15 * 60, //15 minutes
+    },
+  });
+
+  if (!res.ok) {
+    console.error(
+      "Failed to fetch sms country tiers",
+      res.status,
+      res.statusText,
+    );
+    res.body?.cancel();
+    return {
+      tier1: [],
+      tier2: [],
+      tier3: [],
+      tier4: [],
+      tier5: [],
+    };
+  }
+
+  try {
+    return (await res.json()).data as SMSCountryTiers;
+  } catch (e) {
+    console.error("Failed to parse sms country tiers", e);
+    return {
+      tier1: [],
+      tier2: [],
+      tier3: [],
+      tier4: [],
+      tier5: [],
+    };
+  }
+}

apps/dashboard/package.json

@@ -22,15 +22,15 @@ Send native and ERC-20 currencies
 
 ### Deploy
 Deploy published contracts
-- Deploy a Token ERC20 Contract
+- Deploy a Token ERC20 Contract with name "Hello World" and description "My Hello Contract" on Ethereum.
 - Deploy a Split contract with two recipients.
 - Deploy an ERC1155 Contract named 'Hello World' with description 'Hello badges on Ethereum'
 
 ### Understand
 Retrieve information about smart contracts.
 - What ERC standards are implemented by contract address 0x59325733eb952a92e069C87F0A6168b29E80627f on Ethereum?
 - What functions can I use to mint more of my contract's NFTs?
-- What is the total supply of NFTs for my contract?
+- What is the total supply of NFTs on 0x8a90CAb2b38dba80c64b7734e58Ee1dB38B8992e?
 
 ### Interact
 Query wallet balances, addresses, and token holdings.

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

@@ -79,7 +79,7 @@ export const CredentialForm = ({
                 <DialogTitle>{title}</DialogTitle>
                 <DialogDescription>
                   <TrackedLinkTW
-                    href="https://portal.thirdweb.com/infrastructure/engine/features/wallet-credentials"
+                    href="https://portal.thirdweb.com/engine/features/wallet-credentials"
                     target="_blank"
                     label="learn-more"
                     category="engine"

apps/dashboard/src/app/nebula-app/(app)/data/examplePrompts.ts

@@ -65,7 +65,7 @@ export const WalletCredentialsSection: React.FC<WalletCredentialsProps> = ({
           <p className="text-muted-foreground text-sm leading-relaxed">
             Manage your wallet credentials for different providers.{" "}
             <Link
-              href="https://portal.thirdweb.com/infrastructure/engine/features/wallet-credentials"
+              href="https://portal.thirdweb.com/engine/features/wallet-credentials"
               target="_blank"
             >
               Learn more about wallet credentials.

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx

@@ -1,4 +1,5 @@
 import { getProject } from "@/api/projects";
+import { getSMSCountryTiers } from "@/api/sms";
 import { getTeamBySlug } from "@/api/team";
 import { redirect } from "next/navigation";
 import { InAppWalletSettingsPage } from "../../../../../../../components/embedded-wallets/Configure";
@@ -9,9 +10,10 @@ export default async function Page(props: {
 }) {
   const { team_slug, project_slug } = await props.params;
 
-  const [team, project] = await Promise.all([
+  const [team, project, smsCountryTiers] = await Promise.all([
     getTeamBySlug(team_slug),
     getProject(team_slug, project_slug),
+    getSMSCountryTiers(),
   ]);
 
   if (!team) {
@@ -29,6 +31,7 @@ export default async function Page(props: {
       trackingCategory="in-app-wallet-project-settings"
       teamSlug={team_slug}
       validTeamPlan={getValidTeamPlan(team)}
+      smsCountryTiers={smsCountryTiers}
     />
   );
 }

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx

@@ -64,6 +64,14 @@ function Variants(props: {
           isUpdating={false}
           trackingCategory="foo"
           updateApiKey={() => {}}
+          smsCountryTiers={{
+            // scaffold some countries to play around with the UI
+            tier1: ["US", "CA"],
+            tier2: ["GB", "AU", "NZ"],
+            tier3: ["FR", "DE", "ES", "IT"],
+            tier4: ["JP", "KR", "MX", "RU"],
+            tier5: ["BR", "AR", "CO", "CL", "PE", "VE", "SA"],
+          }}
         />
       </div>
     </div>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/settings/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { Project } from "@/api/projects";
+import type { SMSCountryTiers } from "@/api/sms";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
@@ -36,13 +37,15 @@ import { type UseFormReturn, useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { toArrFromList } from "utils/string";
 import type { Team } from "../../../@/api/team";
+import CountrySelector from "./sms-country-select/country-selector";
 
 type InAppWalletSettingsPageProps = {
   trackingCategory: string;
   project: Project;
   teamId: string;
   teamSlug: string;
   validTeamPlan: Team["billingPlan"];
+  smsCountryTiers: SMSCountryTiers;
 };
 
 const TRACKING_CATEGORY = "embedded-wallet";
@@ -108,6 +111,7 @@ export function InAppWalletSettingsPage(props: InAppWalletSettingsPageProps) {
       canEditAdvancedFeatures={props.validTeamPlan !== "free"}
       updateApiKey={handleUpdateProject}
       isUpdating={updateProject.isPending}
+      smsCountryTiers={props.smsCountryTiers}
     />
   );
 }
@@ -120,6 +124,7 @@ const InAppWalletSettingsPageUI: React.FC<
       trackingData: UpdateAPIKeyTrackingData,
     ) => void;
     isUpdating: boolean;
+    smsCountryTiers: SMSCountryTiers;
   }
 > = (props) => {
   const embeddedWalletService = props.project.services.find(
@@ -185,6 +190,11 @@ export const InAppWalletSettingsUI: React.FC<
           }
         : undefined),
       redirectUrls: (config.redirectUrls || []).join("\n"),
+      smsEnabledCountryISOs: config.smsEnabledCountryISOs
+        ? config.smsEnabledCountryISOs
+        : canEditAdvancedFeatures
+          ? ["US", "CA"]
+          : [],
     },
   });
 
@@ -228,6 +238,7 @@ export const InAppWalletSettingsUI: React.FC<
         applicationImageUrl: branding?.applicationImageUrl,
         applicationName: branding?.applicationName || props.project.name,
         redirectUrls: toArrFromList(redirectUrls || "", true),
+        smsEnabledCountryISOs: values.smsEnabledCountryISOs,
       };
     });
 
@@ -256,6 +267,8 @@ export const InAppWalletSettingsUI: React.FC<
           canEditAdvancedFeatures={canEditAdvancedFeatures}
         />
 
+        <NativeAppsFieldset form={form} />
+
         {/* Authentication */}
         <Fieldset legend="Authentication">
           <JSONWebTokenFields
@@ -269,9 +282,15 @@ export const InAppWalletSettingsUI: React.FC<
             form={form}
             canEditAdvancedFeatures={canEditAdvancedFeatures}
           />
-        </Fieldset>
 
-        <NativeAppsFieldset form={form} />
+          <div className="h-5" />
+
+          <SMSCountryFields
+            form={form}
+            canEditAdvancedFeatures={canEditAdvancedFeatures}
+            smsCountryTiers={props.smsCountryTiers}
+          />
+        </Fieldset>
 
         <div className="flex justify-end">
           <Button type="submit" variant="primary" className="gap-2">
@@ -364,6 +383,61 @@ function BrandingFieldset(props: {
   );
 }
 
+function SMSCountryFields(props: {
+  form: UseFormReturn<ApiKeyEmbeddedWalletsValidationSchema>;
+  canEditAdvancedFeatures: boolean;
+  smsCountryTiers: SMSCountryTiers;
+}) {
+  return (
+    <div>
+      <SwitchContainer
+        switchId="sms-switch"
+        title="SMS"
+        description="Optionally allow users in selected countries to login via SMS OTP."
+      >
+        <GatedSwitch
+          id="sms-switch"
+          trackingLabel="sms"
+          checked={
+            !!props.form.watch("smsEnabledCountryISOs").length &&
+            props.canEditAdvancedFeatures
+          }
+          upgradeRequired={!props.canEditAdvancedFeatures}
+          onCheckedChange={(checked) =>
+            props.form.setValue(
+              "smsEnabledCountryISOs",
+              checked
+                ? // by default, enable US and CA only
+                  ["US", "CA"]
+                : [],
+            )
+          }
+        />
+      </SwitchContainer>
+
+      <AdvancedConfigurationContainer
+        className="grid grid-cols-1"
+        show={
+          props.canEditAdvancedFeatures &&
+          !!props.form.watch("smsEnabledCountryISOs").length
+        }
+      >
+        <FormField
+          control={props.form.control}
+          name="smsEnabledCountryISOs"
+          render={({ field }) => (
+            <CountrySelector
+              countryTiers={props.smsCountryTiers}
+              selected={field.value}
+              onChange={field.onChange}
+            />
+          )}
+        />
+      </AdvancedConfigurationContainer>
+    </div>
+  );
+}
+
 function JSONWebTokenFields(props: {
   form: UseFormReturn<ApiKeyEmbeddedWalletsValidationSchema>;
   canEditAdvancedFeatures: boolean;