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
 - [#1192](https://github.com/alleslabs/celatone-frontend/pull/1192) Add fixed bytes hex address util
 - [#1189](https://github.com/alleslabs/celatone-frontend/pull/1189) Add constructor args to EVM contract verify page
 - [#1187](https://github.com/alleslabs/celatone-frontend/pull/1187) Add onboarding section to EVM contract details page and add EVM contract verify page

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-fns/tx/common/index.ts

@@ -1,3 +1,4 @@
 export * from "./catchTxError";
 export * from "./post";
+export * from "./postEvm";
 export * from "./sending";

src/lib/app-fns/tx/common/post.tsx

@@ -1,9 +1,4 @@
-import type {
-  DeliverTxResponse,
-  ExecuteResult,
-  InstantiateResult,
-  UploadResult,
-} from "@cosmjs/cosmwasm-stargate";
+import type { DeliverTxResponse } from "@cosmjs/cosmwasm-stargate";
 import { isDeliverTxFailure } from "@cosmjs/stargate";
 
 import { EstimatedFeeRender } from "lib/components/EstimatedFeeRender";
@@ -12,14 +7,7 @@ import type { TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { feeFromStr } from "lib/utils";
 
-// TODO: We'll use only DeliverTxResponse later.
-type TxResult =
-  | UploadResult
-  | InstantiateResult
-  | ExecuteResult
-  | DeliverTxResponse;
-
-interface PostTxParams<T extends TxResult> {
+interface PostTxParams<T extends DeliverTxResponse> {
   postFn: () => Promise<T>;
 }
 
@@ -30,7 +18,9 @@ function createDeliverTxResponseErrorMessage(
   return `Error when broadcasting tx ${result.transactionHash} at height ${result.height}. Code: ${result.code}; Raw log: ${result.rawLog}`;
 }
 
-export const postTx = <T extends TxResult>({ postFn }: PostTxParams<T>) => {
+export const postTx = <T extends DeliverTxResponse>({
+  postFn,
+}: PostTxParams<T>) => {
   return () =>
     postFn().then(
       // NOTE: only shown if there is a wait for the next step

src/lib/app-fns/tx/common/postEvm.tsx

@@ -0,0 +1,48 @@
+import { EstimatedFeeEvmRender } from "lib/components/EstimatedFeeEvmRender";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { TxReceiptJsonRpc } from "lib/services/types";
+import type { TxResultRendering } from "lib/types";
+import { TxStreamPhase } from "lib/types";
+
+interface PostEvmTxParams<T extends TxReceiptJsonRpc> {
+  postFn: () => Promise<T>;
+}
+
+export const postEvmTx = <T extends TxReceiptJsonRpc>({
+  postFn,
+}: PostEvmTxParams<T>) => {
+  return () =>
+    postFn().then((txResult) => {
+      return {
+        value: txResult,
+        phase: TxStreamPhase.BROADCAST,
+        receipts: [
+          {
+            title: "Tx Hash",
+            html: (
+              <ExplorerLink
+                type="evm_tx_hash"
+                value={txResult.transactionHash}
+                openNewTab
+              />
+            ),
+          },
+          {
+            title: "Tx Fee",
+            // TODO: Implement event/rawlog attribute picker
+            html: (
+              <EstimatedFeeEvmRender
+                gasPrice={txResult.effectiveGasPrice}
+                gasUsed={txResult.gasUsed}
+                loading={false}
+              />
+            ),
+          },
+        ],
+        receiptInfo: {
+          header: "Sending Transaction",
+        },
+        actionVariant: "sending",
+      } as TxResultRendering<T>;
+    });
+};