feat: [GSW-2040] Transaction Message

gnoswap-labs · Jan 13, 2025 · 0c50d82 · 0c50d82
1 parent 1c9f282
commit 0c50d82
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 8 deletions.
diff --git a/packages/web/src/components/common/approve-transaction-modal/ApproveTransactionModal.tsx b/packages/web/src/components/common/approve-transaction-modal/ApproveTransactionModal.tsx
@@ -16,10 +16,12 @@ import IconAdenaLogo from "../icons/defaultIcon/IconAdenaLogo";
 import Button, { ButtonHierarchy } from "@components/common/button/Button";
 import IconArrowDown from "../icons/IconArrowDown";
 import IconArrowUp from "../icons/IconArrowUp";
+import { TransactionMessage } from "@common/clients/wallet-client/protocols";
 
 interface Props {
   onConfirm: () => void;
   onCancel: () => void;
+  messages: TransactionMessage[];
 }
 
 const ApproveTransactionModal = ({ onConfirm, onCancel }: Props) => {

diff --git a/...b/src/containers/approve-transaction-modal-container/ApproveTransactionModalContainer.tsx b/...b/src/containers/approve-transaction-modal-container/ApproveTransactionModalContainer.tsx
@@ -1,12 +1,14 @@
+import { TransactionMessage } from "@common/clients/wallet-client/protocols";
 import ApproveTransactionModal from "@components/common/approve-transaction-modal/ApproveTransactionModal";
 
 interface Props {
   onApprove: () => void;
   onReject: () => void;
+  messages: TransactionMessage[];
 }
 
-const ApproveTransactionModalContainer = ({ onApprove, onReject }: Props) => {
-  return <ApproveTransactionModal onConfirm={onApprove} onCancel={onReject} />;
+const ApproveTransactionModalContainer = ({ onApprove, onReject, messages }: Props) => {
+  return <ApproveTransactionModal onConfirm={onApprove} onCancel={onReject} messages={messages} />;
 };
 
 export default ApproveTransactionModalContainer;
diff --git a/packages/web/src/containers/modal-container/ModalContainer.tsx b/packages/web/src/containers/modal-container/ModalContainer.tsx
@@ -7,6 +7,7 @@ import useEscCloseModal from "@hooks/common/use-esc-close-modal";
 import { Z_INDEX } from "@styles/zIndex";
 import useRouter from "@hooks/common/use-custom-router";
 import ApproveTransactionModalContainer from "@containers/approve-transaction-modal-container/ApproveTransactionModalContainer";
+import { TransactionMessage } from "@common/clients/wallet-client/protocols";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type EventCallback = (...args: any[]) => void;
@@ -95,9 +96,9 @@ const ModalContainer: React.FC = () => {
       closeApproveTransactionModal();
     };
 
-    eventBus.on("show-approve-modal", () => {
+    eventBus.on("show-approve-modal", (messages: TransactionMessage[]) => {
       setApproveTransactionModalContent(
-        <ApproveTransactionModalContainer onApprove={handleApprove} onReject={handleReject} />,
+        <ApproveTransactionModalContainer messages={messages} onApprove={handleApprove} onReject={handleReject} />,
       );
       setOpenedApproveTransactionModal(true);
     });

diff --git a/packages/web/src/repositories/swap/swap-router-repository-impl.ts b/packages/web/src/repositories/swap/swap-router-repository-impl.ts
@@ -96,7 +96,7 @@ export class SwapRouterRepositoryImpl implements SwapRouterRepository {
       (packagePath, owner, spender) => getGRC20Allowance(this.rpcProvider!, packagePath, owner, spender),
     );
 
-    return withSocialWalletApproval(this.walletClient, () => {
+    return withSocialWalletApproval(this.walletClient, messages, () => {
       return this.walletClient!.sendTransaction({
         messages,
         gasFee: DEFAULT_GAS_FEE,

diff --git a/packages/web/src/utils/transaction-utils.ts b/packages/web/src/utils/transaction-utils.ts
@@ -1,5 +1,6 @@
 import { eventBus } from "@containers/modal-container/ModalContainer";
 import { WalletClient } from "@common/clients/wallet-client";
+import { TransactionMessage } from "@common/clients/wallet-client/protocols";
 
 const TX_EVENTS = {
   SHOW_MODAL: "show-approve-modal",
@@ -22,7 +23,7 @@ const TX_EVENTS = {
  * @returns Whether the user is approved - Promise<boolean>
  *
  */
-export const showApproveTransactionModal = async (): Promise<boolean> => {
+export const showApproveTransactionModal = async (messages: TransactionMessage[]): Promise<boolean> => {
   return new Promise((resolve, reject) => {
     try {
       const eventHandlers = {
@@ -44,7 +45,7 @@ export const showApproveTransactionModal = async (): Promise<boolean> => {
       eventBus.on(TX_EVENTS.APPROVED, eventHandlers.handleApprove);
       eventBus.on(TX_EVENTS.REJECTED, eventHandlers.handleReject);
 
-      eventBus.emit(TX_EVENTS.SHOW_MODAL);
+      eventBus.emit(TX_EVENTS.SHOW_MODAL, messages);
 
       const TIMEOUT_MS = 1 * 60 * 1000;
       setTimeout(() => {
@@ -71,14 +72,15 @@ export const showApproveTransactionModal = async (): Promise<boolean> => {
  */
 export const withSocialWalletApproval = async <T>(
   walletClient: WalletClient | null,
+  messages: TransactionMessage[],
   executeTransaction: () => Promise<T>,
 ): Promise<T> => {
   if (!walletClient) {
     throw new Error("Wallet client is not initialized");
   }
 
   if (walletClient.getWalletType() === "SOCIAL_WALLET") {
-    const isApproved = await showApproveTransactionModal();
+    const isApproved = await showApproveTransactionModal(messages);
     if (!isApproved) {
       throw new Error("Transaction rejected");
     }