Add transaction history

[danwag06]

Similar to the TxPreview component that shows rich previews of transaction inputs and outputs, it would be nice to surface the wallet's transaction history as a list with nice icons that represent what occurred in the transaction.

Should visually show/support the following along with blockchain link to https://whatsonchain.com:

• BSV send
• BSV receive
• 1Sat ordinal (NFT) send
• 1Sat ordinal (NFT) receive
• BSV20/21 Token send
• BSV20/21 Token receive
• Locks
• Unlocks
• Burns (see use of KNOWN_BURN_ADDRESSES)
• Custom (maybe there is a better word for this but basically anything that is not one of the above or a tx that has multiple items from above in the same tx)

[CollinsC1O]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello I'm a frontend and a blockchain developer. I will love to work on this

[JoelVR17]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Add transaction history

Hello SPV Wallet Brower team,

I am Joel Vargas, and I'm a member of Dojo Coding. I also come from OnlyDust.

I would like to request the assignment of this issue. Below is my proposed approach for implementing this issue:

How I plan on tackling this issue

Proposal to Implement Transaction History List with Icon Support

I would like to propose a solution for the issue of displaying the wallet’s transaction history as a list with appropriate icons representing each transaction type. Below is the detailed breakdown of how I plan to approach this feature, along with a code sample that I would implement.

Feature Overview:

Similar to the existing TxPreview component, we will create a new component that visually displays a list of wallet transactions. Each transaction will be represented by an icon and relevant details. A key feature will be supporting different transaction types such as:

BSV send and receive

1Sat ordinal (NFT) send and receive BSV20/21 Token send and receive Locks and Unlocks Burns, using KNOWN_BURN_ADDRESSES Custom transactions that don't fit standard categories or have multiple items in the same transaction. Additionally, each transaction will include a link to whatsonchain for further details.

Proposed Code Implementation:

Icons and Styling: I will leverage the existing styled-components library for layout and icons like FaFire for burns, custom images for tokens and NFTs, and other visual elements. The icons will vary depending on the transaction type. Transaction Types: A function will map each transaction to its appropriate category (send, receive, burn, etc.), and display an appropriate icon and label. Performance Optimization: To ensure smooth rendering, especially for large transaction histories, I will use React’s useMemo hook to efficiently manage the input/output data transformation and icon rendering. Visual Structure: The structure will closely follow the existing layout in TxPreview, making it consistent with other parts of the app.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer specializing in Next.js, TypeScript, Node.js, and Rust. With over 31 contributions across projects in the OnlyDust ecosystem, I’ve developed strong proficiency in delivering high-quality solutions and resolving complex issues within tight deadlines. My experience spans frontend, backend, smart contracts, and the optimization and maintenance of scalable codebases.

How I plan on tackling this issue

To add transaction history, I will create a list showing all wallet transactions with clear icons for different types like sending and receiving BSV, NFTs, and tokens, as well as locks, unlocks, and burns. Each transaction will include a link to view more details on whatsonchain.com. Burn transactions will be identified by known burn addresses. The feature will support different transaction types, with custom icons, and allow users to filter and view their history easily. Lastly, i will thoroughly test this feature to make sure ti works as needed.

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @ i'm an experienced frontend developer and a blockchain developer i would love to work on this issue Pleasee kindly assign :)

How I plan on tackling this issue

i would make it is working and responsive accross all devices

[jimenezz22]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am Luis Jiménez, an active member of the Dojo Coding community in Costa Rica, with experience in Cairo, having built onchain games like ByteBeasts and contributed to open-source projects such as CairoLint, where I implemented tests for Cairo lints. Additionally, I taught Cairo during the Starknet Bootcamp for Dojo Coding. I also have experience with TypeScript, contributing to Starknet Quest and Go Stark Me by developing components like ComboBoxes, among others

How I plan on tackling this issue

1. Review the TxPreview Component:

• Thoroughly examine the TxPreview component to understand how transaction inputs and outputs are handled, especially regarding NFT and token rendering, icons, and formatting functions.
• Review how icons are used for different transaction types (e.g., burns, locks) and ensure consistency in the display of transaction details.

2. Create the Transaction History Component:

• Develop a new component that displays the wallet's transaction history as a list.
• The component will include rich previews of transactions, such as:
  • BSV send/receive
  • 1Sat Ordinal (NFT) send/receive
  • BSV20/21 token send/receive
  • Locks/Unlocks
  • Burns
  • Custom transactions (covering transactions with multiple items)
• Each transaction will have an associated icon, based on the type of action taken.

3. Leverage Existing Code from TxPreview:

• Reuse functions like mapOrdinal, convertAtomicValueToReadableTokenValue, truncate, and others from TxPreview to keep the functionality consistent.
• Maintain the same visual structure, including styling with styled-components, and ensure that icons or images related to NFTs, tokens, and actions are displayed properly.
• Ensure that blockchain links to Whatsonchain are included to allow users to see more details about their transactions.

4. Testing and Validation:

• Write unit tests for the new transaction history component to cover:
  • Basic transaction display.
  • Correct rendering of different transaction types (BSV, NFTs, tokens).
  • Proper handling of custom transaction types or transactions with multiple elements.
• Validate the correct display of transaction icons and images, and verify that links redirect users to the appropriate blockchain explorer pages (Whatsonchain).

5. Deliver the Solution:

• Submit a pull request that includes:
  • The new transaction history component.
  • Detailed descriptions of the implemented changes.
  • Documentation of the testing process and results.

[aniruddhaaps]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience in blockchain development and want to actively work on the issues raised.

How I plan on tackling this issue

For the feature of transactions history, I would write a similar component to TxPreview listing wallet's transactions with graphical icons representing each action type, i.e., BSV sends and receives, 1Sat ordinals, BSV20/21 tokens, locks, unlocks, burns, etc. Each transaction will be linked out for further investigation on Whatsonchain and complex or mixed transactions will have customized icons.

[Ugo-X]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Full Stack Blockchain Developer with demonstrable expertise across modern web and blockchain technologies. My tech stack centers on Next.js, TypeScript, React, and Node.js for web development, complemented by Three.js for 3D experiences, and Solidity/Rust for blockchain solutions.

What sets me apart is my proven track record on OnlyDust, where I've made 83 significant contributions across 15 different projects since Edition 1. This extensive involvement reflects my ability to deliver quality solutions under tight deadlines while adapting to diverse project requirements.

With my deep experience in hackathon environments, I bring both technical excellence and practical development skills to the table. I'm confident I can contribute meaningfully to pushing the boundaries of what's possible in blockchain development while maintaining a focus on user-centric solutions.

My profile (https://app.onlydust.com/u/Ugo-X) showcases my consistent ability to deliver results across various blockchain challenges. I'm excited to bring this experience and drive for innovation to your team.

How I plan on tackling this issue

Design the Transaction History Component: I’ll begin by creating a new TransactionHistory component that will display the wallet’s past transactions in a visually appealing and informative manner. Each transaction entry will include the transaction type (BSV send/receive, Ordinal send/receive, token transfers, locks, burns, etc.) along with corresponding icons and links to a blockchain explorer for more details.
Leverage the Existing TxPreview Component: To maintain consistency, I’ll reuse elements from the TxPreview component for the visual representation of transaction inputs/outputs. This will ensure that the transaction details are clear, and the icons and formatting align with the current design system.
Implement Icons for Transaction Types: I’ll assign unique icons for each transaction type, including:

• BSV send/receive
• 1Sat ordinal send/receive
• BSV20/21 token send/receive
• Locks/unlocks
• Burns (using KNOWN_BURN_ADDRESSES)
• Custom transactions (for unmatched types)
  These icons will help users quickly scan the history and understand the actions taken in each transaction.
  Integrate Blockchain Links: For each transaction, I’ll provide a clickable link to the Whatsonchain explorer so users can verify their transactions directly on-chain and view additional details outside the app.
  Fetch Transaction History: I’ll implement functionality to retrieve the wallet’s transaction history from the appropriate blockchain APIs. This will include details like transaction types, timestamps, and more. I’ll also handle categorizing the transactions (e.g., BSV send/receive, NFT transfers) based on their structure.
  Testing and Validation: I’ll write tests to verify that the TransactionHistory component displays the correct transactions with the appropriate icons and links. I’ll ensure the system accurately categorizes each transaction type and handles custom or multi-item transactions correctly.
  UI/UX Refinement: I’ll gather feedback on the design and functionality of the transaction history to ensure it is intuitive and user-friendly. Based on this feedback, I’ll make adjustments to improve the display of complex transactions or add any additional customization as needed.
  Expected delivery time: 3-4 days from the date of assignment.

[Dprof-in-tech]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I'm Dprof-in-tech, a seasoned Full Stack Blockchain Developer, and I'm excited to be part of ODHACK 9! I have a strong foundation in technologies such as Next.js, TypeScript, JavaScript, React, Node.js, Rust, and Cairo, I've built extensive experience across the blockchain development landscape.

I first got involved with OnlyDust during Edition 2, and since then, I've made 39 contributions across 11 different projects. Working on the platform has really helped me sharpen my skills, especially when it comes to delivering great solutions under tight deadlines. I love combining technical know-how with a user-focused approach, whether it's building immersive 3D experiences or crafting smart contracts that solve real-world problems.

Throughout, I've consistently demonstrated the ability to adapt and contribute effectively to diverse challenges. I'm confident in my ability to tackle new problems and drive innovation within the blockchain space. As we kick off ODHACK 9, I'm eager to apply my previous experience and technical expertise to push the boundaries of what's possible.

You can view my public profile on OnlyDust here: https://app.onlydust.com/u/Dprof-in-tech

How I plan on tackling this issue

Approach for Issue #8: Add Transaction History

Design the Transaction History Component: I’ll start by designing a new TransactionHistory component that will display a list of the wallet’s past transactions in a visually appealing and informative way. Each transaction entry will show the type of transaction (BSV send/receive, Ordinal send/receive, token transfers, locks, burns, etc.) with associated icons and links to the blockchain explorer for more details.

Leverage the Existing TxPreview Component: I’ll reuse elements from the TxPreview component to maintain consistency in the visual representation of transaction inputs/outputs. This ensures that the transaction details are clear and that icons and formatting are in line with the current design system.

Implement Icons for Transaction Types: I’ll assign distinct icons for each transaction type, such as: BSV send/receive 1Sat ordinal send/receive BSV20/21 token send/receive Locks/unlocks Burns (using KNOWN_BURN_ADDRESSES) Custom transactions (if none of the above types match) These icons will visually communicate what occurred in each transaction, allowing users to quickly scan the history and understand the actions taken.

Integrate Blockchain Links: For each transaction in the history, I’ll provide a clickable link to the corresponding transaction on the Whatsonchain explorer. This will allow users to verify their transactions directly on-chain and view additional details outside the app.

Fetch Transaction History: I’ll add functionality to fetch the wallet’s transaction history, retrieving data from the appropriate blockchain APIs. The data will include transaction types, timestamps, and other relevant details. I’ll handle categorizing the transactions into the respective types (e.g., BSV send/receive, NFT transfers, etc.) based on the transaction’s structure.

Testing and Validation: I’ll write tests to ensure the TransactionHistory component correctly displays transactions with the right icons and links. I’ll also ensure the system accurately categorizes each transaction type and handles custom or multi-item transactions appropriately.

UI/UX Refinement: I’ll gather feedback on the design and functionality of the transaction history to ensure it’s intuitive and user-friendly. Based on the feedback, I’ll make adjustments to improve the display of complex transactions or add any additional customization options as needed.

Expected time of delivery = 3-4 days from date of being assigned.

[Ekene001]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm Ekene, a frontend and blockchain developer, and I’m new to the OnlyDust platform. This is my first time contributing to this repository, and I’m excited about the opportunity to collaborate and bring my skills to the table. Looking forward to making a positive impact and working with the team!

How I plan on tackling this issue

To implement the task of displaying the wallet's transaction history with detailed icons for different transaction types, I will start by building a component similar to the existing TxPreview that can render a comprehensive list of transactions, each with an appropriate visual representation. The component will retrieve the transaction history from the wallet, then process and categorize each transaction according to its type.

I will ensure that the component visually differentiates between various transaction types, such as BSV send and receive, 1Sat ordinal (NFT) send and receive, BSV20/21 token transactions, as well as more specialized types like locks, unlocks, and burns (using KNOWN_BURN_ADDRESSES). Each type will have a distinct icon and label to clearly convey what occurred in the transaction. For transactions involving multiple categories, I will create a custom representation to show that it encompasses more than one type.

To enhance user experience, each transaction entry will include a link to the corresponding transaction details on whatsonchain.com. This will provide users with easy access to more detailed blockchain information. I will integrate logic to determine the appropriate icon and label for each transaction based on its characteristics, ensuring accurate categorization.

I will also validate the component's functionality by testing various scenarios, ensuring that all icons and categories render correctly and that the links to external resources work as intended.

[mimisavage]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I’m Mimi Sav, a frontend and blockchain developer. This is my first time contributing to this repository, and I'm excited about the opportunity to collaborate.

How I plan on tackling this issue

I’ll create a TransactionHistory component to display my wallet's transaction history. This component will show various transaction types like BSV send/receive, NFT send/receive, token transactions, locks, unlocks, and burns, each with its own icon. I’ll link each transaction to its details on WhatsOnChain.

I’ll make sure to use intuitive icons for each type to keep it visually appealing and easy to understand.

[suhas-sensei]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i am a blockchain dev and want to work on this

[danwag06]

@JoelVR17 please confirm assignment

[JoelVR17]

@JoelVR17 please confirm assignment

Hi @danwag06, of course. It will be my pleasure to complete this task. Thank you very much.

I'll work on it soon.