Merge branch 'main' into portal-edits

Author: saminacodes

apps/dashboard/src/@/constants/env.ts

@@ -4,6 +4,11 @@ export const DASHBOARD_THIRDWEB_CLIENT_ID =
 export const DASHBOARD_THIRDWEB_SECRET_KEY =
   process.env.DASHBOARD_SECRET_KEY || "";
 
+export const NEXT_PUBLIC_NEBULA_APP_CLIENT_ID =
+  process.env.NEXT_PUBLIC_NEBULA_APP_CLIENT_ID || "";
+
+export const NEBULA_APP_SECRET_KEY = process.env.NEBULA_APP_SECRET_KEY || "";
+
 export const THIRDWEB_API_SECRET = process.env.API_SERVER_SECRET || "";
 
 export const IPFS_GATEWAY_URL =

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/account-abstraction/settings/page.tsx

@@ -60,6 +60,7 @@ export default async function Page(props: {
         trackingCategory="account-abstraction-project-settings"
         project={project}
         teamId={team.id}
+        teamSlug={team.slug}
         validTeamPlan={getValidTeamPlan(team)}
       />
     </ChakraProviderSetup>

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

@@ -30,7 +30,7 @@ export default async function Page(props: {
       teamId={team.id}
       trackingCategory="in-app-wallet-project-settings"
       teamSlug={team_slug}
-      validTeamPlan={getValidTeamPlan(team)}
+      teamPlan={getValidTeamPlan(team)}
       smsCountryTiers={smsCountryTiers}
     />
   );

apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx

@@ -5,7 +5,7 @@ import { ArrowUpRightIcon } from "lucide-react";
 import type { NebulaContext } from "../api/chat";
 import { examplePrompts } from "../data/examplePrompts";
 import { NebulaIcon } from "../icons/NebulaIcon";
-import { nebulaThirdwebClient } from "../utils/nebulaThirdwebClient";
+import { nebulaAppThirdwebClient } from "../utils/nebulaThirdwebClient";
 import { ChatBar, type WalletMeta } from "./ChatBar";
 
 export function EmptyStateChatPageContent(props: {
@@ -42,7 +42,7 @@ export function EmptyStateChatPageContent(props: {
             setContext={props.setContext}
             sendMessage={props.sendMessage}
             isChatStreaming={false}
-            client={nebulaThirdwebClient}
+            client={nebulaAppThirdwebClient}
             connectedWallets={props.connectedWallets}
             activeAccountAddress={props.activeAccountAddress}
             setActiveWallet={props.setActiveWallet}

apps/dashboard/src/app/nebula-app/(app)/components/NebulaConnectButton.tsx

@@ -2,8 +2,8 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
 import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
 import { useAllChainsData } from "hooks/chains/allChains";
 import { useTheme } from "next-themes";
@@ -14,15 +14,14 @@ import {
   useActiveAccount,
   useActiveWalletConnectionStatus,
 } from "thirdweb/react";
-import { cn } from "../../../../@/lib/utils";
 import { doNebulaLogout } from "../../login/auth-actions";
+import { nebulaAppThirdwebClient } from "../utils/nebulaThirdwebClient";
 
 export const NebulaConnectWallet = (props: {
   connectButtonClassName?: string;
   signInLinkButtonClassName?: string;
   detailsButtonClassName?: string;
 }) => {
-  const thirdwebClient = useThirdwebClient();
   const router = useDashboardRouter();
   const { theme } = useTheme();
   const t = theme === "light" ? "light" : "dark";
@@ -67,7 +66,7 @@ export const NebulaConnectWallet = (props: {
   return (
     <ConnectButton
       theme={getSDKTheme(t)}
-      client={thirdwebClient}
+      client={nebulaAppThirdwebClient}
       connectModal={{
         privacyPolicyUrl: "/privacy-policy",
         termsOfServiceUrl: "/terms",

apps/dashboard/src/app/nebula-app/(app)/utils/nebulaThirdwebClient.ts

@@ -1,3 +1,45 @@
-import { getThirdwebClient } from "@/constants/thirdweb.server";
+import {
+  IPFS_GATEWAY_URL,
+  NEBULA_APP_SECRET_KEY,
+  NEXT_PUBLIC_NEBULA_APP_CLIENT_ID,
+} from "@/constants/env";
+import {
+  THIRDWEB_BUNDLER_DOMAIN,
+  THIRDWEB_INAPP_WALLET_DOMAIN,
+  THIRDWEB_INSIGHT_API_DOMAIN,
+  THIRDWEB_PAY_DOMAIN,
+  THIRDWEB_RPC_DOMAIN,
+  THIRDWEB_SOCIAL_API_DOMAIN,
+  THIRDWEB_STORAGE_DOMAIN,
+} from "constants/urls";
+import { createThirdwebClient } from "thirdweb";
+import { setThirdwebDomains } from "thirdweb/utils";
+import { getVercelEnv } from "../../../../lib/vercel-utils";
 
-export const nebulaThirdwebClient = getThirdwebClient(undefined);
+// returns a thirdweb client with optional JWT passed in
+function getThirdwebClient() {
+  if (getVercelEnv() !== "production") {
+    // if not on production: run this when creating a client to set the domains
+    setThirdwebDomains({
+      rpc: THIRDWEB_RPC_DOMAIN,
+      inAppWallet: THIRDWEB_INAPP_WALLET_DOMAIN,
+      pay: THIRDWEB_PAY_DOMAIN,
+      storage: THIRDWEB_STORAGE_DOMAIN,
+      social: THIRDWEB_SOCIAL_API_DOMAIN,
+      bundler: THIRDWEB_BUNDLER_DOMAIN,
+      insight: THIRDWEB_INSIGHT_API_DOMAIN,
+    });
+  }
+
+  return createThirdwebClient({
+    secretKey: NEBULA_APP_SECRET_KEY,
+    clientId: NEXT_PUBLIC_NEBULA_APP_CLIENT_ID,
+    config: {
+      storage: {
+        gatewayUrl: IPFS_GATEWAY_URL,
+      },
+    },
+  });
+}
+
+export const nebulaAppThirdwebClient = getThirdwebClient();

apps/dashboard/src/app/nebula-app/login/auth-actions.ts

@@ -1,10 +1,7 @@
 "use server";
 import "server-only";
 
-import {
-  DASHBOARD_THIRDWEB_SECRET_KEY,
-  NEXT_PUBLIC_NEBULA_URL,
-} from "@/constants/env";
+import { NEBULA_APP_SECRET_KEY, NEXT_PUBLIC_NEBULA_URL } from "@/constants/env";
 import { isVercel } from "lib/vercel-utils";
 import { cookies } from "next/headers";
 import { getAddress } from "thirdweb";
@@ -26,7 +23,7 @@ export async function getNebulaLoginPayload(
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      "X-Secret-Key": DASHBOARD_THIRDWEB_SECRET_KEY,
+      "X-Secret-Key": NEBULA_APP_SECRET_KEY,
     },
     body: JSON.stringify({
       address: params.address,
@@ -70,7 +67,7 @@ export async function doNebulaLogin(
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      "X-Secret-Key": DASHBOARD_THIRDWEB_SECRET_KEY,
+      "X-Secret-Key": NEBULA_APP_SECRET_KEY,
     },
     body: JSON.stringify(payload),
   });

apps/dashboard/src/components/embedded-wallets/Configure/InAppWalletSettingsUI.stories.tsx

@@ -1,6 +1,6 @@
+import type { Team } from "@/api/team";
 import type { Meta, StoryObj } from "@storybook/react";
 import { projectStub } from "../../../stories/stubs";
-import { mobileViewport } from "../../../stories/utils";
 import { InAppWalletSettingsUI } from "./index";
 
 const meta = {
@@ -16,44 +16,44 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const GrowthPlan: Story = {
+export const FreePlan: Story = {
   args: {
-    canEditAdvancedFeatures: true,
+    currentPlan: "free",
   },
 };
 
-export const FreePlan: Story = {
+export const GrowthPlan: Story = {
   args: {
-    canEditAdvancedFeatures: false,
+    currentPlan: "growth",
   },
 };
 
-export const GrowthPlanMobile: Story = {
+export const AcceleratePlan: Story = {
   args: {
-    canEditAdvancedFeatures: true,
-  },
-  parameters: {
-    viewport: mobileViewport("iphone14"),
+    currentPlan: "accelerate",
   },
 };
 
-export const FreePlanMobile: Story = {
+export const GrowthLegacyPlan: Story = {
   args: {
-    canEditAdvancedFeatures: false,
+    currentPlan: "growth_legacy",
   },
-  parameters: {
-    viewport: mobileViewport("iphone14"),
+};
+
+export const ProPlan: Story = {
+  args: {
+    currentPlan: "pro",
   },
 };
 
 function Variants(props: {
-  canEditAdvancedFeatures: boolean;
+  currentPlan: Team["billingPlan"];
 }) {
   return (
     <div className="mx-auto w-full max-w-[1140px] px-4 py-6">
       <div className="flex flex-col gap-10">
         <InAppWalletSettingsUI
-          canEditAdvancedFeatures={props.canEditAdvancedFeatures}
+          teamPlan={props.currentPlan}
           project={projectStub("foo", "bar")}
           teamId="bar"
           embeddedWalletService={{