Token Swap Page on HeraldEX

1. Header Section

At the top, you will find several key components aimed at navigation and user interaction:

• Platform Name and Branding:
  • The HeraldEX logo is visible on the top-left, allowing users to identify the platform.
• Navigation Menu:
  • Buy Crypto: This link directs users to a section where they can purchase cryptocurrencies. This feature might allow users to buy using fiat currency or other supported crypto tokens.
  • Sell Crypto: Clicking this leads to a page where users can sell their existing cryptocurrency holdings, converting them either into another token or fiat currency.
  • Trade: This link opens the trading platform for advanced users who want to engage in spot trading or other trading services.
  • About Us: Provides information about the HeraldEX platform, its team, mission, and vision.
  • Help Center: Links to a support section where users can find answers to FAQs, tutorials, or connect with customer support for technical issues.
  • User Profile (Isaiah Fleming): A clickable profile icon that leads to user settings. The user can change account settings, view personal details, or log out from this menu.

2. Wallet Overview Section

This section gives an overview of the user’s available balance for a specific token, in this case, BNB (Binance Coin).

• Token Type (BNB):

  • The displayed token is BNB, and the Binance Coin logo is visible next to it, helping users quickly identify the type of token they are holding.

• Total Token Balance:

  • The total token balance represents all the BNB that the user currently owns in their wallet. For instance, the balance shown in the image is 1.8224497 BNB.

• Remaining Tokens:

  • This field might show the amount of tokens available after certain deductions such as fees or pending transactions. In this case, the remaining tokens are the same as the total, which suggests no transactions are pending.

3. Token Swap Popup Window

The Swap Tokens popup is the core functionality that allows users to exchange one token for another. This window is interactive and provides real-time information for token swaps.

a. Token Swap Functionality

• From Token (BNB):

  • In the swap interface, the user is choosing to swap from BNB (Binance Coin). A dropdown or a clickable field might allow users to select a different token if the platform supports multi-token swaps.

• Amount Input:

  • The user can input the number of tokens they want to swap. For example, the input field shows that 1 BNB is selected for swapping.

• Percentage Slider:

  • There is a slider that lets the user quickly select a percentage of their total balance to swap. For example, 54.87% is selected, meaning just over half of the user’s available BNB will be swapped. This feature provides a fast and convenient way to choose how much of the token to exchange without manually typing in the amount.

b. Receiving Token (AED)

• Receive Token:
  • In this field, the user selects the currency or token they wish to receive in exchange for their BNB. In this case, the receiving token is set to AED (United Arab Emirates Dirham). Users can likely choose from a dropdown list of supported tokens or fiat currencies.
• Exchange Rate:
  • The real-time exchange rate should be displayed here. However, in this case, it shows NaN, which indicates that the system could not fetch the current rate. This could be due to a network issue or unavailability of the BNB-AED trading pair at that moment.

c. Swap and Cancel Actions

• Swap Button:
  • After the user has entered the amount and chosen the tokens for the swap, they can click the Swap button to initiate the transaction. This will deduct the specified amount of BNB from the user’s wallet and credit the equivalent amount of AED (or the chosen token) based on the current exchange rate.
• Cancel Button:
  • If the user decides not to go through with the transaction, they can click the Cancel button to close the popup without making any changes to their wallet.

4. Transaction History Section

This section provides a record of the user’s past activity on the platform, which includes two categories: Transaction History and Withdraw History.

a. Transaction History Tab

• Transaction Filters:

  • Users can filter their transaction history based on various parameters such as time, token type, transaction type, etc. This helps users quickly locate specific transactions from their history.

• Transaction List:

  • A detailed list of all transactions is displayed here. Each entry provides:
    • Transaction Hash: A unique identifier (hash) for the transaction. For example, the hash 54257803835 is a unique string representing a specific transaction.
    • Transaction Date and Time: The date and time when the transaction was initiated (e.g., 18 Sep 2024, 11:18 AM).
    • Transaction Type: Indicates whether it’s a trade, withdrawal, deposit, or other transaction type (e.g., Trade).
    • Transaction Status: Shows whether the transaction was successful, pending, or failed (e.g., Success).
    • Amount: Shows how much of a token was transacted (e.g., -0.01 BNB for a deduction).
    • View Button: A button that allows users to see the full details of each transaction, such as gas fees, confirmations, and more.

b. Withdraw History Tab

• This tab is similar to the Transaction History tab but only shows the record of withdrawals from the user's wallet. It might include details such as the withdrawal address, transaction fee, and the time of withdrawal.

5. Additional Features

a. Export Button:

• The Export button allows users to download their entire transaction history, typically in formats like CSV or Excel. This feature is useful for bookkeeping, tax filing, or personal record-keeping.

b. Filter Options:

• Users can filter their transaction history based on different parameters, such as transaction status, token type, or a specific date range. This improves navigation through large volumes of transaction data.

Common Issues and Troubleshooting

• Exchange Rate Showing "NaN":

  • If the exchange rate is showing NaN, this means the platform is currently unable to retrieve the real-time rate for that particular token pair. This can be due to:
    • Network or API issues.
    • Unsupported trading pairs.
    • Exchange downtime.
  • Solution: Try refreshing the page or reselecting the tokens. If the issue persists, it’s recommended to check your internet connection or wait for the exchange rates to update.

• Swap Failure:

  • If a swap fails, the tokens will remain in the user’s wallet. Failed swaps may occur due to insufficient balance, network congestion, or mismatched trading pairs.

  • Solution: Double-check the amount you are swapping and ensure you have enough balance to cover both the swap and the transaction fees.

Frequently Asked Questions (FAQ)

1. Why is my exchange rate showing NaN?

   • The exchange rate might not be available due to an issue fetching live rates or unsupported trading pairs. Try again later or contact support.

2. Can I swap any token I hold?

   • You can only swap tokens that are supported by the HeraldEX platform. If a token is not in the list of available swap options, it cannot be exchanged through the platform.

3. How long does a swap usually take?

   • Token swaps typically take a few seconds to a few minutes depending on the network congestion and transaction fees associated with the swap.

4. Can I export my transaction history?

   • Yes, you can export your entire transaction history by clicking on the Export button. This feature supports formats like CSV or Excel, making it easy to track your trades and other wallet activities.