Merge pull request #394 from LF-Decentralized-Trust-labs/ui-queries

Pick nodes consistently in "npm run dev", and query fixes

ui/README.md

@@ -4,30 +4,23 @@
 This is a light-weight compact UI used for development/debugging purposes.
 
 ### Setup
-1. Install client dependencies
+1. Install dependencies
 ```
 cd client
 npm i
 ```
-2. Build client
+2. Run UI against Paladin node 1
 ```
-npm run build
+npm run dev:node1
 ```
-3. Install server dependencies
+3. Run UI against Paladin node 2
 ```
-cd ..
-cd server
-npm i
-```
-4. Build server
-```
-npm run build
+npm run dev:node2
 ```
-5. Start server
+4. Run UI against Paladin node 3
 ```
-npm run start
+npm run dev:node3
 ```
 
 ### Using the UI
-Open a web browser and navigate to `http://localhost:3555`
-Transactions and events are shown on screen. These are updated automatically.
+Open a web browser and navigate to `http://localhost:3000`, `http://localhost:3002` and `http://localhost:3003` for nodes 1, 2 and 3 respectively.

ui/client/src/components/EVMPrivateDetails.tsx

@@ -77,7 +77,7 @@ const EVMPrivateTransaction: React.FC<EVMTxnProps> = ({
     enabled: !!dataString,
     queryKey: ["decodeEVMCall", transactionId],
     queryFn: () => fetchDecodedCallData(dataString),
-    retry: false
+    retry: true
   });
 
   return (
@@ -136,7 +136,7 @@ const EVMPrivateLog: React.FC<EVMLogProps> = ({
     enabled: !!log.topics && !!log.data,
     queryKey: ["decodeEVMLog", transactionId, logIndex],
     queryFn: () => fetchDecodedEvent(log.topics!, log.data!),
-    retry: false
+    retry: true
   });
 
   return (

ui/client/src/components/Events.tsx

@@ -14,7 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Box, Typography, useTheme } from "@mui/material";
+import { Alert, Box, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
 import { fetchEvents } from "../queries/events";
@@ -24,14 +24,23 @@ import { ApplicationContext } from "../contexts/ApplicationContext";
 import { altDarkModeScrollbarStyle, altLightModeScrollbarStyle } from "../themes/default";
 
 export const Events: React.FC = () => {
+
   const { lastBlockWithTransactions } = useContext(ApplicationContext);
-  const { data: events } = useQuery({
+  const theme = useTheme();
+  const addedStyle = theme.palette.mode === 'light'? altLightModeScrollbarStyle : altDarkModeScrollbarStyle;
+
+  const { data: events, error, isFetching } = useQuery({
     queryKey: ["events", lastBlockWithTransactions],
     queryFn: () => fetchEvents(),
   });
 
-  const theme = useTheme();
-  const addedStyle = theme.palette.mode === 'light'? altLightModeScrollbarStyle : altDarkModeScrollbarStyle;
+  if(isFetching) {
+    return <></>;
+  }
+
+  if (error) {
+    return <Alert sx={{ margin: '30px' }} severity="error" variant="filled">{error.message}</Alert>
+  }
 
   return (
     <>

ui/client/src/components/Hash.tsx

@@ -38,7 +38,7 @@ export const Hash: React.FC<Props> = ({ title, hash }) => {
 
   return (
     <>
-      <Button disableElevation onClick={() => setHashDialogOpen(true)} fullWidth variant="contained" sx={{ paddingTop: 0, paddingBottom: 0, textTransform: 'none', fontWeight: '400'}} size="small">
+      <Button disableElevation onClick={() => setHashDialogOpen(true)} fullWidth variant="contained" sx={{ paddingTop: 0, paddingBottom: 0, textTransform: 'none', fontWeight: '400', whiteSpace: 'nowrap'}} size="small">
         {`${title} | ${getHash(hash)}`}
       </Button>
       <HashDialog dialogOpen={hashDialogOpen} setDialogOpen={setHashDialogOpen} title={title} hash={hash} />

ui/client/src/components/Header.tsx

@@ -14,7 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { AppBar, Box, Grid2, IconButton, Tab, Tabs, Toolbar, Tooltip, useTheme } from "@mui/material";
+import { AppBar, Box, Grid2, IconButton, Tab, Tabs, Toolbar, Tooltip, useMediaQuery, useTheme } from "@mui/material";
 import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -29,6 +29,7 @@ export const Header: React.FC = () => {
   const navigate = useNavigate();
   const pathname = useLocation().pathname.toLowerCase();
   const theme = useTheme();
+  const lessThanMedium = useMediaQuery(theme.breakpoints.down("md"));
 
   const getTabFromPath = (path: string) => {
     if (path.startsWith('/ui/indexer')) {
@@ -79,7 +80,8 @@ export const Header: React.FC = () => {
           </Grid2>
         </Toolbar>
       </AppBar>
-      <Box sx={{ height: theme => theme.mixins.toolbar }} />
+      <Box sx={{ height: theme => lessThanMedium? '134px' :
+         theme.mixins.toolbar }} />
     </>
   );
 

ui/client/src/components/Registry.tsx

@@ -31,6 +31,7 @@ export const Registry: React.FC<Props> = ({ registryName }) => {
       fetchRegistryEntries(registryName).then((entries) =>
         entries.sort((a, b) => (a.name < b.name ? -1 : 0))
       ),
+      retry: true
   });
 
   return (

ui/client/src/components/TransactionDetails.tsx

@@ -45,16 +45,16 @@ export const PaladinTransactionsDetails: React.FC<Props> = ({
 
   const { data: stateReceipt } = useQuery({
     enabled: !!transactionId,
-    queryKey: ["stateReceipt", paladinTransaction],
+    queryKey: ["stateReceipt", transactionId],
     queryFn: () => fetchStateReceipt(transactionId),
-    retry: false
+    retry: true
   });
 
   const { data: domainReceipt } = useQuery({
     enabled: !!domain && !!transactionId,
-    queryKey: ["domainReceipt", paladinTransaction],
+    queryKey: ["domainReceipt", domain, transactionId],
     queryFn: () => fetchDomainReceipt(domain, transactionId),
-    retry: false
+    retry: true
   });
 
   return (

ui/client/src/components/Transactions.tsx

@@ -14,7 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Box, Typography, useTheme } from "@mui/material";
+import { Alert, Box, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
 import { useContext } from "react";
@@ -34,23 +34,31 @@ export const Transactions: React.FC = () => {
   const theme = useTheme();
   const addedStyle = theme.palette.mode === 'light'? altLightModeScrollbarStyle : altDarkModeScrollbarStyle;
 
-  const { data: transactions } = useQuery({
+  const { data: transactions, error: transactionError, isRefetching: transactionFetching } = useQuery({
     queryKey: ["transactions", lastBlockWithTransactions],
     queryFn: () => fetchIndexedTransactions(),
   });
 
-  const { data: transactionReceipts } = useQuery({
+  const { data: transactionReceipts, error: receiptError, isFetching: receiptFetching } = useQuery({
     queryKey: ["transactionReceipts", transactions],
     queryFn: () => fetchTransactionReceipts(transactions ?? []),
     enabled: transactions !== undefined,
   });
 
-  const { data: paladinTransactions } = useQuery({
+  const { data: paladinTransactions, error: paladinTransactionError, isFetching: paladinTransactionFetching } = useQuery({
     queryKey: ["paladinTransactions", transactionReceipts],
     queryFn: () => fetchPaladinTransactions(transactionReceipts ?? []),
     enabled: transactionReceipts !== undefined,
   });
 
+  if(transactionFetching || receiptFetching || paladinTransactionFetching) {
+    return <></>;
+  }
+
+  if (transactionError || receiptError || paladinTransactionError) {
+    return <Alert sx={{ margin: '30px' }} severity="error" variant="filled">{transactionError?.message ?? receiptError?.message ?? paladinTransactionError?.message}</Alert>
+  }
+
   return (
     <>
       <Typography align="center" variant="h5" sx={{ marginBottom: '20px' }}>

ui/client/src/queries/abiDecode.ts

@@ -30,7 +30,7 @@ export const fetchDecodedCallData = async (
 
   return <Promise<IABIDecodedEntry>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))), "", [500]
+      () =>  fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))), "", [500]
     )
   );
 };
@@ -48,7 +48,7 @@ export const fetchDecodedEvent = async (
 
   return <Promise<IABIDecodedEntry>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))), "", [500]
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))), "", [500]
     )
   );
 };

ui/client/src/queries/blocks.ts

@@ -29,7 +29,7 @@ export const fetchLatestBlockWithTxs = async (): Promise<ITransaction[]> => {
 
   return <Promise<ITransaction[]>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
       i18next.t("errorFetchingLatestBlock")
     )
   );

ui/client/src/queries/common.ts

@@ -26,16 +26,13 @@ export const generatePostReq = (stringBody: string): RequestInit => {
 };
 
 export const returnResponse = async (
-  res: Response,
+  resFn: () => Promise<Response>,
   errorMsg: string,
   ignoreStatuses: number[] = []
 ) => {
+  const res = await resFn();
   if (!res.ok && !ignoreStatuses.includes(res.status)) {
     throw new Error(errorMsg);
   }
-  try {
-    return (await res.json()).result;
-  } catch {
-    return {};
-  }
+  return (await res.json()).result;
 };

ui/client/src/queries/domains.ts

@@ -31,7 +31,7 @@ export const fetchDomainReceipt = async (
 
   return <Promise<any>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
       i18next.t("errorFetchingDomainReceipt")
     )
   );

ui/client/src/queries/events.ts

@@ -35,7 +35,7 @@ export const fetchEvents = async (): Promise<IEvent[]> => {
 
   return <Promise<IEvent[]>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(requestPayload))),
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(requestPayload))),
       i18next.t("errorFetchingLatestEvents")
     )
   );

ui/client/src/queries/registry.ts

@@ -29,7 +29,7 @@ export const fetchRegistries = async (): Promise<string[]> => {
 
   return <Promise<string[]>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(requestPayload))),
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(requestPayload))),
       i18next.t("errorFetchingRegistries")
     )
   );
@@ -51,7 +51,7 @@ export const fetchRegistryEntries = async (
 
   return <Promise<IRegistryEntry[]>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(requestPayload))),
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(requestPayload))),
       i18next.t("errorFetchingRegistryEntries")
     )
   );

ui/client/src/queries/states.ts

@@ -31,7 +31,7 @@ export const fetchStateReceipt = async (
 
   return <Promise<IStateReceipt>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
       i18next.t("errorFetchingStateReceipt")
     )
   );

ui/client/src/queries/transactions.ts

@@ -39,7 +39,7 @@ export const fetchIndexedTransactions = async (): Promise<ITransaction[]> => {
 
   return <Promise<ITransaction[]>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
       i18next.t("errorFetchingTransactions")
     )
   );
@@ -67,7 +67,7 @@ export const fetchSubmissions = async (
 
   return <Promise<IPaladinTransaction[]>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
       i18next.t("errorFetchingSubmissions")
     )
   );
@@ -85,7 +85,7 @@ export const fetchTransactionReceipt = async (
 
   return <Promise<ITransactionReceipt>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
       i18next.t("errorFetchingTransactionReceipt")
     )
   );
@@ -115,7 +115,7 @@ export const fetchTransactionReceipts = async (
 
   return <Promise<ITransactionReceipt[]>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
       i18next.t("errorFetchingTransactionReceipts")
     )
   );
@@ -143,7 +143,7 @@ export const fetchPaladinTransactions = async (
 
   return <Promise<IPaladinTransaction[]>>(
     returnResponse(
-      await fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
+      () => fetch(RpcEndpoint, generatePostReq(JSON.stringify(payload))),
       i18next.t("errorFetchingPaladinTransactions")
     )
   );