chore: fix ledger, ref #4861

[kyranjamie]

Try out this version of Leather — Extension build, Test report

Not happy with this solution, though quick.

The cause of this bug was duplication of the JSX.

            <Link
              hideBelow="md"
              invert={isAtleastBreakpointMd}
              flex={1}
              mt={[0, 0, 'space.05']}
              data-testid={OnboardingSelectors.SignInLink}
              onClick={onRestoreWallet}
              size="lg"
            >
              Use existing key
            </Link>
            <Button
              hideFrom="md"
              variant="outline"
              invert={isAtleastBreakpointMd}
              flex={1}
              mt={[0, 0, 'space.05']}
              onClick={onRestoreWallet}
            >
              Use existing key
            </Button>
            <Link
              hideBelow="md"
              invert={isAtleastBreakpointMd}
              flex={1}
              mt={[0, 0, 'space.05']}
              onClick={onSelectConnectLedger}
              size="lg"
            >
              Use Ledger
            </Link>
            <Button
              hideFrom="md"
              variant="outline"
              invert={isAtleastBreakpointMd}
              flex={1}
              mt={[0, 0, 'space.05']}
              onClick={onSelectConnectLedger}
            >
              Use Ledger
            </Button>

[pete-watters]

👍 a simple mistake when improving the code.

I suggested changing this code to add duplication and do things as panda suggested. https://panda-css.com/docs/utilities/display

Before that we were using useViewportMinWidth hooks for this

[fbwoolf]

The duplication here was a temp solution, I believe, just so we could get the new button changes merged in and not create a lot of conflicts with Pete's open container changes branch. We should revisit after that work gets merged if still present.

[pete-watters]

We can try and get rid of some duplication when I deprecate invert= and have a custom UI here.

However, this duplication of tags is what panda suggest you do to show/hide stuff on different views. So rather than:

const isAtleastBreakpointMd = useViewportMinWidth();

<Component size={isAtleastBreakpointMd ? 'md' : 'sm'}/>

They suggest:

<Component size='sm' hideFrom='md'/>
<Component size='md' hideAbove='sm'/>

Although this is duplication I believe it will make things smoother as the elements are already in the DOM and CSS is used to show/ hide rather than a hook and re-render.

I started doing this as on some pages e.g. the Receive dialog, as you move from screen to screen useViewportMinWidth re-runs to check the size and causes a re-render flash

[fbwoolf]

Thx for the feedback here @pete-watters 👍