[Frontend]: Update positions when transaction goes through.

radixdlt · Jan 15, 2024 · 421ff83 · 421ff83
1 parent 3ae2e1c
commit 421ff83
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,8 +1,10 @@
+import { useReducer } from "react";
 import "./App.css";
 import { CloseLiquidityPosition } from "./components/CloseLiquidityPosition";
 
 import { OpenLiquidityPosition } from "./components/OpenLiquidityPosition";
 import { useConnectedAccounts } from "./hooks/ConnectedAccounts";
+import { useLastTransactionHash } from "./hooks/LastTransactionHash";
 
 declare global {
   namespace JSX {
@@ -26,6 +28,8 @@ declare global {
 function App() {
   useConnectedAccounts();
 
+  const [lastTx, setLastTx] = useLastTransactionHash();
+
   return (
     <>
       <div
@@ -52,8 +56,14 @@ function App() {
           <OpenLiquidityPosition
             style={{ width: "100%" }}
             title="Open Liquidity Position"
+            lastTx={lastTx}
+            setLastTx={setLastTx}
+          />
+          <CloseLiquidityPosition
+            title="Close Liquidity Position"
+            lastTx={lastTx}
+            setLastTx={setLastTx}
           />
-          <CloseLiquidityPosition title="Close Liquidity Position" />
         </div>
       </div>
     </>

diff --git a/frontend/src/components/CloseLiquidityPosition.tsx b/frontend/src/components/CloseLiquidityPosition.tsx
@@ -13,15 +13,12 @@ import { useConnectedAccounts } from "../hooks/ConnectedAccounts";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { Button } from "react-bootstrap";
 import { dAppToolkit } from "../RadixDappToolkit";
-import { useLastTransactionHash } from "../hooks/LastTransactionHash";
 
 export const CloseLiquidityPosition = (props: Props) => {
   // Map<address, Map<local_id, data>>
   const [state, setState] = useState<
     Record<string, Record<string, LiquidityReceipt>>
   >({});
-  const [lastTx, setLastTx] = useLastTransactionHash();
-
   // Getting the state
   const configuration = bootstrapInformation;
   const connectedAccount = useConnectedAccounts();
@@ -102,7 +99,7 @@ export const CloseLiquidityPosition = (props: Props) => {
         })
         .then(setState);
     }
-  }, [connectedAccount, configuration, lastTx]);
+  }, [connectedAccount, configuration, props.lastTx]);
 
   if (connectedAccount.status === "success") {
     return (
@@ -167,7 +164,7 @@ export const CloseLiquidityPosition = (props: Props) => {
                             bootstrapInformation.protocol.ignition,
                             liquidityResourceAddress,
                             localId,
-                            setLastTx,
+                            props.setLastTx,
                           );
                         }}
                       >
@@ -200,6 +197,9 @@ interface Props {
   onExchangeChange?: (newExchange?: string) => void;
   onUserResourceChange?: (newResourceAddress?: string) => void;
   onAmountChange?: (newAmount?: string) => void;
+  /* Last Tx */
+  lastTx: string | null;
+  setLastTx: Dispatch<SetStateAction<string | null>>;
 }
 
 interface LiquidityReceipt {

diff --git a/frontend/src/components/OpenLiquidityPosition.tsx b/frontend/src/components/OpenLiquidityPosition.tsx
@@ -20,15 +20,13 @@ import {
 import { RadixDappToolkit } from "@radixdlt/radix-dapp-toolkit";
 import { SUPPORTED_EXCHANGES } from "../constants";
 import { dAppToolkit } from "../RadixDappToolkit";
-import { useLastTransactionHash } from "../hooks/LastTransactionHash";
 import { Dispatch, SetStateAction } from "react";
 
 const NO_X_AXIS_BORDERS_CLASS_NAME: string = "mx-0 px-0";
 
 export const OpenLiquidityPosition = (props: Props) => {
   const [openLiquidityPositionData, setOpenLiquidityPositionData] =
     useOpenLiquidityPositionData();
-  const [lastTx, setLastTx] = useLastTransactionHash();
 
   const connectedAccount = useConnectedAccounts();
 
@@ -210,7 +208,7 @@ export const OpenLiquidityPosition = (props: Props) => {
                   bootstrapInformation,
                   connectedAccount,
                   openLiquidityPositionData,
-                  setLastTx,
+                  props.setLastTx,
                 );
               }}
             >
@@ -230,6 +228,9 @@ interface Props {
   onExchangeChange?: (newExchange?: string) => void;
   onUserResourceChange?: (newResourceAddress?: string) => void;
   onAmountChange?: (newAmount?: string) => void;
+  /* Last Tx */
+  lastTx: string | null;
+  setLastTx: Dispatch<SetStateAction<string | null>>;
 }
 
 const constructManifest = (
@@ -291,7 +292,8 @@ const constructAndSendManifestToWallet = (
   console.log(manifest);
   dAppToolkit.walletApi
     .sendTransaction({ transactionManifest: manifest })
-    .map((item) => setLastTxHash(item.transactionIntentHash));
+    .map((item) => item.transactionIntentHash)
+    .map(setLastTxHash);
 };
 
 const highLevelConstructAndSendManifestToWallet = (