feat(web3): Integrate Flare Time Series Oracle (FTSO) for Price Feeds

[BigBen-7]

PR: feat(web3): Integrate Flare Time Series Oracle (FTSO) for Price Feeds

Closes #[Issue Number]

Description

This pull request enhances the application with reliable, decentralized, and real-time financial data by integrating directly with the Flare Time Series Oracle (FTSO).

A new service has been created to query the FTSO smart contracts on the Flare network, allowing the application to fetch the latest price feeds for various tokens (e.g., FLR/USD). This provides users with crucial financial context, such as displaying the real-time fiat value of on-chain transactions, without relying on centralized off-chain APIs.

---

Implementation Details

FTSO Service & useFtsoPrice Hook

• Smart Contract Interaction:

  • A new service (ftso.service.ts) has been implemented to handle all direct interactions with the FTSO PriceSubmitter smart contract using ethers.js.
  • A core function, getLatestPrice(symbol), is exposed, which takes a token symbol (e.g., 'FLR') and returns its latest price and decimal information from the oracle.

• Caching with TanStack Query:

  • A custom React hook, useFtsoPrice(symbol), wraps the service call with TanStack Query's useQuery.
  • This is a critical performance optimization that caches the on-chain price data. It prevents excessive RPC calls on every component render, reducing load on the Flare network and providing a much smoother user experience.
  • A staleTime is configured to ensure the price is re-fetched periodically, keeping the data fresh.

• UI Demonstration:

  • A sample UI component has been created to demonstrate the hook's usage. It fetches the latest FLR price and displays the real-time USD value of a sample amount (e.g., 100 FLR), automatically updating as the oracle provides new data.

---

How to Test

1. Setup

• Connect your wallet and ensure it is set to the Flare (or an appropriate testnet) network.

2. UI Verification

1. Navigate to the page containing the sample UI component.
2. Observe: The component should briefly show a loading state, and then display the current USD value of 100 FLR (e.g., "$12.34").

3. Caching Behavior Verification

1. Navigate away from the component and then back to it.
2. Observe: The price should appear instantly without a loading state, as it is being served from the TanStack Query cache.
3. Wait for the cache's staleTime to expire (e.g., 2 minutes).
4. Refresh the component.
5. Observe: A new network request should be made to the FTSO contract to fetch the latest price. You can verify this in your browser's developer tools network tab.