Full page extension views, containers, shared headers + footers #4655

pete-watters · 2023-12-07T11:33:05Z

Try out Leather build 0f33d98 — Extension build, Test report, Storybook, Chromatic

This PR covers:

These changes also fix a few bugs:

There were several steps involved and lots of refactoring:

webpack/webpack.config.base.js

kyranjamie · 2023-12-07T12:00:41Z

Any reason we don't make the extension popup bigger instead of the other one smaller? If we can use one html file for both then 👍🏼

kyranjamie · 2023-12-07T12:01:48Z

@pete-watters just tested this PR and it's broken the elastic scroll behaviour on macOS

kyranjamie · 2023-12-07T12:03:33Z

dev

2023-12-07-000038.mp4

This PR

2023-12-07-000039.mp4

pete-watters · 2023-12-07T14:12:15Z

dev

2023-12-07-000038.mp4
This PR

2023-12-07-000039.mp4

Thanks, I didn't know we had that or how rich you are! I'll make sure to fix it

pete-watters · 2023-12-07T14:13:29Z

Any reason we don't make the extension popup bigger instead of the other one smaller? If we can use one html file for both then 👍🏼

I'll check and try make it bigger. I found how we specify the pop-out size more easily than how we specify the extension size but I'll investigate. Thanks!

One reason to make it smaller is @mica000 said we use 392px in the designs for extension size. I will work with her to discuss making it bigger

pete-watters · 2023-12-14T09:14:12Z

Any reason we don't make the extension popup bigger instead of the other one smaller? If we can use one html file for both then 👍🏼

We tried a few things and went with this.

TLDR - Extension + popup are the same dimensions now - 390 x 756 . We can assess that and tweak as required

pete-watters · 2023-12-14T10:14:48Z

src/app/features/high-fee-drawer/high-fee-drawer.tsx

@@ -17,12 +16,14 @@ export function HighFeeDrawer(props: { learnMoreUrl: string }) {
  }, [isShowingHighFeeConfirmation, setIsShowingHighFeeConfirmation]);

  return (
-    <ControlledDrawer
-      icon={<ErrorIcon color="error.label" size="xl" />}
+    <BaseDrawer


We pass an ErrorIcon to this. I removed it as this was the only place using it.

It was looking like this:

I'm changing it so the warning icon will appear in the modal beside the text:

NOTE - I forced display of this so it's missing the amount Are you sure you want to pay AMOUNT in

What do you think @mica000 @fabric-8 - is it OK to move this icon from the header? It's the only place we have one there.

I will move the close icon to the right also

Good with me!

Great, thanks! It's coming soon(tm) 🚀

@markmhendrickson this is the High Fee dialog I mentioned to you yesterday.

@fbwoolf - do you know how to test this properly / how it should work. I tried to refactor it as it was similar to other dialogs, storing open / close in jotai state. I added new simpler useState handlers but I need to make sure it works.

You can search for setIsShowingHighFeeConfirmation on my branch

@kyranjamie - see this RE HighFee dialog.

I guess it shows when the fee is considered high but I am lacking knowledge here as to what is considered a high fee.

e.g. as a user when I try and transfer X stacks and the fee is Y then show the high fee warning

I think it's still working after my changes but I'm not certain so I want to check

theme/global/global.ts

src/app/ui/components/containers/headers/drawer-header.tsx

theme/global/virtuoso-styles.ts

src/app/ui/components/containers/headers/header.tsx

src/app/components/account/account-list-item-layout.tsx

src/app/ui/components/containers/modal/components/radix-dialog.tsx

pete-watters · 2023-12-15T11:18:15Z

src/app/ui/components/containers/modal/components/radix-dialog.tsx

+              width: { base: '100vw', md: '90vw' },
+              height: { base: '100vh', md: 'unset' },
+              maxWidth: { base: '100vw', md: '450px' },
+              maxHeight: { base: '100vh', md: '85vh' },


I'm using the panda style of responsive objects as when I was using our hooks useViewportMinWidth I was noticing some extra re-renders and jumpy behaviour.

For example on the Recieve modal, the UI was re-rendering and flashing when moving from Receive to Receive BTC

theme/global/popup-styles.ts

src/app/components/request-password.tsx

src/app/ui/components/containers/headers/header.tsx

pete-watters · 2024-03-19T19:47:13Z

I worked through the remaining bugfixes and changes in Notion and as discussed.

I have fixed them all apart from outstanding work to be decided on background colours globally.

There are a few issues in Notion I am now unable to reproduce:

I changed the signature headers, hopefully getting them all but I'm not sure

@fbwoolf @kyranjamie if you can please review the latest code changes that would be great. Then I can hopefully add one last commit that updates the colours.

I'm not sure if we do need to work on the receive screens also as we always need to scroll to see the address for STX / receive ordinal

Area.mp4

CC @markmhendrickson @fabric-8 @mica000

fbwoolf · 2024-03-21T14:20:15Z

src/app/features/container/utils/route-helpers.ts

+
+import { isKnownPopupRoute } from './get-popup-header';
+
+function isHomePage(pathname: RouteUrls) {


@pete-watters I was thinking about this implementation yesterday where you are using variants of one container with lots of detecting of routes, I am wondering what you think about an alt approach where we just have several, more specific, containers that wrap the routes that need it? I know the code might be less DRY, but sometimes it makes scaling the code a bit easier long term? Same question for headers?

I agree, its a real mess. A lot of this complication came from having different background colours for different page types e.g. Home and Page. It was also a bridge to get us away from how we were doing things before - storing Header components in application state.

We are getting rid of the colour variations now and having more normalised page backgrounds so when I am working on that I will try and simplify everything and ditch these complex variants.

Once everything is working and signed off we can assess and figure out a better pattern to use

Got it, yep, makes sense. 👍

src/app/features/container/container.tsx

pete-watters · 2024-03-22T15:12:23Z

@fabric-8 @markmhendrickson @mica000 : I have updated the colour styles to match the new design. Please take a look and let me know if there are any more updates to make. We can do a further QA now and hopefully sign off on this.

@kyranjamie @fbwoolf : I squashed all the commits again. This should be code complete now bar any further updates so I'd appreciate on final review. I will think about how to implement a better software architecture design to simplify things now we have made the final decision on colours. I'll try to remove some of the spaghetti code looking up routes etc. and use more container wrappers as Fara suggested

kyranjamie

Huge effort, Pete. Let's get it MERGED

…nboarding, settings, ref #4371

pete-watters changed the title ~~Chore/4370/design system containers~~ WIP: add design system containers + fix modals in extension Dec 7, 2023

pete-watters commented Dec 7, 2023

View reviewed changes

webpack/webpack.config.base.js Outdated Show resolved Hide resolved

pete-watters force-pushed the chore/4370/design-system-containers branch 4 times, most recently from 08e150b to bbf8288 Compare December 14, 2023 08:50

pete-watters commented Dec 14, 2023

View reviewed changes

theme/global/global.ts Outdated Show resolved Hide resolved

pete-watters force-pushed the chore/4370/design-system-containers branch 2 times, most recently from 0df2194 to 4ce1884 Compare December 14, 2023 12:37

kyranjamie reviewed Dec 14, 2023

View reviewed changes

src/app/ui/components/containers/headers/drawer-header.tsx Outdated Show resolved Hide resolved

pete-watters force-pushed the chore/4370/design-system-containers branch 2 times, most recently from 5e84a1a to 6223fd1 Compare December 14, 2023 16:21

pete-watters commented Dec 15, 2023

View reviewed changes

theme/global/virtuoso-styles.ts Outdated Show resolved Hide resolved

pete-watters commented Dec 15, 2023

View reviewed changes

src/app/ui/components/containers/headers/header.tsx Outdated Show resolved Hide resolved

pete-watters mentioned this pull request Dec 15, 2023

Fix switch account UX when connected only with Bitcoin via Ledger #4596

Open

kyranjamie reviewed Dec 15, 2023

View reviewed changes

src/app/components/account/account-list-item-layout.tsx Outdated Show resolved Hide resolved

pete-watters commented Dec 15, 2023

View reviewed changes

src/app/ui/components/containers/modal/components/radix-dialog.tsx Outdated Show resolved Hide resolved

pete-watters commented Dec 15, 2023

View reviewed changes

theme/global/popup-styles.ts Outdated Show resolved Hide resolved

pete-watters linked an issue Dec 15, 2023 that may be closed by this pull request

Design System - Full page extension views #4371

Closed

pete-watters mentioned this pull request Dec 15, 2023

Design System - Full page extension views #4371

Closed

pete-watters force-pushed the chore/4370/design-system-containers branch 2 times, most recently from b9effeb to 733498b Compare December 15, 2023 11:28

pete-watters commented Mar 19, 2024

View reviewed changes

src/app/components/request-password.tsx Show resolved Hide resolved

fbwoolf reviewed Mar 19, 2024

View reviewed changes

src/app/ui/components/containers/headers/header.tsx Outdated Show resolved Hide resolved

pete-watters force-pushed the chore/4370/design-system-containers branch 3 times, most recently from 74e848e to ebb1742 Compare March 19, 2024 19:28

pete-watters force-pushed the chore/4370/design-system-containers branch from ebb1742 to 927ee6f Compare March 21, 2024 05:47

This was referenced Mar 21, 2024

Remove hover effect for BRC-20 tokens under balances #5071

Closed

Remove display of unsuppported tokens from token picker for buy flow #4949

Closed

pete-watters force-pushed the chore/4370/design-system-containers branch from 5f31574 to 1e845d1 Compare March 21, 2024 10:01

fbwoolf reviewed Mar 21, 2024

View reviewed changes

src/app/features/container/container.tsx Show resolved Hide resolved

pete-watters force-pushed the chore/4370/design-system-containers branch 4 times, most recently from c2f1ec3 to 429c842 Compare March 22, 2024 14:26

fbwoolf approved these changes Mar 25, 2024

View reviewed changes

kyranjamie approved these changes Mar 26, 2024

View reviewed changes

chore: replace drawer dialog, containers and global header footers, o…

0f33d98

…nboarding, settings, ref #4371

pete-watters force-pushed the chore/4370/design-system-containers branch from a0eeb00 to 0f33d98 Compare March 28, 2024 07:05

pete-watters added this pull request to the merge queue Mar 28, 2024

Merged via the queue into dev with commit 6262267 Mar 28, 2024
29 of 30 checks passed

pete-watters deleted the chore/4370/design-system-containers branch March 28, 2024 07:30

This was referenced Apr 3, 2024

fix: use signed stacks account in transaction #4923 #5152

Merged

Fix recognition of active account during Stacks contract execution #4599

Closed

Increase Fee gets cut off #5173

Closed

pete-watters mentioned this pull request Apr 24, 2024

fix: allow virtuoso to resize dynamically, ref #5242 #5289

Merged

pete-watters mentioned this pull request Aug 1, 2024

Containers refactor III - This time its composable #5715

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Full page extension views, containers, shared headers + footers #4655

Full page extension views, containers, shared headers + footers #4655

pete-watters commented Dec 7, 2023 •

edited by leather-bot

Loading

kyranjamie commented Dec 7, 2023

kyranjamie commented Dec 7, 2023

kyranjamie commented Dec 7, 2023 •

edited

Loading

pete-watters commented Dec 7, 2023

pete-watters commented Dec 7, 2023 •

edited

Loading

pete-watters commented Dec 14, 2023

pete-watters Dec 14, 2023 •

edited

Loading

mica000 Dec 14, 2023

pete-watters Dec 14, 2023

pete-watters Feb 15, 2024

pete-watters Feb 21, 2024

pete-watters Dec 15, 2023

pete-watters commented Mar 19, 2024 •

edited

Loading

fbwoolf Mar 21, 2024

pete-watters Mar 21, 2024

fbwoolf Mar 21, 2024

pete-watters commented Mar 22, 2024 •

edited

Loading

kyranjamie left a comment


		import { isKnownPopupRoute } from './get-popup-header';

		function isHomePage(pathname: RouteUrls) {

Full page extension views, containers, shared headers + footers #4655

Full page extension views, containers, shared headers + footers #4655

Conversation

pete-watters commented Dec 7, 2023 • edited by leather-bot Loading

kyranjamie commented Dec 7, 2023

kyranjamie commented Dec 7, 2023

kyranjamie commented Dec 7, 2023 • edited Loading

pete-watters commented Dec 7, 2023

pete-watters commented Dec 7, 2023 • edited Loading

pete-watters commented Dec 14, 2023

pete-watters Dec 14, 2023 • 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

pete-watters commented Mar 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pete-watters commented Mar 22, 2024 • edited Loading

kyranjamie left a comment

Choose a reason for hiding this comment

pete-watters commented Dec 7, 2023 •

edited by leather-bot

Loading

kyranjamie commented Dec 7, 2023 •

edited

Loading

pete-watters commented Dec 7, 2023 •

edited

Loading

pete-watters Dec 14, 2023 •

edited

Loading

pete-watters commented Mar 19, 2024 •

edited

Loading

pete-watters commented Mar 22, 2024 •

edited

Loading