release: overconfident-bison

package.json

@@ -42,7 +42,10 @@
     "storybook-docs": "storybook dev --docs",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
-    "preinstall": "npx only-allow pnpm"
+    "preinstall": "npx only-allow pnpm",
+    "mono:link": "node scripts/mono-link.js && pnpm install",
+    "mono:unlink": "node scripts/mono-unlink.js && pnpm install",
+    "mono:link:ui": "node scripts/mono-link-ui.js && pnpm install"
   },
   "license": "MIT",
   "main": "index.js",
@@ -134,15 +137,15 @@
     "@coinbase/cbpay-js": "2.1.0",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather.io/bitcoin": "0.11.1",
+    "@leather.io/bitcoin": "0.11.2",
     "@leather.io/constants": "0.9.1",
-    "@leather.io/crypto": "1.4.1",
-    "@leather.io/models": "0.12.1",
-    "@leather.io/query": "2.6.1",
-    "@leather.io/stacks": "1.0.1",
-    "@leather.io/tokens": "0.8.1",
-    "@leather.io/ui": "1.13.0",
-    "@leather.io/utils": "0.13.1",
+    "@leather.io/crypto": "1.4.2",
+    "@leather.io/models": "0.13.0",
+    "@leather.io/query": "2.7.0",
+    "@leather.io/stacks": "1.0.2",
+    "@leather.io/tokens": "0.9.0",
+    "@leather.io/ui": "1.14.3",
+    "@leather.io/utils": "0.13.2",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.4.0",
     "@noble/secp256k1": "2.1.0",
@@ -252,9 +255,9 @@
     "@btckit/types": "0.0.19",
     "@chromatic-com/storybook": "1.2.23",
     "@leather.io/eslint-config": "0.7.0",
-    "@leather.io/panda-preset": "0.3.7",
+    "@leather.io/panda-preset": "0.3.8",
     "@leather.io/prettier-config": "0.6.0",
-    "@leather.io/rpc": "2.1.5",
+    "@leather.io/rpc": "2.1.6",
     "@ls-lint/ls-lint": "2.2.3",
     "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.40.1",
@@ -278,6 +281,7 @@
     "@storybook/react-webpack5": "8.2.4",
     "@storybook/test": "8.2.4",
     "@storybook/theming": "8.2.4",
+    "@svgr/webpack": "8.1.0",
     "@types/argon2-browser": "1.18.4",
     "@types/bn.js": "5.1.5",
     "@types/chrome": "0.0.260",
@@ -340,7 +344,6 @@
     "speed-measure-webpack-plugin": "1.5.0",
     "storybook": "8.2.4",
     "stream-browserify": "3.0.0",
-    "svg-url-loader": "8.0.0",
     "ts-node": "10.9.2",
     "ts-unused-exports": "10.0.1",
     "tsconfig-paths-webpack-plugin": "4.1.0",

panda.config.ts

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

scripts/mono-link-ui.js

@@ -0,0 +1,53 @@
+import fs from 'fs/promises';
+
+const filePath = './package.json';
+const backupFilePath = './package-original.json';
+
+async function modifyUiPackageJson() {
+  try {
+    // Check if a backup already exists
+    try {
+      await fs.access(backupFilePath);
+      console.log(`Backup file already exists: ${backupFilePath}`);
+    } catch {
+      await fs.copyFile(filePath, backupFilePath);
+      console.log(`Backup created: ${backupFilePath}`);
+    }
+
+    // Read and parse the package.json file
+    const data = await fs.readFile(filePath, 'utf-8');
+    let packageJson = JSON.parse(data);
+
+    // Modify the @leather.io/ui dependency
+    packageJson.dependencies['@leather.io/ui'] = 'file:../mono/packages/ui';
+
+    // Ensure pnpm and pnpm.overrides are initialized
+    if (!packageJson.pnpm) {
+      packageJson.pnpm = {};
+    }
+    if (!packageJson.pnpm.overrides) {
+      packageJson.pnpm.overrides = {};
+    }
+
+    // Add the specified overrides
+    const overrides = {
+      '@leather.io/rpc': 'file:../mono/packages/rpc',
+      '@leather.io/constants': 'file:../mono/packages/constants',
+      '@leather.io/models': 'file:../mono/packages/models',
+      '@leather.io/tokens': 'file:../mono/packages/tokens',
+      '@leather.io/utils': 'file:../mono/packages/utils'
+    };
+
+    packageJson.pnpm.overrides = { ...packageJson.pnpm.overrides, ...overrides };
+
+    // Write the modified package.json back to the file
+    await fs.writeFile(filePath, JSON.stringify(packageJson, null, 2) + '\n', 'utf-8');
+    console.log(`Successfully updated ${filePath}`);
+
+  } catch (err) {
+    console.error(`Error: ${err}`);
+  }
+}
+
+// Execute the function
+modifyUiPackageJson();

scripts/mono-link.js

@@ -0,0 +1,64 @@
+import fs from 'fs/promises';
+
+const filePath = './package.json';
+const backupFilePath = './package-original.json';
+
+async function modifyPackageJson() {
+  try {
+    try {
+      await fs.access(backupFilePath);
+      console.log(`Backup file already exists: ${backupFilePath}`);
+    } catch {
+      await fs.copyFile(filePath, backupFilePath);
+      console.log(`Backup created: ${backupFilePath}`);
+    }
+
+    const data = await fs.readFile(filePath, 'utf-8');
+    let packageJson = JSON.parse(data);
+
+    const relativePaths = [
+      '@leather.io/bitcoin',
+      '@leather.io/constants',
+      '@leather.io/crypto',
+      '@leather.io/models',
+      '@leather.io/query',
+      '@leather.io/tokens',
+      '@leather.io/utils',
+      '@leather.io/stacks',
+    ];
+
+    const devRelativePaths = ['@leather.io/panda-preset', '@leather.io/rpc'];
+
+    relativePaths.forEach(dep => {
+      if (packageJson.dependencies[dep]) {
+        packageJson.dependencies[dep] = `file:../mono/packages/${dep.split('/').pop()}`;
+      }
+    });
+
+    devRelativePaths.forEach(devDep => {
+      if (packageJson.devDependencies[devDep]) {
+        packageJson.devDependencies[devDep] = `file:../mono/packages/${devDep.split('/').pop()}`;
+      }
+    });
+
+    if (!packageJson.pnpm) {
+      packageJson.pnpm = {};
+    }
+    if (!packageJson.pnpm.overrides) {
+      packageJson.pnpm.overrides = {};
+    }
+
+    [...relativePaths, ...devRelativePaths].forEach(dep => {
+      if (packageJson.dependencies[dep] || packageJson.devDependencies[dep]) {
+        packageJson.pnpm.overrides[dep] = `file:../mono/packages/${dep.split('/').pop()}`;
+      }
+    });
+
+    await fs.writeFile(filePath, JSON.stringify(packageJson, null, 2) + '\n', 'utf-8');
+    console.log(`Successfully updated ${filePath}`);
+  } catch (err) {
+    console.error(`Error: ${err}`);
+  }
+}
+
+modifyPackageJson();

scripts/mono-unlink.js

@@ -0,0 +1,25 @@
+import fs from 'fs/promises';
+
+const filePath = './package.json';
+const backupFilePath = './package-original.json';
+
+async function revertPackageJson() {
+  try {
+    try {
+      await fs.access(backupFilePath);
+    } catch {
+      throw new Error(`Backup file not found: ${backupFilePath}`);
+    }
+
+    await fs.copyFile(backupFilePath, filePath);
+    console.log(`Successfully reverted ${filePath}`);
+
+    await fs.unlink(backupFilePath);
+    console.log(`Backup file removed: ${backupFilePath}`);
+
+  } catch (err) {
+    console.error(`Error: ${err}`);
+  }
+}
+
+revertPackageJson();

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

@@ -7,8 +7,9 @@ import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils';
 
 function TxStatusIcon(props: { address: string; tx: BitcoinTx }) {
   const { address, tx } = props;
-  if (isBitcoinTxInbound(address, tx)) return <ArrowDownIcon variant="small" />;
-  return <ArrowUpIcon variant="small" />;
+  if (isBitcoinTxInbound(address, tx))
+    return <ArrowDownIcon color="ink.background-primary" variant="small" />;
+  return <ArrowUpIcon color="ink.background-primary" variant="small" />;
 }
 
 interface TransactionIconProps extends CircleProps {

src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx

@@ -4,17 +4,17 @@ import GenericError from '@assets/images/generic-error.png';
 import { Flex, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
-import { Button, Dialog, DialogHeader } from '@leather.io/ui';
+import { Button, Sheet, SheetHeader } from '@leather.io/ui';
 
-export function BroadcastErrorDialog() {
+export function BroadcastErrorSheet() {
   const navigate = useNavigate();
   const location = useLocation();
   const message = get(location.state, 'message', '');
 
   return (
-    <Dialog
+    <Sheet
       isShowing
-      header={<DialogHeader />}
+      header={<SheetHeader />}
       onClose={() => navigate('..')}
       footer={
         <Button fullWidth onClick={() => navigate('..')} mt="space.05">
@@ -40,6 +40,6 @@ export function BroadcastErrorDialog() {
           {message && <>because of the error: {message.toLowerCase()}</>}
         </styled.span>
       </Flex>
-    </Dialog>
+    </Sheet>
   );
 }

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

@@ -1,7 +1,7 @@
 import { BoxProps } from 'leather-styles/jsx';
 
 import { StacksTx } from '@leather.io/models';
-import { DynamicColorCircle, ErrorCircleIcon, ListIcon, StxAvatarIcon } from '@leather.io/ui';
+import { BarsThreeIcon, DynamicColorCircle, ErrorCircleIcon, StxAvatarIcon } from '@leather.io/ui';
 
 import { TransactionIconWrapper } from '../transaction/transaction-icon-wrapper';
 import { TransactionTypeIcon } from '../transaction/transaction-type-icon';
@@ -12,7 +12,9 @@ interface TransactionIconProps extends BoxProps {
 export function StacksTransactionIcon({ transaction, ...rest }: TransactionIconProps) {
   switch (transaction.tx_type) {
     case 'coinbase':
-      return <TransactionIconWrapper icon={<ListIcon />} transaction={transaction} {...rest} />;
+      return (
+        <TransactionIconWrapper icon={<BarsThreeIcon />} transaction={transaction} {...rest} />
+      );
     case 'smart_contract':
       return (
         <DynamicColorCircle value={`${transaction.smart_contract.contract_id}`} {...rest}>

src/app/components/transaction/token-transfer-icon.tsx

@@ -8,7 +8,7 @@ export function TokenTransferIcon(props: { tx: StacksTx }) {
   const currentAccountStxAddress = useCurrentStacksAccountAddress();
   const isSent = tx.sender_address === currentAccountStxAddress;
 
-  if (isSent) return <ArrowUpIcon variant="small" />;
+  if (isSent) return <ArrowUpIcon color="ink.background-primary" variant="small" />;
 
-  return <ArrowDownIcon variant="small" />;
+  return <ArrowDownIcon color="ink.background-primary" variant="small" />;
 }

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

@@ -8,13 +8,13 @@ export function TransactionIcon(props: { tx: StacksTx }) {
 
   switch (tx.tx_type) {
     case 'coinbase':
-      return <PlusIcon variant="small" />;
+      return <PlusIcon color="ink.background-primary" variant="small" />;
     case 'smart_contract':
-      return <CodeIcon variant="small" />;
+      return <CodeIcon color="ink.background-primary" variant="small" />;
     case 'token_transfer':
       return <TokenTransferIcon tx={tx} />;
     case 'contract_call':
-      return <FunctionIcon />;
+      return <FunctionIcon color="ink.background-primary" variant="small" />;
     default:
       return null;
   }

src/app/features/activity-list/components/transaction-list/stacks-transaction/ft-transfer-item.tsx

@@ -45,7 +45,11 @@ export function FtTransferItem({ ftTransfer, parentTx }: FtTransferItemProps) {
     assetMetadata.image_canonical_uri &&
     assetMetadata.name &&
     getSafeImageCanonicalUri(assetMetadata.image_canonical_uri, assetMetadata.name);
-  const icon = isOriginator ? <ArrowUpIcon variant="small" /> : <ArrowDownIcon variant="small" />;
+  const icon = isOriginator ? (
+    <ArrowUpIcon color="ink.background-primary" variant="small" />
+  ) : (
+    <ArrowDownIcon color="ink.background-primary" variant="small" />
+  );
   const title = `${assetMetadata.name || 'Token'} Transfer`;
   const value = `${isOriginator ? '-' : ''}${displayAmount.toFormat()}`;
   const transferIcon = ftImageCanonicalUri ? (

src/app/features/activity-list/components/transaction-list/stacks-transaction/stx-transfer-item.tsx

@@ -19,7 +19,11 @@ export function StxTransferItem({ stxTransfer, parentTx }: StxTransferItemProps)
   const isOriginator = stxTransfer.sender === currentAccount?.address;
 
   const caption = getTxCaption(parentTx.tx) ?? '';
-  const icon = isOriginator ? <ArrowUpIcon variant="small" /> : <ArrowDownIcon variant="small" />;
+  const icon = isOriginator ? (
+    <ArrowUpIcon color="ink.background-primary" variant="small" />
+  ) : (
+    <ArrowDownIcon color="ink.background-primary" variant="small" />
+  );
   const title = 'Stacks Token Transfer';
   const value = `${isOriginator ? '-' : ''}${stacksValue({
     value: stxTransfer.amount,

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

@@ -2,7 +2,6 @@ import { Stack } from 'leather-styles/jsx';
 
 import { BtcAvatarIcon, StxAvatarIcon } from '@leather.io/ui';
 
-import { useWalletType } from '@app/common/use-wallet-type';
 import {
   BitcoinNativeSegwitAccountLoader,
   BitcoinTaprootAccountLoader,
@@ -35,7 +34,6 @@ interface AssetListProps {
   variant?: AssetListVariant;
 }
 export function AssetList({ onSelectAsset, variant = 'read-only' }: AssetListProps) {
-  const { whenWallet } = useWalletType();
   const currentAccount = useCurrentStacksAccount();
   const isLedger = useHasLedgerKeys();
 
@@ -117,14 +115,11 @@ export function AssetList({ onSelectAsset, variant = 'read-only' }: AssetListPro
           <BitcoinTaprootAccountLoader current>
             {taprootAccount => (
               <>
-                {whenWallet({
-                  software: (
-                    <Brc20TokensLoader>
-                      {tokens => <Brc20TokenAssetList tokens={tokens} variant={variant} />}
-                    </Brc20TokensLoader>
-                  ),
-                  ledger: null,
-                })}
+                {isReadOnly && (
+                  <Brc20TokensLoader>
+                    {tokens => <Brc20TokenAssetList tokens={tokens} variant={variant} />}
+                  </Brc20TokensLoader>
+                )}
                 {isReadOnly && (
                   <>
                     <Src20TokensLoader address={nativeSegwitAccount.address}>

src/app/features/collectibles/components/_collectible-types/collectible-audio.tsx

@@ -12,7 +12,7 @@ export function CollectibleAudio({ icon, ...props }: CollectibleAudioProps) {
   return (
     <CollectibleItemLayout collectibleTypeIcon={icon} {...props}>
       <CollectiblePlaceholderLayout>
-        <HeadsetIcon width="xl" />
+        <HeadsetIcon height={36} width={36} />
       </CollectiblePlaceholderLayout>
     </CollectibleItemLayout>
   );

src/app/features/collectibles/components/add-collectible.tsx

@@ -26,7 +26,7 @@ export function AddCollectible() {
       subtitle="Collectible"
       title="Add new"
     >
-      <PlusIcon height="auto" width="xl" />
+      <PlusIcon height={36} width={36} />
     </CollectibleItemLayout>
   );
 }