(Deposit/Withdraw) Support connection error transfer status in transf…

…er UI (#3455) * use bridge pkg transfer status type * cleanup * removed unused translation * remove stale test * test: re-add swap tool test * fix: lint --------- Co-authored-by: Jose Felix <[email protected]>
osmosis-labs · Jul 8, 2024 · 5070a16 · 5070a16
1 parent 1789a9a
commit 5070a16
Show file tree

Hide file tree

Showing 23 changed files with 83 additions and 149 deletions.
diff --git a/packages/web/components/table/transfer-history.tsx b/packages/web/components/table/transfer-history.tsx
@@ -1,13 +1,7 @@
-import { ChainIdHelper } from "@keplr-wallet/cosmos";
-import { CoinPretty } from "@keplr-wallet/unit";
 import type {
-  GetTransferStatusParams,
   TransferFailureReason,
+  TransferStatus,
 } from "@osmosis-labs/bridge";
-import {
-  IBCTransferHistory,
-  IBCTransferHistoryStatus,
-} from "@osmosis-labs/stores";
 import { truncateString } from "@osmosis-labs/utils";
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
@@ -20,90 +14,26 @@ import { CustomClasses } from "~/components/types";
 import { Breakpoint, useTranslation, useWindowSize } from "~/hooks";
 import { useStore } from "~/stores";
 
-type History = {
-  txHash: string;
-  createdAtMs: number;
-  explorerUrl: string;
-  amount: string;
-  reason?: TransferFailureReason;
-  status: IBCTransferHistoryStatus | "failed";
-  isWithdraw: boolean;
-};
+import {
+  RecentTransfer,
+  useRecentTransfers,
+} from "../transactions/use-recent-transfers";
 
 export const TransferHistoryTable: FunctionComponent<CustomClasses> = observer(
   ({ className }) => {
-    const {
-      chainStore,
-      transferHistoryStore,
-      ibcTransferHistoryStore,
-      accountStore,
-    } = useStore();
+    const { accountStore } = useStore();
     const { t } = useTranslation();
-    const { chainId } = chainStore.osmosis;
-    const address = accountStore.getWallet(chainId)?.address ?? "";
+    const address =
+      accountStore.getWallet(accountStore.osmosisChainId)?.address ?? "";
 
-    const histories: History[] = transferHistoryStore
-      .getHistoriesByAccount(address)
-      .map(
-        ({
-          key,
-          explorerUrl,
-          createdAt,
-          amount,
-          status,
-          reason,
-          isWithdraw,
-        }) => ({
-          txHash: key.startsWith("{")
-            ? (JSON.parse(key) as GetTransferStatusParams).sendTxHash
-            : key,
-          createdAtMs: createdAt.getTime(),
-          explorerUrl,
-          amount,
-          reason,
-          status: (status === "success" ? "complete" : status) as
-            | IBCTransferHistoryStatus
-            | "failed",
-          isWithdraw,
-        })
-      )
-      .concat(
-        ibcTransferHistoryStore
-          .getHistoriesAndUncommitedHistoriesByAccount(address)
-          .map((history) => {
-            const { txHash, createdAt, amount, sourceChainId, destChainId } =
-              history;
-            const status =
-              typeof (history as IBCTransferHistory).status !== "undefined"
-                ? (history as IBCTransferHistory).status
-                : ("pending" as IBCTransferHistoryStatus);
-            return {
-              txHash,
-              createdAtMs: new Date(createdAt).getTime(),
-              explorerUrl: chainStore
-                .getChain(sourceChainId)
-                .raw.explorerUrlToTx.replace("{txHash}", txHash.toUpperCase()),
-              amount: new CoinPretty(amount.currency, amount.amount)
-                .moveDecimalPointRight(amount.currency.coinDecimals)
-                .maxDecimals(6)
-                .trim(true)
-                .toString(),
-              reason: undefined,
-              status,
-              isWithdraw:
-                ChainIdHelper.parse(chainId).identifier !==
-                ChainIdHelper.parse(destChainId).identifier,
-            };
-          })
-      )
-      .sort((a, b) => b.createdAtMs - a.createdAtMs); // descending by most recent
+    const histories = useRecentTransfers(address);
 
     return histories.length > 0 ? (
       <>
         <div className="mt-8 text-h5 font-h5 md:text-h6 md:font-h6">
           {t("assets.historyTable.title")}
         </div>
-        <Table<BaseCell & History>
+        <Table<BaseCell & RecentTransfer>
           className={classNames("w-full", className)}
           headerTrClassName="!h-12 body2 md:caption"
           tBodyClassName="body2 md:caption"
@@ -179,7 +109,7 @@ const reasonToTranslationKey: Record<TransferFailureReason, string> = {
 
 const StatusDisplayCell: FunctionComponent<
   BaseCell & {
-    status?: IBCTransferHistoryStatus | "failed";
+    status?: TransferStatus;
     reason?: TransferFailureReason;
   }
 > = ({ status, reason }) => {
@@ -203,7 +133,7 @@ const StatusDisplayCell: FunctionComponent<
   }
 
   switch (status) {
-    case "complete":
+    case "success":
       return (
         <div className="flex items-center gap-2">
           <Image
@@ -236,23 +166,20 @@ const StatusDisplayCell: FunctionComponent<
           <span className="md:hidden">{t("assets.historyTable.refunded")}</span>
         </div>
       );
-    case "timeout":
+    case "failed":
       return (
         <div className="flex items-center gap-2">
-          <div className="h-6 w-6 animate-spin">
-            <Image
-              alt="loading"
-              src="/icons/loading-blue.svg"
-              width={24}
-              height={24}
-            />
-          </div>
+          <Image alt="failed" src="/icons/error-x.svg" width={24} height={24} />
           <span className="md:hidden">
-            {t("assets.historyTable.pendingRefunded")}
+            {reason
+              ? t("assets.historyTable.failedWithReason", {
+                  reason: t(reasonToTranslationKey[reason]),
+                })
+              : t("assets.historyTable.failed")}
           </span>
         </div>
       );
-    case "failed":
+    case "connection-error":
       return (
         <div className="flex items-center gap-2">
           <Image alt="failed" src="/icons/error-x.svg" width={24} height={24} />
@@ -261,7 +188,7 @@ const StatusDisplayCell: FunctionComponent<
               ? t("assets.historyTable.failedWithReason", {
                   reason: t(reasonToTranslationKey[reason]),
                 })
-              : t("assets.historyTable.failed")}
+              : t("assets.historyTable.connectionError")}
           </span>
         </div>
       );

diff --git a/packages/web/components/transactions/recent-transfers.tsx b/packages/web/components/transactions/recent-transfers.tsx
@@ -37,10 +37,10 @@ const UserRecentTransfers: FunctionComponent<{ address: string }> = observer(
       <div className="flex w-full flex-col gap-2">
         {recentTransfers.map(({ txHash, status, amount, isWithdraw }) => {
           const simplifiedStatus =
-            status === "complete"
+            status === "success"
               ? "success"
               : status === "refunded" ||
-                status === "timeout" ||
+                status === "connection-error" ||
                 status === "failed"
               ? "failed"
               : "pending";

diff --git a/packages/web/components/transactions/use-recent-transfers.ts b/packages/web/components/transactions/use-recent-transfers.ts
@@ -2,23 +2,21 @@ import { CoinPretty, Dec, DecUtils } from "@keplr-wallet/unit";
 import type {
   GetTransferStatusParams,
   TransferFailureReason,
+  TransferStatus,
 } from "@osmosis-labs/bridge";
-import {
-  IBCTransferHistory,
-  IBCTransferHistoryStatus,
-} from "@osmosis-labs/stores";
+import { IBCTransferHistory } from "@osmosis-labs/stores";
 import { ChainIdHelper, isNumeric } from "@osmosis-labs/utils";
 
 import { ChainList } from "~/config/generated/chain-list";
 import { useStore } from "~/stores";
 
-type RecentTransfer = {
+export type RecentTransfer = {
   txHash: string;
   createdAtMs: number;
   explorerUrl: string;
   amount: string;
   reason?: TransferFailureReason;
-  status: IBCTransferHistoryStatus | "failed";
+  status: TransferStatus;
   isWithdraw: boolean;
 };
 
@@ -52,9 +50,7 @@ export function useRecentTransfers(address?: string): RecentTransfer[] {
         explorerUrl,
         amount,
         reason,
-        status: (status === "success" ? "complete" : status) as
-          | IBCTransferHistoryStatus
-          | "failed",
+        status,
         isWithdraw,
       })
     )
@@ -64,10 +60,18 @@ export function useRecentTransfers(address?: string): RecentTransfer[] {
         .map((history) => {
           const { txHash, createdAt, amount, sourceChainId, destChainId } =
             history;
-          const status =
+          let status: TransferStatus = "pending";
+          const ibcStatus =
             typeof (history as IBCTransferHistory).status !== "undefined"
               ? (history as IBCTransferHistory).status
-              : ("pending" as IBCTransferHistoryStatus);
+              : "pending";
+          if (ibcStatus === "complete") {
+            status = "success";
+          } else if (ibcStatus === "timeout") {
+            status = "refunded";
+          } else {
+            status = ibcStatus;
+          }
 
           const counterpartyExplorerUrl = ChainList.find(
             (chain) => chain.chain_id === sourceChainId

diff --git a/packages/web/localizations/de.json b/packages/web/localizations/de.json
@@ -142,7 +142,6 @@
       "failed": "Fehlgeschlagen",
       "failedWithReason": "Fehlgeschlagen: {reason}",
       "pending": "Ausstehend",
-      "pendingRefunded": "Fehlgeschlagen: Rückerstattung steht aus",
       "refunded": "Erstattet",
       "success": "Erfolg",
       "title": "Übertragungsverlauf",
@@ -151,7 +150,8 @@
       "successDeposit": "Hinterlegt",
       "successWithdraw": "Zurückgezogen",
       "failDeposit": "Einzahlung fehlgeschlagen",
-      "failWithdraw": "Auszahlung fehlgeschlagen"
+      "failWithdraw": "Auszahlung fehlgeschlagen",
+      "connectionError": "Verbindungsfehler"
     },
     "ibcTransfer": {
       "buttonAdd": "Hinzufügen",

diff --git a/packages/web/localizations/en.json b/packages/web/localizations/en.json
@@ -142,7 +142,6 @@
       "failed": "Failed",
       "failedWithReason": "Failed: {reason}",
       "pending": "Pending",
-      "pendingRefunded": "Failed: Pending refund",
       "refunded": "Refunded",
       "success": "Success",
       "title": "Transfer History",
@@ -151,7 +150,8 @@
       "successDeposit": "Deposited",
       "successWithdraw": "Withdrew",
       "failDeposit": "Deposit failed",
-      "failWithdraw": "Withdraw failed"
+      "failWithdraw": "Withdraw failed",
+      "connectionError": "Connection error"
     },
     "ibcTransfer": {
       "buttonAdd": "Add",

diff --git a/packages/web/localizations/es.json b/packages/web/localizations/es.json
@@ -142,7 +142,6 @@
       "failed": "Fallida",
       "failedWithReason": "Fallida: {reason}",
       "pending": "Pendiente",
-      "pendingRefunded": "Fallido: reembolso pendiente",
       "refunded": "Reembolsado",
       "success": "Éxito",
       "title": "Historial de transferencias",
@@ -151,7 +150,8 @@
       "successDeposit": "Depositado",
       "successWithdraw": "se retiró",
       "failDeposit": "El depósito falló",
-      "failWithdraw": "Retiro fallido"
+      "failWithdraw": "Retiro fallido",
+      "connectionError": "Error de conexión"
     },
     "ibcTransfer": {
       "buttonAdd": "Agregar",

diff --git a/packages/web/localizations/fa.json b/packages/web/localizations/fa.json
@@ -142,7 +142,6 @@
       "failed": "نا موفق",
       "failedWithReason": "دلیل: {reason}",
       "pending": "معلق",
-      "pendingRefunded": "دلیل: بازگشت وجه معلق",
       "refunded": "بازگشت وجه",
       "success": "موفق",
       "title": "تاریخ چه انتقال",
@@ -151,7 +150,8 @@
       "successDeposit": "سپرده شد",
       "successWithdraw": "عقب نشینی کرد",
       "failDeposit": "سپرده گذاری انجام نشد",
-      "failWithdraw": "برداشت ناموفق بود"
+      "failWithdraw": "برداشت ناموفق بود",
+      "connectionError": "خطای اتصال"
     },
     "ibcTransfer": {
       "buttonAdd": "اضافه کردن",

diff --git a/packages/web/localizations/fr.json b/packages/web/localizations/fr.json
@@ -142,7 +142,6 @@
       "failed": "Échoué",
       "failedWithReason": "Échoué: {reason}",
       "pending": "En cours",
-      "pendingRefunded": "Échec: remboursement en cours",
       "refunded": "Rembourser",
       "success": "Succès",
       "title": "Historique des transferts",
@@ -151,7 +150,8 @@
       "successDeposit": "Déposé",
       "successWithdraw": "Retiré",
       "failDeposit": "Échec du dépôt",
-      "failWithdraw": "Échec du retrait"
+      "failWithdraw": "Échec du retrait",
+      "connectionError": "Erreur de connexion"
     },
     "ibcTransfer": {
       "buttonAdd": "Ajouter",

diff --git a/packages/web/localizations/gu.json b/packages/web/localizations/gu.json
@@ -142,7 +142,6 @@
       "failed": "નિષ્ફળ",
       "failedWithReason": "નિષ્ફળ: {reason}",
       "pending": "બાકી છે",
-      "pendingRefunded": "નિષ્ફળ: બાકી રિફંડ",
       "refunded": "રિફંડ",
       "success": "સફળતા",
       "title": "ટ્રાન્સફર ઇતિહાસ",
@@ -151,7 +150,8 @@
       "successDeposit": "જમા કરાવ્યું",
       "successWithdraw": "પાછી ખેંચી લીધી",
       "failDeposit": "ડિપોઝિટ નિષ્ફળ",
-      "failWithdraw": "ઉપાડ નિષ્ફળ"
+      "failWithdraw": "ઉપાડ નિષ્ફળ",
+      "connectionError": "કનેક્શન ભૂલ"
     },
     "ibcTransfer": {
       "buttonAdd": "ઉમેરો",

diff --git a/packages/web/localizations/hi.json b/packages/web/localizations/hi.json
@@ -142,7 +142,6 @@
       "failed": "असफल",
       "failedWithReason": "विफल: {reason}",
       "pending": "लंबित",
-      "pendingRefunded": "विफल: धनवापसी लंबित है",
       "refunded": "वापसी की गई है",
       "success": "सफलता",
       "title": "स्थानांतरण इतिहास",
@@ -151,7 +150,8 @@
       "successDeposit": "जमा किया",
       "successWithdraw": "वापस ले लिया",
       "failDeposit": "जमा विफल",
-      "failWithdraw": "निकासी विफल"
+      "failWithdraw": "निकासी विफल",
+      "connectionError": "संपर्क त्रुटि"
     },
     "ibcTransfer": {
       "buttonAdd": "जोड़ना",

diff --git a/packages/web/localizations/ja.json b/packages/web/localizations/ja.json
@@ -142,7 +142,6 @@
       "failed": "失敗した",
       "failedWithReason": "失敗: {reason}",
       "pending": "保留中",
-      "pendingRefunded": "失敗: 返金保留中",
       "refunded": "返金されました",
       "success": "成功",
       "title": "転送履歴",
@@ -151,7 +150,8 @@
       "successDeposit": "寄託",
       "successWithdraw": "撤退",
       "failDeposit": "入金に失敗しました",
-      "failWithdraw": "引き出しに失敗しました"
+      "failWithdraw": "引き出しに失敗しました",
+      "connectionError": "接続エラー"
     },
     "ibcTransfer": {
       "buttonAdd": "追加",