Transaction History

The transaction history functionality allows users to see their past incoming and outgoing transactions for a specific token. It is implemented using a specialized component that interacts with the blockchain abstraction layer to fetch transaction data.

Implementation Details

1. Token Interface

The core logic for fetching transactions resides in the Token interface (defined in src/api/common.ts). All supported blockchain tokens (EVM, TON, Solana, etc.) must implement the getTransactions method.

export interface TransactionInfo {
    id: string;
    success: boolean;
    confirmed: boolean,
    direction: "in" | "out";
    timestamp: number; // Unix timestamp
    amount: string;
    scannerUrl: string; // Link to block explorer
}

export interface Token {
    // ... other methods
    getTransactions(args: {
        owner: string,
        limit: number,
        offset?: number,
    }): Promise<{
        total: number,
        items: TransactionInfo[],
    }>;
}

2. Frontend Component: TokenTransactionList.vue

The TokenTransactionList component (located in src/components/TokenTransactionList.vue) is responsible for:

• Fetching transaction data from the current selected token.
• Managing pagination state.
• Rendering the list of transactions with metadata (direction icons, status, formatted dates).
• Handling "Pull to Refresh" functionality.

Key Functions:

• getTransactionsList(): Fetches a page of transactions based on the current pagination.limit and offset.
• refreshHandler(): Resets pagination to the first page and re-fetches data.
• goToPage(pageNumber): Navigates to a specific page in the history.

3. Data Fetching Logic

Specific blockchain implementations (e.g., EvmErc20Token in src/api/evm/erc20-token.ts) use a HistoryProvider to retrieve raw transaction data from an indexer or API.

async getTransactions(args: {
    owner: string,
    limit: number,
    offset?: number,
}): Promise<{
    total: number,
    items: TransactionInfo[],
}> {
    if( !ethers.isAddress(args.owner) ) {
        return { total: 0, items: [] };
    }

    const offset = args.offset ?? 0;
    const allItems = await this._history.getTokenTransactions({
        token: this._address,
        owner: args.owner,
    });

    return {
        total: allItems.length,
        items: allItems.slice(offset, offset + args.limit),
    };
}

Usage Example

In a Vue Component

To display the transaction history list in a page (like the Send.vue page), you can use the TokenTransactionList component:

<template>
  <div class="history-container">
    <div class="history-title">Transaction History</div>
    <!-- TokenTransactionList handles its own loading and fetching -->
    <TokenTransactionList 
      :historyPageLimit="10"
      minHeight="400px"
    />
  </div>
</template>

<script>
import TokenTransactionList from '@/components/TokenTransactionList.vue';

export default {
  components: {
    TokenTransactionList
  }
}
</script>

Programmatic Access

If you need to fetch transaction history manually from a token instance:

import { getToken } from '@/api/ApiHandler';

async function fetchHistory(tokenRoot, walletAddress) {
  try {
    const token = await getToken(tokenRoot);
    const result = await token.getTransactions({
      owner: walletAddress,
      limit: 5,
      offset: 0
    });
    
    console.log('Total transactions:', result.total);
    result.items.forEach(tx => {
      console.log(`TX: ${tx.id}, Amount: ${tx.amount}, Direction: ${tx.direction}`);
    });
  } catch (error) {
    console.error('Failed to fetch transactions:', error);
  }
}

User Interface Features

• Direction Indicators: Green "NarrowDown" icon for incoming transactions ("in") and Red "NarrowUp" icon for outgoing transactions ("out").
• Status Badges: Shows "Success", "Failed", or "Pending" based on transaction confirmation and success state.
• Pagination: Allows users to navigate through large transaction histories using a page selector at the bottom.
• Explorer Link: Each transaction item includes a link that opens the transaction in the respective blockchain's explorer (e.g., Etherscan).