Skip to content

state: Add a global "Refresh Data" UI button #92

@AlAfiz

Description

@AlAfiz

Description

Sometimes blockchain data gets slightly out of sync or a user just wants to force the UI to pull the latest pool balances.
Instead of making them hard-refresh the entire browser tab, we need a small "Refresh" icon button near the top of the swap card.
When clicked, it should spin for 1-2 seconds and trigger a state update for the mocked balances.
This gives users a feeling of direct control over the application's data layer.

Requirements

  • Add a small circular "Refresh" SVG icon button to the top right of the swap card.
  • Attach an onClick handler that sets an isRefreshing boolean state to true.
  • Add the Tailwind animate-spin class to the icon while isRefreshing is true.
  • Use a setTimeout to reset the state back to false after 1.5 seconds, simulating a network fetch.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions