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
hyperlane-xyz · Jan 27, 2025 · 31036ca · 31036ca
1 parent ec8fe93
commit 31036ca
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -103,6 +103,7 @@ export function useMessageSearchQuery(
     messageList,
     isValidOrigin,
     isValidDestination,
+    refetch: reExecutor,
   };
 }
 

diff --git 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: