[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}