@megaeth-labs/wallet-sdk-react 0.1.0-beta.1

package/README.md

@@ -0,0 +1,15 @@
+# MegaETH Wallet SDK (React)
+
+Wraps the MegaETH Wallet SDK in React hooks using React Query. SDK docs can be found here: https://github.com/megaeth-labs/wallet-sdk
+
+## Setup
+
+Install dependencies: `pnpm i`
+
+Link package locally so other packages can use it: `pnpm dev:link`
+
+Auto build during dev: `pnpm dev`
+
+Build once: `pnpm build`
+
+Link to local wallet sdk: `pnpm dev:setup`

package/dist/index.cjs

@@ -0,0 +1,188 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  MegaProvider: () => MegaProvider,
+  mega: () => import_wallet_sdk2.mega,
+  useBalances: () => useBalances,
+  useCallContract: () => useCallContract,
+  useConnect: () => useConnect,
+  useDeposit: () => useDeposit,
+  useDisconnect: () => useDisconnect,
+  useGetFromContract: () => useGetFromContract,
+  useGrantPermissions: () => useGrantPermissions,
+  usePermissions: () => usePermissions,
+  useRevokePermissions: () => useRevokePermissions,
+  useSignData: () => useSignData,
+  useSignMessage: () => useSignMessage,
+  useStatus: () => useStatus,
+  useTransfer: () => useTransfer
+});
+module.exports = __toCommonJS(index_exports);
+var import_wallet_sdk = require("@megaeth-labs/wallet-sdk");
+var import_react_query = require("@tanstack/react-query");
+var import_react = __toESM(require("react"), 1);
+var import_wallet_sdk2 = require("@megaeth-labs/wallet-sdk");
+var client = new import_react_query.QueryClient();
+var Context = (0, import_react.createContext)({});
+var startedInitialisation = false;
+var MegaProvider = ({ config, children }) => {
+  const [initialised, setInitialised] = (0, import_react.useState)(false);
+  const [status, setStatus] = (0, import_react.useState)({ status: "disconnected" });
+  const value = (0, import_react.useMemo)(
+    () => ({
+      config,
+      initialised,
+      setInitialised,
+      status,
+      setStatus
+    }),
+    [config, initialised, status]
+  );
+  (0, import_react.useEffect)(() => {
+    if (startedInitialisation) return;
+    startedInitialisation = true;
+    import_wallet_sdk.mega.events.onStatusChange(setStatus);
+    (async () => {
+      const newStatus = await import_wallet_sdk.mega.initialise(config);
+      if (newStatus) {
+        setStatus(newStatus);
+      }
+      setInitialised(true);
+    })();
+  }, [config]);
+  return /* @__PURE__ */ import_react.default.createElement(Context.Provider, { value }, /* @__PURE__ */ import_react.default.createElement(import_react_query.QueryClientProvider, { client }, children));
+};
+var useStatus = () => {
+  const { status, initialised } = (0, import_react.useContext)(Context);
+  return {
+    ...status,
+    initialised
+  };
+};
+var useConnect = (options) => {
+  return (0, import_react_query.useMutation)({
+    mutationFn: import_wallet_sdk.mega.connect,
+    ...options
+  });
+};
+var useDisconnect = (options) => {
+  return (0, import_react_query.useMutation)({
+    mutationFn: import_wallet_sdk.mega.disconnect,
+    ...options
+  });
+};
+var useGrantPermissions = (options) => {
+  return (0, import_react_query.useMutation)({
+    mutationFn: import_wallet_sdk.mega.grantPermissions,
+    ...options
+  });
+};
+var useRevokePermissions = (options) => {
+  return (0, import_react_query.useMutation)({
+    mutationFn: import_wallet_sdk.mega.revokePermissions,
+    ...options
+  });
+};
+var useSignMessage = (options) => {
+  return (0, import_react_query.useMutation)({
+    mutationFn: import_wallet_sdk.mega.signMessage,
+    ...options
+  });
+};
+var useTransfer = (options) => {
+  return (0, import_react_query.useMutation)({
+    mutationFn: import_wallet_sdk.mega.transfer,
+    ...options
+  });
+};
+var useCallContract = (options) => {
+  return (0, import_react_query.useMutation)({
+    mutationFn: import_wallet_sdk.mega.callContract,
+    ...options
+  });
+};
+var useGetFromContract = (options) => {
+  return (0, import_react_query.useMutation)({
+    mutationFn: import_wallet_sdk.mega.getFromContract,
+    ...options
+  });
+};
+var useDeposit = (options) => {
+  return (0, import_react_query.useMutation)({
+    mutationFn: import_wallet_sdk.mega.deposit,
+    ...options
+  });
+};
+var useBalances = (tokens, options) => {
+  const { status } = (0, import_react.useContext)(Context);
+  return (0, import_react_query.useQuery)({
+    queryKey: ["balances"],
+    queryFn: () => import_wallet_sdk.mega.balances({
+      tokens
+    }),
+    enabled: status.status === "connected",
+    ...options
+  });
+};
+var usePermissions = (address, options) => {
+  const { status } = (0, import_react.useContext)(Context);
+  return (0, import_react_query.useQuery)({
+    queryKey: ["permissions", address],
+    queryFn: () => import_wallet_sdk.mega.getPermissions(address),
+    enabled: status?.status === "connected",
+    ...options
+  });
+};
+var useSignData = (options) => {
+  return (0, import_react_query.useMutation)({
+    mutationFn: import_wallet_sdk.mega.signData,
+    ...options
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MegaProvider,
+  mega,
+  useBalances,
+  useCallContract,
+  useConnect,
+  useDeposit,
+  useDisconnect,
+  useGetFromContract,
+  useGrantPermissions,
+  usePermissions,
+  useRevokePermissions,
+  useSignData,
+  useSignMessage,
+  useStatus,
+  useTransfer
+});

package/dist/index.d.cts

@@ -0,0 +1,30 @@
+import * as _megaeth_labs_wallet_sdk from '@megaeth-labs/wallet-sdk';
+import { Config, mega, ConnectionStatus } from '@megaeth-labs/wallet-sdk';
+export { mega } from '@megaeth-labs/wallet-sdk';
+import * as _tanstack_react_query from '@tanstack/react-query';
+import { UndefinedInitialDataOptions, UseMutationOptions } from '@tanstack/react-query';
+import React, { PropsWithChildren } from 'react';
+
+interface MegaProviderProps extends PropsWithChildren {
+    config: Config;
+}
+declare const MegaProvider: ({ config, children }: MegaProviderProps) => React.JSX.Element;
+declare const useStatus: () => {
+    initialised: boolean;
+    status: "connected" | "disconnected" | "cancelled";
+    address?: `0x${string}`;
+};
+declare const useConnect: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.connect>>, Error, void, unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<ConnectionStatus, Error, void, unknown>;
+declare const useDisconnect: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.disconnect>>, Error, void, unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<ConnectionStatus, Error, void, unknown>;
+declare const useGrantPermissions: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.grantPermissions>>, Error, Parameters<typeof mega.grantPermissions>[0], unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.GrantPermissionsResponse, Error, _megaeth_labs_wallet_sdk.GrantPermissionsRequest, unknown>;
+declare const useRevokePermissions: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.revokePermissions>>, Error, void, unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<void, Error, void, unknown>;
+declare const useSignMessage: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.signMessage>>, Error, Parameters<typeof mega.signMessage>[0], unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.SignMessageResponse, Error, string, unknown>;
+declare const useTransfer: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.transfer>>, Error, Parameters<typeof mega.transfer>[0], unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.TransactionResult, Error, _megaeth_labs_wallet_sdk.TransferRequest, unknown>;
+declare const useCallContract: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.callContract>>, Error, Parameters<typeof mega.callContract>[0], unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.TransactionResult, Error, _megaeth_labs_wallet_sdk.CallContractRequest, unknown>;
+declare const useGetFromContract: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.getFromContract>>, Error, Parameters<typeof mega.callContract>[0], unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<unknown, Error, _megaeth_labs_wallet_sdk.CallContractRequest, unknown>;
+declare const useDeposit: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.deposit>>, Error>, "mutationFn">) => _tanstack_react_query.UseMutationResult<void, Error, void, unknown>;
+declare const useBalances: (tokens?: string[], options?: Omit<UndefinedInitialDataOptions<Awaited<ReturnType<typeof mega.balances>>, Error>, "queryKey" | "queryFn">) => _tanstack_react_query.UseQueryResult<_megaeth_labs_wallet_sdk.OwnedTokenResponse[], Error>;
+declare const usePermissions: (address?: string, options?: Omit<UndefinedInitialDataOptions<Awaited<ReturnType<typeof mega.getPermissions>>, Error>, "queryKey" | "queryFn">) => _tanstack_react_query.UseQueryResult<_megaeth_labs_wallet_sdk.GetPermissionsResponse | undefined, Error>;
+declare const useSignData: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.signData>>, Error, Parameters<typeof mega.signData>[0]>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.SignDataResponse, Error, _megaeth_labs_wallet_sdk.SignDataRequest, unknown>;
+
+export { MegaProvider, useBalances, useCallContract, useConnect, useDeposit, useDisconnect, useGetFromContract, useGrantPermissions, usePermissions, useRevokePermissions, useSignData, useSignMessage, useStatus, useTransfer };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import * as _megaeth_labs_wallet_sdk from '@megaeth-labs/wallet-sdk';
+import { Config, mega, ConnectionStatus } from '@megaeth-labs/wallet-sdk';
+export { mega } from '@megaeth-labs/wallet-sdk';
+import * as _tanstack_react_query from '@tanstack/react-query';
+import { UndefinedInitialDataOptions, UseMutationOptions } from '@tanstack/react-query';
+import React, { PropsWithChildren } from 'react';
+
+interface MegaProviderProps extends PropsWithChildren {
+    config: Config;
+}
+declare const MegaProvider: ({ config, children }: MegaProviderProps) => React.JSX.Element;
+declare const useStatus: () => {
+    initialised: boolean;
+    status: "connected" | "disconnected" | "cancelled";
+    address?: `0x${string}`;
+};
+declare const useConnect: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.connect>>, Error, void, unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<ConnectionStatus, Error, void, unknown>;
+declare const useDisconnect: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.disconnect>>, Error, void, unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<ConnectionStatus, Error, void, unknown>;
+declare const useGrantPermissions: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.grantPermissions>>, Error, Parameters<typeof mega.grantPermissions>[0], unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.GrantPermissionsResponse, Error, _megaeth_labs_wallet_sdk.GrantPermissionsRequest, unknown>;
+declare const useRevokePermissions: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.revokePermissions>>, Error, void, unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<void, Error, void, unknown>;
+declare const useSignMessage: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.signMessage>>, Error, Parameters<typeof mega.signMessage>[0], unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.SignMessageResponse, Error, string, unknown>;
+declare const useTransfer: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.transfer>>, Error, Parameters<typeof mega.transfer>[0], unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.TransactionResult, Error, _megaeth_labs_wallet_sdk.TransferRequest, unknown>;
+declare const useCallContract: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.callContract>>, Error, Parameters<typeof mega.callContract>[0], unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.TransactionResult, Error, _megaeth_labs_wallet_sdk.CallContractRequest, unknown>;
+declare const useGetFromContract: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.getFromContract>>, Error, Parameters<typeof mega.callContract>[0], unknown>, "mutationFn">) => _tanstack_react_query.UseMutationResult<unknown, Error, _megaeth_labs_wallet_sdk.CallContractRequest, unknown>;
+declare const useDeposit: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.deposit>>, Error>, "mutationFn">) => _tanstack_react_query.UseMutationResult<void, Error, void, unknown>;
+declare const useBalances: (tokens?: string[], options?: Omit<UndefinedInitialDataOptions<Awaited<ReturnType<typeof mega.balances>>, Error>, "queryKey" | "queryFn">) => _tanstack_react_query.UseQueryResult<_megaeth_labs_wallet_sdk.OwnedTokenResponse[], Error>;
+declare const usePermissions: (address?: string, options?: Omit<UndefinedInitialDataOptions<Awaited<ReturnType<typeof mega.getPermissions>>, Error>, "queryKey" | "queryFn">) => _tanstack_react_query.UseQueryResult<_megaeth_labs_wallet_sdk.GetPermissionsResponse | undefined, Error>;
+declare const useSignData: (options?: Omit<UseMutationOptions<Awaited<ReturnType<typeof mega.signData>>, Error, Parameters<typeof mega.signData>[0]>, "mutationFn">) => _tanstack_react_query.UseMutationResult<_megaeth_labs_wallet_sdk.SignDataResponse, Error, _megaeth_labs_wallet_sdk.SignDataRequest, unknown>;
+
+export { MegaProvider, useBalances, useCallContract, useConnect, useDeposit, useDisconnect, useGetFromContract, useGrantPermissions, usePermissions, useRevokePermissions, useSignData, useSignMessage, useStatus, useTransfer };

package/dist/index.js

@@ -0,0 +1,150 @@
+// src/index.tsx
+import { mega } from "@megaeth-labs/wallet-sdk";
+import {
+  QueryClient,
+  QueryClientProvider,
+  useMutation,
+  useQuery
+} from "@tanstack/react-query";
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { mega as mega2 } from "@megaeth-labs/wallet-sdk";
+var client = new QueryClient();
+var Context = createContext({});
+var startedInitialisation = false;
+var MegaProvider = ({ config, children }) => {
+  const [initialised, setInitialised] = useState(false);
+  const [status, setStatus] = useState({ status: "disconnected" });
+  const value = useMemo(
+    () => ({
+      config,
+      initialised,
+      setInitialised,
+      status,
+      setStatus
+    }),
+    [config, initialised, status]
+  );
+  useEffect(() => {
+    if (startedInitialisation) return;
+    startedInitialisation = true;
+    mega.events.onStatusChange(setStatus);
+    (async () => {
+      const newStatus = await mega.initialise(config);
+      if (newStatus) {
+        setStatus(newStatus);
+      }
+      setInitialised(true);
+    })();
+  }, [config]);
+  return /* @__PURE__ */ React.createElement(Context.Provider, { value }, /* @__PURE__ */ React.createElement(QueryClientProvider, { client }, children));
+};
+var useStatus = () => {
+  const { status, initialised } = useContext(Context);
+  return {
+    ...status,
+    initialised
+  };
+};
+var useConnect = (options) => {
+  return useMutation({
+    mutationFn: mega.connect,
+    ...options
+  });
+};
+var useDisconnect = (options) => {
+  return useMutation({
+    mutationFn: mega.disconnect,
+    ...options
+  });
+};
+var useGrantPermissions = (options) => {
+  return useMutation({
+    mutationFn: mega.grantPermissions,
+    ...options
+  });
+};
+var useRevokePermissions = (options) => {
+  return useMutation({
+    mutationFn: mega.revokePermissions,
+    ...options
+  });
+};
+var useSignMessage = (options) => {
+  return useMutation({
+    mutationFn: mega.signMessage,
+    ...options
+  });
+};
+var useTransfer = (options) => {
+  return useMutation({
+    mutationFn: mega.transfer,
+    ...options
+  });
+};
+var useCallContract = (options) => {
+  return useMutation({
+    mutationFn: mega.callContract,
+    ...options
+  });
+};
+var useGetFromContract = (options) => {
+  return useMutation({
+    mutationFn: mega.getFromContract,
+    ...options
+  });
+};
+var useDeposit = (options) => {
+  return useMutation({
+    mutationFn: mega.deposit,
+    ...options
+  });
+};
+var useBalances = (tokens, options) => {
+  const { status } = useContext(Context);
+  return useQuery({
+    queryKey: ["balances"],
+    queryFn: () => mega.balances({
+      tokens
+    }),
+    enabled: status.status === "connected",
+    ...options
+  });
+};
+var usePermissions = (address, options) => {
+  const { status } = useContext(Context);
+  return useQuery({
+    queryKey: ["permissions", address],
+    queryFn: () => mega.getPermissions(address),
+    enabled: status?.status === "connected",
+    ...options
+  });
+};
+var useSignData = (options) => {
+  return useMutation({
+    mutationFn: mega.signData,
+    ...options
+  });
+};
+export {
+  MegaProvider,
+  mega2 as mega,
+  useBalances,
+  useCallContract,
+  useConnect,
+  useDeposit,
+  useDisconnect,
+  useGetFromContract,
+  useGrantPermissions,
+  usePermissions,
+  useRevokePermissions,
+  useSignData,
+  useSignMessage,
+  useStatus,
+  useTransfer
+};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@megaeth-labs/wallet-sdk-react",
+  "version": "0.1.0-beta.1",
+  "description": "MegaETH Wallet SDK React Wrapper for web applications",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "megaeth",
+    "wallet",
+    "sdk",
+    "web3",
+    "react"
+  ],
+  "author": "",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "restricted"
+  },
+  "dependencies": {
+    "@megaeth-labs/wallet-sdk": "beta"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5",
+    "react": "^19"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.6",
+    "@tanstack/react-query": "^5",
+    "@types/node": "25.3.5",
+    "@types/react": "^19",
+    "@vitest/coverage-v8": "4.0.18",
+    "@vitest/ui": "4.0.18",
+    "husky": "^9.1.7",
+    "jsdom": "28.1.0",
+    "lint-staged": "16.4.0",
+    "react": "^19",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3",
+    "vitest": "4.0.18"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,js,jsx,json}": [
+      "pnpm format"
+    ]
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.tsx --format cjs,esm --dts --watch",
+    "dev:link": "pnpm build && pnpm link --global",
+    "dev:setup": "pnpm link --global @megaeth-labs/wallet-sdk",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "lint": "biome lint ./src",
+    "format": "biome format --write ./src",
+    "check": "biome check ./src",
+    "typecheck": "tsc --noEmit"
+  }
+}