feat: scroll to results, configurable

Author: sohrab-

src/components/client/Transaction.tsx

@@ -1,5 +1,5 @@
 import { Box, Divider, Flex, Grid, Heading } from "@chakra-ui/react";
-import React from "react";
+import React, { useRef } from "react";
 import { useSessionStoreWithUndo } from "../../hooks/useSessionStore";
 import { EditableName } from "../common/EditableName";
 import { Instructions } from "./Instructions";
@@ -12,10 +12,13 @@ export const Transaction: React.FC = () => {
     state.set,
   ]);
 
+  // used for scrolling to results
+  const resultsRef = useRef<HTMLDivElement>(null);
+
   return (
     <Grid m="2">
       <Box p="5">
-        <TransactionHeader transaction={transaction} />
+        <TransactionHeader transaction={transaction} resultsRef={resultsRef} />
 
         <Flex mt="5" mb="3" alignItems="center">
           <Heading flex="1" size="lg">
@@ -41,7 +44,7 @@ export const Transaction: React.FC = () => {
       <Divider />
 
       <Box mt="5">
-        <Results />
+        <Results ref={resultsRef} />
       </Box>
     </Grid>
   );

src/components/client/TransactionHeader.tsx

@@ -25,6 +25,7 @@ import {
   FaPlay,
   FaShareAlt,
 } from "react-icons/fa";
+import { usePersistentStore } from "../../hooks/usePersistentStore";
 import { useSendWeb3Transaction } from "../../hooks/useSendWeb3Transaction";
 import {
   useSessionStoreWithoutUndo,
@@ -34,9 +35,13 @@ import { ITransaction } from "../../types/internal";
 import { DEFAULT_TRANSACTION_RUN, EMPTY_TRANSACTION } from "../../utils/state";
 import { RpcEndpointMenu } from "../common/RpcEndpointMenu";
 
-export const TransactionHeader: React.FC<{ transaction: ITransaction }> = ({
-  transaction,
-}) => {
+export const TransactionHeader: React.FC<{
+  transaction: ITransaction;
+  resultsRef: React.RefObject<HTMLDivElement>;
+}> = ({ transaction, resultsRef }) => {
+  const scrollToResults = usePersistentStore(
+    (state) => state.appOptions.scrollToResults
+  );
   const [transactionRun, setUI] = useSessionStoreWithoutUndo((state) => [
     state.transactionRun,
     state.set,
@@ -52,11 +57,25 @@ export const TransactionHeader: React.FC<{ transaction: ITransaction }> = ({
       setUI((state) => {
         state.transactionRun = { inProgress: true, signature };
       });
+      if (scrollToResults) {
+        resultsRef.current?.scrollIntoView({
+          block: "end",
+          inline: "nearest",
+          behavior: "smooth",
+        });
+      }
     },
     onError: (error) => {
       setUI((state) => {
         state.transactionRun.error = error.message;
       });
+      if (scrollToResults) {
+        resultsRef.current?.scrollIntoView({
+          block: "end",
+          inline: "nearest",
+          behavior: "smooth",
+        });
+      }
     },
   });
 

src/components/client/results/Results.tsx

@@ -7,6 +7,7 @@ import {
 import {
   Button,
   Flex,
+  forwardRef,
   Grid,
   Heading,
   IconButton,
@@ -21,7 +22,7 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { TransactionConfirmationStatus } from "@solana/web3.js";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useGetWeb3Transaction } from "../../../hooks/useGetWeb3Transaction";
 import { usePersistentStore } from "../../../hooks/usePersistentStore";
 import { useSessionStoreWithoutUndo } from "../../../hooks/useSessionStore";
@@ -46,7 +47,7 @@ type State = {
   logs?: string[];
 };
 
-export const Results: React.FC = () => {
+export const Results = forwardRef<{}, "div">((_, ref) => {
   const [results, setResults] = useState<State>({});
   const finality = usePersistentStore(
     (state) => state.transactionOptions.finality
@@ -125,7 +126,7 @@ export const Results: React.FC = () => {
   };
 
   return (
-    <Grid pt="2" pl="5" pr="5">
+    <Grid ref={ref} pt="2" pl="5" pr="5">
       <Flex alignItems="center" mb="4">
         <Heading mr="3" size="md">
           Results
@@ -231,4 +232,4 @@ export const Results: React.FC = () => {
       </Tabs>
     </Grid>
   );
-};
+});

src/components/options/GeneralOptions.tsx

@@ -37,6 +37,17 @@ export const GeneralOptions: React.FC = () => {
         }}
       />
 
+      <ToggleOption
+        id="scroll-to-results"
+        name="Scroll to results"
+        get={() => appOptions.scrollToResults}
+        set={(x) => {
+          set((state) => {
+            state.appOptions.scrollToResults = x;
+          });
+        }}
+      />
+
       <ToggleOption
         id="enable-numbering"
         name="Enable numbering"

src/types/state.ts

@@ -24,6 +24,7 @@ export type Explorer =
 export interface AppOptions {
   readonly explorer: Explorer;
   readonly autoConnectWallet: boolean;
+  readonly scrollToResults: boolean;
   readonly enableNumbering: boolean;
   readonly rpcEndpoints: SortableCollection<IRpcEndpoint>;
 }

src/utils/state.ts

@@ -63,6 +63,7 @@ export const DEFAULT_APP_OPTIONS: AppOptions = {
   explorer: "solanafm",
   autoConnectWallet: true,
   enableNumbering: false,
+  scrollToResults: true,
   rpcEndpoints: toSortableCollection(DEFAULT_RPC_ENDPOINTS),
 };