@ivem/kit-react 0.0.1

package/README.md

@@ -0,0 +1,35 @@
+# `@ivem/kit-react`
+
+React hooks and provider utilities for IOST wallet flows.
+
+## Install
+
+```bash
+pnpm add @ivem/kit-react @tanstack/react-query react react-dom
+```
+
+## Usage
+
+```tsx
+import { createConfig, iwallet, mainnet, IvemProvider, useAccount } from "@ivem/kit-react";
+
+const config = createConfig({
+  chains: [mainnet],
+  connector: iwallet(),
+});
+
+export function App() {
+  return (
+    <IvemProvider config={config}>
+      <Account />
+    </IvemProvider>
+  );
+}
+
+function Account() {
+  const account = useAccount();
+  return <div>{account.address ?? "Not connected"}</div>;
+}
+```
+
+Requires `react`, `@tanstack/react-query`, and transitively installs `@ivem/kit`.

package/dist/index.cjs

@@ -0,0 +1,282 @@
+'use strict';
+
+var react = require('react');
+var kit = require('@ivem/kit');
+var reactQuery = require('@tanstack/react-query');
+var withSelector_js = require('use-sync-external-store/shim/with-selector.js');
+var index_js = require('use-sync-external-store/shim/index.js');
+
+// src/context.ts
+var IvemContext = react.createContext(void 0);
+function IvemProvider(props) {
+  const { children, config, initialState, reconnectOnMount = true } = props;
+  const queryClient = react.useMemo(
+    () => props.queryClient ?? new reactQuery.QueryClient(props.queryClientConfig),
+    [props.queryClient, props.queryClientConfig]
+  );
+  const reconnectAttempted = react.useRef(false);
+  react.useEffect(() => {
+    if (initialState && !config._internal.ssr) {
+      config.setState(initialState);
+    }
+    if (config._internal.ssr) return;
+    if (reconnectOnMount && !reconnectAttempted.current) {
+      reconnectAttempted.current = true;
+      kit.reconnect(config).catch(() => {
+      });
+    }
+  }, [config, initialState, reconnectOnMount]);
+  return react.createElement(
+    reactQuery.QueryClientProvider,
+    { client: queryClient },
+    react.createElement(IvemContext.Provider, { value: config }, children)
+  );
+}
+function useConfig() {
+  const config = react.useContext(IvemContext);
+  if (!config) {
+    throw new Error("useConfig must be used within IvemProvider");
+  }
+  return config;
+}
+function useAccount() {
+  const config = useConfig();
+  const account = withSelector_js.useSyncExternalStoreWithSelector(
+    (onChange) => config.subscribe(
+      (state) => state,
+      () => onChange()
+    ),
+    () => config.state,
+    () => config.state,
+    (state) => ({
+      address: state.accounts[0],
+      addresses: state.accounts,
+      chainId: state.chainId,
+      isConnected: state.status === "connected",
+      isConnecting: state.status === "connecting",
+      isDisconnected: state.status === "disconnected",
+      isReconnecting: state.status === "reconnecting",
+      status: state.status
+    }),
+    (a, b) => a.address === b.address && a.status === b.status && a.chainId === b.chainId && a.addresses.length === b.addresses.length
+  );
+  return account;
+}
+
+// src/hooks/error.ts
+function safeStringify(value) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function createRichError(message, extra) {
+  const error = new Error(message);
+  if (extra) Object.assign(error, extra);
+  return error;
+}
+function normalizeHookError(err) {
+  if (err instanceof Error) return err;
+  if (typeof err === "string") return new Error(err);
+  if (err && typeof err === "object") {
+    const record = err;
+    const nestedMessage = record.message ?? record.reason ?? record.error?.message ?? record.data?.message;
+    if (typeof nestedMessage === "string" && nestedMessage.length > 0) {
+      return createRichError(nestedMessage, record);
+    }
+    return createRichError(safeStringify(err), record);
+  }
+  return new Error(String(err));
+}
+
+// src/hooks/useConnect.ts
+function useConnect(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return reactQuery.useMutation({
+    ...parameters.mutation,
+    mutationFn: async (params) => {
+      try {
+        return await kit.connect(config, params ?? {});
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useReconnect(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return reactQuery.useMutation({
+    ...parameters.mutation,
+    mutationFn: async () => {
+      try {
+        return await kit.reconnect(config);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useDisconnect(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return reactQuery.useMutation({
+    ...parameters.mutation,
+    mutationFn: async () => {
+      try {
+        return await kit.disconnect(config);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useChainId() {
+  const config = useConfig();
+  const chainId = index_js.useSyncExternalStore(
+    (onChange) => {
+      return config.subscribe(
+        (state) => state.chainId,
+        () => onChange()
+      );
+    },
+    () => kit.getChainId(config),
+    () => kit.getChainId(config)
+  );
+  return chainId;
+}
+function useSignMessage(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return reactQuery.useMutation({
+    ...parameters.mutation,
+    mutationFn: async (params) => {
+      try {
+        return await kit.signMessage(config, params);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useSendTransaction(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return reactQuery.useMutation({
+    ...parameters.mutation,
+    mutationFn: async (params) => {
+      try {
+        return await kit.sendTransaction(config, params);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useWriteContract(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return reactQuery.useMutation({
+    ...parameters.mutation,
+    mutationFn: async (params) => {
+      try {
+        return await kit.writeContract(config, params);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useCallContract(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return reactQuery.useMutation({
+    ...parameters.mutation,
+    mutationFn: async (params) => {
+      try {
+        return await kit.callContract(config, params);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useWaitForTransactionReceipt(parameters = { hash: "" }) {
+  const config = useConfig();
+  const { hash = "", enabled = true, ...rest } = parameters;
+  const { retryCount, retryDelay, timeout, stage } = rest;
+  const query = reactQuery.useQuery({
+    queryKey: [
+      "waitForTransactionReceipt",
+      config.state.chainId,
+      hash,
+      retryCount,
+      retryDelay,
+      timeout,
+      stage
+    ],
+    enabled: Boolean(hash) && enabled,
+    queryFn: async () => {
+      try {
+        return await kit.waitForTransactionReceipt(config, {
+          hash,
+          retryCount,
+          retryDelay,
+          timeout,
+          stage
+        });
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+  return {
+    data: query.data ?? null,
+    error: query.error ?? null,
+    isLoading: query.isLoading || query.isFetching,
+    isSuccess: query.isSuccess,
+    isError: query.isError,
+    refetch: async () => {
+      const result = await query.refetch();
+      return result.data ?? null;
+    }
+  };
+}
+
+Object.defineProperty(exports, "createConfig", {
+  enumerable: true,
+  get: function () { return kit.createConfig; }
+});
+Object.defineProperty(exports, "iwallet", {
+  enumerable: true,
+  get: function () { return kit.iwallet; }
+});
+Object.defineProperty(exports, "mainnet", {
+  enumerable: true,
+  get: function () { return kit.mainnet; }
+});
+Object.defineProperty(exports, "testnet", {
+  enumerable: true,
+  get: function () { return kit.testnet; }
+});
+exports.IvemContext = IvemContext;
+exports.IvemProvider = IvemProvider;
+exports.useAccount = useAccount;
+exports.useCallContract = useCallContract;
+exports.useChainId = useChainId;
+exports.useConfig = useConfig;
+exports.useConnect = useConnect;
+exports.useDisconnect = useDisconnect;
+exports.useReconnect = useReconnect;
+exports.useSendTransaction = useSendTransaction;
+exports.useSignMessage = useSignMessage;
+exports.useWaitForTransactionReceipt = useWaitForTransactionReceipt;
+exports.useWriteContract = useWriteContract;
+Object.keys(kit).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return kit[k]; }
+  });
+});

package/dist/index.d.cts

@@ -0,0 +1,90 @@
+import * as _tanstack_react_query from '@tanstack/react-query';
+import { QueryClient, QueryClientConfig, UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { Config, State, GetAccountReturnType, ConnectReturnType, ConnectParameters, ReconnectReturnType, DisconnectReturnType, SignMessageReturnType, SignMessageParameters, SendTransactionReturnType, SendTransactionParameters, WriteContractReturnType, WriteContractParameters, CallContractReturnType, CallContractParameters, WaitForTransactionReceiptParameters, WaitForTransactionReceiptReturnType } from '@ivem/kit';
+export * from '@ivem/kit';
+export { Config, CreateConfigParameters, IWalletParameters, createConfig, iwallet, mainnet, testnet } from '@ivem/kit';
+
+declare const IvemContext: react.Context<Config | undefined>;
+type IvemProviderProps = {
+    config: Config;
+    initialState?: State;
+    reconnectOnMount?: boolean;
+    queryClient?: QueryClient;
+    queryClientConfig?: QueryClientConfig;
+    children: ReactNode;
+};
+declare function IvemProvider(props: IvemProviderProps): react.FunctionComponentElement<_tanstack_react_query.QueryClientProviderProps>;
+
+declare function useConfig(): Config;
+
+type UseAccountReturnType = GetAccountReturnType;
+declare function useAccount(): UseAccountReturnType;
+
+type UseConnectParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<ConnectReturnType, Error, ConnectParameters | void, unknown>, "mutationFn">;
+};
+type UseConnectReturnType = UseMutationResult<ConnectReturnType, Error, ConnectParameters | void, unknown>;
+declare function useConnect(parameters?: UseConnectParameters): UseConnectReturnType;
+
+type UseReconnectParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<ReconnectReturnType, Error, void, unknown>, "mutationFn">;
+};
+type UseReconnectReturnType = UseMutationResult<ReconnectReturnType, Error, void, unknown>;
+declare function useReconnect(parameters?: UseReconnectParameters): UseReconnectReturnType;
+
+type UseDisconnectParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<DisconnectReturnType, Error, void, unknown>, "mutationFn">;
+};
+type UseDisconnectReturnType = UseMutationResult<DisconnectReturnType, Error, void, unknown>;
+declare function useDisconnect(parameters?: UseDisconnectParameters): UseDisconnectReturnType;
+
+type UseChainIdReturnType = string;
+declare function useChainId(): UseChainIdReturnType;
+
+type UseSignMessageParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<SignMessageReturnType, Error, SignMessageParameters, unknown>, "mutationFn">;
+};
+type UseSignMessageReturnType = UseMutationResult<SignMessageReturnType, Error, SignMessageParameters, unknown>;
+declare function useSignMessage(parameters?: UseSignMessageParameters): UseSignMessageReturnType;
+
+type UseSendTransactionParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<SendTransactionReturnType, Error, SendTransactionParameters, unknown>, "mutationFn">;
+};
+type UseSendTransactionReturnType = UseMutationResult<SendTransactionReturnType, Error, SendTransactionParameters, unknown>;
+declare function useSendTransaction(parameters?: UseSendTransactionParameters): UseSendTransactionReturnType;
+
+type UseWriteContractParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<WriteContractReturnType, Error, WriteContractParameters, unknown>, "mutationFn">;
+};
+type UseWriteContractReturnType = UseMutationResult<WriteContractReturnType, Error, WriteContractParameters, unknown>;
+declare function useWriteContract(parameters?: UseWriteContractParameters): UseWriteContractReturnType;
+
+type UseCallContractParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<CallContractReturnType, Error, CallContractParameters, unknown>, "mutationFn">;
+};
+type UseCallContractReturnType = UseMutationResult<CallContractReturnType, Error, CallContractParameters, unknown>;
+declare function useCallContract(parameters?: UseCallContractParameters): UseCallContractReturnType;
+
+type UseWaitForTransactionReceiptParameters = WaitForTransactionReceiptParameters & {
+    enabled?: boolean;
+};
+type UseWaitForTransactionReceiptReturnType = {
+    data: WaitForTransactionReceiptReturnType | null;
+    error: Error | null;
+    isLoading: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    refetch: () => Promise<WaitForTransactionReceiptReturnType | null>;
+};
+declare function useWaitForTransactionReceipt(parameters?: UseWaitForTransactionReceiptParameters): UseWaitForTransactionReceiptReturnType;
+
+export { IvemContext, IvemProvider, type IvemProviderProps, type UseAccountReturnType, type UseCallContractParameters, type UseCallContractReturnType, type UseChainIdReturnType, type UseConnectParameters, type UseConnectReturnType, type UseDisconnectParameters, type UseDisconnectReturnType, type UseReconnectParameters, type UseReconnectReturnType, type UseSendTransactionParameters, type UseSendTransactionReturnType, type UseSignMessageParameters, type UseSignMessageReturnType, type UseWaitForTransactionReceiptParameters, type UseWaitForTransactionReceiptReturnType, type UseWriteContractParameters, type UseWriteContractReturnType, useAccount, useCallContract, useChainId, useConfig, useConnect, useDisconnect, useReconnect, useSendTransaction, useSignMessage, useWaitForTransactionReceipt, useWriteContract };

package/dist/index.d.ts

@@ -0,0 +1,90 @@
+import * as _tanstack_react_query from '@tanstack/react-query';
+import { QueryClient, QueryClientConfig, UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { Config, State, GetAccountReturnType, ConnectReturnType, ConnectParameters, ReconnectReturnType, DisconnectReturnType, SignMessageReturnType, SignMessageParameters, SendTransactionReturnType, SendTransactionParameters, WriteContractReturnType, WriteContractParameters, CallContractReturnType, CallContractParameters, WaitForTransactionReceiptParameters, WaitForTransactionReceiptReturnType } from '@ivem/kit';
+export * from '@ivem/kit';
+export { Config, CreateConfigParameters, IWalletParameters, createConfig, iwallet, mainnet, testnet } from '@ivem/kit';
+
+declare const IvemContext: react.Context<Config | undefined>;
+type IvemProviderProps = {
+    config: Config;
+    initialState?: State;
+    reconnectOnMount?: boolean;
+    queryClient?: QueryClient;
+    queryClientConfig?: QueryClientConfig;
+    children: ReactNode;
+};
+declare function IvemProvider(props: IvemProviderProps): react.FunctionComponentElement<_tanstack_react_query.QueryClientProviderProps>;
+
+declare function useConfig(): Config;
+
+type UseAccountReturnType = GetAccountReturnType;
+declare function useAccount(): UseAccountReturnType;
+
+type UseConnectParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<ConnectReturnType, Error, ConnectParameters | void, unknown>, "mutationFn">;
+};
+type UseConnectReturnType = UseMutationResult<ConnectReturnType, Error, ConnectParameters | void, unknown>;
+declare function useConnect(parameters?: UseConnectParameters): UseConnectReturnType;
+
+type UseReconnectParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<ReconnectReturnType, Error, void, unknown>, "mutationFn">;
+};
+type UseReconnectReturnType = UseMutationResult<ReconnectReturnType, Error, void, unknown>;
+declare function useReconnect(parameters?: UseReconnectParameters): UseReconnectReturnType;
+
+type UseDisconnectParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<DisconnectReturnType, Error, void, unknown>, "mutationFn">;
+};
+type UseDisconnectReturnType = UseMutationResult<DisconnectReturnType, Error, void, unknown>;
+declare function useDisconnect(parameters?: UseDisconnectParameters): UseDisconnectReturnType;
+
+type UseChainIdReturnType = string;
+declare function useChainId(): UseChainIdReturnType;
+
+type UseSignMessageParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<SignMessageReturnType, Error, SignMessageParameters, unknown>, "mutationFn">;
+};
+type UseSignMessageReturnType = UseMutationResult<SignMessageReturnType, Error, SignMessageParameters, unknown>;
+declare function useSignMessage(parameters?: UseSignMessageParameters): UseSignMessageReturnType;
+
+type UseSendTransactionParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<SendTransactionReturnType, Error, SendTransactionParameters, unknown>, "mutationFn">;
+};
+type UseSendTransactionReturnType = UseMutationResult<SendTransactionReturnType, Error, SendTransactionParameters, unknown>;
+declare function useSendTransaction(parameters?: UseSendTransactionParameters): UseSendTransactionReturnType;
+
+type UseWriteContractParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<WriteContractReturnType, Error, WriteContractParameters, unknown>, "mutationFn">;
+};
+type UseWriteContractReturnType = UseMutationResult<WriteContractReturnType, Error, WriteContractParameters, unknown>;
+declare function useWriteContract(parameters?: UseWriteContractParameters): UseWriteContractReturnType;
+
+type UseCallContractParameters = {
+    config?: Config;
+    mutation?: Omit<UseMutationOptions<CallContractReturnType, Error, CallContractParameters, unknown>, "mutationFn">;
+};
+type UseCallContractReturnType = UseMutationResult<CallContractReturnType, Error, CallContractParameters, unknown>;
+declare function useCallContract(parameters?: UseCallContractParameters): UseCallContractReturnType;
+
+type UseWaitForTransactionReceiptParameters = WaitForTransactionReceiptParameters & {
+    enabled?: boolean;
+};
+type UseWaitForTransactionReceiptReturnType = {
+    data: WaitForTransactionReceiptReturnType | null;
+    error: Error | null;
+    isLoading: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    refetch: () => Promise<WaitForTransactionReceiptReturnType | null>;
+};
+declare function useWaitForTransactionReceipt(parameters?: UseWaitForTransactionReceiptParameters): UseWaitForTransactionReceiptReturnType;
+
+export { IvemContext, IvemProvider, type IvemProviderProps, type UseAccountReturnType, type UseCallContractParameters, type UseCallContractReturnType, type UseChainIdReturnType, type UseConnectParameters, type UseConnectReturnType, type UseDisconnectParameters, type UseDisconnectReturnType, type UseReconnectParameters, type UseReconnectReturnType, type UseSendTransactionParameters, type UseSendTransactionReturnType, type UseSignMessageParameters, type UseSignMessageReturnType, type UseWaitForTransactionReceiptParameters, type UseWaitForTransactionReceiptReturnType, type UseWriteContractParameters, type UseWriteContractReturnType, useAccount, useCallContract, useChainId, useConfig, useConnect, useDisconnect, useReconnect, useSendTransaction, useSignMessage, useWaitForTransactionReceipt, useWriteContract };

package/dist/index.js

@@ -0,0 +1,248 @@
+import { createContext, useMemo, useRef, useEffect, createElement, useContext } from 'react';
+import { reconnect, connect, disconnect, getChainId, signMessage, sendTransaction, writeContract, callContract, waitForTransactionReceipt } from '@ivem/kit';
+export * from '@ivem/kit';
+export { createConfig, iwallet, mainnet, testnet } from '@ivem/kit';
+import { QueryClient, QueryClientProvider, useMutation, useQuery } from '@tanstack/react-query';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector.js';
+import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
+
+// src/context.ts
+var IvemContext = createContext(void 0);
+function IvemProvider(props) {
+  const { children, config, initialState, reconnectOnMount = true } = props;
+  const queryClient = useMemo(
+    () => props.queryClient ?? new QueryClient(props.queryClientConfig),
+    [props.queryClient, props.queryClientConfig]
+  );
+  const reconnectAttempted = useRef(false);
+  useEffect(() => {
+    if (initialState && !config._internal.ssr) {
+      config.setState(initialState);
+    }
+    if (config._internal.ssr) return;
+    if (reconnectOnMount && !reconnectAttempted.current) {
+      reconnectAttempted.current = true;
+      reconnect(config).catch(() => {
+      });
+    }
+  }, [config, initialState, reconnectOnMount]);
+  return createElement(
+    QueryClientProvider,
+    { client: queryClient },
+    createElement(IvemContext.Provider, { value: config }, children)
+  );
+}
+function useConfig() {
+  const config = useContext(IvemContext);
+  if (!config) {
+    throw new Error("useConfig must be used within IvemProvider");
+  }
+  return config;
+}
+function useAccount() {
+  const config = useConfig();
+  const account = useSyncExternalStoreWithSelector(
+    (onChange) => config.subscribe(
+      (state) => state,
+      () => onChange()
+    ),
+    () => config.state,
+    () => config.state,
+    (state) => ({
+      address: state.accounts[0],
+      addresses: state.accounts,
+      chainId: state.chainId,
+      isConnected: state.status === "connected",
+      isConnecting: state.status === "connecting",
+      isDisconnected: state.status === "disconnected",
+      isReconnecting: state.status === "reconnecting",
+      status: state.status
+    }),
+    (a, b) => a.address === b.address && a.status === b.status && a.chainId === b.chainId && a.addresses.length === b.addresses.length
+  );
+  return account;
+}
+
+// src/hooks/error.ts
+function safeStringify(value) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function createRichError(message, extra) {
+  const error = new Error(message);
+  if (extra) Object.assign(error, extra);
+  return error;
+}
+function normalizeHookError(err) {
+  if (err instanceof Error) return err;
+  if (typeof err === "string") return new Error(err);
+  if (err && typeof err === "object") {
+    const record = err;
+    const nestedMessage = record.message ?? record.reason ?? record.error?.message ?? record.data?.message;
+    if (typeof nestedMessage === "string" && nestedMessage.length > 0) {
+      return createRichError(nestedMessage, record);
+    }
+    return createRichError(safeStringify(err), record);
+  }
+  return new Error(String(err));
+}
+
+// src/hooks/useConnect.ts
+function useConnect(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return useMutation({
+    ...parameters.mutation,
+    mutationFn: async (params) => {
+      try {
+        return await connect(config, params ?? {});
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useReconnect(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return useMutation({
+    ...parameters.mutation,
+    mutationFn: async () => {
+      try {
+        return await reconnect(config);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useDisconnect(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return useMutation({
+    ...parameters.mutation,
+    mutationFn: async () => {
+      try {
+        return await disconnect(config);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useChainId() {
+  const config = useConfig();
+  const chainId = useSyncExternalStore(
+    (onChange) => {
+      return config.subscribe(
+        (state) => state.chainId,
+        () => onChange()
+      );
+    },
+    () => getChainId(config),
+    () => getChainId(config)
+  );
+  return chainId;
+}
+function useSignMessage(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return useMutation({
+    ...parameters.mutation,
+    mutationFn: async (params) => {
+      try {
+        return await signMessage(config, params);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useSendTransaction(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return useMutation({
+    ...parameters.mutation,
+    mutationFn: async (params) => {
+      try {
+        return await sendTransaction(config, params);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useWriteContract(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return useMutation({
+    ...parameters.mutation,
+    mutationFn: async (params) => {
+      try {
+        return await writeContract(config, params);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useCallContract(parameters = {}) {
+  const contextConfig = useConfig();
+  const config = parameters.config ?? contextConfig;
+  return useMutation({
+    ...parameters.mutation,
+    mutationFn: async (params) => {
+      try {
+        return await callContract(config, params);
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+}
+function useWaitForTransactionReceipt(parameters = { hash: "" }) {
+  const config = useConfig();
+  const { hash = "", enabled = true, ...rest } = parameters;
+  const { retryCount, retryDelay, timeout, stage } = rest;
+  const query = useQuery({
+    queryKey: [
+      "waitForTransactionReceipt",
+      config.state.chainId,
+      hash,
+      retryCount,
+      retryDelay,
+      timeout,
+      stage
+    ],
+    enabled: Boolean(hash) && enabled,
+    queryFn: async () => {
+      try {
+        return await waitForTransactionReceipt(config, {
+          hash,
+          retryCount,
+          retryDelay,
+          timeout,
+          stage
+        });
+      } catch (err) {
+        throw normalizeHookError(err);
+      }
+    }
+  });
+  return {
+    data: query.data ?? null,
+    error: query.error ?? null,
+    isLoading: query.isLoading || query.isFetching,
+    isSuccess: query.isSuccess,
+    isError: query.isError,
+    refetch: async () => {
+      const result = await query.refetch();
+      return result.data ?? null;
+    }
+  };
+}
+
+export { IvemContext, IvemProvider, useAccount, useCallContract, useChainId, useConfig, useConnect, useDisconnect, useReconnect, useSendTransaction, useSignMessage, useWaitForTransactionReceipt, useWriteContract };

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@ivem/kit-react",
+  "version": "0.0.1",
+  "description": "React hooks for IOST blockchain",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ivemlabs/ivem-kit",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "iost",
+    "react",
+    "hooks",
+    "blockchain"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "use-sync-external-store": "^1.2.0",
+    "@ivem/kit": "0.0.1"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.90.2",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/use-sync-external-store": "^0.0.6",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": ">=5.0.0",
+    "react": ">=18.0.0",
+    "typescript": ">=5.0.4"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}