Skip to content

Commit fdcdca2

Browse files
Patrick-Ehimenericglau
Patrick-Ehimen
and
ericglau
authored
Add Collapse Optional Sections by Default (#456)
Co-authored-by: Eric Lau <[email protected]>
1 parent dea6d51 commit fdcdca2

20 files changed

+396
-355
lines changed

‎packages/ui/src/cairo/AccessControlSection.svelte

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import type { Access } from '@openzeppelin/wizard-cairo';
33
4-
import ToggleRadio from '../common/inputs/ToggleRadio.svelte';
4+
import ExpandableToggleRadio from '../common/ExpandableToggleRadio.svelte';
55
import HelpTooltip from '../common/HelpTooltip.svelte';
66
77
export let access: Access;
@@ -28,20 +28,14 @@
2828
}
2929
</script>
3030

31-
<section class="controls-section">
32-
<h1>
33-
<!-- svelte-ignore a11y-label-has-associated-control -->
34-
<label class="flex items-center tooltip-container pr-2">
35-
<span>Access Control</span>
36-
<span class="ml-1">
37-
<ToggleRadio bind:value={access} defaultValue="ownable" disabled={required} />
38-
</span>
39-
<HelpTooltip align="right" link="https://docs.openzeppelin.com/contracts-cairo/access">
40-
Restrict who can access the functions of a contract or when they can do it.
41-
</HelpTooltip>
42-
</label>
43-
</h1>
44-
31+
<ExpandableToggleRadio
32+
label="Access Control"
33+
bind:value={access}
34+
defaultValue="ownable"
35+
helpContent="Restrict who can access the functions of a contract or when they can do it."
36+
helpLink="https://docs.openzeppelin.com/contracts-cairo/access"
37+
required={required}
38+
>
4539
<div class="checkbox-group">
4640
<label class:checked={access === 'ownable'}>
4741
<input type="radio" bind:group={access} value="ownable">
@@ -58,5 +52,4 @@
5852
</HelpTooltip>
5953
</label>
6054
</div>
61-
62-
</section>
55+
</ExpandableToggleRadio>

‎packages/ui/src/cairo/ERC1155Controls.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
export let opts: Required<KindedOptions['ERC1155']> = {
1313
kind: 'ERC1155',
1414
...erc1155.defaults,
15+
royaltyInfo: { ...erc1155.defaults.royaltyInfo }, // copy fields
1516
info: { ...infoDefaults }, // create new object since Info is nested
1617
};
1718

‎packages/ui/src/cairo/ERC20Controls.svelte

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import AccessControlSection from './AccessControlSection.svelte';
88
import UpgradeabilityField from './UpgradeabilityField.svelte';
99
import InfoSection from './InfoSection.svelte';
10+
import ExpandableCheckbox from '../common/ExpandableCheckbox.svelte';
1011
import { error } from '../common/error-tooltip';
1112
1213
export const opts: Required<KindedOptions['ERC20']> = {
@@ -78,36 +79,33 @@
7879
</div>
7980
</section>
8081

81-
<section class="controls-section">
82-
<h1>
83-
<!-- svelte-ignore a11y-label-has-associated-control -->
84-
<label class="flex items-center tooltip-container pr-2">
85-
<span>Votes</span>
86-
<span class="ml-1">
87-
<input type="checkbox" bind:checked={opts.votes}>
88-
</span>
89-
<HelpTooltip align="right" link="https://docs.openzeppelin.com/contracts-cairo/governance/votes">
90-
Keeps track of historical balances for voting in on-chain governance, with a way to delegate one's voting power to a trusted account.
91-
</HelpTooltip>
92-
</label>
93-
</h1>
94-
82+
<ExpandableCheckbox
83+
label="Votes"
84+
bind:checked={opts.votes}
85+
helpContent="Keeps track of historical balances for voting in on-chain governance, with a way to delegate one's voting power to a trusted account."
86+
helpLink="https://docs.openzeppelin.com/contracts-cairo/governance/votes"
87+
error={errors?.appName || errors?.appVersion}
88+
>
9589
<label class="labeled-input">
9690
<span class="flex justify-between pr-2">
9791
Application Name
98-
<HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/guides/snip12">Name for domain separator. Prevents two applications from producing the same hash.</HelpTooltip>
92+
<HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/guides/snip12">
93+
Name for domain separator. Prevents two applications from producing the same hash.
94+
</HelpTooltip>
9995
</span>
10096
<input bind:value={opts.appName} use:error={errors?.appName} disabled={!opts.votes}>
10197
</label>
10298

10399
<label class="labeled-input">
104100
<span class="flex justify-between pr-2">
105101
Application Version
106-
<HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/guides/snip12">Version for domain separator. Prevents two versions of the same application from producing the same hash.</HelpTooltip>
102+
<HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/guides/snip12">
103+
Version for domain separator. Prevents two versions of the same application from producing the same hash.
104+
</HelpTooltip>
107105
</span>
108106
<input bind:value={opts.appVersion} use:error={errors?.appVersion} disabled={!opts.votes}>
109107
</label>
110-
</section>
108+
</ExpandableCheckbox>
111109

112110
<AccessControlSection bind:access={opts.access} required={requireAccessControl} />
113111

‎packages/ui/src/cairo/ERC721Controls.svelte

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@
88
import UpgradeabilityField from './UpgradeabilityField.svelte';
99
import RoyaltyInfoSection from './RoyaltyInfoSection.svelte';
1010
import InfoSection from './InfoSection.svelte';
11+
import ExpandableCheckbox from '../common/ExpandableCheckbox.svelte';
1112
import { error } from '../common/error-tooltip';
1213
1314
export const opts: Required<KindedOptions['ERC721']> = {
1415
kind: 'ERC721',
1516
...erc721.defaults,
17+
royaltyInfo: { ...erc721.defaults.royaltyInfo }, // copy fields
1618
info: { ...infoDefaults }, // create new object since Info is nested
1719
};
1820
@@ -80,36 +82,33 @@
8082
</div>
8183
</section>
8284

83-
<section class="controls-section">
84-
<h1>
85-
<!-- svelte-ignore a11y-label-has-associated-control -->
86-
<label class="flex items-center tooltip-container pr-2">
87-
<span>Votes</span>
88-
<span class="ml-1">
89-
<input type="checkbox" bind:checked={opts.votes}>
90-
</span>
91-
<HelpTooltip align="right" link="https://docs.openzeppelin.com/contracts-cairo/governance/votes">
92-
Keeps track of historical balances for voting in on-chain governance, with a way to delegate one's voting power to a trusted account.
93-
</HelpTooltip>
94-
</label>
95-
</h1>
96-
85+
<ExpandableCheckbox
86+
label="Votes"
87+
bind:checked={opts.votes}
88+
helpContent="Keeps track of historical balances for voting in on-chain governance, with a way to delegate one's voting power to a trusted account."
89+
helpLink="https://docs.openzeppelin.com/contracts-cairo/governance/votes"
90+
error={errors?.appName || errors?.appVersion}
91+
>
9792
<label class="labeled-input">
9893
<span class="flex justify-between pr-2">
9994
Application Name
100-
<HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/guides/snip12">Name for domain separator. Prevents two applications from producing the same hash.</HelpTooltip>
95+
<HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/guides/snip12">
96+
Name for domain separator. Prevents two applications from producing the same hash.
97+
</HelpTooltip>
10198
</span>
10299
<input bind:value={opts.appName} use:error={errors?.appName} disabled={!opts.votes}>
103100
</label>
104101

105102
<label class="labeled-input">
106103
<span class="flex justify-between pr-2">
107104
Application Version
108-
<HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/guides/snip12">Version for domain separator. Prevents two versions of the same application from producing the same hash.</HelpTooltip>
105+
<HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/guides/snip12">
106+
Version for domain separator. Prevents two versions of the same application from producing the same hash.
107+
</HelpTooltip>
109108
</span>
110109
<input bind:value={opts.appVersion} use:error={errors?.appVersion} disabled={!opts.votes}>
111110
</label>
112-
</section>
111+
</ExpandableCheckbox>
113112

114113
<RoyaltyInfoSection bind:opts={opts.royaltyInfo} errors={errors} />
115114

‎packages/ui/src/cairo/GovernorControls.svelte

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import type { KindedOptions, OptionsErrorMessages } from '@openzeppelin/wizard-cairo';
55
import { governor, infoDefaults } from '@openzeppelin/wizard-cairo';
66
7-
import ToggleRadio from '../common/inputs/ToggleRadio.svelte';
7+
import ExpandableToggleRadio from '../common/ExpandableToggleRadio.svelte';
88
import UpgradeabilityField from './UpgradeabilityField.svelte';
99
import InfoSection from './InfoSection.svelte';
1010
@@ -173,22 +173,12 @@
173173
</div>
174174
</section>
175175

176-
<section class="controls-section">
177-
<h1>
178-
<!-- svelte-ignore a11y-label-has-associated-control -->
179-
<label class="flex justify-between items-center tooltip-container pr-2">
180-
<span>
181-
<span>Timelock</span>
182-
<span class="ml-1">
183-
<ToggleRadio bind:value={opts.timelock} defaultValue="openzeppelin" />
184-
</span>
185-
</span>
186-
<HelpTooltip>
187-
Add a delay to actions taken by the Governor. Gives users time to exit the system if they disagree with governance decisions.
188-
</HelpTooltip>
189-
</label>
190-
</h1>
191-
176+
<ExpandableToggleRadio
177+
label="Timelock"
178+
bind:value={opts.timelock}
179+
defaultValue="openzeppelin"
180+
helpContent="Add a delay to actions taken by the Governor. Gives users time to exit the system if they disagree with governance decisions."
181+
>
192182
<div class="checkbox-group">
193183
<label class:checked={opts.timelock === 'openzeppelin'}>
194184
<input type="radio" bind:group={opts.timelock} value="openzeppelin">
@@ -198,7 +188,7 @@
198188
</HelpTooltip>
199189
</label>
200190
</div>
201-
</section>
191+
</ExpandableToggleRadio>
202192

203193
<section class="controls-section">
204194
<h1>

‎packages/ui/src/cairo/RoyaltyInfoSection.svelte

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,38 @@
22
import type { OptionsErrorMessages } from '@openzeppelin/wizard-cairo';
33
import type { RoyaltyInfoOptions } from '@openzeppelin/wizard-cairo/src';
44
import HelpTooltip from '../common/HelpTooltip.svelte';
5-
import { royaltyInfoDefaults } from '@openzeppelin/wizard-cairo';
5+
import ExpandableCheckbox from '../common/ExpandableCheckbox.svelte';
66
import { error } from '../common/error-tooltip';
77
8-
export let opts: RoyaltyInfoOptions = royaltyInfoDefaults;
8+
export let opts: RoyaltyInfoOptions;
99
export let errors: undefined | OptionsErrorMessages;
1010
1111
</script>
1212

13-
<section class="controls-section">
14-
<h1>
15-
<!-- svelte-ignore a11y-label-has-associated-control -->
16-
<label class="flex items-center tooltip-container pr-2">
17-
<span>Royalty Info</span>
18-
<span class="ml-1">
19-
<input type="checkbox" bind:checked={opts.enabled}>
20-
</span>
21-
<HelpTooltip align="right" link="https://docs.openzeppelin.com/contracts-cairo/api/token_common#ERC2981Component">
22-
Provides information for how much royalty is owed and to whom, based on a sale price. Follows ERC-2981 standard.
23-
</HelpTooltip>
24-
</label>
25-
</h1>
26-
13+
<ExpandableCheckbox
14+
label="Royalty Info"
15+
bind:checked={opts.enabled}
16+
helpContent="Provides information for how much royalty is owed and to whom, based on a sale price. Follows ERC-2981 standard."
17+
helpLink="https://docs.openzeppelin.com/contracts-cairo/api/token_common#ERC2981Component"
18+
error={errors?.defaultRoyaltyFraction || errors?.feeDenominator}
19+
>
2720
<label class="labeled-input">
2821
<span class="flex justify-between pr-2">
2922
Default Royalty Fraction
30-
<HelpTooltip>The royalty fraction that will be default for all tokens. It will be used for a token if there's no custom royalty fraction set for it.</HelpTooltip>
23+
<HelpTooltip>
24+
The royalty fraction that will be default for all tokens. It will be used for a token if there's no custom royalty fraction set for it.
25+
</HelpTooltip>
3126
</span>
3227
<input bind:value={opts.defaultRoyaltyFraction} use:error={errors?.defaultRoyaltyFraction} disabled={!opts.enabled}>
3328
</label>
3429

3530
<label class="labeled-input">
3631
<span class="flex justify-between pr-2">
3732
Fee Denominator
38-
<HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/api/token_common#ERC2981Component-IC-FEE_DENOMINATOR">The denominator used to interpret a token's fee and to calculate the result fee fraction.</HelpTooltip>
33+
<HelpTooltip link="https://docs.openzeppelin.com/contracts-cairo/api/token_common#ERC2981Component-IC-FEE_DENOMINATOR">
34+
The denominator used to interpret a token's fee and to calculate the result fee fraction.
35+
</HelpTooltip>
3936
</span>
4037
<input bind:value={opts.feeDenominator} use:error={errors?.feeDenominator} disabled={!opts.enabled}>
4138
</label>
42-
</section>
39+
</ExpandableCheckbox>

‎packages/ui/src/common/ExpandableCheckbox.svelte

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import ParentExpandableSection from './ParentExpandableSection.svelte';
3+
4+
export let label: string;
5+
export let checked: boolean;
6+
7+
export let helpContent: string;
8+
export let helpLink: string | undefined = undefined;
9+
10+
export let disabled: boolean = false;
11+
export let disabledReason: string | undefined = undefined;
12+
13+
export let required: boolean = false;
14+
15+
export let error: string | undefined = undefined;
16+
17+
</script>
18+
19+
<ParentExpandableSection type="checkbox" {label} bind:checkboxChecked={checked} {helpContent} {helpLink} {disabled} {disabledReason} {required} {error}>
20+
<slot />
21+
</ParentExpandableSection>

‎packages/ui/src/common/ExpandableToggleRadio.svelte

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts">
2+
type T = $$Generic;
3+
4+
import ParentExpandableSection from './ParentExpandableSection.svelte';
5+
6+
export let label: string;
7+
export let value: T;
8+
export let defaultValue: false | T;
9+
10+
export let helpContent: string;
11+
export let helpLink: string | undefined = undefined;
12+
13+
export let disabled: boolean = false;
14+
export let disabledReason: string | undefined = undefined;
15+
16+
export let required: boolean = false;
17+
18+
</script>
19+
20+
<ParentExpandableSection type="toggleradio" {label} bind:toggleRadioValue={value} toggleRadioDefaultValue={defaultValue} {helpContent} {helpLink} {disabled} {disabledReason} {required} error={undefined}>
21+
<slot />
22+
</ParentExpandableSection>

0 commit comments

Comments
 (0)