feat: avatar

package.json

@@ -139,6 +139,7 @@
     "@octokit/types": "12.4.0",
     "@radix-ui/colors": "3.0.0",
     "@radix-ui/react-accessible-icon": "1.0.3",
+    "@radix-ui/react-avatar": "1.0.4",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-tabs": "1.0.4",

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

@@ -2,7 +2,7 @@ import { Circle } from 'leather-styles/jsx';
 
 import { SupportedInscription } from '@shared/models/inscription.model';
 
-import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon';
+import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
 
 export function InscriptionIcon({ inscription, ...rest }: { inscription: SupportedInscription }) {
   switch (inscription.type) {
@@ -13,7 +13,7 @@ export function InscriptionIcon({ inscription, ...rest }: { inscription: Support
           color="ink.background-primary"
           flexShrink={0}
           position="relative"
-          size="36px"
+          size="xl"
           {...rest}
         >
           <img
@@ -29,6 +29,6 @@ export function InscriptionIcon({ inscription, ...rest }: { inscription: Support
         </Circle>
       );
     default:
-      return <OrdinalIcon />;
+      return <OrdinalAvatarIcon />;
   }
 }

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

@@ -21,7 +21,7 @@ import {
 } from '@app/query/bitcoin/ordinals/inscription.hooks';
 import { useGetInscriptionsByOutputQuery } from '@app/query/bitcoin/ordinals/inscriptions-by-param.query';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
-import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
+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';
 
@@ -96,7 +96,9 @@ export function BitcoinTransactionItem({ transaction }: BitcoinTransactionItemPr
       txCaption={txCaption}
       txIcon={
         <BitcoinTransactionIcon
-          icon={inscriptionData ? <InscriptionIcon inscription={inscriptionData} /> : <BtcIcon />}
+          icon={
+            inscriptionData ? <InscriptionIcon inscription={inscriptionData} /> : <BtcAvatarIcon />
+          }
           transaction={transaction}
           btcAddress={bitcoinAddress}
         />

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx

@@ -4,7 +4,7 @@ import { createMoney } from '@shared/models/money.model';
 
 import { formatBalance } from '@app/common/format-balance';
 import { Brc20Token } from '@app/query/bitcoin/bitcoin-client';
-import { Brc20TokenIcon } from '@app/ui/components/avatar-icon/brc20-token-icon';
+import { Brc20AvatarIcon } from '@app/ui/components/avatar/brc20-avatar-icon';
 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';
@@ -31,7 +31,7 @@ export function Brc20TokenAssetItemLayout({
     >
       <ItemInteractive onClick={onClick}>
         <ItemLayout
-          flagImg={<Brc20TokenIcon />}
+          flagImg={<Brc20AvatarIcon />}
           titleLeft={token.ticker}
           captionLeft="BRC-20"
           titleRight={

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

@@ -6,7 +6,7 @@ import { BitcoinNativeSegwitAccountLoader } from '@app/components/account/bitcoi
 import { BitcoinBalanceLoader } from '@app/components/balance/bitcoin-balance-loader';
 import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
 import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
-import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
+import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 
 import { CryptoCurrencyAssetItemLayout } from '../crypto-currency-asset/crypto-currency-asset-item.layout';
 import { CryptoAssetListItem } from './crypto-asset-list-item';
@@ -27,7 +27,7 @@ export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAsse
             {balance => (
               <CryptoCurrencyAssetItemLayout
                 assetBalance={balance}
-                icon={<BtcIcon />}
+                icon={<BtcAvatarIcon />}
                 onClick={() => onItemClick(balance)}
               />
             )}

src/app/components/crypto-assets/choose-crypto-asset/crypto-currency-asset-icon.tsx

@@ -1,14 +1,14 @@
 import type { Blockchains } from '@shared/models/blockchain.model';
 
-import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
-import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
+import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
 
 export function CryptoCurrencyAssetIcon(props: { blockchain: Blockchains }) {
   switch (props.blockchain) {
     case 'bitcoin':
-      return <BtcIcon />;
+      return <BtcAvatarIcon />;
     case 'stacks':
-      return <StxAvatar />;
+      return <StxAvatarIcon />;
     default:
       return <></>;
   }

src/app/components/crypto-assets/stacks/components/stacks-asset-avatar.tsx

@@ -1,9 +1,9 @@
 import { Box, BoxProps } from 'leather-styles/jsx';
 
+import { Avatar, defaultFallbackDelay } from '@app/ui/components/avatar/avatar';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
 import { DynamicColorCircle } from '@app/ui/components/dynamic-color-circle';
 
-import { StxAvatar } from './stx-avatar';
-
 interface StacksAssetAvatarProps extends BoxProps {
   gradientString?: string;
   imageCanonicalUri?: string;
@@ -15,15 +15,20 @@ export function StacksAssetAvatar({
   gradientString,
   imageCanonicalUri,
   isStx,
-  size = '40',
+  size = '36',
   ...props
 }: StacksAssetAvatarProps) {
-  if (isStx) return <StxAvatar />;
+  if (isStx) return <StxAvatarIcon />;
 
   const { color } = props;
 
   if (imageCanonicalUri)
-    return <img height={`${size}px`} width={`${size}px`} src={encodeURI(imageCanonicalUri)} />;
+    return (
+      <Avatar.Root>
+        <Avatar.Image alt="FT" src={encodeURI(imageCanonicalUri)} />
+        <Avatar.Fallback delayMs={defaultFallbackDelay}>FT</Avatar.Fallback>
+      </Avatar.Root>
+    );
 
   if (!gradientString) return null;
 

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

@@ -2,7 +2,7 @@ import { BoxProps, Flex } from 'leather-styles/jsx';
 
 import { SupportedInscription } from '@shared/models/inscription.model';
 
-import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon';
+import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
 
 import { InscriptionImage } from './inscription-image';
 import { InscriptionPreviewContainer } from './inscription-preview-container';
@@ -31,7 +31,7 @@ export function InscriptionPreview({ inscription, ...props }: InscriptionPreview
       return (
         <InscriptionPreviewContainer {...props}>
           <Flex alignItems="center" height="100%" justifyContent="center">
-            <OrdinalIcon width="40px" />
+            <OrdinalAvatarIcon size="xl" />
           </Flex>
         </InscriptionPreviewContainer>
       );

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

@@ -2,7 +2,7 @@ import { BoxProps } from 'leather-styles/jsx';
 
 import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';
 
-import { StxIcon } from '@app/ui/components/avatar-icon/stx-icon';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
 import { DynamicColorCircle } from '@app/ui/components/dynamic-color-circle';
 import { ErrorCircleIcon } from '@app/ui/icons';
 import { ListIcon } from '@app/ui/icons/list-icon';
@@ -33,7 +33,9 @@ export function StacksTransactionIcon({ transaction, ...rest }: TransactionIconP
         </DynamicColorCircle>
       );
     case 'token_transfer':
-      return <TransactionIconWrapper icon={<StxIcon />} transaction={transaction} {...rest} />;
+      return (
+        <TransactionIconWrapper icon={<StxAvatarIcon />} transaction={transaction} {...rest} />
+      );
     case 'poison_microblock':
       return (
         <TransactionIconWrapper icon={<ErrorCircleIcon />} transaction={transaction} {...rest} />

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

@@ -21,7 +21,7 @@ export function TransactionIconWrapper({
       color="ink.background-primary"
       flexShrink={0}
       position="relative"
-      size="36px"
+      size="xl"
       {...props}
     >
       {icon}

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

@@ -1,8 +1,10 @@
+import type { ReactNode } from 'react';
+
 import { Circle, CircleProps } from 'leather-styles/jsx';
 
 interface TransactionTypeIconWrapperProps extends CircleProps {
   bg?: any;
-  icon: React.JSX.Element;
+  icon: ReactNode;
 }
 export function TransactionTypeIconWrapper({
   bg,

src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx

@@ -6,7 +6,7 @@ import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';
 import { getTxSenderAddress } from '@app/common/transactions/stacks/transaction.utils';
 import { TransactionIconWrapper } from '@app/components/transaction/transaction-icon-wrapper';
 import { TransactionTypeIcon } from '@app/components/transaction/transaction-type-icon';
-import { StxIcon } from '@app/ui/components/avatar-icon/stx-icon';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
 import { DynamicColorCircle } from '@app/ui/components/dynamic-color-circle';
 
 interface SubmittedTransactionIconProps extends CircleProps {
@@ -53,7 +53,7 @@ export function SubmittedTransactionIcon({ transaction, ...rest }: SubmittedTran
     case PayloadType.TokenTransfer:
       return (
         <TransactionIconWrapper
-          icon={<StxIcon />}
+          icon={<StxAvatarIcon />}
           transaction={
             {
               tx_type: 'token_transfer',

src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx

@@ -1,24 +1,17 @@
-import React from 'react';
+import { type ReactNode } from 'react';
 
 import { Circle } from 'leather-styles/jsx';
 
 import { TransactionTypeIconWrapper } from '@app/components/transaction/transaction-type-icon-wrapper';
-import { StxIcon } from '@app/ui/components/avatar-icon/stx-icon';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
 
 interface TxTransferIconWrapperProps {
-  icon: React.JSX.Element;
+  icon: ReactNode;
 }
 export function TxTransferIconWrapper({ icon }: TxTransferIconWrapperProps) {
   return (
-    <Circle
-      bg="stacks"
-      color="ink.background-primary"
-      flexShrink={0}
-      height="36px"
-      position="relative"
-      width="36px"
-    >
-      <StxIcon />
+    <Circle position="relative">
+      <StxAvatarIcon />
       <TransactionTypeIconWrapper icon={icon} />
     </Circle>
   );

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

@@ -12,7 +12,7 @@ import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-accou
 import { useHasBitcoinLedgerKeychain } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
-import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
+import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon';
 
 import { Collectibles } from '../collectibles/collectibles';
 import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-brc-20-transfers';
@@ -37,15 +37,15 @@ export function AssetsList() {
           <CryptoCurrencyAssetItemLayout
             assetBalance={btcAvailableAssetBalance}
             usdBalance={btcAvailableUsdBalance}
-            icon={<BtcIcon />}
+            icon={<BtcAvatarIcon />}
             address={btcAddress}
           />
         ),
         ledger: (
           <CryptoCurrencyAssetItemLayout
             assetBalance={btcAvailableAssetBalance}
             usdBalance={btcAvailableUsdBalance}
-            icon={<BtcIcon />}
+            icon={<BtcAvatarIcon />}
             address={btcAddress}
             rightElement={
               hasBitcoinLedgerKeys ? undefined : <ConnectLedgerAssetBtn chain="bitcoin" />

src/app/features/asset-list/components/add-stacks-ledger-keys-item.tsx

@@ -1,16 +1,16 @@
 import BigNumber from 'bignumber.js';
 
 import { CryptoCurrencyAssetItemLayout } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout';
-import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
 import { createStacksCryptoCurrencyAssetTypeWrapper } from '@app/query/stacks/balance/stacks-ft-balances.utils';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
 
 import { ConnectLedgerAssetBtn } from './connect-ledger-asset-button';
 
 export function AddStacksLedgerKeysItem() {
   return (
     <CryptoCurrencyAssetItemLayout
       assetBalance={createStacksCryptoCurrencyAssetTypeWrapper(new BigNumber(0))}
-      icon={<StxAvatar />}
+      icon={<StxAvatarIcon />}
       rightElement={<ConnectLedgerAssetBtn chain="stacks" />}
     />
   );

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

@@ -3,9 +3,9 @@ import { styled } from 'leather-styles/jsx';
 import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance';
 import { ftDecimals } from '@app/common/stacks-utils';
 import { CryptoCurrencyAssetItemLayout } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout';
-import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
 import { useStacksFungibleTokenAssetBalancesWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
+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';
 
@@ -42,7 +42,7 @@ export function StacksAssetList({ account }: StacksAssetListProps) {
         address={account.address}
         additionalBalanceInfo={stxAdditionalBalanceInfo}
         additionalUsdBalanceInfo={stxAdditionalUsdBalanceInfo}
-        icon={<StxAvatar />}
+        icon={<StxAvatarIcon />}
       />
       <StacksFungibleTokenAssetList assetBalances={stacksFtAssetBalances} />
     </>

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

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

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

@@ -1,6 +1,6 @@
 import { parseJson } from '@app/components/json';
 import { useInscriptionTextContentQuery } from '@app/query/bitcoin/ordinals/inscription-text-content.query';
-import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon';
+import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon';
 
 import { CollectibleText } from '../_collectible-types/collectible-text';
 
@@ -22,7 +22,7 @@ export function InscriptionText({
 
   return (
     <CollectibleText
-      icon={<OrdinalIcon width="md" />}
+      icon={<OrdinalAvatarIcon size="lg" />}
       key={inscriptionNumber}
       onClickCallToAction={onClickCallToAction}
       onClickSend={onClickSend}