Merge pull request #203 from gnoswap-labs/GSW-343-set-up-the-tm-2-js-…

…client-environment

[GSW-322] feat: Apply tm2-js-client and integrate with Adena

packages/web/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL="https://mock-api.gnoswap.io/v3/testnet"

packages/web/package.json

@@ -18,6 +18,7 @@
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
     "@floating-ui/react": "0.21.1",
+    "@gnolang/tm2-js-client": "1.1.4",
     "@tanstack/react-query": "4.26.1",
     "axios": "1.3.4",
     "bignumber.js": "9.1.1",
@@ -28,7 +29,8 @@
     "react-dom": "18.2.0",
     "typescript": "4.9.5",
     "url-loader": "4.1.1",
-    "utility-types": "3.10.0"
+    "utility-types": "3.10.0",
+    "ws": "^8.14.2"
   },
   "devDependencies": {
     "@babel/core": "7.21.0",

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

@@ -4,6 +4,7 @@ import {
   SendTransactionRequestParam,
   AccountInfo,
   SendTransactionResponse,
+  isContractMessage,
 } from "../protocols";
 import { WalletClient } from "../wallet-client";
 import { Adena } from "./adena";
@@ -13,7 +14,6 @@ export class AdenaClient implements WalletClient {
 
   constructor() {
     this.adena = null;
-    this.initAdena();
   }
 
   public initAdena = () => {
@@ -23,13 +23,15 @@ export class AdenaClient implements WalletClient {
   };
 
   private getAdena() {
+    this.initAdena();
     if (this.adena === null) {
       throw new Error("Not found");
     }
     return this.adena;
   }
 
   public existsWallet = (): boolean => {
+    this.initAdena();
     return this.adena !== null;
   };
 
@@ -44,7 +46,22 @@ export class AdenaClient implements WalletClient {
   public sendTransaction = (
     transaction: SendTransactionRequestParam,
   ): Promise<WalletResponse<SendTransactionResponse>> => {
-    return createTimeout(this.getAdena().DoContract(transaction));
+    const request = {
+      ...transaction,
+      messages: transaction.messages.map(message => {
+        if (isContractMessage(message)) {
+          return {
+            type: "/vm.m_call",
+            value: message,
+          };
+        }
+        return {
+          type: "/bank.MsgSend",
+          value: message,
+        };
+      }),
+    };
+    return createTimeout(this.getAdena().DoContract(request));
   };
 
   public addEventChangedAccount = (callback: (accountId: string) => void) => {

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

@@ -34,7 +34,7 @@ interface AccountInfo {
 }
 
 interface SendTransactionRequestParam {
-  messages: Array<TransactionMessage>;
+  messages: TransactionMessageForm<TransactionMessage>[];
   gasFee: number;
   gasWanted: number;
   memo?: string;
@@ -47,6 +47,11 @@ type TransactionMessage =
   | TransactionMessageOfBankMsgSend
   | TransactionMessageOfContract;
 
+interface TransactionMessageForm<T> {
+  type: string;
+  value: T;
+}
+
 interface TransactionMessageOfBankMsgSend {
   from_address: string;
   to_address: string;
@@ -58,7 +63,7 @@ interface TransactionMessageOfContract {
   send: string;
   pkg_path: string;
   func: string;
-  args: string[];
+  args: (string | number | boolean)[];
 }
 
 /**

packages/web/src/common/clients/wallet-client/protocols/wallet-transaction.ts

@@ -31,7 +31,7 @@ export interface TransactionMessageOfContract {
   send: string;
   pkg_path: string;
   func: string;
-  args: string[];
+  args: (string | number | boolean)[];
 }
 
 /**
@@ -49,3 +49,9 @@ export interface SendTransactionErrorResponse {
   type: string;
   message: string;
 }
+
+export function isContractMessage(
+  message: TransactionMessageOfBankMsgSend | TransactionMessageOfContract,
+): message is TransactionMessageOfContract {
+  return "func" in message;
+}

packages/web/src/common/utils/denom-util.ts

@@ -1,5 +1,6 @@
 import { AmountType } from "@common/types/data-prop-types";
 import { AmountNumberType } from "@common/types/data-prop-types";
+import { amountEmptyNumberInit } from "@common/values";
 import BigNumber from "bignumber.js";
 
 interface Amount {
@@ -44,6 +45,9 @@ export const toDefaultDenom = (amount: Amount, denomConfig: DenomConfig) => {
 
 export const textToBalances = (balancesText: string) => {
   const balanceTexts = balancesText.split(",");
+  if (balanceTexts.length === 0) {
+    return [amountEmptyNumberInit];
+  }
   const balances = balanceTexts.map(convertTextToAmount);
   return balances;
 };

packages/web/src/common/values/storage-constant.ts

@@ -3,3 +3,5 @@ export type StorageKeyType =
   | "theme-mode"
   | "language"
   | "search-token-logs";
+
+export type SessionStorageKeyType = "connectedWallet";

packages/web/src/components/common/header/Header.stories.tsx

@@ -6,16 +6,14 @@ import { action } from "@storybook/addon-actions";
 import Header from "./Header";
 import { RecentdummyToken } from "@containers/header-container/HeaderContainer";
 import { DEVICE_TYPE } from "@styles/media";
-import { AccountInfo } from "@common/clients/wallet-client/protocols";
+import { AccountModel } from "@models/account/account-model";
 
-const defaultAccountInfo: AccountInfo = {
+const defaultAccountInfo: AccountModel = {
   status: "ACTIVE",
   address: "g1ffzxha57dh0qgv9ma5v393ur0zexfvp6lsjpae",
-  coins: "1000000000ugnot",
-  publicKey: {
-    "@type": "----",
-    value: "----",
-  },
+  balances: [],
+  publicKeyType: "",
+  publicKeyValue: "",
   accountNumber: 1,
   sequence: 1,
   chainId: "test3",

packages/web/src/components/common/header/Header.tsx

@@ -22,7 +22,7 @@ import { Token } from "@containers/header-container/HeaderContainer";
 import { DEVICE_TYPE } from "@styles/media";
 import SubMenuButton from "../sub-menu-button/SubMenuButton";
 import SearchMenuModal from "../search-menu-modal/SearchMenuModal";
-import { AccountInfo } from "@common/clients/wallet-client/protocols";
+import { AccountModel } from "@models/account/account-model";
 
 interface HeaderProps {
   pathname?: string;
@@ -36,7 +36,7 @@ interface HeaderProps {
   search: (e: React.ChangeEvent<HTMLInputElement>) => void;
   keyword: string;
   breakpoint: DEVICE_TYPE;
-  account: AccountInfo | null;
+  account: AccountModel | null;
   connected: boolean;
   connectAdenaClient: () => void;
 }

packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.stories.tsx

@@ -2,21 +2,20 @@ import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import WalletConnectorButton from "./WalletConnectorButton";
 import { action } from "@storybook/addon-actions";
-import { AccountInfo } from "@common/clients/wallet-client/protocols";
+import { AccountModel } from "@models/account/account-model";
 
-const defaultAccountInfo: AccountInfo = {
+const defaultAccountInfo: AccountModel = {
   status: "ACTIVE",
   address: "g1ffzxha57dh0qgv9ma5v393ur0zexfvp6lsjpae",
-  coins: "1000000000ugnot",
-  publicKey: {
-    "@type": "----",
-    value: "----",
-  },
+  balances: [],
+  publicKeyType: "",
+  publicKeyValue: "",
   accountNumber: 1,
   sequence: 1,
   chainId: "test3",
 };
 
+
 export default {
   title: "common/WalletConnector",
   component: WalletConnectorButton,

packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.tsx

@@ -7,10 +7,10 @@ import WalletConnectorMenu from "@components/common/wallet-connector-menu/Wallet
 import { formatAddress } from "@utils/string-utils";
 import { useAtom } from "jotai";
 import { CommonState } from "@states/index";
-import { AccountInfo } from "@common/clients/wallet-client/protocols";
+import { AccountModel } from "@models/account/account-model";
 
 interface WalletConnectProps {
-  account: AccountInfo | null;
+  account: AccountModel | null;
   connected: boolean;
   connectAdenaClient: () => void;
 }
@@ -22,7 +22,12 @@ const WalletConnectorButton: React.FC<WalletConnectProps> = ({
 }) => {
   const [toggle, setToggle] = useAtom(CommonState.headerToggle);
 
-  const address = useMemo(() => account?.address || "", [account?.address]);
+  const address = useMemo(() => {
+    if (account === null) {
+      return "";
+    }
+    return formatAddress(account.address);
+  }, [account]);
 
   const onMenuToggle = () => {
     setToggle(prev => ({
@@ -36,7 +41,7 @@ const WalletConnectorButton: React.FC<WalletConnectProps> = ({
       {connected ? (
         <Button
           leftIcon={<IconAdenaLogo />}
-          text={formatAddress(address)}
+          text={address}
           rightIcon={<IconStrokeArrowDown className="arrow-icon" />}
           className={toggle.walletConnect ? "selected" : ""}
           style={{

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

@@ -13,7 +13,7 @@ import {
 } from "./WalletConnectorMenu.styles";
 import { formatAddress } from "@utils/string-utils";
 import ThemeModeContainer from "@containers/theme-mode-container/ThemeModeContainer";
-import { AccountInfo } from "@common/clients/wallet-client/protocols";
+import { AccountModel } from "@models/account/account-model";
 
 interface IconButtonClickProps {
   copyClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -42,7 +42,7 @@ const IconButtonMaker: React.FC<IconButtonClickProps> = ({
 };
 
 interface WalletConnectorMenuProps {
-  account: AccountInfo | null;
+  account: AccountModel | null;
   connected: boolean;
   connectAdenaClient: () => void;
   onMenuToggle: () => void;
@@ -54,7 +54,7 @@ const WalletConnectorMenu: React.FC<WalletConnectorMenuProps> = ({
   connectAdenaClient,
   onMenuToggle,
 }) => {
-  const balanceText = useMemo(() => account?.coins || "0 GNOT", [account?.coins]);
+  const balanceText = useMemo(() => `${account?.balances[0].amount} ${account?.balances[0].currency}` || "0 GNOT", [account?.balances]);
   const copyClick = () => { };
   const openLinkClick = () => { };
   const exitClick = () => { };

packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.tsx

@@ -29,7 +29,7 @@ interface ConfirmSwapModalProps {
   tolerance: string;
   submit: boolean;
   isFetching: boolean;
-  swapResult?: SwapData;
+  swapResult: SwapData | null;
 }
 
 const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({

packages/web/src/components/swap/swap-card/SwapCard.tsx

@@ -51,7 +51,7 @@ interface SwapCardProps {
   breakpoint: DEVICE_TYPE;
   submit: boolean;
   isFetching: boolean;
-  swapResult?: SwapData;
+  swapResult: SwapData | null;
   resetTolerance: () => void;
   handleCopyClipBoard: (text: string) => void;
   copied: boolean;

packages/web/src/containers/header-container/HeaderContainer.tsx

@@ -73,7 +73,6 @@ async function fetchTokens(
 
 const HeaderContainer: React.FC = () => {
   const { pathname } = useRouter();
-  const [isConnected, setIsConnected] = useState(true);
   const [sideMenuToggle, setSideMenuToggle] = useState(false);
   const [searchMenuToggle, setSearchMenuToggle] = useState(false);
   const [keyword, setKeyword] = useState("");

packages/web/src/containers/swap-container/SwapContainer.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useState } from "react";
 import SwapCard from "@components/swap/swap-card/SwapCard";
 import { useQuery } from "@tanstack/react-query";
 import { useWindowSize } from "@hooks/common/use-window-size";
+import { useSwap } from "@hooks/swap/use-swap";
 
 export interface SwapGasInfo {
   priceImpact: string;
@@ -100,16 +101,8 @@ export interface SwapData {
   transaction?: string;
 }
 
-async function fetchSwap(): Promise<SwapData> {
-  return new Promise(resolve => setTimeout(resolve, 2000)).then(() =>
-    Promise.resolve({
-      success: Math.random() >= 0.5,
-      transaction: "https://gnoscan.io/",
-    }),
-  );
-}
-
 const SwapContainer: React.FC = () => {
+  const { swap } = useSwap();
   const { breakpoint } = useWindowSize();
   const [keyword, setKeyword] = useState("");
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -125,22 +118,13 @@ const SwapContainer: React.FC = () => {
   const [division, setDivision] = useState("");
   const [submit, setSubmit] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [swapResult, setSwapResult] = useState<SwapData | null>(null);
 
   const { data: tokens } = useQuery<tokenInfo[], Error>({
     queryKey: [keyword],
     queryFn: () => fetchTokens(keyword),
   });
 
-  const {
-    isFetching,
-    refetch,
-    data: swapResult,
-  } = useQuery<SwapData, Error>({
-    queryKey: ["swapResult"],
-    queryFn: () => fetchSwap(),
-    enabled: false,
-  });
-
   //   eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [from, setFrom] = useState<TokenInfo>({
     token: "USDCoin",
@@ -213,6 +197,7 @@ const SwapContainer: React.FC = () => {
 
   const onConfirmModal = () => {
     setSwapOpen(prev => !prev);
+    setSwapResult(null);
     if (submit) {
       setSubmit(false);
       setTolerance("1");
@@ -248,8 +233,16 @@ const SwapContainer: React.FC = () => {
 
   const submitSwap = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
     event.preventDefault();
-    setSubmit(prev => !prev);
-    refetch();
+    if (submit) {
+      return;
+    }
+    setSubmit(true);
+    swap().then(success => {
+      setSwapResult({
+        success: success,
+        transaction: "https://gnoscan.io"
+      });
+    });
   };
 
   return (
@@ -280,7 +273,7 @@ const SwapContainer: React.FC = () => {
       submitSwap={submitSwap}
       breakpoint={breakpoint}
       submit={submit}
-      isFetching={isFetching}
+      isFetching={swapResult === null}
       swapResult={swapResult}
       resetTolerance={resetTolerance}
       handleCopyClipBoard={handleCopyClipBoard}