Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release to wizard #35

Merged
merged 2 commits into from
Jan 20, 2025
Merged

Release to wizard #35

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc3d8ed
fix: adding warning message when user select injected provider
NicoMolinaOZ Jan 20, 2025
dd39a8c
Merge pull request #34 from OpenZeppelin/adding-warning-for-contract-…
NicoMolinaOZ Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 117 additions & 88 deletions src/lib/wizard/components/ApprovalProcess.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,27 @@
import { globalState } from "$lib/state/state.svelte";
import Dropdown from "./shared/Dropdown.svelte";
import { abbreviateAddress } from "$lib/utils/helpers";
import { approvalProcessTypes, type ApprovalProcess, type ApprovalProcessType } from "$lib/models/approval-process";
import {
approvalProcessTypes,
type ApprovalProcess,
type ApprovalProcessType,
} from "$lib/models/approval-process";
import type { DropdownItem, GlobalState } from "$lib/models/ui";
import type { Relayer } from "$lib/models/relayer";
import { getNetworkLiteral } from "$lib/models/network";
import Input from "./shared/Input.svelte";
import Message from "./shared/Message.svelte";

let address = $state<string>(globalState.form.approvalProcessToCreate?.via || "");
let address = $state<string>(
globalState.form.approvalProcessToCreate?.via || ""
);

function approvalProcessByNetworkAndComponent(ap: ApprovalProcess) {
const networkName = typeof globalState.form.network === 'string'
? globalState.form.network
: globalState.form.network?.name;

const networkName =
typeof globalState.form.network === "string"
? globalState.form.network
: globalState.form.network?.name;

return ap.network === networkName && ap.component?.includes("deploy");
}

Expand Down Expand Up @@ -63,7 +70,9 @@
viaType: "Relayer",
via: relayer.value.address,
relayerId: relayer.value.relayerId,
network: globalState.form.network && getNetworkLiteral(globalState.form.network),
network:
globalState.form.network &&
getNetworkLiteral(globalState.form.network),
};
}
};
Expand All @@ -75,7 +84,8 @@
globalState.form.approvalProcessToCreate = {
viaType: approvalProcessType as "EOA" | "Safe" | "Relayer",
via: element.value,
network: globalState.form.network && getNetworkLiteral(globalState.form.network),
network:
globalState.form.network && getNetworkLiteral(globalState.form.network),
};
};

Expand All @@ -91,102 +101,115 @@
};

let disableCreation = $derived.by(() =>
globalState.approvalProcesses.some(approvalProcessByNetworkAndComponent),
globalState.approvalProcesses.some(approvalProcessByNetworkAndComponent)
);

let disableRelayers = $derived.by(() =>
!globalState.permissions?.includes("manage-relayers")
let disableRelayers = $derived.by(
() => !globalState.permissions?.includes("manage-relayers")
);
</script>

<div class="form-check flex flex-col gap-2">
<div>
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="existing"
onclick={(e) => onRadioChange(e)}
checked
/>
<label class="text-sm" for="flexRadioDefault1">
Use existing Approval Process
</label></div>
<div class="pl-4">
{#key globalState.form.approvalProcessSelected}
<Dropdown
items={globalState.approvalProcesses
.filter(approvalProcessByNetworkAndComponent)
.map(approvalProcessToDropdownItem)}
placeholder="Select Approval Process"
on:select={(e) => onSelectApprovalProcess(e.detail)}
disabled={radioSelected !== "existing"}
defaultItem={globalState.form.approvalProcessSelected
? {
label: toDisplayName(globalState.form.approvalProcessSelected),
value: globalState.form.approvalProcessSelected,
}
: undefined}
emptyLabel="No Approval Processes Available"
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="existing"
onclick={(e) => onRadioChange(e)}
checked
/>
{/key}
</div>
<label class="text-sm" for="flexRadioDefault1">
Use existing Approval Process
</label>
</div>
<div class="pl-4">
{#key globalState.form.approvalProcessSelected}
<Dropdown
items={globalState.approvalProcesses
.filter(approvalProcessByNetworkAndComponent)
.map(approvalProcessToDropdownItem)}
placeholder="Select Approval Process"
on:select={(e) => onSelectApprovalProcess(e.detail)}
disabled={radioSelected !== "existing"}
defaultItem={globalState.form.approvalProcessSelected
? {
label: toDisplayName(globalState.form.approvalProcessSelected),
value: globalState.form.approvalProcessSelected,
}
: undefined}
emptyLabel="No Approval Processes Available"
/>
{/key}
</div>
</div>
<div
class="form-check mt-3 flex flex-col gap-2"
title={disableCreation ? "Deploy Environment already exists" : undefined}
><div>

<label
class={`text-sm ${disableCreation ? 'text-gray-500' : ''}`}
for="flexRadioDefault2"
title={disableCreation ? "Deploy Environment already exists" : undefined}
> <input
class="text-xs"
type="radio"
name="flexRadioDefault"
id="new"
onclick={(e) => onRadioChange(e)}
disabled={disableCreation}
title={disableCreation ? "Deploy Environment already exists" : undefined}
/>
Create new Approval Process
</label>
>
<div>
<label
class={`text-sm ${disableCreation ? "text-gray-500" : ""}`}
for="flexRadioDefault2"
title={disableCreation ? "Deploy Environment already exists" : undefined}
>
<input
class="text-xs"
type="radio"
name="flexRadioDefault"
id="new"
onclick={(e) => onRadioChange(e)}
disabled={disableCreation}
title={disableCreation
? "Deploy Environment already exists"
: undefined}
/>
Create new Approval Process
</label>
</div>
<div class="pl-4 gap-2 flex flex-col">
<Dropdown
items={approvalProcessTypes.map(approvalProcessTypeToDropdownItem)}
placeholder="Approval Process Type"
on:select={(e) => onSelectApprovalProcessType(e.detail)}
disabled={radioSelected !== "new" || disableCreation}
defaultItem={{
label: approvalProcessType,
value: approvalProcessType,
}}
/>
<Dropdown
items={approvalProcessTypes.map(approvalProcessTypeToDropdownItem)}
placeholder="Approval Process Type"
on:select={(e) => onSelectApprovalProcessType(e.detail)}
disabled={radioSelected !== "new" || disableCreation}
defaultItem={{
label: approvalProcessType,
value: approvalProcessType,
}}
/>

{#if approvalProcessType === "EOA" || approvalProcessType === "Safe"}
<div>
<Input value={address} placeholder="* Address" type="text" onchange={onAddressChange} />
</div>
{:else if approvalProcessType === "Relayer"}
{#if disableRelayers}
<div class="mt-2">
<Message message="API Key not allowed to manage Relayers" type="warn" />
{#if approvalProcessType === "EOA" || approvalProcessType === "Safe"}
<div>
<Input
value={address}
placeholder="* Address"
type="text"
onchange={onAddressChange}
/>
</div>
{:else}
<Dropdown
name="relayer"
items={globalState.relayers
.filter(relayerByNetwork)
.map(relayerToDropdownItem)}
placeholder="* Select Relayer"
on:select={(e) => onSelectRelayer(e.detail)}
disabled={radioSelected !== "new" || disableCreation}
/>
{:else if approvalProcessType === "Relayer"}
{#if disableRelayers}
<div class="mt-2">
<Message
message="API Key not allowed to manage Relayers"
type="warn"
/>
</div>
{:else}
<Dropdown
name="relayer"
items={globalState.relayers
.filter(relayerByNetwork)
.map(relayerToDropdownItem)}
placeholder="* Select Relayer"
on:select={(e) => onSelectRelayer(e.detail)}
disabled={radioSelected !== "new" || disableCreation}
/>
{/if}
{/if}
{/if}
</div></div>
</div>
</div>
<div class="form-check mt-3">
<input
class="form-check-input"
Expand All @@ -198,10 +221,16 @@
disabled={disableCreation}
/>
<label
class={`text-sm ${disableCreation ? 'text-gray-500' : ''}`}
class={`text-sm ${disableCreation ? "text-gray-500" : ""}`}
for="flexRadioDefault2"
title={disableCreation ? "Deploy Environment already exists" : undefined}
>
Approve using injected provider
</label>
<div class="mt-2">
<Message
message="By selecting this option, the contract to deploy will not be verified automatically"
type="warn"
/>
</div>
</div>
Loading