Skip to content

Commit f1ea5b3

Browse files
arcoravenarcoraven
committed
show destructive message
1 parent 4832eeb commit f1ea5b3

File tree

5 files changed

+52
-30
lines changed

5 files changed

+52
-30
lines changed

‎apps/dashboard/src/components/engine/configuration/engine-wallet-config.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import { TabButtons } from "@/components/ui/tabs";
22
import { ToolTipLabel } from "@/components/ui/tooltip";
33
import {
4-
type EngineBackendWalletType,
54
type EngineInstance,
65
useEngineWalletConfig,
76
} from "@3rdweb-sdk/react/hooks/useEngine";
87
import { Flex } from "@chakra-ui/react";
9-
import { EngineBackendWalletOptions } from "lib/engine";
8+
import {
9+
EngineBackendWalletOptions,
10+
type EngineBackendWalletType,
11+
} from "lib/engine";
1012
import { CircleAlertIcon } from "lucide-react";
1113
import Link from "next/link";
1214
import { useState } from "react";
1315
import {} from "react-icons/md";
14-
import { Heading, Text } from "tw-components";
16+
import { Heading } from "tw-components";
1517
import { KmsAwsConfig } from "./kms-aws-config";
1618
import { KmsGcpConfig } from "./kms-gcp-config";
1719
import { LocalConfig } from "./local-config";
@@ -40,7 +42,7 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
4042
<Flex flexDir="column" gap={4}>
4143
<Flex flexDir="column" gap={2}>
4244
<Heading size="title.md">Backend Wallets</Heading>
43-
<Text>
45+
<p className="text-muted-foreground">
4446
Create backend wallets on the{" "}
4547
<Link
4648
href={`/dashboard/engine/${instance.id}`}
@@ -49,7 +51,7 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
4951
Overview
5052
</Link>{" "}
5153
tab. To use other wallet types, configure them below.
52-
</Text>
54+
</p>
5355
</Flex>
5456

5557
<TabButtons

‎apps/dashboard/src/components/engine/configuration/kms-aws-config.tsx‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
type SetWalletConfigInput,
99
useEngineSetWalletConfig,
1010
useEngineWalletConfig,
11+
useHasEngineFeature,
1112
} from "@3rdweb-sdk/react/hooks/useEngine";
1213
import { useTrack } from "hooks/analytics/useTrack";
1314
import { useTxNotifications } from "hooks/useTxNotifications";
@@ -20,6 +21,10 @@ interface KmsAwsConfigProps {
2021
export const KmsAwsConfig: React.FC<KmsAwsConfigProps> = ({ instance }) => {
2122
const { mutate: setAwsKmsConfig } = useEngineSetWalletConfig(instance.url);
2223
const { data: awsConfig } = useEngineWalletConfig(instance.url);
24+
const supportsMultipleWalletTypes = useHasEngineFeature(
25+
instance.url,
26+
"HETEROGENEOUS_WALLET_TYPES",
27+
);
2328
const trackEvent = useTrack();
2429
const { onSuccess, onError } = useTxNotifications(
2530
"Configuration set successfully.",
@@ -72,12 +77,12 @@ export const KmsAwsConfig: React.FC<KmsAwsConfigProps> = ({ instance }) => {
7277
className="flex flex-col gap-4"
7378
onSubmit={form.handleSubmit(onSubmit)}
7479
>
75-
<p className="text-sm">
80+
<p className="text-muted-foreground">
7681
AWS KMS wallets require credentials from your Amazon Web Services
7782
account with sufficient permissions to manage KMS keys. Wallets are
7883
stored in KMS keys on your AWS account.
7984
</p>
80-
<p className="text-sm">
85+
<p className="text-muted-foreground">
8186
For help and more advanced use cases,{" "}
8287
<TrackedLinkTW
8388
target="_blank"
@@ -91,7 +96,25 @@ export const KmsAwsConfig: React.FC<KmsAwsConfigProps> = ({ instance }) => {
9196
.
9297
</p>
9398

94-
<div className="grid gap-4 md:grid-cols-3">
99+
<div className="grid gap-4 md:grid-cols-2">
100+
<FormFieldSetup
101+
label="Region"
102+
errorMessage={
103+
form.getFieldState("awsRegion", form.formState).error?.message
104+
}
105+
htmlFor="aws-region"
106+
isRequired={false}
107+
tooltip={null}
108+
>
109+
<Input
110+
id="aws-region"
111+
placeholder="AKIA..."
112+
autoComplete="off"
113+
type="text"
114+
{...form.register("awsRegion")}
115+
/>
116+
</FormFieldSetup>
117+
95118
<FormFieldSetup
96119
label="Access Key"
97120
errorMessage={
@@ -132,27 +155,14 @@ export const KmsAwsConfig: React.FC<KmsAwsConfigProps> = ({ instance }) => {
132155
This will not be shown again.
133156
</FormDescription>
134157
</FormFieldSetup>
135-
136-
<FormFieldSetup
137-
label="Region"
138-
errorMessage={
139-
form.getFieldState("awsRegion", form.formState).error?.message
140-
}
141-
htmlFor="aws-region"
142-
isRequired={false}
143-
tooltip={null}
144-
>
145-
<Input
146-
id="aws-region"
147-
placeholder="AKIA..."
148-
autoComplete="off"
149-
type="text"
150-
{...form.register("awsRegion")}
151-
/>
152-
</FormFieldSetup>
153158
</div>
154159

155160
<div className="flex items-center justify-end gap-4">
161+
{!supportsMultipleWalletTypes && (
162+
<p className="text-destructive-text text-sm">
163+
This will clear other credentials.
164+
</p>
165+
)}
156166
<Button disabled={!form.formState.isDirty} type="submit">
157167
{form.formState.isSubmitting ? "Saving..." : "Save"}
158168
</Button>

‎apps/dashboard/src/components/engine/configuration/kms-gcp-config.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
type SetWalletConfigInput,
1010
useEngineSetWalletConfig,
1111
useEngineWalletConfig,
12+
useHasEngineFeature,
1213
} from "@3rdweb-sdk/react/hooks/useEngine";
1314
import { useTrack } from "hooks/analytics/useTrack";
1415
import { useTxNotifications } from "hooks/useTxNotifications";
@@ -21,6 +22,10 @@ interface KmsGcpConfigProps {
2122
export const KmsGcpConfig: React.FC<KmsGcpConfigProps> = ({ instance }) => {
2223
const { mutate: setGcpKmsConfig } = useEngineSetWalletConfig(instance.url);
2324
const { data: gcpConfig } = useEngineWalletConfig(instance.url);
25+
const supportsMultipleWalletTypes = useHasEngineFeature(
26+
instance.url,
27+
"HETEROGENEOUS_WALLET_TYPES",
28+
);
2429
const trackEvent = useTrack();
2530
const { onSuccess, onError } = useTxNotifications(
2631
"Configuration set successfully.",
@@ -76,12 +81,12 @@ export const KmsGcpConfig: React.FC<KmsGcpConfigProps> = ({ instance }) => {
7681
className="flex flex-col gap-4"
7782
onSubmit={form.handleSubmit(onSubmit)}
7883
>
79-
<p className="text-sm">
84+
<p className="text-muted-foreground">
8085
GCP KMS wallets require credentials from your Google Cloud Platform
8186
account with sufficient permissions to manage KMS keys. Wallets are
8287
stored in KMS keys on your GCP account.
8388
</p>
84-
<p className="text-sm">
89+
<p className="text-muted-foreground">
8590
For help and more advanced use cases,{" "}
8691
<TrackedLinkTW
8792
target="_blank"
@@ -200,6 +205,11 @@ export const KmsGcpConfig: React.FC<KmsGcpConfigProps> = ({ instance }) => {
200205
</FormFieldSetup>
201206

202207
<div className="flex items-center justify-end gap-4">
208+
{!supportsMultipleWalletTypes && (
209+
<p className="text-destructive-text text-sm">
210+
This will clear other credentials.
211+
</p>
212+
)}
203213
<Button disabled={!form.formState.isDirty} type="submit">
204214
{form.formState.isSubmitting ? "Saving..." : "Save"}
205215
</Button>

‎apps/dashboard/src/components/engine/configuration/local-config.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const LocalConfig: React.FC = () => {
22
return (
33
<div className="flex flex-col gap-4">
4-
<p className="text-sm">
4+
<p className="text-muted-foreground">
55
Local wallets are natively supported with no configuration required.
66
Wallets are stored encrypted in Engine's database.
77
</p>

‎apps/dashboard/src/components/engine/overview/engine-overview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function BackendWalletsSection(props: {
4949
Engine sends blockchain transactions from backend wallets you own
5050
and manage.
5151
</p>
52-
<p className="text-sm">
52+
<p className="text-muted-foreground">
5353
Set up other wallet types from the{" "}
5454
<Link
5555
href={`/dashboard/engine/${instance.id}/configuration`}

0 commit comments

Comments
 (0)