Skip to content

Commit 8d07ebc

Browse files
evavirsedaJuligsmsarcev
authored
feat: style create Subname dialog (#425)
* feat(dapp): add DropdownMenuOptions * feat(dapp): enhance dropdown menu with additional options * feat(dapp): add text styles * feat(dapp): update dropdown options * chore(dapp): remove dropdown option * chore(dapp): comment out non-functional options * feat: update create subname dialog styles * update popup * update content * feat: cleanup --------- Co-authored-by: Juligs <julicodes29@gmail.com> Co-authored-by: Juliana <115430927+Juligs@users.noreply.github.com> Co-authored-by: Mario Sarcevic <mario.sarcevic@iota.org>
1 parent cf9dc12 commit 8d07ebc

File tree

3 files changed

+51
-74
lines changed

3 files changed

+51
-74
lines changed

‎dapp/src/app/(protected)/my-names/page.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@
44
'use client';
55

66
import {
7+
Add,
78
Assets,
8-
// Add,
9-
// Assets,
109
// Calendar,
1110
// Delete,
1211
// Info,
@@ -34,7 +33,7 @@ import { normalizeNameInput, splitNameInParts } from '@/lib/utils/format/formatN
3433
export default function MyNamesPage(): JSX.Element {
3534
const [updateNameDialog, setUpdateNameDialog] = useState<string | null>(null);
3635
const [deleteNameDialog, setDeleteNameDialog] = useState<RegistrationNft | null>(null);
37-
const [subnameAddDialog, setSubnameAddDialog] = useState<RegistrationNft | null>(null);
36+
const [createSubnameDialog, setCreateSubnameDialog] = useState<RegistrationNft | null>(null);
3837
const [personalizeAvatarName, setPersonalizeAvatarName] = useState<string | null>(null);
3938

4039
const { data: names } = useRegistrationNfts('name');
@@ -81,10 +80,10 @@ export default function MyNamesPage(): JSX.Element {
8180
// children: <DropdownMenuOption icon={<Delete />} label="Remove Avatar" />,
8281
// isDisabled: true,
8382
// },
84-
// {
85-
// onClick: () => {},
86-
// children: <DropdownMenuOption icon={<Add />} label="Create Subname" />,
87-
// },
83+
{
84+
onClick: () => setCreateSubnameDialog(nft),
85+
children: <DropdownMenuOption icon={<Add />} label="Create Subname" />,
86+
},
8887
// {
8988
// onClick: () => {},
9089
// children: <DropdownMenuOption icon={<Link />} label="Link to Wallet Address" />,
@@ -137,7 +136,7 @@ export default function MyNamesPage(): JSX.Element {
137136
<NameCardBody title={`@${name}`}>
138137
<SubnameCountIndicator
139138
subnameCount={nftSubnames?.length ?? 0}
140-
onAddSubnameClick={() => setSubnameAddDialog(nft)}
139+
onAddSubnameClick={() => setCreateSubnameDialog(nft)}
141140
onSubnameListClick={() => {}}
142141
/>
143142

@@ -174,7 +173,7 @@ export default function MyNamesPage(): JSX.Element {
174173
<NameCardBody title={`${subnamePart}@${name}`}>
175174
<SubnameCountIndicator
176175
subnameCount={nftSubnames.length}
177-
onAddSubnameClick={() => setSubnameAddDialog(subname)}
176+
onAddSubnameClick={() => setCreateSubnameDialog(subname)}
178177
onSubnameListClick={() => {}}
179178
/>
180179

@@ -192,11 +191,11 @@ export default function MyNamesPage(): JSX.Element {
192191
<div className="pt-md w-full">
193192
<UserAuctions />
194193
</div>
195-
{!!subnameAddDialog && (
194+
{!!createSubnameDialog && (
196195
<CreateSubnameDialog
197-
name={subnameAddDialog.name}
198-
open={!!subnameAddDialog}
199-
setOpen={() => setSubnameAddDialog(null)}
196+
name={createSubnameDialog.name}
197+
open={!!createSubnameDialog}
198+
setOpen={() => setCreateSubnameDialog(null)}
200199
/>
201200
)}
202201
{!!personalizeAvatarName && (

‎dapp/src/components/dialogs/CreateSubnameDialog.tsx‎

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,19 @@
33

44
'use client';
55

6+
import { Info } from '@iota/apps-ui-icons';
67
import {
78
Button,
89
ButtonType,
9-
Card,
10-
CardBody,
11-
CardType,
1210
Checkbox,
1311
Dialog,
1412
DialogBody,
1513
DialogContent,
14+
DialogPosition,
1615
Header,
16+
InfoBox,
17+
InfoBoxStyle,
18+
InfoBoxType,
1719
Input,
1820
InputType,
1921
LoadingIndicator,
@@ -169,64 +171,63 @@ export function CreateSubnameDialog({ name, open, setOpen }: CreateSubnameProps)
169171

170172
return (
171173
<Dialog open={open} onOpenChange={setOpen}>
172-
<DialogContent containerId="overlay-portal-container" isFixedPosition>
173-
<Header title="Add subname" titleCentered />
174+
<DialogContent containerId="overlay-portal-container" position={DialogPosition.Right}>
175+
<Header title="New Subname" onClose={closeDialog} />
174176
<DialogBody>
175-
<div className="flex flex-col items-center gap-y-md">
176-
<h3 className="text-lg font-semibold mb-4">Add subname to {name}</h3>
177-
<div className="mb-4">
178-
<label className="block text-sm font-medium mb-2">Subname:</label>
177+
<div className="flex flex-col h-full justify-between">
178+
<div className="flex flex-col h-full items-center gap-y-lg">
179+
<InfoBox
180+
type={InfoBoxType.Default}
181+
style={InfoBoxStyle.Elevated}
182+
icon={<Info />}
183+
supportingText="Create as many Subnames as you want under @example_name, each with its own profile page and features"
184+
/>
179185
<Input
180186
type={InputType.Text}
181187
value={editSubname}
182188
onChange={(e) => setEditSubname(e.target.value)}
183-
placeholder="Input subname"
189+
placeholder="Enter subname"
190+
label="Subname name"
191+
errorMessage={
192+
!isSubnameAvailable && fullSubnameName
193+
? 'Subname is not available'
194+
: updateNameError
195+
? updateNameError.message
196+
: undefined
197+
}
184198
/>
185-
<Card type={CardType.Outlined}>
186-
<CardBody
187-
title="Set allow renew name"
188-
subtitle="Allow renew name."
189-
/>
199+
<div className="flex flex-col gap-y-md w-full">
200+
<span className="text-label-lg text-names-neutral-92">
201+
Permissions
202+
</span>
190203
<Checkbox
191-
isChecked={editIsAllowingRenew}
204+
isChecked={editIsAllowSubnames}
192205
isDisabled={disableEdit}
193-
onCheckedChange={handleAllowRenewChange}
194-
/>
195-
</Card>
196-
<Card type={CardType.Outlined}>
197-
<CardBody
198-
title="Set allow subname"
199-
subtitle="Allow creating subnames."
206+
onCheckedChange={handleAllowSubnameChange}
207+
label="Allow Subname to create additional Subnames"
200208
/>
209+
201210
<Checkbox
202-
isChecked={editIsAllowSubnames}
211+
isChecked={editIsAllowingRenew}
203212
isDisabled={disableEdit}
204-
onCheckedChange={handleAllowSubnameChange}
213+
onCheckedChange={handleAllowRenewChange}
214+
label="Allow Subname to renew expiration"
205215
/>
206-
</Card>
207-
{editSubname && (
208-
<p className="text-sm text-gray-600 mt-1">
209-
Preview: {fullSubnameName}
210-
</p>
211-
)}
216+
</div>
212217
</div>
213-
{!isSubnameAvailable && fullSubnameName ? (
214-
<div className="text-red-500 mb-4">This subname is not available</div>
215-
) : null}
216-
{updateNameError ? (
217-
<div className="text-red-400">{updateNameError.message}</div>
218-
) : null}
219-
<div className="flex gap-2 justify-end">
218+
<div className="flex w-full flex-row gap-x-xs mt-xs">
220219
<Button
221220
type={ButtonType.Secondary}
222221
text="Cancel"
223222
onClick={handleCancelAddSubname}
223+
fullWidth
224224
/>
225225
<Button
226226
icon={isLoading ? <LoadingIndicator /> : null}
227227
text="Create"
228228
disabled={disableSave}
229229
onClick={() => save()}
230+
fullWidth
230231
/>
231232
</div>
232233
</div>

‎dapp/src/components/dialogs/UpdateNameDialog.tsx‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ import {
3535
isNameRecordExpired,
3636
} from '@/lib/utils/names';
3737

38-
import { CreateSubnameDialog } from './CreateSubnameDialog';
3938
import { RenewNameDialog } from './RenewNameDialog';
4039

4140
type UpdateNameDialogProps = {
@@ -74,7 +73,6 @@ export function UpdateNameDialog({ name, open, setOpen }: UpdateNameDialogProps)
7473

7574
// Dialogs
7675
const [renewDialogOpen, setRenewDialogOpen] = useState(false);
77-
const [subnameDialogOpen, setSubnameDialogOpen] = useState(false);
7876

7977
// Sync permissions
8078
useEffect(() => {
@@ -231,7 +229,6 @@ export function UpdateNameDialog({ name, open, setOpen }: UpdateNameDialogProps)
231229
const disableEdit = isNameRecordLoading || isSendingTransaction || isExpired;
232230
const disableSave = updates.length === 0 || isWrongCombination || isLoading || isExpired;
233231
const disableRenew = isExpired;
234-
const disableAddSubname = isExpired;
235232

236233
return (
237234
<>
@@ -324,19 +321,6 @@ export function UpdateNameDialog({ name, open, setOpen }: UpdateNameDialogProps)
324321
/>
325322
</Card>
326323
)}
327-
{namePermissions?.allowChildCreation && (
328-
<Card type={CardType.Outlined}>
329-
<CardBody
330-
title="Add new subname"
331-
subtitle="Create a new subname."
332-
/>
333-
<Button
334-
text="Add subname"
335-
onClick={() => setSubnameDialogOpen(true)}
336-
disabled={disableAddSubname}
337-
/>
338-
</Card>
339-
)}
340324
{updateNameError ? (
341325
<div className="text-red-400">{updateNameError.message}</div>
342326
) : null}
@@ -349,13 +333,6 @@ export function UpdateNameDialog({ name, open, setOpen }: UpdateNameDialogProps)
349333
</DialogBody>
350334
</DialogContent>
351335
</Dialog>
352-
{subnameDialogOpen && (
353-
<CreateSubnameDialog
354-
name={name}
355-
open={subnameDialogOpen}
356-
setOpen={setSubnameDialogOpen}
357-
/>
358-
)}
359336
{renewDialogOpen && (
360337
<RenewNameDialog open={renewDialogOpen} setOpen={setRenewDialogOpen} name={name} />
361338
)}

0 commit comments

Comments
 (0)