Implement the v2 assets/transactions pages using PenumbraUI #1607

jessepinho · 2024-07-31T23:02:31Z

This PR creates the first two v2 pages! I started with the simplest ones (assets/transactions) even though they're not 100% ready yet in Figma, because I wanted to just get something shipped.

Note that the layouts are a bit narrow at the moment. But I'm just following Figma designs, so please direct design feedback to Sam 😆 That said, these can be merged as a work in progress, because we're still building out the v2 layouts.

Screen.Recording.2024-08-05.at.9.54.18.PM.mov

In this PR

Create v2-prefixed routes for the new pages, and add them to the main router.
Implement the assets and transactions pages.
Create a hexOpacity() helper so I can stop making TEN_PERCENT_OPACITY_IN_HEX consts.
Create a<Display /> component that handles page max widths and horizontal margins.
Fix some sizing issues with <Dialog />
- Sam pointed out the the sizing of the <Dialog /> component should be based on a grid, just like the sizing of regular components on the page. So I had to rework the <Dialog /> component a bit so that the dialog is wrapped in a <Display /> and a <Grid /> and fits the specs in Figma.
Add some missing values to the theme, and update some others, per Figma.
Make it possible to use a fixed-layout table.

changeset-bot · 2024-07-31T23:02:34Z

⚠️ No Changeset found

Latest commit: 207028b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-07-31T23:04:06Z

Visit the preview URL for this PR (updated for commit 207028b):

https://penumbra-ui-preview--pr1607-jessepinho-assets-tr-ck5qw87m.web.app

_{(expires Thu, 15 Aug 2024 17:51:01 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 709d729610ef7a6369b23f1cb2b820a60cc685b1}

jessepinho · 2024-08-06T04:05:59Z

apps/minifront/src/components/v2/dashboard-layout/assets-card-title.tsx

Used here/here

jessepinho · 2024-08-06T04:06:16Z

apps/minifront/src/components/v2/dashboard-layout/transactions-card-title.tsx

Used here/here

jessepinho · 2024-08-06T04:09:48Z

apps/minifront/src/components/v2/dashboard-layout/index.tsx

+  [v2PathPrefix(PagePath.TRANSACTIONS)]: <TransactionsCardTitle />,
+};
+
+export const DashboardLayout = () => {


jessepinho · 2024-08-06T04:12:48Z

apps/minifront/src/components/v2/dashboard-layout/transactions-page/index.tsx

jessepinho · 2024-08-06T04:23:25Z

apps/minifront/src/components/v2/dashboard-layout/assets-page/equivalent-values.tsx

Copied almost verbatim from the original, except this one references the new <ValueViewComponent /> and adds the context='table' prop

jessepinho · 2024-08-06T04:27:40Z

apps/minifront/src/components/v2/dashboard-layout/assets-page/index.tsx

Adapted/copied from https://github.com/penumbra-zone/web/blob/jessepinho/assets-transactions/apps/minifront/src/components/dashboard/assets-table/index.tsx, but with some changes to use new v2 components/etc.

jessepinho · 2024-08-06T04:28:39Z

apps/minifront/src/fetchers/page-path.ts

+  /** @todo: Remove next line after we switch to v2 layout */
+  str = str.replace('/v2', '');


Needed this to make page path matching work with v2 paths

packages/ui/src/Button/index.tsx

jessepinho · 2024-08-06T04:29:43Z

packages/ui/src/Card/index.tsx

@@ -28,7 +35,7 @@ export interface CardProps {
   * ```
   */
  as?: WebTarget;
-  title?: string;
+  title?: ReactNode;


Card titles can now be rich content

jessepinho · 2024-08-06T04:42:48Z

packages/ui/src/Dialog/index.tsx

 import * as RadixDialog from '@radix-ui/react-dialog';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
 import { X } from 'lucide-react';
 import { ButtonGroup, ButtonGroupProps } from '../ButtonGroup';
-
-const gradualBlur = (blur: string) => keyframes`


This animation was causing problems with the backdrop-filter of the dialog background, so I nixed it for now. Apparently this is a known limitation of backdrop-filter in Chrome.

jessepinho · 2024-08-06T04:45:42Z

packages/ui/src/Dialog/index.tsx

@@ -66,6 +50,8 @@ const DialogContent = styled(RadixDialog.Content)`
  display: flex;
  flex-direction: column;
  gap: ${props => props.theme.spacing(6)};
+
+  pointer-events: auto;


We had to add pointer-events: auto here because we're using pointer-events: none on DialogContent above, so that clicks on DialogContent are passed through to the Overlay and thus close the dialog.

packages/ui/src/Dialog/index.tsx

jessepinho · 2024-08-06T04:51:35Z

packages/ui/src/Display/index.stories.tsx

https://penumbra-ui-preview--pr1607-jessepinho-assets-tr-ck5qw87m.web.app/?path=/docs/ui-library-display--docs

VanishMax · 2024-08-08T10:58:55Z

apps/minifront/src/components/v2/dashboard-layout/index.tsx

+      <Grid tablet={8} desktop={6} xl={4}>
+        <Card title={CARD_TITLE_BY_PATH[v2PathPrefix(pagePath)]}>
+          <div className='flex flex-col gap-4'>
+            <Tabs


issue (a11y, yet non-blocking): i noticed the Tabs are a little off with the designs:

When hovered, there's no border-radius, the tabs are squared

Using tab key on the assets pages doesn't show the outlines on some elements, so i didn't know where my focus is. It would be good to outline or apply hover styles on the focused tabs.

tab doesn't focus the "info" icon next to the "Asset balances" title. It more of the issue with Button iconOnly component

However, this is not exactly related to this page, so feel free to just not forget to fix the issues in other PRs :)

A more annoying issue. On the video, i use tab a couple of times. Firstly, there are no outline described in points 2-3, but then tab goes to the assets swap link. Notice how it takes two tabs to focus out of the asset.

kqp.mp4

packages/ui/src/ValueViewComponent/index.tsx

VanishMax

I like the code structure and the how easy it it to read it. Only one blocking issue

packages/ui/src/Button/index.tsx

jessepinho force-pushed the jessepinho/assets-transactions branch 2 times, most recently from 501cf1f to b9f13a6 Compare August 1, 2024 16:33

Base automatically changed from jessepinho/card-2 to jessepinho/card August 1, 2024 16:59

Base automatically changed from jessepinho/card to main August 1, 2024 17:10

jessepinho force-pushed the jessepinho/assets-transactions branch 3 times, most recently from 6012e7a to 0d10fc4 Compare August 2, 2024 20:33

jessepinho changed the base branch from main to jessepinho/more-components August 2, 2024 21:47

jessepinho force-pushed the jessepinho/assets-transactions branch from 607ef0e to 8924ade Compare August 3, 2024 00:29

Base automatically changed from jessepinho/more-components to main August 5, 2024 18:02

jessepinho force-pushed the jessepinho/assets-transactions branch from e9b2d2d to 85b47a7 Compare August 5, 2024 18:03

jessepinho changed the title ~~WIP: Implement the assets/transactions tables using PenumbraUI~~ WIP: Implement the assets/transactions pages using PenumbraUI Aug 6, 2024