Skip to content

Commit bdb1dd5

Browse files
MananTankMananTank
committed
UI updates
1 parent d68c0af commit bdb1dd5

File tree

8 files changed

+55
-74
lines changed

8 files changed

+55
-74
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -874,8 +874,8 @@ export function useEngineSetWalletConfig(params: {
874874
const { instanceUrl, authToken } = params;
875875
const queryClient = useQueryClient();
876876

877-
return useMutation<WalletConfigResponse, void, SetWalletConfigInput>({
878-
mutationFn: async (input) => {
877+
return useMutation({
878+
mutationFn: async (input: SetWalletConfigInput) => {
879879
invariant(instanceUrl, "instance is required");
880880

881881
const res = await fetch(`${instanceUrl}configuration/wallets`, {
@@ -889,7 +889,7 @@ export function useEngineSetWalletConfig(params: {
889889
throw new Error(json.error.message);
890890
}
891891

892-
return json.result;
892+
return json.result as WalletConfigResponse;
893893
},
894894
onSuccess: () => {
895895
return queryClient.invalidateQueries({

‎apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/circle-config.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@ import {
1010
useEngineSetWalletConfig,
1111
} from "@3rdweb-sdk/react/hooks/useEngine";
1212
import { useTrack } from "hooks/analytics/useTrack";
13-
import { useTxNotifications } from "hooks/useTxNotifications";
1413
import { useForm } from "react-hook-form";
15-
import { Text } from "tw-components";
14+
import { toast } from "sonner";
1615

1716
interface CircleConfigProps {
1817
instance: EngineInstance;
@@ -28,10 +27,6 @@ export const CircleConfig: React.FC<CircleConfigProps> = ({
2827
authToken,
2928
});
3029
const trackEvent = useTrack();
31-
const { onSuccess, onError } = useTxNotifications(
32-
"Configuration set successfully.",
33-
"Failed to set configuration.",
34-
);
3530

3631
const defaultValues: SetWalletConfigInput = {
3732
type: "circle" as const,
@@ -50,7 +45,7 @@ export const CircleConfig: React.FC<CircleConfigProps> = ({
5045
const onSubmit = (data: SetWalletConfigInput) => {
5146
setCircleConfig(data, {
5247
onSuccess: () => {
53-
onSuccess();
48+
toast.success("Configuration set successfully");
5449
trackEvent({
5550
category: "engine",
5651
action: "set-wallet-config",
@@ -59,7 +54,9 @@ export const CircleConfig: React.FC<CircleConfigProps> = ({
5954
});
6055
},
6156
onError: (error) => {
62-
onError(error);
57+
toast.error("Failed to set configuration", {
58+
description: error.message,
59+
});
6360
trackEvent({
6461
category: "engine",
6562
action: "set-wallet-config",
@@ -74,7 +71,7 @@ export const CircleConfig: React.FC<CircleConfigProps> = ({
7471
return (
7572
<div className="flex flex-col gap-6">
7673
<div className="flex flex-col gap-2">
77-
<Text className="text-muted-foreground">
74+
<p className="text-muted-foreground">
7875
Circle wallets require an API Key from your Circle account with
7976
sufficient permissions. Created wallets are stored in your AWS
8077
account. Configure your Circle API Key to use Circle wallets. Learn
@@ -89,7 +86,7 @@ export const CircleConfig: React.FC<CircleConfigProps> = ({
8986
how to get an API Key
9087
</TrackedLinkTW>
9188
.
92-
</Text>
89+
</p>
9390
</div>
9491

9592
<Form {...form}>

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Button } from "@/components/ui/button";
2-
import { useDashboardRouter } from "@/lib/DashboardRouter";
32
import { useEngineCreateWalletCredential } from "@3rdweb-sdk/react/hooks/useEngine";
43
import { useTrack } from "hooks/analytics/useTrack";
54
import { Plus } from "lucide-react";
@@ -19,7 +18,6 @@ export const CreateWalletCredentialButton: React.FC<
1918
const [isOpen, setIsOpen] = useState(false);
2019
const trackEvent = useTrack();
2120

22-
const router = useDashboardRouter();
2321
const createCredential = useEngineCreateWalletCredential({
2422
instanceUrl,
2523
authToken,
@@ -29,8 +27,8 @@ export const CreateWalletCredentialButton: React.FC<
2927
const promise = createCredential.mutateAsync(data);
3028

3129
toast.promise(promise, {
32-
loading: "Creating wallet credential...",
3330
success: () => {
31+
setIsOpen(false);
3432
trackEvent({
3533
category: "engine",
3634
action: "create-wallet-credential",
@@ -50,9 +48,6 @@ export const CreateWalletCredentialButton: React.FC<
5048
return "Failed to create wallet credential";
5149
},
5250
});
53-
54-
setIsOpen(false);
55-
router.refresh();
5651
};
5752

5853
return (

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

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
33
import { Button } from "@/components/ui/button";
44
import {
55
DialogContent,
6+
DialogDescription,
67
DialogFooter,
78
DialogHeader,
89
DialogTitle,
@@ -64,25 +65,32 @@ export const CredentialForm = ({
6465

6566
const selectedType = form.watch("type");
6667

67-
const handleSubmit = async (
68-
data: CredentialFormData | CredentialUpdateFormData,
69-
) => {
70-
await onSubmit(data);
71-
};
72-
7368
return (
7469
<Dialog open={isOpen} onOpenChange={onOpenChange}>
7570
<DialogContent
76-
className="z-[10001] p-0"
71+
className="z-[10001] overflow-hidden p-0"
7772
dialogOverlayClassName="z-[10000]"
7873
>
7974
<Form {...form}>
80-
<form onSubmit={form.handleSubmit(handleSubmit)}>
75+
<form
76+
onSubmit={form.handleSubmit((data) => {
77+
return onSubmit(data);
78+
})}
79+
>
8180
<div className="p-6">
8281
<DialogHeader className="mb-4">
83-
<DialogTitle className="font-semibold text-2xl tracking-tight">
84-
{title}
85-
</DialogTitle>
82+
<DialogTitle>{title}</DialogTitle>
83+
<DialogDescription>
84+
<TrackedLinkTW
85+
href="https://portal.thirdweb.com/infrastructure/engine/features/wallet-credentials"
86+
target="_blank"
87+
label="learn-more"
88+
category="engine"
89+
className="text-link-foreground hover:text-foreground"
90+
>
91+
Learn more about wallet credentials
92+
</TrackedLinkTW>
93+
</DialogDescription>
8694
</DialogHeader>
8795

8896
<div className="flex flex-col gap-5">
@@ -103,7 +111,7 @@ export const CredentialForm = ({
103111
}
104112
value={form.watch("type")}
105113
>
106-
<SelectTrigger>
114+
<SelectTrigger className="bg-card">
107115
<SelectValue />
108116
</SelectTrigger>
109117
<SelectContent className="z-[10001]">
@@ -133,6 +141,7 @@ export const CredentialForm = ({
133141
id="credential-label"
134142
type="text"
135143
placeholder="A description to identify this credential"
144+
className="bg-card"
136145
{...form.register("label", { required: true })}
137146
/>
138147
</FormFieldSetup>
@@ -141,20 +150,6 @@ export const CredentialForm = ({
141150
{selectedType === "circle" && (
142151
<CircleCredentialFields form={form} isUpdate={isUpdate} />
143152
)}
144-
145-
<div className="text-muted-foreground text-sm">
146-
Learn more about{" "}
147-
<TrackedLinkTW
148-
href="https://portal.thirdweb.com/infrastructure/engine/features/wallet-credentials"
149-
target="_blank"
150-
label="learn-more"
151-
category="engine"
152-
className="text-link-foreground hover:text-foreground"
153-
>
154-
wallet credentials
155-
</TrackedLinkTW>
156-
.
157-
</div>
158153
</div>
159154
</div>
160155

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

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
2-
import { Alert, AlertDescription } from "@/components/ui/alert";
32
import { Input } from "@/components/ui/input";
4-
import { InfoIcon } from "lucide-react";
53
import Link from "next/link";
64
import type { UseFormReturn } from "react-hook-form";
75
import type { CredentialFormData, CredentialUpdateFormData } from "../types";
@@ -25,10 +23,24 @@ export const CircleCredentialFields: React.FC<CircleCredentialFieldsProps> = ({
2523
htmlFor="entity-secret"
2624
isRequired={!isUpdate}
2725
tooltip={null}
26+
helperText={
27+
<>
28+
Entity Secret is a 32-byte private key designed to secure your
29+
Developer-Controlled wallets{" "}
30+
<Link
31+
href="https://developers.circle.com/w3s/entity-secret-management"
32+
target="_blank"
33+
className="text-link-foreground hover:text-foreground"
34+
>
35+
Learn more about entity secret management
36+
</Link>
37+
</>
38+
}
2839
>
2940
<Input
3041
id="entity-secret"
3142
type="password"
43+
className="bg-card"
3244
placeholder={
3345
isUpdate
3446
? "Leave empty to keep existing secret"
@@ -45,22 +57,6 @@ export const CircleCredentialFields: React.FC<CircleCredentialFieldsProps> = ({
4557
})}
4658
/>
4759
</FormFieldSetup>
48-
49-
<Alert variant="info">
50-
<InfoIcon className="size-4" />
51-
<AlertDescription>
52-
The Entity Secret is a 32-byte private key designed to secure your
53-
Developer-Controlled wallets. Learn more about{" "}
54-
<Link
55-
href="https://developers.circle.com/w3s/entity-secret-management"
56-
target="_blank"
57-
className="text-link-foreground hover:text-foreground"
58-
>
59-
entity secret management
60-
</Link>
61-
.
62-
</AlertDescription>
63-
</Alert>
6460
</>
6561
);
6662
};

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ export const EditWalletCredentialButton: React.FC<
3333
});
3434

3535
toast.promise(promise, {
36-
loading: "Updating wallet credential...",
3736
success: () => {
37+
setIsOpen(false);
3838
trackEvent({
3939
category: "engine",
4040
action: "update-wallet-credential",
@@ -55,8 +55,6 @@ export const EditWalletCredentialButton: React.FC<
5555
return "Failed to update wallet credential";
5656
},
5757
});
58-
59-
setIsOpen(false);
6058
};
6159

6260
return (

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
Table,
77
TableBody,
88
TableCell,
9+
TableContainer,
910
TableHead,
1011
TableHeader,
1112
TableRow,
@@ -31,22 +32,22 @@ export const WalletCredentialsTable: React.FC<WalletCredentialsTableProps> = ({
3132
}) => {
3233
if (isPending && !isFetched) {
3334
return (
34-
<div className="flex min-h-[500px] grow items-center justify-center rounded-lg border border-border">
35+
<div className="flex min-h-[300px] grow items-center justify-center">
3536
<Spinner className="size-10" />
3637
</div>
3738
);
3839
}
3940

4041
if (credentials.length === 0) {
4142
return (
42-
<div className="flex min-h-[500px] grow items-center justify-center rounded-lg border border-border">
43-
<p className="text-muted-foreground text-sm">No credentials found.</p>
43+
<div className="flex min-h-[300px] grow items-center justify-center">
44+
<p className="text-muted-foreground text-sm">No credentials found</p>
4445
</div>
4546
);
4647
}
4748

4849
return (
49-
<div className="relative">
50+
<TableContainer className="border-none">
5051
<Table>
5152
<TableHeader>
5253
<TableRow>
@@ -100,6 +101,6 @@ export const WalletCredentialsTable: React.FC<WalletCredentialsTableProps> = ({
100101
))}
101102
</TableBody>
102103
</Table>
103-
</div>
104+
</TableContainer>
104105
);
105106
};

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
useHasEngineFeature,
88
} from "@3rdweb-sdk/react/hooks/useEngine";
99
import { CircleAlertIcon } from "lucide-react";
10-
import { Link } from "tw-components";
10+
import Link from "next/link";
1111
import { CreateWalletCredentialButton } from "./create-wallet-credential-button";
1212
import { WalletCredentialsTable } from "./wallet-credentials-table";
1313

@@ -57,7 +57,7 @@ export const WalletCredentialsSection: React.FC<WalletCredentialsProps> = ({
5757

5858
return (
5959
<section className="rounded-lg border border-border bg-card">
60-
<div className="flex flex-col gap-5 p-6 lg:flex-row lg:items-center lg:justify-between">
60+
<div className="flex flex-col gap-5 border-border border-b p-6 lg:flex-row lg:items-center lg:justify-between">
6161
<div>
6262
<h2 className="mb-1 font-semibold text-xl tracking-tight">
6363
Wallet Credentials
@@ -67,7 +67,6 @@ export const WalletCredentialsSection: React.FC<WalletCredentialsProps> = ({
6767
<Link
6868
href="https://portal.thirdweb.com/infrastructure/engine/features/wallet-credentials"
6969
target="_blank"
70-
isExternal
7170
>
7271
Learn more about wallet credentials.
7372
</Link>

0 commit comments

Comments
 (0)