d-bis/js
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show Deterministic Deploy warning banner if constructor params exist (#4717)

Browse Source 
FIXES DASH-257

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to enhance the Custom Contract Form in the dashboard by adding a warning for deterministic deployment.

### Detailed summary
- Added `CircleAlertIcon` and warning message for deterministic deployment
- Updated the layout of the deterministic deploy checkbox and warning display

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
This commit is contained in:
MananTank
2024-09-20 00:26:34 +00:00
parent a7b3d0e72c
commit a491d8bd7c
1 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx
+36 -18
View File
@@ -1,6 +1,7 @@
"use client";
import { Spinner } from "@/components/ui/Spinner/Spinner";
import { Alert, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
import { ToolTipLabel } from "@/components/ui/tooltip";
@@ -22,7 +23,7 @@ import { SolidityInput } from "contract-ui/components/solidity-inputs";
import { useTrack } from "hooks/analytics/useTrack";
import { useTxNotifications } from "hooks/useTxNotifications";
import { replaceTemplateValues } from "lib/deployment/template-values";
import { ExternalLinkIcon } from "lucide-react";
import { CircleAlertIcon, ExternalLinkIcon } from "lucide-react";
import Link from "next/link";
import { useCallback, useMemo } from "react";
import { FormProvider, type UseFormReturn, useForm } from "react-hook-form";
@@ -480,6 +481,9 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
enabled: walletChain !== undefined && metadata !== undefined,
});
const shouldShowDeterministicDeployWarning =
constructorParams.length > 0 && form.watch("deployDeterministic");
return (
<>
<FormProvider {...form}>
@@ -837,23 +841,37 @@ export const CustomContractForm: React.FC<CustomContractFormProps> = ({
{metadata?.deployType === "standard" && (
<>
{/* Deterministic deploy */}
<CheckboxWithLabel>
<Checkbox
{...form.register("deployDeterministic")}
checked={form.watch("deployDeterministic")}
onCheckedChange={(c) =>
form.setValue("deployDeterministic", !!c)
}
/>
<ToolTipLabel label="Allows having the same contract address on multiple chains. You can control the address by specifying a salt for create2 deployment below">
<div className="inline-flex gap-1.5 items-center">
<span className="tex-sm">
Deploy at a deterministic address
</span>
<FiHelpCircle className="size-4" />
</div>
</ToolTipLabel>
</CheckboxWithLabel>
<div className="flex flex-col gap-3">
<CheckboxWithLabel>
<Checkbox
{...form.register("deployDeterministic")}
checked={form.watch("deployDeterministic")}
onCheckedChange={(c) =>
form.setValue("deployDeterministic", !!c)
}
/>
<ToolTipLabel label="Allows having the same contract address on multiple chains. You can control the address by specifying a salt for create2 deployment below">
<div className="inline-flex gap-1.5 items-center">
<span className="tex-sm">
Deploy at a deterministic address
</span>
<FiHelpCircle className="size-4" />
</div>
</ToolTipLabel>
</CheckboxWithLabel>
{shouldShowDeterministicDeployWarning && (
<Alert variant="warning">
<CircleAlertIcon className="size-5" />
<AlertTitle>
Deterministic deployment would only result in the same
contract address if you use the same contructor params
on every deployment.
</AlertTitle>
</Alert>
)}
</div>
{/* Optional Salt Input */}
{isCreate2Deployment && (