From d12200cd20df50f7ad93db6bb0398c3eb20f93f1 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Tue, 3 Dec 2024 15:42:41 +0100 Subject: [PATCH] feat(tooling): fix logo/avatar/icon image, move to core and cleanup debris (#4249) * feat: fix logo/avatar/icon image, move to core and cleanup debris * fix lint * fix import --- apps/core/src/components/coin/CoinIcon.tsx | 2 +- apps/core/src/components/icon/ImageIcon.tsx | 26 +++---- .../core/src/hooks/stake/useValidatorInfo.tsx | 1 - .../explorer/src/components/IotaTokenCard.tsx | 5 +- .../src/components/owned-coins/CoinIcon.tsx | 45 ----------- .../components/owned-coins/OwnedCoinView.tsx | 4 +- .../src/components/owned-coins/index.ts | 1 - apps/explorer/src/components/ui/ImageIcon.tsx | 75 ------------------- apps/explorer/src/components/ui/index.ts | 1 - .../components/validator/ValidatorMeta.tsx | 3 +- .../utils/generateValidatorsTableColumns.tsx | 18 +++-- .../transaction-summary/BalanceChanges.tsx | 3 +- .../transaction-summary/ObjectDisplay.tsx | 3 +- .../app/components/receipt-card/TxnAmount.tsx | 9 ++- 14 files changed, 38 insertions(+), 158 deletions(-) delete mode 100644 apps/explorer/src/components/owned-coins/CoinIcon.tsx delete mode 100644 apps/explorer/src/components/ui/ImageIcon.tsx diff --git a/apps/core/src/components/coin/CoinIcon.tsx b/apps/core/src/components/coin/CoinIcon.tsx index 1ced5642085..e5cd595c6cc 100644 --- a/apps/core/src/components/coin/CoinIcon.tsx +++ b/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} /> diff --git a/apps/core/src/components/icon/ImageIcon.tsx b/apps/core/src/components/icon/ImageIcon.tsx index 3f1e76a6d31..6e71eba90cd 100644 --- a/apps/core/src/components/icon/ImageIcon.tsx +++ b/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
@@ -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 ( -
- {error || !src ? ( - - ) : ( - {alt} setError(true)} - /> - )} -
+ return error || !src ? ( + + ) : ( + {alt} setError(true)} + /> ); } diff --git a/apps/core/src/hooks/stake/useValidatorInfo.tsx b/apps/core/src/hooks/stake/useValidatorInfo.tsx index 2ae4d23c933..f8d6dcd5a2f 100644 --- a/apps/core/src/hooks/stake/useValidatorInfo.tsx +++ b/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 || '', diff --git a/apps/explorer/src/components/IotaTokenCard.tsx b/apps/explorer/src/components/IotaTokenCard.tsx index 19bb5fa8286..51383f08d43 100644 --- a/apps/explorer/src/components/IotaTokenCard.tsx +++ b/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 { diff --git a/apps/explorer/src/components/owned-coins/CoinIcon.tsx b/apps/explorer/src/components/owned-coins/CoinIcon.tsx deleted file mode 100644 index a0263d92afe..00000000000 --- a/apps/explorer/src/components/owned-coins/CoinIcon.tsx +++ /dev/null @@ -1,45 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// Modifications Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import { useCoinMetadata } from '@iota/core'; -import { IotaLogoMark } from '@iota/ui-icons'; -import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; -import { cx } from 'class-variance-authority'; -import { ImageIcon, ImageIconSize } from '../ui'; - -interface NonIotaCoinProps { - coinType: string; - size?: ImageIconSize; - rounded?: boolean; -} - -function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCoinProps) { - const { data: coinMeta } = useCoinMetadata(coinType); - return ( -
- -
- ); -} -export interface CoinIconProps { - coinType: string; - size?: ImageIconSize; - rounded?: boolean; -} - -export function CoinIcon({ coinType, size = ImageIconSize.Full, rounded }: CoinIconProps) { - return coinType === IOTA_TYPE_ARG ? ( -
- -
- ) : ( - - ); -} diff --git a/apps/explorer/src/components/owned-coins/OwnedCoinView.tsx b/apps/explorer/src/components/owned-coins/OwnedCoinView.tsx index 5f072935dcb..d2a53c74e03 100644 --- a/apps/explorer/src/components/owned-coins/OwnedCoinView.tsx +++ b/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; diff --git a/apps/explorer/src/components/owned-coins/index.ts b/apps/explorer/src/components/owned-coins/index.ts index 21ab7bc1bfe..c2516466466 100644 --- a/apps/explorer/src/components/owned-coins/index.ts +++ b/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'; diff --git a/apps/explorer/src/components/ui/ImageIcon.tsx b/apps/explorer/src/components/ui/ImageIcon.tsx deleted file mode 100644 index 0366a9c741a..00000000000 --- a/apps/explorer/src/components/ui/ImageIcon.tsx +++ /dev/null @@ -1,75 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// Modifications Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import { useState } from 'react'; -import cn from 'clsx'; - -export enum ImageIconSize { - Small = 'w-5 h-5', - Medium = 'w-8 h-8', - Large = 'w-10 h-10', - Full = 'w-full h-full', -} - -export interface ImageIconProps { - src: string | null | undefined; - label: string; - fallback: string; - alt?: string; - rounded?: boolean; - size?: ImageIconSize; -} - -function FallBackAvatar({ - str, - rounded, - size = ImageIconSize.Large, -}: { - str: string; - rounded?: boolean; - size?: ImageIconSize; -}) { - function generateTextSize(size: ImageIconSize) { - switch (size) { - case ImageIconSize.Small: - return 'text-label-sm'; - case ImageIconSize.Medium: - return 'text-label-md'; - case ImageIconSize.Large: - return 'text-title-lg'; - case ImageIconSize.Full: - return 'text-display-lg'; - } - } - return ( -
- {str?.slice(0, 2)} -
- ); -} - -export function ImageIcon({ src, label, alt = label, fallback, rounded, size }: ImageIconProps) { - const [error, setError] = useState(false); - return ( -
- {error || !src ? ( - - ) : ( - {alt} setError(true)} - /> - )} -
- ); -} diff --git a/apps/explorer/src/components/ui/index.ts b/apps/explorer/src/components/ui/index.ts index 6cf3f4c845d..7c58503ad94 100644 --- a/apps/explorer/src/components/ui/index.ts +++ b/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'; diff --git a/apps/explorer/src/components/validator/ValidatorMeta.tsx b/apps/explorer/src/components/validator/ValidatorMeta.tsx index 386048bdebd..1b04666cf06 100644 --- a/apps/explorer/src/components/validator/ValidatorMeta.tsx +++ b/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; diff --git a/apps/explorer/src/lib/ui/utils/generateValidatorsTableColumns.tsx b/apps/explorer/src/lib/ui/utils/generateValidatorsTableColumns.tsx index b053b889695..4bbb5b5805f 100644 --- a/apps/explorer/src/lib/ui/utils/generateValidatorsTableColumns.tsx +++ b/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={
- +
+ +
-
- +
+