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,20 +2,53 @@
 // 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 {
     changes?: BalanceChangeSummary;
+    renderExplorerLink: RenderExplorerLink;
+}
+
+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 }) {
@@ -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 {
+    change?: IotaObjectChangeWithDisplay;
+    renderExplorerLink: RenderExplorerLink;
+}
+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 from 'react';
 import {
     getObjectChangeLabel,
     type ObjectChangesByOwner,
     type ObjectChangeSummary,
     type IotaObjectChangeTypes,
     type IotaObjectChangeWithDisplay,
-} 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 { Collapsible } from '../../collapse';
+import { ExpandableList } from '../lists';
+import { Collapsible } from '../collapsible';
+import { ObjectChangeDisplay } from './ObjectChangeDisplay';
 import {
     Badge,
     BadgeType,
@@ -25,14 +26,20 @@ import {
 } 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;
     display?: boolean;
+    renderExplorerLink: RenderExplorerLink;
 }
 
-export function ObjectDetail({ change, display }: ObjectDetailProps) {
+export function ObjectDetail({
+    change,
+    display,
+    renderExplorerLink: ExplorerLink,
+}: ObjectDetailProps) {
     if (change.type === 'transferred' || change.type === 'published') {
         return null;
     }
@@ -127,9 +134,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 (
         <>
@@ -176,6 +188,9 @@ export function ObjectChangeEntry({ changes, type }: ObjectChangeEntryProps) {
                                                               (change) => (
                                                                   <ObjectChangeDisplay
                                                                       change={change}
+                                                                      renderExplorerLink={
+                                                                          ExplorerLink
+                                                                      }
                                                                   />
                                                               ),
                                                           )
@@ -192,6 +207,7 @@ export function ObjectChangeEntry({ changes, type }: ObjectChangeEntryProps) {
                                                 open
                                                     ? changes.changes.map((change) => (
                                                           <ObjectDetail
+                                                              renderExplorerLink={ExplorerLink}
                                                               ownerKey={owner}
                                                               change={change}
                                                           />
@@ -227,9 +243,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 +257,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/wallet/src/ui/app/shared/collapse/index.tsx → apps/core/src/components/collapsible/Collapsible.tsx

@@ -2,6 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
 import { Accordion, AccordionContent, AccordionHeader, Title, TitleSize } from '@iota/apps-ui-kit';
 import { useState, type ReactNode } from 'react';
 

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

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

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

@@ -2,21 +2,30 @@
 // 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 { Collapsible } from '_src/ui/app/shared/collapse';
-import { GasSummary } from '_src/ui/app/shared/transaction-summary/cards/GasSummary';
-import { type GasSummaryType } from '@iota/core';
+import { Collapsible, GasSummary, type RenderExplorerLink, type GasSummaryType } from '../../';
 
 interface GasFeesProps {
+    activeAddress: string | null | undefined;
     sender?: string;
     gasSummary?: GasSummaryType;
     isEstimate?: boolean;
     isPending?: boolean;
     isError?: boolean;
+    renderExplorerLink: RenderExplorerLink;
 }
 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 ? (
@@ -44,6 +53,8 @@ export function GasFees({ sender, gasSummary, isEstimate, isPending, isError }:
                             gasSummary={gasSummary}
                             isPending={isPending}
                             isError={isError}
+                            renderExplorerLink={renderExplorerLink}
+                            activeAddress={activeAddress}
                         />
                     </div>
                 </Collapsible>

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

@@ -2,22 +2,30 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useFormatCoin, type GasSummaryType } from '@iota/core';
+import React from 'react';
+import { ExplorerLinkType, useFormatCoin, type GasSummaryType } from '../../';
+import { RenderExplorerLink } from '../../types';
 import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 
 import { KeyValueInfo } from '@iota/apps-ui-kit';
-import { useActiveAddress } from '_src/ui/app/hooks';
-import { ExplorerLink, ExplorerLinkType } from '_src/ui/app/components';
 
 interface GasSummaryProps {
     sender?: string | null;
     gasSummary?: GasSummaryType;
     isPending?: boolean;
     isError?: boolean;
+    renderExplorerLink: RenderExplorerLink;
+    activeAddress: string | null | undefined;
 }
 
-export function GasSummary({ sender, gasSummary, isPending, isError }: GasSummaryProps) {
-    const activeAddress = useActiveAddress();
+export function GasSummary({
+    sender,
+    gasSummary,
+    isPending,
+    isError,
+    renderExplorerLink: ExplorerLink,
+    activeAddress,
+}: GasSummaryProps) {
     const address = sender || activeAddress;
     const [gas, symbol] = useFormatCoin(gasSummary?.totalGas, IOTA_TYPE_ARG);
 

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

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

apps/core/src/components/index.ts

@@ -2,8 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './coin';
+export * from './cards';
+export * from './gas';
 export * from './icon';
 export * from './Inputs';
 export * from './QR';
+export * from './transaction';
+export * from './collapsible';
+export * from './buttons';
 
 export * from './providers';

apps/wallet/src/ui/app/shared/ExpandableList.tsx → apps/core/src/components/lists/ExpandableList.tsx

@@ -2,9 +2,9 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
 import clsx from 'clsx';
 import { useMemo, useState, type ReactNode } from 'react';
-
 import { TriangleDown } from '@iota/ui-icons';
 import { Button, ButtonSize, ButtonType } from '@iota/apps-ui-kit';