refactor(explorer): remove Banner component and replace with `InfoB…

…ox` (#3485) * feat: remove Banner component * feat: update icon --------- Co-authored-by: Marc Espin <[email protected]>
iotaledger · Oct 23, 2024 · 0604ab9 · 0604ab9
1 parent cd76a66
commit 0604ab9
Show file tree

Hide file tree

Showing 15 changed files with 148 additions and 218 deletions.
diff --git a/apps/explorer/src/components/error-boundary/ErrorBoundary.tsx b/apps/explorer/src/components/error-boundary/ErrorBoundary.tsx
@@ -4,17 +4,20 @@
 
 import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
 import { useLocation } from 'react-router-dom';
-
-import { Banner } from '~/components/ui';
-
 import type { ReactNode } from 'react';
 import type { FallbackProps } from 'react-error-boundary';
+import { InfoBox, InfoBoxType, InfoBoxStyle } from '@iota/apps-ui-kit';
+import { Warning } from '@iota/ui-icons';
 
 function Fallback({ error }: FallbackProps): JSX.Element {
     return (
-        <Banner variant="error" fullWidth>
-            {error.message}
-        </Banner>
+        <InfoBox
+            title="Error"
+            supportingText={error.message}
+            icon={<Warning />}
+            type={InfoBoxType.Error}
+            style={InfoBoxStyle.Elevated}
+        />
     );
 }
 

diff --git a/apps/explorer/src/components/layout/PageLayout.tsx b/apps/explorer/src/components/layout/PageLayout.tsx
@@ -10,8 +10,8 @@ import { type ReactNode, useRef } from 'react';
 import Footer from '../footer/Footer';
 import Header from '../header/Header';
 import { useNetworkContext } from '~/contexts';
-import { Banner } from '~/components/ui';
-import { LoadingIndicator } from '@iota/apps-ui-kit';
+import { InfoBox, InfoBoxStyle, InfoBoxType, LoadingIndicator } from '@iota/apps-ui-kit';
+import { Info } from '@iota/ui-icons';
 
 type PageLayoutProps = {
     content: ReactNode;
@@ -47,9 +47,12 @@ export function PageLayout({ content, loading }: PageLayoutProps): JSX.Element {
         <div className="relative min-h-screen w-full">
             <section ref={headerRef} className="fixed top-0 z-20 flex w-full flex-col">
                 {renderNetworkDegradeBanner && (
-                    <Banner rounded="none" align="center" variant="warning" fullWidth>
-                        <div className="break-normal">{networkDegradeBannerCopy}</div>
-                    </Banner>
+                    <InfoBox
+                        supportingText={networkDegradeBannerCopy}
+                        icon={<Info />}
+                        type={InfoBoxType.Default}
+                        style={InfoBoxStyle.Elevated}
+                    />
                 )}
                 <Header />
             </section>

diff --git a/apps/explorer/src/components/module/module-functions-interaction/FunctionExecutionResult.tsx b/apps/explorer/src/components/module/module-functions-interaction/FunctionExecutionResult.tsx
@@ -3,9 +3,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { LinkGroup } from './LinkGroup';
-import { Banner } from '~/components/ui';
-
 import type { IotaTransactionBlockResponse, OwnedObjectRef } from '@iota/iota-sdk/client';
+import { Close } from '@iota/ui-icons';
 
 interface ToObjectLink {
     text: string;
@@ -27,10 +26,9 @@ type FunctionExecutionResultProps = {
 
 export function FunctionExecutionResult({ error, result, onClear }: FunctionExecutionResultProps) {
     const adjError = error || (result && result.effects?.status.error) || null;
-    const variant = adjError ? 'error' : 'message';
     return (
-        <Banner icon={null} fullWidth variant={variant} spacing="lg" onDismiss={onClear}>
-            <div className="space-y-4 text-bodySmall">
+        <div className="relative inline-flex flex-nowrap items-center gap-2 overflow-hidden rounded-lg bg-neutral-96 p-xs dark:bg-neutral-12">
+            <div className="space-y-4 text-body-sm">
                 <LinkGroup
                     title="Digest"
                     links={
@@ -53,7 +51,14 @@ export function FunctionExecutionResult({ error, result, onClear }: FunctionExec
                     links={(result && result.effects?.mutated?.map(toObjectLink)) || []}
                 />
                 <LinkGroup title="Transaction failed" text={adjError} />
+                <div className="absolute right-2 top-2">
+                    <Close
+                        className="h-3 w-3 text-neutral-10 dark:text-neutral-92"
+                        onClick={onClear}
+                        aria-label="Close"
+                    />
+                </div>
             </div>
-        </Banner>
+        </div>
     );
 }
diff --git 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 (
-            <Banner variant="error" spacing="lg" fullWidth>
-                Failed to get field data for {id}
-            </Banner>
+            <InfoBox
+                title="Error loading data"
+                supportingText={`Failed to get field data for ${id}`}
+                icon={<Warning />}
+                type={InfoBoxType.Error}
+                style={InfoBoxStyle.Elevated}
+            />
         );
     }
 

diff --git 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 (
-            <Banner variant="error" spacing="lg" fullWidth>
-                Failed to get field data for {parentId}
-            </Banner>
+            <InfoBox
+                title="Error loading data"
+                supportingText={`Failed to get field data for ${parentId}`}
+                icon={<Warning />}
+                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
@@ -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 (
-            <Banner variant="error" fullWidth>
-                Validator data could not be loaded
-            </Banner>
+            <InfoBox
+                title="Failed loading data"
+                supportingText="Validator data could not be loaded"
+                icon={<Warning />}
+                type={InfoBoxType.Error}
+                style={InfoBoxStyle.Elevated}
+            />
         );
     }
 

diff --git 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 (
-            <Banner variant="error" fullWidth>
-                Transactions could not be extracted on the following specified address: {address}
-            </Banner>
+            <InfoBox
+                title="Failed to extract transactions"
+                supportingText={`Transactions could not be extracted on the following specified address: ${address}`}
+                icon={<Warning />}
+                type={InfoBoxType.Error}
+                style={InfoBoxStyle.Elevated}
+            />
         );
     }
 

diff --git a/apps/explorer/src/components/ui/Banner.tsx b/apps/explorer/src/components/ui/Banner.tsx
diff --git a/apps/explorer/src/components/ui/index.ts b/apps/explorer/src/components/ui/index.ts
@@ -6,7 +6,6 @@ export * from './header';
 export * from './image';
 export * from './modal';
 
-export * from './Banner';
 export * from './ButtonOrLink';
 export * from './Card';
 export * from './Divider';