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 4 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
1 change: 1 addition & 0 deletions apps/ui-kit/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@fontsource/inter": "^5.0.17",
"@iota/ui-icons": "workspace:*",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-visually-hidden": "^1.1.0",
"classnames": "^2.5.1",
"lodash.merge": "^4.6.2",
"react": "^18.3.1",
Expand Down
31 changes: 18 additions & 13 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 @@ -2,6 +2,7 @@
// SPDX-License-Identifier: Apache-2.0

import * as RadixDialog from '@radix-ui/react-dialog';
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
import cx from 'classnames';
import * as React from 'react';
import { Close } from '@iota/ui-icons';
Expand Down Expand Up @@ -35,7 +36,7 @@ const DialogContent = React.forwardRef<
containerId?: string;
showCloseOnOverlay?: boolean;
}
>(({ className, containerId, showCloseOnOverlay, ...props }, ref) => {
>(({ className, containerId, showCloseOnOverlay, children, ...props }, ref) => {
const [containerElement, setContainerElement] = useState<HTMLElement | undefined>(undefined);

useEffect(() => {
Expand All @@ -52,7 +53,12 @@ const DialogContent = React.forwardRef<
ref={ref}
className="absolute left-1/2 top-1/2 z-[99999] flex max-h-[60vh] w-80 max-w-[85vw] -translate-x-1/2 -translate-y-1/2 flex-col justify-center overflow-hidden rounded-xl bg-primary-100 dark:bg-neutral-6 md:w-96"
{...props}
/>
>
<VisuallyHidden.Root>
<RadixDialog.Title />
</VisuallyHidden.Root>
{children}
</RadixDialog.Content>
</RadixDialog.Portal>
);
});
Expand All @@ -70,16 +76,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 };
2 changes: 1 addition & 1 deletion 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 @@ -63,7 +63,7 @@ export function NicknameDialog({ isOpen, setOpen, accountID }: NicknameDialogPro

return (
<Dialog open={isOpen} onOpenChange={setOpen}>
<DialogContent containerId="overlay-portal-container">
<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

<Header title="Account Nickname" onClose={() => setOpen(false)} />
<DialogBody>
<Form className="flex h-full flex-col gap-6" form={form} onSubmit={onSubmit}>
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -92,7 +92,7 @@ export function PasswordModalDialog({

return (
<Dialog open={open}>
<DialogContent containerId="overlay-portal-container">
<DialogContent containerId="overlay-portal-container" aria-describedby={undefined}>
<Header title={title} onClose={onClose} />
<DialogBody>
<Form form={form} id={formID} onSubmit={handleOnSubmit}>
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -39,7 +39,7 @@ export function ConnectLedgerModal({ onClose, onConfirm, onError }: ConnectLedge
}
}}
>
<DialogContent containerId="overlay-portal-container">
<DialogContent containerId="overlay-portal-container" aria-describedby={undefined}>
<Header title="Connect Ledger Wallet" onClose={onClose} titleCentered />
<DialogBody>
<div className="flex flex-col items-center gap-y-lg">
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
2 changes: 1 addition & 1 deletion 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 @@ -39,7 +39,7 @@ export function RemoveDialog({ isOpen, setOpen, accountID }: RemoveDialogProps)

return (
<Dialog open={isOpen} onOpenChange={setOpen}>
<DialogContent containerId="overlay-portal-container">
<DialogContent containerId="overlay-portal-container" aria-describedby={undefined}>
<Header title="Remove account" onClose={() => setOpen(false)} />
<DialogBody>
<div className="mb-md text-body-md">
Expand Down
2 changes: 1 addition & 1 deletion 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
Expand Up @@ -19,7 +19,7 @@ export function ReceiveTokensDialog({ address, open, setOpen }: ReceiveTokensDia
return (
<div className="relative">
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent containerId="overlay-portal-container">
<DialogContent containerId="overlay-portal-container" aria-describedby={undefined}>
<Header title="Receive" onClose={() => setOpen(false)} />
<DialogBody>
<div className="flex flex-col gap-lg text-center [&_span]:w-full [&_span]:break-words">
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -48,7 +48,7 @@ export function ConfirmationModal({
setIsCancelLoading(false);
}}
>
<DialogContent containerId="overlay-portal-container">
<DialogContent containerId="overlay-portal-container" aria-describedby={undefined}>
<Header title={title} />
<DialogBody>
<div className="flex flex-col gap-lg">
Expand Down
4 changes: 4 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading