diff --git a/package.json b/package.json index 291721adfc3..44cbaad2f0e 100644 --- a/package.json +++ b/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", diff --git a/public/assets/avatars/stamps-avatar-icon.png b/public/assets/avatars/stamps-avatar-icon.png new file mode 100644 index 00000000000..c26aebef2e4 Binary files /dev/null and b/public/assets/avatars/stamps-avatar-icon.png differ diff --git a/public/assets/images/btc-icon.png b/public/assets/images/btc-icon.png deleted file mode 100644 index 9de5f6cc7a7..00000000000 Binary files a/public/assets/images/btc-icon.png and /dev/null differ diff --git a/public/assets/images/fund/stacks-icon.png b/public/assets/images/fund/stacks-icon.png deleted file mode 100644 index f4f37baf9e0..00000000000 Binary files a/public/assets/images/fund/stacks-icon.png and /dev/null differ diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx index b9e7e3db34c..b3ce5a376bb 100644 --- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx +++ b/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} > ); default: - return ; + return ; } } diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx index f5af0f981cf..57546e1351d 100644 --- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx +++ b/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={ : } + icon={ + inscriptionData ? : + } transaction={transaction} btcAddress={bitcoinAddress} /> diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx index f79dc796763..23bbbdae530 100644 --- a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx +++ b/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({ > } + flagImg={} titleLeft={token.ticker} captionLeft="BRC-20" titleRight={ diff --git a/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx b/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx index 996b548c73a..b9db5559af2 100644 --- a/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx +++ b/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 => ( } + icon={} onClick={() => onItemClick(balance)} /> )} diff --git a/src/app/components/crypto-assets/choose-crypto-asset/crypto-currency-asset-icon.tsx b/src/app/components/crypto-assets/choose-crypto-asset/crypto-currency-asset-icon.tsx index d0d648e304a..340164184aa 100644 --- a/src/app/components/crypto-assets/choose-crypto-asset/crypto-currency-asset-icon.tsx +++ b/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 ; + return ; case 'stacks': - return ; + return ; default: return <>; } diff --git a/src/app/components/crypto-assets/stacks/components/stacks-asset-avatar.tsx b/src/app/components/crypto-assets/stacks/components/stacks-asset-avatar.tsx index 08d771dd2d1..36dde46b297 100644 --- a/src/app/components/crypto-assets/stacks/components/stacks-asset-avatar.tsx +++ b/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 ; + if (isStx) return ; const { color } = props; if (imageCanonicalUri) - return ; + return ( + + + FT + + ); if (!gradientString) return null; diff --git a/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx b/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx deleted file mode 100644 index 2340e77443f..00000000000 --- a/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Circle, CircleProps } from 'leather-styles/jsx'; - -import { StxIcon } from '@app/ui/components/avatar-icon/stx-icon'; - -export function StxAvatar({ ...props }: CircleProps) { - return ( - - - - ); -} diff --git a/src/app/components/inscription-preview-card/components/inscription-preview.tsx b/src/app/components/inscription-preview-card/components/inscription-preview.tsx index 10a3885ed69..a009524afc6 100644 --- a/src/app/components/inscription-preview-card/components/inscription-preview.tsx +++ b/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 ( - + ); diff --git a/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx b/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx index fa7563e3225..7ee52e681ad 100644 --- a/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx +++ b/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 ); case 'token_transfer': - return } transaction={transaction} {...rest} />; + return ( + } transaction={transaction} {...rest} /> + ); case 'poison_microblock': return ( } transaction={transaction} {...rest} /> diff --git a/src/app/components/transaction/transaction-icon-wrapper.tsx b/src/app/components/transaction/transaction-icon-wrapper.tsx index 82916222871..68ee792320d 100644 --- a/src/app/components/transaction/transaction-icon-wrapper.tsx +++ b/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} diff --git a/src/app/components/transaction/transaction-type-icon-wrapper.tsx b/src/app/components/transaction/transaction-type-icon-wrapper.tsx index eb44dba36ed..048d396bf45 100644 --- a/src/app/components/transaction/transaction-type-icon-wrapper.tsx +++ b/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, diff --git a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx b/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx index 16fda21e9a5..ffe80588163 100644 --- a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx +++ b/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 ( } + icon={} transaction={ { tx_type: 'token_transfer', diff --git a/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx b/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx index e9f03e2be08..7be01e8bd78 100644 --- a/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx +++ b/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 ( - - + + ); diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx index 909ee350e63..f8e05c26abe 100644 --- a/src/app/features/asset-list/asset-list.tsx +++ b/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,7 +37,7 @@ export function AssetsList() { } + icon={} address={btcAddress} /> ), @@ -45,7 +45,7 @@ export function AssetsList() { } + icon={} address={btcAddress} rightElement={ hasBitcoinLedgerKeys ? undefined : diff --git a/src/app/features/asset-list/components/add-stacks-ledger-keys-item.tsx b/src/app/features/asset-list/components/add-stacks-ledger-keys-item.tsx index ff0f0ed281a..2309e849ab5 100644 --- a/src/app/features/asset-list/components/add-stacks-ledger-keys-item.tsx +++ b/src/app/features/asset-list/components/add-stacks-ledger-keys-item.tsx @@ -1,8 +1,8 @@ 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'; @@ -10,7 +10,7 @@ export function AddStacksLedgerKeysItem() { return ( } + icon={} rightElement={} /> ); diff --git a/src/app/features/asset-list/components/stacks-asset-list.tsx b/src/app/features/asset-list/components/stacks-asset-list.tsx index a58c3a82834..f92f68276d1 100644 --- a/src/app/features/asset-list/components/stacks-asset-list.tsx +++ b/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={} + icon={} /> diff --git a/src/app/features/collectibles/components/add-collectible.tsx b/src/app/features/collectibles/components/add-collectible.tsx index d8443570b0c..a6b37349175 100644 --- a/src/app/features/collectibles/components/add-collectible.tsx +++ b/src/app/features/collectibles/components/add-collectible.tsx @@ -26,7 +26,7 @@ export function AddCollectible() { subtitle="Collectible" title="Add new" > - + ); } diff --git a/src/app/features/collectibles/components/bitcoin/inscription-text.tsx b/src/app/features/collectibles/components/bitcoin/inscription-text.tsx index d4ad627d844..af99655db66 100644 --- a/src/app/features/collectibles/components/bitcoin/inscription-text.tsx +++ b/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 ( } + icon={} key={inscriptionNumber} onClickCallToAction={onClickCallToAction} onClickSend={onClickSend} diff --git a/src/app/features/collectibles/components/bitcoin/inscription.tsx b/src/app/features/collectibles/components/bitcoin/inscription.tsx index 8fdd9784a43..48786b86c8c 100644 --- a/src/app/features/collectibles/components/bitcoin/inscription.tsx +++ b/src/app/features/collectibles/components/bitcoin/inscription.tsx @@ -5,7 +5,7 @@ import { RouteUrls } from '@shared/route-urls'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; import { convertInscriptionToSupportedInscriptionType } from '@app/query/bitcoin/ordinals/inscription.hooks'; -import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon'; +import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon'; import { CollectibleAudio } from '../_collectible-types/collectible-audio'; import { CollectibleIframe } from '../_collectible-types/collectible-iframe'; @@ -31,7 +31,7 @@ export function Inscription({ rawInscription }: InscriptionProps) { case 'audio': return ( } + icon={} key={inscription.title} onClickCallToAction={() => openInNewTab(inscription.infoUrl)} onClickSend={() => openSendInscriptionModal()} @@ -44,7 +44,7 @@ export function Inscription({ rawInscription }: InscriptionProps) { case 'video': return ( } + icon={} key={inscription.title} onClickCallToAction={() => openInNewTab(inscription.infoUrl)} onClickSend={() => openSendInscriptionModal()} @@ -56,7 +56,7 @@ export function Inscription({ rawInscription }: InscriptionProps) { case 'image': return ( } + icon={} key={inscription.title} onClickCallToAction={() => openInNewTab(inscription.infoUrl)} onClickSend={() => openSendInscriptionModal()} @@ -83,7 +83,7 @@ export function Inscription({ rawInscription }: InscriptionProps) { subtitle="Ordinal inscription" title={`# ${inscription.number}`} > - + ); default: diff --git a/src/app/features/collectibles/components/bitcoin/stamp.tsx b/src/app/features/collectibles/components/bitcoin/stamp.tsx index a55fd33279f..aca13fe961b 100644 --- a/src/app/features/collectibles/components/bitcoin/stamp.tsx +++ b/src/app/features/collectibles/components/bitcoin/stamp.tsx @@ -1,6 +1,6 @@ import { openInNewTab } from '@app/common/utils/open-in-new-tab'; import { Stamp as BitcoinStamp } from '@app/query/bitcoin/stamps/stamps-by-address.query'; -import { StampsIcon } from '@app/ui/components/avatar-icon/stamps-icon'; +import { StampsAvatarIcon } from '@app/ui/components/avatar/stamps-avatar-icon'; import { CollectibleImage } from '../_collectible-types/collectible-image'; @@ -11,7 +11,7 @@ export function Stamp(props: { bitcoinStamp: BitcoinStamp }) { return ( } + icon={} key={bitcoinStamp.stamp} onClickCallToAction={() => openInNewTab(`${stampChainAssetUrl}${bitcoinStamp.stamp}`)} src={bitcoinStamp.stamp_url} diff --git a/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx b/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx index c219bc2ed81..0fddbfc96c0 100644 --- a/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx +++ b/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx @@ -1,6 +1,6 @@ import StacksNftBns from '@assets/images/stacks-nft-bns.png'; -import { StxIcon } from '@app/ui/components/avatar-icon/stx-icon'; +import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon'; import { CollectibleItemLayout } from '../collectible-item.layout'; @@ -9,7 +9,7 @@ export function StacksBnsName(props: { bnsName: string }) { return ( } + collectibleTypeIcon={} subtitle="Bitcoin Naming System" title={bnsName} > diff --git a/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx b/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx index ee0c83694df..1bd48e3aabc 100644 --- a/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx +++ b/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx @@ -2,7 +2,7 @@ import { Metadata as StacksNftMetadata } from '@hirosystems/token-metadata-api-c import { isValidUrl } from '@shared/utils/validate-url'; -import { StxIcon } from '@app/ui/components/avatar-icon/stx-icon'; +import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon'; import { CollectibleImage } from '../_collectible-types/collectible-image'; import { ImageUnavailable } from '../image-unavailable'; @@ -18,7 +18,7 @@ export function StacksNonFungibleTokens({ metadata }: StacksNonFungibleTokensPro return ( } + icon={} src={metadata.cached_image ?? ''} subtitle="Stacks NFT" title={metadata.name ?? ''} diff --git a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx index 543a7f2c7db..b7cae70622f 100644 --- a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx +++ b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx @@ -1,7 +1,7 @@ import { Box, HStack, styled } from 'leather-styles/jsx'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; -import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon'; +import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon'; import { Flag } from '@app/ui/components/flag/flag'; import { Link } from '@app/ui/components/link/link'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; @@ -28,7 +28,7 @@ export function PsbtAddressTotalItem({ const { onCopy, hasCopied } = useClipboard(hoverLabel ?? ''); return ( - } mt="space.05" spacing="space.04"> + } mt="space.05" spacing="space.04"> {title ? title : 'Bitcoin'} {valueAction ? ( diff --git a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-inscription.tsx b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-inscription.tsx index 5b225ac159d..0f97f8bb35c 100644 --- a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-inscription.tsx +++ b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-inscription.tsx @@ -7,7 +7,7 @@ import { createInscriptionInfoUrl, useInscription, } from '@app/query/bitcoin/ordinals/inscription.hooks'; -import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon'; +import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon'; import { PsbtAddressTotalItem } from './psbt-address-total-item'; @@ -21,7 +21,7 @@ export function PsbtInscription({ inscription }: PsbtInscriptionProps) { if (isError || isUndefined(supportedInscription)) return ( } + image={} title="Inscription not found" value="# Unknown" /> diff --git a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx index cbc08026ac3..8bae581829b 100644 --- a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx +++ b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx @@ -1,7 +1,7 @@ import { Flex, styled } from 'leather-styles/jsx'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; -import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon'; +import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon'; import { Button } from '@app/ui/components/button/button'; import { Callout } from '@app/ui/components/callout/callout'; @@ -18,7 +18,7 @@ export function RetrieveTaprootToNativeSegwitLayout( return ( onClose()}> - + Retrieve Bitcoin deposited to
Taproot addresses diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx index 3c3880dd856..427fdd871fe 100644 --- a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx +++ b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx @@ -5,7 +5,7 @@ import { HStack, styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; -import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon'; +import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon'; import { Flag } from '@app/ui/components/flag/flag'; import { Link } from '@app/ui/components/link/link'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; @@ -33,7 +33,7 @@ export function BitcoinContractLockAmount({ const { onCopy, hasCopied } = useClipboard(hoverLabel ?? ''); return ( - } width="100%"> + } width="100%"> {title ? title : 'BTC'} - + @@ -19,9 +20,7 @@ export function StacksIconComponent() { export function BitcoinIconComponent() { return ( <> - - - + diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx index 0aa99061525..b39ca8b0e75 100644 --- a/src/app/pages/receive/receive-modal.tsx +++ b/src/app/pages/receive/receive-modal.tsx @@ -10,15 +10,15 @@ import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; import { useLocationState } from '@app/common/hooks/use-location-state'; -import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { useZeroIndexTaprootAddress } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks'; import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon'; -import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon'; -import { StampsIcon } from '@app/ui/components/avatar-icon/stamps-icon'; +import { BtcAvatarIcon } from '@app/ui/components/avatar/btc-avatar-icon'; +import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon'; +import { StampsAvatarIcon } from '@app/ui/components/avatar/stamps-avatar-icon'; +import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon'; import { ReceiveItem } from './components/receive-item'; import { ReceiveItemList } from './components/receive-items'; @@ -76,7 +76,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { } + icon={} dataTestId={HomePageSelectors.ReceiveBtcNativeSegwitQrCodeBtn} onCopyAddress={() => copyToClipboard(onCopyBtc)} onClickQrCode={() => @@ -88,7 +88,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { /> } + icon={} dataTestId={HomePageSelectors.ReceiveStxQrCodeBtn} onCopyAddress={() => copyToClipboard(onCopyStx)} onClickQrCode={() => @@ -103,7 +103,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { } + icon={} dataTestId={HomePageSelectors.ReceiveBtcTaprootQrCodeBtn} onCopyAddress={() => copyToClipboard(onCopyOrdinal, 'select_stamp_to_add_new_collectible') @@ -121,7 +121,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { /> } + icon={} onClickQrCode={() => navigate(`${RouteUrls.Home}${RouteUrls.ReceiveBtcStamp}`, { state: { backgroundLocation }, @@ -134,7 +134,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { /> } + icon={} onCopyAddress={() => copyToClipboard(onCopyStx, 'select_nft_to_add_new_collectible')} onClickQrCode={() => navigate(`${RouteUrls.Home}${RouteUrls.ReceiveStx}`, { diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx index 23d5d05e9f6..59d3e4f0afb 100644 --- a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx +++ b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx @@ -9,7 +9,7 @@ import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { ErrorLabel } from '@app/components/error-label'; import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview'; import { InscriptionPreviewCard } from '@app/components/inscription-preview-card/inscription-preview-card'; -import { OrdinalIcon } from '@app/ui/components/avatar-icon/ordinal-icon'; +import { OrdinalAvatarIcon } from '@app/ui/components/avatar/ordinal-avatar-icon'; import { Button } from '@app/ui/components/button/button'; import { RecipientAddressTypeField } from '../send-crypto-asset-form/components/recipient-address-type-field'; @@ -47,7 +47,7 @@ export function SendInscriptionForm() { /> - } name="Ordinal inscription" /> + } name="Ordinal inscription" /> - } name={ticker} symbol={ticker} /> + } name={ticker} symbol={ticker} />
  • 1. Create transfer inscription with amount to send
    • diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx index 6e1987c2681..9d5ee8e67d3 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx @@ -11,7 +11,7 @@ import { HighFeeDrawer } from '@app/features/high-fee-drawer/high-fee-drawer'; import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks'; import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks'; import { useCurrentAccountNativeSegwitIndexZeroSigner } 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 { Callout } from '@app/ui/components/callout/callout'; import { Link } from '@app/ui/components/link/link'; @@ -86,7 +86,7 @@ export function BtcSendForm() { } /> } + icon={} name={btcBalance.asset.name} symbol={symbol} /> diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/sip10-token-send-form-container.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/sip10-token-send-form-container.tsx index 687f888f53c..607a132e312 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/sip10-token-send-form-container.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/sip10-token-send-form-container.tsx @@ -1,5 +1,5 @@ import { StacksAssetAvatar } from '@app/components/crypto-assets/stacks/components/stacks-asset-avatar'; -import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar'; +import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon'; import { AmountField } from '../../components/amount-field'; import { SelectedAssetField } from '../../components/selected-asset-field'; @@ -44,7 +44,7 @@ export function Sip10TokenSendFormContainer({ imageCanonicalUri={avatar.imageCanonicalUri} /> ) : ( - + ) } name={symbol} diff --git a/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx index 2b3b47f428b..870350795c6 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx @@ -1,7 +1,7 @@ import { CryptoCurrencies } from '@shared/models/currencies.model'; -import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar'; import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks'; +import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon'; import { AmountField } from '../../components/amount-field'; import { SelectedAssetField } from '../../components/selected-asset-field'; @@ -36,7 +36,7 @@ export function StxSendForm() { ); const selectedAssetField = ( - } name="Stacks" symbol={symbol} /> + } name="Stacks" symbol={symbol} /> ); return ( diff --git a/src/app/pages/swap/components/select-asset-trigger-button.tsx b/src/app/pages/swap/components/select-asset-trigger-button.tsx index c364a4aadf2..d51a9747d3a 100644 --- a/src/app/pages/swap/components/select-asset-trigger-button.tsx +++ b/src/app/pages/swap/components/select-asset-trigger-button.tsx @@ -2,6 +2,7 @@ import { SwapSelectors } from '@tests/selectors/swap.selectors'; import { useField } from 'formik'; import { HStack, styled } from 'leather-styles/jsx'; +import { Avatar, defaultFallbackDelay, getAvatarFallback } from '@app/ui/components/avatar/avatar'; import { Button } from '@app/ui/components/button/button'; import { ChevronDownIcon } from '@app/ui/icons/chevron-down-icon'; @@ -18,6 +19,7 @@ export function SelectAssetTriggerButton({ symbol, }: SelectAssetTriggerButtonProps) { const [field] = useField(name); + const fallback = getAvatarFallback(symbol); return (