Create initial pass of v2 send/receive pages #1665

jessepinho · 2024-08-09T00:50:01Z

First of all, sorry for the huge PR 😭 I was working on a lot of moving parts at once, and they're all a bit intertwined, and I wasn't able to separate them out in time.

Also, a lot of the diffs in this PR involve whitespace changes due to nesting, etc. So I'd recommend reviewing it with whitespace changes hidden.

In this PR

Introduce a new useAnimationDeferredValue() hook that prevents glitches in an animation if data loads while the animation is still in progress.
Use that hook in several places.
Convert components that previously accepted framer-motion layout and layoutId props to instead accept a motion prop that can accept an object of framer-motion props (docs).
Tweak <SegmentedControl /> to allow arbitrary value types, not just string values. This makes the component much more flexible/powerful.
Allow color to be set directly on both the <Text /> and <Icon /> components via a callback — e.g., <Text color={color => color.text.primary}>...</Text>
Add the new detailTechnical text variant.
Create v2 send/receive pages. Note that they're not finished yet — the asset selector isn't yet in place, for example.
Create the new <AssetSelector /> component. Not 100% finished yet, but can still be merged and iterated on.
Add Storybook links to the Penumbra UI README.
Create the <Tooltip /> component.
Add motion prop to <Table /> and <Card />.
Make it possible to animate a <Dialog /> out of its trigger (could use some de-janking):

Screen.Recording.2024-08-16.at.8.21.34.PM.mov

changeset-bot · 2024-08-09T00:50:04Z

🦋 Changeset detected

Latest commit: 46dc416

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
@penumbra-zone/getters	Major
minifront	Patch
@penumbra-zone/perspective	Major
@penumbra-zone/query	Major
@penumbra-zone/services	Major
@penumbra-zone/storage	Major
@penumbra-zone/types	Major
@repo/ui	Patch
node-status	Patch
@penumbra-zone/crypto-web	Major
@penumbra-zone/wasm	Major

Not sure what this means? Click here to learn what changesets are.

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

github-actions · 2024-08-09T00:51:50Z

Visit the preview URL for this PR (updated for commit 46dc416):

https://penumbra-ui-preview--pr1665-jessepinho-transfer-qsdpwkgt.web.app

_{(expires Mon, 26 Aug 2024 11:55:55 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 709d729610ef7a6369b23f1cb2b820a60cc685b1}

jessepinho · 2024-08-17T03:01:40Z

apps/minifront/src/components/send/send-form/index.tsx

 import { GasFee } from '../../shared/gas-fee';
 import { useBalancesResponses, useStakingTokenMetadata } from '../../../state/shared';
 import { NonNativeFeeWarning } from '../../shared/non-native-fee-warning';
 import { transferableBalancesResponsesSelector } from '../../../state/send/helpers';
+import { useRefreshFee } from '../../v2/transfer-layout/send-page/use-refresh-fee';


Note that I deleted the use-refresh-fee.ts file from the v1 directory, and moved it to the v2 directory. Now, we're "reaching into" the v2 directory from v1 to import its logic.

I think this is a good approach for logic-heavy files (like hooks, etc.), since eventually, we'll want to just delete all the v1 code and move the v2 code up into src. At that point, if we've already moved all the v1 hooks/etc. into the v2 directory, the migration will be a cinch.

And in the meantime, we don't need to maintain two copies of each hook file (i.e., we don't have to have a copy of use-refresh-fee.ts in both the v1 src directory, and the v2 directory).

jessepinho · 2024-08-17T03:02:00Z

apps/minifront/src/components/shared/non-native-fee-warning.tsx

@@ -6,7 +6,7 @@ import { ReactNode, useCallback, useEffect, useState } from 'react';
 import {
  getAddressIndex,
  getAmount,
-  getAssetIdFromBalancesResponseOptional,
+  getAssetIdFromBalancesResponse,


I got rid of the optional one, since we can now just call .optional() on it.

jessepinho · 2024-08-17T03:02:46Z

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

-    </Dialog>
-  </div>
-);
+export const AssetsCardTitle = () => {


You may want to review this file with whitespace changes hidden. I just added a useId() call, and then passed it to the dialog trigger and content to make the dialog "grow out of" the info icon.

jessepinho · 2024-08-17T03:02:52Z

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

-    </Dialog>
-  </div>
-);
+export const TransactionsCardTitle = () => {


You may want to review this file with whitespace changes hidden. I just added a useId() call, and then passed it to the dialog trigger and content to make the dialog "grow out of" the info icon.

jessepinho · 2024-08-17T03:07:25Z

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

Changes in this file relate to transitions between the assets and transactions pages, and use the useAnimationDeferredValue hook (docs).

jessepinho · 2024-08-17T03:14:45Z

packages/getters/src/balances-response.ts

-  .optional()
-  .pipe(getMetadata)
-  .pipe(getAssetId);
+export const getAssetIdFromBalancesResponse = getBalanceView.pipe(getMetadata).pipe(getAssetId);


We can now just call .optional() on this, so no need to hard-code an optional version.

jessepinho · 2024-08-17T03:15:07Z

packages/ui/.storybook/preview.jsx

 import { PenumbraUIProvider } from '../src/PenumbraUIProvider';
 import { Density } from '../src/Density';
 import { Tabs } from '../src/Tabs';
 import styled from 'styled-components';

-const WhiteTextWrapper = styled.div`


All <Text /> components now render with text.primary color by default, so this is no longer needed.

jessepinho · 2024-08-17T03:17:07Z

packages/ui/package.json

@@ -21,6 +21,7 @@
    "./lib/utils": "./lib/utils.ts",
    "./postcss.config.js": "./postcss.config.js",
    "./styles/*": "./styles/*",
+    "./hooks/*": "./src/hooks/*/index.ts",


So that consumers can import our hooks

jessepinho · 2024-08-17T03:17:38Z

packages/ui/src/AccountSelector/IbcDepositToggle.tsx

Added a tooltip to the IBC Deposit toggle

jessepinho · 2024-08-17T03:18:21Z

packages/ui/src/AssetIcon/index.tsx

+const BorderWrapper = styled.div`
+  border-radius: ${props => props.theme.borderRadius.full};
+  border: 1px solid ${props => props.theme.color.other.tonalStroke};
+  overflow: hidden;
+`;
+


There should now be a border on <AssetIcon />, per latest Figma designs.

jessepinho · 2024-08-17T03:18:50Z

packages/ui/src/AssetIcon/DelegationTokenIcon.tsx

Moved the entire <AssetIcon /> component up to the root src directory, since it's now used by multiple other components in Penumbra UI (and can be used by consumers).

jessepinho · 2024-08-17T03:19:24Z

packages/ui/src/Button/index.tsx


 const iconOnlyAdornment = css<StyledButtonProps>`
  border-radius: ${props => props.theme.borderRadius.full};
  padding: ${props => props.theme.spacing(1)};
+  width: max-content;


Fixes a weird issue where the button was sometimes full-width when it shouldn't have been

jessepinho · 2024-08-17T03:19:28Z

packages/ui/src/Button/index.tsx

@@ -28,6 +31,7 @@ const compact = css<StyledButtonProps>`
  padding-right: ${props => props.theme.spacing(props.$iconOnly ? 2 : 4)};
  height: 32px;
  min-width: 32px;
+  width: max-content;


Fixes a weird issue where the button was sometimes full-width when it shouldn't have been

jessepinho · 2024-08-17T03:19:42Z

packages/ui/src/Button/index.tsx

@@ -57,7 +61,7 @@ interface StyledButtonProps {
  $getBorderRadius: (theme: DefaultTheme) => string;
 }

-const StyledButton = styled.button<StyledButtonProps>`
+const StyledButton = styled(motion.button)<StyledButtonProps>`


Enabling framer motion on the button

jessepinho · 2024-08-17T03:20:37Z

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

+const WhiteTextWrapper = styled.div`
+  color: ${props => props.theme.color.text.primary};
+`;


WhiteTextWrapper is required for this story, since <CharacterTransition /> is unstyled text, and I didn't want to wrap this story in a <Text /> or else consumers might think that it was styled out of the box.

jessepinho · 2024-08-17T03:22:39Z

packages/ui/src/FormField/index.tsx

@@ -11,10 +11,10 @@ const Root = styled.label`
 `;

 const HelperText = styled.div<{ $disabled: boolean }>`
+  ${small}


Moving this to before color, since small now has its own color styles

jessepinho · 2024-08-17T03:24:00Z

packages/ui/src/Pill/index.tsx

@@ -20,6 +20,7 @@ const Root = styled.span<{ $density: Density; $priority: Priority }>`

  display: inline-block;
  max-width: 100%;
+  width: max-content;


Prevents a weird issue where the pill is sometimes full-width

jessepinho · 2024-08-17T03:24:35Z

packages/ui/src/Table/index.tsx

  /** Content that will appear above the table. */
  title?: ReactNode;
  children: ReactNode;
  /** Which CSS `table-layout` property to use. */
-  layout?: 'fixed' | 'auto';
+  tableLayout?: 'fixed' | 'auto';


Renamed this prop to avoid confusion with framer-motion's layout prop

# Conflicts: # packages/ui/src/Button/index.tsx

VanishMax

@grod220 I am going to merge this PR and continue the work over this code. Any objections?

This is how the PR looks in action:

kap.mp4

The future work includes adding the AssetSelector and moving some more logic here

grod220 · 2024-08-19T12:26:10Z

Go for it! 👍

jessepinho changed the base branch from main to jessepinho/input August 9, 2024 17:36

Base automatically changed from jessepinho/input to main August 9, 2024 17:42

jessepinho force-pushed the jessepinho/transfer branch 6 times, most recently from 37c22f8 to c5f034e Compare August 10, 2024 04:21

jessepinho changed the base branch from main to jessepinho/more-v2-components August 10, 2024 04:22

jessepinho force-pushed the jessepinho/more-v2-components branch from 97f1285 to 75ddb24 Compare August 12, 2024 23:23

Base automatically changed from jessepinho/more-v2-components to main August 12, 2024 23:31

jessepinho force-pushed the jessepinho/transfer branch 3 times, most recently from 848012e to 5aa3c78 Compare August 13, 2024 16:00

jessepinho mentioned this pull request Aug 14, 2024

Figure out how to ensure that icons render in the correct color prax-wallet/prax#158

Closed

jessepinho force-pushed the jessepinho/transfer branch from eca6373 to 5593bbf Compare August 17, 2024 01:44

Create v2 send/receive pages and corresponding components

c7ef90e

jessepinho force-pushed the jessepinho/transfer branch 2 times, most recently from 7c48de7 to 5ada544 Compare August 17, 2024 02:26

Fix a number of issues that came up in final review

b6d68f2

jessepinho force-pushed the jessepinho/transfer branch from 5ada544 to b6d68f2 Compare August 17, 2024 02:32

Comment out unused props

524223c

jessepinho mentioned this pull request Aug 17, 2024

Support motion prop in all applicable Penumbra UI components prax-wallet/prax#162

Open

jessepinho commented Aug 17, 2024

View reviewed changes

packages/ui/src/AccountSelector/IbcDepositToggle.tsx Outdated

Copy link

Contributor Author

jessepinho Aug 17, 2024

Choose a reason for hiding this comment

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

Added a tooltip to the IBC Deposit toggle

jessepinho commented Aug 17, 2024

View reviewed changes

jessepinho changed the title ~~WIP: Create v2 send/receive pages~~ Create v2 send/receive pages Aug 17, 2024

jessepinho marked this pull request as ready for review August 17, 2024 03:26

jessepinho requested a review from a team August 17, 2024 03:26

jessepinho changed the title ~~Create v2 send/receive pages~~ Create initial pass of v2 send/receive pages Aug 17, 2024

VanishMax self-assigned this Aug 19, 2024

VanishMax mentioned this pull request Aug 19, 2024

Add better docs for density #1705

Merged

VanishMax added 4 commits August 19, 2024 13:20

Merge remote-tracking branch 'origin/main' into jessepinho/transfer

3675e56

# Conflicts: # packages/ui/src/Button/index.tsx

refactor: reuse the styles

c154f24

feat(ui): simplify the color prop of Text and Icon components

854ff07

chore: fix linting

46dc416

VanishMax approved these changes Aug 19, 2024

View reviewed changes

VanishMax merged commit f8730e9 into main Aug 19, 2024
8 checks passed

VanishMax deleted the jessepinho/transfer branch August 19, 2024 12:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create initial pass of v2 send/receive pages #1665

Create initial pass of v2 send/receive pages #1665

jessepinho commented Aug 9, 2024 •

edited by VanishMax

Loading

changeset-bot bot commented Aug 9, 2024 •

edited

Loading

github-actions bot commented Aug 9, 2024 •

edited

Loading

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

jessepinho Aug 17, 2024

VanishMax left a comment

grod220 commented Aug 19, 2024

Create initial pass of v2 send/receive pages #1665

Create initial pass of v2 send/receive pages #1665

Conversation

jessepinho commented Aug 9, 2024 • edited by VanishMax Loading

In this PR

changeset-bot bot commented Aug 9, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Aug 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

VanishMax left a comment

Choose a reason for hiding this comment

grod220 commented Aug 19, 2024

jessepinho commented Aug 9, 2024 •

edited by VanishMax

Loading

changeset-bot bot commented Aug 9, 2024 •

edited

Loading

github-actions bot commented Aug 9, 2024 •

edited

Loading