diff --git a/apps/core/src/components/Inputs/SendTokenFormInput.tsx b/apps/core/src/components/Inputs/SendTokenFormInput.tsx index b0fffbc2ea3..5c49038945b 100644 --- a/apps/core/src/components/Inputs/SendTokenFormInput.tsx +++ b/apps/core/src/components/Inputs/SendTokenFormInput.tsx @@ -1,12 +1,14 @@ // Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 +import React from 'react'; import { ButtonPill, Input, InputType } from '@iota/apps-ui-kit'; import { CoinStruct } from '@iota/iota-sdk/client'; -import { useGasBudgetEstimation } from '../../hooks'; +import { useFormatCoin, useGasBudgetEstimation } from '../../hooks'; import { useEffect } from 'react'; import { useField, useFormikContext } from 'formik'; import { TokenForm } from '../../forms'; +import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; export interface SendTokenInputProps { coins: CoinStruct[]; @@ -30,7 +32,7 @@ export function SendTokenFormInput({ name, }: SendTokenInputProps) { const { values, setFieldValue, isSubmitting, validateField } = useFormikContext(); - const gasBudgetEstimation = useGasBudgetEstimation({ + const { data: gasBudgetEstimation } = useGasBudgetEstimation({ coinDecimals, coins: coins ?? [], activeAddress, @@ -38,6 +40,10 @@ export function SendTokenFormInput({ amount: values.amount, isPayAllIota: values.isPayAllIota, }); + const [formattedGasBudgetEstimation, gasToken] = useFormatCoin( + gasBudgetEstimation, + IOTA_TYPE_ARG, + ); const [field, meta, helpers] = useField(name); const errorMessage = meta.error; @@ -49,10 +55,14 @@ export function SendTokenFormInput({ ); + const gasAmount = formattedGasBudgetEstimation + ? formattedGasBudgetEstimation + ' ' + gasToken + : undefined; + // gasBudgetEstimation should change when the amount above changes useEffect(() => { - setFieldValue('gasBudgetEst', gasBudgetEstimation, false); - }, [gasBudgetEstimation, setFieldValue, values.amount]); + setFieldValue('gasBudgetEst', formattedGasBudgetEstimation, false); + }, [formattedGasBudgetEstimation, setFieldValue, values.amount]); return ( - - + +
+ +
+ ) : ( ); } +type CoinIconWrapperProps = React.PropsWithChildren> & { + hasBorder?: boolean; +}; +export function CoinIconWrapper({ children, size, hasBorder }: CoinIconWrapperProps) { + return ( +
+ {children} +
+ ); +} diff --git a/apps/wallet-dashboard/components/coins/CoinItem.tsx b/apps/core/src/components/coin/CoinItem.tsx similarity index 78% rename from apps/wallet-dashboard/components/coins/CoinItem.tsx rename to apps/core/src/components/coin/CoinItem.tsx index 01528cb5ac1..a7d82afe1ba 100644 --- a/apps/wallet-dashboard/components/coins/CoinItem.tsx +++ b/apps/core/src/components/coin/CoinItem.tsx @@ -1,6 +1,7 @@ // Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 +import React from 'react'; import { Card, CardAction, @@ -10,9 +11,10 @@ import { CardType, ImageType, } from '@iota/apps-ui-kit'; -import { CoinIcon, useFormatCoin, ImageIconSize } from '@iota/core'; +import { CoinIcon, ImageIconSize } from '../'; import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; import { type ReactNode } from 'react'; +import { useFormatCoin } from '../../hooks'; interface CoinItemProps { coinType: string; @@ -23,7 +25,7 @@ interface CoinItemProps { usd?: number; } -function CoinItem({ +export function CoinItem({ coinType, balance, onClick, @@ -37,8 +39,13 @@ function CoinItem({ return ( -
- +
+
); } - -export default CoinItem; diff --git a/apps/core/src/components/coin/CoinSelector.tsx b/apps/core/src/components/coin/CoinSelector.tsx index 254b0180982..3f2f568811c 100644 --- a/apps/core/src/components/coin/CoinSelector.tsx +++ b/apps/core/src/components/coin/CoinSelector.tsx @@ -8,7 +8,11 @@ import { useFormatCoin } from '../../hooks'; import { CoinIcon } from './CoinIcon'; import { ImageIconSize } from '../icon'; -interface CoinSelectorProps { +interface CoinSelectorBaseProps { + hasCoinWrapper?: boolean; +} + +interface CoinSelectorProps extends CoinSelectorBaseProps { activeCoinType: string; coins: CoinBalance[]; onClick: (coinType: string) => void; @@ -18,13 +22,14 @@ export function CoinSelector({ activeCoinType = IOTA_TYPE_ARG, coins, onClick, + hasCoinWrapper, }: CoinSelectorProps) { const activeCoin = coins?.find(({ coinType }) => coinType === activeCoinType) ?? coins?.[0]; const initialValue = activeCoin?.coinType; const coinsOptions: SelectOption[] = coins?.map((coin) => ({ id: coin.coinType, - renderLabel: () => , + renderLabel: () => , })) || []; return ( @@ -39,7 +44,14 @@ export function CoinSelector({ ); } -function CoinSelectOption({ coin: { coinType, totalBalance } }: { coin: CoinBalance }) { +interface CoinSelectOptionProps extends CoinSelectorBaseProps { + coin: CoinBalance; +} + +function CoinSelectOption({ + coin: { coinType, totalBalance }, + hasCoinWrapper, +}: CoinSelectOptionProps) { const [formatted, symbol, { data: coinMeta }] = useFormatCoin(totalBalance, coinType); const isIota = coinType === IOTA_TYPE_ARG; @@ -47,7 +59,12 @@ function CoinSelectOption({ coin: { coinType, totalBalance } }: { coin: CoinBala
- +
{isIota ? (coinMeta?.name || '').toUpperCase() : coinMeta?.name || symbol} diff --git a/apps/core/src/components/coin/index.ts b/apps/core/src/components/coin/index.ts index 7eedc42ec44..6bbccfc1d7a 100644 --- a/apps/core/src/components/coin/index.ts +++ b/apps/core/src/components/coin/index.ts @@ -3,3 +3,4 @@ export * from './CoinIcon'; export * from './CoinSelector'; +export * from './CoinItem'; diff --git a/apps/core/src/hooks/useGasBudgetEstimation.ts b/apps/core/src/hooks/useGasBudgetEstimation.ts index 5dbe7d2ff1e..a50e1ca41f6 100644 --- a/apps/core/src/hooks/useGasBudgetEstimation.ts +++ b/apps/core/src/hooks/useGasBudgetEstimation.ts @@ -6,8 +6,6 @@ import { CoinStruct } from '@iota/iota-sdk/client'; import { useQuery } from '@tanstack/react-query'; import { createTokenTransferTransaction } from '../utils'; import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; -import { useFormatCoin } from './useFormatCoin'; -import { GAS_SYMBOL } from '../constants'; interface UseGasBudgetEstimationOptions { coinDecimals: number; @@ -27,7 +25,7 @@ export function useGasBudgetEstimation({ isPayAllIota, }: UseGasBudgetEstimationOptions) { const client = useIotaClient(); - const { data: gasBudget } = useQuery({ + return useQuery({ // eslint-disable-next-line @tanstack/query/exhaustive-deps queryKey: [ 'transaction-gas-budget-estimate', @@ -58,8 +56,4 @@ export function useGasBudgetEstimation({ return tx.getData().gasData.budget; }, }); - - const [formattedGas] = useFormatCoin(gasBudget, IOTA_TYPE_ARG); - - return formattedGas ? formattedGas + ' ' + GAS_SYMBOL : '--'; } diff --git a/apps/ui-kit/src/lib/components/organisms/dialog/Dialog.tsx b/apps/ui-kit/src/lib/components/organisms/dialog/Dialog.tsx index ddd77e87df7..53971681633 100644 --- a/apps/ui-kit/src/lib/components/organisms/dialog/Dialog.tsx +++ b/apps/ui-kit/src/lib/components/organisms/dialog/Dialog.tsx @@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef< >(({ showCloseIcon, ...props }, ref) => ( @@ -70,7 +70,7 @@ const DialogContent = React.forwardRef< { - addNotification('Transfer transaction was not sent', NotificationType.Error); - }); + .catch(handleTransactionError); } } + function handleTransactionError() { + setOpen(false); + addNotification('There was an error with the transaction', NotificationType.Error); + } + function onNext(): void { setStep(FormStep.ReviewValues); } @@ -82,6 +81,7 @@ function SendTokenDialogBody({
setOpen(false)} + onBack={step === FormStep.ReviewValues ? onBack : undefined} />
@@ -92,16 +92,16 @@ function SendTokenDialogBody({ setSelectedCoin={setSelectedCoin} onNext={onNext} setFormData={setFormData} + initialFormValues={formData} /> )} {step === FormStep.ReviewValues && ( )} diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts b/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts index 319d67de744..58f1e99acca 100644 --- a/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts +++ b/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts @@ -6,6 +6,7 @@ import { FormDataValues } from '../interfaces'; export const INITIAL_VALUES: FormDataValues = { to: '', amount: '', + formattedAmount: '', isPayAllIota: false, gasBudgetEst: '', }; diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/interfaces/index.ts b/apps/wallet-dashboard/components/Dialogs/SendToken/interfaces/index.ts index 06ae882b260..983b77712a3 100644 --- a/apps/wallet-dashboard/components/Dialogs/SendToken/interfaces/index.ts +++ b/apps/wallet-dashboard/components/Dialogs/SendToken/interfaces/index.ts @@ -2,6 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 export interface FormDataValues { amount: string; + formattedAmount: string; to: string; isPayAllIota: boolean; gasBudgetEst: string; diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx index e7aa08c9825..2f9598c29ef 100644 --- a/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx +++ b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx @@ -37,6 +37,7 @@ import { INITIAL_VALUES } from '../constants'; interface EnterValuesFormProps { coin: CoinBalance; activeAddress: string; + initialFormValues: FormDataValues; setFormData: React.Dispatch>; setSelectedCoin: React.Dispatch>; onNext: () => void; @@ -150,6 +151,7 @@ export function EnterValuesFormView({ setFormData, setSelectedCoin, onNext, + initialFormValues, }: EnterValuesFormProps): JSX.Element { // Get all coins of the type const { data: coinsData, isPending: coinsIsPending } = useGetAllCoins( @@ -213,7 +215,8 @@ export function EnterValuesFormView({ const data = { to, - amount: formattedAmount, + amount, + formattedAmount, isPayAllIota, coins, coinIds: coinsIDs, @@ -237,13 +240,15 @@ export function EnterValuesFormView({ void; - onBack: () => void; + coinType: string; } export function ReviewValuesFormView({ - formData: { amount, to, gasBudgetEst }, + formData: { amount, to, formattedAmount, isPayAllIota, gasBudgetEst }, senderAddress, - error, isPending, executeTransfer, - onBack, + coinType, }: ReviewValuesFormProps): JSX.Element { + const [formatAmount, symbol] = useFormatCoin(formattedAmount, coinType); return ( -
-

Review & Send

-
-

Sending: {amount}

-

From: {senderAddress}

-

To: {to}

-

Gas fee: {gasBudgetEst}

-
- {error ? {error} : null} -
- - {isPending ? ( - - ) : ( - - )} +
+
+
+
+
+ {Number(amount) !== 0 ? ( + + + + + + + + ) : null} +
+ + {formatAddress(senderAddress)} + + } + fullwidth + /> + + + + {formatAddress(to || '')} + + } + fullwidth + /> + + + +
+
+
+
); diff --git a/apps/wallet-dashboard/components/ExplorerLink.tsx b/apps/wallet-dashboard/components/ExplorerLink.tsx new file mode 100644 index 00000000000..2b671cf8cc5 --- /dev/null +++ b/apps/wallet-dashboard/components/ExplorerLink.tsx @@ -0,0 +1,27 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import { useExplorerLinkGetter } from '@/hooks'; +import { getExplorerLink } from '@iota/core'; +import Link from 'next/link'; + +type GetExplorerLinkArgs = Parameters[0]; + +type ExplorerLinkProps = GetExplorerLinkArgs & { + isExternal?: boolean; +}; + +export function ExplorerLink({ + children, + isExternal, + ...getLinkProps +}: React.PropsWithChildren): React.JSX.Element { + const getExplorerLink = useExplorerLinkGetter(); + const href = getExplorerLink(getLinkProps) ?? '#'; + + return ( + + {children} + + ); +} diff --git a/apps/wallet-dashboard/components/coins/MyCoins.tsx b/apps/wallet-dashboard/components/coins/MyCoins.tsx index 9ba3810ff98..fc441d76148 100644 --- a/apps/wallet-dashboard/components/coins/MyCoins.tsx +++ b/apps/wallet-dashboard/components/coins/MyCoins.tsx @@ -3,13 +3,13 @@ import React, { useState } from 'react'; import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit'; -import { CoinItem, SendTokenDialog } from '@/components'; import { CoinBalance } from '@iota/iota-sdk/client'; import { COINS_QUERY_REFETCH_INTERVAL, COINS_QUERY_STALE_TIME, filterAndSortTokenBalances, useSortedCoinsByCategories, + CoinItem, } from '@iota/core'; import { ButtonSegment, @@ -19,6 +19,7 @@ import { Title, } from '@iota/apps-ui-kit'; import { RecognizedBadge } from '@iota/ui-icons'; +import { SendTokenDialog } from '@/components'; enum TokenCategory { All = 'All', diff --git a/apps/wallet-dashboard/components/coins/index.ts b/apps/wallet-dashboard/components/coins/index.ts index d1519105eec..2ff5894ab77 100644 --- a/apps/wallet-dashboard/components/coins/index.ts +++ b/apps/wallet-dashboard/components/coins/index.ts @@ -2,4 +2,3 @@ // SPDX-License-Identifier: Apache-2.0 export { default as MyCoins } from './MyCoins'; -export { default as CoinItem } from './CoinItem'; diff --git a/apps/wallet-dashboard/components/index.ts b/apps/wallet-dashboard/components/index.ts index 83697f63914..c1320cc7447 100644 --- a/apps/wallet-dashboard/components/index.ts +++ b/apps/wallet-dashboard/components/index.ts @@ -19,6 +19,7 @@ export * from './Cards'; export * from './Buttons'; export * from './transactions'; export * from './staking-overview'; +export * from './ExplorerLink'; export * from './Dialogs'; export * from './ValidatorStakingData'; export * from './tiles'; diff --git a/apps/wallet-dashboard/tailwind.config.ts b/apps/wallet-dashboard/tailwind.config.ts index e8c9079ca3a..2ca1f1c0824 100644 --- a/apps/wallet-dashboard/tailwind.config.ts +++ b/apps/wallet-dashboard/tailwind.config.ts @@ -12,6 +12,7 @@ export default { './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './../ui-kit/src/lib/**/*.{js,jsx,ts,tsx}', + './../core/src/components/**/*.{js,jsx,ts,tsx}', ], darkMode: 'class', theme: { diff --git a/apps/wallet/src/ui/app/components/DAppInfoCard.tsx b/apps/wallet/src/ui/app/components/DAppInfoCard.tsx index 87cea050c73..6824f2978c5 100644 --- a/apps/wallet/src/ui/app/components/DAppInfoCard.tsx +++ b/apps/wallet/src/ui/app/components/DAppInfoCard.tsx @@ -12,7 +12,7 @@ import { useUnlockAccount } from './accounts/UnlockAccountContext'; import { DAppPermissionList } from './DAppPermissionList'; import { SummaryCard } from './SummaryCard'; import { Link } from 'react-router-dom'; -import { ImageIcon } from '../shared/image-icon'; +import { ImageIcon } from '@iota/core'; export interface DAppInfoCardProps { name: string; diff --git a/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx b/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx deleted file mode 100644 index b5fe3327917..00000000000 --- a/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx +++ /dev/null @@ -1,51 +0,0 @@ -// Copyright (c) Mysten Labs, Inc. -// Modifications Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import { CoinIcon, useFormatCoin } from '@iota/core'; -import { type ReactNode } from 'react'; -import { - Card, - CardAction, - CardActionType, - CardBody, - CardImage, - CardType, - ImageType, -} from '@iota/apps-ui-kit'; -import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; -import { ImageIconSize } from '../../shared/image-icon'; - -interface CoinItemProps { - coinType: string; - balance: bigint; - usd?: number; - clickableAction?: ReactNode; - icon?: ReactNode; -} - -export function CoinItem({ coinType, balance, usd, clickableAction, icon }: CoinItemProps) { - const [formatted, symbol, { data: coinMeta }] = useFormatCoin(balance, coinType); - const isIota = coinType === IOTA_TYPE_ARG; - - return ( - - -
- -
- - - - - ); -} diff --git a/apps/wallet/src/ui/app/components/active-coins-card/index.tsx b/apps/wallet/src/ui/app/components/active-coins-card/index.tsx index 414fb885609..b5c8e64b490 100644 --- a/apps/wallet/src/ui/app/components/active-coins-card/index.tsx +++ b/apps/wallet/src/ui/app/components/active-coins-card/index.tsx @@ -8,8 +8,7 @@ import { useCoinsReFetchingConfig } from '_hooks'; import { useIotaClientQuery } from '@iota/dapp-kit'; import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; import { Link } from 'react-router-dom'; -import { CoinItem } from './CoinItem'; -import { filterAndSortTokenBalances } from '@iota/core'; +import { filterAndSortTokenBalances, CoinItem } from '@iota/core'; interface ActiveCoinsCardProps { activeCoinType: string; diff --git a/apps/wallet/src/ui/app/components/index.ts b/apps/wallet/src/ui/app/components/index.ts index 418c14428a2..5dd1c520da6 100644 --- a/apps/wallet/src/ui/app/components/index.ts +++ b/apps/wallet/src/ui/app/components/index.ts @@ -13,7 +13,6 @@ export * from './SummaryCard'; export * from './WalletListSelect'; export * from './accounts'; export * from './active-coins-card'; -export * from './active-coins-card/CoinItem'; export * from './error-boundary'; export * from './explorer-link'; export * from './explorer-link/Explorer'; diff --git a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx index ee69a96a670..aa4c2dc7e4b 100644 --- a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx +++ b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx @@ -2,7 +2,7 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -import { ImageIcon, ImageIconSize } from '_app/shared/image-icon'; +import { ImageIcon, ImageIconSize } from '@iota/core'; import { ExternalLink } from '_components'; import { ampli } from '_src/shared/analytics/ampli'; import { getDAppUrl } from '_src/shared/utils'; diff --git a/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx b/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx index ceaa4ead1e2..a993b4657ca 100644 --- a/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx +++ b/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx @@ -2,7 +2,7 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -import { CoinIcon, useFormatCoin } from '@iota/core'; +import { useFormatCoin, ImageIconSize, CoinIcon } from '@iota/core'; import { Card, CardAction, @@ -12,7 +12,6 @@ import { CardType, ImageType, } from '@iota/apps-ui-kit'; -import { ImageIconSize } from '../../shared/image-icon'; interface TxnAmountProps { amount: string | number | bigint; diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokenLink.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokenLink.tsx index ad024633daa..62aac0099d4 100644 --- a/apps/wallet/src/ui/app/pages/home/tokens/TokenLink.tsx +++ b/apps/wallet/src/ui/app/pages/home/tokens/TokenLink.tsx @@ -2,7 +2,7 @@ // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -import { CoinItem } from '_components'; +import { CoinItem } from '@iota/core'; import { ampli } from '_src/shared/analytics/ampli'; import { type CoinBalance } from '@iota/iota-sdk/client'; import { NANOS_PER_IOTA } from '@iota/iota-sdk/utils'; diff --git a/apps/wallet/src/ui/app/shared/image-icon/index.tsx b/apps/wallet/src/ui/app/shared/image-icon/index.tsx deleted file mode 100644 index 5ae46570b21..00000000000 --- a/apps/wallet/src/ui/app/shared/image-icon/index.tsx +++ /dev/null @@ -1,74 +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-md'; - case ImageIconSize.Full: - return 'text-title-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/wallet/src/ui/app/shared/transaction-summary/cards/BalanceChanges.tsx b/apps/wallet/src/ui/app/shared/transaction-summary/cards/BalanceChanges.tsx index be12a7d8f95..09bd1d59890 100644 --- a/apps/wallet/src/ui/app/shared/transaction-summary/cards/BalanceChanges.tsx +++ b/apps/wallet/src/ui/app/shared/transaction-summary/cards/BalanceChanges.tsx @@ -3,13 +3,14 @@ // SPDX-License-Identifier: Apache-2.0 import { + CoinItem, getRecognizedUnRecognizedTokenChanges, type BalanceChange, type BalanceChangeSummary, } from '@iota/core'; import { useMemo } from 'react'; import { Divider, Header, KeyValueInfo, Panel } from '@iota/apps-ui-kit'; -import { CoinItem, ExplorerLink, ExplorerLinkType } from '_src/ui/app/components'; +import { ExplorerLink, ExplorerLinkType } from '_src/ui/app/components'; import { formatAddress } from '@iota/iota-sdk/utils'; import { RecognizedBadge } from '@iota/ui-icons'; diff --git a/apps/wallet/src/ui/app/shared/transaction-summary/cards/objectSummary/ObjectChangeDisplay.tsx b/apps/wallet/src/ui/app/shared/transaction-summary/cards/objectSummary/ObjectChangeDisplay.tsx index 5289019a18d..ce6bfd0acea 100644 --- a/apps/wallet/src/ui/app/shared/transaction-summary/cards/objectSummary/ObjectChangeDisplay.tsx +++ b/apps/wallet/src/ui/app/shared/transaction-summary/cards/objectSummary/ObjectChangeDisplay.tsx @@ -3,10 +3,9 @@ // SPDX-License-Identifier: Apache-2.0 import { ExplorerLink, ExplorerLinkType } from '_components'; -import { type IotaObjectChangeWithDisplay } from '@iota/core'; +import { type IotaObjectChangeWithDisplay, ImageIcon } from '@iota/core'; import { Card, CardAction, CardActionType, CardBody, CardImage, CardType } from '@iota/apps-ui-kit'; -import { ImageIcon } from '../../../image-icon'; import { ArrowTopRight } from '@iota/ui-icons'; export function ObjectChangeDisplay({ change }: { change: IotaObjectChangeWithDisplay }) { diff --git a/apps/wallet/src/ui/app/staking/home/StakedCard.tsx b/apps/wallet/src/ui/app/staking/home/StakedCard.tsx index 9ed1c130455..b945fbe025b 100644 --- a/apps/wallet/src/ui/app/staking/home/StakedCard.tsx +++ b/apps/wallet/src/ui/app/staking/home/StakedCard.tsx @@ -10,12 +10,12 @@ import { useFormatCoin, useGetTimeBeforeEpochNumber, useTimeAgo, + ImageIcon, } from '@iota/core'; import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils'; import { Card, CardImage, CardType, CardBody, CardAction, CardActionType } from '@iota/apps-ui-kit'; import { useMemo } from 'react'; import { Link } from 'react-router-dom'; -import { ImageIcon } from '../../shared/image-icon'; import { useIotaClientQuery } from '@iota/dapp-kit'; diff --git a/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx b/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx index 961cadc895b..dcb8954a274 100644 --- a/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx +++ b/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx @@ -1,7 +1,6 @@ // Copyright (c) Mysten Labs, Inc. // Modifications Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -import { ImageIcon, ImageIconSize } from '_app/shared/image-icon'; import { Badge, BadgeType, @@ -15,7 +14,7 @@ import { import { useIotaClientQuery } from '@iota/dapp-kit'; import { formatAddress } from '@iota/iota-sdk/utils'; import { useMemo } from 'react'; -import { formatPercentageDisplay, useGetValidatorsApy } from '@iota/core'; +import { formatPercentageDisplay, useGetValidatorsApy, ImageIcon, ImageIconSize } from '@iota/core'; interface ValidatorLogoProps { validatorAddress: string;