diff --git a/.prettierrc b/.prettierrc index 8065834..992ca1e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,7 +3,7 @@ "printWidth": 100, "singleQuote": true, "trailingComma": "all", - "importOrder": ["^@abacus-network/(.*)$", "^../(.*)$", "^./(.*)$"], + "importOrder": ["^@hyperlane-xyz/(.*)$", "^../(.*)$", "^./(.*)$"], "importOrderSeparation": true, "importOrderSortSpecifiers": true } diff --git a/package.json b/package.json index a6b72b8..d68a5db 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@hyperlane-xyz/sdk": "^0.5.0-beta0", "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6", "@rainbow-me/rainbowkit": "^0.4.5", + "@tanstack/react-query": "^4.6.0", "buffer": "^6.0.3", "ethers": "^5.6.8", "formik": "^2.2.9", diff --git a/src/components/search/SearchError.tsx b/src/components/search/SearchError.tsx index 2a4f756..5c8fb94 100644 --- a/src/components/search/SearchError.tsx +++ b/src/components/search/SearchError.tsx @@ -1,5 +1,6 @@ import Image from 'next/future/image'; +import BugIcon from '../../images/icons/bug.svg'; import ErrorIcon from '../../images/icons/error-circle.svg'; import SearchOffIcon from '../../images/icons/search-off.svg'; import ShrugIcon from '../../images/icons/shrug.svg'; @@ -31,25 +32,55 @@ export function SearchError({ ); } -export function SearchInvalidError({ show }: { show: boolean }) { +export function NoSearchError({ show }: { show: boolean }) { + return ( + + ); +} + +export function SearchInvalidError({ + show, + allowAddress, +}: { + show: boolean; + allowAddress: boolean; +}) { return ( ); } -export function SearchEmptyError({ show, hasInput }: { show: boolean; hasInput: boolean }) { +export function SearchEmptyError({ + show, + hasInput, + allowAddress, +}: { + show: boolean; + hasInput: boolean; + allowAddress: boolean; +}) { return ( diff --git a/src/consts/appConfig.ts b/src/consts/appConfig.ts index 170c6b2..4e36d9c 100644 --- a/src/consts/appConfig.ts +++ b/src/consts/appConfig.ts @@ -9,7 +9,7 @@ export const configs: Record = { debug: isDevMode, version, url: 'https://explorer.hyperlane.xyz', - apiUrl: 'https://abacus-explorer-api.hasura.app/v1/graphql', + apiUrl: 'https://abacus-explorer-api.hasura.app/v1/graphql', // TODO change }, testnet2: { environment: Environment.Testnet2, diff --git a/src/consts/networksConfig.ts b/src/consts/networksConfig.ts index 559ef86..d05e899 100644 --- a/src/consts/networksConfig.ts +++ b/src/consts/networksConfig.ts @@ -1,6 +1,6 @@ import { Chain, allChains as allChainsWagmi, chain } from 'wagmi'; -import { chainConnectionConfigs } from '@abacus-network/sdk'; +import { chainConnectionConfigs } from '@hyperlane-xyz/sdk'; export const testConfigs = { goerli: chainConnectionConfigs.goerli, diff --git a/src/features/debugger/TxDebugger.tsx b/src/features/debugger/TxDebugger.tsx index f4b37d7..32a133a 100644 --- a/src/features/debugger/TxDebugger.tsx +++ b/src/features/debugger/TxDebugger.tsx @@ -1,8 +1,10 @@ -import { useState } from 'react'; +import { useQuery } from '@tanstack/react-query'; +import { useCallback, useState } from 'react'; import { Fade } from '../../components/animation/Fade'; import { SearchBar } from '../../components/search/SearchBar'; import { + NoSearchError, SearchEmptyError, SearchInvalidError, SearchUnknownError, @@ -13,6 +15,8 @@ import useDebounce from '../../utils/debounce'; import { sanitizeString } from '../../utils/string'; import { isValidSearchQuery } from '../search/utils'; +import { debugMessageForHash } from './debugMessage'; + export function TxDebugger() { const environment = useStore((s) => s.environment); @@ -21,11 +25,15 @@ export function TxDebugger() { const debouncedSearchInput = useDebounce(searchInput, 750); const hasInput = !!debouncedSearchInput; const sanitizedInput = sanitizeString(debouncedSearchInput); - const isValidInput = hasInput ? isValidSearchQuery(sanitizedInput, false) : true; + const isValidInput = isValidSearchQuery(sanitizedInput, false); - const fetching = false; - const hasError = false; - const txResult = {}; + // Debugger query + const query = useCallback(() => { + if (!isValidInput || !sanitizedInput) return null; + else return debugMessageForHash(sanitizedInput, environment); + }, [isValidInput, sanitizedInput, environment]); + const { isLoading: fetching, error, data } = useQuery(['debugMessage'], query); + const hasError = !!error; return ( <> @@ -36,19 +44,19 @@ export function TxDebugger() { placeholder="Search transaction hash to debug message" />
- {/* Content header and filter bar */}

{`Transaction Debugger (${envDisplayValue[environment]})`}

- {/* Message list */} - {JSON.stringify(txResult)} - - + {JSON.stringify(data)} + + +
); diff --git a/src/features/search/MessageSearch.tsx b/src/features/search/MessageSearch.tsx index 520ec52..54a81a1 100644 --- a/src/features/search/MessageSearch.tsx +++ b/src/features/search/MessageSearch.tsx @@ -125,11 +125,12 @@ export function MessageSearch() { ))} - + diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 5227f31..b801128 100755 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -5,6 +5,7 @@ import { wallet, } from '@rainbow-me/rainbowkit'; import '@rainbow-me/rainbowkit/styles.css'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import type { AppProps } from 'next/app'; import { ToastContainer, Zoom, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; @@ -52,6 +53,8 @@ const urqlClients: Record = { }), }; +const reactQueryClient = new QueryClient(); + export default function App({ Component, router, pageProps }: AppProps) { const environment = useStore((s) => s.environment); @@ -74,11 +77,13 @@ export default function App({ Component, router, pageProps }: AppProps) { fontStack: 'system', })} > - - - - - + + + + + + + diff --git a/yarn.lock b/yarn.lock index 8043789..d33dba4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -885,6 +885,7 @@ __metadata: "@hyperlane-xyz/sdk": ^0.5.0-beta0 "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6" "@rainbow-me/rainbowkit": ^0.4.5 + "@tanstack/react-query": ^4.6.0 "@trivago/prettier-plugin-sort-imports": ^3.2.0 "@types/node": 18.0.4 "@types/react": 18.0.15 @@ -1257,6 +1258,32 @@ __metadata: languageName: node linkType: hard +"@tanstack/query-core@npm:4.6.0": + version: 4.6.0 + resolution: "@tanstack/query-core@npm:4.6.0" + checksum: 945a3b1ddc89ddf484f828cee0be5db0939f51865b2518f8c4ef351c6a3fc992f8c9fbbd32a5bf16b97d0250e95f43c1e571d5a1dfefd99ab835ffe0f934b159 + languageName: node + linkType: hard + +"@tanstack/react-query@npm:^4.6.0": + version: 4.6.0 + resolution: "@tanstack/react-query@npm:4.6.0" + dependencies: + "@tanstack/query-core": 4.6.0 + use-sync-external-store: ^1.2.0 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-native: "*" + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + checksum: 39b9f5a71b1c699927db515419889b04e60410472481c5b08645eda8310c73c0c8acfcdffd9d63a5730eefff5e74a4a84939082fbe467d3af0571d837978fbb5 + languageName: node + linkType: hard + "@tootallnate/once@npm:2": version: 2.0.0 resolution: "@tootallnate/once@npm:2.0.0"