+
+ );
+}
+
+interface TransactionStatusProps {
+ success: boolean;
+ timestamp?: string;
+ isIncoming?: boolean;
+}
+
+function TransactionStatus({ success, timestamp, isIncoming }: TransactionStatusProps) {
+ const txnDate = timestamp ? formatDate(Number(timestamp)) : '';
+ const successMessage = isIncoming ? 'Successfully received' : 'Successfully sent';
+ return (
+
+
+
+ {validatorAddress && (
+
+ );
+}
diff --git a/apps/core/src/components/transaction/details/index.ts b/apps/core/src/components/transaction/details/index.ts
new file mode 100644
index 00000000000..021232db15a
--- /dev/null
+++ b/apps/core/src/components/transaction/details/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './StakeTransactionDetails';
diff --git a/apps/core/src/components/transaction/index.ts b/apps/core/src/components/transaction/index.ts
new file mode 100644
index 00000000000..bedefbc5d7e
--- /dev/null
+++ b/apps/core/src/components/transaction/index.ts
@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './info';
+export * from './summary';
+
+export * from './TransactionReceipt';
diff --git a/apps/wallet/src/ui/app/components/receipt-card/StakeTxnInfo.tsx b/apps/core/src/components/transaction/info/StakeTransactionInfo.tsx
similarity index 69%
rename from apps/wallet/src/ui/app/components/receipt-card/StakeTxnInfo.tsx
rename to apps/core/src/components/transaction/info/StakeTransactionInfo.tsx
index c4b94e7eb6f..47f00c48d4f 100644
--- a/apps/wallet/src/ui/app/components/receipt-card/StakeTxnInfo.tsx
+++ b/apps/core/src/components/transaction/info/StakeTransactionInfo.tsx
@@ -2,17 +2,26 @@
// Modifications Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
import { Divider, KeyValueInfo, Panel, TooltipPosition } from '@iota/apps-ui-kit';
-import { type GasSummaryType, useStakeTxnInfo } from '@iota/core';
-import { GasSummary } from '../../shared/transaction-summary/cards/GasSummary';
+import { type GasSummaryType, useStakeTxnInfo, GasSummary } from '../../../';
+import { RenderExplorerLink } from '../../../types';
-interface StakeTxnInfoProps {
+interface StakeTransactionInfoProps {
+ activeAddress: string | null;
+ renderExplorerLink: RenderExplorerLink;
apy?: string;
startEpoch?: string | number;
gasSummary?: GasSummaryType;
}
-export function StakeTxnInfo({ apy, startEpoch, gasSummary }: StakeTxnInfoProps) {
+export function StakeTransactionInfo({
+ apy,
+ startEpoch,
+ gasSummary,
+ activeAddress,
+ renderExplorerLink,
+}: StakeTransactionInfoProps) {
const { stakedRewardsStartEpoch, timeBeforeStakeRewardsRedeemableAgoDisplay } =
useStakeTxnInfo(startEpoch);
return (
@@ -38,7 +47,11 @@ export function StakeTxnInfo({ apy, startEpoch, gasSummary }: StakeTxnInfoProps)
fullwidth
/>
- {validatorAddress && (
-
diff --git a/apps/core/src/components/transaction/info/index.ts b/apps/core/src/components/transaction/info/index.ts
new file mode 100644
index 00000000000..60bcbb74f47
--- /dev/null
+++ b/apps/core/src/components/transaction/info/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './StakeTransactionInfo';
+export * from './UnstakeTransactionInfo';
diff --git a/apps/core/src/components/transaction/summary/TransactionSummary.tsx b/apps/core/src/components/transaction/summary/TransactionSummary.tsx
new file mode 100644
index 00000000000..090d84d8ece
--- /dev/null
+++ b/apps/core/src/components/transaction/summary/TransactionSummary.tsx
@@ -0,0 +1,49 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { type TransactionSummaryType } from '../../..';
+import { BalanceChanges, ObjectChanges } from '../../cards';
+import { LoadingIndicator, Title, TitleSize } from '@iota/apps-ui-kit';
+import { RenderExplorerLink } from '../../../types';
+
+interface TransactionSummaryProps {
+ summary: TransactionSummaryType;
+ renderExplorerLink: RenderExplorerLink;
+ isLoading?: boolean;
+ isError?: boolean;
+ isDryRun?: boolean;
+}
+
+export function TransactionSummary({
+ summary,
+ isLoading,
+ isError,
+ isDryRun = false,
+ renderExplorerLink,
+}: TransactionSummaryProps) {
+ if (isError) return null;
+ return (
+ <>
+ {isLoading ? (
+
@@ -50,7 +57,11 @@ export function UnStakeTxn({ event, gasSummary }: UnStakeTxnProps) {
fullwidth
/>
+
+ ) : (
+
+ {isDryRun && (
+
+ )}
+
+ );
+}
diff --git a/apps/core/src/components/transaction/summary/index.ts b/apps/core/src/components/transaction/summary/index.ts
new file mode 100644
index 00000000000..60b127c09ce
--- /dev/null
+++ b/apps/core/src/components/transaction/summary/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './TransactionSummary';
diff --git a/apps/core/src/hooks/index.ts b/apps/core/src/hooks/index.ts
index 13c49c813b6..122b9b01294 100644
--- a/apps/core/src/hooks/index.ts
+++ b/apps/core/src/hooks/index.ts
@@ -30,7 +30,6 @@ export * from './useTokenPrice';
export * from './useKioskClient';
export * from './useQueryTransactionsByAddress';
export * from './useGetTransaction';
-export * from './useExtendedTransactionSummary';
export * from './useSortedCoinsByCategories';
export * from './useGetNFTDisplay';
export * from './useIotaAddressValidation';
diff --git a/apps/core/src/hooks/useExtendedTransactionSummary.ts b/apps/core/src/hooks/useExtendedTransactionSummary.ts
deleted file mode 100644
index 8fb9ccc3b36..00000000000
--- a/apps/core/src/hooks/useExtendedTransactionSummary.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { useTransactionSummary } from './';
-import { useCurrentAccount, useIotaClient } from '@iota/dapp-kit';
-import { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
-import { useQuery } from '@tanstack/react-query';
-
-export function useExtendedTransactionSummary(
- transactionDigest: string,
-): ReturnType
@@ -165,6 +173,7 @@ function StakingDashboardPage(): JSX.Element {
{isContainedInKiosk && kioskItem?.isLocked ? (
+
+
-
+
+
-
-
+
+
);
}
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
index cc6484119c7..2c9f72a2911 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx
@@ -1,7 +1,7 @@
// Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
import { EnterAmountView, EnterTimelockedAmountView, SelectValidatorView } from './views';
import {
useNotifications,
@@ -29,14 +29,8 @@ import { prepareObjectsForTimelockedStakingTransaction } from '@/lib/utils';
import { Dialog } from '@iota/apps-ui-kit';
import { DetailsView, UnstakeView } from './views';
import { FormValues } from './views/EnterAmountView';
-
-export enum StakeDialogView {
- Details = 'Details',
- SelectValidator = 'SelectValidator',
- EnterAmount = 'EnterAmount',
- EnterTimelockedAmount = 'EnterTimelockedAmount',
- Unstake = 'Unstake',
-}
+import { TransactionDialogView } from '../TransactionDialog';
+import { StakeDialogView } from './enums/view.enums';
const INITIAL_VALUES = {
amount: '',
@@ -45,8 +39,8 @@ const INITIAL_VALUES = {
interface StakeDialogProps {
isOpen: boolean;
handleClose: () => void;
- view?: StakeDialogView;
- setView?: (view: StakeDialogView) => void;
+ view: StakeDialogView | undefined;
+ setView: (view: StakeDialogView) => void;
stakedDetails?: ExtendedDelegatedStake | null;
maxStakableTimelockedAmount?: bigint;
isTimelockedStaking?: boolean;
@@ -71,6 +65,7 @@ export function StakeDialog({
const senderAddress = account?.address ?? '';
const { data: iotaBalance } = useBalance(senderAddress!);
const coinBalance = BigInt(iotaBalance?.totalBalance || 0);
+ const [txDigest, setTxDigest] = useState('');
const { data: metadata } = useCoinMetadata(IOTA_TYPE_ARG);
const coinDecimals = metadata?.decimals ?? 0;
@@ -166,19 +161,16 @@ export function StakeDialog({
},
{
onSuccess: (tx) => {
- if (onSuccess) {
- onSuccess(tx.digest);
- }
+ onSuccess?.(tx.digest);
+ addNotification('Stake transaction has been sent');
+ setTxDigest(tx.digest);
+ setView?.(StakeDialogView.TransactionDetails);
+ },
+ onError: () => {
+ addNotification('Stake transaction was not sent', NotificationType.Error);
},
},
- )
- .then(() => {
- handleClose();
- addNotification('Stake transaction has been sent');
- })
- .catch(() => {
- addNotification('Stake transaction was not sent', NotificationType.Error);
- });
+ );
}
function onSubmit(_: FormValues, { resetForm }: FormikHelpers) {
@@ -236,6 +228,9 @@ export function StakeDialog({
showActiveStatus
/>
)}
+ {view === StakeDialogView.TransactionDetails && (
+ ();
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/index.ts b/apps/wallet-dashboard/components/Dialogs/Staking/index.ts
index e865a70c7d2..bf9af6d49a4 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/index.ts
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/index.ts
@@ -1,5 +1,6 @@
// Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0
+export * from './enums';
export * from './StakeDialog';
export * from './hooks';
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/DetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Staking/views/DetailsView.tsx
index 7e81f984e79..0cdba0031e1 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/DetailsView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Staking/views/DetailsView.tsx
@@ -30,7 +30,7 @@ import {
} from '@iota/apps-ui-kit';
import { Warning } from '@iota/ui-icons';
import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { Layout, LayoutFooter, LayoutBody } from './Layout';
+import { DialogLayout, DialogLayoutFooter, DialogLayoutBody } from '../../layout';
interface StakeDialogProps {
stakedDetails: ExtendedDelegatedStake;
@@ -101,9 +101,9 @@ export function DetailsView({
}
return (
-
+
+
@@ -144,8 +144,8 @@ export function DetailsView({
-
-
@@ -194,7 +194,7 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
/>
)}
-
-
+
+
);
}
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx
index 973d0407fd9..b5757582c7b 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx
@@ -4,7 +4,7 @@
import React from 'react';
import { AddressInput, useNftDetails } from '@iota/core';
import { useFormikContext } from 'formik';
-import { Layout, LayoutBody, LayoutFooter } from '../../Staking/views/Layout';
+import { DialogLayout, DialogLayoutFooter, DialogLayoutBody } from '../../layout';
import {
Button,
ButtonHtmlType,
@@ -33,9 +33,9 @@ export function SendView({ asset, onClose, onBack }: SendViewProps) {
const { nftName, nftImageUrl } = useNftDetails(objectId, senderAddress);
return (
-
@@ -167,8 +167,8 @@ function EnterAmountView({
@@ -149,8 +149,8 @@ function EnterTimelockedAmountView({
{validators.map((validator) => (
@@ -38,18 +38,18 @@ function SelectValidatorView({
))}
@@ -50,12 +66,12 @@ export function Validator({
- void;
+ onBack?: () => void;
+}
+
+export function TransactionDialogView({
+ txDigest,
+ onClose,
+ onBack,
+}: TransactionViewProps): React.JSX.Element | null {
+ const activeAddress = useCurrentAccount()?.address ?? '';
+ const { data: transaction, summary } = useGetTransactionWithSummary(
+ txDigest ?? '',
+ activeAddress,
+ );
+
+ return (
+
+
+ {transaction && summary ? (
+
+
+
+
+
+
+ );
+}
diff --git a/apps/wallet-dashboard/components/Dialogs/Staking/views/Layout.tsx b/apps/wallet-dashboard/components/Dialogs/layout/DialogLayout.tsx
similarity index 76%
rename from apps/wallet-dashboard/components/Dialogs/Staking/views/Layout.tsx
rename to apps/wallet-dashboard/components/Dialogs/layout/DialogLayout.tsx
index 7986ce592d0..9405c120097 100644
--- a/apps/wallet-dashboard/components/Dialogs/Staking/views/Layout.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/layout/DialogLayout.tsx
@@ -3,7 +3,7 @@
import { PropsWithChildren } from 'react';
import { DialogBody, DialogContent, DialogPosition } from '@iota/apps-ui-kit';
-export function Layout({ children }: PropsWithChildren) {
+export function DialogLayout({ children }: PropsWithChildren) {
return (
{children}
@@ -19,6 +19,6 @@ export function LayoutBody({ children }: PropsWithChildren) {
);
}
-export function LayoutFooter({ children }: PropsWithChildren) {
+export function DialogLayoutFooter({ children }: PropsWithChildren) {
return
-
-
+
+
+
+
-
+
+ ;
-}
-
-export default function BalanceChanges({ balanceChanges }: BalanceChangesProps) {
- return (
- <>
- {Object.entries(balanceChanges).map(([owner, balanceChanges], index) => (
- {children} ;
+}
diff --git a/apps/wallet/src/ui/app/components/index.ts b/apps/wallet/src/ui/app/components/index.ts
index 5dd1c520da6..978c70b11b4 100644
--- a/apps/wallet/src/ui/app/components/index.ts
+++ b/apps/wallet/src/ui/app/components/index.ts
@@ -11,6 +11,7 @@ export * from './PasswordInputDialog';
export * from './SectionHeader';
export * from './SummaryCard';
export * from './WalletListSelect';
+export * from './ExplorerLinkHelper';
export * from './accounts';
export * from './active-coins-card';
export * from './error-boundary';
diff --git a/apps/wallet/src/ui/app/components/receipt-card/StakeTxn.tsx b/apps/wallet/src/ui/app/components/receipt-card/StakeTxn.tsx
deleted file mode 100644
index 94aa3c6285b..00000000000
--- a/apps/wallet/src/ui/app/components/receipt-card/StakeTxn.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { ValidatorLogo } from '_app/staking/validators/ValidatorLogo';
-import { TxnAmount } from '_components';
-
-import { formatPercentageDisplay, type GasSummaryType, useGetValidatorsApy } from '@iota/core';
-import type { IotaEvent } from '@iota/iota-sdk/client';
-import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-
-import { CardType } from '@iota/apps-ui-kit';
-import { StakeTxnInfo } from './StakeTxnInfo';
-
-interface StakeTxnProps {
- event: IotaEvent;
- gasSummary?: GasSummaryType;
-}
-
-// For Staked Transaction use moveEvent Field to get the validator address, delegation amount, epoch
-export function StakeTxn({ event, gasSummary }: StakeTxnProps) {
- const json = event.parsedJson as {
- amount: string;
- validator_address: string;
- epoch: string;
- };
- const validatorAddress = json?.validator_address;
- const stakedAmount = json?.amount;
- const stakedEpoch = Number(json?.epoch || '0');
-
- const { data: rollingAverageApys } = useGetValidatorsApy();
-
- const { apy, isApyApproxZero } = rollingAverageApys?.[validatorAddress] ?? {
- apy: null,
- };
-
- return (
-
diff --git a/apps/wallet/src/ui/app/pages/home/receipt/index.tsx b/apps/wallet/src/ui/app/pages/home/receipt/index.tsx
index 44749f6c186..6afd778f2a9 100644
--- a/apps/wallet/src/ui/app/pages/home/receipt/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/receipt/index.tsx
@@ -5,13 +5,12 @@
import { Loading, Overlay, ReceiptCard } from '_components';
import { useActiveAddress } from '_src/ui/app/hooks/useActiveAddress';
import { useUnlockedGuard } from '_src/ui/app/hooks/useUnlockedGuard';
-import { useIotaClient } from '@iota/dapp-kit';
-import { type IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
-import { useQuery } from '@tanstack/react-query';
import { useCallback, useMemo, useState } from 'react';
import { Navigate, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
import { Checkmark, Warning } from '@iota/ui-icons';
import { InfoBox, InfoBoxType, InfoBoxStyle } from '@iota/apps-ui-kit';
+import type { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
+import { useGetTransaction } from '@iota/core';
function ReceiptPage() {
const location = useLocation();
@@ -22,25 +21,14 @@ function ReceiptPage() {
// get tx results from url params
const transactionId = searchParams.get('txdigest');
const fromParam = searchParams.get('from');
- const client = useIotaClient();
- const { data, isPending, isError, error } = useQuery{children}
@@ -11,7 +11,7 @@ export function Layout({ children }: PropsWithChildren) {
);
}
-export function LayoutBody({ children }: PropsWithChildren) {
+export function DialogLayoutBody({ children }: PropsWithChildren) {
return (
{children}
;
}
diff --git a/apps/wallet-dashboard/components/Dialogs/layout/index.ts b/apps/wallet-dashboard/components/Dialogs/layout/index.ts
new file mode 100644
index 00000000000..23dcbf8ce3d
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/layout/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './DialogLayout';
diff --git a/apps/wallet-dashboard/components/Popup/Popups/TransactionDetailsPopup.tsx b/apps/wallet-dashboard/components/Popup/Popups/TransactionDetailsPopup.tsx
deleted file mode 100644
index bb622c166dd..00000000000
--- a/apps/wallet-dashboard/components/Popup/Popups/TransactionDetailsPopup.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import React, { PropsWithChildren } from 'react';
-import { ExtendedTransaction } from '@/lib/interfaces';
-import {
- formatDate,
- useExtendedTransactionSummary,
- STAKING_REQUEST_EVENT,
- UNSTAKING_REQUEST_EVENT,
-} from '@iota/core';
-import {
- StakeTransactionCard,
- TransactionSummary,
- UnstakeTransactionCard,
-} from '@/components/transactions';
-
-interface TransactionDetailsPopupProps {
- transaction: ExtendedTransaction;
- onClose: () => void;
-}
-
-function LabeledValue({ label, children }: PropsWithChildren<{ label: string }>): JSX.Element {
- return (
-
-
- );
-}
-
-export default function TransactionDetailsPopup({
- transaction,
- onClose,
-}: TransactionDetailsPopupProps): JSX.Element {
- const { raw: rawTransaction } = transaction;
- const { events } = rawTransaction;
-
- const transactionSummary = useExtendedTransactionSummary(rawTransaction.digest);
-
- const txDate = !Number.isNaN(rawTransaction.timestampMs)
- ? formatDate(Number(rawTransaction.timestampMs), ['month', 'day', 'hour', 'minute'])
- : undefined;
-
- const stakedTxn = events?.find(({ type }) => type === STAKING_REQUEST_EVENT);
- const unstakeTxn = events?.find(({ type }) => type === UNSTAKING_REQUEST_EVENT);
-
- return (
- - {label}: -
-{children}
-
-
- );
-}
diff --git a/apps/wallet-dashboard/components/Popup/Popups/index.ts b/apps/wallet-dashboard/components/Popup/Popups/index.ts
index e0e4a17db69..ebdfc7f7391 100644
--- a/apps/wallet-dashboard/components/Popup/Popups/index.ts
+++ b/apps/wallet-dashboard/components/Popup/Popups/index.ts
@@ -1,7 +1,6 @@
// Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0
-export { default as TransactionDetailsPopup } from './TransactionDetailsPopup';
export { default as UnstakePopup } from './UnstakePopup';
export { default as SendAssetPopup } from './SendAssetPopup';
diff --git a/apps/wallet-dashboard/components/transactions/GasSummary.tsx b/apps/wallet-dashboard/components/transactions/GasSummary.tsx
deleted file mode 100644
index 3b522432a40..00000000000
--- a/apps/wallet-dashboard/components/transactions/GasSummary.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { useFormatCoin, type GasSummaryType } from '@iota/core';
-import { useCurrentAccount } from '@iota/dapp-kit';
-import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-
-export default function GasSummary({ gasSummary }: { gasSummary: GasSummaryType }) {
- const [gas, symbol] = useFormatCoin(gasSummary?.totalGas, IOTA_TYPE_ARG);
- const address = useCurrentAccount();
-
- return (
-
-
-
- Transaction Details
-
- {transaction.state}
- {transaction.action}
- {txDate}
-
-
-
-
-
- {(stakedTxn || unstakeTxn) && (
- Transaction Summary
-
- {stakedTxn &&
- )}
-
-
- );
-}
diff --git a/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx b/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx
index 94a8db43b57..6cca89942ca 100644
--- a/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx
+++ b/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx
@@ -1,20 +1,25 @@
// Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0
-import { type TransactionSummary as TransactionSummaryType } from '@iota/core';
-import { BalanceChanges, ObjectChanges, GasSummary } from './';
+import { type TransactionSummaryType, GasSummary } from '@iota/core';
+import { BalanceChanges, ObjectChanges } from '@iota/core';
+import { ExplorerLink } from '../ExplorerLink';
+
+interface TransactionSummaryProps {
+ summary: TransactionSummaryType;
+ activeAddress: string | null | undefined;
+ isLoading?: boolean;
+ isError?: boolean;
+ showGasSummary?: boolean;
+}
export default function TransactionSummary({
summary,
isLoading,
isError,
showGasSummary = false,
-}: {
- summary: TransactionSummaryType;
- isLoading?: boolean;
- isError?: boolean;
- showGasSummary?: boolean;
-}) {
+ activeAddress,
+}: TransactionSummaryProps) {
if (isError) return null;
if (isLoading) return Gas Fees
-
-
-
- {address?.address === gasSummary?.owner && (
-
- {gasSummary?.isSponsored && gasSummary.owner && (
- <>
- You Paid
- )}
- - {gasSummary?.isSponsored ? '0' : gas} {symbol} -
-
- Paid by Sponsor
- {gas} {symbol}
-
-
- Sponsor:
- {formatAddress(gasSummary.owner)}
-
-
- )}
- Loading...
;
if (!summary || (!summary.balanceChanges && !summary.objectSummary && !summary.gas))
@@ -25,16 +30,28 @@ export default function TransactionSummary({
{summary.balanceChanges && (
Balance Changes
-Changes
-
- {[...recognizedTokenChanges, ...unRecognizedTokenChanges].map(
- (balanceChange, index) => (
-
- );
-}
diff --git a/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntry.tsx b/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntry.tsx
deleted file mode 100644
index c4b9f85279f..00000000000
--- a/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntry.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { BalanceChange, CoinFormat, useFormatCoin, useCoinMetadata } from '@iota/core';
-import { formatAddress } from '@iota/iota-sdk/utils';
-
-interface BalanceChangeEntryProps {
- balanceChange: BalanceChange;
-}
-
-export default function BalanceChangeEntry({
- balanceChange: { amount, coinType, unRecognizedToken, owner },
-}: BalanceChangeEntryProps) {
- const [formatted, symbol] = useFormatCoin(amount, coinType, CoinFormat.FULL);
- const { data: coinMetaData } = useCoinMetadata(coinType);
-
- const isPositive = BigInt(amount) > 0n;
-
- return (
-
-
- );
-}
diff --git a/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChanges.tsx b/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChanges.tsx
deleted file mode 100644
index 34c507c62d7..00000000000
--- a/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChanges.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { BalanceChange } from '@iota/core';
-import { BalanceChangeEntries } from '.';
-
-interface BalanceChangesProps {
- balanceChanges: Record
-
- {owner && (
-
- {coinMetaData?.name || symbol}
- {unRecognizedToken &&
- Unrecognized
}
-
- {isPositive && <>+}
- {formatted} {symbol}
-
-
- Owner
- {formatAddress(owner)}
-
- )}
-
- {changes.changes.map((change) => (
-
- ))}
-
- );
-}
-
-function getChangeKey(change: IotaObjectChange) {
- return change.type !== 'deleted' && change.type !== 'wrapped' ? change.digest : change.objectId;
-}
diff --git a/apps/wallet-dashboard/components/transactions/object-changes/ObjectChanges.tsx b/apps/wallet-dashboard/components/transactions/object-changes/ObjectChanges.tsx
deleted file mode 100644
index b3b246e6f0e..00000000000
--- a/apps/wallet-dashboard/components/transactions/object-changes/ObjectChanges.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { ObjectChangeSummary, IotaObjectChangeTypes } from '@iota/core';
-import { ObjectChangeEntry } from '.';
-
-interface ObjectChangesProps {
- objectSummary: ObjectChangeSummary;
-}
-
-export default function ObjectChanges({ objectSummary }: ObjectChangesProps) {
- return (
- <>
- {Object.entries(objectSummary).map(([type, changes]) => (
-
-
- );
-}
diff --git a/apps/wallet-dashboard/components/transactions/object-changes/index.ts b/apps/wallet-dashboard/components/transactions/object-changes/index.ts
deleted file mode 100644
index 0e88da93730..00000000000
--- a/apps/wallet-dashboard/components/transactions/object-changes/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-export { default as ObjectChangeEntry } from './ObjectChangeEntry';
-export { default as ObjectChanges } from './ObjectChanges';
-export { default as ObjectDetail } from './ObjectDetail';
diff --git a/apps/wallet/src/ui/app/components/ExplorerLinkHelper.tsx b/apps/wallet/src/ui/app/components/ExplorerLinkHelper.tsx
new file mode 100644
index 00000000000..bbc381a0e44
--- /dev/null
+++ b/apps/wallet/src/ui/app/components/ExplorerLinkHelper.tsx
@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RenderExplorerLinkProps } from '@iota/core';
+import ExplorerLink from './explorer-link';
+
+export function ExplorerLinkHelper({ children, ...linkProps }: RenderExplorerLinkProps) {
+ return {getObjectChangeLabel(change.type)}
- -
- 
- )}
-
-
- {ownerDisplay && (
-
- {change.objectId && (
-
-
- {displayData && displayData.data && (
- // eslint-disable-next-line @next/next/no-img-element
-
- Object
-
- )}
-
- {objectDetails.map((item) => {
- const shouldFormatValue = isValidIotaAddress(item.value);
- return (
- {formatAddress(change.objectId)}
-
- {item.label}
-
- );
- })}
-
- {shouldFormatValue ? formatAddress(item.value) : item.value}
-
-
- Owner
- {ownerDisplay}
-
- )}
-
- {validatorAddress && (
-
- );
-}
diff --git a/apps/wallet/src/ui/app/components/receipt-card/index.tsx b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
index 9f75dc287f8..3bba1a45a7f 100644
--- a/apps/wallet/src/ui/app/components/receipt-card/index.tsx
+++ b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
@@ -5,44 +5,16 @@
import { useRecognizedPackages } from '_src/ui/app/hooks/useRecognizedPackages';
import {
useTransactionSummary,
- STAKING_REQUEST_EVENT,
- UNSTAKING_REQUEST_EVENT,
- formatDate,
+ TransactionReceipt,
+ ExplorerLinkType,
+ ViewTxnOnExplorerButton,
} from '@iota/core';
import { type IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
-import { TransactionSummary } from '../../shared/transaction-summary';
-import { StakeTxn } from './StakeTxn';
-import { UnStakeTxn } from './UnstakeTxn';
-import {
- Button,
- ButtonType,
- InfoBox,
- InfoBoxStyle,
- InfoBoxType,
- LoadingIndicator,
-} from '@iota/apps-ui-kit';
-import { ArrowTopRight, CheckmarkFilled } from '@iota/ui-icons';
-import { GasFees } from '../../pages/approval-request/transaction-request/GasFees';
-import ExplorerLink, { ExplorerLinkType } from '../explorer-link';
-
-interface TransactionStatusProps {
- success: boolean;
- timestamp?: string;
-}
-
-function TransactionStatus({ success, timestamp }: TransactionStatusProps) {
- const txnDate = timestamp ? formatDate(Number(timestamp)) : '';
- return (
-
-
-
- ) : (
-
diff --git a/apps/wallet/src/ui/app/pages/approval-request/transaction-request/index.tsx b/apps/wallet/src/ui/app/pages/approval-request/transaction-request/index.tsx
index d618abe0265..e3cf45db226 100644
--- a/apps/wallet/src/ui/app/pages/approval-request/transaction-request/index.tsx
+++ b/apps/wallet/src/ui/app/pages/approval-request/transaction-request/index.tsx
@@ -2,8 +2,8 @@
// Modifications Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0
-import { UserApproveContainer } from '_components';
-import { useAppDispatch, useTransactionData, useTransactionDryRun } from '_hooks';
+import { ExplorerLinkHelper, UserApproveContainer } from '_components';
+import { useActiveAddress, useAppDispatch, useTransactionData, useTransactionDryRun } from '_hooks';
import { type TransactionApprovalRequest } from '_payloads/transactions/ApprovalRequest';
import { respondToTransactionRequest } from '_redux/slices/transaction-requests';
import { ampli } from '_src/shared/analytics/ampli';
@@ -11,13 +11,11 @@ import { useAccountByAddress } from '_src/ui/app/hooks/useAccountByAddress';
import { useRecognizedPackages } from '_src/ui/app/hooks/useRecognizedPackages';
import { useSigner } from '_src/ui/app/hooks/useSigner';
import { PageMainLayoutTitle } from '_src/ui/app/shared/page-main-layout/PageMainLayoutTitle';
-import { TransactionSummary } from '_src/ui/app/shared/transaction-summary';
-import { useTransactionSummary } from '@iota/core';
+import { useTransactionSummary, TransactionSummary, GasFees } from '@iota/core';
import { Transaction } from '@iota/iota-sdk/transactions';
import { useMemo, useState } from 'react';
import { ConfirmationModal } from '../../../shared/ConfirmationModal';
-import { GasFees } from './GasFees';
import { TransactionDetails } from './TransactionDetails';
export interface TransactionRequestProps {
@@ -32,6 +30,7 @@ const APP_ORIGINS_TO_EXCLUDE_FROM_ANALYTICS = ['https://iota8192.ethoswallet.xyz
export function TransactionRequest({ txRequest }: TransactionRequestProps) {
const addressForTransaction = txRequest.tx.account;
+ const activeAddress = useActiveAddress();
const { data: accountForTransaction } = useAccountByAddress(addressForTransaction);
const signer = useSigner(accountForTransaction);
const dispatch = useAppDispatch();
@@ -99,6 +98,7 @@ export function TransactionRequest({ txRequest }: TransactionRequestProps) {
isLoading={isDryRunLoading}
isError={isDryRunError}
summary={summary}
+ renderExplorerLink={ExplorerLinkHelper}
/>
- (
+
+ />
-
- ) : (
-
- {isDryRun && (
-
- )}
-
- );
-}
diff --git a/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx b/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
index 83a70ef19a8..093991e6f33 100644
--- a/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
+++ b/apps/wallet/src/ui/app/staking/stake/StakeForm.tsx
@@ -7,6 +7,7 @@ import {
createStakeTransaction,
getGasSummary,
parseAmount,
+ StakeTransactionInfo,
useCoinMetadata,
useFormatCoin,
useStakingGasBudgetEstimation,
@@ -16,9 +17,9 @@ import { memo, useEffect, useMemo } from 'react';
import { useActiveAddress, useTransactionDryRun } from '../../hooks';
import { type FormValues } from './StakingCard';
import { InfoBox, InfoBoxStyle, InfoBoxType, Input, InputType } from '@iota/apps-ui-kit';
-import { StakeTxnInfo } from '../../components/receipt-card/StakeTxnInfo';
import { Transaction } from '@iota/iota-sdk/transactions';
import { Exclamation } from '@iota/ui-icons';
+import { ExplorerLinkHelper } from '../../components';
export interface StakeFromProps {
validatorAddress: string;
@@ -106,7 +107,12 @@ function StakeForm({ validatorAddress, coinBalance, coinType, epoch }: StakeFrom
icon={
-
- Do you approve these actions?
-
-
- )}
-