feat: display proper image for src20 tokens

package.json

@@ -149,7 +149,7 @@
     "@leather.io/bitcoin": "0.17.0",
     "@leather.io/constants": "0.13.5",
     "@leather.io/crypto": "1.6.14",
-    "@leather.io/models": "0.24.0",
+    "@leather.io/models": "0.24.3",
     "@leather.io/query": "2.26.10",
     "@leather.io/stacks": "1.4.0",
     "@leather.io/tokens": "0.12.1",
@@ -360,6 +360,7 @@
     "ts-node": "10.9.2",
     "ts-unused-exports": "10.0.1",
     "tsconfig-paths-webpack-plugin": "4.1.0",
+    "type-fest": "4.30.2",
     "typescript": "5.4.5",
     "vitest": "2.0.5",
     "vm-browserify": "1.1.2",
@@ -370,8 +371,7 @@
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
     "webpack-hot-middleware": "2.26.1",
-    "webpack-shell-plugin": "0.5.0",
-    "type-fest": "4.30.2"
+    "webpack-shell-plugin": "0.5.0"
   },
   "resolutions": {
     "cross-spawn": "7.0.5",

src/app/features/collectibles/components/_collectible-types/collectible-audio.tsx → src/app/components/collectibles/collectible-audio.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 
 import { HeadsetIcon } from '@leather.io/ui';
 
-import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
+import { CollectibleItemLayout, CollectibleItemLayoutProps } from './collectible-item.layout';
 import { CollectiblePlaceholderLayout } from './collectible-placeholder.layout';
 
 interface CollectibleAudioProps extends Omit<CollectibleItemLayoutProps, 'children'> {

src/app/features/collectibles/components/_collectible-types/collectible-iframe.tsx → src/app/components/collectibles/collectible-iframe.tsx

@@ -2,8 +2,8 @@ import { ReactNode, useState } from 'react';
 
 import { Iframe } from '@app/ui/components/iframe';
 
-import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
-import { ImageUnavailable } from '../image-unavailable';
+import { CollectibleItemLayout, CollectibleItemLayoutProps } from './collectible-item.layout';
+import { ImageUnavailable } from './image-unavailable';
 
 interface CollectibleIframeProps extends Omit<CollectibleItemLayoutProps, 'children'> {
   icon: ReactNode;

src/app/features/collectibles/components/_collectible-types/collectible-image.tsx → src/app/components/collectibles/collectible-image.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useState } from 'react';
 
-import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
-import { ImageUnavailable } from '../image-unavailable';
+import { CollectibleItemLayout, CollectibleItemLayoutProps } from './collectible-item.layout';
+import { ImageUnavailable } from './image-unavailable';
 
 interface CollectibleImageProps extends Omit<CollectibleItemLayoutProps, 'children'> {
   alt?: string;

src/app/features/collectibles/components/_collectible-types/collectible-other.tsx → src/app/components/collectibles/collectible-other.tsx

@@ -1,6 +1,6 @@
 import { Box } from 'leather-styles/jsx';
 
-import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
+import { CollectibleItemLayout, CollectibleItemLayoutProps } from './collectible-item.layout';
 
 interface CollectibleOtherProps extends Omit<CollectibleItemLayoutProps, 'children'> {
   children: React.JSX.Element;

src/app/features/collectibles/components/_collectible-types/collectible-text.tsx → src/app/components/collectibles/collectible-text.tsx

@@ -1,4 +1,4 @@
-import { CollectibleItemLayout, CollectibleItemLayoutProps } from '../collectible-item.layout';
+import { CollectibleItemLayout, CollectibleItemLayoutProps } from './collectible-item.layout';
 import { CollectibleTextLayout } from './collectible-text.layout';
 
 interface CollectibleTextProps extends Omit<CollectibleItemLayoutProps, 'children'> {

src/app/features/collectibles/components/image-unavailable.tsx → src/app/components/collectibles/image-unavailable.tsx

@@ -2,7 +2,7 @@ import { styled } from 'leather-styles/jsx';
 
 import { Eye1ClosedIcon } from '@leather.io/ui';
 
-import { CollectiblePlaceholderLayout } from './_collectible-types/collectible-placeholder.layout';
+import { CollectiblePlaceholderLayout } from './collectible-placeholder.layout';
 
 export function ImageUnavailable() {
   return (

src/app/features/asset-list/bitcoin/src20-token-asset-list/src20-token-asset-list.tsx

@@ -4,6 +4,7 @@ import { Src20AvatarIcon } from '@leather.io/ui';
 import { getAssetDisplayName } from '@leather.io/utils';
 
 import { useManageTokens } from '@app/common/hooks/use-manage-tokens';
+import { CollectibleImage } from '@app/components/collectibles/collectible-image';
 import { CryptoAssetItem } from '@app/components/crypto-asset-item/crypto-asset-item';
 import type { Src20TokenAssetDetails } from '@app/components/loaders/src20-tokens-loader';
 import { useIsPrivateMode } from '@app/store/settings/settings.selectors';
@@ -34,7 +35,17 @@ export function Src20TokenAssetList({
   return tokens.map((token, i) => {
     const key = `${token.info.id}${i}`;
     const captionLeft = getAssetDisplayName(token.info).toUpperCase();
-    const icon = <Src20AvatarIcon />;
+    const icon = token.info.deploy_img ? (
+      <CollectibleImage
+        alt={token.info.symbol}
+        icon={<Src20AvatarIcon size="lg" />}
+        src={token.info.deploy_img}
+        title={`# ${token.info.id}`}
+        subtitle={`# ${token.info.symbol}`}
+      />
+    ) : (
+      <Src20AvatarIcon />
+    );
     const titleLeft = token.info.symbol.toUpperCase();
     const symbol = token.info.symbol;
 

src/app/features/collectibles/collectibles.tsx

@@ -9,10 +9,10 @@ import { CurrentBitcoinSignerLoader } from '@app/components/loaders/current-bitc
 import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader';
 import { useConfigNftMetadataEnabled } from '@app/query/common/remote-config/remote-config.query';
 
+import { CollectiblesLayout } from '../../components/collectibles/collectible.layout';
 import { AddCollectible } from './components/add-collectible';
 import { Ordinals } from './components/bitcoin/ordinals';
 import { Stamps } from './components/bitcoin/stamps';
-import { CollectiblesLayout } from './components/collectible.layout';
 import { StacksCryptoAssets } from './components/stacks/stacks-crypto-assets';
 import { TaprootBalanceDisplayer } from './components/taproot-balance-displayer';
 import { useIsFetchingCollectiblesRelatedQuery } from './hooks/use-is-fetching-collectibles';

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

@@ -5,7 +5,7 @@ import { PlusIcon } from '@leather.io/ui';
 import { RouteUrls } from '@shared/route-urls';
 import { analytics } from '@shared/utils/analytics';
 
-import { CollectibleItemLayout } from './collectible-item.layout';
+import { CollectibleItemLayout } from '../../../components/collectibles/collectible-item.layout';
 
 export function AddCollectible() {
   const navigate = useNavigate();

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

@@ -5,7 +5,7 @@ import { OrdinalAvatarIcon } from '@leather.io/ui';
 
 import { parseJson } from '@app/components/json';
 
-import { CollectibleText } from '../_collectible-types/collectible-text';
+import { CollectibleText } from '../../../../components/collectibles/collectible-text';
 
 interface InscriptionTextProps {
   contentSrc: string;

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

@@ -23,10 +23,10 @@ import { useHoverWithChildren } from '@app/common/hooks/use-hover-with-children'
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { useDiscardedInscriptions } from '@app/store/settings/settings.selectors';
 
-import { CollectibleAudio } from '../_collectible-types/collectible-audio';
-import { CollectibleIframe } from '../_collectible-types/collectible-iframe';
-import { CollectibleImage } from '../_collectible-types/collectible-image';
-import { CollectibleOther } from '../_collectible-types/collectible-other';
+import { CollectibleAudio } from '../../../../components/collectibles/collectible-audio';
+import { CollectibleIframe } from '../../../../components/collectibles/collectible-iframe';
+import { CollectibleImage } from '../../../../components/collectibles/collectible-image';
+import { CollectibleOther } from '../../../../components/collectibles/collectible-other';
 import { HighSatValueUtxoWarning } from './high-sat-value-utxo';
 import { InscriptionText } from './inscription-text';
 

src/app/features/collectibles/components/bitcoin/stamp.tsx

@@ -3,7 +3,7 @@ import { Stamp as BitcoinStamp } from '@leather.io/query';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { StampsAvatarIcon } from '@app/ui/components/avatar/stamps-avatar-icon';
 
-import { CollectibleImage } from '../_collectible-types/collectible-image';
+import { CollectibleImage } from '../../../../components/collectibles/collectible-image';
 
 const stampChainAssetUrl = 'https://stampchain.io/asset.html?stampNumber=';
 

src/app/features/collectibles/components/stacks/stacks-bns-name.tsx

@@ -2,7 +2,7 @@ import StacksNftBns from '@assets/images/stacks-nft-bns.png';
 
 import { StxAvatarIcon } from '@leather.io/ui';
 
-import { CollectibleItemLayout } from '../collectible-item.layout';
+import { CollectibleItemLayout } from '../../../../components/collectibles/collectible-item.layout';
 
 export function StacksBnsName(props: { bnsName: string }) {
   const { bnsName } = props;

src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx

@@ -4,8 +4,8 @@ import { StxAvatarIcon } from '@leather.io/ui';
 
 import { isValidUrl } from '@shared/utils/validate-url';
 
-import { CollectibleImage } from '../_collectible-types/collectible-image';
-import { ImageUnavailable } from '../image-unavailable';
+import { CollectibleImage } from '../../../../components/collectibles/collectible-image';
+import { ImageUnavailable } from '../../../../components/collectibles/image-unavailable';
 
 interface StacksNonFungibleTokensProps {
   metadata: StacksNftMetadata;

src/app/features/dialogs/switch-account-sheet/switch-account-sheet.tsx

@@ -75,7 +75,7 @@ export const SwitchAccountSheet = memo(({ isShowing, onClose }: SwitchAccountShe
               borderTop="default"
               p="space.05"
             >
-              <Button fullWidth onClick={() => onCreateAccount()}>
+              <Button fullWidth onClick={() => onCreateAccount()} data-testid="create-account-btn">
                 Create new account
               </Button>
             </Flex>

tests/page-object-models/onboarding.page.ts

@@ -10,9 +10,13 @@ import { RouteUrls } from '@shared/route-urls';
 
 const TEST_ACCOUNT_SECRET_KEY = process.env.TEST_ACCOUNT_SECRET_KEY ?? '';
 
+async function pauseForStateToBeSet() {
+  return delay(2000);
+}
+
 // If default wallet state changes, we'll need to update this
 export const testSoftwareAccountDefaultWalletState = {
-  chains: { stx: { default: { highestAccountIndex: 2, currentAccountIndex: 0 } } },
+  chains: { stx: { default: { highestAccountIndex: 0, currentAccountIndex: 0 } } },
   appPermissions: {
     entities: {},
     ids: [],
@@ -318,6 +322,27 @@ export class OnboardingPage {
 
       iterationCounter.increment();
     } while (!(await isSignedIn()));
+
+    await this.createNewAccount();
+    await this.createNewAccount();
+    await this.selectFirstAccount();
+    await pauseForStateToBeSet();
+  }
+
+  async createNewAccount() {
+    await this.page.getByTestId('switch-account-trigger').click();
+    await this.page.getByTestId('switch-account-item-0').isVisible();
+    const dialog = this.page.getByRole('dialog');
+    await this.page.getByTestId('create-account-btn').click();
+    await dialog.waitFor({ state: 'detached' });
+  }
+
+  async selectFirstAccount() {
+    await this.page.getByTestId('switch-account-trigger').click();
+    await this.page.getByTestId('switch-account-item-0').isVisible();
+    const dialog = this.page.getByRole('dialog');
+    await this.page.getByTestId('switch-account-item-0').click();
+    await dialog.waitFor({ state: 'detached' });
   }
 
   /**