feat: tx evm

.eslintrc.json

@@ -9,7 +9,23 @@
     "plugin:storybook/recommended"
   ],
   "rules": {
-    "@typescript-eslint/no-unused-vars": "off",
+    // eslint basic
+    "no-undef": "off",
+    "no-console": "error",
+    "no-unused-vars": "off",
+    "strict": ["error", "global"],
+    "consistent-return": "error",
+    "no-else-return": "error",
+    "no-param-reassign": [
+      "error",
+      { "props": true, "ignorePropertyModificationsFor": ["acc"] }
+    ],
+    "no-use-before-define": "error",
+    "object-shorthand": "error",
+    "prefer-const": "error",
+    "eqeqeq": "error",
+    "semi": "error",
+
     "@typescript-eslint/no-empty-object-type": "off",
     "sonarjs/no-duplicate-string": ["error", { "threshold": 3 }],
     "sonarjs/cognitive-complexity": ["error", 27],

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1188](https://github.com/alleslabs/celatone-frontend/pull/1188) Add request and simulate evm tx
 - [#1184](https://github.com/alleslabs/celatone-frontend/pull/1184) Add custom layer to Initia Widget
 - [#1182](https://github.com/alleslabs/celatone-frontend/pull/1182) Add Initia Widget
 

package.json

@@ -42,8 +42,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@alleslabs/shared": "1.0.0-dev6",
     "@alleslabs/legacy-bcs": "0.0.3",
+    "@alleslabs/shared": "1.0.0-dev6",
     "@amplitude/analytics-browser": "^2.3.3",
     "@amplitude/analytics-types": "^2.3.0",
     "@amplitude/plugin-user-agent-enrichment-browser": "^1.0.0",
@@ -72,9 +72,9 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.9.0",
-    "@initia/initia.js": "0.2.24",
+    "@initia/initia.js": "0.2.26",
     "@initia/initia.proto": "0.2.4",
-    "@initia/react-wallet-widget": "^0.191.0",
+    "@initia/react-wallet-widget": "0.193.0",
     "@interchain-ui/react": "1.23.9",
     "@monaco-editor/react": "^4.6.0",
     "@rjsf/chakra-ui": "v5.18.1",
@@ -103,6 +103,7 @@
     "chartjs-plugin-crosshair": "^2.0.0",
     "cosmjs-types": "^0.9.0",
     "dayjs": "^1.11.6",
+    "ethers": "^6.13.5",
     "file-saver": "^2.0.5",
     "framer-motion": "^11.0.3",
     "js-base64": "^3.7.4",

src/lib/amplitude/Amplitude.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-use-before-define */
 import { createInstance, Identify } from "@amplitude/analytics-browser";
 import type { BrowserClient } from "@amplitude/analytics-types";
 import { userAgentEnrichmentPlugin } from "@amplitude/plugin-user-agent-enrichment-browser";

src/lib/app-provider/env.ts

@@ -3,6 +3,7 @@ export enum CELATONE_QUERY_KEYS {
   OVERVIEWS_STATS = "CELATONE_OVERVIEWS_STATS",
   // SIMULATE
   SIMULATE_FEE = "CELATONE_QUERY_SIMULATE_FEE",
+  SIMULATE_FEE_EVM = "CELATONE_QUERY_SIMULATE_FEE_EVM",
   SIMULATE_FEE_STORE_CODE = "CELATONE_QUERY_SIMULATE_FEE_STORE_CODE",
   SIMULATE_FEE_STORE_CODE_PROPOSAL = "CELATONE_QUERY_SIMULATE_FEE_STORE_CODE_PROPOSAL",
   // BALANCES

src/lib/app-provider/hooks/useSignAndBroadcastEvm.ts

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+
+import { TransactionRequest } from "ethers";
+import { useCurrentChain } from "./useCurrentChain";
+
+export const useSignAndBroadcastEvm = () => {
+  const { walletProvider, chainId } = useCurrentChain();
+
+  return useCallback(
+    async (request: TransactionRequest): Promise<string> => {
+      if (walletProvider.type === "initia-widget") {
+        const { requestEthereumTx } = walletProvider.context;
+        return requestEthereumTx(request, { chainId });
+      }
+      throw new Error("Unsupported wallet provider");
+    },
+    [chainId, walletProvider.context, walletProvider.type]
+  );
+};

src/lib/app-provider/hooks/useSimulateFeeEvm.ts

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+
+import type { Gas } from "lib/types";
+import { zBig, zGas } from "lib/types";
+
+import Big from "big.js";
+import { TransactionRequest } from "ethers";
+import { useCurrentChain } from "./useCurrentChain";
+
+export const useSimulateFeeEvm = () => {
+  const { chainId, walletProvider } = useCurrentChain();
+
+  return useCallback(
+    async (request: TransactionRequest): Promise<Gas<Big>> => {
+      // If the user has connected with Initia Widget
+      if (walletProvider.type === "initia-widget") {
+        const { estimateEthereumTx } = walletProvider.context;
+        return estimateEthereumTx(request, chainId).then(zGas(zBig).parse);
+      }
+
+      throw new Error("Unsupported wallet provider");
+    },
+    [chainId, walletProvider.context, walletProvider.type]
+  );
+};

src/lib/components/json-schema/UploadTemplate.tsx

@@ -129,7 +129,7 @@ const MethodRender = ({
             try {
               reader.readAsText(file);
               setJsonFile(file);
-            } catch (err) {
+            } catch {
               //
             }
           }}

src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable complexity */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
@@ -150,7 +151,7 @@ export default function BaseInputTemplate<
   if (inputProps.type === "number" || inputProps.type === "integer") {
     inputValue = value || value === 0 ? value : "";
   } else {
-    inputValue = value == null ? "" : value;
+    inputValue = value === null ? "" : value;
   }
 
   const handleOnChange = useCallback(

src/lib/components/json-schema/form/templates/button-templates/icon-buttons/ChakraIconButton.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { IconButtonProps as ChakraIconButtonProps } from "@chakra-ui/react";
 import { IconButton } from "@chakra-ui/react";

src/lib/pages/account-details/components/AccountTitle.tsx

@@ -6,6 +6,10 @@ import type { AccountData } from "lib/services/types";
 import type { AccountLocalInfo } from "lib/stores/account";
 import type { Option } from "lib/types";
 
+export interface InitiaUsernameDataResponse {
+  username: string | null;
+}
+
 interface AccountTitleProps {
   accountData: Option<AccountData>;
   accountLocalInfo: Option<AccountLocalInfo>;
@@ -14,10 +18,6 @@ interface AccountTitleProps {
   isInitiaUsernameDataFetching: boolean;
 }
 
-export interface InitiaUsernameDataResponse {
-  username: string | null;
-}
-
 export const AccountTitle = ({
   accountData,
   accountLocalInfo,

src/lib/pages/interact-contract/components/execute-area/schema-execute/index.tsx

@@ -71,7 +71,7 @@ export const SchemaExecute = ({
         // TODO: This is a workaround, refactor to a proper solution later
         const timeoutId = setTimeout(() => el?.scrollIntoView(), 200);
         return () => clearInterval(timeoutId);
-      } catch (_) {
+      } catch {
         //
       }
     }

src/lib/pages/interact-contract/components/query-area/schema-query/index.tsx

@@ -60,7 +60,7 @@ export const SchemaQuery = ({
         // TODO: This is a workaround, refactor to a proper solution later
         const timeoutId = setTimeout(() => el?.scrollIntoView(), 200);
         return () => clearInterval(timeoutId);
-      } catch (_) {
+      } catch {
         //
       }
     }