chore: containers,headers, code quality

Author: pete-watters

.storybook/viewports.ts

@@ -1,13 +1,14 @@
 import { breakpoints } from '@leather-wallet/tokens';
 
-import { POPUP_HEIGHT, POPUP_WIDTH } from '../src/app/ui/constants';
+// TODO import from '@leather-wallet/tokens'
+import { tokens } from '../theme/tokens';
 
 export const customViewports = {
   popup: {
     name: 'Popup',
     styles: {
-      width: `${POPUP_WIDTH}px`,
-      height: `${POPUP_HEIGHT}px`,
+      width: tokens.sizes.popupWidth.value,
+      height: tokens.sizes.popupHeight.value,
     },
   },
   sm: {

src/app/common/hooks/use-dialogs.ts

@@ -1,4 +1,4 @@
-// import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export function buildEnterKeyEvent(onClick: () => void) {
   return (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -8,48 +8,46 @@ export function buildEnterKeyEvent(onClick: () => void) {
   };
 }
 
-// TODO try deprecate this in favour of new settings menu https://github.com/leather-wallet/extension/pull/2732/files
-
-// let timer = 0;
-
-// export function useModifierKey(key: 'alt' | 'control', delay = 0) {
-//   const [isPressed, setIsPressed] = useState(false);
-
-//   const keydownFn = useCallback(
-//     (event: KeyboardEvent) => {
-//       if (key === 'alt' && event.altKey) {
-//         timer = window.setTimeout(() => setIsPressed(true), delay);
-//       }
-//       if (key === 'control' && event.ctrlKey) {
-//         timer = window.setTimeout(() => setIsPressed(true), delay);
-//       }
-//     },
-//     [delay, key]
-//   );
-
-//   const keyupFn = useCallback(
-//     (event: KeyboardEvent) => {
-//       if (key === 'alt' && !event.altKey) {
-//         clearTimeout(timer);
-//         setIsPressed(false);
-//       }
-//       if (key === 'control' && !event.ctrlKey) {
-//         clearTimeout(timer);
-//         setIsPressed(false);
-//       }
-//     },
-//     [key]
-//   );
-
-//   useEffect(() => {
-//     document.addEventListener('keydown', keydownFn);
-//     document.addEventListener('keyup', keyupFn);
-//     return () => {
-//       clearTimeout(timer);
-//       document.removeEventListener('keydown', keydownFn);
-//       document.removeEventListener('keyup', keyupFn);
-//     };
-//   }, [keydownFn, keyupFn]);
-
-//   return { isPressed };
-// }
+let timer = 0;
+
+export function useModifierKey(key: 'alt' | 'control', delay = 0) {
+  const [isPressed, setIsPressed] = useState(false);
+
+  const keydownFn = useCallback(
+    (event: KeyboardEvent) => {
+      if (key === 'alt' && event.altKey) {
+        timer = window.setTimeout(() => setIsPressed(true), delay);
+      }
+      if (key === 'control' && event.ctrlKey) {
+        timer = window.setTimeout(() => setIsPressed(true), delay);
+      }
+    },
+    [delay, key]
+  );
+
+  const keyupFn = useCallback(
+    (event: KeyboardEvent) => {
+      if (key === 'alt' && !event.altKey) {
+        clearTimeout(timer);
+        setIsPressed(false);
+      }
+      if (key === 'control' && !event.ctrlKey) {
+        clearTimeout(timer);
+        setIsPressed(false);
+      }
+    },
+    [key]
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', keydownFn);
+    document.addEventListener('keyup', keyupFn);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('keydown', keydownFn);
+      document.removeEventListener('keyup', keyupFn);
+    };
+  }, [keydownFn, keyupFn]);
+
+  return { isPressed };
+}

src/app/common/hooks/use-modifier-key.ts

@@ -16,9 +16,9 @@ const AppVersionLabel = forwardRef<HTMLSpanElement, AppVersionLabelProps>(
     <styled.span
       ref={ref}
       textStyle="mono.02"
-      marginRight="10px"
-      mb="-4px"
-      ml="space.02"
+      marginTop="auto"
+      marginBottom="space.02"
+      mx="space.02"
       opacity={0.5}
       textDecoration={isLatestVersion ? 'none' : 'line-through'}
       textWrap="nowrap"
@@ -28,7 +28,7 @@ const AppVersionLabel = forwardRef<HTMLSpanElement, AppVersionLabelProps>(
     </styled.span>
   )
 );
-// TODO fix this, as its now unused but shouldn't be
+
 export function AppVersion() {
   const { pullRequestLink, isLatestBuild } = useIsLatestPullRequestBuild();
 

src/app/components/app-version.tsx

@@ -9,8 +9,8 @@ import { buildEnterKeyEvent } from '@app/common/hooks/use-modifier-key';
 import { WaitingMessages, useWaitingMessage } from '@app/common/utils/use-waiting-message';
 import { Button } from '@app/ui/components/button/button';
 import { Footer } from '@app/ui/components/containers/footers/footer';
-import { Card } from '@app/ui/components/layout/card/card';
-import { Page } from '@app/ui/components/layout/page/page.layout';
+import { Card } from '@app/ui/layout/card/card';
+import { Page } from '@app/ui/layout/page/page.layout';
 
 import { ErrorLabel } from './error-label';
 

src/app/components/request-password.tsx

@@ -10,8 +10,7 @@ export function ActivityListTabWrapper({
   padContent = false,
 }: ActivityListTabWrapperProps) {
   return (
-    // Height set based on the height of the empty assets screen
-    <Box minHeight="477px" py={padContent ? 'space.11' : undefined}>
+    <Box minHeight="dialogContentHeight" py={padContent ? 'space.11' : undefined}>
       {children}
     </Box>
   );

src/app/features/activity-list/components/tab-wrapper.tsx

@@ -20,8 +20,8 @@ import {
 } from '@app/store/networks/networks.hooks';
 import { Button } from '@app/ui/components/button/button';
 import { Input } from '@app/ui/components/input/input';
-import { Page } from '@app/ui/components/layout/page/page.layout';
 import { Title } from '@app/ui/components/typography/title';
+import { Page } from '@app/ui/layout/page/page.layout';
 
 /**
  * The **peer** network ID.
@@ -45,7 +45,6 @@ const addNetworkFormValues: AddNetworkFormValues = {
   bitcoinUrl: '',
 };
 
-// FIXME 4370 task #11 make this look better
 export function AddNetwork() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');

src/app/features/add-network/add-network.tsx

@@ -31,7 +31,7 @@ export function AssetsList() {
   const { whenWallet } = useWalletType();
 
   return (
-    <Stack data-testid={HomePageSelectors.BalancesList} pb="space.06">
+    <Stack data-testid={HomePageSelectors.BalancesList}>
       {whenWallet({
         software: (
           <CryptoCurrencyAssetItemLayout

src/app/features/asset-list/asset-list.tsx

@@ -13,7 +13,7 @@ import { useConfigNftMetadataEnabled } from '@app/query/common/remote-config/rem
 import { AddCollectible } from './components/add-collectible';
 import { Ordinals } from './components/bitcoin/ordinals';
 import { Stamps } from './components/bitcoin/stamps';
-import { CollectiblesLayout } from './components/collectibes.layout';
+import { CollectiblesLayout } from './components/collectible.layout';
 import { StacksCryptoAssets } from './components/stacks/stacks-crypto-assets';
 import { TaprootBalanceDisplayer } from './components/taproot-balance-displayer';
 import { useIsFetchingCollectiblesRelatedQuery } from './hooks/use-is-fetching-collectibles';

src/app/features/collectibles/collectibles.tsx

@@ -1,5 +1,4 @@
 import { Flex, Grid, HStack, styled } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { Spinner } from '@app/ui/components/spinner';
@@ -23,24 +22,24 @@ export function CollectiblesLayout({
 }: CollectiblesLayoutProps) {
   return (
     <>
-      <Flex flexDirection="row" justifyContent="space-between" flex={1} mt="space.05">
+      <Flex flexDirection="row" justifyContent="space-between" flex={1}>
         <HStack columnGap="space.02">
-          <styled.span textStyle="label.01">{title}</styled.span>
-          {isLoading ? (
-            <Spinner color={token('colors.accent.text-primary')} opacity={0.5} size="16px" />
+          <styled.span textStyle="label.01" paddingY="space.05">
+            {title}
+          </styled.span>
+          {!isLoading ? (
+            <Spinner color="text-primary" opacity={0.5} size="16px" />
           ) : (
             <ReloadIcon cursor="pointer" onClick={() => onRefresh()} />
           )}
         </HStack>
         {subHeader}
       </Flex>
       <Grid
-        gap="space.04"
-        rowGap="space.06"
-        gridTemplateColumns={[
-          'repeat(auto-fill, minmax(164px, 1fr))',
-          'repeat(auto-fill, minmax(184px, 1fr))',
-        ]}
+        gridTemplateColumns={{
+          base: 'repeat(auto-fill, minmax(164px, 1fr))',
+          md: 'repeat(auto-fill, minmax(184px, 1fr))',
+        }}
       >
         {children}
       </Grid>