Release/wednesday ledger

package.json

@@ -319,7 +319,7 @@
     "react-refresh": "0.14.0",
     "schema-inspector": "2.0.2",
     "speed-measure-webpack-plugin": "1.5.0",
-    "storybook": "7.6.10",
+    "storybook": "7.6.12",
     "stream-browserify": "3.0.0",
     "svg-url-loader": "8.0.0",
     "ts-node": "10.9.2",

src/app/common/hooks/analytics/use-track-switch-account.ts

@@ -10,10 +10,7 @@ export function useTrackSwitchAccount() {
 
   return useCallback(
     async (address: string, index: number) => {
-      const accountBalanceCache = queryClient.getQueryData([
-        'get-address-anchored-stx-balance',
-        address,
-      ]);
+      const accountBalanceCache = queryClient.getQueryData(['get-address-stx-balance', address]);
       if (!accountBalanceCache) return;
       try {
         const balances = parseBalanceResponse(accountBalanceCache as any);

src/app/common/hooks/balance/stx/use-stx-balance.ts

@@ -7,49 +7,47 @@ import { baseCurrencyAmountInQuote, subtractMoney } from '@app/common/money/calc
 import { i18nFormatCurrency } from '@app/common/money/format-money';
 import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';
 import { createStacksCryptoCurrencyAssetTypeWrapper } from '@app/query/stacks/balance/stacks-ft-balances.utils';
-import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balance/stx-balance.hooks';
-
-import { useStxOutboundValue } from './use-stx-outbound-value';
+import { useCurrentStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks';
+import { useCurrentAccountMempoolTransactionsBalance } from '@app/query/stacks/mempool/mempool.hooks';
 
 export function useStxBalance() {
-  const anchoredBalanceQuery = useCurrentStacksAccountAnchoredBalances();
-  const totalBalance = anchoredBalanceQuery.data?.stx.balance;
-  const unlockedStxBalance = anchoredBalanceQuery.data?.stx.unlockedStx;
+  const stxBalanceQuery = useCurrentStacksAccountBalances();
+  const totalBalance = stxBalanceQuery.data?.stx.balance;
+  const unlockedStxBalance = stxBalanceQuery.data?.stx.unlockedStx;
 
   const stxMarketData = useCryptoCurrencyMarketData('STX');
-  const stxOutboundQuery = useStxOutboundValue();
+  const pendingTxsBalance = useCurrentAccountMempoolTransactionsBalance();
 
   const stxEffectiveBalance = isDefined(totalBalance)
-    ? subtractMoney(totalBalance, stxOutboundQuery.data)
+    ? subtractMoney(totalBalance, pendingTxsBalance)
     : createMoney(0, 'STX');
 
   const stxEffectiveUsdBalance = isDefined(totalBalance)
     ? i18nFormatCurrency(baseCurrencyAmountInQuote(stxEffectiveBalance, stxMarketData))
     : undefined;
 
-  const stxLockedBalance = anchoredBalanceQuery.data?.stx.locked;
+  const stxLockedBalance = stxBalanceQuery.data?.stx.locked;
   const stxUsdLockedBalance = isDefined(stxLockedBalance)
     ? i18nFormatCurrency(baseCurrencyAmountInQuote(stxLockedBalance, stxMarketData))
     : undefined;
 
   return useMemo(() => {
     return {
-      anchoredBalanceQuery,
-      stxOutboundQuery,
-      isLoading: anchoredBalanceQuery.isLoading || stxOutboundQuery.isLoading,
+      stxBalanceQuery,
+      stxOutboundQuery: pendingTxsBalance,
       availableBalance: isDefined(unlockedStxBalance)
-        ? subtractMoney(unlockedStxBalance, stxOutboundQuery.data)
+        ? subtractMoney(unlockedStxBalance, pendingTxsBalance)
         : createMoney(0, 'STX'),
       stxEffectiveBalance: createStacksCryptoCurrencyAssetTypeWrapper(stxEffectiveBalance.amount),
       stxEffectiveUsdBalance,
       stxLockedBalance,
       stxUsdLockedBalance,
     };
   }, [
-    anchoredBalanceQuery,
-    stxOutboundQuery,
+    stxBalanceQuery,
+    pendingTxsBalance,
     unlockedStxBalance,
-    stxEffectiveBalance,
+    stxEffectiveBalance.amount,
     stxEffectiveUsdBalance,
     stxLockedBalance,
     stxUsdLockedBalance,

src/app/common/hooks/balance/use-total-balance.tsx

@@ -5,7 +5,7 @@ import { createMoney } from '@shared/models/money.model';
 import { baseCurrencyAmountInQuote } from '@app/common/money/calculate-money';
 import { i18nFormatCurrency } from '@app/common/money/format-money';
 import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';
-import { useAnchoredStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks';
+import { useStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks';
 
 import { useBtcAssetBalance } from './btc/use-btc-balance';
 
@@ -20,7 +20,7 @@ export function useTotalBalance({ btcAddress, stxAddress }: UseTotalBalanceArgs)
   const stxMarketData = useCryptoCurrencyMarketData('STX');
 
   // get stx balance
-  const { data: balances, isLoading } = useAnchoredStacksAccountBalances(stxAddress);
+  const { data: balances, isLoading } = useStacksAccountBalances(stxAddress);
   const stxBalance = balances ? balances.stx.balance : createMoney(0, 'STX');
 
   // get btc balance

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

@@ -9,7 +9,7 @@ import { queryClient } from '@app/common/persistence';
 import { partiallyClearLocalStorage } from '@app/common/store-utils';
 import { useAppDispatch } from '@app/store';
 import { createNewAccount, stxChainActions } from '@app/store/chains/stx-chain.actions';
-import { useBitcoinClient, useStacksClientAnchored } from '@app/store/common/api-clients.hooks';
+import { useBitcoinClient, useStacksClient } from '@app/store/common/api-clients.hooks';
 import { inMemoryKeyActions } from '@app/store/in-memory-key/in-memory-key.actions';
 import { bitcoinKeysSlice } from '@app/store/ledger/bitcoin/bitcoin-key.slice';
 import { stacksKeysSlice } from '@app/store/ledger/stacks/stacks-key.slice';
@@ -23,7 +23,7 @@ export function useKeyActions() {
   const analytics = useAnalytics();
   const dispatch = useAppDispatch();
   const defaultKeyDetails = useCurrentKeyDetails();
-  const stxClient = useStacksClientAnchored();
+  const stxClient = useStacksClient();
   const btcClient = useBitcoinClient();
 
   return useMemo(

src/app/common/hooks/use-submit-stx-transaction.ts

@@ -5,6 +5,7 @@ import { bytesToHex } from '@stacks/common';
 import { StacksTransaction, broadcastTransaction } from '@stacks/transactions';
 
 import { logger } from '@shared/logger';
+import { isError } from '@shared/utils';
 
 import { getErrorMessage } from '@app/common/get-error-message';
 import { useRefreshAllAccountData } from '@app/common/hooks/account/use-refresh-all-account-data';
@@ -59,7 +60,7 @@ export function useSubmitTransactionCallback({ loadingKey }: UseSubmitTransactio
           }
         } catch (error) {
           logger.error('Transaction callback', { error });
-          onError(error instanceof Error ? error : { name: '', message: '' });
+          onError(isError(error) ? error : { name: '', message: '' });
           setIsIdle();
         }
       },

src/app/common/transactions/stacks/transaction.utils.ts

@@ -25,10 +25,7 @@ import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 export const statusFromTx = (tx: StacksTx): StacksTxStatus => {
   const { tx_status } = tx;
   if (tx_status === 'pending') return 'pending';
-  if (tx_status === 'success')
-    return 'is_unanchored' in tx && tx.is_unanchored
-      ? 'success_microblock'
-      : 'success_anchor_block';
+  if (tx_status === 'success') return 'success';
   return 'failed';
 };
 

src/app/common/utils/safe-await.ts

@@ -1,4 +1,5 @@
 // TypeScript port of https://github.com/DavidWells/safe-await/
+import { isError } from '@shared/utils';
 
 // Native Error types https://mzl.la/2Veh3TR
 const nativeExceptions = [
@@ -19,7 +20,7 @@ function throwNative(error: Error) {
 export async function safeAwait<T>(promise: Promise<T>, finallyFn?: () => void) {
   return promise
     .then(data => {
-      if (data instanceof Error) {
+      if (isError(data)) {
         throwNative(data);
         return [data] as readonly [Error];
       }

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

@@ -13,5 +13,9 @@ export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTota
 
   if (!totalBalance) return null;
 
-  return <styled.span textStyle="label.01">{totalBalance.totalUsdBalance}</styled.span>;
+  return (
+    <styled.span fontWeight={500} textStyle="label.02">
+      {totalBalance.totalUsdBalance}
+    </styled.span>
+  );
 });

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

@@ -0,0 +1,29 @@
+import { HStack } from 'leather-styles/jsx';
+
+import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
+import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
+import { Caption } from '@app/ui/components/typography/caption';
+import { truncateMiddle } from '@app/ui/utils/truncate-middle';
+
+import { StacksAccountLoader } from '../loaders/stacks-account-loader';
+import { BitcoinNativeSegwitAccountLoader } from './bitcoin-account-loader';
+
+interface AccountAddressesProps {
+  index: number;
+}
+export function AcccountAddresses({ index }: AccountAddressesProps) {
+  const isBreakpointSm = useViewportMinWidth('sm');
+
+  return (
+    <HStack alignItems="center" gap="space.02" whiteSpace="nowrap">
+      <BulletSeparator>
+        <StacksAccountLoader index={index}>
+          {account => <Caption>{truncateMiddle(account.address, isBreakpointSm ? 4 : 3)}</Caption>}
+        </StacksAccountLoader>
+        <BitcoinNativeSegwitAccountLoader index={index}>
+          {signer => <Caption>{truncateMiddle(signer.address, 5)}</Caption>}
+        </BitcoinNativeSegwitAccountLoader>
+      </BulletSeparator>
+    </HStack>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+
+import { ItemInteractive } from '@app/ui/components/item/item-interactive';
+import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { Spinner } from '@app/ui/components/spinner';
+
+interface AccountListItemLayoutProps {
+  accountAddresses: ReactNode;
+  accountName: ReactNode;
+  avatar: ReactNode;
+  balanceLabel: ReactNode;
+  index: number;
+  isLoading: boolean;
+  isSelected: boolean;
+  onSelectAccount(): void;
+}
+export function AccountListItemLayout(props: AccountListItemLayoutProps) {
+  const {
+    accountAddresses,
+    accountName,
+    avatar,
+    balanceLabel,
+    index,
+    isLoading,
+    isSelected,
+    onSelectAccount,
+  } = props;
+
+  return (
+    <ItemInteractive
+      data-testid={SettingsSelectors.SwitchAccountItemIndex.replace('[index]', `${index}`)}
+      key={`account-${index}`}
+      onClick={onSelectAccount}
+    >
+      <ItemLayout
+        isSelected={isSelected}
+        flagImg={avatar}
+        titleLeft={accountName}
+        titleRight={
+          isLoading ? (
+            <Spinner
+              color="accent.text-subdued"
+              position="absolute"
+              right={0}
+              size="18px"
+              top="calc(50% - 8px)"
+            />
+          ) : (
+            balanceLabel
+          )
+        }
+        captionLeft={accountAddresses}
+      />
+    </ItemInteractive>
+  );
+}

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

@@ -6,5 +6,7 @@ interface AccountNameLayoutProps {
   children: React.ReactNode;
 }
 export const AccountNameLayout = memo(({ children }: AccountNameLayoutProps) => (
-  <styled.p textStyle="label.01">{children}</styled.p>
+  <styled.span fontWeight={500} textStyle="label.02">
+    {children}
+  </styled.span>
 ));