Transfer modal: status indicator

[victortokaito]

Problem

IBC status indicators on info.osmosis.zone are useful, but not easily discoverable because they're accessed offsite.

Solution

Implement "just-in-time" ibc status indicators on the transfer modal:

• This information comes to the user right at the step it becomes relevant to them (at least on the osmosis app). Indicators' utility improves along with its relevance by helping users understand why transactions may be slowed.
• The animation transforms to match the error code (using new design guidelines’ negative gradient to indicate network is congested).

https://www.figma.com/file/qze5yJO9TEw7vysInR07Ui?node-id=1832:113709#262708753

[jonator]

Our current solution:

https://info.osmosis.zone/ibc

We'd like to add this to our app at the right moment in user workflow.

Though we may want to use a more specific query, see:
https://api-osmosis.imperator.co/swagger/#/ibc

Perhaps:
https://api-osmosis.imperator.co/ibc/v1/source/osmosis/destinationjuno?minutes_trigger=-1
Where minutes_trigger is the amount of time the channel has been clogged. We could decide on a reasonable value for that.

[jonator]

Tips/Gameplan

Query

In the stores package, add a new query object here:

osmosis-frontend/packages/stores/src/queries-external/store.ts

Lines 11 to 19 in 2d5027e

	constructor(
	kvStore: KVStore,
	feeMetricsBaseURL = "https://api-osmosis.imperator.co"
	) {
	this.queryGammPoolFeeMetrics = new ObservableQueryPoolFeesMetrics(
	kvStore,
	feeMetricsBaseURL
	);
	}

It should extend a HasMapStore (example) mapping counterPartyChainId -> ObservableQueryIbcStatus, perhaps called ObservableQueryIbcStatuses. See ObservableQueryPoolFeesMetrics class for an example of querying external APIs as mobx stores. The store you implement for a single counterparty status should contain a computed property that reads the query result and returns a nice high-level type that returns the state of the current channel, such as Congested or Blocked (could be string literals: example). The root map store may need to accept parameters (with defaults) to define the number of pending transactions for any channel to be considered congested and blocked. It will pass this info to the mapped stores.

View

1. Back in the web package, in the IBC transfer modal component, import the queriesExternalStore from the root store.
   

   osmosis-frontend/packages/web/modals/ibc-transfer.tsx

   Line 19 in 2d5027e

   const { chainStore, queriesStore, ibcTransferHistoryStore } = useStore();

2. Somewhere in the body of the component, call .get(counterpartyChainId) to get a query object for a particular IBC counterparty. On that object, you should be able to call .status or something and get a high level status of the current channel.

3. Use that result to update the view according to the Figma.