Skip to content

feat(explorer,wallet): Fix all UI errors and warnings #3057

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

Merged
merged 10 commits into from
Oct 15, 2024
Merged

feat(explorer,wallet): Fix all UI errors and warnings #3057

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7390f4c
feat(explorer): fix all UI errors & warnings
panteleymonchuk Oct 4, 2024
8bf1fe2
feat(wallet): fix UI errors and warnings in console.
panteleymonchuk Oct 4, 2024
10983fe
feat(wallet, ui-kit): hide DialogTitle by VisuallyHidden
panteleymonchuk Oct 7, 2024
ce3a867
feat(wallet): remove DialogTitle from PasswordInputDialog.
panteleymonchuk Oct 7, 2024
0199878
feat(explorer, wallet, uikit): update DialogContent, update key for t…
panteleymonchuk Oct 10, 2024
3a457b4
Merge remote-tracking branch 'origin/develop' into tooling-general/fi…
panteleymonchuk Oct 10, 2024
c497c68
Merge remote-tracking branch 'origin/develop' into tooling-general/fi…
panteleymonchuk Oct 11, 2024
172d1a2
Merge branch 'develop' into tooling-general/fix-ui-issues-explorer-wa…
brancoder Oct 14, 2024
33d7d77
feat(ui-kit): add description under VisuallyHidden.
panteleymonchuk Oct 14, 2024
7e984d3
Merge branch 'develop' into tooling-general/fix-ui-issues-explorer-wa…
panteleymonchuk Oct 15, 2024
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
2 changes: 1 addition & 1 deletion apps/explorer/src/components/AreaGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export function AreaGraph<D>({
x={(d) => xScale(getX(d))}
y={(d) => yScale(getY(d))}
stroke={`url(#${lineGradientID})`}
stroke-width="2"
strokeWidth="2"
/>
<AxisBottom
left={5}
Expand Down
4 changes: 2 additions & 2 deletions apps/explorer/src/components/top-packages/TopPackagesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ const tableColumns: ColumnDef<MoveCallMetric>[] = [
},
},
{
header: 'Function',
id: 'function',
header: 'Package',
id: 'package',
cell({ row: { original: metric } }) {
const item = metric[0].package;
return (
Expand Down
2 changes: 1 addition & 1 deletion apps/explorer/src/components/ui/TableCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ export function TableCard<DataType extends object>({
{table.getRowModel().rows.map((row) => (
<TableRow key={row.id}>
{row.getVisibleCells().map((cell) => (
<Fragment key={cell.id}>
<Fragment key={`${row.id}${cell.id}`}>
Copy link
Contributor

@marc2332 marc2332 Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how is this necessary, its parent row is already specifying the row id

Copy link
Contributor Author

@panteleymonchuk panteleymonchuk Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For each column in the row cell.id is the same.
So we provide as key each time 1_function etc.

Copy link
Contributor

@marc2332 marc2332 Oct 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For each column in the row cell.id is the same.
Are you sure about this? I don't see how this makes any sense, if the cell.is the same, then all the cells have the same id as they all share the row.id.

Copy link
Contributor Author

@panteleymonchuk panteleymonchuk Oct 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I investigated, the issue was not in key, but in name of column from file TopPackagesTable.
Updated.

{flexRender(cell.column.columnDef.cell, cell.getContext())}
</Fragment>
))}
Expand Down
21 changes: 10 additions & 11 deletions apps/ui-kit/src/lib/components/organisms/dialog/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,16 +70,15 @@ const DialogTitle = React.forwardRef<
));
DialogTitle.displayName = RadixDialog.Title.displayName;

const DialogBody = React.forwardRef<
React.ElementRef<typeof RadixDialog.Description>,
React.ComponentPropsWithoutRef<typeof RadixDialog.Description>
>((props, ref) => (
<RadixDialog.Description
ref={ref}
className="p-md--rs text-body-sm text-neutral-40 dark:text-neutral-60"
{...props}
/>
));
DialogBody.displayName = RadixDialog.Description.displayName;
const DialogBody = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(
(props, ref) => (
<div
ref={ref}
className="p-md--rs text-body-sm text-neutral-40 dark:text-neutral-60"
{...props}
/>
),
);
DialogBody.displayName = 'DialogBody';

export { Dialog, DialogClose, DialogTrigger, DialogContent, DialogTitle, DialogBody };
7 changes: 5 additions & 2 deletions apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
ButtonType,
Dialog,
DialogBody,
DialogTitle,
DialogContent,
Header,
Input,
Expand Down Expand Up @@ -63,8 +64,10 @@ export function NicknameDialog({ isOpen, setOpen, accountID }: NicknameDialogPro

return (
<Dialog open={isOpen} onOpenChange={setOpen}>
<DialogContent containerId="overlay-portal-container">
<Header title="Account Nickname" onClose={() => setOpen(false)} />
<DialogContent containerId="overlay-portal-container" aria-describedby={undefined}>
Copy link
Contributor

@cpl121 cpl121 Oct 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that instead of putting undefined, we can put some identifier, right?
Reference

Same comment for all cases where aria-describedby={undefined} has been put

Copy link
Contributor Author

@panteleymonchuk panteleymonchuk Oct 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we put something except undefined, we'll have warning Warning: Missing "Description" or "aria-describedby={undefined}" for {DialogContent}.

I think better to keep it, but I can move it to /apps/ui-kit/src/lib/components/organisms/dialog/Dialog.tsx direct.

Copy link
Contributor

@marc2332 marc2332 Oct 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we put something except undefined, we'll have warning Warning: Missing "Description" or "aria-describedby={undefined}" for {DialogContent}.

Well, then we just need to add the description, right? what am I missing?

Copy link
Contributor Author

@panteleymonchuk panteleymonchuk Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for current case in my opinion doesn’t matter what to use.
We used undefined before
I can add Description as well and remove undefined. It won’t change anything imo

<DialogTitle>
Copy link
Contributor

@marc2332 marc2332 Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, this one as well

<Header title="Account Nickname" onClose={() => setOpen(false)} />
</DialogTitle>
<DialogBody>
<Form className="flex h-full flex-col gap-6" form={form} onSubmit={onSubmit}>
<Input
Expand Down
7 changes: 5 additions & 2 deletions apps/wallet/src/ui/app/components/accounts/PasswordInputDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
ButtonType,
Dialog,
DialogBody,
DialogTitle,
DialogContent,
Header,
Input,
Expand Down Expand Up @@ -92,8 +93,10 @@ export function PasswordModalDialog({

return (
<Dialog open={open}>
<DialogContent containerId="overlay-portal-container">
<Header title={title} onClose={onClose} />
<DialogContent containerId="overlay-portal-container" aria-describedby={undefined}>
<DialogTitle>
Copy link
Contributor

@marc2332 marc2332 Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And this

<Header title={title} onClose={onClose} />
</DialogTitle>
<DialogBody>
<Form form={form} id={formID} onSubmit={handleOnSubmit}>
<div className="flex flex-col gap-y-6">
Expand Down
16 changes: 13 additions & 3 deletions apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,15 @@
import { ampli } from '_src/shared/analytics/ampli';
import { useIotaLedgerClient } from '_components';
import { useState } from 'react';
import { Button, ButtonType, Dialog, DialogBody, DialogContent, Header } from '@iota/apps-ui-kit';
import {
Button,
ButtonType,
Dialog,
DialogBody,
DialogTitle,
DialogContent,
Header,
} from '@iota/apps-ui-kit';
import { Link } from 'react-router-dom';

interface ConnectLedgerModalProps {
Expand Down Expand Up @@ -39,8 +47,10 @@ export function ConnectLedgerModal({ onClose, onConfirm, onError }: ConnectLedge
}
}}
>
<DialogContent containerId="overlay-portal-container">
<Header title="Connect Ledger Wallet" onClose={onClose} titleCentered />
<DialogContent containerId="overlay-portal-container" aria-describedby={undefined}>
<DialogTitle>
Copy link
Contributor

@marc2332 marc2332 Oct 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DialogTitle is an h1, and Header is a header, I don't think putting a header inside a h1 is a good idea? It should be the other way, the h1 inside the header. This leads to another question, why does the Header only accept a title prop instead of just letting the user specify the text through the children? :-(

Copy link
Contributor Author

@panteleymonchuk panteleymonchuk Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To have "DialogTitle" in the DialogContent is a requirement of radix library. I found how to ignore it in the another way, let me update PR.

About the Header also good question which we can discuss outside of this issue.

Copy link
Contributor

@marc2332 marc2332 Oct 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To have "DialogTitle" in the DialogContent is a requirement of radix library

It's rather how HTML should be used, radix is just an abstraction over html

Copy link
Contributor Author

@panteleymonchuk panteleymonchuk Oct 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, that valid html is the first prior.

but if we won't follow radix's rules, we'll have errors in console.

Anyway, I used a way from radix docs, to exclude DialogTitle from required. Please, check latest commit.

<Header title="Connect Ledger Wallet" onClose={onClose} titleCentered />
</DialogTitle>
<DialogBody>
<div className="flex flex-col items-center gap-y-lg">
<div className="p-md">
Expand Down
2 changes: 1 addition & 1 deletion apps/wallet/src/ui/app/components/network-selector/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export function NetworkSelector() {
<div className="flex w-full flex-col">
<div>
{networks.map(([id, network]) => (
<div className="px-md">
<div className="px-md" key={id}>
<RadioButton
label={network.name}
isChecked={activeNetwork === id}
Expand Down
16 changes: 13 additions & 3 deletions apps/wallet/src/ui/app/pages/accounts/manage/RemoveDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,15 @@
import { useAccounts } from '_app/hooks/useAccounts';
import { useBackgroundClient } from '_app/hooks/useBackgroundClient';
import { useMutation } from '@tanstack/react-query';
import { Button, ButtonType, Dialog, DialogBody, DialogContent, Header } from '@iota/apps-ui-kit';
import {
Button,
ButtonType,
Dialog,
DialogBody,
DialogTitle,
DialogContent,
Header,
} from '@iota/apps-ui-kit';
import toast from 'react-hot-toast';

interface RemoveDialogProps {
Expand Down Expand Up @@ -39,8 +47,10 @@ export function RemoveDialog({ isOpen, setOpen, accountID }: RemoveDialogProps)

return (
<Dialog open={isOpen} onOpenChange={setOpen}>
<DialogContent containerId="overlay-portal-container">
<Header title="Remove account" onClose={() => setOpen(false)} />
<DialogContent containerId="overlay-portal-container" aria-describedby={undefined}>
<DialogTitle>
Copy link
Contributor

@marc2332 marc2332 Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as I said before

<Header title="Remove account" onClose={() => setOpen(false)} />
</DialogTitle>
<DialogBody>
<div className="mb-md text-body-md">
Are you sure you want to remove this account?
Expand Down
16 changes: 13 additions & 3 deletions apps/wallet/src/ui/app/pages/home/tokens/ReceiveTokensDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
// Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0

import { Button, Address, Dialog, DialogContent, DialogBody, Header } from '@iota/apps-ui-kit';
import {
Button,
Address,
Dialog,
DialogContent,
DialogTitle,
DialogBody,
Header,
} from '@iota/apps-ui-kit';
import { useCopyToClipboard } from '_hooks';
import { QR } from '_src/ui/app/components';

Expand All @@ -19,8 +27,10 @@ export function ReceiveTokensDialog({ address, open, setOpen }: ReceiveTokensDia
return (
<div className="relative">
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent containerId="overlay-portal-container">
<Header title="Receive" onClose={() => setOpen(false)} />
<DialogContent containerId="overlay-portal-container" aria-describedby={undefined}>
<DialogTitle>
Copy link
Contributor

@marc2332 marc2332 Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same

<Header title="Receive" onClose={() => setOpen(false)} />
</DialogTitle>
<DialogBody>
<div className="flex flex-col gap-lg text-center [&_span]:w-full [&_span]:break-words">
<div className="self-center">
Expand Down
7 changes: 5 additions & 2 deletions apps/wallet/src/ui/app/shared/ConfirmationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
ButtonType,
Dialog,
DialogBody,
DialogTitle,
DialogContent,
Header,
} from '@iota/apps-ui-kit';
Expand Down Expand Up @@ -48,8 +49,10 @@ export function ConfirmationModal({
setIsCancelLoading(false);
}}
>
<DialogContent containerId="overlay-portal-container">
<Header title={title} />
<DialogContent containerId="overlay-portal-container" aria-describedby={undefined}>
<DialogTitle>
Copy link
Contributor

@marc2332 marc2332 Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And same

<Header title={title} />
</DialogTitle>
<DialogBody>
<div className="flex flex-col gap-lg">
{hint ? <div className="text-body-md">{hint}</div> : null}
Expand Down
Loading