feat(tooling): fix logo/avatar/icon image, move to core and cleanup d…

…ebris (#4249)

* feat: fix logo/avatar/icon image, move to core and cleanup debris

* fix lint

* fix import

apps/core/src/components/coin/CoinIcon.tsx

@@ -22,7 +22,7 @@ function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCo
                 src={coinMeta?.iconUrl}
                 label={coinMeta?.name || coinType}
                 fallback={coinMeta?.name || coinType}
-                size={size}
+                size={coinMeta?.iconUrl ? ImageIconSize.Full : size}
                 rounded={rounded}
             />
         </div>

apps/core/src/components/icon/ImageIcon.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import cn from 'clsx';
 
 export enum ImageIconSize {
@@ -43,7 +43,7 @@ function FallBackAvatar({ str, rounded, size = ImageIconSize.Large }: FallBackAv
         <div
             className={cn(
                 'flex h-full w-full items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-12 dark:text-neutral-92',
-                { 'rounded-full': rounded },
+                { 'rounded-full': rounded, 'rounded-lg': !rounded },
                 generateTextSize(size),
             )}
         >
@@ -54,18 +54,14 @@ function FallBackAvatar({ str, rounded, size = ImageIconSize.Large }: FallBackAv
 
 export function ImageIcon({ src, label, alt = label, fallback, rounded, size }: ImageIconProps) {
     const [error, setError] = useState(false);
-    return (
-        <div role="img" aria-label={label} className={size}>
-            {error || !src ? (
-                <FallBackAvatar rounded={rounded} str={fallback} size={size} />
-            ) : (
-                <img
-                    src={src}
-                    alt={alt}
-                    className="flex h-full w-full items-center justify-center rounded-full object-cover"
-                    onError={() => setError(true)}
-                />
-            )}
-        </div>
+    return error || !src ? (
+        <FallBackAvatar rounded={rounded} str={fallback} size={size} />
+    ) : (
+        <img
+            src={src}
+            alt={alt}
+            className={cn('flex items-center justify-center rounded-full object-cover', size)}
+            onError={() => setError(true)}
+        />
     );
 }

apps/core/src/hooks/stake/useValidatorInfo.tsx

@@ -36,7 +36,6 @@ export function useValidatorInfo({ validatorAddress }: { validatorAddress: strin
         system,
         isPendingValidators,
         errorValidators,
-
         currentEpoch,
         validatorSummary,
         name: validatorSummary?.name || '',

apps/explorer/src/components/IotaTokenCard.tsx

@@ -3,9 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Panel } from '@iota/apps-ui-kit';
-import { COIN_GECKO_IOTA_URL, useIotaCoinData } from '@iota/core';
-import { ButtonOrLink, ImageIconSize } from '~/components/ui';
-import { CoinIcon } from './owned-coins';
+import { COIN_GECKO_IOTA_URL, CoinIcon, ImageIconSize, useIotaCoinData } from '@iota/core';
+import { ButtonOrLink } from '~/components/ui';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 
 export function IotaTokenCard(): JSX.Element {

apps/explorer/src/components/owned-coins/OwnedCoinView.tsx

@@ -2,11 +2,10 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useFormatCoin } from '@iota/core';
+import { useFormatCoin, ImageIconSize, CoinIcon } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import clsx from 'clsx';
 import { useState } from 'react';
-import { CoinIcon } from './CoinIcon';
 import { type CoinBalanceVerified } from './OwnedCoins';
 import CoinsPanel from './OwnedCoinsPanel';
 import {
@@ -19,7 +18,6 @@ import {
     ImageType,
 } from '@iota/apps-ui-kit';
 import { ArrowUp, RecognizedBadge } from '@iota/ui-icons';
-import { ImageIconSize } from '../ui';
 
 type OwnedCoinViewProps = {
     coin: CoinBalanceVerified;

apps/explorer/src/components/owned-coins/index.ts

@@ -1,7 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './CoinIcon';
 export * from './CoinItem';
 export * from './OwnedCoinView';
 export * from './OwnedCoins';

apps/explorer/src/components/ui/index.ts

@@ -9,7 +9,6 @@ export * from './modal';
 export * from './ButtonOrLink';
 export * from './ExpandableList';
 export * from './FilterList';
-export * from './ImageIcon';
 export * from './InternalLink';
 export * from './Link';
 export * from './LinkWithQuery';

apps/explorer/src/components/validator/ValidatorMeta.tsx

@@ -6,7 +6,8 @@ import { Badge, BadgeType, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
 import { type IotaValidatorSummary } from '@iota/iota-sdk/client';
 import toast from 'react-hot-toast';
 import { ArrowTopRight } from '@iota/ui-icons';
-import { AddressLink, ImageIcon, ImageIconSize } from '~/components/ui';
+import { AddressLink } from '~/components/ui';
+import { ImageIcon, ImageIconSize } from '@iota/core';
 
 type ValidatorMetaProps = {
     validatorData: IotaValidatorSummary;

apps/explorer/src/lib/ui/utils/generateValidatorsTableColumns.tsx

@@ -3,12 +3,12 @@
 
 import { Badge, BadgeType, TableCellBase, TableCellText } from '@iota/apps-ui-kit';
 import type { ColumnDef } from '@tanstack/react-table';
-import { type ApyByValidator, formatPercentageDisplay } from '@iota/core';
+import { type ApyByValidator, formatPercentageDisplay, ImageIcon, ImageIconSize } from '@iota/core';
 import { ampli, getValidatorMoveEvent, VALIDATOR_LOW_STAKE_GRACE_PERIOD } from '~/lib';
 import { StakeColumn } from '~/components';
 import type { IotaEvent, IotaValidatorSummary } from '@iota/iota-sdk/dist/cjs/client';
 import clsx from 'clsx';
-import { ImageIcon, ImageIconSize, ValidatorLink } from '~/components/ui';
+import { ValidatorLink } from '~/components/ui';
 
 interface generateValidatorsTableColumnsArgs {
     atRiskValidators: [string, string][];
@@ -39,12 +39,14 @@ function ValidatorWithImage({
             }
             label={
                 <div className="flex items-center gap-x-2.5 text-neutral-40 dark:text-neutral-60">
-                    <ImageIcon
-                        src={validator.imageUrl}
-                        size={ImageIconSize.Medium}
-                        label={validator.name}
-                        fallback={validator.name}
-                    />
+                    <div className="h-8 w-8">
+                        <ImageIcon
+                            src={validator.imageUrl}
+                            label={validator.name}
+                            fallback={validator.name}
+                            size={validator.imageUrl ? ImageIconSize.Full : ImageIconSize.Medium}
+                        />
+                    </div>
                     <span
                         className={clsx('text-label-lg', {
                             'text-neutral-10 dark:text-neutral-92': highlightValidatorName,

apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx

@@ -20,10 +20,11 @@ import {
     getRecognizedUnRecognizedTokenChanges,
     useCoinMetadata,
     useFormatCoin,
+    ImageIconSize,
+    CoinIcon,
 } from '@iota/core';
 import { RecognizedBadge } from '@iota/ui-icons';
 import { useMemo } from 'react';
-import { CoinIcon, ImageIconSize } from '~/components';
 import { AddressLink, CollapsibleCard } from '~/components/ui';
 import { BREAK_POINT, useMediaQuery } from '~/hooks';
 

apps/explorer/src/pages/transaction-result/transaction-summary/ObjectDisplay.tsx

@@ -3,10 +3,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Card, CardAction, CardActionType, CardBody, CardImage, CardType } from '@iota/apps-ui-kit';
+import { ImageIcon } from '@iota/core';
 import { type DisplayFieldsResponse } from '@iota/iota-sdk/client';
 import { ArrowTopRight } from '@iota/ui-icons';
 import { useState } from 'react';
-import { ImageIcon, ObjectModal } from '~/components/ui';
+import { ObjectModal } from '~/components/ui';
 
 interface ObjectDisplayProps {
     objectId: string;

apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx

@@ -12,6 +12,7 @@ import {
     CardType,
     ImageType,
 } from '@iota/apps-ui-kit';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 
 interface TxnAmountProps {
     amount: string | number | bigint;
@@ -28,8 +29,12 @@ export function TxnAmount({ amount, coinType, subtitle, approximation }: TxnAmou
     return Number(amount) !== 0 ? (
         <Card type={CardType.Filled}>
             <CardImage type={ImageType.BgSolid}>
-                <div className="h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10 dark:text-neutral-92">
-                    <CoinIcon coinType={coinType} size={ImageIconSize.Full} rounded />
+                <div className="flex h-full w-full items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10 dark:text-neutral-92">
+                    <CoinIcon
+                        coinType={coinType}
+                        rounded
+                        size={coinType === IOTA_TYPE_ARG ? ImageIconSize.Small : ImageIconSize.Full}
+                    />
                 </div>
             </CardImage>
             <CardBody