chore: install @leather-wallet/ui package, ref leather-io/issues#64

.storybook/main.ts

@@ -42,6 +42,12 @@ const config: StorybookConfig = {
             loader: 'esbuild-loader',
             options: { tsconfig: './tsconfig.json', target: 'es2020' },
           },
+          {
+            test: /\.(js)$/,
+            include: [/node_modules\/@leather-wallet\/ui/],
+            loader: 'esbuild-loader',
+            options: { tsconfig: './tsconfig.json', loader: 'jsx', target: 'es2020' },
+          },
         ],
       },
     },

package.json

@@ -147,12 +147,8 @@
     "@noble/secp256k1": "2.1.0",
     "@octokit/types": "12.4.0",
     "@radix-ui/colors": "3.0.0",
-    "@radix-ui/react-accessible-icon": "1.0.3",
-    "@radix-ui/react-accordion": "1.1.2",
     "@radix-ui/react-avatar": "1.0.4",
     "@radix-ui/react-dialog": "1.0.5",
-    "@radix-ui/react-dropdown-menu": "2.0.6",
-    "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toast": "1.1.5",
     "@radix-ui/react-tooltip": "1.0.7",
@@ -258,6 +254,7 @@
     "@leather-wallet/panda-preset": "0.2.0",
     "@leather-wallet/prettier-config": "0.4.1",
     "@leather-wallet/rpc": "1.0.3",
+    "@leather-wallet/ui": "1.4.4",
     "@ls-lint/ls-lint": "2.2.3",
     "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.40.1",
@@ -270,18 +267,18 @@
     "@sentry/webpack-plugin": "2.17.0",
     "@stacks/connect-react": "22.2.0",
     "@stacks/stacks-blockchain-api-types": "7.8.2",
-    "@storybook/addon-docs": "8.0.1",
-    "@storybook/addon-essentials": "8.0.1",
-    "@storybook/addon-interactions": "8.0.1",
+    "@storybook/addon-docs": "8.1.4",
+    "@storybook/addon-essentials": "8.1.4",
+    "@storybook/addon-interactions": "8.1.4",
     "@storybook/addon-links": "8.0.1",
-    "@storybook/addon-mdx-gfm": "8.0.1",
+    "@storybook/addon-mdx-gfm": "8.1.4",
     "@storybook/addon-onboarding": "8.0.1",
     "@storybook/addon-webpack5-compiler-swc": "1.0.2",
-    "@storybook/blocks": "8.0.6",
-    "@storybook/react": "8.0.1",
-    "@storybook/react-webpack5": "8.0.1",
-    "@storybook/test": "8.0.1",
-    "@storybook/theming": "8.0.1",
+    "@storybook/blocks": "8.1.4",
+    "@storybook/react": "8.1.4",
+    "@storybook/react-webpack5": "8.1.4",
+    "@storybook/test": "8.1.4",
+    "@storybook/theming": "8.1.4",
     "@types/argon2-browser": "1.18.4",
     "@types/bn.js": "5.1.5",
     "@types/chrome": "0.0.260",

panda.config.ts

@@ -4,8 +4,10 @@ import { globalCss } from './theme/global/global';
 
 export default defineConfig({
   preflight: true,
-
-  include: ['./src/**/*.{js,jsx,ts,tsx}'],
+  include: [
+    './node_modules/@leather-wallet/ui/dist-all/src/**/*.{js,jsx,ts,tsx}',
+    './src/**/*.{js,jsx,ts,tsx}',
+  ],
 
   exclude: [],
 

src/app/common/utils.spec.ts

@@ -1,4 +1,4 @@
-import { extractPhraseFromString, getTicker } from '@app/common/utils';
+import { getTicker } from '@app/common/utils';
 
 const nothing = 'micro-nothing';
 const novel_token_19 = 'novel-token-19';
@@ -14,81 +14,3 @@ describe(getTicker.name, () => {
     expect(ste).toEqual('STE');
   });
 });
-
-const SECRET_KEY_FORMATTED_POORLY = `1 balance
-2 adult
-3 board
-4 true
-5 diary
-pear banana olympic street enhance
-
-gift rely account      patient stereo one
-
-during      banner shift globe romance
-
-arrange dolphin disease`;
-
-const SECRET_KEY_FORMATTED_CORRECTLY = `balance adult board true diary pear banana olympic street enhance gift rely account patient stereo one during banner shift globe romance arrange dolphin disease`;
-
-const SECRET_KEY_COPIED_FROM_v3 = `1
-almost
-2
-dumb
-3
-wave
-4
-rude
-5
-surround
-6
-jealous
-7
-shine
-8
-fruit
-9
-toward
-10
-method
-11
-yard
-12
-ribbon
-13
-gold
-14
-acid
-15
-cute
-16
-police
-17
-team
-18
-time
-19
-this
-20
-easy
-21
-heavy
-22
-fuel
-23
-trash
-24
-swing`;
-
-const SECRET_KEY_COPIED_FROM_V3_FORMATTED = `almost dumb wave rude surround jealous shine fruit toward method yard ribbon gold acid cute police team time this easy heavy fuel trash swing`;
-
-describe(extractPhraseFromString.name, () => {
-  test('Extract secret key from poorly formatted string', () => {
-    const key = extractPhraseFromString(SECRET_KEY_FORMATTED_POORLY);
-    expect(key).toEqual(SECRET_KEY_FORMATTED_CORRECTLY);
-  });
-
-  test('Extract secret key from seed copied from v3 wallet', () => {
-    const key = extractPhraseFromString(SECRET_KEY_COPIED_FROM_v3);
-    expect(key).toEqual(SECRET_KEY_COPIED_FROM_V3_FORMATTED);
-  });
-});

src/app/common/utils.ts

@@ -8,27 +8,13 @@ import {
   type BitcoinNetworkModes,
   HIRO_API_BASE_URL_NAKAMOTO_TESTNET,
 } from '@leather-wallet/models';
-import { isBoolean } from '@leather-wallet/utils';
 
 import { HIRO_EXPLORER_URL } from '@shared/constants';
 
 function kebabCase(str: string) {
   return str.replace(KEBAB_REGEX, match => '-' + match.toLowerCase());
 }
 
-export function extractPhraseFromString(value: string) {
-  const clean = value.trim();
-  const words = clean.match(/\S+/g);
-  if (words?.length) {
-    return words
-      .map(word => (word.match(/[^0-9]+/g) ? word : null))
-      .filter(Boolean)
-      .join(' ');
-  } else {
-    return clean;
-  }
-}
-
 interface MakeBitcoinTxExplorerLinkArgs {
   txid: string;
   bitcoin: BitcoinChainConfig;
@@ -306,7 +292,3 @@ export function removeTrailingNullCharacters(s: string) {
 export function removeMinusSign(value: string) {
   return value.replace('-', '');
 }
-
-export function propIfDefined(prop: string, value: any) {
-  return isBoolean(value) ? { [prop]: value } : {};
-}

src/app/components/account-total-balance.tsx

@@ -2,10 +2,9 @@ import { memo } from 'react';
 
 import { styled } from 'leather-styles/jsx';
 
-import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
+import { SkeletonLoader, shimmerStyles } from '@leather-wallet/ui';
 
-import { SkeletonLoader } from '../ui/components/skeleton-loader/skeleton-loader';
-import { shimmerStyles } from '../ui/shared/shimmer-styles';
+import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
 
 interface AccountTotalBalanceProps {
   btcAddress: string;

src/app/components/account/account-addresses.tsx

@@ -1,10 +1,8 @@
 import { HStack } from 'leather-styles/jsx';
 
+import { BulletSeparator, Caption } from '@leather-wallet/ui';
 import { truncateMiddle } from '@leather-wallet/utils';
 
-import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
-import { Caption } from '@app/ui/components/typography/caption';
-
 import { BitcoinNativeSegwitAccountLoader } from '../loaders/bitcoin-account-loader';
 import { StacksAccountLoader } from '../loaders/stacks-account-loader';
 

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

@@ -2,9 +2,7 @@ import { ReactNode } from 'react';
 
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
-import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
-import { Spinner } from '@app/ui/components/spinner';
-import { Pressable } from '@app/ui/pressable/pressable';
+import { ItemLayout, Pressable, Spinner } from '@leather-wallet/ui';
 
 interface AccountListItemLayoutProps {
   accountAddresses: ReactNode;

src/app/components/account/account-name.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 
 import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
 
-import { shimmerStyles } from '@app/ui/shared/shimmer-styles';
+import { shimmerStyles } from '@leather-wallet/ui';
 
 interface AccountNameLayoutProps extends HTMLStyledProps<'span'> {
   children: React.ReactNode;

src/app/components/balance/btc-balance.tsx

@@ -1,7 +1,6 @@
+import { Caption } from '@leather-wallet/ui';
 import { formatMoney } from '@leather-wallet/utils';
 
-import { Caption } from '@app/ui/components/typography/caption';
-
 import { BitcoinNativeSegwitAccountLoader } from '../loaders/bitcoin-account-loader';
 import { BtcBalanceLoader } from '../loaders/btc-balance-loader';
 

src/app/components/balance/stx-balance.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 
 import { useStxCryptoAssetBalance } from '@leather-wallet/query';
+import { Caption } from '@leather-wallet/ui';
 
 import { stacksValue } from '@app/common/stacks-utils';
-import { Caption } from '@app/ui/components/typography/caption';
 
 interface StxBalanceProps {
   address: string;

src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx

@@ -1,10 +1,10 @@
 import { Flex, HStack, styled } from 'leather-styles/jsx';
 
 import type { Money } from '@leather-wallet/models';
+import { Flag } from '@leather-wallet/ui';
 
 import { formatBalance } from '@app/common/format-balance';
 import { ftDecimals } from '@app/common/stacks-utils';
-import { Flag } from '@app/ui/components/flag/flag';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { LoadingSpinner } from '../loading-spinner';

src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point.tsx

@@ -1,9 +1,10 @@
 import { useNavigate } from 'react-router-dom';
 
+import { BitcoinContractIcon } from '@leather-wallet/ui';
+
 import { RouteUrls } from '@shared/route-urls';
 
 import { useGetBitcoinContractsBalance } from '@app/query/bitcoin/balance/bitcoin-contracts-balance.hooks';
-import { BitcoinContractIcon } from '@app/ui/icons/bitcoin-contract-icon';
 
 import { BitcoinContractEntryPointLayout } from './bitcoin-contract-entry-point-layout';
 

src/app/components/bitcoin-custom-fee/bitcoin-custom-fee-input.tsx

@@ -3,13 +3,13 @@ import { useState } from 'react';
 import { useField } from 'formik';
 import { Stack } from 'leather-styles/jsx';
 
+import { Input } from '@leather-wallet/ui';
 import { createMoney, satToBtc } from '@leather-wallet/utils';
 
 import type { TransferRecipient } from '@shared/models/form.model';
 
 import { useOnMount } from '@app/common/hooks/use-on-mount';
 import { InsufficientFundsError } from '@app/common/transactions/bitcoin/coinselect/local-coin-selection';
-import { Input } from '@app/ui/components/input/input';
 
 import { ErrorLabel } from '../error-label';
 import { BitcoinCustomFeeFiat } from './bitcoin-custom-fee-fiat';

src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx

@@ -6,13 +6,12 @@ import { Stack, styled } from 'leather-styles/jsx';
 import * as yup from 'yup';
 
 import type { BtcFeeType } from '@leather-wallet/models';
+import { Button, Link } from '@leather-wallet/ui';
 import { createMoney } from '@leather-wallet/utils';
 
 import type { TransferRecipient } from '@shared/models/form.model';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { Button } from '@app/ui/components/button/button';
-import { Link } from '@app/ui/components/link/link';
 
 import { OnChooseFeeArgs } from '../bitcoin-fees-list/bitcoin-fees-list';
 import { BitcoinCustomFeeInput } from './bitcoin-custom-fee-input';

src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx

@@ -1,10 +1,9 @@
 import { Circle, CircleProps, Flex } from 'leather-styles/jsx';
 
 import type { BitcoinTx } from '@leather-wallet/models';
+import { ArrowDownIcon, ArrowUpIcon } from '@leather-wallet/ui';
 
 import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils';
-import { ArrowDownIcon } from '@app/ui/icons/arrow-down-icon';
-import { ArrowUpIcon } from '@app/ui/icons/arrow-up-icon';
 
 function TxStatusIcon(props: { address: string; tx: BitcoinTx }) {
   const { address, tx } = props;

src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx

@@ -5,6 +5,7 @@ import { HStack } from 'leather-styles/jsx';
 
 import type { BitcoinTx } from '@leather-wallet/models';
 import { useInscriptionByOutput } from '@leather-wallet/query';
+import { BulletSeparator, Caption } from '@leather-wallet/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 import { analytics } from '@shared/utils/analytics';
@@ -21,8 +22,6 @@ import { IncreaseFeeButton } from '@app/components/stacks-transaction-item/incre
 import { TransactionTitle } from '@app/components/transaction/transaction-title';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
-import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
-import { Caption } from '@app/ui/components/typography/caption';
 
 import { TransactionItemLayout } from '../transaction-item/transaction-item.layout';
 import { BitcoinTransactionIcon } from './bitcoin-transaction-icon';