@keplr-wallet/hooks-starknet 0.12.133-rc.0

package/src/tx/noop-amount.ts

@@ -0,0 +1,92 @@
+import { IAmountConfig, ISenderConfig, UIProperties } from "./types";
+import { TxChainSetter } from "./chain";
+import { ChainGetter } from "@keplr-wallet/stores";
+import { action, computed, makeObservable, observable } from "mobx";
+import { ERC20Currency } from "@keplr-wallet/types";
+import { CoinPretty, Dec, DecUtils } from "@keplr-wallet/unit";
+import { useState } from "react";
+
+export class NoopAmountConfig extends TxChainSetter implements IAmountConfig {
+  @observable.ref
+  protected _currency?: ERC20Currency = undefined;
+
+  constructor(
+    chainGetter: ChainGetter,
+    initialChainId: string,
+    protected readonly senderConfig: ISenderConfig
+  ) {
+    super(chainGetter, initialChainId);
+
+    makeObservable(this);
+  }
+
+  @computed
+  get value(): string {
+    return "0";
+  }
+
+  @action
+  setValue(_value: string): void {
+    // noop
+  }
+
+  @computed
+  get amount(): CoinPretty[] {
+    return [
+      new CoinPretty(
+        this.currency,
+        new Dec(0)
+          .mul(DecUtils.getTenExponentN(this.currency.coinDecimals))
+          .truncate()
+      ),
+    ];
+  }
+
+  @computed
+  get currency(): ERC20Currency {
+    const modularChainInfo = this.modularChainInfo;
+    if (!("starknet" in modularChainInfo)) {
+      throw new Error("Chain doesn't support the starknet");
+    }
+
+    return modularChainInfo.starknet.currencies[0];
+  }
+
+  @action
+  setCurrency(_currency: ERC20Currency | undefined) {
+    // noop
+  }
+
+  get fraction(): number {
+    return 0;
+  }
+
+  @action
+  setFraction(_fraction: number): void {
+    // noop
+  }
+
+  canUseCurrency(_currency: ERC20Currency): boolean {
+    // noop
+    return true;
+  }
+
+  @computed
+  get uiProperties(): UIProperties {
+    // noop
+    return {};
+  }
+}
+
+export const useNoopAmountConfig = (
+  chainGetter: ChainGetter,
+  chainId: string,
+  senderConfig: ISenderConfig
+) => {
+  const [txConfig] = useState(
+    () => new NoopAmountConfig(chainGetter, chainId, senderConfig)
+  );
+  txConfig.setChain(chainId);
+
+  return txConfig;
+};

package/src/tx/recipient.ts

@@ -0,0 +1,82 @@
+import { IRecipientConfig, UIProperties } from "./types";
+import { TxChainSetter } from "./chain";
+import { ChainGetter } from "@keplr-wallet/stores";
+import { action, computed, makeObservable, observable } from "mobx";
+import { EmptyAddressError, InvalidHexError } from "./errors";
+import { useState } from "react";
+import { Buffer } from "buffer/";
+
+export class RecipientConfig extends TxChainSetter implements IRecipientConfig {
+  @observable
+  protected _value: string = "";
+
+  constructor(chainGetter: ChainGetter, initialChainId: string) {
+    super(chainGetter, initialChainId);
+
+    makeObservable(this);
+  }
+
+  get recipient(): string {
+    const rawRecipient = this.value.trim();
+
+    const modularChainInfo = this.modularChainInfo;
+    if (!("starknet" in modularChainInfo)) {
+      throw new Error("Chain doesn't support the starknet");
+    }
+
+    return rawRecipient;
+  }
+
+  @computed
+  get uiProperties(): UIProperties {
+    const rawRecipient = this.value.trim();
+
+    if (!rawRecipient) {
+      return {
+        error: new EmptyAddressError("Address is empty"),
+      };
+    }
+
+    if (!rawRecipient.startsWith("0x")) {
+      return {
+        error: new InvalidHexError("Invalid hex address for chain"),
+      };
+    }
+
+    {
+      const hex = rawRecipient.replace("0x", "");
+      const buf = Buffer.from(hex, "hex");
+      if (buf.length !== 32) {
+        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 {};
+  }
+
+  get value(): string {
+    return this._value;
+  }
+
+  @action
+  setValue(value: string): void {
+    this._value = value;
+  }
+}
+
+export const useRecipientConfig = (
+  chainGetter: ChainGetter,
+  chainId: string
+) => {
+  const [config] = useState(() => new RecipientConfig(chainGetter, chainId));
+  config.setChain(chainId);
+
+  return config;
+};

package/src/tx/send-tx.ts

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

package/src/tx/sender.ts

@@ -0,0 +1,104 @@
+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 { StarknetQueriesStore } from "@keplr-wallet/stores-starknet";
+import {
+  AccountNotDeployed,
+  EmptyAddressError,
+  InvalidHexError,
+} from "./errors";
+import { Buffer } from "buffer";
+
+export class SenderConfig extends TxChainSetter implements ISenderConfig {
+  @observable
+  protected _value: string = "";
+
+  constructor(
+    chainGetter: ChainGetter,
+    protected readonly starknetQueriesStore: StarknetQueriesStore,
+    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 !== 32) {
+        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"),
+        };
+      }
+    }
+
+    const queryNonce = this.starknetQueriesStore
+      .get(this.chainId)
+      .queryAccountNonce.getNonce(this.value);
+    if (!queryNonce.response && !queryNonce.error) {
+      return {
+        loadingState: "loading-block",
+      };
+    }
+
+    if (queryNonce.error?.message === "Contract not found") {
+      return {
+        error: new AccountNotDeployed("Account not deployed"),
+      };
+    }
+
+    return {};
+  }
+}
+
+export const useSenderConfig = (
+  chainGetter: ChainGetter,
+  starknetQueriesStore: StarknetQueriesStore,
+  chainId: string,
+  sender: string
+) => {
+  const [config] = useState(
+    () => new SenderConfig(chainGetter, starknetQueriesStore, chainId, sender)
+  );
+  config.setChain(chainId);
+  config.setValue(sender);
+
+  return config;
+};

package/src/tx/types.ts

@@ -0,0 +1,97 @@
+import { ERC20Currency } from "@keplr-wallet/types";
+import { CoinPretty } from "@keplr-wallet/unit";
+
+export interface ITxChainSetter {
+  chainId: string;
+  setChain(chainId: string): void;
+}
+
+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 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: "ETH" | "STRK";
+  setType(type: "ETH" | "STRK"): void;
+
+  gasPrice: CoinPretty | undefined;
+  maxGasPrice: CoinPretty | undefined;
+  setGasPrice(
+    gasPrice:
+      | {
+          gasPrice: CoinPretty;
+          maxGasPrice: CoinPretty;
+        }
+      | undefined
+  ): void;
+
+  fee: CoinPretty | undefined;
+  maxFee: CoinPretty | undefined;
+
+  uiProperties: UIProperties;
+}
+
+export interface IRecipientConfig extends ITxChainSetter {
+  value: string;
+  setValue(value: string): void;
+
+  recipient: string;
+
+  uiProperties: UIProperties;
+}
+
+export interface IAmountConfig extends ITxChainSetter {
+  amount: CoinPretty[];
+
+  value: string;
+  setValue(value: string): void;
+
+  currency: ERC20Currency;
+  setCurrency(currency: ERC20Currency | undefined): void;
+  canUseCurrency(currency: ERC20Currency): 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;
+
+  uiProperties: UIProperties;
+}

package/src/tx/validate.ts

@@ -0,0 +1,70 @@
+import {
+  IAmountConfig,
+  IFeeConfig,
+  IGasConfig,
+  IGasSimulator,
+  IRecipientConfig,
+  ISenderConfig,
+} from "./types";
+
+// CONTRACT: Use with `observer`
+export const useTxConfigsValidate = (configs: {
+  amountConfig?: IAmountConfig;
+  senderConfig?: ISenderConfig;
+  recipientConfig?: IRecipientConfig;
+  gasConfig?: IGasConfig;
+  feeConfig?: IFeeConfig;
+  gasSimulator?: IGasSimulator;
+}) => {
+  const interactionBlocked = (() => {
+    /*
+     * XXX: 밑의 예시같은 식으로 처리하면 안된다...
+     *      그러면 또는(||)에 의해서 앞에꺼에서 true가 나오면 뒤에꺼가 실행도 안되는 문제가 있다.
+     *      mobx observable의 특성상 이렇게 처리되면 의도에 맞지 않는다.
+     *  if (
+          configs.amountConfig?.uiProperties.error ||
+          configs.senderConfig?.uiProperties.error ||
+          configs.recipientConfig?.uiProperties.error ||
+          configs.gasConfig?.uiProperties.error ||
+          configs.feeConfig?.uiProperties.error ||
+          configs.gasSimulator?.uiProperties.error
+        ) {
+          return true;
+        }
+     */
+    const amountConfigUIProperties = configs.amountConfig?.uiProperties;
+    const senderConfigUIProperties = configs.senderConfig?.uiProperties;
+    const recipientConfigUIProperties = configs.recipientConfig?.uiProperties;
+    const gasConfigUIProperties = configs.gasConfig?.uiProperties;
+    const feeConfigUIProperties = configs.feeConfig?.uiProperties;
+    const gasSimulatorUIProperties = configs.gasSimulator?.uiProperties;
+
+    if (
+      amountConfigUIProperties?.error ||
+      senderConfigUIProperties?.error ||
+      recipientConfigUIProperties?.error ||
+      gasConfigUIProperties?.error ||
+      feeConfigUIProperties?.error ||
+      gasSimulatorUIProperties?.error
+    ) {
+      return true;
+    }
+
+    if (
+      amountConfigUIProperties?.loadingState === "loading-block" ||
+      senderConfigUIProperties?.loadingState === "loading-block" ||
+      recipientConfigUIProperties?.loadingState === "loading-block" ||
+      gasConfigUIProperties?.loadingState === "loading-block" ||
+      feeConfigUIProperties?.loadingState === "loading-block" ||
+      gasSimulatorUIProperties?.loadingState === "loading-block"
+    ) {
+      return true;
+    }
+
+    return false;
+  })();
+
+  return {
+    interactionBlocked,
+  };
+};

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "declaration": true,
+    "rootDir": "src",
+    "jsx": "react"
+  },
+  "include": [
+    "src/**/*"
+  ]
+}