Merge branch 'pb/circle-wallets-and-credentials' of github.com:thirdweb-dev/js into pb/circle-wallets-and-credentials

Author: d4mr

.changeset/lazy-files-act.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/service-utils": patch
+---
+
+[service-utils] Allow client-side usageV2 reporting

.changeset/metal-crabs-beg.md

@@ -337,6 +337,12 @@ async function redirects() {
       destination: "/connect/account-abstraction",
       permanent: false,
     },
+    // redirect /connect/pay to /connect/universal-bridge
+    {
+      source: "/connect/pay",
+      destination: "/connect/universal-bridge",
+      permanent: false,
+    },
     // PREVIOUS CAMPAIGNS
     {
       source: "/unlimited-wallets",

.changeset/small-moons-behave.md

@@ -874,8 +874,8 @@ export function useEngineSetWalletConfig(params: {
   const { instanceUrl, authToken } = params;
   const queryClient = useQueryClient();
 
-  return useMutation<WalletConfigResponse, void, SetWalletConfigInput>({
-    mutationFn: async (input) => {
+  return useMutation({
+    mutationFn: async (input: SetWalletConfigInput) => {
       invariant(instanceUrl, "instance is required");
 
       const res = await fetch(`${instanceUrl}configuration/wallets`, {
@@ -889,7 +889,7 @@ export function useEngineSetWalletConfig(params: {
         throw new Error(json.error.message);
       }
 
-      return json.result;
+      return json.result as WalletConfigResponse;
     },
     onSuccess: () => {
       return queryClient.invalidateQueries({
@@ -1873,7 +1873,7 @@ export interface WalletCredential {
   updatedAt: string;
 }
 
-export interface CreateWalletCredentialInput {
+interface CreateWalletCredentialInput {
   type: "circle";
   label: string;
   entitySecret?: string;
@@ -1938,7 +1938,7 @@ export function useEngineCreateWalletCredential(params: {
   });
 }
 
-export interface UpdateWalletCredentialInput {
+interface UpdateWalletCredentialInput {
   label?: string;
   isDefault?: boolean;
   entitySecret?: string;

.changeset/thirty-monkeys-promise.md

@@ -8,6 +8,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import {
   type AccountValidationSchema,
   accountValidationSchema,
@@ -81,15 +82,21 @@ export const AccountForm: React.FC<AccountFormProps> = ({
           data,
         });
       },
-      onError: (err) => {
-        const error = err as Error;
+      onError: (error) => {
+        console.error(error);
 
         if (
           onDuplicateError &&
           error?.message.match(/email address already exists/)
         ) {
           onDuplicateError(values.email);
+          return;
+        } else if (error.message.includes("INVALID_EMAIL_ADDRESS")) {
+          toast.error("Invalid Email Address");
+        } else {
+          toast.error(error.message || "Failed to update account");
         }
+
         trackEvent({
           category: "account",
           action: "update",

apps/dashboard/redirects.js

@@ -10,9 +10,8 @@ import {
   useEngineSetWalletConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
 import { useForm } from "react-hook-form";
-import { Text } from "tw-components";
+import { toast } from "sonner";
 
 interface CircleConfigProps {
   instance: EngineInstance;
@@ -28,10 +27,6 @@ export const CircleConfig: React.FC<CircleConfigProps> = ({
     authToken,
   });
   const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Configuration set successfully.",
-    "Failed to set configuration.",
-  );
 
   const defaultValues: SetWalletConfigInput = {
     type: "circle" as const,
@@ -50,7 +45,7 @@ export const CircleConfig: React.FC<CircleConfigProps> = ({
   const onSubmit = (data: SetWalletConfigInput) => {
     setCircleConfig(data, {
       onSuccess: () => {
-        onSuccess();
+        toast.success("Configuration set successfully");
         trackEvent({
           category: "engine",
           action: "set-wallet-config",
@@ -59,7 +54,9 @@ export const CircleConfig: React.FC<CircleConfigProps> = ({
         });
       },
       onError: (error) => {
-        onError(error);
+        toast.error("Failed to set configuration", {
+          description: error.message,
+        });
         trackEvent({
           category: "engine",
           action: "set-wallet-config",
@@ -74,7 +71,7 @@ export const CircleConfig: React.FC<CircleConfigProps> = ({
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-2">
-        <Text className="text-muted-foreground">
+        <p className="text-muted-foreground">
           Circle wallets require an API Key from your Circle account with
           sufficient permissions. Created wallets are stored in your AWS
           account. Configure your Circle API Key to use Circle wallets. Learn
@@ -89,7 +86,7 @@ export const CircleConfig: React.FC<CircleConfigProps> = ({
             how to get an API Key
           </TrackedLinkTW>
           .
-        </Text>
+        </p>
       </div>
 
       <Form {...form}>

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

@@ -38,7 +38,6 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import invariant from "tiny-invariant";
-import { Link as TwLink } from "tw-components";
 
 interface CreateBackendWalletButtonProps {
   instance: EngineInstance;
@@ -131,7 +130,7 @@ export const CreateBackendWalletButton: React.FC<
       </Button>
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
         <DialogContent
-          className="z-[10001] p-0"
+          className="z-[10001] overflow-hidden p-0"
           dialogOverlayClassName="z-[10000]"
         >
           <Form {...form}>
@@ -143,7 +142,7 @@ export const CreateBackendWalletButton: React.FC<
                   </DialogTitle>
                 </DialogHeader>
 
-                <div className="flex flex-col gap-5">
+                <div className="flex flex-col gap-3">
                   {/* Wallet type */}
                   <FormFieldSetup
                     label="Wallet Type"
@@ -294,13 +293,13 @@ export const CreateBackendWalletButton: React.FC<
                                 Key for Circle, you can only create testnet
                                 wallets. A production API Key cannot be used for
                                 testnet transactions, and vice versa.{" "}
-                                <TwLink
+                                <Link
                                   href="https://developers.circle.com/w3s/sandbox-vs-production"
                                   target="_blank"
-                                  isExternal
+                                  className="text-link-foreground hover:text-foreground"
                                 >
                                   Learn more
-                                </TwLink>
+                                </Link>
                               </FormDescription>
                             </div>
                           </FormFieldSetup>

apps/dashboard/src/app/login/onboarding/AccountForm.tsx

@@ -1,5 +1,4 @@
 import { Button } from "@/components/ui/button";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { useEngineCreateWalletCredential } from "@3rdweb-sdk/react/hooks/useEngine";
 import { useTrack } from "hooks/analytics/useTrack";
 import { Plus } from "lucide-react";
@@ -19,7 +18,6 @@ export const CreateWalletCredentialButton: React.FC<
   const [isOpen, setIsOpen] = useState(false);
   const trackEvent = useTrack();
 
-  const router = useDashboardRouter();
   const createCredential = useEngineCreateWalletCredential({
     instanceUrl,
     authToken,
@@ -29,8 +27,8 @@ export const CreateWalletCredentialButton: React.FC<
     const promise = createCredential.mutateAsync(data);
 
     toast.promise(promise, {
-      loading: "Creating wallet credential...",
       success: () => {
+        setIsOpen(false);
         trackEvent({
           category: "engine",
           action: "create-wallet-credential",
@@ -50,9 +48,6 @@ export const CreateWalletCredentialButton: React.FC<
         return "Failed to create wallet credential";
       },
     });
-
-    setIsOpen(false);
-    router.refresh();
   };
 
   return (