From 70827d40aac8ce9437650d19ed9ae0d76b4070a1 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@users.noreply.github.com>
Date: Mon, 4 Nov 2024 13:34:07 -0500
Subject: [PATCH] Sign Transction: scroll to response when signatures are added
 (#1129)

---
 .../transaction/sign/components/Overview.tsx  | 82 ++++++++++---------
 src/helpers/scrollElIntoView.ts               | 12 +++
 src/hooks/useScrollIntoView.ts                |  9 +-
 3 files changed, 58 insertions(+), 45 deletions(-)
 create mode 100644 src/helpers/scrollElIntoView.ts

diff --git a/src/app/(sidebar)/transaction/sign/components/Overview.tsx b/src/app/(sidebar)/transaction/sign/components/Overview.tsx
index 0fefc263..3447fbb6 100644
--- a/src/app/(sidebar)/transaction/sign/components/Overview.tsx
+++ b/src/app/(sidebar)/transaction/sign/components/Overview.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Card, Icon, Text, Button, Select } from "@stellar/design-system";
 import {
   FeeBumpTransaction,
@@ -21,6 +21,7 @@ import { txHelper } from "@/helpers/txHelper";
 import { delayedAction } from "@/helpers/delayedAction";
 import { shortenStellarAddress } from "@/helpers/shortenStellarAddress";
 import { arrayItem } from "@/helpers/arrayItem";
+import { scrollElIntoView } from "@/helpers/scrollElIntoView";
 import { useSignWithExtensionWallet } from "@/hooks/useSignWithExtensionWallet";
 
 import { validate } from "@/validate";
@@ -56,6 +57,7 @@ export const Overview = () => {
   } = transaction;
 
   const router = useRouter();
+  const successResponseEl = useRef<HTMLDivElement | null>(null);
 
   const [signError, setSignError] = useState("");
 
@@ -252,6 +254,8 @@ export const Overview = () => {
 
         const signedTx = tx.toEnvelope().toXDR("base64");
         updateSignedTx(signedTx);
+
+        scrollElIntoView(successResponseEl);
       } else {
         updateSignedTx("");
       }
@@ -857,44 +861,46 @@ export const Overview = () => {
         </Card>
 
         {sign.signedTx ? (
-          <ValidationResponseCard
-            variant="success"
-            title="Transaction signed!"
-            subtitle={getAllSigsMessage()}
-            response={
-              <Box gap="xs">
-                <div>
-                  <div>{sign.signedTx}</div>
-                </div>
-              </Box>
-            }
-            note={
-              <>
-                Now that this transaction is signed, you can submit it to the
-                network. Horizon provides an endpoint called Post Transaction
-                that will relay your transaction to the network and inform you
-                of the result.
-              </>
-            }
-            footerLeftEl={
-              <Button size="md" variant="secondary" onClick={onViewSubmitTxn}>
-                Submit in Transaction Submitter
-              </Button>
-            }
-            footerRightEl={
-              <div className="SignTx__Buttons">
-                <ViewInXdrButton xdrBlob={sign.signedTx} />
-
-                <Button
-                  size="md"
-                  variant="tertiary"
-                  onClick={onWrapWithFeeBump}
-                >
-                  Wrap with Fee Bump
+          <div ref={successResponseEl}>
+            <ValidationResponseCard
+              variant="success"
+              title="Transaction signed!"
+              subtitle={getAllSigsMessage()}
+              response={
+                <Box gap="xs">
+                  <div>
+                    <div>{sign.signedTx}</div>
+                  </div>
+                </Box>
+              }
+              note={
+                <>
+                  Now that this transaction is signed, you can submit it to the
+                  network. Horizon provides an endpoint called Post Transaction
+                  that will relay your transaction to the network and inform you
+                  of the result.
+                </>
+              }
+              footerLeftEl={
+                <Button size="md" variant="secondary" onClick={onViewSubmitTxn}>
+                  Submit in Transaction Submitter
                 </Button>
-              </div>
-            }
-          />
+              }
+              footerRightEl={
+                <div className="SignTx__Buttons">
+                  <ViewInXdrButton xdrBlob={sign.signedTx} />
+
+                  <Button
+                    size="md"
+                    variant="tertiary"
+                    onClick={onWrapWithFeeBump}
+                  >
+                    Wrap with Fee Bump
+                  </Button>
+                </div>
+              }
+            />
+          </div>
         ) : null}
 
         {signError ? (
diff --git a/src/helpers/scrollElIntoView.ts b/src/helpers/scrollElIntoView.ts
new file mode 100644
index 00000000..5d94865f
--- /dev/null
+++ b/src/helpers/scrollElIntoView.ts
@@ -0,0 +1,12 @@
+import { delayedAction } from "@/helpers/delayedAction";
+
+export const scrollElIntoView = (
+  scrollEl: React.MutableRefObject<HTMLDivElement | null>,
+) => {
+  delayedAction({
+    action: () => {
+      scrollEl?.current?.scrollIntoView({ behavior: "smooth" });
+    },
+    delay: 300,
+  });
+};
diff --git a/src/hooks/useScrollIntoView.ts b/src/hooks/useScrollIntoView.ts
index 64ecd297..ada92b3c 100644
--- a/src/hooks/useScrollIntoView.ts
+++ b/src/hooks/useScrollIntoView.ts
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { delayedAction } from "@/helpers/delayedAction";
+import { scrollElIntoView } from "@/helpers/scrollElIntoView";
 
 export const useScrollIntoView = (
   isEnabled: boolean,
@@ -7,12 +7,7 @@ export const useScrollIntoView = (
 ) => {
   useEffect(() => {
     if (isEnabled) {
-      delayedAction({
-        action: () => {
-          scrollEl?.current?.scrollIntoView({ behavior: "smooth" });
-        },
-        delay: 300,
-      });
+      scrollElIntoView(scrollEl);
     }
   }, [isEnabled, scrollEl]);
 };