Adds transfer status indicator to deposit withdraw (#1023)

* Add ALTER, SHD & SIENNA (Secret SNIP-20 tokens)

* Update SIENNA's image

* Update ALTER's image

* Add Button group token

* added SHD, BUTT, & ALTER svgs

* added staking derivatives

* added ics20 contract to ibc-assets

* updated to channel-476

* updated ics20 contract

* removed accidental changes

* fix comment

* stkd-SCRT

* cleanup

* Update ibc-assets.ts

* Adds transfer status indicator to deposit withdraw

* Revert some unneeded changes to package.json files

* Removes type that was put directly in observable query

* Fix content overflow on zh-tw (#1024)

* Fix #1011 Non-localized stablecoin type (#1025)

* add sample fix for ko + es

* use collateral type as key into localization

* fix key for install keplr notice

* Remove unneeded type definition

* uses implied return undefined and spelling

* Remove unused store import

* Remove default baseUrl, Add in channel status logic

* Remove unused import and use deconstructed values directly

* Remove log

* Update button text for blocked and congested

* Switch to CoinGecko IDs--no pool spot prices (#1026)

* Fix content overflow on zh-tw (#1028)

* Fix content overflow on zh-tw

* Fix content overflow on languages with Unicode/full width chars

* Add missing entry

* correct stargaze cgid, uncomment prices

* add ibc-go to chihuahua

* add secret network features and change api

* minor fix

* add secret network tokens

* Use `computedFn`

* Don't get prices when no input in swap tool

* Enable pool calculation

* update korean.json (#1037)

* Uncomment image

* removed duplicated secret network tokens

* Update Chihuahua Chain Suggest Fees

* Replace FUND token logo with Circular logo

Was a square before.

* Change crbruc to unstable, unverified (#1040)

* Fix pool reward query error response

* Changed Marble to unverified (#1045)

Unverified because Marble no longer receives incentives.

* Fix zh-tw format (#1043)

* Fix Docker GitHub Actions  (#1044)

* Fix commands in README.md

* Remove arm64 support

* Pin node version to 18.12.1

* Remove duplicate Dockerfile and docker-compose.yml

* Make NETA, BOOT unverified

* Changed IXO to unverified (#1049)

* Changed Marble to unverified

Unverified because Marble no longer receives incentives.

* Changed IXO to unverified

Unverified because IXO no longer receives incentives.

* Adds transfer status indicator to deposit withdraw

* Revert some unneeded changes to package.json files

* Removes type that was put directly in observable query

* Remove unneeded type definition

* uses implied return undefined and spelling

* Remove unused store import

* Remove default baseUrl, Add in channel status logic

* Remove unused import and use deconstructed values directly

* Remove log

* Update button text for blocked and congested

Co-authored-by: Assaf Morami <assaf.morami@gmail.com>
Co-authored-by: DrPresident <jacksonswenson@securesecrets.org>
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
Co-authored-by: Sehyun Chung ✌︎ <sehyun@berkeley.edu>
Co-authored-by: JeremyParish69 <95667791+JeremyParish69@users.noreply.github.com>
Co-authored-by: Jeremy Parish <jeremyparish69@gmail.com>
Co-authored-by: jonator <jonathanator0@gmail.com>
Co-authored-by: KIM, WOOJUNG <gnujoow@users.noreply.github.com>
Co-authored-by: Crypto Assassin <103904125+CryptoAssassin1@users.noreply.github.com>
Co-authored-by: Niccolo Raspa <6024049+niccoloraspa@users.noreply.github.com>

packages/stores/src/queries-external/ibc/index.ts

@@ -0,0 +1,2 @@
+export * from "./status-by-id";
+export * from "./types";

packages/stores/src/queries-external/ibc/status-by-id.ts

@@ -0,0 +1,123 @@
+import { computed, makeObservable } from "mobx";
+import { HasMapStore } from "@keplr-wallet/stores";
+import { ObservableQueryExternalBase } from "../base";
+import { KVStore } from "@keplr-wallet/common";
+import { computedFn } from "mobx-utils";
+import { IbcStatus } from "./types";
+
+/** Queries for ibc chain data*/
+class ObservableQueryIbcChainStatus extends ObservableQueryExternalBase<
+  [
+    {
+      source: string;
+      destination: string;
+      channel_id: string;
+      token_symbol: string;
+      token_name: string;
+      last_tx: string;
+      size_queue: number;
+      duration_minutes: number;
+    }
+  ]
+> {
+  constructor(
+    kvStore: KVStore,
+    baseURL: string,
+    sourceChainId: string,
+    destinationChainId: string
+  ) {
+    super(
+      kvStore,
+      baseURL,
+      `/ibc/v1/source/${sourceChainId}/destination${destinationChainId}?minutes_trigger=-1`
+    );
+
+    makeObservable(this);
+  }
+
+  readonly getIbcStatus = computedFn(
+    (channelId: string): IbcStatus | undefined => {
+      const channelData = this.response?.data.find(
+        (channel) => channel.channel_id === channelId
+      );
+      if (channelData) {
+        if (channelData.size_queue > 0) {
+          if (channelData.duration_minutes > 20) return "blocked";
+          else if (channelData.duration_minutes > 5) return "congested";
+        }
+        return "normal";
+      }
+    }
+  );
+}
+
+// Ibc status (sourceChainId -> counterPartyChainId)
+class ObservableQueryWithdrawIbcChainsStatus extends HasMapStore<ObservableQueryIbcChainStatus> {
+  constructor(kvStore: KVStore, sourceChainId: string, baseUrl: string) {
+    super(
+      (counterPartyChainId) =>
+        new ObservableQueryIbcChainStatus(
+          kvStore,
+          baseUrl,
+          sourceChainId,
+          counterPartyChainId
+        )
+    );
+  }
+
+  get(counterPartyChainId: string): ObservableQueryIbcChainStatus {
+    return super.get(counterPartyChainId);
+  }
+}
+
+// Ibc status (counterPartyChainId -> sourceChainId)
+class ObservableQueryDepositIbcChainsStatus extends HasMapStore<ObservableQueryIbcChainStatus> {
+  constructor(kvStore: KVStore, sourceChainId: string, baseUrl: string) {
+    super(
+      (counterPartyChainId) =>
+        new ObservableQueryIbcChainStatus(
+          kvStore,
+          baseUrl,
+          counterPartyChainId,
+          sourceChainId
+        )
+    );
+  }
+
+  get(counterPartyChainId: string): ObservableQueryIbcChainStatus {
+    return super.get(counterPartyChainId);
+  }
+}
+
+export class ObservableQueryIbcChainsStatus {
+  withdrawQueryMapping: ObservableQueryWithdrawIbcChainsStatus;
+  depositQueryMapping: ObservableQueryDepositIbcChainsStatus;
+  constructor(kvStore: KVStore, sourceChainId: string, baseUrl: string) {
+    this.withdrawQueryMapping = new ObservableQueryWithdrawIbcChainsStatus(
+      kvStore,
+      sourceChainId,
+      baseUrl
+    );
+    this.depositQueryMapping = new ObservableQueryDepositIbcChainsStatus(
+      kvStore,
+      sourceChainId,
+      baseUrl
+    );
+  }
+
+  @computed
+  getIbcStatus(
+    direction: "withdraw" | "deposit",
+    channelId: string,
+    counterPartyChainId: string
+  ): IbcStatus | undefined {
+    if (direction === "withdraw")
+      return this.withdrawQueryMapping
+        .get(counterPartyChainId)
+        .getIbcStatus(channelId);
+    else
+      return this.depositQueryMapping
+        .get(counterPartyChainId)
+        .getIbcStatus(channelId);
+  }
+}

packages/stores/src/queries-external/ibc/types.ts

@@ -0,0 +1 @@
+export type IbcStatus = "normal" | "congested" | "blocked";

packages/stores/src/queries-external/index.ts

@@ -1,5 +1,6 @@
 export * from "./pool-fees";
 export * from "./pool-rewards";
+export * from "./ibc";
 export * from "./store";
 
 export const IMPERATOR_HISTORICAL_DATA_BASEURL =

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

@@ -3,6 +3,7 @@ import { DeepReadonly } from "utility-types";
 import { IPriceStore } from "../price";
 import { ObservableQueryPoolFeesMetrics } from "./pool-fees";
 import { ObservableQueryAccountsPoolRewards } from "./pool-rewards";
+import { ObservableQueryIbcChainsStatus } from "./ibc";
 import {
   IMPERATOR_HISTORICAL_DATA_BASEURL,
   IMPERATOR_TX_REWARD_BASEURL,
@@ -12,10 +13,12 @@ import {
 export class QueriesExternalStore {
   public readonly queryGammPoolFeeMetrics: DeepReadonly<ObservableQueryPoolFeesMetrics>;
   public readonly queryAccountsPoolRewards: DeepReadonly<ObservableQueryAccountsPoolRewards>;
+  public readonly queryChainStatus: DeepReadonly<ObservableQueryIbcChainsStatus>;
 
   constructor(
     kvStore: KVStore,
     priceStore: IPriceStore,
+    chainId: string,
     feeMetricsBaseURL = IMPERATOR_HISTORICAL_DATA_BASEURL,
     poolRewardsBaseUrl = IMPERATOR_TX_REWARD_BASEURL
   ) {
@@ -28,5 +31,10 @@ export class QueriesExternalStore {
       priceStore,
       poolRewardsBaseUrl
     );
+    this.queryChainStatus = new ObservableQueryIbcChainsStatus(
+      kvStore,
+      chainId,
+      feeMetricsBaseURL
+    );
   }
 }

packages/stores/types/queries-external/ibc/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./status-by-id";
+export * from "./types";

packages/stores/types/queries-external/ibc/status-by-id.d.ts

@@ -0,0 +1,35 @@
+import { HasMapStore } from "@keplr-wallet/stores";
+import { ObservableQueryExternalBase } from "../base";
+import { KVStore } from "@keplr-wallet/common";
+import { IbcStatus } from "./types";
+/** Queries for ibc chain data*/
+declare class ObservableQueryIbcChainStatus extends ObservableQueryExternalBase<[
+    {
+        source: string;
+        destination: string;
+        channel_id: string;
+        token_symbol: string;
+        token_name: string;
+        last_tx: string;
+        size_queue: number;
+        duration_minutes: number;
+    }
+]> {
+    constructor(kvStore: KVStore, baseURL: string, sourceChainId: string, destinationChainId: string);
+    readonly getIbcStatus: (channelId: string) => IbcStatus | undefined;
+}
+declare class ObservableQueryWithdrawIbcChainsStatus extends HasMapStore<ObservableQueryIbcChainStatus> {
+    constructor(kvStore: KVStore, sourceChainId: string, baseUrl: string);
+    get(counterPartyChainId: string): ObservableQueryIbcChainStatus;
+}
+declare class ObservableQueryDepositIbcChainsStatus extends HasMapStore<ObservableQueryIbcChainStatus> {
+    constructor(kvStore: KVStore, sourceChainId: string, baseUrl: string);
+    get(counterPartyChainId: string): ObservableQueryIbcChainStatus;
+}
+export declare class ObservableQueryIbcChainsStatus {
+    withdrawQueryMapping: ObservableQueryWithdrawIbcChainsStatus;
+    depositQueryMapping: ObservableQueryDepositIbcChainsStatus;
+    constructor(kvStore: KVStore, sourceChainId: string, baseUrl: string);
+    getIbcStatus(direction: "withdraw" | "deposit", channelId: string, counterPartyChainId: string): IbcStatus | undefined;
+}
+export {};

packages/stores/types/queries-external/ibc/types.d.ts

@@ -0,0 +1 @@
+export declare type IbcStatus = "normal" | "congested" | "blocked";

packages/stores/types/queries-external/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./pool-fees";
 export * from "./pool-rewards";
+export * from "./ibc";
 export * from "./store";
 export declare const IMPERATOR_HISTORICAL_DATA_BASEURL = "https://api-osmosis.imperator.co";
 export declare const IMPERATOR_TX_REWARD_BASEURL = "https://api-osmosis-chain.imperator.co";

packages/stores/types/queries-external/store.d.ts

@@ -3,9 +3,11 @@ import { DeepReadonly } from "utility-types";
 import { IPriceStore } from "../price";
 import { ObservableQueryPoolFeesMetrics } from "./pool-fees";
 import { ObservableQueryAccountsPoolRewards } from "./pool-rewards";
+import { ObservableQueryIbcChainsStatus } from "./ibc";
 /** Root store for queries external to any chain. */
 export declare class QueriesExternalStore {
     readonly queryGammPoolFeeMetrics: DeepReadonly<ObservableQueryPoolFeesMetrics>;
     readonly queryAccountsPoolRewards: DeepReadonly<ObservableQueryAccountsPoolRewards>;
-    constructor(kvStore: KVStore, priceStore: IPriceStore, feeMetricsBaseURL?: string, poolRewardsBaseUrl?: string);
+    readonly queryChainStatus: DeepReadonly<ObservableQueryIbcChainsStatus>;
+    constructor(kvStore: KVStore, priceStore: IPriceStore, chainId: string, feeMetricsBaseURL?: string, poolRewardsBaseUrl?: string);
 }

packages/stores/types/queries/ibc/index.d.ts

@@ -0,0 +1,12 @@
+import { HasMapStore } from "@keplr-wallet/stores";
+import { ObservableQueryExternalBase } from "../base";
+import { KVStore } from "@keplr-wallet/common";
+/** Queries */
+export declare class ObservableQueryIbcChainStatus extends ObservableQueryExternalBase<string> {
+    constructor(kvStore: KVStore, baseURL: string, chainId: string, counterPartyChainId: string);
+    get getIBCStatus(): string | undefined;
+}
+export declare class ObservableQueryIbcChainsStatus extends HasMapStore<ObservableQueryIbcChainStatus> {
+    constructor(kvStore: KVStore, chainId: string, baseUrl?: string);
+    get(counterPartyChainId: string): ObservableQueryIbcChainStatus;
+}

packages/stores/types/queries/ibc/status-by-id.d.ts

@@ -0,0 +1,12 @@
+import { HasMapStore } from "@keplr-wallet/stores";
+import { ObservableQueryExternalBase } from "../base";
+import { KVStore } from "@keplr-wallet/common";
+/** Queries */
+export declare class ObservableQueryIbcChainStatus extends ObservableQueryExternalBase<string> {
+    constructor(kvStore: KVStore, baseURL: string, chainId: string, counterPartyChainId: string);
+    get getIBCStatus(): string | undefined;
+}
+export declare class ObservableQueryIbcChainsStatus extends HasMapStore<ObservableQueryIbcChainStatus> {
+    constructor(kvStore: KVStore, chainId: string, baseUrl?: string);
+    get(counterPartyChainId: string): ObservableQueryIbcChainStatus;
+}

packages/web/localizations/en.json

@@ -209,6 +209,8 @@
     "ibcTransfer": {
       "titleWithdraw": "Withdraw {coinDenom}",
       "titleDeposit": "Deposit {coinDenom}",
+      "channelCongested": "Channel congested",
+      "channelBlocked": "Channel blocked",
       "selectAmount": "Select Amount",
       "estimatedTime": "Estimated Time",
       "waitTime": "20 seconds",

packages/web/localizations/es.json

@@ -209,6 +209,8 @@
     "ibcTransfer": {
       "titleWithdraw": "Retirar {coinDenom}",
       "titleDeposit": "Depositar {coinDenom}",
+      "channelCongested": "Canal impugnado",
+      "channelBlocked": "Canal bloqueado",
       "selectAmount": "Cantidad seleccionada",
       "estimatedTime": "Tiempo estimado",
       "waitTime": "20 segundos",

packages/web/localizations/fr.json

@@ -208,6 +208,8 @@
     "ibcTransfer": {
       "titleWithdraw": "Retirer {coinDenom}",
       "titleDeposit": "Déposer {coinDenom}",
+      "channelCongested": "Canal conjecturé",
+      "channelBlocked": "Chaîne bloquée",
       "selectAmount": "Sélectionnez le montant",
       "estimatedTime": "Temps estimé",
       "waitTime": "20 secondes",

packages/web/localizations/ko.json

@@ -209,6 +209,8 @@
     "ibcTransfer": {
       "titleWithdraw": "{coinDenom} 출금",
       "titleDeposit": "{coinDenom} 입금",
+      "channelCongested": "채널 혼잡",
+      "channelBlocked": "채널이 차단됨",
       "selectAmount": "수량 선택",
       "estimatedTime": "예상 시간",
       "waitTime": "20초",

packages/web/localizations/pl.json

@@ -210,6 +210,8 @@
     "ibcTransfer": {
       "titleWithdraw": "Wypłać {coinDenom}",
       "titleDeposit": "Wpłać {coinDenom}",
+      "channelCongested": "Kanał zmyślony",
+      "channelBlocked": "Kanał zablokowany",
       "selectAmount": "Wybierz Ilość",
       "estimatedTime": "Szacowany Czas",
       "waitTime": "20 sekund",

packages/web/localizations/tr.json

@@ -209,6 +209,8 @@
     "ibcTransfer": {
       "titleWithdraw": "{coinDenom} Çek",
       "titleDeposit": "{coinDenom} Yatır",
+      "channelCongested": "Kanal çağrıldı",
+      "channelBlocked": "Kanal engellendi",
       "selectAmount": "Miktar Seç",
       "estimatedTime": "Takribi Süre",
       "waitTime": "20 saniye",

packages/web/localizations/zh-cn.json

@@ -208,6 +208,8 @@
     "ibcTransfer": {
       "titleWithdraw": "提币 {coinDenom}",
       "titleDeposit": "存入 {coinDenom}",
+      "channelCongested": "频道争抢",
+      "channelBlocked": "频道被封锁",
       "selectAmount": "选择数量",
       "estimatedTime": "预估时间",
       "waitTime": "20 秒",

packages/web/localizations/zh-tw.json

@@ -209,6 +209,8 @@
     "ibcTransfer": {
       "titleWithdraw": "轉出 {coinDenom}",
       "titleDeposit": "存入 {coinDenom}",
+      "channelCongested": "通道擁擠",
+      "channelBlocked": "通道堵塞",
       "selectAmount": "選擇數量",
       "estimatedTime": "預計所需時間",
       "waitTime": "20 秒",

packages/web/modals/ibc-transfer.tsx

@@ -2,6 +2,7 @@ import { FunctionComponent, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../stores";
 import { Transfer } from "../components/complex/transfer";
+
 import {
   IbcTransfer,
   useIbcTransfer,
@@ -16,7 +17,12 @@ export const IbcTransferModal: FunctionComponent<ModalBaseProps & IbcTransfer> =
   observer((props) => {
     const { currency, counterpartyChainId, isWithdraw } = props;
     const t = useTranslation();
-    const { chainStore, queriesStore, ibcTransferHistoryStore } = useStore();
+    const {
+      chainStore,
+      queriesStore,
+      ibcTransferHistoryStore,
+      queriesExternalStore,
+    } = useStore();
     const { chainId: osmosisChainId } = chainStore.osmosis;
 
     const { logEvent } = useAmplitudeAnalytics();
@@ -37,10 +43,21 @@ export const IbcTransferModal: FunctionComponent<ModalBaseProps & IbcTransfer> =
       customCounterpartyConfig?.bech32Address === "" || // if not changed, it's valid since it's from Keplr
       (customCounterpartyConfig.isValid && didAckWithdrawRisk);
 
+    const chainStatusQuery = queriesExternalStore.queryChainStatus;
+
+    const chainStatus = chainStatusQuery.getIbcStatus(
+      isWithdraw ? "withdraw" : "deposit",
+      isWithdraw ? props.sourceChannelId : props.destChannelId,
+      counterpartyChainId
+    );
+
+    const isChainBlockedOrCongested =
+      chainStatus === "congested" || chainStatus === "blocked";
     const { showModalBase, accountActionButton, walletConnected } =
       useConnectWalletModalRedirect(
         {
           className: "md:mt-4 mt-6 hover:opacity-75",
+          mode: isChainBlockedOrCongested ? "primary-warning" : "primary",
           disabled:
             !account.isReadyToSendTx ||
             !counterpartyAccount.isReadyToSendTx ||
@@ -81,13 +98,19 @@ export const IbcTransferModal: FunctionComponent<ModalBaseProps & IbcTransfer> =
               }
             );
           },
-          children: isWithdraw
-            ? t("assets.ibcTransfer.titleWithdraw", {
-                coinDenom: currency.coinDenom,
-              })
-            : t("assets.ibcTransfer.titleDeposit", {
-                coinDenom: currency.coinDenom,
-              }),
+
+          children:
+            chainStatus === "blocked"
+              ? t("assets.ibcTransfer.channelBlocked")
+              : chainStatus === "congested"
+              ? t("assets.ibcTransfer.channelCongested")
+              : isWithdraw
+              ? t("assets.ibcTransfer.titleWithdraw", {
+                  coinDenom: currency.coinDenom,
+                })
+              : t("assets.ibcTransfer.titleDeposit", {
+                  coinDenom: currency.coinDenom,
+                }),
         },
         props.onRequestClose
       );