@keplr-wallet/hooks-starknet 0.12.240-rc.3 → 0.12.240-rc.5

package/src/tx/gas-simulator.ts

@@ -1,4 +1,10 @@
-import { IFeeConfig, IGasConfig, IGasSimulator, UIProperties } from "./types";
+import {
+  IFeeConfig,
+  IGasConfig,
+  IGasSimulator,
+  UIProperties,
+  GasEstimate,
+} from "./types";
 import {
   action,
   autorun,
@@ -12,31 +18,26 @@ import { useEffect, useState } from "react";
 import { KVStore } from "@keplr-wallet/common";
 import { ChainIdHelper } from "@keplr-wallet/cosmos";
 import { TxChainSetter } from "./chain";
-import { ChainGetter, MakeTxResponse } from "@keplr-wallet/stores";
-import { Coin, StdFee } from "@keplr-wallet/types";
+import { ChainGetter } from "@keplr-wallet/stores";
 import { isSimpleFetchError } from "@keplr-wallet/simple-fetch";
+import { Dec } from "@keplr-wallet/unit";
 
-type TxSimulate = Pick<MakeTxResponse, "simulate">;
-export type SimulateGasFn = () => TxSimulate;
+export type GasSimulate = () => Promise<GasEstimate>;
+export type SimulateGasFn = () => GasSimulate;
 
 class GasSimulatorState {
-  @observable
-  protected _outdatedCosmosSdk: boolean = false;
-
-  // If the initialGasEstimated is null, it means that there is no value stored or being loaded.
-  @observable
-  protected _initialGasEstimated: number | null = null;
-
   @observable
   protected _isInitialized: boolean = false;
 
-  @observable
-  protected _recentGasEstimated: number | undefined = undefined;
+  // If the initialGasEstimate is null, it means that there is no value stored or being loaded.
+  @observable.ref
+  protected _initialGasEstimate: GasEstimate | null = null;
 
   @observable.ref
-  protected _tx: TxSimulate | undefined = undefined;
+  protected _recentGasEstimate: GasEstimate | null = null;
+
   @observable.ref
-  protected _stdFee: StdFee | undefined = undefined;
+  protected _gasSimulate: GasSimulate | undefined = undefined;
   @observable.ref
   protected _error: Error | undefined = undefined;
 
@@ -44,10 +45,6 @@ class GasSimulatorState {
     makeObservable(this);
   }
 
-  get outdatedCosmosSdk(): boolean {
-    return this._outdatedCosmosSdk;
-  }
-
   @action
   setIsInitialized(value: boolean) {
     this._isInitialized = value;
@@ -58,48 +55,30 @@ class GasSimulatorState {
   }
 
   @action
-  setOutdatedCosmosSdk(value: boolean) {
-    this._outdatedCosmosSdk = value;
+  setInitialGasEstimate(estimate: GasEstimate) {
+    this._initialGasEstimate = estimate;
   }
 
-  get initialGasEstimated(): number | null {
-    return this._initialGasEstimated;
+  get initialGasEstimate(): GasEstimate | null {
+    return this._initialGasEstimate;
   }
 
   @action
-  setInitialGasEstimated(value: number) {
-    this._initialGasEstimated = value;
+  setRecentGasEstimate(estimate: GasEstimate) {
+    this._recentGasEstimate = estimate;
   }
 
-  get recentGasEstimated(): number | undefined {
-    return this._recentGasEstimated;
+  get recentGasEstimate(): GasEstimate | null {
+    return this._recentGasEstimate;
   }
 
   @action
-  setRecentGasEstimated(value: number) {
-    this._recentGasEstimated = value;
+  refreshGasSimulate(value: GasSimulate) {
+    this._gasSimulate = value;
   }
 
-  get tx(): TxSimulate | undefined {
-    return this._tx;
-  }
-
-  @action
-  refreshTx(tx: TxSimulate | undefined) {
-    this._tx = tx;
-  }
-
-  get stdFee(): StdFee | undefined {
-    return this._stdFee;
-  }
-
-  @action
-  refreshStdFee(fee: StdFee | undefined) {
-    this._stdFee = fee;
-  }
-
-  get error(): Error | undefined {
-    return this._error;
+  get gasSimulate(): GasSimulate | undefined {
+    return this._gasSimulate;
   }
 
   @action
@@ -107,18 +86,8 @@ class GasSimulatorState {
     this._error = error;
   }
 
-  static isZeroFee(amount: readonly Coin[] | undefined): boolean {
-    if (!amount) {
-      return true;
-    }
-
-    for (const coin of amount) {
-      if (coin.amount !== "0") {
-        return false;
-      }
-    }
-
-    return true;
+  get error(): Error | undefined {
+    return this._error;
   }
 }
 
@@ -126,9 +95,6 @@ export class GasSimulator extends TxChainSetter implements IGasSimulator {
   @observable
   protected _key: string;
 
-  @observable
-  protected _gasAdjustmentValue: string = "1";
-
   @observable
   protected _enabled: boolean = false;
 
@@ -144,6 +110,9 @@ export class GasSimulator extends TxChainSetter implements IGasSimulator {
   @observable.shallow
   protected _stateMap: Map<string, GasSimulatorState> = new Map();
 
+  protected _debounceTimeoutId: NodeJS.Timeout | null = null;
+  protected readonly _debounceMs: number = 300;
+
   protected _disposers: IReactionDisposer[] = [];
 
   constructor(
@@ -154,7 +123,6 @@ export class GasSimulator extends TxChainSetter implements IGasSimulator {
     protected readonly gasConfig: IGasConfig,
     protected readonly feeConfig: IFeeConfig,
     protected readonly initialKey: string,
-    // TODO: Add comment about the reason why simulateGasFn field is not observable.
     protected simulateGasFn: SimulateGasFn
   ) {
     super(chainGetter, initialChainId);
@@ -231,75 +199,21 @@ export class GasSimulator extends TxChainSetter implements IGasSimulator {
     }
   }
 
-  get outdatedCosmosSdk(): boolean {
-    const key = this.storeKey;
-    const state = this.getState(key);
-    return state.outdatedCosmosSdk;
-  }
-
   get error(): Error | undefined {
     const key = this.storeKey;
     const state = this.getState(key);
     return state.error;
   }
 
-  get gasEstimated(): number | undefined {
+  get gasEstimate(): GasEstimate | undefined {
     const key = this.storeKey;
     const state = this.getState(key);
-    if (state.recentGasEstimated != null) {
-      return state.recentGasEstimated;
-    }
 
-    if (state.initialGasEstimated != null) {
-      return state.initialGasEstimated;
+    if (state.recentGasEstimate != null) {
+      return state.recentGasEstimate;
     }
 
-    return undefined;
-  }
-
-  get gasAdjustment(): number {
-    if (this._gasAdjustmentValue === "") {
-      return 0;
-    }
-
-    const num = parseFloat(this._gasAdjustmentValue);
-    if (Number.isNaN(num) || num < 0) {
-      return 0;
-    }
-
-    return num;
-  }
-
-  get gasAdjustmentValue(): string {
-    return this._gasAdjustmentValue;
-  }
-
-  @action
-  setGasAdjustmentValue(gasAdjustment: string | number) {
-    if (typeof gasAdjustment === "number") {
-      if (gasAdjustment < 0 || gasAdjustment > 2) {
-        return;
-      }
-
-      this._gasAdjustmentValue = gasAdjustment.toString();
-      return;
-    }
-
-    if (gasAdjustment === "") {
-      this._gasAdjustmentValue = "";
-      return;
-    }
-
-    if (gasAdjustment.startsWith(".")) {
-      this._gasAdjustmentValue = "0" + gasAdjustment;
-    }
-
-    const num = parseFloat(gasAdjustment);
-    if (Number.isNaN(num) || num < 0 || num > 2) {
-      return;
-    }
-
-    this._gasAdjustmentValue = gasAdjustment;
+    return state.initialGasEstimate ?? undefined;
   }
 
   protected init() {
@@ -312,9 +226,17 @@ export class GasSimulator extends TxChainSetter implements IGasSimulator {
         const key = this.storeKey;
         const state = this.getState(key);
 
-        this.kvStore.get<number>(key).then((saved) => {
+        this.kvStore.get<string>(key).then((saved) => {
           if (saved) {
-            state.setInitialGasEstimated(saved);
+            try {
+              const gasEstimate: GasEstimate = JSON.parse(saved);
+              state.setInitialGasEstimate(gasEstimate);
+            } catch (e) {
+              // initial gas estimate is not critical,
+              // just log the error and delete the estimate from the store.
+              console.warn(e);
+              this.kvStore.set(key, "");
+            }
           }
 
           state.setIsInitialized(true);
@@ -344,19 +266,11 @@ export class GasSimulator extends TxChainSetter implements IGasSimulator {
             return;
           }
 
-          const tx = this.simulateGasFn();
-          // TODO
-          // const fee = this.feeConfig.toStdFee();
+          const gasSimulate = this.simulateGasFn();
 
           runInAction(() => {
-            if (
-              (state.recentGasEstimated == null || state.error != null) &&
-              !state.outdatedCosmosSdk
-              // || GasSimulatorState.isZeroFee(state.stdFee?.amount) !==
-              //   GasSimulatorState.isZeroFee(fee.amount)
-            ) {
-              state.refreshTx(tx);
-              // state.refreshStdFee(fee);
+            if (state.recentGasEstimate == null || state.error != null) {
+              state.refreshGasSimulate(gasSimulate);
             }
           });
         } catch (e) {
@@ -368,98 +282,84 @@ export class GasSimulator extends TxChainSetter implements IGasSimulator {
 
     this._disposers.push(
       autorun(() => {
-        // TODO: Add debounce logic?
-
         const key = this.storeKey;
         const state = this.getState(key);
 
-        if (!state.tx) {
+        if (!state.gasSimulate) {
           return;
         }
 
-        const promise = state.tx.simulate(state.stdFee);
-
-        runInAction(() => {
-          this._isSimulating = true;
-        });
-
-        promise
-          .then(({ gasUsed }) => {
-            // Changing the gas in the gas config definitely will make the reaction to the fee config,
-            // and, this reaction can potentially create a reaction in the amount config as well (Ex, when the "Max" option set).
-            // These potential reactions can create repeated meaningless reactions.
-            // To avoid this potential problem, change the value when there is a meaningful change in the gas estimated.
-            if (
-              !state.recentGasEstimated ||
-              Math.abs(state.recentGasEstimated - gasUsed) /
-                state.recentGasEstimated >
-                0.02
-            ) {
-              state.setRecentGasEstimated(gasUsed);
-            }
-
-            state.setOutdatedCosmosSdk(false);
-            state.setError(undefined);
+        if (this._debounceTimeoutId) {
+          clearTimeout(this._debounceTimeoutId);
+        }
 
-            this.kvStore.set(key, gasUsed).catch((e) => {
-              console.log(e);
-            });
-          })
-          .catch((e) => {
-            console.log(e);
-            if (isSimpleFetchError(e) && e.response) {
-              const response = e.response;
-              if (
-                response.status === 400 &&
-                response.data?.message &&
-                typeof response.data.message === "string" &&
-                response.data.message.includes("invalid empty tx")
-              ) {
-                state.setOutdatedCosmosSdk(true);
-                return;
-              }
+        const promise = state.gasSimulate();
 
-              let message = "";
-              const contentType: string = e.response.headers
-                ? e.response.headers.get("content-type") || ""
-                : "";
-              // Try to figure out the message from the response.
-              // If the contentType in the header is specified, try to use the message from the response.
-              if (
-                contentType.startsWith("text/plain") &&
-                typeof e.response.data === "string"
-              ) {
-                message = e.response.data;
-              }
-              // If the response is an object and "message" field exists, it is used as a message.
-              if (
-                contentType.startsWith("application/json") &&
-                e.response.data?.message &&
-                typeof e.response.data?.message === "string"
-              ) {
-                message = e.response.data.message;
-              }
+        this._debounceTimeoutId = setTimeout(() => {
+          runInAction(() => {
+            this._isSimulating = true;
+          });
 
-              if (message !== "") {
-                state.setError(new Error(message));
-                return;
+          promise
+            .then((gasEstimate) => {
+              state.setRecentGasEstimate(gasEstimate);
+              state.setError(undefined);
+
+              this.kvStore.set(key, JSON.stringify(gasEstimate)).catch((e) => {
+                console.log(e);
+              });
+            })
+            .catch((e) => {
+              console.log("starknet gas simulate error", e);
+              if (isSimpleFetchError(e) && e.response) {
+                let message = "";
+                const contentType: string = e.response.headers
+                  ? e.response.headers.get("content-type") || ""
+                  : "";
+                // Try to figure out the message from the response.
+                // If the contentType in the header is specified, try to use the message from the response.
+                if (
+                  contentType.startsWith("text/plain") &&
+                  typeof e.response.data === "string"
+                ) {
+                  message = e.response.data;
+                }
+                // If the response is an object and "message" field exists, it is used as a message.
+                if (
+                  contentType.startsWith("application/json") &&
+                  e.response.data?.message &&
+                  typeof e.response.data?.message === "string"
+                ) {
+                  message = e.response.data.message;
+                }
+
+                if (message !== "") {
+                  state.setError(new Error(message));
+                  return;
+                }
               }
-            }
 
-            state.setError(e);
-          })
-          .finally(() => {
-            runInAction(() => {
-              this._isSimulating = false;
+              state.setError(e);
+            })
+            .finally(() => {
+              runInAction(() => {
+                this._isSimulating = false;
+              });
             });
-          });
+        }, this._debounceMs);
       })
     );
 
     this._disposers.push(
       autorun(() => {
-        if (this.enabled && this.gasEstimated != null) {
-          this.gasConfig.setValue(this.gasEstimated * this.gasAdjustment);
+        if (this.enabled && this.gasEstimate != null) {
+          const { l1DataGas, l1Gas, l2Gas } = this.gasEstimate;
+
+          const gas = new Dec(l1DataGas.consumed)
+            .add(new Dec(l1Gas.consumed))
+            .add(new Dec(l2Gas.consumed));
+
+          this.gasConfig.setValue(gas.truncate().toString());
         }
       })
     );
@@ -477,10 +377,6 @@ export class GasSimulator extends TxChainSetter implements IGasSimulator {
 
     return {
       warning: (() => {
-        if (this.outdatedCosmosSdk) {
-          return new Error("Outdated Cosmos SDK");
-        }
-
         if (this.forceDisableReason) {
           return this.forceDisableReason;
         }
@@ -496,9 +392,7 @@ export class GasSimulator extends TxChainSetter implements IGasSimulator {
 
         if (this.isSimulating) {
           // If there is no saved result of the last simulation, user interaction is blocked.
-          return state.initialGasEstimated == null
-            ? "loading-block"
-            : "loading";
+          return state.initialGasEstimate == null ? "loading-block" : "loading";
         }
       })(),
     };
@@ -523,7 +417,7 @@ export class GasSimulator extends TxChainSetter implements IGasSimulator {
     //   .toStdFee()
     //   .amount.map((coin) => coin.denom)
     //   .join("/");
-    return `${chainIdentifier.identifier}/${fees}/${this.key}}`;
+    return `${chainIdentifier.identifier}/${fees}/${this.key}`;
   }
 }
 

package/src/tx/gas.ts

@@ -12,6 +12,9 @@ export class GasConfig extends TxChainSetter implements IGasConfig {
   @observable
   protected _value: string = "";
 
+  @observable
+  protected _gasAdjustmentValue: string = "1.5";
+
   /*
    There are services that sometimes use invalid tx to sign arbitrary data on the sign page.
    In this case, there is no obligation to deal with it, but 0 gas is favorably allowed. This option is used for this case.
@@ -39,6 +42,10 @@ export class GasConfig extends TxChainSetter implements IGasConfig {
     return this._value;
   }
 
+  get gasAdjustmentValue(): string {
+    return this._gasAdjustmentValue;
+  }
+
   @action
   setValue(value: string | number): void {
     if (typeof value === "number") {
@@ -48,6 +55,47 @@ export class GasConfig extends TxChainSetter implements IGasConfig {
     }
   }
 
+  @action
+  setGasAdjustmentValue(gasAdjustment: string | number) {
+    if (typeof gasAdjustment === "number") {
+      if (gasAdjustment < 0 || gasAdjustment > 2) {
+        return;
+      }
+
+      this._gasAdjustmentValue = gasAdjustment.toString();
+      return;
+    }
+
+    if (gasAdjustment === "") {
+      this._gasAdjustmentValue = "";
+      return;
+    }
+
+    if (gasAdjustment.startsWith(".")) {
+      this._gasAdjustmentValue = "0" + gasAdjustment;
+    }
+
+    const num = parseFloat(gasAdjustment);
+    if (Number.isNaN(num) || num < 0 || num > 2) {
+      return;
+    }
+
+    this._gasAdjustmentValue = gasAdjustment;
+  }
+
+  get gasAdjustment(): number {
+    if (this._gasAdjustmentValue === "") {
+      return 0;
+    }
+
+    const num = parseFloat(this._gasAdjustmentValue);
+    if (Number.isNaN(num) || num < 0) {
+      return 0;
+    }
+
+    return num;
+  }
+
   get gas(): number {
     if (this.value.trim() === "") {
       return 0;
@@ -61,6 +109,10 @@ export class GasConfig extends TxChainSetter implements IGasConfig {
     return num;
   }
 
+  get maxGas(): number {
+    return Math.ceil(this.gas * this.gasAdjustment);
+  }
+
   @computed
   get uiProperties(): UIProperties {
     if (this.value.trim() === "") {

package/src/tx/types.ts

@@ -18,11 +18,33 @@ export interface UIProperties {
   readonly loadingState?: "loading" | "loading-block";
 }
 
+export interface GasEstimate {
+  l1Gas: {
+    consumed: string;
+    price: string;
+  };
+  l1DataGas: {
+    consumed: string;
+    price: string;
+  };
+  l2Gas: {
+    consumed: string;
+    price: string;
+  };
+}
+
+export type FeeType = "STRK";
+
 export interface IGasConfig extends ITxChainSetter {
   value: string;
+  gasAdjustmentValue: string;
+
   setValue(value: string | number): void;
+  setGasAdjustmentValue(gasAdjustment: string | number): void;
 
   gas: number;
+  maxGas: number;
+  gasAdjustment: number;
 
   uiProperties: UIProperties;
 }
@@ -37,8 +59,8 @@ export interface ISenderConfig extends ITxChainSetter {
 }
 
 export interface IFeeConfig extends ITxChainSetter {
-  type: "ETH" | "STRK";
-  setType(type: "ETH" | "STRK"): void;
+  type: FeeType;
+  setType(type: FeeType): void;
 
   gasPrice: CoinPretty | undefined;
   maxGasPrice: CoinPretty | undefined;
@@ -106,11 +128,7 @@ export interface IGasSimulator {
 
   isSimulating: boolean;
 
-  gasEstimated: number | undefined;
-  gasAdjustment: number;
-
-  gasAdjustmentValue: string;
-  setGasAdjustmentValue(gasAdjustment: string | number): void;
+  gasEstimate: GasEstimate | undefined;
 
   uiProperties: UIProperties;
 }