From 31036ca50dd80d1d61147911dd35b8d2bc6b7b31 Mon Sep 17 00:00:00 2001
From: Jason Guo <33064781+Xaroz@users.noreply.github.com>
Date: Mon, 27 Jan 2025 17:06:44 -0600
Subject: [PATCH] feat: refresh list (#168)

Add refresh button to message listing page, this will trigger a refetch
for the graphQL query

![image](https://github.com/user-attachments/assets/70a3c85e-394b-4ede-8391-6333b8aa810c)

fixes #157
---
 package.json                                  |  2 +-
 src/features/messages/MessageSearch.tsx       | 34 +++++++++++++------
 .../messages/cards/ContentDetailsCard.tsx     |  1 -
 .../messages/cards/GasDetailsCard.tsx         |  1 -
 .../messages/cards/TransactionCard.tsx        |  6 +---
 .../messages/queries/useMessageQuery.ts       |  1 +
 yarn.lock                                     |  6 ++--
 7 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 5f54276..629593d 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^3.4.16",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.2"
+    "typescript": "5.7.2"
   },
   "homepage": "https://www.hyperlane.xyz",
   "license": "Apache-2.0",
diff --git a/src/features/messages/MessageSearch.tsx b/src/features/messages/MessageSearch.tsx
index 2ff4ec0..2c87238 100644
--- a/src/features/messages/MessageSearch.tsx
+++ b/src/features/messages/MessageSearch.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Fade, useDebounce } from '@hyperlane-xyz/widgets';
+import { Fade, IconButton, RefreshIcon, useDebounce } from '@hyperlane-xyz/widgets';
 
 import { Card } from '../../components/layout/Card';
 import { SearchBar } from '../../components/search/SearchBar';
@@ -78,6 +78,7 @@ export function MessageSearch() {
     hasRun,
     messageList,
     isMessagesFound,
+    refetch,
   } = useMessageSearchQuery(
     sanitizedInput,
     originChainFilter,
@@ -138,16 +139,19 @@ export function MessageSearch() {
           <h2 className="w-min pl-0.5 font-medium text-blue-500 sm:w-fit">
             {!hasInput ? 'Latest Messages' : 'Search Results'}
           </h2>
-          <SearchFilterBar
-            originChain={originChainFilter}
-            onChangeOrigin={setOriginChainFilter}
-            destinationChain={destinationChainFilter}
-            onChangeDestination={setDestinationChainFilter}
-            startTimestamp={startTimeFilter}
-            onChangeStartTimestamp={setStartTimeFilter}
-            endTimestamp={endTimeFilter}
-            onChangeEndTimestamp={setEndTimeFilter}
-          />
+          <div className="flex items-center space-x-2 md:space-x-4">
+            <SearchFilterBar
+              originChain={originChainFilter}
+              onChangeOrigin={setOriginChainFilter}
+              destinationChain={destinationChainFilter}
+              onChangeDestination={setDestinationChainFilter}
+              startTimestamp={startTimeFilter}
+              onChangeStartTimestamp={setStartTimeFilter}
+              endTimestamp={endTimeFilter}
+              onChangeEndTimestamp={setEndTimeFilter}
+            />
+            <RefreshButton loading={isAnyFetching} onClick={refetch} />
+          </div>
         </div>
         <Fade show={showMessageTable}>
           <MessageTable messageList={messageListResult} isFetching={isAnyFetching} />
@@ -168,3 +172,11 @@ export function MessageSearch() {
     </>
   );
 }
+
+function RefreshButton({ loading, onClick }: { loading: boolean; onClick: () => void }) {
+  return (
+    <IconButton onClick={onClick} className="rounded-lg bg-pink-500 p-1" disabled={loading}>
+      <RefreshIcon color="white" height={20} width={20} />
+    </IconButton>
+  );
+}
diff --git a/src/features/messages/cards/ContentDetailsCard.tsx b/src/features/messages/cards/ContentDetailsCard.tsx
index 3025363..eeae51f 100644
--- a/src/features/messages/cards/ContentDetailsCard.tsx
+++ b/src/features/messages/cards/ContentDetailsCard.tsx
@@ -75,7 +75,6 @@ export function ContentDetailsCard({
           <Tooltip
             id="message-info"
             content="Immutable information about the message itself such as its contents."
-            data-tooltip-class-name="max-w-[calc(100%-10px)] sm:max-w-[526px]"
           />
         </div>
       </div>
diff --git a/src/features/messages/cards/GasDetailsCard.tsx b/src/features/messages/cards/GasDetailsCard.tsx
index 616cd09..54b5691 100644
--- a/src/features/messages/cards/GasDetailsCard.tsx
+++ b/src/features/messages/cards/GasDetailsCard.tsx
@@ -82,7 +82,6 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
           <Tooltip
             content="Amounts paid to the Interchain Gas Paymaster for message delivery."
             id="gas-info"
-            data-tooltip-class-name="max-w-[calc(100%-10px)] sm:max-w-[526px]"
           />
         </div>
       </div>
diff --git a/src/features/messages/cards/TransactionCard.tsx b/src/features/messages/cards/TransactionCard.tsx
index 8353b79..628f62f 100644
--- a/src/features/messages/cards/TransactionCard.tsx
+++ b/src/features/messages/cards/TransactionCard.tsx
@@ -182,11 +182,7 @@ function TransactionCard({
         </div>
         <div className="flex items-center pb-1">
           <h3 className="mr-2 text-md font-medium text-blue-500">{title}</h3>
-          <Tooltip
-            id="transaction-info"
-            content={helpText}
-            data-tooltip-class-name="max-w-[calc(100%-10px)] sm:max-w-[526px]"
-          />
+          <Tooltip id="transaction-info" content={helpText} />
         </div>
       </div>
       {children}
diff --git a/src/features/messages/queries/useMessageQuery.ts b/src/features/messages/queries/useMessageQuery.ts
index e0d4431..f028ac7 100644
--- a/src/features/messages/queries/useMessageQuery.ts
+++ b/src/features/messages/queries/useMessageQuery.ts
@@ -103,6 +103,7 @@ export function useMessageSearchQuery(
     messageList,
     isValidOrigin,
     isValidDestination,
+    refetch: reExecutor,
   };
 }
 
diff --git a/yarn.lock b/yarn.lock
index faf47f1..c1df87d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2424,7 +2424,7 @@ __metadata:
     react-tooltip: "npm:^5.26.3"
     tailwindcss: "npm:^3.4.16"
     ts-node: "npm:^10.9.2"
-    typescript: "npm:^5.7.2"
+    typescript: "npm:5.7.2"
     urql: "npm:^3.0.3"
     yaml: "npm:^2.4.5"
     zod: "npm:^3.21.2"
@@ -18973,7 +18973,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.7.2":
+"typescript@npm:5.7.2":
   version: 5.7.2
   resolution: "typescript@npm:5.7.2"
   bin:
@@ -18983,7 +18983,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.7.2#optional!builtin<compat/typescript>":
+"typescript@patch:typescript@npm%3A5.7.2#optional!builtin<compat/typescript>":
   version: 5.7.2
   resolution: "typescript@patch:typescript@npm%3A5.7.2#optional!builtin<compat/typescript>::version=5.7.2&hash=8c6c40"
   bin: