feat/311 - Implement ledger integration improvements

apps/extension/src/Approvals/Approvals.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider } from "styled-components";
 import { Routes, Route } from "react-router-dom";
 
 import { getTheme } from "@namada/utils";
+import { TxType } from "@namada/shared";
 
 import {
   AppContainer,
@@ -11,23 +12,29 @@ import {
   TopSection,
   Heading,
 } from "./Approvals.components";
-import { ApproveTransfer, ConfirmTransfer } from "./ApproveTransfer";
 import { ApproveConnection } from "./ApproveConnection";
 import { TopLevelRoute } from "Approvals/types";
-import { ConfirmLedgerTransfer } from "./ApproveTransfer/ConfirmLedgerTransfer";
-import { ApproveBond, ConfirmBond, ConfirmLedgerBond } from "./ApproveBond";
+import { ConfirmLedgerTx } from "./ApproveTx/ConfirmLedgerTx";
+import { ConfirmTx } from "./ApproveTx/ConfirmTx";
+import { ApproveTx } from "./ApproveTx/ApproveTx";
 
 export enum Status {
   Completed,
   Pending,
   Failed,
 }
 
+export type ApprovalDetails = {
+  source: string | null;
+  msgId: string | null;
+  txType: TxType | null;
+  publicKey: string | null;
+  target: string | null;
+};
+
 export const Approvals: React.FC = () => {
   const theme = getTheme("dark");
-  const [msgId, setMsgId] = useState("");
-  const [address, setAddress] = useState("");
-  const [publicKey, setPublicKey] = useState("");
+  const [details, setDetails] = useState<ApprovalDetails>();
 
   return (
     <ThemeProvider theme={theme}>
@@ -39,44 +46,17 @@ export const Approvals: React.FC = () => {
           </TopSection>
           <Routes>
             <Route
-              path={TopLevelRoute.ApproveTransfer}
-              element={
-                <ApproveTransfer setMsgId={setMsgId} setAddress={setAddress} />
-              }
+              path={`${TopLevelRoute.ApproveTx}/:type`}
+              element={<ApproveTx setDetails={setDetails} />}
             />
             <Route
-              path={TopLevelRoute.ConfirmTransfer}
-              element={<ConfirmTransfer msgId={msgId} address={address} />}
+              path={TopLevelRoute.ConfirmTx}
+              element={<ConfirmTx details={details} />}
             />
             <Route
-              path={TopLevelRoute.ConfirmLedgerTransfer}
-              element={<ConfirmLedgerTransfer msgId={msgId} />}
+              path={TopLevelRoute.ConfirmLedgerTx}
+              element={<ConfirmLedgerTx details={details} />}
             />
-            <Route
-              path={TopLevelRoute.ApproveBond}
-              element={
-                <ApproveBond
-                  setAddress={setAddress}
-                  setMsgId={setMsgId}
-                  setPublicKey={setPublicKey}
-                />
-              }
-            />
-            <Route
-              path={TopLevelRoute.ConfirmBond}
-              element={<ConfirmBond msgId={msgId} address={address} />}
-            />
-            <Route
-              path={TopLevelRoute.ConfirmLedgerBond}
-              element={
-                <ConfirmLedgerBond
-                  address={address}
-                  msgId={msgId}
-                  publicKey={publicKey}
-                />
-              }
-            />
-
             <Route
               path={TopLevelRoute.ApproveConnection}
               element={<ApproveConnection />}