feat: [GSW-2040] SendTransaction

packages/web/package.json

@@ -21,6 +21,7 @@
     "@emotion/styled": "11.10.6",
     "@floating-ui/react": "0.21.1",
     "@gnolang/gno-js-client": "1.3.0",
+    "@gnolang/tm2-js-client": "^1.2.2",
     "@hookform/resolvers": "3.3.2",
     "@tanstack/react-query": "4.26.1",
     "axios": "1.3.4",

packages/web/src/common/clients/wallet-client/social/social-wallet-client.ts

@@ -4,10 +4,11 @@ import {
   SocialCustomConfigure,
   SocialGoogleConfigure,
   SocialTwitterConfigure,
-  TransactionBuilder,
   TransactionMessage as SDKTransactionMessage,
   WalletResponseExecuteType,
 } from "@adena-wallet/sdk";
+import { base64ToUint8Array, Tx } from "@gnolang/tm2-js-client";
+
 import { createTimeout } from "@common/utils/client-util";
 import { DEFAULT_GAS_WANTED } from "@common/values";
 import { SocialLoginType, WalletType } from "src/types/wallet.types";
@@ -27,6 +28,7 @@ import { getSocialWalletConfig } from "./config";
 import { parseTransactionResponse } from "../adena/adena-client.util";
 import { AdenaSendTransactionSuccessResponse } from "../adena/adena";
 import { DEFAULT_CHAIN_ID } from "@constants/environment.constant";
+import { createDocument, documentToTx } from "@utils/messages.utils";
 
 export class SocialWalletClient implements WalletClient {
   private sdk: AdenaSDK | null;
@@ -135,10 +137,12 @@ export class SocialWalletClient implements WalletClient {
   public sendTransaction = async <T = string[]>(
     transaction: SendTransactionRequestParam,
   ): Promise<WalletResponse<SendTransactionResponse<T | null>>> => {
+    // Check if the SDK is initialized
     if (!this.sdk) {
       throw new Error("Social wallet not initialized");
     }
 
+    // Convert messages from an incoming transaction to SDK format
     const messages: SDKTransactionMessage[] = transaction.messages.map(message => {
       if (isContractMessage(message)) {
         return {
@@ -152,14 +156,40 @@ export class SocialWalletClient implements WalletClient {
       };
     });
 
-    const tx = TransactionBuilder.create()
-      .messages(...messages)
-      .gasWanted(transaction.gasWanted || DEFAULT_GAS_WANTED)
-      .memo(transaction.memo || "")
-      .build();
+    // Get Current account information
+    const account = await this.sdk.getAccount();
+    // Create a document from the account information and messages
+    const document = createDocument({
+      accountNumber: Number(account.data?.accountNumber) || 0,
+      accountSequence: Number(account.data?.sequence) || 0,
+      chainId: DEFAULT_CHAIN_ID || "",
+      messages,
+      gasWanted: transaction.gasWanted || DEFAULT_GAS_WANTED,
+      gasFee: transaction.gasFee || 1000000,
+    });
+    // Convert Document to Tx format (documentToTx)
+    const tx = documentToTx(document);
+
+    // Signing transactions with signTransaction in the SDK
+    const signedTxResponse = await this.sdk.signTransaction({ tx });
+    // Decode the signed transaction and broadcast it to the network using broadcastTransaction in the SDK
+    const decoded = base64ToUint8Array(signedTxResponse.data?.encodedTransaction || "");
+    if (!decoded) {
+      return {
+        status: "error",
+        code: 1,
+        type: WalletResponseExecuteType.SIGN_TX,
+        message: "Failed to sign transaction",
+        data: null,
+      };
+    }
+
+    // Binary data converted from base64-encoded transactions to Uint8Array
+    const signedTx = Tx.decode(decoded);
 
+    // Broadcasting transactions to the network with broadcastTransaction
     return createTimeout<WalletResponse<SendTransactionResponse<T | null>>>(
-      this.sdk.broadcastTransaction({ tx }).then(response => {
+      this.sdk.broadcastTransaction({ tx: signedTx }).then(response => {
         console.log("Social Wallet Response", response);
         return parseTransactionResponse(
           response as WalletResponse<AdenaSendTransactionSuccessResponse>,

packages/web/src/components/common/header/wallet-connector-button/wallet-connector-menu/WalletConnectorMenu.tsx

@@ -1,7 +1,8 @@
 import BigNumber from "bignumber.js";
-import { useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { useTranslation } from "next-i18next";
 import React, { useCallback, useMemo, useRef, useState } from "react";
+import { makeBankSendGNOTMessage } from "@common/clients/wallet-client/transaction-messages";
 
 import Button, { ButtonHierarchy } from "@components/common/button/Button";
 import IconCopy from "@components/common/icons/IconCopy";
@@ -12,7 +13,7 @@ import ThemeModeContainer from "@containers/theme-mode-container/ThemeModeContai
 import { useGnoscanUrl } from "@hooks/common/use-gnoscan-url";
 import { AccountModel } from "@models/account/account-model";
 import { ITokenResponse } from "@repositories/token";
-import { CommonState } from "@states/index";
+import { CommonState, WalletState } from "@states/index";
 import { roundDownDecimalNumber } from "@utils/regex";
 import { formatAddress } from "@utils/string-utils";
 import IconPolygon from "@components/common/icons/IconPolygon";
@@ -30,6 +31,7 @@ import {
 import SocialWalletNotification from "./SocialWalletNotification";
 import { WalletTypeState } from "src/types/wallet.types";
 import RenderWalletIcon from "../RenderWalletIcon";
+import { DEFAULT_GAS_FEE, DEFAULT_GAS_WANTED } from "@common/values";
 
 interface IconButtonClickProps {
   copyClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -99,6 +101,8 @@ const WalletConnectorMenu: React.FC<WalletConnectorMenuProps> = ({
   gnotToken,
   walletType,
 }) => {
+  const [walletClient] = useAtom(WalletState.client);
+
   const { i18n, t } = useTranslation();
   const { getAccountUrl } = useGnoscanUrl();
   const network = useAtomValue(CommonState.network);
@@ -144,6 +148,20 @@ const WalletConnectorMenu: React.FC<WalletConnectorMenuProps> = ({
     connectAdenaClient();
   }, [connectAdenaClient]);
 
+  // SendTransaction Example
+  const swapTransaction = () => {
+    const messages = makeBankSendGNOTMessage({
+      from: "g1z5cvp07l80pvsu8rvyyncjrrktpzm8rek4nnnp",
+      to: "g1z5cvp07l80pvsu8rvyyncjrrktpzm8rek4nnnp",
+      sendAmount: "1000000",
+    });
+    walletClient
+      ?.sendTransaction({ messages: [messages], gasFee: DEFAULT_GAS_FEE, gasWanted: DEFAULT_GAS_WANTED })
+      .then(result => {
+        console.log(result, "result");
+      });
+  };
+
   return (
     <>
       <WalletConnectorMenuWrapper ref={menuRef} width={window?.innerWidth}>
@@ -193,7 +211,7 @@ const WalletConnectorMenu: React.FC<WalletConnectorMenuProps> = ({
             />
           </div>
         )}
-
+        <button onClick={swapTransaction}>TXTXTXTXTXT</button>
         <div className="theme-container">
           <ThemeSelector className="mt-16">
             <span>{t("HeaderFooter:language")}</span>