Uiux/checkout gas breakdown

[Devadakene]

Closes #234

Summary

This PR introduces a transparent breakdown of gas and network fees on the checkout receipt page. The token cost is now clearly separated from the network fee to remove any ambiguity around pricing. Additionally, we have added informative tooltips to explain specific line items (Base Fee, Priority Fee), a refresh action to fetch the latest network fee estimate, and a warning state to flag when the fee estimate goes stale due to network volatility.

Design Review Checklist

♿ Accessibility

• Contrast ratios meet WCAG 2.1 AA (4.5:1).
• Keyboard navigation is logical and focus rings are visible. (Focus rings explicitly added to the refresh button and tooltips).
• Semantic HTML and ARIA labels are used correctly. (aria-label applied to icon-only buttons like the Refresh action).

📱 Responsive

• Layout is mobile-first and works on all breakpoints.
• Above-the-fold content is optimized for laptop viewports.

⚙️ States & Tokens

• Loading, empty, and error states are handled. (Stale estimate warning and refresh spin animation included).
• Design tokens (spacing, helper-text classes) are followed. (Maintained existing glass-panel styling and Tailwind text tokens).

Screenshots / Record

Nil

Testing

• npm run lint passes
• Manual keyboard/screen-reader test

[drips-wave]

@Devadakene Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits