iotaledger · marc2332 · Nov 6, 2024 · Oct 25, 2024 · Oct 28, 2024 · Oct 28, 2024
@@ -13,9 +13,9 @@ export const IMAGE_VARIANT_CLASSES: { [key in ImageShape]: string } = {
 };
 
 export const IMAGE_BG_CLASSES: { [key in ImageType]: string } = {
-    [ImageType.Placeholder]: ``,
-    [ImageType.BgSolid]: `bg-neutral-96`,
-    [ImageType.BgTransparent]: ``,
+    [ImageType.Placeholder]: '',
+    [ImageType.BgSolid]: 'bg-neutral-96 dark:bg-neutral-10',
+    [ImageType.BgTransparent]: '',
 };
 
 export const CARD_TYPE_CLASSES: Record<CardType, string> = {

@@ -2,12 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 'use client';
 
-import { AccountBalance, MyCoins } from '@/components';
+import { AccountBalance, MyCoins, TransactionsOverview } from '@/components';
 import { useCurrentAccount, useCurrentWallet } from '@iota/dapp-kit';
 
 function HomeDashboardPage(): JSX.Element {
     const { connectionStatus } = useCurrentWallet();
     const account = useCurrentAccount();
+
     return (
         <main className="flex flex-1 flex-col items-center space-y-8 py-md">
             {connectionStatus === 'connected' && account && (
@@ -32,7 +33,7 @@ function HomeDashboardPage(): JSX.Element {
                             Vesting
                         </div>
                         <div style={{ gridArea: 'activity' }} className="flex grow overflow-hidden">
-                            Activity
+                            <TransactionsOverview />
                         </div>
                     </div>
                 </>

@@ -13,7 +13,7 @@ import {
     StakeTransactionCard,
     TransactionSummary,
     UnstakeTransactionCard,
-} from '@/components/Transaction';
+} from '@/components/transactions';
 
 interface TransactionDetailsPopupProps {
     transaction: ExtendedTransaction;

@@ -72,7 +72,7 @@ function VirtualList<T>({
                 {virtualItems.map((virtualItem) => (
                     <div
                         key={virtualItem.key}
-                        className={`absolute w-full pb-4 pr-4 ${onClick ? 'cursor-pointer' : ''}`}
+                        className={`absolute w-full  ${onClick ? 'cursor-pointer' : ''}`}
                         style={{
                             position: 'absolute',
                             top: 0,

@@ -3,13 +3,11 @@
 
 export { default as RouteLink } from './RouteLink';
 export { default as Notifications } from './Notifications/Notifications';
-export { default as TransactionTile } from './TransactionTile';
 export { default as Box } from './Box';
 export { default as AmountBox } from './AmountBox';
 export { default as Input } from './Input';
 export { default as VirtualList } from './VirtualList';
 export { default as ExternalImage } from './ExternalImage';
-export { default as TransactionIcon } from './TransactionIcon';
 export { default as Dropdown } from './Dropdown';
 
 export * from './account-balance/AccountBalance';
@@ -18,5 +16,6 @@ export * from './Popup';
 export * from './AppList';
 export * from './Cards';
 export * from './Buttons';
+export * from './transactions';
 export * from './Dialogs';
 export * from './ImageIcon';
@@ -0,0 +1,32 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { LoadingIndicator } from '@iota/apps-ui-kit';
+import { ArrowBottomLeft, ArrowTopRight, Info, IotaLogoMark, Person, Stake } from '@iota/ui-icons';
+
+const ICON_COLORS = {
+    primary: 'text-primary-30',
+    error: 'text-error-30',
+};
+
+const icons = {
+    Send: <ArrowTopRight className={ICON_COLORS.primary} />,
+    Receive: <ArrowBottomLeft className={ICON_COLORS.primary} />,
+    Transaction: <ArrowTopRight className={ICON_COLORS.primary} />,
+    Staked: <Stake className={ICON_COLORS.primary} />,
+    Unstaked: <Stake className={ICON_COLORS.primary} />,
+    Rewards: <IotaLogoMark className={ICON_COLORS.primary} />,
+    Failed: <Info className={ICON_COLORS.error} />,
+    Loading: <LoadingIndicator />,
+    PersonalMessage: <Person className={ICON_COLORS.primary} />,
+};
+
+interface TransactionIconProps {
+    txnFailed?: boolean;
+    variant: keyof typeof icons;
+}
+
+function TransactionIcon({ txnFailed, variant }: TransactionIconProps) {
+    return <div className="[&_svg]:h-5 [&_svg]:w-5">{icons[txnFailed ? 'Failed' : variant]}</div>;
+}
+export default TransactionIcon;
@@ -0,0 +1,74 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+'use client';
+
+import React from 'react';
+import TransactionIcon from './TransactionIcon';
+import formatTimestamp from '@/lib/utils/time';
+import { usePopups } from '@/hooks';
+import { TransactionDetailsPopup } from '@/components';
+import { ExtendedTransaction, TransactionState } from '@/lib/interfaces';
+import {
+    Card,
+    CardType,
+    CardImage,
+    ImageType,
+    ImageShape,
+    CardBody,
+    CardAction,
+    CardActionType,
+} from '@iota/apps-ui-kit';
+import { useFormatCoin, useExtendedTransactionSummary, getLabel } from '@iota/core';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { useCurrentAccount } from '@iota/dapp-kit';
+
+interface TransactionTileProps {
+    transaction: ExtendedTransaction;
+}
+
+function TransactionTile({ transaction }: TransactionTileProps): JSX.Element {
+    const account = useCurrentAccount();
+    const address = account?.address;
+    const { openPopup, closePopup } = usePopups();
+
+    const transactionSummary = useExtendedTransactionSummary(transaction.raw.digest);
+    const [formatAmount, symbol] = useFormatCoin(
+        Math.abs(Number(address ? transactionSummary?.balanceChanges?.[address]?.[0]?.amount : 0)),
+        IOTA_TYPE_ARG,
+    );
+
+    const handleDetailsClick = () => {
+        openPopup(<TransactionDetailsPopup transaction={transaction} onClose={closePopup} />);
+    };
+
+    const transactionDate = transaction?.timestamp && formatTimestamp(transaction.timestamp);
+    return (
+        <Card type={CardType.Default} isHoverable onClick={handleDetailsClick}>
+            <CardImage type={ImageType.BgSolid} shape={ImageShape.SquareRounded}>
+                <TransactionIcon
+                    txnFailed={transaction.state === TransactionState.Failed}
+                    variant={getLabel(transaction?.raw, address)}
+                />
+            </CardImage>
+            <CardBody
+                title={
+                    transaction.state === TransactionState.Failed
+                        ? 'Transaction Failed'
+                        : (transaction.action ?? 'Unknown')
+                }
+                subtitle={transactionDate}
+            />
+            <CardAction
+                type={CardActionType.SupportingText}
+                title={
+                    transaction.state === TransactionState.Failed
+                        ? '--'
+                        : `${formatAmount} ${symbol}`
+                }
+            />
+        </Card>
+    );
+}
+
+export default TransactionTile;
@@ -0,0 +1,27 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { useCurrentAccount } from '@iota/dapp-kit';
+import { VirtualList, TransactionTile } from '@/components';
+import { useQueryTransactionsByAddress } from '@iota/core';
+import { getExtendedTransaction } from '@/lib/utils/transaction';
+import { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
+
+function TransactionsList() {
+    const currentAccount = useCurrentAccount();
+    const { data: transactions, error } = useQueryTransactionsByAddress(currentAccount?.address);
+
+    if (error) {
+        return <div>{error?.message}</div>;
+    }
+
+    const virtualItem = (rawTransaction: IotaTransactionBlockResponse): JSX.Element => {
+        const transaction = getExtendedTransaction(rawTransaction, currentAccount?.address || '');
+        return <TransactionTile transaction={transaction} />;
+    };
+
+    return <VirtualList items={transactions || []} estimateSize={() => 60} render={virtualItem} />;
+}
+
+export default TransactionsList;
@@ -0,0 +1,19 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+
+import { Panel, Title } from '@iota/apps-ui-kit';
+import TransactionsList from './TransactionsList';
+
+function TransactionsOverview() {
+    return (
+        <Panel>
+            <Title title="Activity" />
+            <div className="px-sm pb-md pt-sm">
+                <TransactionsList />
+            </div>
+        </Panel>
+    );
+}
+
+export default TransactionsOverview;
@@ -3,7 +3,7 @@
 
 import { BalanceChange } from '@iota/core';
 import { useMemo } from 'react';
-import { BalanceChangeEntry } from './';
+import { BalanceChangeEntry } from '.';
 import { getRecognizedUnRecognizedTokenChanges } from '@iota/core';
 
 interface BalanceChangeEntriesProps {

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { BalanceChange } from '@iota/core';
-import { BalanceChangeEntries } from './';
+import { BalanceChangeEntries } from '.';
 
 interface BalanceChangesProps {
     balanceChanges: Record<string, BalanceChange[]>;

@@ -6,6 +6,10 @@ export { default as TransactionAmount } from './TransactionAmount';
 export { default as StakeTransactionCard } from './StakeTransactionCard';
 export { default as UnstakeTransactionCard } from './UnstakeTransactionCard';
 export { default as TransactionSummary } from './TransactionSummary';
+export { default as TransactionTile } from './TransactionTile';
+export { default as TransactionIcon } from './TransactionIcon';
+export { default as TransactionsList } from './TransactionsList';
+export { default as TransactionsOverview } from './TransactionsOverview';
 
-export * from './BalanceChanges';
-export * from './ObjectChanges';
+export * from './balance-changes';
+export * from './object-changes';
@@ -3,7 +3,7 @@
 
 import { ObjectChangesByOwner, IotaObjectChangeTypes } from '@iota/core';
 import { IotaObjectChange } from '@iota/iota-sdk/client';
-import { ObjectDetail } from './';
+import { ObjectDetail } from '.';
 import React from 'react';
 
 interface ObjectChangeEntryProps {

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ObjectChangeSummary, IotaObjectChangeTypes } from '@iota/core';
-import { ObjectChangeEntry } from './';
+import { ObjectChangeEntry } from '.';
 
 interface ObjectChangesProps {
     objectSummary: ObjectChangeSummary;