From e225e0d6a062f1e4a98a804e052434bad973fc38 Mon Sep 17 00:00:00 2001
From: karczuRF <88723742+karczuRF@users.noreply.github.com>
Date: Fri, 29 Nov 2024 12:01:28 +0100
Subject: [PATCH] fix(ui): show tx simulation (#147)

Description
---
Simulation dialog didn't show the updated balances and shows 'failure'
status every time. Error wasn't informative.
Before:

[Screencast from 21.11.2024
10:55:22.webm](https://github.com/user-attachments/assets/c4005d53-77c1-43ed-9a06-cad1b0f27de7)

After:

[Screencast from 21.11.2024
10:49:15.webm](https://github.com/user-attachments/assets/ed212139-8c64-472b-bd86-6dc6fe47066e)


Motivation and Context
---
Solves #101

How Has This Been Tested?
---

What process can a PR reviewer use to test or verify this change?
---

<!-- Checklist -->
<!-- 1. Is the title of your PR in the form that would make nice release
notes? The title, excluding the conventional commit
tag, will be included exactly as is in the CHANGELOG, so please think
about it carefully. -->


Breaking Changes
---

- [x] None
- [ ] Requires data directory on base node to be deleted
- [ ] Requires hard fork
- [ ] Other - Please specify

<!-- Does this include a breaking change? If so, include this line as a
footer -->
<!-- BREAKING CHANGE: Description what the user should do, e.g. delete a
database, resync the chain -->
---
 locales/en/components.json                    |  5 +-
 locales/pl/components.json                    |  5 +-
 .../TransactionConfirmationModal.tsx          | 50 +++++-------
 src/helpers/transaction.ts                    | 31 ++++++++
 src/store/provider/provider.action.ts         | 76 ++++++++++++++-----
 src/store/simulation/simulation.action.ts     | 27 ++++++-
 src/store/simulation/simulation.slice.ts      | 23 +++++-
 src/store/simulation/simulation.types.ts      | 10 +++
 src/store/transaction/transaction.types.ts    |  4 +-
 9 files changed, 172 insertions(+), 59 deletions(-)
 create mode 100644 src/helpers/transaction.ts

diff --git a/locales/en/components.json b/locales/en/components.json
index cb5fd8c..607901e 100644
--- a/locales/en/components.json
+++ b/locales/en/components.json
@@ -18,5 +18,8 @@
   "create-account": "New account",
   "open-logs-directory": "Logs",
   "simulation-status": "Simulation status",
-  "simulation-error-msg": "Simulation error"
+  "simulation-error-msg": "Simulation error message",
+  "tx-simulation-status": "Simulated transaction status",
+  "tx-simulation-error-msg": "Simulated tx error message",
+  "no-balance-update": "No balance updates available."
 }
diff --git a/locales/pl/components.json b/locales/pl/components.json
index e9c7946..0b80289 100644
--- a/locales/pl/components.json
+++ b/locales/pl/components.json
@@ -18,5 +18,8 @@
   "create-account": "Dodaj nowe konto",
   "open-logs-directory": "Logi",
   "simulation-status": "Status symulacji",
-  "simulation-error-msg": "Błąd symulacji"
+  "simulation-error-msg": "Błąd symulacji",
+  "tx-simulation-status": "Status symulowanej transakcji",
+  "tx-simulation-error-msg": "Błąd symulowanej transakcji",
+  "no-balance-update": "Aktualizacja balansów niedostępna"
 }
diff --git a/src/components/TransactionConfirmationModal.tsx b/src/components/TransactionConfirmationModal.tsx
index 145b6ca..9ae8a9a 100644
--- a/src/components/TransactionConfirmationModal.tsx
+++ b/src/components/TransactionConfirmationModal.tsx
@@ -10,9 +10,9 @@ import { simulationActions } from "../store/simulation/simulation.slice"
 import { BalanceUpdateView } from "./BalanceUpdate"
 import { useTranslation } from "react-i18next"
 import { ErrorSource } from "../store/error/error.types"
-import { CallFunction, CallMethod } from "@tari-project/tarijs/dist/builders/types/Instruction"
 import { resolveBackendErrorMessage } from "./ErrorSnackBar"
 import { metadataSelector } from "../store/metadata/metadata.selector"
+import { getFunctionOrMethod, getTransactionStatusName } from "../helpers/transaction"
 
 const selectSimulationById = (state: RootState, id?: number) => (id ? simulationsSelectors.selectById(state, id) : null)
 
@@ -50,31 +50,6 @@ export const TransactionConfirmationModal: React.FC = () => {
     )
   }
 
-  interface InstructionWithArgs {
-    instructionName: string
-    args: any[]
-  }
-  // Function to get function or method fields
-  function getFunctionOrMethod(instructions: object[]): InstructionWithArgs[] {
-    let functionNames: InstructionWithArgs[] = []
-    instructions.forEach((instruction) => {
-      // Check if the instruction is an object and not a string
-      if (typeof instruction === "object" && instruction !== null) {
-        if ("CallFunction" in instruction) {
-          const callFunction = instruction as CallFunction
-          functionNames.push({
-            instructionName: callFunction.CallFunction.function,
-            args: callFunction.CallFunction.args,
-          })
-        } else if ("CallMethod" in instruction) {
-          const callMethod = instruction as CallMethod
-          functionNames.push({ instructionName: callMethod.CallMethod.method, args: callMethod.CallMethod.args })
-        }
-      }
-    })
-    return functionNames
-  }
-
   return (
     <Dialog open={!!transaction} maxWidth="sm" fullWidth>
       <DialogTitle textAlign="center">{t("transaction-confirmation", { ns: "components" })}:</DialogTitle>
@@ -88,7 +63,7 @@ export const TransactionConfirmationModal: React.FC = () => {
             {getFunctionOrMethod(arg.instructions)
               .flatMap((i) => i.instructionName + " with args: " + i.args)
               .map((instruction, index) => (
-                <div key={index}>{instruction}</div> // Using <div> or <span> to wrap each instruction
+                <div key={index}>{instruction}</div>
               ))}
           </DialogContentText>
         ))}
@@ -102,11 +77,24 @@ export const TransactionConfirmationModal: React.FC = () => {
           </DialogContentText>
         )}
         <DialogContentText>
-          {t("balance-updates", { ns: "components" })}:
-          {simulation?.balanceUpdates?.map((update) => (
-            <BalanceUpdateView key={update.vaultAddress} {...update} />
-          ))}
+          {t("balance-updates", { ns: "components" })}:{" "}
+          {Array.isArray(simulation?.balanceUpdates) && simulation.balanceUpdates.length > 0 ? (
+            simulation.balanceUpdates.map((update) => <BalanceUpdateView key={update.vaultAddress} {...update} />)
+          ) : (
+            <span>{t("no-balance-update", { ns: "components" })}</span>
+          )}
+        </DialogContentText>
+        <DialogContentText>
+          {t("tx-simulation-status", { ns: "components" })}: {getTransactionStatusName(simulation?.transaction?.status)}
         </DialogContentText>
+        {simulation?.transaction.errorMsg && (
+          <DialogContentText>
+            {t("tx-simulation-error-msg", { ns: "components" })}:{" "}
+            {typeof simulation?.transaction?.errorMsg === "string"
+              ? simulation.transaction.errorMsg
+              : JSON.stringify(simulation?.transaction?.errorMsg)}
+          </DialogContentText>
+        )}
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} variant="contained">
diff --git a/src/helpers/transaction.ts b/src/helpers/transaction.ts
new file mode 100644
index 0000000..26674fc
--- /dev/null
+++ b/src/helpers/transaction.ts
@@ -0,0 +1,31 @@
+import { TransactionStatus } from "@tari-project/tarijs"
+import { CallFunction, CallMethod } from "@tari-project/tarijs/dist/builders/types/Instruction"
+
+interface InstructionWithArgs {
+  instructionName: string
+  args: any[]
+}
+
+export function getFunctionOrMethod(instructions: object[]): InstructionWithArgs[] {
+  let functionNames: InstructionWithArgs[] = []
+  instructions.forEach((instruction) => {
+    if (typeof instruction === "object" && instruction !== null) {
+      if ("CallFunction" in instruction) {
+        const callFunction = instruction as CallFunction
+        functionNames.push({
+          instructionName: callFunction.CallFunction.function,
+          args: callFunction.CallFunction.args,
+        })
+      } else if ("CallMethod" in instruction) {
+        const callMethod = instruction as CallMethod
+        functionNames.push({ instructionName: callMethod.CallMethod.method, args: callMethod.CallMethod.args })
+      }
+    }
+  })
+  return functionNames
+}
+
+export function getTransactionStatusName(status?: TransactionStatus): string {
+  if (!status) return ""
+  return TransactionStatus[status]
+}
diff --git a/src/store/provider/provider.action.ts b/src/store/provider/provider.action.ts
index 688ab16..6f5dd9a 100644
--- a/src/store/provider/provider.action.ts
+++ b/src/store/provider/provider.action.ts
@@ -7,7 +7,7 @@ import { Transaction, TUProviderMethod } from "../transaction/transaction.types"
 import { errorActions } from "../error/error.slice"
 import { RootState } from "../store"
 import { providerSelector } from "./provider.selector"
-import { SubmitTransactionRequest } from "@tari-project/tarijs"
+import { SubmitTransactionRequest, TransactionStatus } from "@tari-project/tarijs"
 import { invoke } from "@tauri-apps/api/core"
 import {
   SubstateDiff,
@@ -20,9 +20,10 @@ import {
   ResourceContainer,
   ResourceAddress,
   Amount,
+  RejectReason,
 } from "@tari-project/typescript-bindings"
 import { AccountsGetBalancesResponse } from "@tari-project/wallet_jrpc_client"
-import { BalanceUpdate } from "../simulation/simulation.types"
+import { BalanceUpdate, TxSimulation } from "../simulation/simulation.types"
 import { ErrorSource } from "../error/error.types"
 
 let handleMessage: typeof window.postMessage
@@ -31,6 +32,10 @@ const isAccept = (result: TransactionResult): result is { Accept: SubstateDiff }
   return "Accept" in result
 }
 
+const isReject = (result: TransactionResult): result is { Reject: RejectReason } => {
+  return "Reject" in result
+}
+
 const isVaultId = (substateId: SubstateId): substateId is { Vault: VaultId } => {
   return "Vault" in substateId
 }
@@ -66,31 +71,64 @@ export const initializeAction = () => ({
         }
 
         const { methodName, args, id } = event.data
-        const _method = methodName as TUProviderMethod
-        const runSimulation = async () => {
+        const method = methodName as TUProviderMethod
+        // tx simulation
+        const runSimulation = async (): Promise<{ balanceUpdates: BalanceUpdate[]; txSimulation: TxSimulation }> => {
           if (methodName !== "submitTransaction") {
-            return []
+            return {
+              balanceUpdates: [],
+              txSimulation: {
+                status: TransactionStatus.InvalidTransaction,
+                errorMsg: `Simulation for ${methodName} not supported`,
+              },
+            }
           }
           const transactionReq: SubmitTransactionRequest = { ...args[0], is_dry_run: true }
-          const tx = await provider.runOne(_method, [transactionReq])
+          const tx = await provider.runOne(method, [transactionReq])
+          
+          await provider.client.waitForTransactionResult({
+            transaction_id: tx.transaction_id,
+            timeout_secs: 10,
+          })
           const txReceipt = await provider.getTransactionResult(tx.transaction_id)
+          const txResult = txReceipt.result as FinalizeResult | null
+          if (!txResult?.result)
+            return {
+              balanceUpdates: [],
+              txSimulation: {
+                status: TransactionStatus.InvalidTransaction,
+                errorMsg: "Transaction result undefined",
+              },
+            }
 
-          const walletBalances: AccountsGetBalancesResponse = await invoke("get_balances", {})
-          const txResult = txReceipt.result as FinalizeResult
-          if (!isAccept(txResult.result)) return []
+          const txSimulation: TxSimulation = {
+            status: txReceipt.status,
+            errorMsg: isReject(txResult?.result) ? (txResult.result.Reject as string) : "",
+          }
 
-          const { up_substates } = txResult.result.Accept
+          if (!isAccept(txResult.result)) return { balanceUpdates: [], txSimulation }
+
+          let walletBalances: AccountsGetBalancesResponse
 
+          try {
+            walletBalances = await invoke("get_balances", {})
+          } catch (error) {
+            console.error(error)
+            const e = typeof error === "string" ? error : "Get balances error"
+            dispatch(errorActions.showError({ message: e, errorSource: ErrorSource.FRONTEND }))
+          }
+
+          const { up_substates } = txResult.result.Accept
           const balanceUpdates: BalanceUpdate[] = up_substates
             .map((upSubstate) => {
               const [substateId, { substate }] = upSubstate
-              if (!isVaultId(substateId) || !isVaultSubstate(substate)) return
-              if (!isFungible(substate.Vault.resource_container)) return
+              if (!isVaultId(substateId) || !isVaultSubstate(substate)) return undefined
+              if (!isFungible(substate.Vault.resource_container)) return undefined
               const userBalance = walletBalances.balances.find((balance) => {
                 if (!isVaultId(balance.vault_address)) return false
                 return balance.vault_address.Vault === substateId.Vault
               })
-              if (!userBalance) return
+              if (!userBalance) return undefined
               return {
                 vaultAddress: substateId.Vault,
                 tokenSymbol: userBalance.token_symbol || "",
@@ -98,12 +136,13 @@ export const initializeAction = () => ({
                 newBalance: substate.Vault.resource_container.Fungible.amount,
               }
             })
-            .filter((vault) => vault !== undefined)
-          return balanceUpdates
+            .filter((vault): vault is BalanceUpdate => vault !== undefined)
+          return { balanceUpdates, txSimulation }
         }
+        // tx submit
         const submit = async () => {
           try {
-            const result = await provider.runOne(_method, args)
+            const result = await provider.runOne(method, args)
             if (event.source) {
               event.source.postMessage({ id, result, type: "provider-call" }, { targetOrigin: event.origin })
             }
@@ -113,6 +152,7 @@ export const initializeAction = () => ({
             dispatch(errorActions.showError({ message: e, errorSource: ErrorSource.FRONTEND }))
           }
         }
+        // tx cancel
         const cancel = async () => {
           if (event.source) {
             event.source.postMessage(
@@ -126,11 +166,11 @@ export const initializeAction = () => ({
           cancel,
           runSimulation,
           status: "pending",
-          methodName: _method,
+          methodName: method,
           args,
           id,
         }
-        if (_method === "submitTransaction") {
+        if (method === "submitTransaction") {
           dispatch(transactionActions.addTransaction({ transaction }))
         } else {
           dispatch(transactionActions.sendTransactionRequest({ transaction }))
diff --git a/src/store/simulation/simulation.action.ts b/src/store/simulation/simulation.action.ts
index 92b6a61..615d0fc 100644
--- a/src/store/simulation/simulation.action.ts
+++ b/src/store/simulation/simulation.action.ts
@@ -2,6 +2,7 @@ import { ListenerEffectAPI, PayloadAction, ThunkDispatch, UnknownAction } from "
 import { simulationActions } from "./simulation.slice"
 import { SimulationRequestPayload } from "./simulation.types"
 import { RootState } from "../store"
+import { TransactionStatus } from "@tari-project/tarijs"
 
 export const runTransactionSimulationAction = () => ({
   actionCreator: simulationActions.runSimulationRequest,
@@ -16,16 +17,34 @@ export const runTransactionSimulationAction = () => ({
     const { runSimulation } = state.transaction.entities[transactionId]
 
     if (!provider) {
-      dispatch(simulationActions.runSimulationFailure({ transactionId, errorMsg: "Provider not found" }))
+      dispatch(
+        simulationActions.runSimulationFailure({
+          transactionId,
+          errorMsg: "Provider not found",
+          transaction: { status: TransactionStatus.InvalidTransaction, errorMsg: "Provider not found" },
+        })
+      )
       return
     }
 
     try {
-      const balanceUpdates = await runSimulation()
-      dispatch(simulationActions.runSimulationSuccess({ transactionId, balanceUpdates }))
+      const simulationResult = await runSimulation()
+      dispatch(
+        simulationActions.runSimulationSuccess({
+          transactionId,
+          balanceUpdates: simulationResult.balanceUpdates,
+          transaction: simulationResult.txSimulation,
+        })
+      )
     } catch (error) {
       console.error(error)
-      dispatch(simulationActions.runSimulationFailure({ transactionId, errorMsg: String(error) }))
+      dispatch(
+        simulationActions.runSimulationFailure({
+          transactionId,
+          errorMsg: String(error),
+          transaction: { status: TransactionStatus.Rejected, errorMsg: String(error) },
+        })
+      )
     }
   },
 })
diff --git a/src/store/simulation/simulation.slice.ts b/src/store/simulation/simulation.slice.ts
index 22f158e..c058460 100644
--- a/src/store/simulation/simulation.slice.ts
+++ b/src/store/simulation/simulation.slice.ts
@@ -7,6 +7,7 @@ import {
 } from "./simulation.types"
 import { listenerMiddleware } from "../store.listener"
 import { runTransactionSimulationAction } from "./simulation.action"
+import { TransactionStatus } from "@tari-project/tarijs"
 
 export const simulationAdapter = createEntityAdapter({
   selectId: (simulation: Simulation) => simulation.transactionId,
@@ -23,18 +24,36 @@ const simulationSlice = createSlice({
         status: "pending",
         balanceUpdates: [],
         errorMsg: "",
+        transaction: {
+          status: TransactionStatus.DryRun,
+          errorMsg: "",
+        },
       })
     },
     runSimulationSuccess: (state, action: PayloadAction<SimulationSuccessPayload>) => {
       simulationAdapter.updateOne(state, {
         id: action.payload.transactionId,
-        changes: { status: "success", balanceUpdates: action.payload.balanceUpdates },
+        changes: {
+          status: "success",
+          balanceUpdates: action.payload.balanceUpdates,
+          transaction: {
+            errorMsg: action.payload.transaction.errorMsg,
+            status: action.payload.transaction.status,
+          },
+        },
       })
     },
     runSimulationFailure: (state, action: PayloadAction<SimulationFailurePayload>) => {
       simulationAdapter.updateOne(state, {
         id: action.payload.transactionId,
-        changes: { status: "failure", errorMsg: action.payload.errorMsg },
+        changes: {
+          status: "failure",
+          errorMsg: action.payload.errorMsg,
+          transaction: {
+            errorMsg: action.payload.transaction.errorMsg,
+            status: action.payload.transaction.status,
+          },
+        },
       })
     },
   },
diff --git a/src/store/simulation/simulation.types.ts b/src/store/simulation/simulation.types.ts
index 4dd7f5f..9bac7e8 100644
--- a/src/store/simulation/simulation.types.ts
+++ b/src/store/simulation/simulation.types.ts
@@ -1,3 +1,5 @@
+import { TransactionStatus } from "@tari-project/tarijs"
+
 export type SimulationStatus = "pending" | "success" | "failure"
 
 export type Simulation = {
@@ -5,6 +7,7 @@ export type Simulation = {
   status: SimulationStatus
   balanceUpdates: BalanceUpdate[]
   errorMsg: string
+  transaction: TxSimulation
 }
 
 export type BalanceUpdate = {
@@ -20,8 +23,15 @@ export type SimulationRequestPayload = {
 export type SimulationSuccessPayload = {
   transactionId: number
   balanceUpdates: BalanceUpdate[]
+  transaction: TxSimulation
 }
 export type SimulationFailurePayload = {
   transactionId: number
   errorMsg: string
+  transaction: TxSimulation
+}
+
+export type TxSimulation = {
+  status: TransactionStatus
+  errorMsg: string
 }
diff --git a/src/store/transaction/transaction.types.ts b/src/store/transaction/transaction.types.ts
index 064637f..06efd02 100644
--- a/src/store/transaction/transaction.types.ts
+++ b/src/store/transaction/transaction.types.ts
@@ -1,5 +1,5 @@
 import { TUInternalProvider } from "@provider/TUInternalProvider"
-import { BalanceUpdate } from "../simulation/simulation.types"
+import { BalanceUpdate, TxSimulation } from "../simulation/simulation.types"
 import { SubmitTransactionRequest } from "@tari-project/tarijs"
 
 export type TransactionStatus = "pending" | "success" | "failure" | "cancelled"
@@ -11,7 +11,7 @@ export type Transaction = {
   id: number
   submit: () => void
   cancel: () => void
-  runSimulation: () => Promise<BalanceUpdate[]>
+  runSimulation: () => Promise<{ balanceUpdates: BalanceUpdate[]; txSimulation: TxSimulation }>
   status: TransactionStatus
 }