refactor: use the glboal storage for results components

labeleven-dev · Apr 9, 2023 · be66b89 · be66b89
1 parent ff962f3
commit be66b89
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 98 deletions.
diff --git a/src/components/client/Client.tsx b/src/components/client/Client.tsx
@@ -62,7 +62,13 @@ export const Client: React.FC = () => {
   const startGet = (signature: string, skipPolling: boolean = false) => {
     if (!signature) return;
     set((state) => {
-      state.transactionRun = { inProgress: true, signature };
+      state.transactionRun = {
+        inProgress: true,
+        signature,
+        // set prior to transaction submission so needs to be preserved
+        recentBlockhash: state.transactionRun.recentBlockhash,
+        lastValidBlockHeight: state.transactionRun.lastValidBlockHeight,
+      };
     });
     start(signature, skipPolling);
   };

diff --git a/src/components/client/results/BalanceTable.tsx b/src/components/client/results/BalanceTable.tsx
@@ -12,16 +12,19 @@ import {
   Tr,
 } from "@chakra-ui/react";
 import { ExplorerButton } from "components/common/ExplorerButton";
-import { useSessionStoreWithUndo } from "hooks/useSessionStore";
+import {
+  useSessionStoreWithUndo,
+  useSessionStoreWithoutUndo,
+} from "hooks/useSessionStore";
 import React, { useState } from "react";
-import { IBalance } from "types/internal";
 import { toSol } from "utils/web3js";
 
-export const BalanceTable: React.FC<{
-  balances: IBalance[];
-}> = ({ balances }) => {
+export const BalanceTable: React.FC = () => {
   const [showOnlyChanges, setShowOnlyChanges] = useState(true);
   const rpcEndpoint = useSessionStoreWithUndo((state) => state.rpcEndpoint);
+  const balances = useSessionStoreWithoutUndo(
+    (state) => state.transactionRun.balances ?? []
+  );
 
   return (
     <TableContainer fontSize="sm" mb="8">

diff --git a/src/components/client/results/ProgramLogs.tsx b/src/components/client/results/ProgramLogs.tsx
@@ -12,13 +12,12 @@ import { CopyButton } from "components/common/CopyButton";
 import { useSessionStoreWithoutUndo } from "hooks/useSessionStore";
 import React, { useMemo } from "react";
 
-export const ProgramLogs: React.FC<{
-  inProgress: boolean;
-  logs?: string[];
-}> = ({ inProgress, logs }) => {
-  const signature = useSessionStoreWithoutUndo(
-    (state) => state.transactionRun.signature
-  );
+export const ProgramLogs: React.FC = () => {
+  const [signature, inProgress, logs] = useSessionStoreWithoutUndo((state) => [
+    state.transactionRun.signature,
+    state.transactionRun.inProgress,
+    state.transactionRun.logs,
+  ]);
   const joinedUpLogs = logs?.join("\n");
   const downloadUrl = useMemo(
     () =>

diff --git a/src/components/client/results/Results.tsx b/src/components/client/results/Results.tsx
@@ -40,23 +40,27 @@ export const Results = forwardRef<
 >(({ startGet, cancelGet, endedAt }, ref) => {
   const finality = useConfigStore((state) => state.transactionOptions.finality);
 
-  const [transactionRun, set] = useShallowSessionStoreWithoutUndo((state) => [
-    state.transactionRun,
-    state.set,
-  ]);
+  const [signature, inProgress, confirmationStatus, error, set] =
+    useShallowSessionStoreWithoutUndo((state) => [
+      state.transactionRun.signature,
+      state.transactionRun.inProgress,
+      state.transactionRun.confirmationStatus,
+      state.transactionRun.error,
+      state.set,
+    ]);
 
-  const isSimulated = transactionRun.signature === SIMULATED_SIGNATURE;
+  const isSimulated = signature === SIMULATED_SIGNATURE;
 
   return (
     <Grid ref={ref} pt="2" pl="5" pr="5">
       <Flex alignItems="center" mb="4">
         <Heading mr="3" size="md">
           Results
         </Heading>
-        {transactionRun.confirmationStatus === finality ||
-        transactionRun.confirmationStatus === "finalized" ||
+        {confirmationStatus === finality ||
+        confirmationStatus === "finalized" ||
         isSimulated ? (
-          transactionRun.error ? (
+          error ? (
             <>
               <WarningIcon mr="1" color="red.400" />
               <Text color="red.400" fontSize="sm">
@@ -74,8 +78,8 @@ export const Results = forwardRef<
             </>
           )
         ) : (
-          transactionRun.signature &&
-          !transactionRun.inProgress && (
+          signature &&
+          !inProgress && (
             <>
               <QuestionIcon mr="1" color="yellow.400" />
               <Text color="yellow.400" fontSize="sm">
@@ -89,15 +93,15 @@ export const Results = forwardRef<
 
         {
           // do not display if transaction has been cleared, i.e. no signature
-          endedAt && transactionRun.signature && (
+          endedAt && signature && (
             <Tooltip label={new Date(endedAt).toLocaleString()}>
               <Text fontSize="sm" color="gray.400">
                 Last fetched <RelativeTimestamp timestamp={endedAt} />
               </Text>
             </Tooltip>
           )
         }
-        {transactionRun.inProgress ? (
+        {inProgress ? (
           <Button
             color="red.600"
             variant="outline"
@@ -107,7 +111,7 @@ export const Results = forwardRef<
             Cancel
           </Button>
         ) : (
-          transactionRun.signature && (
+          signature && (
             <Tooltip label="Refresh">
               <IconButton
                 ml="1"
@@ -116,7 +120,7 @@ export const Results = forwardRef<
                 variant="ghost"
                 size="sm"
                 onClick={() => {
-                  startGet(transactionRun.signature, true);
+                  startGet(signature, true);
                 }}
               />
             </Tooltip>
@@ -125,22 +129,15 @@ export const Results = forwardRef<
       </Flex>
 
       <ErrorAlert
-        error={transactionRun.error}
+        error={error}
         onClose={() => {
           set((state) => {
             state.transactionRun.error = "";
           });
         }}
       />
 
-      <Signature
-        signature={transactionRun.signature}
-        confirmationStatus={transactionRun.confirmationStatus}
-        confirmations={transactionRun.confirmations}
-        slot={transactionRun.slot}
-        fee={transactionRun.fee}
-        unitsConsumed={transactionRun.unitsConsumed}
-      />
+      <Signature />
 
       <Tabs colorScheme="main" variant="enclosed">
         <TabList>
@@ -149,13 +146,10 @@ export const Results = forwardRef<
         </TabList>
         <TabPanels>
           <TabPanel>
-            <ProgramLogs
-              inProgress={transactionRun.inProgress}
-              logs={transactionRun.logs}
-            />
+            <ProgramLogs />
           </TabPanel>
           <TabPanel>
-            <BalanceTable balances={transactionRun.balances || []} />
+            <BalanceTable />
           </TabPanel>
         </TabPanels>
       </Tabs>

diff --git a/src/components/client/results/Signature.tsx b/src/components/client/results/Signature.tsx
@@ -1,28 +1,35 @@
-import { Box, Flex, FormLabel, Tag, Text } from "@chakra-ui/react";
-import { TransactionConfirmationStatus } from "@solana/web3.js";
+import { Box, Flex, FormLabel, Tag, Text, Wrap } from "@chakra-ui/react";
 import { CopyButton } from "components/common/CopyButton";
 import { ExplorerButton } from "components/common/ExplorerButton";
-import { useSessionStoreWithUndo } from "hooks/useSessionStore";
+import {
+  useSessionStoreWithUndo,
+  useSessionStoreWithoutUndo,
+} from "hooks/useSessionStore";
 import React from "react";
 import { SIMULATED_SIGNATURE } from "utils/ui-constants";
-import { toSol } from "utils/web3js";
+import { short, toSol } from "utils/web3js";
 
-export const Signature: React.FC<{
-  signature: string;
-  confirmations?: number;
-  confirmationStatus?: TransactionConfirmationStatus | "simulated";
-  slot?: number;
-  fee?: number;
-  unitsConsumed?: number;
-}> = ({
-  signature,
-  confirmations,
-  confirmationStatus,
-  slot,
-  fee,
-  unitsConsumed,
-}) => {
+export const Signature: React.FC = () => {
   const rpcEndpoint = useSessionStoreWithUndo((state) => state.rpcEndpoint);
+  const [
+    signature,
+    recentBlockhash,
+    lastValidBlockHeight,
+    confirmations,
+    confirmationStatus,
+    slot,
+    fee,
+    unitsConsumed,
+  ] = useSessionStoreWithoutUndo((state) => [
+    state.transactionRun.signature,
+    state.transactionRun.recentBlockhash,
+    state.transactionRun.lastValidBlockHeight,
+    state.transactionRun.confirmations,
+    state.transactionRun.confirmationStatus,
+    state.transactionRun.slot,
+    state.transactionRun.fee,
+    state.transactionRun.unitsConsumed,
+  ]);
 
   return (
     <>
@@ -57,46 +64,61 @@ export const Signature: React.FC<{
       </Flex>
 
       <Flex mb="4" alignItems="center">
-        <Box width="70px" />
+        <Box width="90px" />
+        <Wrap>
+          {confirmationStatus && confirmationStatus !== "simulated" && (
+            <Tag
+              mr="1"
+              colorScheme={
+                confirmationStatus === "confirmed" ||
+                confirmationStatus === "finalized"
+                  ? "green"
+                  : confirmationStatus === "processed"
+                  ? "yellow"
+                  : "blue"
+              }
+            >
+              {confirmationStatus === "processed"
+                ? "Processed"
+                : confirmationStatus === "confirmed"
+                ? `Confirmed by ${confirmations || 0}`
+                : confirmationStatus === "finalized"
+                ? `Finalised by max confirmations`
+                : ""}
+            </Tag>
+          )}
 
-        {confirmationStatus && confirmationStatus !== "simulated" && (
-          <Tag
-            mr="1"
-            colorScheme={
-              confirmationStatus === "confirmed" ||
-              confirmationStatus === "finalized"
-                ? "green"
-                : confirmationStatus === "processed"
-                ? "yellow"
-                : "blue"
-            }
-          >
-            {confirmationStatus === "processed"
-              ? "Processed"
-              : confirmationStatus === "confirmed"
-              ? `Confirmed by ${confirmations || 0}`
-              : confirmationStatus === "finalized"
-              ? `Finalised by max confirmations`
-              : ""}
-          </Tag>
-        )}
+          {recentBlockhash && (
+            <Tag mr="1">
+              <strong>Recent blockhash:&nbsp;</strong> {short(recentBlockhash)}
+              <CopyButton ml="1" size="xs" value={recentBlockhash} />
+            </Tag>
+          )}
 
-        {slot && (
-          <Tag mr="1">
-            <strong>Slot:&nbsp;</strong> {slot}
-          </Tag>
-        )}
-        {fee != undefined && (
-          <Tag mr="1">
-            <strong>Fee:&nbsp;</strong> {toSol(fee).toFixed()}{" "}
-            {/* TODO with logo */}
-          </Tag>
-        )}
-        {unitsConsumed != undefined && (
-          <Tag mr="1">
-            <strong>Units Consumed:&nbsp;</strong> {unitsConsumed}{" "}
-          </Tag>
-        )}
+          {lastValidBlockHeight !== undefined && (
+            <Tag mr="1">
+              <strong>Last valid block height:&nbsp;</strong>{" "}
+              {lastValidBlockHeight}
+            </Tag>
+          )}
+
+          {slot && (
+            <Tag mr="1">
+              <strong>Slot:&nbsp;</strong> {slot}
+            </Tag>
+          )}
+          {fee != undefined && (
+            <Tag mr="1">
+              <strong>Fee:&nbsp;</strong> {toSol(fee).toFixed()}{" "}
+              {/* TODO with logo */}
+            </Tag>
+          )}
+          {unitsConsumed != undefined && (
+            <Tag mr="1">
+              <strong>Units Consumed:&nbsp;</strong> {unitsConsumed}{" "}
+            </Tag>
+          )}
+        </Wrap>
       </Flex>
     </>
   );