Merge pull request #5687 from leather-io/release/wednesday

Release/wednesday

.storybook/main.ts

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import path from 'path';
+import remarkGfm from 'remark-gfm';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import Webpack from 'webpack';
 
@@ -13,7 +14,11 @@ const config: StorybookConfig = {
       name: '@storybook/addon-docs',
       options: {
         csfPluginOptions: null,
-        mdxPluginOptions: {},
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
         transcludeMarkdown: true,
       },
     },
@@ -51,7 +56,6 @@ const config: StorybookConfig = {
         ],
       },
     },
-    '@storybook/addon-mdx-gfm',
     '@storybook/addon-webpack5-compiler-swc',
     '@chromatic-com/storybook',
   ],

.storybook/preview.ts

@@ -5,7 +5,8 @@ import { customViewports } from './viewports';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    // Deprecated: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function
+    // actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: {
       default: 'leather-light-mode',
       values: [

package.json

@@ -134,14 +134,14 @@
     "@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.8.6",
-    "@leather.io/constants": "0.8.1",
-    "@leather.io/crypto": "1.0.3",
-    "@leather.io/models": "0.10.1",
-    "@leather.io/query": "0.11.2",
-    "@leather.io/tokens": "0.6.1",
-    "@leather.io/ui": "1.6.3",
-    "@leather.io/utils": "0.10.1",
+    "@leather.io/bitcoin": "0.9.1",
+    "@leather.io/constants": "0.8.2",
+    "@leather.io/crypto": "1.0.4",
+    "@leather.io/models": "0.10.2",
+    "@leather.io/query": "2.0.1",
+    "@leather.io/tokens": "0.7.0",
+    "@leather.io/ui": "1.8.0",
+    "@leather.io/utils": "0.10.2",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.4.0",
     "@noble/secp256k1": "2.1.0",
@@ -230,6 +230,7 @@
     "react-router-dom": "6.23.1",
     "react-virtuoso": "4.7.1",
     "redux-persist": "6.0.0",
+    "remark-gfm": "4.0.0",
     "rxjs": "7.8.1",
     "style-loader": "3.3.4",
     "ts-debounce": "4.0.0",
@@ -248,10 +249,10 @@
     "@actions/core": "1.10.1",
     "@btckit/types": "0.0.19",
     "@chromatic-com/storybook": "1.2.23",
-    "@leather.io/eslint-config": "0.6.0",
-    "@leather.io/panda-preset": "0.3.0",
+    "@leather.io/eslint-config": "0.6.1",
+    "@leather.io/panda-preset": "0.3.4",
     "@leather.io/prettier-config": "0.5.0",
-    "@leather.io/rpc": "2.0.0",
+    "@leather.io/rpc": "2.0.2",
     "@ls-lint/ls-lint": "2.2.3",
     "@mdx-js/loader": "3.0.0",
     "@pandacss/dev": "0.40.1",
@@ -264,18 +265,17 @@
     "@sentry/webpack-plugin": "2.17.0",
     "@stacks/connect-react": "22.2.0",
     "@stacks/stacks-blockchain-api-types": "7.8.2",
-    "@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.1.4",
-    "@storybook/addon-onboarding": "8.0.1",
+    "@storybook/addon-docs": "8.2.4",
+    "@storybook/addon-essentials": "8.2.4",
+    "@storybook/addon-interactions": "8.2.4",
+    "@storybook/addon-links": "8.2.4",
+    "@storybook/addon-onboarding": "8.2.4",
     "@storybook/addon-webpack5-compiler-swc": "1.0.2",
-    "@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",
+    "@storybook/blocks": "8.2.4",
+    "@storybook/react": "8.2.4",
+    "@storybook/react-webpack5": "8.2.4",
+    "@storybook/test": "8.2.4",
+    "@storybook/theming": "8.2.4",
     "@types/argon2-browser": "1.18.4",
     "@types/bn.js": "5.1.5",
     "@types/chrome": "0.0.260",
@@ -336,7 +336,7 @@
     "react-dev-utils": "12.0.1",
     "schema-inspector": "2.0.2",
     "speed-measure-webpack-plugin": "1.5.0",
-    "storybook": "8.1.4",
+    "storybook": "8.2.4",
     "stream-browserify": "3.0.0",
     "svg-url-loader": "8.0.0",
     "ts-node": "10.9.2",

src/app/common/hooks/account/use-account-names.ts

@@ -1,27 +1,41 @@
-import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
 
-import { useGetBnsNamesOwnedByAddressQuery } from '@leather.io/query';
+import { createGetBnsNamesOwnedByAddressQueryOptions, useStacksClient } from '@leather.io/query';
 import { isUndefined } from '@leather.io/utils';
 
 import { parseIfValidPunycode } from '@app/common/utils';
 import { formatAccountName } from '@app/common/utils/format-account-name';
 import { getAutogeneratedAccountDisplayName } from '@app/common/utils/get-account-display-name';
-import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
+import {
+  useCurrentStacksAccount,
+  useCurrentStacksAccountAddress,
+} from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
+import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
 
 export function useCurrentAccountDisplayName() {
   const account = useCurrentStacksAccount();
-  const names = useGetBnsNamesOwnedByAddressQuery(account?.address ?? '').data?.names;
+  const address = useCurrentStacksAccountAddress();
+  const client = useStacksClient();
+  const { isTestnet } = useCurrentNetworkState();
 
-  return useMemo(() => {
-    if (isUndefined(account?.index) && (!account || typeof account?.index !== 'number'))
-      return 'Account';
-    if (names?.length && names[0]) return parseIfValidPunycode(names[0]);
-    return getAutogeneratedAccountDisplayName(account?.index);
-  }, [account, names]);
+  return useQuery({
+    ...createGetBnsNamesOwnedByAddressQueryOptions({ address, client, isTestnet }),
+    select: resp => {
+      if (isUndefined(account?.index) && (!account || typeof account?.index !== 'number'))
+        return 'Account';
+      const names = resp.names ?? [];
+      if (names.length && names[0]) return parseIfValidPunycode(names[0]);
+      return getAutogeneratedAccountDisplayName(account?.index);
+    },
+  });
 }
 
 export function useAccountDisplayName({ address, index }: { index: number; address: string }) {
-  const query = useGetBnsNamesOwnedByAddressQuery(address, {
+  const client = useStacksClient();
+  const { isTestnet } = useCurrentNetworkState();
+
+  const query = useQuery({
+    ...createGetBnsNamesOwnedByAddressQueryOptions({ address, client, isTestnet }),
     select: resp => {
       const names = resp.names ?? [];
       return formatAccountName(names[0]) || getAutogeneratedAccountDisplayName(index);

src/app/common/hooks/account/use-refresh-all-account-data.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { useAccountMempoolQuery } from '@leather.io/query';
+import { useGetAddressMempoolTransactionsQuery } from '@leather.io/query';
 import { delay } from '@leather.io/utils';
 
 import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
@@ -9,7 +9,7 @@ import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/s
 // to use react-query itself to do this if needed?
 export function useRefreshAllAccountData() {
   const address = useCurrentStacksAccountAddress();
-  const { refetch } = useAccountMempoolQuery(address);
+  const { refetch } = useGetAddressMempoolTransactionsQuery(address);
   return useCallback(
     async (ms?: number) => {
       if (typeof ms === 'number') await delay(ms);

src/app/components/inscription-preview-card/components/inscription-text.tsx

@@ -1,7 +1,7 @@
 import { sanitize } from 'dompurify';
 import { Box } from 'leather-styles/jsx';
 
-import { useInscriptionTextContentQuery } from '@leather.io/query';
+import { useGetInscriptionTextContentQuery } from '@leather.io/query';
 
 import { parseJson } from '@app/components/json';
 import { LoadingSpinner } from '@app/components/loading-spinner';
@@ -10,7 +10,7 @@ interface InscriptionTextProps {
   contentSrc: string;
 }
 export function InscriptionText(props: InscriptionTextProps) {
-  const query = useInscriptionTextContentQuery(props.contentSrc);
+  const query = useGetInscriptionTextContentQuery(props.contentSrc);
 
   if (query.isLoading) return <LoadingSpinner size="16px" />;
 

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

@@ -6,7 +6,7 @@ import uniqby from 'lodash.uniqby';
 import {
   useBitcoinPendingTransactions,
   useGetAccountTransactionsWithTransfersQuery,
-  useGetBitcoinTransactionsByAddressesQuery,
+  useGetBitcoinTransactionsByAddressListQuery,
   useStacksPendingTransactions,
 } from '@leather.io/query';
 
@@ -52,7 +52,7 @@ export function ActivityList() {
   const [
     { isLoading: isLoadingNsBitcoinTransactions, data: nsBitcoinTransactions = [] },
     { isLoading: isLoadingTrBitcoinTransactions, data: trBitcoinTransactions = [] },
-  ] = useGetBitcoinTransactionsByAddressesQuery([nsBitcoinAddress, trBitcoinAddress]);
+  ] = useGetBitcoinTransactionsByAddressListQuery([nsBitcoinAddress, trBitcoinAddress]);
 
   const [{ data: nsPendingTxs = [] }, { data: trPendingTxs = [] }] = useBitcoinPendingTransactions([
     nsBitcoinAddress,

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

@@ -20,6 +20,8 @@ import { RunesAssetList } from '@app/features/asset-list/bitcoin/runes-asset-lis
 import { Src20TokenAssetList } from '@app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list';
 import { Stx20TokenAssetList } from '@app/features/asset-list/stacks/stx20-token-asset-list/stx20-token-asset-list';
 import { StxCryptoAssetItem } from '@app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item';
+import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
+import { useHasLedgerKeys } from '@app/store/ledger/ledger.selectors';
 
 import { ConnectLedgerAssetItemFallback } from './_components/connect-ledger-asset-item-fallback';
 import { BtcCryptoAssetItem } from './bitcoin/btc-crypto-asset-item/btc-crypto-asset-item';
@@ -34,6 +36,8 @@ interface AssetListProps {
 }
 export function AssetList({ onSelectAsset, variant = 'read-only' }: AssetListProps) {
   const { whenWallet } = useWalletType();
+  const currentAccount = useCurrentStacksAccount();
+  const isLedger = useHasLedgerKeys();
 
   const isReadOnly = variant === 'read-only';
 
@@ -65,12 +69,14 @@ export function AssetList({ onSelectAsset, variant = 'read-only' }: AssetListPro
 
       <CurrentStacksAccountLoader
         fallback={
-          <ConnectLedgerAssetItemFallback
-            chain="stacks"
-            icon={<StxAvatarIcon />}
-            symbol="STX"
-            variant={variant}
-          />
+          !currentAccount && !isLedger ? null : (
+            <ConnectLedgerAssetItemFallback
+              chain="stacks"
+              icon={<StxAvatarIcon />}
+              symbol="STX"
+              variant={variant}
+            />
+          )
         }
       >
         {account => (

src/app/features/collectibles/components/bitcoin/inscription-text.tsx

@@ -1,4 +1,4 @@
-import { useInscriptionTextContentQuery } from '@leather.io/query';
+import { useGetInscriptionTextContentQuery } from '@leather.io/query';
 import { OrdinalAvatarIcon } from '@leather.io/ui';
 
 import { parseJson } from '@app/components/json';
@@ -17,7 +17,7 @@ export function InscriptionText({
   onClickCallToAction,
   onClickSend,
 }: InscriptionTextProps) {
-  const query = useInscriptionTextContentQuery(contentSrc);
+  const query = useGetInscriptionTextContentQuery(contentSrc);
 
   if (query.isLoading || query.isError) return null;
 

src/app/features/collectibles/hooks/use-is-fetching-collectibles.ts

@@ -1,6 +1,6 @@
 import { useIsFetching } from '@tanstack/react-query';
 
-import { QueryPrefixes } from '@leather.io/query';
+import { BitcoinQueryPrefixes, StacksQueryPrefixes } from '@leather.io/query';
 import { sumNumbers } from '@leather.io/utils';
 
 function areAnyQueriesFetching(...args: number[]) {
@@ -9,17 +9,17 @@ function areAnyQueriesFetching(...args: number[]) {
 
 export function useIsFetchingCollectiblesRelatedQuery() {
   // Ordinal inscriptions
-  const n1 = useIsFetching({ queryKey: [QueryPrefixes.TaprootAddressUtxos] });
-  const n2 = useIsFetching({ queryKey: [QueryPrefixes.InscriptionsByAddress] });
-  const n3 = useIsFetching({ queryKey: [QueryPrefixes.InscriptionMetadata] });
-  const n4 = useIsFetching({ queryKey: [QueryPrefixes.OrdinalTextContent] });
-  const n5 = useIsFetching({ queryKey: [QueryPrefixes.GetInscriptions] });
+  const n1 = useIsFetching({ queryKey: [BitcoinQueryPrefixes.GetTaprootUtxosByAddress] });
+  const n2 = useIsFetching({ queryKey: [BitcoinQueryPrefixes.GetInscriptionsByAddress] });
+  const n3 = useIsFetching({ queryKey: [BitcoinQueryPrefixes.GetInscription] });
+  const n4 = useIsFetching({ queryKey: [BitcoinQueryPrefixes.GetInscriptionTextContent] });
+  const n5 = useIsFetching({ queryKey: [BitcoinQueryPrefixes.GetInscriptions] });
 
   // BNS
-  const n6 = useIsFetching({ queryKey: [QueryPrefixes.BnsNamesByAddress] });
+  const n6 = useIsFetching({ queryKey: [StacksQueryPrefixes.GetBnsNamesByAddress] });
 
   // NFTs
-  const n7 = useIsFetching({ queryKey: [QueryPrefixes.GetNftMetadata] });
+  const n7 = useIsFetching({ queryKey: [StacksQueryPrefixes.GetNftMetadata] });
 
   return areAnyQueriesFetching(n1, n2, n3, n4, n5, n6, n7);
 }

src/app/features/container/utils/get-popup-header.ts

@@ -1,6 +1,3 @@
-/**
- * POPUP header logic notes here -> https://github.com/leather-io/extension/issues/4371#issuecomment-1919114939
- */
 import { RouteUrls } from '@shared/route-urls';
 
 export function isRpcRoute(pathname: RouteUrls) {
@@ -24,11 +21,14 @@ export function isRpcRoute(pathname: RouteUrls) {
 
 export function showAccountInfo(pathname: RouteUrls) {
   switch (pathname) {
+    case RouteUrls.PsbtRequest:
     case RouteUrls.TransactionRequest:
     case RouteUrls.ProfileUpdateRequest:
     case RouteUrls.RpcSendTransfer:
     case RouteUrls.RpcSignPsbt:
     case RouteUrls.RpcSignBip322Message:
+    case RouteUrls.SignatureRequest:
+    case RouteUrls.RpcStacksSignature:
       return true;
     default:
       return false;
@@ -39,20 +39,25 @@ export function showBalanceInfo(pathname: RouteUrls) {
   switch (pathname) {
     case RouteUrls.ProfileUpdateRequest:
     case RouteUrls.RpcSendTransfer:
-      return true;
+    case RouteUrls.PsbtRequest:
+    case RouteUrls.RpcSignBip322Message:
+    case RouteUrls.RpcStacksSignature:
     case RouteUrls.TransactionRequest:
+      return true;
     default:
       return false;
   }
 }
 
 export function getDisplayAddresssBalanceOf(pathname: RouteUrls) {
-  //  TODO it's unclear when to show ALL or STX balance here
   switch (pathname) {
-    case RouteUrls.TransactionRequest:
     case RouteUrls.ProfileUpdateRequest:
     case RouteUrls.RpcSendTransfer:
+    case RouteUrls.PsbtRequest:
+    case RouteUrls.RpcSignBip322Message:
       return 'all';
+    case RouteUrls.RpcStacksSignature:
+    case RouteUrls.TransactionRequest:
     default:
       return 'stx';
   }

src/app/features/current-account/current-account-avatar.tsx

@@ -11,7 +11,7 @@ interface CurrentAccountAvatar extends CircleProps {
 }
 export const CurrentAccountAvatar = memo(({ toggleSwitchAccount }: CurrentAccountAvatar) => {
   const stacksAccount = useCurrentStacksAccount();
-  const name = useCurrentAccountDisplayName();
+  const { data: name = 'Account' } = useCurrentAccountDisplayName();
   if (!stacksAccount) return null;
 
   return (

src/app/features/current-account/current-account-name.tsx

@@ -21,7 +21,7 @@ function AccountNameTitle({ children, ...props }: HasChildren & BoxProps) {
 
 const AccountNameSuspense = memo((props: BoxProps) => {
   const currentAccount = useCurrentStacksAccount();
-  const name = useCurrentAccountDisplayName();
+  const { data: name = 'Account' } = useCurrentAccountDisplayName();
   if (!currentAccount || typeof currentAccount.index === 'undefined') return null;
   // FIXME: The name is truncated here with JS but we could just use CSS to do this
   const nameCharLimit = 18;
@@ -35,7 +35,7 @@ const AccountNameSuspense = memo((props: BoxProps) => {
 });
 
 export function CurrentAccountName() {
-  const defaultName = useCurrentAccountDisplayName();
+  const { data: defaultName = 'Account' } = useCurrentAccountDisplayName();
   const fallback = <AccountNameTitle>{defaultName}</AccountNameTitle>;
   return (
     <Suspense fallback={fallback}>