Improve Timeline Widget UX #34

src/features/store.ts

@@ -1,7 +1,12 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
-import { FinalTransferStatuses, TransferContext, TransferStatus } from './transfer/types';
+import {
+  FinalTransferStatuses,
+  TransferContext,
+  TransferStatus,
+  TransferStatusParams,
+} from './transfer/types';
 
 // Increment this when persist state has breaking changes
 const PERSIST_STATE_VERSION = 1;
@@ -28,6 +33,7 @@ export interface AppState {
   setIsSenderNftOwner: (isOwner: boolean | null) => void;
   transferLoading: boolean;
   setTransferLoading: (isLoading: boolean) => void;
+  updateTransferStatusParams: (i: number, params: TransferStatusParams) => void;
 }
 
 export const useStore = create<AppState>()(
@@ -52,6 +58,16 @@ export const useStore = create<AppState>()(
           };
         });
       },
+      updateTransferStatusParams: (i, params) => {
+        set((state) => {
+          if (i >= state.transfers.length) return state;
+          const txs = [...state.transfers];
+          txs[i].statusParams ||= params;
+          return {
+            transfers: txs,
+          };
+        });
+      },
       failUnconfirmedTransfers: () => {
         set((state) => ({
           transfers: state.transfers.map((t) =>

src/features/transfer/TransfersDetailsModal.tsx

@@ -16,6 +16,7 @@ import { getChainReference } from '../caip/chains';
 import { AssetNamespace, parseCaip19Id } from '../caip/tokens';
 import { getChainDisplayName, hasPermissionlessChain } from '../chains/utils';
 import { getMultiProvider } from '../multiProvider';
+import { useStore } from '../store';
 import { getToken } from '../tokens/metadata';
 import { useAccountForChain } from '../wallet/hooks';
 
@@ -26,10 +27,12 @@ export function TransfersDetailsModal({
   isOpen,
   onClose,
   transfer,
+  transferIndex,
 }: {
   isOpen: boolean;
   onClose: () => void;
   transfer: TransferContext;
+  transferIndex: number;
 }) {
   const [fromUrl, setFromUrl] = useState<string>('');
   const [toUrl, setToUrl] = useState<string>('');
@@ -138,7 +141,12 @@ export function TransfersDetailsModal({
         {isPermissionlessRoute ? (
           <TransferStatusIcon transferStatus={status} />
         ) : (
-          <Timeline transferStatus={status} originTxHash={originTxHash} />
+          <Timeline
+            transferStatus={status}
+            transferIndex={transferIndex}
+            originTxHash={originTxHash}
+            transfer={transfer}
+          />
         )}
         {status !== TransferStatus.ConfirmedTransfer && status !== TransferStatus.Delivered ? (
           <div
@@ -270,23 +278,47 @@ export function TransfersDetailsModal({
 function Timeline({
   transferStatus,
   originTxHash,
+  transferIndex,
+  transfer,
 }: {
   transferStatus: TransferStatus;
   originTxHash?: string;
+  transferIndex: number;
+  transfer: TransferContext;
 }) {
   const isFailed = transferStatus === TransferStatus.Failed;
   const { stage, timings, message } = useMessageTimeline({
     originTxHash: isFailed ? undefined : originTxHash,
   });
-  const messageStatus = isFailed ? MessageStatus.Failing : message?.status || MessageStatus.Pending;
+
+  const messageStatus = isFailed
+    ? MessageStatus.Failing
+    : transfer.statusParams?.message?.status || message?.status || MessageStatus.Pending;
+
+  // TODO move this so it runs even if timeline isn't open
+  const { updateTransferStatus, updateTransferStatusParams } = useStore((s) => ({
+    updateTransferStatus: s.updateTransferStatus,
+    updateTransferStatusParams: s.updateTransferStatusParams,
+  }));
+
+  useEffect(() => {
+    if (messageStatus === MessageStatus.Delivered) {
+      updateTransferStatus(transferIndex, TransferStatus.Delivered);
+      if (!transfer.statusParams) {
+        updateTransferStatusParams(transferIndex, { stage, timings, message });
+      }
+    }
+  }, [transferIndex, messageStatus, updateTransferStatus]);
 
   return (
     <div className="mt-6 mb-2 w-full flex flex-col justify-center items-center timeline-container">
       <MessageTimeline
         status={messageStatus}
-        stage={stage}
-        timings={timings}
-        timestampSent={message?.origin?.timestamp}
+        stage={transfer.statusParams?.stage || stage}
+        timings={transfer.statusParams?.timings || timings}
+        timestampSent={
+          transfer.statusParams?.message?.origin?.timestamp || message?.origin?.timestamp
+        }
         hideDescriptions={true}
       />
     </div>

src/features/transfer/types.ts

@@ -1,3 +1,5 @@
+import { ApiMessage, MessageStage, StageTimings } from '@hyperlane-xyz/widgets';
+
 import type { Route } from '../tokens/routes/types';
 
 export interface TransferFormValues {
@@ -30,10 +32,17 @@ export const FinalTransferStatuses = [
 
 export interface TransferContext {
   status: TransferStatus;
+  statusParams?: TransferStatusParams;
   route: Route;
   params: TransferFormValues;
   originTxHash?: string;
   msgId?: string;
   timestamp: number;
   activeAccountAddress: Address;
 }
+
+export interface TransferStatusParams {
+  stage: MessageStage;
+  timings: StageTimings;
+  message: ApiMessage | null;
+}

src/features/wallet/SideBarMenu.tsx

@@ -55,6 +55,8 @@ export function SideBarMenu({
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedTransfer, setSelectedTransfer] = useState<TransferContext | null>(null);
+  const [selectedTransferIndex, setSelectedTransferIndex] = useState<number | null>(null);
+
   const disconnects = useDisconnectFns();
   const { readyAccounts } = useAccounts();
   const didMountRef = useRef(false);
@@ -70,6 +72,7 @@ export function SideBarMenu({
       didMountRef.current = true;
     } else if (transferLoading) {
       setSelectedTransfer(transfers[transfers.length - 1]);
+      setSelectedTransferIndex(transfers.length - 1);
       setIsModalOpen(true);
     }
   }, [transfers, transferLoading]);
@@ -147,11 +150,15 @@ export function SideBarMenu({
           <div className="flex grow flex-col px-3.5">
             <div className="grow flex flex-col w-full">
               {sortedTransfers?.length > 0 &&
-                sortedTransfers.map((t) => (
+                sortedTransfers.map((t, i) => (
                   <button
                     key={t.timestamp}
                     onClick={() => {
+                      const transferIndex = transfers.findIndex(
+                        (transfer) => transfer.timestamp === t.timestamp,
+                      );
                       setSelectedTransfer(t);
+                      setSelectedTransferIndex(transferIndex);
                       setIsModalOpen(true);
                     }}
                     className="flex justify-between items-center rounded-md border border-gray-300 px-2.5 py-2 mb-3 hover:bg-gray-100 active:bg-gray-200 transition-all duration-500"
@@ -215,14 +222,14 @@ export function SideBarMenu({
           </div>
         </div>
       </div>
-      {selectedTransfer && (
+      {selectedTransferIndex !== null && selectedTransfer && (
         <TransfersDetailsModal
           isOpen={isModalOpen}
           onClose={() => {
             setIsModalOpen(false);
-            setSelectedTransfer(null);
           }}
           transfer={selectedTransfer}
+          transferIndex={selectedTransferIndex}
         />
       )}
     </>