[FRE-1088, FRE-1008, FRE-1113, FRE-1110] fix history (#359)

packages/widget-v2/src/constants/graz.ts

@@ -67,8 +67,6 @@ export const keplrMainnetChainIdsInitialConnect = [
  "aioz_168-1",
  "akashnet-2",
  "alfama",
- "andromeda-1",
- "archway-1",
  "arctic-1",
  "ares-1",
  "arkeo",
@@ -91,17 +89,13 @@ export const keplrMainnetChainIdsInitialConnect = [
  "bouachain",
  "buenavista-1",
  "bzetestnet-2",
- "canto_7700-1",
- "carbon-1",
  "celestia",
- "centauri-1",
  "chihuahua-1",
  "cifer-2",
  "cnho_stables-1",
  "colosseum-1",
  "columbus-5",
  "comdex-test-4",
- "comdex-1",
  "constantine-3",
  "core-1",
  "coreum-testnet-1",
@@ -135,10 +129,8 @@ export const keplrMainnetChainIdsInitialConnect = [
  "furya-1",
  "fxcore",
  "galactica_9302-1",
- "gitopia",
  "govgen-1",
  "grand-1",
- "gravity-bridge-3",
  "helichain",
  "iconlake-testnet-1",
  "iconlake-1",
@@ -152,7 +144,6 @@ export const keplrMainnetChainIdsInitialConnect = [
  "ixo-5",
  "joltify_1729-1",
  "juno-1",
- "kaiyo-1",
  "kaon-1",
  "kava_2222-10",
  "korellia-2",
@@ -166,12 +157,10 @@ export const keplrMainnetChainIdsInitialConnect = [
  "loop-1",
  "mainnet-tura",
  "mande_18071918-1",
- "mantle-1",
  "mantra-hongbai-1",
  "mars-1",
  "medasdigital-1",
  "meme-1",
- "migaloo-1",
  "mineplex-mainnet-1",
  "mocha-4",
  "morocco-1",
@@ -187,7 +176,6 @@ export const keplrMainnetChainIdsInitialConnect = [
  "osmo-test-5",
  "osmosis-1",
  "ovg",
- "pacific-1",
  "panacea-3",
  "passage-2",
  "phoenix-1",
@@ -213,9 +201,7 @@ export const keplrMainnetChainIdsInitialConnect = [
  "sentinelhub-2",
  "sge-network-4",
  "sgenet-1",
- "shentu-2.2",
  "shido_9007-1",
- "sifchain-1",
  "sixnet",
  "soarchaintestnet",
  "sommelier-3",
@@ -254,8 +240,6 @@ export const keplrMainnetChainIdsInitialConnect = [
 export const walletMainnetChainIdsInitialConnect = [
  "cosmoshub-4",
  "injective-1",
- "migaloo-1",
- "archway-1",
  "pacific-1",
  "noble-1",
  "osmosis-1",

packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPage.tsx

@@ -26,7 +26,7 @@ import { convertSecondsToMinutesOrHours } from "@/utils/number";
 import { SignatureIcon } from "@/icons/SignatureIcon";
 import pluralize from "pluralize";
 import { useBroadcastedTxsStatus } from "./useBroadcastedTxs";
-import { useFetchTransactionStatus } from "./useFetchTransactionStatus";
+import { useSyncTxStatus } from "./useSyncTxStatus";
 
 export enum SwapExecutionState {
  recoveryAddressUnset,
@@ -56,8 +56,8 @@ export const SwapExecutionPage = () => {
  txs: transactionDetailsArray,
  });
 
- useFetchTransactionStatus({
- transferEvents: statusData?.transferEvents,
+ useSyncTxStatus({
+ statusData
  });
 
  const clientOperations = useMemo(() => {

packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteDetailed.tsx

@@ -118,6 +118,7 @@ export const SwapExecutionPageRouteDetailed = ({
 
  const explorerLink = operation.isSwap ? status?.[operation.transferIndex]?.fromExplorerLink : status?.[operation.transferIndex]?.toExplorerLink;
  const opStatus = swapExecutionState === SwapExecutionState.confirmed ? "completed" : status?.[operation.transferIndex]?.status;
+
  return (
  <>
  <StyledOperationTypeAndTooltipContainer key={`tooltip-${asset?.denom}-${index}`} style={{ height: "25px", position: "relative" }} align="center">

packages/widget-v2/src/pages/SwapExecutionPage/useBroadcastedTxs.ts

@@ -41,25 +41,27 @@ export const useBroadcastedTxsStatus = ({
  return _res;
  }));
  const transferEvents = getTransferEventsFromTxStatusResponse(results);
- const _isSettled = results.every((tx) => {
+ const _isAllTxSettled = results.every((tx) => {
  return (
  tx.state === "STATE_COMPLETED_SUCCESS" ||
  tx.state === "STATE_COMPLETED_ERROR" ||
  tx.state === "STATE_ABANDONED"
  );
  });
 
- const _isSuccess = transferEvents.every((tx) => {
+ const _isAllTxSuccess = transferEvents.every((tx) => {
  return tx.status === "completed";
  });
 
- if (transferEvents.length > 0 && txsRequired === results.length && _isSettled) {
+ const isRouteSettled = transferEvents.length > 0 && txsRequired === results.length && _isAllTxSettled;
+ if (isRouteSettled) {
  setIsSettled(true);
  }
 
+
  const resData: TxsStatus = {
- isSuccess: _isSuccess,
- isSettled: _isSettled,
+ isSuccess: _isAllTxSuccess && isRouteSettled,
+ isSettled: isRouteSettled,
  transferEvents,
  };
  setPrevData(resData);

packages/widget-v2/src/pages/SwapExecutionPage/useFetchTransactionStatus.tsx → packages/widget-v2/src/pages/SwapExecutionPage/useSyncTxStatus.tsx

@@ -2,31 +2,31 @@ import { setTransactionHistoryAtom } from "@/state/history";
 import {
  setOverallStatusAtom,
  swapExecutionStateAtom,
- skipTransactionStatusAtom,
  skipSubmitSwapExecutionAtom,
 } from "@/state/swapExecutionPage";
 import {
- ClientTransferEvent,
  getClientOperations,
  ClientOperation,
- getSimpleOverallStatus,
 } from "@/utils/clientType";
-import { useSetAtom, useAtomValue, useAtom } from "jotai";
+import { useSetAtom, useAtomValue } from "jotai";
 import { useMemo, useEffect } from "react";
+import { TxsStatus } from "./useBroadcastedTxs";
 
-export const useFetchTransactionStatus = ({
- transferEvents
+export const useSyncTxStatus = ({
+ statusData,
+ historyIndex
 }: {
- transferEvents?: ClientTransferEvent[];
+ statusData?: TxsStatus,
+ historyIndex?: number;
 }) => {
+ const transferEvents = statusData?.transferEvents;
  const setOverallStatus = useSetAtom(setOverallStatusAtom);
  const {
  route,
  transactionDetailsArray,
  overallStatus,
  transactionHistoryIndex,
  } = useAtomValue(swapExecutionStateAtom);
- const [{ data: transactionStatus }] = useAtom(skipTransactionStatusAtom);
  const setTransactionHistory = useSetAtom(setTransactionHistoryAtom);
 
  const { isPending } = useAtomValue(skipSubmitSwapExecutionAtom);
@@ -46,19 +46,14 @@ export const useFetchTransactionStatus = ({
  return;
  }
 
- if (!transactionStatus) return;
- const lastTransactionIndex = route?.txsRequired - 1;
+ if (!transferEvents) return;
 
- const lastTransactionStatus = getSimpleOverallStatus(
- transactionStatus?.[lastTransactionIndex]?.state
- );
-
- if (lastTransactionStatus === "completed") {
+ if (statusData.isSuccess) {
  return "completed";
  }
 
  if (
- transferEvents?.find(({ status }) => status === "failed")
+ !statusData.isSuccess && statusData.isSettled
  ) {
  return "failed";
  }
@@ -74,26 +69,16 @@ export const useFetchTransactionStatus = ({
  ) {
  return "unconfirmed";
  }
- }, [isPending, route?.operations, route?.txsRequired, setOverallStatus, transactionStatus, transferEvents]);
-
+ }, [isPending, route?.operations, route?.txsRequired, setOverallStatus, statusData?.isSettled, statusData?.isSuccess, transferEvents]);
  useEffect(() => {
- if (overallStatus === "completed" || overallStatus === "failed") return;
-
  if (computedSwapStatus) {
- setTransactionHistory(transactionHistoryIndex, {
+ setTransactionHistory(historyIndex ?? transactionHistoryIndex, {
  status: computedSwapStatus,
  });
- setOverallStatus(computedSwapStatus);
+ if (!historyIndex) {
+ setOverallStatus(computedSwapStatus);
+ }
  }
- }, [
- clientOperations,
- overallStatus,
- computedSwapStatus,
- setOverallStatus,
- transactionDetailsArray.length,
- transactionStatus,
- setTransactionHistory,
- transactionHistoryIndex,
- ]);
+ }, [clientOperations, overallStatus, computedSwapStatus, setOverallStatus, transactionDetailsArray.length, setTransactionHistory, transactionHistoryIndex, historyIndex]);
 
 };

packages/widget-v2/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -4,7 +4,7 @@ import { SwapPageHeader } from "@/pages/SwapPage/SwapPageHeader";
 import { SwapPageFooter } from "@/pages/SwapPage/SwapPageFooter";
 import { ICONS } from "@/icons";
 import { VirtualList } from "@/components/VirtualList";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { HistoryIcon } from "@/icons/HistoryIcon";
 import { SmallText } from "@/components/Typography";
 import { useAtomValue, useSetAtom } from "jotai";
@@ -19,6 +19,11 @@ export const TransactionHistoryPage = () => {
  number | undefined
  >();
  const txHistory = useAtomValue(transactionHistoryAtom);
+ const historyList = useMemo(() => {
+ return txHistory.sort((a, b) => {
+ return b.timestamp - a.timestamp;
+ });
+ }, [txHistory]);
  return (
  <Column gap={5}>
  <SwapPageHeader
@@ -45,7 +50,7 @@ export const TransactionHistoryPage = () => {
  ) : (
  <VirtualList
  key={txHistory.length}
- listItems={txHistory}
+ listItems={historyList}
  height={262}
  itemHeight={1}
  renderItem={(item, index) => (

packages/widget-v2/src/pages/TransactionHistoryPage/TransactionHistoryPageHistoryItem.tsx

@@ -10,6 +10,9 @@ import { HistoryArrowIcon } from "@/icons/HistoryArrowIcon";
 import { useGetAssetDetails } from "@/hooks/useGetAssetDetails";
 import { removeTransactionHistoryItemAtom, TransactionHistoryItem } from "@/state/history";
 import { useSetAtom } from "jotai";
+import { formatDistanceStrict } from "date-fns";
+import { useBroadcastedTxsStatus } from "../SwapExecutionPage/useBroadcastedTxs";
+import { useSyncTxStatus } from "../SwapExecutionPage/useSyncTxStatus";
 
 type TransactionHistoryPageHistoryItemProps = {
  index: number;
@@ -25,6 +28,20 @@ export const TransactionHistoryPageHistoryItem = ({
  onClickRow,
 }: TransactionHistoryPageHistoryItemProps) => {
  const theme = useTheme();
+
+ const { data: statusData } = useBroadcastedTxsStatus({
+ txsRequired: txHistoryItem?.route.txsRequired,
+ txs: txHistoryItem.transactionDetails.map(tx => ({
+ chainID: tx.chainID,
+ txHash: tx.txHash,
+ })),
+ });
+
+ useSyncTxStatus({
+ statusData,
+ historyIndex: index,
+ });
+
  const removeTransactionHistoryItem = useSetAtom(removeTransactionHistoryItemAtom);
  const {
  route: {
@@ -92,8 +109,8 @@ export const TransactionHistoryPageHistoryItem = ({
  if (status === "pending") {
  return "In Progress";
  }
- return "5 mins ago";
- }, [status]);
+ return formatDistanceStrict(new Date(timestamp), new Date(), { addSuffix: true });
+ }, [status, timestamp]);
 
  return (
  <StyledHistoryContainer showDetails={showDetails}>
@@ -121,7 +138,6 @@ export const TransactionHistoryPageHistoryItem = ({
  sourceChainName={sourceAssetDetails.chainName ?? "--"}
  destinationChainName={destinationAssetDetails.chainName ?? "--"}
  absoluteTimeString={absoluteTimeString}
- relativeTimeString={relativeTime}
  transactionDetails={transactionDetails}
  onClickDelete={() => removeTransactionHistoryItem(index)}
  />
@@ -187,4 +203,4 @@ const StyledChainName = styled(SmallText)`
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
-`;
+`;