[Txns-Details] Integrate ARKHAM API for Enhanced Address Labeling in the UI

[SamantaCasal]

Description

To improve the user experience and provide clear information on entities involved in transactions, we aim to integrate the ARKHAM API for enhanced address labeling directly within our frontend application. This integration will enable us to tag known addresses with relevant details such as the app name, chain, and provide a direct link to the ARKHAM app for additional context.

Tasks

1. UI Development:

   • Design and implement UI components that display the tagged information for known addresses. This should include the name of the associated app, user name, or blockchain provided by the ARKHAM API.
   • Include a direct link to the ARKHAM app for users seeking more comprehensive information about the address.

2. BFF Integration:

• Integrate the ARKHAM API data retrieval into the BFF layer. This step is to ensure that the frontend efficiently processes and displays the data without directly handling the API integration logic.
• Implement caching strategies as necessary to optimize data retrieval and reduce API call overhead.

Acceptance Criteria

1. Address Validation via BFF:

• Ensure that each address presented in the transaction details view is validated through the BFF layer to check if it is recognized by the ARKHAM API.

2. Display of Recognized Addresses:

For addresses recognized by the ARKHAM API, the UI must display the name of the owner of the address, which could be an application, a company, a blockchain, etc.

3. Direct Link to ARKHAM App:

• Include a direct link to the ARKHAM app or website for users to obtain more comprehensive information about the recognized address. This link should be intuitive and easily accessible for the user, enhancing the depth of information available. Could be a small ARKHAM icon next to the address.

4. Application in Transaction Details View:

• The integration of ARKHAM API data and the display of address owners must be applied within the transaction details view.

5. Coverage for All Transaction Types:

• The feature must apply to all types of transactions displayed on the platform, including those transactions that utilize the Standard Relayer.

6. Comprehensive Address Validation:

All addresses appearing on the transaction details screen must be validated. This includes, but is not limited to, sender and receiver addresses, contract addresses involved in the transaction, and any other addresses displayed.

Resources

• Product specifications: https://www.notion.so/xlabsxyz/Wormholescan-3cde8691b8cf45608904f3d1085bf374?p=ddb573007fd4419fa1c6ff04216e86b4&pm=s

• API DOC: [Arkham API Access](https://www.notion.so/Arkham-API-Access-9232652274854efaa8a67633a94a2595?pvs=21)

[SamantaCasal]

When scrolling down/up the banner should close

https://github.com/XLabs/wormscan-ui/assets/69044575/4b396c4a-3516-4db0-8690-d9d6cd0b9e80

[SamantaCasal]

Schedule Time for this release -> 9:45 AM EST. FYI: @valentinoConti