refactor(wallet,dashboard): move TransactionReceipt to core

apps/core/src/components/buttons/ViewTxnOnExplorerButton.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { JSX } from 'react';
+import { Button, ButtonType, LoadingIndicator } from '@iota/apps-ui-kit';
+import { ArrowTopRight } from '@iota/ui-icons';
+
+interface ViewTxnOnExplorerButtonProps {
+    digest?: string;
+}
+
+export function ViewTxnOnExplorerButton({ digest }: ViewTxnOnExplorerButtonProps): JSX.Element {
+    return (
+        <Button
+            type={ButtonType.Outlined}
+            text="View on Explorer"
+            fullWidth
+            icon={digest ? <ArrowTopRight /> : <LoadingIndicator data-testid="loading-indicator" />}
+            iconAfterText
+            disabled={!digest}
+        />
+    );
+}

apps/core/src/components/buttons/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './ViewTxnOnExplorerButton';

apps/wallet/src/ui/app/shared/transaction-summary/cards/BalanceChanges.tsx → apps/core/src/components/cards/BalanceChanges.tsx

@@ -2,22 +2,55 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import {
-    CoinItem,
-    getRecognizedUnRecognizedTokenChanges,
-    type BalanceChange,
-    type BalanceChangeSummary,
-} from '@iota/core';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Divider, Header, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
-import { ExplorerLink, ExplorerLinkType } from '_src/ui/app/components';
+import type { BalanceChangeSummary, RenderExplorerLink } from '../../types';
+import { ExplorerLinkType } from '../../enums';
 import { formatAddress } from '@iota/iota-sdk/utils';
+import { CoinItem } from '../coin';
 import { RecognizedBadge } from '@iota/ui-icons';
+import { getRecognizedUnRecognizedTokenChanges } from '../../utils';
+import { BalanceChange } from '../../interfaces';
 
 interface BalanceChangesProps {
+    renderExplorerLink: RenderExplorerLink;
     changes?: BalanceChangeSummary;
 }
 
+export function BalanceChanges({ changes, renderExplorerLink: ExplorerLink }: BalanceChangesProps) {
+    if (!changes) return null;
+
+    return (
+        <>
+            {Object.entries(changes).map(([owner, changes]) => {
+                return (
+                    <Panel key={owner} hasBorder>
+                        <div className="flex flex-col gap-y-sm overflow-hidden rounded-xl">
+                            <Header title="Balance Changes" />
+                            <BalanceChangeEntries changes={changes} />
+                            <div className="flex flex-col gap-y-sm px-md pb-md">
+                                <Divider />
+                                <KeyValueInfo
+                                    keyText="Owner"
+                                    value={
+                                        <ExplorerLink
+                                            type={ExplorerLinkType.Address}
+                                            address={owner}
+                                        >
+                                            {formatAddress(owner)}
+                                        </ExplorerLink>
+                                    }
+                                    fullwidth
+                                />
+                            </div>
+                        </div>
+                    </Panel>
+                );
+            })}
+        </>
+    );
+}
+
 function BalanceChangeEntry({ change }: { change: BalanceChange }) {
     const { amount, coinType, unRecognizedToken } = change;
     return (
@@ -54,37 +87,3 @@ function BalanceChangeEntries({ changes }: { changes: BalanceChange[] }) {
         </>
     );
 }
-
-export function BalanceChanges({ changes }: BalanceChangesProps) {
-    if (!changes) return null;
-
-    return (
-        <>
-            {Object.entries(changes).map(([owner, changes]) => {
-                return (
-                    <Panel key={owner} hasBorder>
-                        <div className="flex flex-col gap-y-sm overflow-hidden rounded-xl">
-                            <Header title="Balance Changes" />
-                            <BalanceChangeEntries changes={changes} />
-                            <div className="flex flex-col gap-y-sm px-md pb-md">
-                                <Divider />
-                                <KeyValueInfo
-                                    keyText="Owner"
-                                    value={
-                                        <ExplorerLink
-                                            type={ExplorerLinkType.Address}
-                                            address={owner}
-                                        >
-                                            {formatAddress(owner)}
-                                        </ExplorerLink>
-                                    }
-                                    fullwidth
-                                />
-                            </div>
-                        </div>
-                    </Panel>
-                );
-            })}
-        </>
-    );
-}

apps/wallet/src/ui/app/shared/transaction-summary/cards/objectSummary/ObjectChangeDisplay.tsx → apps/core/src/components/cards/ObjectChangeDisplay.tsx

@@ -2,25 +2,28 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ExplorerLink, ExplorerLinkType } from '_components';
-import { type IotaObjectChangeWithDisplay, ImageIcon } from '@iota/core';
-
+import React from 'react';
+import { type IotaObjectChangeWithDisplay, ExplorerLinkType, ImageIcon } from '../../';
 import { Card, CardAction, CardActionType, CardBody, CardImage, CardType } from '@iota/apps-ui-kit';
 import { ArrowTopRight } from '@iota/ui-icons';
+import { RenderExplorerLink } from '../../types';
 
-export function ObjectChangeDisplay({ change }: { change: IotaObjectChangeWithDisplay }) {
+interface ObjectChangeDisplayProps {
+    renderExplorerLink: RenderExplorerLink;
+    change?: IotaObjectChangeWithDisplay;
+}
+export function ObjectChangeDisplay({
+    change,
+    renderExplorerLink: ExplorerLink,
+}: ObjectChangeDisplayProps) {
     const display = change?.display?.data;
     const name = display?.name ?? '';
-    const objectId = 'objectId' in change && change?.objectId;
+    const objectId = change && 'objectId' in change && change?.objectId;
 
     if (!display) return null;
 
     return (
-        <ExplorerLink
-            className="text-hero-dark no-underline"
-            objectID={objectId?.toString() ?? ''}
-            type={ExplorerLinkType.Object}
-        >
+        <ExplorerLink objectID={objectId?.toString() ?? ''} type={ExplorerLinkType.Object}>
             <Card type={CardType.Default} isHoverable>
                 <CardImage>
                     <ImageIcon src={display.image_url ?? ''} label={name} fallback="NFT" />

apps/wallet/src/ui/app/shared/transaction-summary/cards/ObjectChanges.tsx → apps/core/src/components/cards/ObjectChanges.tsx

@@ -1,19 +1,20 @@
 // Copyright (c) Mysten Labs, Inc.
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import { ExplorerLink, ExplorerLinkType } from '_components';
+import React, { useState } from 'react';
 import {
     getObjectChangeLabel,
     type ObjectChangesByOwner,
     type ObjectChangeSummary,
     type IotaObjectChangeTypes,
     type IotaObjectChangeWithDisplay,
-    Collapsible,
-} from '@iota/core';
+    ExplorerLinkType,
+} from '../../';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import cx from 'clsx';
-import { ExpandableList } from '../../ExpandableList';
-import { ObjectChangeDisplay } from './objectSummary/ObjectChangeDisplay';
+import { ExpandableList } from '../lists';
+import { Collapsible } from '../collapsible';
+import { ObjectChangeDisplay } from './ObjectChangeDisplay';
 import {
     Badge,
     BadgeType,
@@ -23,16 +24,17 @@ import {
     Title,
     TitleSize,
 } from '@iota/apps-ui-kit';
-import { useState } from 'react';
 import { TriangleDown } from '@iota/ui-icons';
+import { RenderExplorerLink } from '../../types';
 
 interface ObjectDetailProps {
     change: IotaObjectChangeWithDisplay;
     ownerKey: string;
+    renderExplorerLink: RenderExplorerLink;
     display?: boolean;
 }
 
-export function ObjectDetail({ change, display }: ObjectDetailProps) {
+export function ObjectDetail({ change, renderExplorerLink: ExplorerLink }: ObjectDetailProps) {
     if (change.type === 'transferred' || change.type === 'published') {
         return null;
     }
@@ -127,9 +129,14 @@ export function ObjectDetail({ change, display }: ObjectDetailProps) {
 interface ObjectChangeEntryProps {
     type: IotaObjectChangeTypes;
     changes: ObjectChangesByOwner;
+    renderExplorerLink: RenderExplorerLink;
 }
 
-export function ObjectChangeEntry({ changes, type }: ObjectChangeEntryProps) {
+export function ObjectChangeEntry({
+    changes,
+    type,
+    renderExplorerLink: ExplorerLink,
+}: ObjectChangeEntryProps) {
     const [open, setOpen] = useState(new Set());
     return (
         <>
@@ -169,35 +176,29 @@ export function ObjectChangeEntry({ changes, type }: ObjectChangeEntryProps) {
                                     {!!changes.changesWithDisplay.length && (
                                         <div className="flex flex-1 flex-col gap-2 overflow-y-auto">
                                             <ExpandableList
+                                                initialShowAll={isOpen}
                                                 defaultItemsToShow={5}
-                                                items={
-                                                    isOpen
-                                                        ? changes.changesWithDisplay.map(
-                                                              (change) => (
-                                                                  <ObjectChangeDisplay
-                                                                      change={change}
-                                                                  />
-                                                              ),
-                                                          )
-                                                        : []
-                                                }
+                                                items={changes.changesWithDisplay.map((change) => (
+                                                    <ObjectChangeDisplay
+                                                        change={change}
+                                                        renderExplorerLink={ExplorerLink}
+                                                    />
+                                                ))}
                                             />
                                         </div>
                                     )}
 
                                     <div className="flex w-full flex-col gap-2">
                                         <ExpandableList
                                             defaultItemsToShow={5}
-                                            items={
-                                                open
-                                                    ? changes.changes.map((change) => (
-                                                          <ObjectDetail
-                                                              ownerKey={owner}
-                                                              change={change}
-                                                          />
-                                                      ))
-                                                    : []
-                                            }
+                                            initialShowAll={isOpen}
+                                            items={changes.changes.map((change) => (
+                                                <ObjectDetail
+                                                    renderExplorerLink={ExplorerLink}
+                                                    ownerKey={owner}
+                                                    change={change}
+                                                />
+                                            ))}
                                         />
                                     </div>
                                 </>
@@ -227,9 +228,10 @@ export function ObjectChangeEntry({ changes, type }: ObjectChangeEntryProps) {
 
 interface ObjectChangesProps {
     changes?: ObjectChangeSummary | null;
+    renderExplorerLink: RenderExplorerLink;
 }
 
-export function ObjectChanges({ changes }: ObjectChangesProps) {
+export function ObjectChanges({ changes, renderExplorerLink }: ObjectChangesProps) {
     if (!changes) return null;
 
     return (
@@ -240,6 +242,7 @@ export function ObjectChanges({ changes }: ObjectChangesProps) {
                         key={type}
                         type={type as keyof ObjectChangeSummary}
                         changes={changes}
+                        renderExplorerLink={renderExplorerLink}
                     />
                 );
             })}

apps/core/src/components/cards/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './BalanceChanges';
+export * from './ObjectChanges';

apps/core/src/components/collapsible/Collapsible.tsx

@@ -2,13 +2,12 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React, { useState, type ReactNode } from 'react';
 import { Accordion, AccordionContent, AccordionHeader, Title, TitleSize } from '@iota/apps-ui-kit';
-import { useState, type ReactNode } from 'react';
 
-interface CollapsibleProps {
+interface CollapsibleProps extends React.PropsWithChildren {
     title?: string;
     defaultOpen?: boolean;
-    children: ReactNode | ReactNode[];
     isOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     titleSize?: TitleSize;

apps/wallet/src/ui/app/pages/approval-request/transaction-request/GasFees.tsx → apps/core/src/components/gas/GasFees.tsx

@@ -2,11 +2,13 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
 import { TitleSize, Badge, BadgeType, Title, Panel } from '@iota/apps-ui-kit';
-import { GasSummary } from '_src/ui/app/shared/transaction-summary/cards/GasSummary';
-import { type GasSummaryType, Collapsible } from '@iota/core';
+import { Collapsible, GasSummary, type RenderExplorerLink, type GasSummaryType } from '../../';
 
 interface GasFeesProps {
+    activeAddress: string | null | undefined;
+    renderExplorerLink: RenderExplorerLink;
     sender?: string;
     gasSummary?: GasSummaryType;
     isEstimate?: boolean;
@@ -15,7 +17,15 @@ interface GasFeesProps {
 }
 const DEFAULT_TITLE = 'Gas Fees';
 
-export function GasFees({ sender, gasSummary, isEstimate, isPending, isError }: GasFeesProps) {
+export function GasFees({
+    sender,
+    activeAddress,
+    gasSummary,
+    isEstimate,
+    isPending,
+    isError,
+    renderExplorerLink,
+}: GasFeesProps) {
     const title = isEstimate ? `Est. ${DEFAULT_TITLE}` : DEFAULT_TITLE;
     const trailingElement =
         gasSummary?.isSponsored && gasSummary.owner ? (
@@ -43,6 +53,8 @@ export function GasFees({ sender, gasSummary, isEstimate, isPending, isError }:
                             gasSummary={gasSummary}
                             isPending={isPending}
                             isError={isError}
+                            renderExplorerLink={renderExplorerLink}
+                            activeAddress={activeAddress}
                         />
                     </div>
                 </Collapsible>