Skip to content

Commit 94ab454

Browse files
arcoravenarcoraven
committed
cr comments
1 parent 03fad7b commit 94ab454

File tree

8 files changed

+52
-67
lines changed

8 files changed

+52
-67
lines changed

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,11 @@ export function useHasEngineFeature(
150150
instanceUrl: string,
151151
feature: EngineFeature,
152152
) {
153-
const { data } = useEngineSystemHealth(instanceUrl);
154-
return !!data?.features?.includes(feature);
153+
const query = useEngineSystemHealth(instanceUrl);
154+
return {
155+
query,
156+
isSupported: !!query.data?.features?.includes(feature),
157+
};
155158
}
156159

157160
interface EngineSystemQueueMetrics {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { TabButtons } from "@/components/ui/tabs";
22
import { ToolTipLabel } from "@/components/ui/tooltip";
3+
import { cn } from "@/lib/utils";
34
import {
45
type EngineInstance,
56
useEngineWalletConfig,
@@ -66,7 +67,7 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
6667
(key === "gcp-kms" && !isGcpKmsConfigured)
6768
? ({ className }) => (
6869
<ToolTipLabel label="Not configured">
69-
<CircleAlertIcon className={className} />
70+
<CircleAlertIcon className={cn(className, "size-4")} />
7071
</ToolTipLabel>
7172
)
7273
: undefined,

‎apps/dashboard/src/components/engine/configuration/ip-allowlist.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const EngineIpAllowlistConfig: React.FC<
3030
"IP Allowlist updated successfully.",
3131
"Failed to update IP Allowlist",
3232
);
33-
const isSupported = useHasEngineFeature(instanceUrl, "IP_ALLOWLIST");
33+
const { isSupported } = useHasEngineFeature(instanceUrl, "IP_ALLOWLIST");
3434

3535
const form = useForm<IpForm>({
3636
values: { raw: existingIpAllowlist?.join("\n") ?? "" },

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
2+
import { Spinner } from "@/components/ui/Spinner/Spinner";
23
import { Button } from "@/components/ui/button";
34
import { Form, FormDescription } from "@/components/ui/form";
45
import { Input } from "@/components/ui/input";
@@ -19,9 +20,11 @@ interface KmsAwsConfigProps {
1920
}
2021

2122
export const KmsAwsConfig: React.FC<KmsAwsConfigProps> = ({ instance }) => {
22-
const { mutate: setAwsKmsConfig } = useEngineSetWalletConfig(instance.url);
23+
const { mutate: setAwsKmsConfig, isPending } = useEngineSetWalletConfig(
24+
instance.url,
25+
);
2326
const { data: awsConfig } = useEngineWalletConfig(instance.url);
24-
const supportsMultipleWalletTypes = useHasEngineFeature(
27+
const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
2528
instance.url,
2629
"HETEROGENEOUS_WALLET_TYPES",
2730
);
@@ -108,7 +111,7 @@ export const KmsAwsConfig: React.FC<KmsAwsConfigProps> = ({ instance }) => {
108111
>
109112
<Input
110113
id="aws-region"
111-
placeholder="AKIA..."
114+
placeholder="us-west-2"
112115
autoComplete="off"
113116
type="text"
114117
{...form.register("awsRegion")}
@@ -163,8 +166,9 @@ export const KmsAwsConfig: React.FC<KmsAwsConfigProps> = ({ instance }) => {
163166
This will clear other credentials.
164167
</p>
165168
)}
166-
<Button disabled={!form.formState.isDirty} type="submit">
167-
{form.formState.isSubmitting ? "Saving..." : "Save"}
169+
<Button type="submit" className="min-w-28 gap-2" disabled={isPending}>
170+
{isPending && <Spinner className="size-4" />}
171+
Save
168172
</Button>
169173
</div>
170174
</form>

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
2+
import { Spinner } from "@/components/ui/Spinner/Spinner";
23
import { Button } from "@/components/ui/button";
34
import { Form, FormDescription } from "@/components/ui/form";
45
import { Input } from "@/components/ui/input";
@@ -20,9 +21,11 @@ interface KmsGcpConfigProps {
2021
}
2122

2223
export const KmsGcpConfig: React.FC<KmsGcpConfigProps> = ({ instance }) => {
23-
const { mutate: setGcpKmsConfig } = useEngineSetWalletConfig(instance.url);
24+
const { mutate: setGcpKmsConfig, isPending } = useEngineSetWalletConfig(
25+
instance.url,
26+
);
2427
const { data: gcpConfig } = useEngineWalletConfig(instance.url);
25-
const supportsMultipleWalletTypes = useHasEngineFeature(
28+
const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
2629
instance.url,
2730
"HETEROGENEOUS_WALLET_TYPES",
2831
);
@@ -210,8 +213,9 @@ export const KmsGcpConfig: React.FC<KmsGcpConfigProps> = ({ instance }) => {
210213
This will clear other credentials.
211214
</p>
212215
)}
213-
<Button disabled={!form.formState.isDirty} type="submit">
214-
{form.formState.isSubmitting ? "Saving..." : "Save"}
216+
<Button type="submit" className="min-w-28 gap-2" disabled={isPending}>
217+
{isPending && <Spinner className="size-4" />}
218+
Save
215219
</Button>
216220
</div>
217221
</form>

‎apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx‎

Lines changed: 8 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ interface CreateBackendWalletButtonProps {
4646
export const CreateBackendWalletButton: React.FC<
4747
CreateBackendWalletButtonProps
4848
> = ({ instance, walletConfig }) => {
49-
const supportsMultipleWalletTypes = useHasEngineFeature(
49+
const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
5050
instance.url,
5151
"HETEROGENEOUS_WALLET_TYPES",
5252
);
@@ -125,39 +125,6 @@ export const CreateBackendWalletButton: React.FC<
125125

126126
<div className="flex flex-col gap-5">
127127
{/* Wallet type */}
128-
{/* <FormField
129-
control={form.control}
130-
name="type"
131-
render={({ field }) => (
132-
<FormItem>
133-
<FormLabel>Wallet Type</FormLabel>
134-
<FormControl>
135-
<Select
136-
onValueChange={(value) => field.onChange(value)}
137-
value={field.value}
138-
>
139-
<SelectTrigger>
140-
<SelectValue />
141-
</SelectTrigger>
142-
<SelectContent className="z-[10001]">
143-
<SelectGroup>
144-
{walletTypeOptions.map((option) => (
145-
<SelectItem
146-
key={option.key}
147-
value={option.key}
148-
>
149-
{option.name}
150-
</SelectItem>
151-
))}
152-
</SelectGroup>
153-
</SelectContent>
154-
</Select>
155-
</FormControl>
156-
<FormMessage />
157-
</FormItem>
158-
)}
159-
/>*/}
160-
161128
<FormFieldSetup
162129
label="Wallet Type"
163130
errorMessage={
@@ -168,9 +135,10 @@ export const CreateBackendWalletButton: React.FC<
168135
tooltip={null}
169136
>
170137
<Select
171-
onValueChange={(value) =>
172-
form.setValue("type", value as EngineBackendWalletType)
173-
}
138+
onValueChange={(value) => {
139+
form.reset();
140+
form.setValue("type", value as EngineBackendWalletType);
141+
}}
174142
value={form.watch("type")}
175143
>
176144
<SelectTrigger>
@@ -190,6 +158,7 @@ export const CreateBackendWalletButton: React.FC<
190158

191159
{(walletType === "aws-kms" && !isAwsKmsConfigured) ||
192160
(walletType === "gcp-kms" && !isGcpKmsConfigured) ? (
161+
// Warning if not configured
193162
<Alert variant="warning">
194163
<CircleAlertIcon className="size-5" />
195164
<AlertTitle>
@@ -208,7 +177,9 @@ export const CreateBackendWalletButton: React.FC<
208177
</AlertDescription>
209178
</Alert>
210179
) : (
180+
// Label
211181
<FormFieldSetup
182+
key="label"
212183
label="Label"
213184
errorMessage={
214185
form.getFieldState("label", form.formState).error

‎apps/dashboard/src/components/engine/overview/import-backend-wallet-button.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ interface ImportBackendWalletButtonProps {
4747
export const ImportBackendWalletButton: React.FC<
4848
ImportBackendWalletButtonProps
4949
> = ({ instance, walletConfig }) => {
50-
const supportsMultipleWalletTypes = useHasEngineFeature(
50+
const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
5151
instance.url,
5252
"HETEROGENEOUS_WALLET_TYPES",
5353
);
@@ -66,16 +66,16 @@ export const ImportBackendWalletButton: React.FC<
6666

6767
const onSubmit = (raw: ImportBackendWalletInput) => {
6868
// Submit only relevant fields.
69-
let data: ImportBackendWalletInput = {};
69+
const data: ImportBackendWalletInput = {
70+
label: raw.label,
71+
};
7072
if (walletType === "local") {
71-
data = { privateKey: raw.privateKey };
73+
data.privateKey = raw.privateKey;
7274
} else if (walletType === "aws-kms") {
73-
data = { awsKmsArn: raw.awsKmsArn };
75+
data.awsKmsArn = raw.awsKmsArn;
7476
} else if (walletType === "gcp-kms") {
75-
data = {
76-
gcpKmsKeyId: raw.gcpKmsKeyId,
77-
gcpKmsKeyVersionId: raw.gcpKmsKeyVersionId,
78-
};
77+
data.gcpKmsKeyId = raw.gcpKmsKeyId;
78+
data.gcpKmsKeyVersionId = raw.gcpKmsKeyVersionId;
7979
}
8080

8181
importBackendWallet(data, {
@@ -153,9 +153,10 @@ export const ImportBackendWalletButton: React.FC<
153153
<FormLabel>Wallet Type</FormLabel>
154154
<FormControl>
155155
<Select
156-
onValueChange={(value) =>
157-
setWalletType(value as EngineBackendWalletType)
158-
}
156+
onValueChange={(value) => {
157+
form.reset();
158+
setWalletType(value as EngineBackendWalletType);
159+
}}
159160
value={walletType}
160161
>
161162
<SelectTrigger>
@@ -198,6 +199,7 @@ export const ImportBackendWalletButton: React.FC<
198199
<>
199200
{/* Label */}
200201
<FormFieldSetup
202+
key="label"
201203
label="Label"
202204
errorMessage={
203205
form.getFieldState("label", form.formState).error
@@ -241,17 +243,17 @@ export const ImportBackendWalletButton: React.FC<
241243
</FormFieldSetup>
242244
) : walletType === "aws-kms" ? (
243245
<FormFieldSetup
244-
isRequired
246+
key="awsKmsArn"
245247
label="AWS KMS ARN"
246248
errorMessage={
247249
form.getFieldState("awsKmsArn", form.formState)
248250
.error?.message
249251
}
250252
htmlFor="awsKmsArn"
253+
isRequired
251254
tooltip={null}
252255
>
253256
<Input
254-
key="awsKmsArn"
255257
id="awsKmsArn"
256258
placeholder="arn:aws:kms:us-west-2:123456789012:key/2b7d8e0c-..."
257259
autoComplete="off"
@@ -262,6 +264,7 @@ export const ImportBackendWalletButton: React.FC<
262264
) : walletType === "gcp-kms" ? (
263265
<>
264266
<FormFieldSetup
267+
key="gcpKmsKeyId"
265268
htmlFor="gcpKmsKeyId"
266269
errorMessage={
267270
form.getFieldState("gcpKmsKeyId", form.formState)
@@ -272,7 +275,6 @@ export const ImportBackendWalletButton: React.FC<
272275
tooltip={null}
273276
>
274277
<Input
275-
key="gcpKmsKeyId"
276278
id="gcpKmsKeyId"
277279
placeholder="projects/my-project/locations/us-central1/keyRings/my-key-ring/cryptoKeys/my-key"
278280
autoComplete="off"
@@ -284,6 +286,7 @@ export const ImportBackendWalletButton: React.FC<
284286
</FormFieldSetup>
285287

286288
<FormFieldSetup
289+
key="gcpKmsKeyVersionId"
287290
label="GCP KMS Version ID"
288291
errorMessage={
289292
form.getFieldState(
@@ -296,7 +299,6 @@ export const ImportBackendWalletButton: React.FC<
296299
tooltip={null}
297300
>
298301
<Input
299-
key="gcpKmsKeyVersionId"
300302
id="gcpKmsKeyVersionId"
301303
placeholder="1"
302304
autoComplete="off"

‎apps/dashboard/src/components/engine/permissions/engine-access-tokens.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const EngineAccessTokens: React.FC<EngineAccessTokensProps> = ({
2424
instanceUrl,
2525
}) => {
2626
const [selected, setSelected] = useState<AccessTokenType>("standard");
27-
const hasFeatureKeypairAuthentication = useHasEngineFeature(
27+
const { isSupported: supportsKeyPairAuth } = useHasEngineFeature(
2828
instanceUrl,
2929
"KEYPAIR_AUTH",
3030
);
@@ -35,7 +35,7 @@ export const EngineAccessTokens: React.FC<EngineAccessTokensProps> = ({
3535
<Heading size="title.md">Access Tokens</Heading>
3636
</Flex>
3737

38-
{hasFeatureKeypairAuthentication && (
38+
{supportsKeyPairAuth && (
3939
<ButtonGroup size="sm" variant="ghost" spacing={2}>
4040
<Button
4141
type="button"

0 commit comments

Comments
 (0)