chore: fix rebasing issue again?

.storybook/viewports.ts

@@ -1,7 +1,4 @@
-import { breakpoints } from '@leather-wallet/tokens';
-
-// TODO import from '@leather-wallet/tokens'
-import { tokens } from '../theme/tokens';
+import { breakpoints, tokens } from '@leather-wallet/tokens';
 
 export const customViewports = {
   popup: {

package.json

@@ -132,7 +132,7 @@
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather-wallet/tokens": "0.0.8",
+    "@leather-wallet/tokens": "0.0.10",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-list.layout.tsx

@@ -3,7 +3,7 @@ import { Stack, StackProps } from 'leather-styles/jsx';
 
 export function Brc20AssetListLayout({ children }: StackProps) {
   return (
-    <Stack data-testid={CryptoAssetSelectors.CryptoAssetList} width="100%" paddingX="space.03">
+    <Stack data-testid={CryptoAssetSelectors.CryptoAssetList} width="100%" px="space.03">
       {children}
     </Stack>
   );

src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx

@@ -22,7 +22,7 @@ export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAsse
   const { whenWallet } = useWalletType();
 
   return (
-    <Stack data-testid={CryptoAssetSelectors.CryptoAssetList} width="100%" paddingX="space.03">
+    <Stack data-testid={CryptoAssetSelectors.CryptoAssetList} width="100%" px="space.03">
       <BitcoinNativeSegwitAccountLoader current>
         {signer => (
           <BitcoinBalanceLoader address={signer.address}>

src/app/components/request-password.tsx

@@ -87,6 +87,7 @@ export function RequestPassword({ onSuccess }: RequestPasswordProps) {
           />
           {error && <ErrorLabel width="100%">{error}</ErrorLabel>}
         </Stack>
+
         {/*  TODO: #4735 implement forgot password flow */}
         {/* <Link>
           Forgot password?

src/app/features/container/container.tsx

@@ -67,7 +67,6 @@ export function Container() {
 
   useEffect(() => {
     // set the whole body colour based on page variant so it can update dynamically
-    // TODO replace this with data-attributes to improve and fix modal BG colours
     if (variant === 'home') {
       document.body.style.backgroundColor = token('colors.ink.background-primary');
     }
@@ -122,6 +121,7 @@ export function Container() {
                 />
               }
               title={getTitleFromUrl(pathname)}
+              // TODO fix hiding of logo on unlock page
               logo={
                 !hideLogo(pathname) && (
                   <Box

src/app/features/settings/sign-out/sign-out-confirm.tsx

@@ -20,7 +20,8 @@ export function SignOut({ isShowing = false, onClose }: SignOutProps) {
   useEffect(() => void analytics.track('sign-out'), [analytics]);
   const { signOut } = useKeyActions();
   const navigate = useNavigate();
-  // FIXME same bug as SwitchAcccount dialog where we call hooks from useWalletType when no wallet yet set
+  // #4370 SMELL without this early return the wallet crashes on new install with
+  // : Wallet is neither of type `ledger` nor `software`
   if (!isShowing) return null;
   return (
     <SignOutDialog

src/app/pages/home/home.tsx

@@ -58,7 +58,7 @@ export function Home() {
       <HomeTabs>
         <ModalBackgroundWrapper>
           <Route index element={<AssetsList />} />
-          <Route path={`${RouteUrls.Home}/${RouteUrls.Activity}`} element={<ActivityList />}>
+          <Route path={RouteUrls.Activity} element={<ActivityList />}>
             {homePageModalRoutes}
           </Route>
           {homePageModalRoutes}

src/app/store/networks/networks.ts

@@ -9,8 +9,6 @@ import { storeAtom } from '..';
 import { selectCurrentNetworkId, selectNetworks } from './networks.selectors';
 import { findMatchingNetworkKey } from './networks.utils';
 
-// TODO as about this as it's depreacted but not sure what to do instead
-// PR https://github.com/leather-wallet/extension/pull/3017
 /** @deprecated */
 export const currentNetworkAtom = atom(get => {
   const store = get(storeAtom);

src/app/ui/components/account/account.card.stories.tsx

@@ -9,7 +9,7 @@ import { AccountCard as Component } from './account.card';
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Design System/Layout/AccountCard',
+  title: 'Layout/AccountCard',
 };
 
 export default meta;

src/app/ui/components/button/button.stories.tsx

@@ -5,7 +5,6 @@ import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 import { ChevronDownIcon } from '@app/ui/icons/chevron-down-icon';
 import { PlaceholderIcon } from '@app/ui/icons/placeholder-icon';
 
-// TODO - fix this, my branch is missing a lot of variants and I thin kthats whays up with bottons
 import { Button as Component } from './button';
 
 const meta: Meta<typeof Component> = {

src/app/ui/components/containers/dialog/dialog.stories.tsx

@@ -1,15 +1,26 @@
+import { useState } from 'react';
+
 import type { Meta } from '@storybook/react';
 
-import { Dialog as Component, RadixDialogProps } from './dialog';
+import { Button } from '../../button/button';
+import { Dialog as Component } from './dialog';
 
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Design System/Containers/Dialog',
+  title: 'Containers/Dialog',
 };
 
 export default meta;
 
-export function Dialog(args: RadixDialogProps) {
-  return <Component {...args} />;
+export function Dialog() {
+  const [isShowing, setIsShowing] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsShowing(!isShowing)}>Open</Button>
+      <Component isShowing={isShowing} onClose={() => setIsShowing(false)}>
+        <h1>Some Dialog</h1>
+      </Component>
+    </>
+  );
 }

src/app/ui/components/containers/footers/footer.stories.tsx

@@ -2,14 +2,14 @@ import type { Meta } from '@storybook/react';
 import { Flex, styled } from 'leather-styles/jsx';
 
 import { Button } from '@app/ui/components/button/button';
-import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance';
 
+import { Link } from '../../link/link';
 import { Footer as Component } from './footer';
 
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Design System/Containers/Footer',
+  title: 'Containers/Footer',
   parameters: {
     controls: {
       disable: true,
@@ -83,17 +83,13 @@ export function FooterWithText() {
         <styled.span textStyle="caption.02" display="block" textAlign="left">
           Leather Wallet will now be provided by Leather Wallet LLC [a subsidiary of Nassau Machines
           Inc]. Please review and accept Leather Wallet{' '}
-          <styled.a href="https://leather.io/terms" textDecoration="underline" target="_blank">
+          <Link href="https://leather.io/terms" textDecoration="underline" target="_blank">
             Terms of Service
-          </styled.a>{' '}
+          </Link>{' '}
           and{' '}
-          <styled.a
-            href="https://leather.io/privacy-policy"
-            target="_blank"
-            textDecoration="underline"
-          >
+          <Link href="https://leather.io/privacy-policy" target="_blank" textDecoration="underline">
             Privacy Policy
-          </styled.a>
+          </Link>
           .
         </styled.span>
       </Flex>
@@ -109,35 +105,20 @@ export function FooterWithLink() {
       </Button>
 
       <Flex width="100%" justifyContent="center">
-        {/* use new <Link component here */}
-        <styled.a
+        <Link
           href=""
           target="_blank"
           cursor="pointer"
           textDecoration="underline"
           textStyle="label.01"
         >
           View all addresses
-        </styled.a>
+        </Link>
       </Flex>
     </Component>
   );
 }
 
-export function FooterWithBalance() {
-  return (
-    <Component>
-      <Button onClick={() => null} type="submit">
-        Button
-      </Button>
-      <AvailableBalance
-        balance="0.00048208 BTC"
-        balanceTooltipLabel="Total balance minus any amounts already represented by transfer inscriptions in your wallet."
-      />
-    </Component>
-  );
-}
-
 export function FooterWithBalancesAbove() {
   return (
     <Component>

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

@@ -5,7 +5,7 @@ import { Header as Component, HeaderProps } from './header';
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Design System/Containers/Header',
+  title: 'Containers/Header',
   args: {
     variant: 'home',
   },

src/app/ui/icons/docs/icons.mdx

@@ -20,7 +20,7 @@ import { iconsList } from './icons-list';
 <div className="spacer" />
 
 <div>
-  <h3 style={{ mt: 32, mb: 24 }}>Default 24x24</h3>
+  <h3 style={{ marginTop: 32, marginBottom: 24 }}>Default 24x24</h3>
   <IconGallery>
     {iconsList.map(item => {
       const IconComponent = Icon[item];
@@ -36,7 +36,7 @@ import { iconsList } from './icons-list';
 <div className="spacer" />
 
 <div>
-  <h3 style={{ mt: 32, mb: 24 }}>Small 16x16</h3>
+  <h3 style={{ marginTop: 32, marginBottom: 24 }}>Small 16x16</h3>
   <IconGallery>
     {iconsList.map(item => {
       const IconComponent = Icon[item];

src/app/ui/layout/card/card.stories.tsx

@@ -8,7 +8,7 @@ import { Card as Component } from './card';
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Design System/Layout/Card',
+  title: 'Layout/Card',
 };
 
 export default meta;

src/app/ui/layout/page/page.layout.stories.tsx

@@ -7,7 +7,7 @@ import { Page as Component } from './page.layout';
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Design System/Layout/Page',
+  title: 'Layout/Page',
 };
 
 export default meta;

src/app/ui/layout/page/page.layout.tsx

@@ -11,8 +11,6 @@ export function Page({ children }: PageProps) {
   return (
     <Box
       bg="ink.background-primary"
-      // TODO ask design RE borderRadius as not consistent
-      // Send / Swap have 'lg'
       borderRadius={{ base: 'unset', md: 'lg' }}
       width="pageWidth"
       height={{ base: '100%', md: 'fit-content' }}

src/app/ui/pages/home.layout.stories.tsx

@@ -12,7 +12,7 @@ import { HomeLayout as Component } from './home.layout';
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Design System/Pages/Home',
+  title: 'Pages/Home',
 };
 
 export default meta;

src/app/ui/pages/two-column.layout.stories.tsx

@@ -6,15 +6,15 @@ import { TwoColumnLayout as Component } from './two-column.layout';
 const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
-  title: 'Design System/Layout/TwoColumnLayout',
+  title: 'Layout/TwoColumnLayout',
 };
 
 export default meta;
 
 export function TwoColumnLayout() {
   return (
     <Component title={<>Hello world</>} content={<p>lorem ipsum </p>} action={<>some action</>}>
-      <Box width="100%" height="dialogHeight" bg="lightModeRed.300" />
+      <Box width="100%" height="dialogHeight" bg="red" />
     </Component>
   );
 }

src/app/ui/pages/two-column.layout.tsx

@@ -33,12 +33,7 @@ export function TwoColumnLayout({
         </Stack>
       </Flex>
 
-      <Flex
-        gap="space.05"
-        flexDirection="column"
-        px={{ base: 'space.00', md: 'space.10', lg: 'space.02' }}
-        mb={{ base: 'space.05', md: '0' }}
-      >
+      <Flex gap="space.05" flexDirection="column" mb={{ base: 'space.05', md: '0' }}>
         <Stack
           p={{ base: 'space.02', md: 'space.05' }}
           gap="space.04"

src/background/popup.ts

@@ -1,7 +1,7 @@
 import { pxStringToNumber } from '@shared/utils/px-string-to-number';
 
 // FIXME import from '@leather-wallet/tokens'
-// import { tokens } from '../../theme/tokens';
+// import { tokens } from '@leather-wallet/tokens';
 /**
  * importing from tokens gives TS error about 
  * 

src/shared/route-urls.ts

@@ -52,9 +52,7 @@ export enum RouteUrls {
   BitcoinContractList = '/bitcoin-contract-list',
 
   // Modal routes
-  // ChangeTheme = 'change-theme',
   EditNonce = 'edit-nonce',
-  // SelectNetwork = 'choose-network',
   SignOutConfirm = 'sign-out',
   RetrieveTaprootFunds = 'retrieve-taproot-funds',
 

tests/specs/network/add-network.spec.ts

@@ -3,11 +3,6 @@ import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
 import { test } from '../../fixtures/fixtures';
 
-// Temporary for local testing purposes
-test.use({
-  viewport: { width: 1280, height: 1024 },
-});
-
 test.describe('Networks tests', () => {
   test.beforeEach(
     async ({ extensionId, globalPage, onboardingPage, homePage, networkPage, page }) => {

tests/specs/settings/settings.spec.ts

@@ -4,7 +4,6 @@ import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
 import { test } from '../../fixtures/fixtures';
 
-// FIXME PETE - this test needs to be updated and improved
 test.describe('Settings menu', () => {
   test.beforeEach(async ({ extensionId, globalPage, onboardingPage }) => {
     await globalPage.setupAndUseApiCalls(extensionId);

theme/global/global.ts

@@ -1,8 +1,6 @@
+import { tokens } from '@leather-wallet/tokens';
 import { defineGlobalStyles } from '@pandacss/dev';
 
-// TODO import from '@leather-wallet/tokens'
-import { tokens } from '../tokens';
-
 // 4370 TODO audit the use of this file as we are pretty close to not needing it
 // - could set some styles in the <Container where radix.css also loaded
 // - try make UI things more modular, self contained and independant