fix(nami): [lw-11967] fix storybook in nami package (#1596)

packages/nami/.storybook/index.scss

@@ -0,0 +1,49 @@
+@import './theme.scss';
+
+:global(.ant-radio:hover .ant-radio-inner) {
+  border-color: var(--light-mode-dark-grey, var(--dark-mode-light-grey)) !important;
+  background: var(--color-white, var(--dark-mode-grey));
+}
+:global(.ant-tooltip) {
+  color: var(--light-mode-dark-grey, var(--dark-mode-light-grey)) !important;
+  font-weight: 400 !important;
+  font-size: var(--bodySmall) !important;
+}
+:global(.ant-tooltip-inner) {
+  background-color: var(--dark-mode-mid-grey, #ffffff) !important;
+  border-radius: 11px !important;
+  color: var(--dark-mode-light-grey, --light-mode-dark-grey) !important;
+  padding: size_unit(1) size_unit(2) !important;
+}
+:global(.ant-tooltip-arrow-content) {
+  background-color: var(--dark-mode-mid-grey, #ffffff) !important;
+}
+
+:global(.ant-tooltip-arrow-content:before) {
+  background: var(--dark-mode-mid-grey, #ffffff) !important;
+}
+
+:global(.ant-modal-mask) {
+  background: var(--light-mode-black, var(--dark-mode-bg-black)) !important;
+  opacity: 0.9;
+}
+
+:global(.ant-drawer.ant-drawer-open .ant-drawer-mask) {
+  animation: none;
+}
+
+:global(.ant-drawer) {
+  transition: none;
+}
+
+:global {
+  .ant-checkbox-checked .ant-checkbox-inner {
+    background-color: var(--primary-default) !important;
+    border-color: var(--primary-default) !important;
+  }
+}
+
+body {
+  background-color: var(--bg-color-body, #ffffff) !important;
+  color: var(--text-color-primary, #3d3b39);
+}

packages/nami/.storybook/main.ts

@@ -17,6 +17,15 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@chromatic-com/storybook'),
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        sass: {
+          // Require your Sass preprocessor here
+          implementation: require('sass')
+        }
+      }
+    }
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-webpack5'),

packages/nami/.storybook/preview.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Preview } from '@storybook/react';
 import '../src/ui/app/components/styles.css';
 import 'focus-visible/dist/focus-visible';
+import { ThemeColorScheme, ThemeProvider, colorSchemaDecorator } from '@input-output-hk/lace-ui-toolkit';
 
 import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 import { theme } from '../src/ui/theme';
@@ -12,6 +13,7 @@ import {
   NetworkConnectionStates,
 } from '../src/features/common-outside-handles-provider';
 import { WalletType } from '@cardano-sdk/web-extension';
+import './index.scss';
 
 const noop = (async () => {}) as any;
 const mock = {} as any;
@@ -133,6 +135,14 @@ export const decorators = [
       </CommonOutsideHandlesProvider>
     </OutsideHandlesProvider>
   ),
+  (Story, args) => {
+    const { decorators: { theme } = {} } = args.parameters;
+    return (
+      <ThemeProvider colorScheme={theme ?? ThemeColorScheme.Light}>
+        <Story />
+      </ThemeProvider>
+    );
+  }
 ];
 
 export default preview;

packages/nami/.storybook/theme.scss

@@ -0,0 +1,38 @@
+@import '../../common/src/ui/styles/abstracts/mixins';
+@import '../../common/src/ui/styles/themes/dark';
+@import '../../common/src/ui/styles/themes/light';
+
+@mixin dark-theme {
+  /*
+    in case the theme provider is not being used, this media query allows us to use the theme set on the user system
+    */
+  @media (prefers-color-scheme: dark) and (data-theme: dark) {
+    :root {
+      @include theme-custom-properties($dark-theme);
+    }
+  }
+
+  html[data-theme='dark']:not(:has(div[data-theme='light'])),
+  div[data-theme='dark'] {
+    @include theme-custom-properties($dark-theme);
+  }
+}
+
+@mixin light-theme {
+  /*
+    in case the theme provider is not being used, this media query allows us to use the theme set on the user system
+    */
+  @media (prefers-color-scheme: light) and (data-theme: light) {
+    :root {
+      @include theme-custom-properties($light-theme);
+    }
+  }
+
+  html[data-theme='light']:not(:has(div[data-theme='dark'])),
+  div[data-theme='light'] {
+    @include theme-custom-properties($light-theme);
+  }
+}
+
+@include dark-theme;
+@include light-theme;

packages/nami/src/adapters/transactions.mock.ts

@@ -6,6 +6,6 @@ import * as actualApi from './transactions';
 
 export * from './transactions';
 
-export const useTxInfo: jest.Mock = fn(actualApi.useTxInfo).mockName(
-  'useTxInfo',
+export const useWalletTxs: jest.Mock = fn(actualApi.useWalletTxs).mockName(
+  'useWalletTxs',
 );

packages/nami/src/ui/app/components/changePasswordModal.tsx

@@ -22,7 +22,7 @@ import {
 import { Events } from '../../../features/analytics/events';
 import { useCaptureEvent } from '../../../features/analytics/hooks';
 import { NamiPassword } from './namiPassword';
-import { useOutsideHandles } from 'features/outside-handles-provider';
+import { useOutsideHandles } from '../../../features/outside-handles-provider';
 import { noop } from 'lodash';
 
 interface Props {

packages/nami/src/ui/app/pages/send.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, useColorMode } from '@chakra-ui/react';
+import { Box, useColorMode, useColorModeValue } from '@chakra-ui/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { screen, userEvent, within } from '@storybook/test';
 
@@ -16,7 +16,9 @@ import { account1, currentAccount } from '../../../mocks/account.mock';
 import { store } from '../../../mocks/store.mock';
 import { useStoreState, useStoreActions } from '../../store.mock';
 import { Cardano } from '../../../../.storybook/mocks/cardano-sdk.mock';
-
+import { useOutsideHandles } from '../../../features/outside-handles-provider/useOutsideHandles.mock';
+import { UpgradeToLaceHeader } from '../../UpgradeToLaceHeader';
+import { useLocation } from '../../../../.storybook/mocks/react-router-dom.mock';
 import Send from './send';
 import { of } from 'rxjs';
 import { Wallet } from '@lace/cardano';
@@ -208,14 +210,26 @@ const inMemoryWallet: Wallet.ObservableWallet = {
 
 const noop = (async () => {}) as any;
 
+declare global {
+  interface Window {
+    chrome: {
+      runtime: {
+        getURL: (path: string) => string;
+      };
+    };
+  }
+}
+
 const SendStory = ({
   colorMode,
 }: Readonly<{ colorMode: 'dark' | 'light' }>): React.ReactElement => {
   const { setColorMode } = useColorMode();
   setColorMode(colorMode);
+  const containerBg = useColorModeValue('white', 'gray.800');
 
   return (
-    <Box width="400" height="600">
+    <Box background={containerBg} width="400" height="600">
+      <UpgradeToLaceHeader switchWalletMode={async () => {}} />
       <Send
         accounts={[
           {
@@ -227,13 +241,16 @@ const SendStory = ({
         activeAccount={{
           name: currentAccount.name,
           avatar: currentAccount.avatar,
-          recentSendToAddress: currentAccount.recentSendToAddresses,
+          recentSendToAddress: {
+            Mainnet: currentAccount.recentSendToAddresses,
+          },
         }}
         updateAccountMetadata={noop}
         walletAddress=""
         withSignTxConfirmation={noop}
         currentChain={{ networkId: 0, networkMagic: 0 }}
         inMemoryWallet={inMemoryWallet as unknown as Wallet.ObservableWallet}
+        environmentName={'Mainnet'}
       />
     </Box>
   );
@@ -260,6 +277,18 @@ const meta: Meta<typeof SendStory> = {
     layout: 'centered',
   },
   beforeEach: () => {
+    useLocation.mockImplementation(
+      () =>
+        ({
+          pathname: '',
+        }) as any,
+    );
+    useOutsideHandles.mockImplementation(() => {
+      return {
+        secretsUtil: { password: {} },
+        lockedStakeRewards: BigInt(0),
+      };
+    });
     createTab.mockImplementation(async () => {
       await Promise.resolve();
     });
@@ -270,6 +299,7 @@ const meta: Meta<typeof SendStory> = {
       return callback({
         ...store,
         globalModel: {
+          laceSwitchStore: { isLaceSwitchInProgress: false },
           sendStore: {
             ...store.globalModel.sendStore,
             txInfo,
@@ -303,6 +333,7 @@ const meta: Meta<typeof SendStory> = {
 
     return () => {
       createTab.mockReset();
+      useOutsideHandles.mockReset();
       isValidAddress.mockReset();
       useStoreState.mockReset();
       useStoreActions.mockReset();
@@ -354,6 +385,7 @@ export const AddressSuccessLight: Story = {
       return callback({
         ...store,
         globalModel: {
+          laceSwitchStore: {},
           sendStore: {
             ...store.globalModel.sendStore,
             txInfo,
@@ -389,6 +421,7 @@ export const AmountErrorLight: Story = {
       return callback({
         ...store,
         globalModel: {
+          laceSwitchStore: {},
           sendStore: {
             ...store.globalModel.sendStore,
             txInfo,
@@ -459,6 +492,7 @@ export const AssetsSetQuantityLight: Story = {
       return callback({
         ...store,
         globalModel: {
+          laceSwitchStore: {},
           sendStore: {
             ...store.globalModel.sendStore,
             txInfo,
@@ -515,6 +549,7 @@ export const AssetsWithQuantityLight: Story = {
       return callback({
         ...store,
         globalModel: {
+          laceSwitchStore: {},
           sendStore: {
             ...store.globalModel.sendStore,
             message: '123',

packages/nami/src/ui/app/pages/send.tsx

@@ -131,9 +131,7 @@ const Send = ({
   const { cardanoCoin, walletType, openHWFlow, networkConnection } =
     useCommonOutsideHandles();
 
-  const { secretsUtil } = useOutsideHandles();
-
-  const { lockedStakeRewards } = useOutsideHandles();
+  const { secretsUtil, lockedStakeRewards } = useOutsideHandles();
   const [showSwitchToLaceBanner, setShowSwitchToLaceBanner] = useState(false);
   const [address, setAddress] = [
     useStoreState(state => state.globalModel.sendStore.address),
@@ -452,7 +450,7 @@ const Send = ({
     () =>
       BigInt(toUnit(value.ada)) >
       BigInt(BigInt(utxoTotal?.coins || 0) + BigInt(rewards || 0) || '0') -
-        BigInt(lockedStakeRewards.toString()),
+        BigInt(lockedStakeRewards?.toString() || 0),
     [value.ada, utxoTotal?.coins, rewards, lockedStakeRewards],
   );
 

packages/nami/src/ui/app/pages/settings.stories.tsx

@@ -17,6 +17,18 @@ import {
 } from '../../../../.storybook/mocks/react-router-dom.mock';
 import { CurrencyCode } from '../../../adapters/currency';
 import { Wallet } from '@lace/cardano';
+import { UpgradeToLaceHeader } from '../../UpgradeToLaceHeader';
+import { useLocation } from '../../../../.storybook/mocks/react-router-dom.mock';
+
+declare global {
+  interface Window {
+    chrome: {
+      runtime: {
+        getURL: (path: string) => string;
+      };
+    };
+  }
+}
 
 const SettingsStory = ({
   colorMode,
@@ -34,6 +46,7 @@ const SettingsStory = ({
 
   return (
     <Box width="400" height="600">
+      <UpgradeToLaceHeader switchWalletMode={async () => {}} />
       <Settings
         isValidURL={() => true}
         availableChains={['Mainnet', 'Preprod', 'Preview', 'Sanchonet']}
@@ -61,6 +74,7 @@ const SettingsStory = ({
         switchNetwork={async () => {}}
         enableCustomNode={async () => {}}
         defaultSubmitApi=""
+        walletType="InMemory"
       />
     </Box>
   );
@@ -87,8 +101,20 @@ const meta: Meta<typeof SettingsStory> = {
     layout: 'centered',
   },
   beforeEach: () => {
+    useLocation.mockImplementation(
+      () =>
+        ({
+          pathname: '',
+        }) as any,
+    );
     useStoreState.mockImplementation((callback: any) => {
-      return callback(store);
+      return callback({
+        ...store,
+        globalModel: {
+          ...store.globalModel,
+          laceSwitchStore: { isLaceSwitchInProgress: false },
+        },
+      });
     });
     useStoreActions.mockImplementation(() => {
       return () => void 0;
@@ -159,26 +185,6 @@ export const GeneralChangePasswordDark: Story = {
     colorMode: 'dark',
   },
 };
-export const GeneralResetWalletLight: Story = {
-  parameters: {
-    colorMode: 'light',
-    path: '/settings/general',
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    await step('Toggle', async () => {
-      await userEvent.click(canvas.getByText('Reset Wallet'));
-    });
-  },
-};
-
-export const GeneralResetWalletDark: Story = {
-  ...GeneralResetWalletLight,
-  parameters: {
-    ...GeneralResetWalletLight.parameters,
-    colorMode: 'dark',
-  },
-};
 
 export const WhitelistedLight: Story = {
   parameters: {

packages/nami/src/ui/app/pages/settings.tsx

@@ -47,7 +47,7 @@ import type { UseAccount } from '../../../adapters/account';
 import type { OutsideHandlesContextValue } from '../../../features/outside-handles-provider';
 import type { ChangePasswordModalComponentRef } from '../components/changePasswordModal';
 import type { Wallet } from '@lace/cardano';
-import type { CommonOutsideHandlesContextValue } from 'features/common-outside-handles-provider';
+import type { CommonOutsideHandlesContextValue } from '../../../features/common-outside-handles-provider';
 
 type Props = Pick<
   OutsideHandlesContextValue,