+
);
}
diff --git a/apps/explorer/src/components/object/ObjectFieldsCard.tsx b/apps/explorer/src/components/object/ObjectFieldsCard.tsx
index ce35bae8e0b..c6e2e8213bf 100644
--- a/apps/explorer/src/components/object/ObjectFieldsCard.tsx
+++ b/apps/explorer/src/components/object/ObjectFieldsCard.tsx
@@ -5,7 +5,6 @@
import { type IotaMoveNormalizedStruct, type IotaObjectResponse } from '@iota/iota-sdk/client';
import clsx from 'clsx';
import { useCallback, useEffect, useState } from 'react';
-import { Banner } from '~/components/ui';
import { getFieldTypeValue } from '~/lib/ui';
import { FieldItem } from './FieldItem';
import { ScrollToViewCard } from './ScrollToViewCard';
@@ -21,7 +20,11 @@ import {
LoadingIndicator,
Search,
ListItem,
+ InfoBox,
+ InfoBoxStyle,
+ InfoBoxType,
} from '@iota/apps-ui-kit';
+import { Warning } from '@iota/ui-icons';
const DEFAULT_OPEN_FIELDS = 3;
const DEFAULT_FIELDS_COUNT_TO_SHOW_SEARCH = 10;
@@ -90,9 +93,13 @@ export function ObjectFieldsCard({
}
if (error) {
return (
-
- Failed to get field data for {id}
-
+
}
+ type={InfoBoxType.Error}
+ style={InfoBoxStyle.Elevated}
+ />
);
}
diff --git a/apps/explorer/src/components/object/UnderlyingObjectCard.tsx b/apps/explorer/src/components/object/UnderlyingObjectCard.tsx
index fd1f8224d43..7d4ce9061e9 100644
--- a/apps/explorer/src/components/object/UnderlyingObjectCard.tsx
+++ b/apps/explorer/src/components/object/UnderlyingObjectCard.tsx
@@ -4,10 +4,9 @@
import { useIotaClientQuery } from '@iota/dapp-kit';
import { FieldItem } from './FieldItem';
-import { Banner } from '~/components/ui';
-
import type { DynamicFieldName } from '@iota/iota-sdk/client';
-import { LoadingIndicator } from '@iota/apps-ui-kit';
+import { InfoBox, InfoBoxStyle, InfoBoxType, LoadingIndicator } from '@iota/apps-ui-kit';
+import { Warning } from '@iota/ui-icons';
interface UnderlyingObjectCardProps {
parentId: string;
@@ -53,9 +52,13 @@ export function UnderlyingObjectCard({
(!normalizedStruct && normalizedStructFetched))
) {
return (
-
- Failed to get field data for {parentId}
-
+
}
+ type={InfoBoxType.Error}
+ style={InfoBoxStyle.Elevated}
+ />
);
}
diff --git a/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx b/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx
index 609080b513f..e2fc0f7f0a8 100644
--- a/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx
+++ b/apps/explorer/src/components/top-validators-card/TopValidatorsCard.tsx
@@ -3,11 +3,11 @@
// SPDX-License-Identifier: Apache-2.0
import { useIotaClientQuery } from '@iota/dapp-kit';
-
-import { Banner, PlaceholderTable, TableCard } from '~/components/ui';
+import { PlaceholderTable, TableCard } from '~/components/ui';
import { generateValidatorsTableColumns } from '~/lib/ui';
-import { Panel, Title } from '@iota/apps-ui-kit';
+import { InfoBox, InfoBoxStyle, InfoBoxType, Panel, Title } from '@iota/apps-ui-kit';
import { ErrorBoundary } from '../error-boundary/ErrorBoundary';
+import { Warning } from '@iota/ui-icons';
const NUMBER_OF_VALIDATORS = 10;
@@ -30,9 +30,13 @@ export function TopValidatorsCard({ limit, showIcon }: TopValidatorsCardProps):
if (isError || (!isPending && !data.activeValidators.length)) {
return (
-
- Validator data could not be loaded
-
+
}
+ type={InfoBoxType.Error}
+ style={InfoBoxStyle.Elevated}
+ />
);
}
diff --git a/apps/explorer/src/components/transactions/TransactionsForAddress.tsx b/apps/explorer/src/components/transactions/TransactionsForAddress.tsx
index 89f2d42cb4e..e3547919a9b 100644
--- a/apps/explorer/src/components/transactions/TransactionsForAddress.tsx
+++ b/apps/explorer/src/components/transactions/TransactionsForAddress.tsx
@@ -2,11 +2,12 @@
// Modifications Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0
-import { LoadingIndicator } from '@iota/apps-ui-kit';
+import { InfoBox, InfoBoxStyle, InfoBoxType, LoadingIndicator } from '@iota/apps-ui-kit';
import { useIotaClient } from '@iota/dapp-kit';
import { type IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
+import { Warning } from '@iota/ui-icons';
import { useQuery } from '@tanstack/react-query';
-import { Banner, TableCard } from '~/components/ui';
+import { TableCard } from '~/components/ui';
import { generateTransactionsTableColumns } from '~/lib/ui';
interface TransactionsForAddressProps {
@@ -37,9 +38,13 @@ export function TransactionsForAddressTable({
if (isError) {
return (
-
- Transactions could not be extracted on the following specified address: {address}
-
+
}
+ type={InfoBoxType.Error}
+ style={InfoBoxStyle.Elevated}
+ />
);
}
diff --git a/apps/explorer/src/components/ui/Banner.tsx b/apps/explorer/src/components/ui/Banner.tsx
deleted file mode 100644
index 8c3a2a1dd84..00000000000
--- a/apps/explorer/src/components/ui/Banner.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import { type ReactNode } from 'react';
-import { Close, Info } from '@iota/ui-icons';
-
-const bannerStyles = cva(
- 'inline-flex text-pBodySmall font-medium overflow-hidden gap-2 items-center flex-nowrap relative',
- {
- variants: {
- variant: {
- positive: 'bg-success-light text-success-dark',
- warning: 'bg-warning-light text-warning-dark',
- error: 'bg-issue-light text-issue-dark',
- message: 'bg-iota-light text-hero',
- neutralGrey: 'bg-steel text-white',
- neutralWhite: 'bg-white/80 text-steel-darker',
- },
- align: {
- left: 'justify-start',
- center: 'justify-center',
- },
- fullWidth: {
- true: 'w-full',
- },
- spacing: {
- sm: 'px-1.5 py-0.5',
- md: 'px-3 py-2',
- lg: 'p-5',
- },
- shadow: {
- true: 'shadow-md',
- },
- border: {
- true: '',
- },
- rounded: {
- none: 'rounded-none',
- '2xl': 'rounded-2xl',
- },
- },
- defaultVariants: {
- variant: 'message',
- spacing: 'md',
- rounded: '2xl',
- },
- compoundVariants: [
- {
- variant: 'positive',
- border: true,
- class: 'border border-success/30',
- },
- {
- variant: 'warning',
- border: true,
- class: 'border border-warning-dark/30',
- },
- {
- variant: 'error',
- border: true,
- class: 'border border-issue-dark/30',
- },
- {
- variant: 'message',
- border: true,
- class: 'border border-iota/30',
- },
- {
- variant: 'neutralGrey',
- border: true,
- class: 'border border-steel',
- },
- {
- variant: 'neutralWhite',
- border: true,
- class: 'border border-gray-45',
- },
- ],
- },
-);
-
-export interface BannerProps extends VariantProps
{
- icon?: ReactNode | null;
- title?: ReactNode | string;
- children: ReactNode;
- onDismiss?: () => void;
-}
-
-export function Banner({
- icon = ,
- title,
- children,
- variant,
- align,
- fullWidth,
- spacing,
- border,
- shadow,
- rounded,
- onDismiss,
-}: BannerProps): JSX.Element {
- return (
-
- {icon &&
{icon}
}
-
- {title &&
{title}}
-
{children}
-
- {onDismiss ? (
-
-
-
- ) : null}
-