Merge pull request #5047 from leather-wallet/release/friday-brc-20-fix

Release/friday brc 20 fix

package.json

@@ -132,7 +132,7 @@
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather-wallet/tokens": "0.0.8",
+    "@leather-wallet/tokens": "0.0.10",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",

src/app/components/crypto-assets/choose-crypto-asset/choose-asset-container.tsx

@@ -9,8 +9,8 @@ export function ChooseAssetContainer({ children }: HasChildren) {
       <Flex
         borderRadius={['unset', 'lg']}
         height="fit-content"
-        maxWidth={['100%', 'centeredPageFullWidth']}
-        minWidth={['100%', 'centeredPageFullWidth']}
+        maxWidth={['100%', 'pageWidth']}
+        minWidth={['100%', 'pageWidth']}
         background="ink.background-primary"
       >
         {children}

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 
-import { styled } from 'leather-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-balance.model';
 
+import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { ItemInteractive } from '@app/ui/components/item/item-interactive';
 import { ItemLayout } from '@app/ui/components/item/item.layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
@@ -57,10 +58,14 @@ export function CryptoCurrencyAssetItemLayout({
         }
         captionRight={
           !rightElement && (
-            <>
-              <Caption>{balance.amount.toNumber() > 0 && address ? usdBalance : null}</Caption>
-              {additionalUsdBalanceInfo}
-            </>
+            <Caption>
+              <Flex alignItems="center" gap="space.02" color="inherit">
+                <BulletSeparator>
+                  <Caption>{balance.amount.toNumber() > 0 && address ? usdBalance : null}</Caption>
+                  {additionalUsdBalanceInfo}
+                </BulletSeparator>
+              </Flex>
+            </Caption>
           )
         }
       />

src/app/debug.ts

@@ -40,6 +40,7 @@ const debug = {
   },
   clearChromeStorage() {
     chrome.storage.local.clear();
+    chrome.storage.session.clear();
   },
 };
 

src/app/features/add-network/add-network.tsx

@@ -205,7 +205,7 @@ export function AddNetwork() {
           <form onSubmit={handleSubmit}>
             <Stack
               gap="space.05"
-              maxWidth="centeredPageFullWidth"
+              maxWidth="pageWidth"
               px={['space.05', 'space.04']}
               textAlign={['left', 'center']}
             >

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

@@ -19,7 +19,8 @@ import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-br
 import { AddStacksLedgerKeysItem } from './components/add-stacks-ledger-keys-item';
 import { BitcoinFungibleTokenAssetList } from './components/bitcoin-fungible-tokens-asset-list';
 import { ConnectLedgerAssetBtn } from './components/connect-ledger-asset-button';
-import { StacksAssetList } from './components/stacks-asset-list';
+import { StacksBalanceListItem } from './components/stacks-balance-list-item';
+import { StacksFungibleTokenAssetList } from './components/stacks-fungible-token-asset-list';
 
 export function AssetsList() {
   const hasBitcoinLedgerKeys = useHasBitcoinLedgerKeychain();
@@ -62,7 +63,12 @@ export function AssetsList() {
         })}
 
       <CurrentStacksAccountLoader fallback={<AddStacksLedgerKeysItem />}>
-        {account => <StacksAssetList account={account} />}
+        {account => (
+          <>
+            <StacksBalanceListItem address={account.address} />
+            <StacksFungibleTokenAssetList address={account.address} />
+          </>
+        )}
       </CurrentStacksAccountLoader>
 
       {whenWallet({

src/app/features/asset-list/components/stacks-balance-list-item.layout.stories.tsx

@@ -0,0 +1,64 @@
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { Meta, StoryObj } from '@storybook/react';
+import BigNumber from 'bignumber.js';
+
+import { StacksBalanceListItemLayout } from './stacks-balance-list-item.layout';
+
+const meta: Meta<typeof StacksBalanceListItemLayout> = {
+  component: StacksBalanceListItemLayout,
+  tags: ['autodocs'],
+  title: 'Feature/StacksBalanceListItem',
+  argTypes: {},
+  parameters: {},
+  decorators: [
+    Story => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StacksBalanceListItemLayout>;
+
+const symbol = 'STX';
+
+export const StacksBalanceItem: Story = {
+  args: {
+    address: 'ST1PQHQKV0YX2K1Z0V2VQZGZGZGZGZGZGZGZGZGZG',
+    stxEffectiveBalance: {
+      balance: { decimals: 8, amount: new BigNumber(100000000000), symbol },
+      blockchain: 'stacks',
+      type: 'crypto-currency',
+      asset: {
+        decimals: 8,
+        hasMemo: true,
+        name: 'Stacks',
+        symbol,
+      } as const,
+    },
+    stxEffectiveUsdBalance: '$100,000',
+  },
+};
+
+export const StacksBalanceItemWithLockedBalance: Story = {
+  args: {
+    address: 'ST1PQHQKV0YX2K1Z0V2VQZGZGZGZGZGZGZGZGZGZG',
+    stxEffectiveBalance: {
+      balance: { decimals: 8, amount: new BigNumber(100000000000), symbol },
+      blockchain: 'stacks',
+      type: 'crypto-currency',
+      asset: {
+        decimals: 8,
+        hasMemo: true,
+        name: 'Stacks',
+        symbol,
+      } as const,
+    },
+    stxEffectiveUsdBalance: '$100,000',
+    stxUsdLockedBalance: '$1,000',
+    stxLockedBalance: { decimals: 8, amount: new BigNumber(1000000000), symbol },
+  },
+};

src/app/features/asset-list/components/stacks-balance-list-item.layout.tsx

@@ -0,0 +1,49 @@
+import { styled } from 'leather-styles/jsx';
+
+import type { StacksCryptoCurrencyAssetBalance } from '@shared/models/crypto-asset-balance.model';
+import type { Money } from '@shared/models/money.model';
+
+import { ftDecimals } from '@app/common/stacks-utils';
+import { CryptoCurrencyAssetItemLayout } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
+import { BulletOperator } from '@app/ui/components/bullet-separator/bullet-separator';
+import { Caption } from '@app/ui/components/typography/caption';
+
+interface StacksBalanceListItemLayoutProps {
+  address: string;
+  stxEffectiveBalance: StacksCryptoCurrencyAssetBalance;
+  stxEffectiveUsdBalance?: string;
+  stxLockedBalance?: Money;
+  stxUsdLockedBalance?: string;
+}
+export function StacksBalanceListItemLayout(props: StacksBalanceListItemLayoutProps) {
+  const {
+    address,
+    stxEffectiveBalance,
+    stxEffectiveUsdBalance,
+    stxLockedBalance,
+    stxUsdLockedBalance,
+  } = props;
+
+  const stxAdditionalBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
+    <styled.span>
+      <BulletOperator ml="space.01" mr="space.02" />
+      {ftDecimals(stxLockedBalance.amount, stxLockedBalance.decimals || 0)} locked
+    </styled.span>
+  ) : undefined;
+
+  const stxAdditionalUsdBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
+    <Caption>{stxUsdLockedBalance} locked</Caption>
+  ) : undefined;
+
+  return (
+    <CryptoCurrencyAssetItemLayout
+      assetBalance={stxEffectiveBalance}
+      usdBalance={stxEffectiveUsdBalance}
+      address={address}
+      additionalBalanceInfo={stxAdditionalBalanceInfo}
+      additionalUsdBalanceInfo={stxAdditionalUsdBalanceInfo}
+      icon={<StxAvatarIcon />}
+    />
+  );
+}

src/app/features/asset-list/components/stacks-balance-list-item.tsx

@@ -0,0 +1,11 @@
+import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance';
+
+import { StacksBalanceListItemLayout } from './stacks-balance-list-item.layout';
+
+interface StacksBalanceListItemProps {
+  address: string;
+}
+export function StacksBalanceListItem({ address }: StacksBalanceListItemProps) {
+  const balaceDetails = useStxBalance();
+  return <StacksBalanceListItemLayout address={address} {...balaceDetails} />;
+}

src/app/features/asset-list/components/stacks-fungible-token-asset-list.layout.tsx

@@ -0,0 +1,24 @@
+import { Stack } from 'leather-styles/jsx';
+
+import type { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-balance.model';
+
+import { StacksFungibleTokenAssetItemLayout } from '@app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout';
+
+interface StacksFungibleTokenAssetListLayoutProps {
+  assetBalances: StacksFungibleTokenAssetBalance[];
+}
+export function StacksFungibleTokenAssetListLayout({
+  assetBalances,
+}: StacksFungibleTokenAssetListLayoutProps) {
+  if (assetBalances.length === 0) return null;
+  return (
+    <Stack>
+      {assetBalances.map(assetBalance => (
+        <StacksFungibleTokenAssetItemLayout
+          assetBalance={assetBalance}
+          key={assetBalance.asset.contractId}
+        />
+      ))}
+    </Stack>
+  );
+}

src/app/features/asset-list/components/stacks-fungible-token-asset-list.tsx

@@ -1,22 +1,11 @@
-import { Stack } from 'leather-styles/jsx';
+import { useStacksFungibleTokenAssetBalancesWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 
-import type { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-balance.model';
-
-import { StacksFungibleTokenAssetItemLayout } from '@app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout';
+import { StacksFungibleTokenAssetListLayout } from './stacks-fungible-token-asset-list.layout';
 
 interface StacksFungibleTokenAssetListProps {
-  assetBalances: StacksFungibleTokenAssetBalance[];
+  address: string;
 }
-export function StacksFungibleTokenAssetList({ assetBalances }: StacksFungibleTokenAssetListProps) {
-  if (assetBalances.length === 0) return null;
-  return (
-    <Stack>
-      {assetBalances.map(assetBalance => (
-        <StacksFungibleTokenAssetItemLayout
-          assetBalance={assetBalance}
-          key={assetBalance.asset.contractId}
-        />
-      ))}
-    </Stack>
-  );
+export function StacksFungibleTokenAssetList({ address }: StacksFungibleTokenAssetListProps) {
+  const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesWithMetadata(address);
+  return <StacksFungibleTokenAssetListLayout assetBalances={stacksFtAssetBalances} />;
 }

src/app/pages/send/send-container.tsx

@@ -14,8 +14,8 @@ export function SendContainer() {
       <Flex
         borderRadius={['unset', '16px']}
         height="fit-content"
-        maxWidth={['100%', 'centeredPageFullWidth']}
-        minWidth={['100%', 'centeredPageFullWidth']}
+        maxWidth={['100%', 'pageWidth']}
+        minWidth={['100%', 'pageWidth']}
         background="ink.background-primary"
       >
         <Outlet />

src/app/pages/swap/components/swap-container.layout.tsx

@@ -9,8 +9,8 @@ export function SwapContainerLayout({ children }: HasChildren) {
       <Flex
         borderRadius={['unset', '16px']}
         maxHeight="90vh"
-        maxWidth={['100%', 'centeredPageFullWidth']}
-        minWidth={['100%', 'centeredPageFullWidth']}
+        maxWidth={['100%', 'pageWidth']}
+        minWidth={['100%', 'pageWidth']}
         background="ink.background-primary"
       >
         {children}