@keplr-wallet/hooks-evm 0.13.15-rc.0

package/src/tx/name-service-ens.ts

@@ -0,0 +1,207 @@
+import { action, autorun, makeObservable, observable, runInAction } from "mobx";
+import { ChainGetter } from "@keplr-wallet/stores";
+import { FetchDebounce, NameService } from "./name-service";
+import { JsonRpcProvider } from "@ethersproject/providers";
+import { ITxChainSetter } from "./types";
+
+export class ENSNameService implements NameService {
+  readonly type = "ens";
+
+  @observable
+  protected _isEnabled: boolean = true;
+
+  @observable
+  protected _isFetching: boolean = false;
+
+  @observable
+  protected _value: string = "";
+
+  @observable.ref
+  protected _result:
+    | {
+        address: string;
+        fullName: string;
+        domain: string;
+        suffix: string;
+      }
+    | undefined = undefined;
+
+  // Deep equal check is required to avoid infinite re-render.
+  @observable.struct
+  protected _ens:
+    | {
+        chainId: string;
+      }
+    | undefined = undefined;
+
+  protected debounce = new FetchDebounce();
+
+  constructor(
+    protected readonly base: ITxChainSetter,
+    protected readonly chainGetter: ChainGetter,
+    ens:
+      | {
+          chainId: string;
+        }
+      | undefined = undefined
+  ) {
+    this._ens = ens;
+
+    makeObservable(this);
+
+    autorun(() => {
+      noop(this.base.modularChainInfo, this._ens, this.isEnabled, this.value);
+      this.fetch();
+    });
+  }
+
+  @action
+  setENS(ens: { chainId: string }) {
+    this._ens = ens;
+  }
+
+  @action
+  setIsEnabled(isEnabled: boolean) {
+    this._isEnabled = isEnabled;
+  }
+
+  get isEnabled(): boolean {
+    if (!this._ens) {
+      return false;
+    }
+
+    const u = this.base.modularChainInfo.unwrapped;
+    if (u.type !== "evm" && u.type !== "ethermint") {
+      return false;
+    }
+
+    return this._isEnabled;
+  }
+
+  @action
+  setValue(value: string) {
+    this._value = value;
+  }
+
+  get value(): string {
+    let v = this._value;
+    if (this.isEnabled) {
+      const suffix = "eth";
+      const i = v.lastIndexOf(".");
+      if (i >= 0) {
+        const tld = v.slice(i + 1);
+        if (suffix.startsWith(tld)) {
+          v = v.slice(0, i);
+        }
+      }
+    }
+
+    return v;
+  }
+
+  get result() {
+    if (!this.isEnabled) {
+      return undefined;
+    }
+
+    if (!this._result) {
+      return undefined;
+    }
+
+    if (this._result.domain !== this.value) {
+      return undefined;
+    }
+
+    return this._result;
+  }
+
+  get isFetching(): boolean {
+    return this._isFetching;
+  }
+
+  protected async fetch(): Promise<void> {
+    if (
+      !this.isEnabled ||
+      this.value.trim().length === 0 ||
+      !this._ens ||
+      this.value.length > 20
+    ) {
+      runInAction(() => {
+        this._result = undefined;
+        this._isFetching = false;
+      });
+      return;
+    }
+
+    this.debounce.run(() => this.fetchInternal());
+  }
+
+  protected async fetchInternal(): Promise<void> {
+    const prevValue = this.value;
+    try {
+      if (!this._ens) {
+        throw new Error("ENS is not set");
+      }
+
+      runInAction(() => {
+        this._isFetching = true;
+      });
+
+      if (!this.chainGetter.hasModularChain(this._ens.chainId)) {
+        throw new Error(`Can't find chain: ${this._ens.chainId}`);
+      }
+
+      const ensU = this.chainGetter.getModularChain(
+        this._ens.chainId
+      ).unwrapped;
+      if (ensU.type !== "evm" && ensU.type !== "ethermint") {
+        throw new Error("ENS chain must be an EVM chain");
+      }
+
+      const suffix = "eth";
+      const domain = this.value;
+      const username = domain + "." + suffix;
+
+      const resolver = await new JsonRpcProvider(ensU.evm.rpc).getResolver(
+        username
+      );
+
+      if (!resolver) {
+        throw new Error("Can't find resolver");
+      }
+
+      const res = await resolver.getAddress(60);
+
+      if (this.value === prevValue) {
+        if (res) {
+          runInAction(() => {
+            this._result = {
+              address: res,
+              fullName: username,
+              domain,
+              suffix,
+            };
+            this._isFetching = false;
+          });
+        } else {
+          runInAction(() => {
+            this._result = undefined;
+            this._isFetching = false;
+          });
+        }
+      }
+    } catch (e) {
+      console.log(e);
+      if (this.value === prevValue) {
+        runInAction(() => {
+          this._result = undefined;
+          this._isFetching = false;
+        });
+      }
+    }
+  }
+}
+
+const noop = (..._args: any[]) => {
+  // noop
+};

package/src/tx/name-service.ts

@@ -0,0 +1,39 @@
+export interface NameService {
+  type: string;
+
+  setIsEnabled: (isEnabled: boolean) => void;
+  // must be observable
+  isEnabled: boolean;
+
+  // must be observable
+  result:
+    | {
+        address: string;
+        fullName: string;
+        domain: string;
+        suffix: string;
+      }
+    | undefined;
+
+  // must be observable
+  isFetching: boolean;
+
+  setValue: (value: string) => void;
+  value: string;
+}
+
+export class FetchDebounce {
+  readonly debounceMs = 50;
+
+  protected timeout: NodeJS.Timeout | undefined = undefined;
+
+  run(fn: () => Promise<void>) {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+    this.timeout = setTimeout(() => {
+      this.timeout = undefined;
+      fn();
+    }, this.debounceMs);
+  }
+}

package/src/tx/recipient.ts

@@ -0,0 +1,166 @@
+import {
+  IRecipientConfig,
+  UIProperties,
+  IRecipientConfigWithNameServices,
+} from "./types";
+import { TxChainSetter } from "./chain";
+import { ChainGetter } from "@keplr-wallet/stores";
+import { EthereumAccountBase } from "@keplr-wallet/stores-eth";
+import { action, computed, makeObservable, observable } from "mobx";
+import { EmptyAddressError, InvalidHexError } from "./errors";
+import { useState } from "react";
+import { NameService } from "./name-service";
+import { ENSNameService } from "./name-service-ens";
+
+export class RecipientConfig
+  extends TxChainSetter
+  implements IRecipientConfig, IRecipientConfigWithNameServices
+{
+  @observable
+  protected _value: string = "";
+
+  @observable
+  protected _preferredNameService: string | undefined = undefined;
+
+  @observable.ref
+  protected nameServices: NameService[] = [];
+
+  constructor(
+    chainGetter: ChainGetter,
+    initialChainId: string,
+    ens?: { chainId: string }
+  ) {
+    super(chainGetter, initialChainId);
+
+    if (ens) {
+      this.nameServices.push(new ENSNameService(this, chainGetter, ens));
+    }
+
+    makeObservable(this);
+  }
+
+  get preferredNameService(): string | undefined {
+    return this._preferredNameService;
+  }
+
+  @action
+  setPreferredNameService(nameService: string | undefined) {
+    this._preferredNameService = nameService;
+  }
+
+  getNameService(type: string): NameService | undefined {
+    return this.nameServices.find((nameService) => nameService.type === type);
+  }
+
+  getNameServices(): NameService[] {
+    return this.nameServices;
+  }
+
+  @computed
+  get nameServiceResult(): {
+    type: string;
+    address: string;
+    fullName: string;
+    domain: string;
+    suffix: string;
+  }[] {
+    const result: {
+      type: string;
+      address: string;
+      fullName: string;
+      domain: string;
+      suffix: string;
+    }[] = [];
+    for (const nameService of this.nameServices) {
+      if (
+        this.preferredNameService &&
+        nameService.type !== this.preferredNameService
+      ) {
+        continue;
+      }
+
+      const r = nameService.result;
+      if (r) {
+        result.push({
+          ...r,
+          type: nameService.type,
+        });
+      }
+    }
+    return result;
+  }
+
+  @action
+  setENS(ens: { chainId: string }) {
+    const found = this.nameServices.find(
+      (nameService) => nameService.type === "ens"
+    );
+    if (found) {
+      (found as ENSNameService).setENS(ens);
+    } else {
+      this.nameServices.push(new ENSNameService(this, this.chainGetter, ens));
+    }
+  }
+
+  get recipient(): string {
+    if (this.nameServiceResult.length > 0) {
+      const r = this.nameServiceResult[0];
+      return r.address;
+    }
+
+    return this.value.trim();
+  }
+
+  @computed
+  get uiProperties(): UIProperties {
+    let rawRecipient = this.value.trim();
+
+    if (!rawRecipient) {
+      return {
+        error: new EmptyAddressError("Address is empty"),
+      };
+    }
+
+    if (this.nameServiceResult.length > 0) {
+      const r = this.nameServiceResult[0];
+      rawRecipient = r.address;
+    }
+
+    if (!EthereumAccountBase.isEthereumHexAddressWithChecksum(rawRecipient)) {
+      return {
+        error: new InvalidHexError("Invalid hex address"),
+      };
+    }
+
+    return {};
+  }
+
+  get value(): string {
+    return this._value;
+  }
+
+  @action
+  setValue(value: string): void {
+    this._value = value;
+
+    for (const nameService of this.nameServices) {
+      nameService.setValue(value);
+    }
+  }
+}
+
+export const useRecipientConfig = (
+  chainGetter: ChainGetter,
+  chainId: string,
+  options?: { ens?: { chainId: string } }
+) => {
+  const [config] = useState(
+    () => new RecipientConfig(chainGetter, chainId, options?.ens)
+  );
+  config.setChain(chainId);
+  if (options?.ens) {
+    config.setENS(options.ens);
+  }
+
+  return config;
+};

package/src/tx/send-tx.ts

@@ -0,0 +1,55 @@
+import { ChainGetter } from "@keplr-wallet/stores";
+import {
+  useFeeConfig,
+  useGasConfig,
+  useRecipientConfig,
+  useSenderConfig,
+} from "./index";
+import { useAmountConfig } from "./amount";
+import { QueriesStore } from "./internal";
+
+export const useSendTxConfig = (
+  chainGetter: ChainGetter,
+  queriesStore: QueriesStore,
+  chainId: string,
+  sender: string,
+  initialGas: number,
+  options?: {
+    ens?: {
+      chainId: string;
+    };
+  }
+) => {
+  const senderConfig = useSenderConfig(chainGetter, chainId, sender);
+
+  const amountConfig = useAmountConfig(
+    chainGetter,
+    queriesStore,
+    chainId,
+    senderConfig
+  );
+
+  const gasConfig = useGasConfig(chainGetter, chainId, initialGas);
+  const feeConfig = useFeeConfig(
+    chainGetter,
+    queriesStore,
+    chainId,
+    senderConfig,
+    amountConfig,
+    gasConfig
+  );
+
+  amountConfig.setFeeConfig(feeConfig);
+
+  const recipientConfig = useRecipientConfig(chainGetter, chainId, {
+    ens: options?.ens,
+  });
+
+  return {
+    senderConfig,
+    amountConfig,
+    gasConfig,
+    feeConfig,
+    recipientConfig,
+  };
+};

package/src/tx/sender.ts

@@ -0,0 +1,82 @@
+import { ISenderConfig, UIProperties } from "./types";
+import { TxChainSetter } from "./chain";
+import { action, makeObservable, observable } from "mobx";
+import { ChainGetter } from "@keplr-wallet/stores";
+import { useState } from "react";
+import { EmptyAddressError, InvalidHexError } from "./errors";
+import { Buffer } from "buffer";
+
+export class SenderConfig extends TxChainSetter implements ISenderConfig {
+  @observable
+  protected _value: string = "";
+
+  constructor(
+    chainGetter: ChainGetter,
+    initialChainId: string,
+    initialSender: string
+  ) {
+    super(chainGetter, initialChainId);
+
+    this._value = initialSender;
+
+    makeObservable(this);
+  }
+
+  get sender(): string {
+    return this._value;
+  }
+
+  get value(): string {
+    return this._value;
+  }
+
+  @action
+  setValue(value: string): void {
+    this._value = value;
+  }
+
+  get uiProperties(): UIProperties {
+    if (!this.value) {
+      return {
+        error: new EmptyAddressError("Address is empty"),
+      };
+    }
+
+    if (!this.value.startsWith("0x")) {
+      return {
+        error: new InvalidHexError("Invalid hex address for chain"),
+      };
+    }
+
+    {
+      const hex = this.value.replace("0x", "");
+      const buf = Buffer.from(hex, "hex");
+      if (buf.length !== 20) {
+        return {
+          error: new InvalidHexError("Invalid hex address for chain"),
+        };
+      }
+      if (hex.toLowerCase() !== buf.toString("hex").toLowerCase()) {
+        return {
+          error: new InvalidHexError("Invalid hex address for chain"),
+        };
+      }
+    }
+
+    return {};
+  }
+}
+
+export const useSenderConfig = (
+  chainGetter: ChainGetter,
+  chainId: string,
+  sender: string
+) => {
+  const [config] = useState(
+    () => new SenderConfig(chainGetter, chainId, sender)
+  );
+  config.setChain(chainId);
+  config.setValue(sender);
+
+  return config;
+};

package/src/tx/types.ts

@@ -0,0 +1,153 @@
+import {
+  AppCurrency,
+  EvmGasSimulationOutcome,
+  FeeCurrency,
+  StdFee,
+} from "@keplr-wallet/types";
+import { CoinPretty, Dec } from "@keplr-wallet/unit";
+import { NameService } from "./name-service";
+import { IModularChainInfoImpl } from "@keplr-wallet/stores";
+
+export interface ITxChainSetter {
+  chainId: string;
+  setChain(chainId: string): void;
+  modularChainInfo: IModularChainInfoImpl;
+}
+
+export interface UIProperties {
+  // There is an error that cannot proceed the tx.
+  readonly error?: Error;
+  // Able to handle tx but prefer to show warning
+  readonly warning?: Error;
+  // Prefer that the loading UI is displayed.
+  // In the case of "loading-block", the UI should handle it so that the user cannot proceed until loading is completed.
+  readonly loadingState?: "loading" | "loading-block";
+}
+
+export type FeeType = "high" | "average" | "low";
+export type EVMFeeType = FeeType | "custom";
+
+export interface IGasConfig extends ITxChainSetter {
+  value: string;
+  setValue(value: string | number): void;
+
+  gas: number;
+
+  uiProperties: UIProperties;
+}
+
+export interface ISenderConfig extends ITxChainSetter {
+  value: string;
+  setValue(value: string): void;
+
+  sender: string;
+
+  uiProperties: UIProperties;
+}
+
+export interface IFeeConfig extends ITxChainSetter {
+  type: EVMFeeType;
+  setType(type: EVMFeeType): void;
+
+  maxFeePerGas: Dec | undefined;
+  maxPriorityFeePerGas: Dec | undefined;
+  gasPrice: Dec | undefined;
+
+  fee: CoinPretty | undefined;
+  maxFee: CoinPretty | undefined;
+
+  l1DataFee: Dec | undefined;
+  setL1DataFee(fee: Dec): void;
+
+  refreshEIP1559TxFees(): void;
+
+  customPriorityFee: string;
+  customPriorityFeeInput: string;
+  setCustomPriorityFee(fee: string): void;
+
+  isLegacyFeeMode: boolean;
+  customGasPrice: string;
+  customGasPriceInput: string;
+  setCustomGasPrice(value: string): void;
+
+  getEIP1559TxFees(feeType: EVMFeeType | "manual"): {
+    maxPriorityFeePerGas?: Dec;
+    maxFeePerGas?: Dec;
+    gasPrice?: Dec;
+  };
+
+  // hooks IFeeConfig 구조 호환용
+  fees: CoinPretty[];
+  selectableFeeCurrencies: FeeCurrency[];
+  setFee(
+    fee:
+      | { type: EVMFeeType; currency: FeeCurrency }
+      | CoinPretty
+      | CoinPretty[]
+      | undefined
+  ): void;
+  getFeeTypePrettyForFeeCurrency(
+    currency: FeeCurrency,
+    feeType: EVMFeeType
+  ): CoinPretty;
+  toStdFee(): StdFee;
+
+  uiProperties: UIProperties;
+}
+
+export interface IRecipientConfig extends ITxChainSetter {
+  value: string;
+  setValue(value: string): void;
+
+  recipient: string;
+
+  uiProperties: UIProperties;
+}
+
+export interface IRecipientConfigWithNameServices extends IRecipientConfig {
+  preferredNameService: string | undefined;
+  setPreferredNameService(nameService: string | undefined): void;
+  getNameService(type: string): NameService | undefined;
+  getNameServices(): NameService[];
+  nameServiceResult: {
+    type: string;
+    address: string;
+    fullName: string;
+    domain: string;
+    suffix: string;
+  }[];
+}
+
+export interface IAmountConfig extends ITxChainSetter {
+  amount: CoinPretty[];
+
+  value: string;
+  setValue(value: string): void;
+
+  currency: AppCurrency;
+  setCurrency(currency: AppCurrency | undefined): void;
+  canUseCurrency(currency: AppCurrency): boolean;
+
+  // Zero means unset.
+  fraction: number;
+  setFraction(fraction: number): void;
+
+  uiProperties: UIProperties;
+}
+
+export interface IGasSimulator {
+  enabled: boolean;
+  setEnabled(value: boolean): void;
+
+  isSimulating: boolean;
+
+  gasEstimated: number | undefined;
+  gasAdjustment: number;
+
+  gasAdjustmentValue: string;
+  setGasAdjustmentValue(gasAdjustment: string | number): void;
+
+  evmSimulationOutcome?: EvmGasSimulationOutcome;
+
+  uiProperties: UIProperties;
+}