@txnlab/use-wallet-react 3.0.0-alpha.1

package/README.md

@@ -0,0 +1,7 @@
+# @txnlab/use-wallet-react
+
+React wrapper for [@txnlab/use-wallet-js](https://github.com/TxnLab/use-wallet-js/tree/main/packages/use-wallet-js)
+
+## License
+
+MIT ©2023 [TxnLab, Inc.](https://txnlab.dev)

package/dist/index.cjs

@@ -0,0 +1,110 @@
+"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.ts
+var src_exports = {};
+__export(src_exports, {
+  WalletProvider: () => WalletProvider,
+  useWallet: () => useWallet
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/WalletProvider.tsx
+var React = __toESM(require("react"), 1);
+var import_use_wallet_js = require("@txnlab/use-wallet-js");
+var WalletContext = React.createContext({});
+var useWalletManager = () => {
+  const context = React.useContext(WalletContext);
+  if (!context) {
+    throw new Error("useWallet must be used within the WalletProvider");
+  }
+  return context;
+};
+var WalletProvider = ({ manager, children }) => {
+  const [state, setState] = React.useState(import_use_wallet_js.defaultState);
+  React.useEffect(() => {
+    const unsubscribe = manager.subscribe((state2) => {
+      setState(state2);
+    });
+    const resumeSessions = async () => {
+      try {
+        await manager.resumeSessions();
+      } catch (error) {
+        console.error("Error resuming sessions:", error);
+      }
+    };
+    resumeSessions();
+    return () => unsubscribe();
+  }, [manager]);
+  return /* @__PURE__ */ React.createElement(WalletContext.Provider, { value: { manager, state } }, children);
+};
+
+// src/useWallet.ts
+function useWallet() {
+  const { manager, state } = useWalletManager();
+  const { activeNetwork, activeWallet } = state;
+  const wallets = manager.wallets;
+  const algodClient = manager.algodClient;
+  const activeWalletAccounts = manager.activeWalletAccounts;
+  const activeWalletAddresses = manager.activeWalletAddresses;
+  const activeAccount = manager.activeAccount;
+  const activeAddress = manager.activeAddress;
+  const setActiveNetwork = manager.setActiveNetwork;
+  const signTransactions = (txnGroup, indexesToSign, returnGroup) => {
+    if (!activeWallet) {
+      throw new Error("No active wallet");
+    }
+    return manager.signTransactions(txnGroup, indexesToSign, returnGroup);
+  };
+  const transactionSigner = (txnGroup, indexesToSign) => {
+    if (!activeWallet) {
+      throw new Error("No active wallet");
+    }
+    return manager.transactionSigner(txnGroup, indexesToSign);
+  };
+  return {
+    wallets,
+    algodClient,
+    activeNetwork,
+    activeWallet,
+    activeWalletAccounts,
+    activeWalletAddresses,
+    activeAccount,
+    activeAddress,
+    setActiveNetwork,
+    signTransactions,
+    transactionSigner
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WalletProvider,
+  useWallet
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/WalletProvider.tsx","../src/useWallet.ts"],"sourcesContent":["export { useWallet } from './useWallet'\nexport { WalletProvider } from './WalletProvider'\n","'use client'\n\nimport * as React from 'react'\n\nimport { WalletManager, State, defaultState } from '@txnlab/use-wallet-js'\n\ninterface IContext {\n  manager: WalletManager\n  state: State\n}\n\nconst WalletContext = React.createContext<IContext>({} as IContext)\n\nexport const useWalletManager = (): IContext => {\n  const context = React.useContext(WalletContext)\n\n  if (!context) {\n    throw new Error('useWallet must be used within the WalletProvider')\n  }\n\n  return context\n}\n\ninterface IWalletProvider {\n  manager: WalletManager\n  children?: React.ReactNode\n}\n\nexport const WalletProvider = ({ manager, children }: IWalletProvider): JSX.Element => {\n  const [state, setState] = React.useState<State>(defaultState)\n\n  React.useEffect(() => {\n    const unsubscribe = manager.subscribe((state) => {\n      setState(state)\n    })\n\n    const resumeSessions = async () => {\n      try {\n        await manager.resumeSessions()\n      } catch (error) {\n        console.error('Error resuming sessions:', error)\n      }\n    }\n\n    resumeSessions()\n\n    return () => unsubscribe()\n  }, [manager])\n\n  return <WalletContext.Provider value={{ manager, state }}>{children}</WalletContext.Provider>\n}\n","'use client'\n\nimport type algosdk from 'algosdk'\nimport { useWalletManager } from './WalletProvider'\n\nexport function useWallet() {\n  const { manager, state } = useWalletManager()\n\n  const { activeNetwork, activeWallet } = state\n\n  const wallets = manager.wallets\n  const algodClient: algosdk.Algodv2 = manager.algodClient\n  const activeWalletAccounts = manager.activeWalletAccounts\n  const activeWalletAddresses = manager.activeWalletAddresses\n  const activeAccount = manager.activeAccount\n  const activeAddress = manager.activeAddress\n  const setActiveNetwork = manager.setActiveNetwork\n\n  const signTransactions = (\n    txnGroup: algosdk.Transaction[] | algosdk.Transaction[][] | Uint8Array[] | Uint8Array[][],\n    indexesToSign?: number[],\n    returnGroup?: boolean\n  ) => {\n    if (!activeWallet) {\n      throw new Error('No active wallet')\n    }\n    return manager.signTransactions(txnGroup, indexesToSign, returnGroup)\n  }\n\n  const transactionSigner = (txnGroup: algosdk.Transaction[], indexesToSign: number[]) => {\n    if (!activeWallet) {\n      throw new Error('No active wallet')\n    }\n    return manager.transactionSigner(txnGroup, indexesToSign)\n  }\n\n  return {\n    wallets,\n    algodClient,\n    activeNetwork,\n    activeWallet,\n    activeWalletAccounts,\n    activeWalletAddresses,\n    activeAccount,\n    activeAddress,\n    setActiveNetwork,\n    signTransactions,\n    transactionSigner\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,YAAuB;AAEvB,2BAAmD;AAOnD,IAAM,gBAAsB,oBAAwB,CAAC,CAAa;AAE3D,IAAM,mBAAmB,MAAgB;AAC9C,QAAM,UAAgB,iBAAW,aAAa;AAE9C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AAEA,SAAO;AACT;AAOO,IAAM,iBAAiB,CAAC,EAAE,SAAS,SAAS,MAAoC;AACrF,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAgB,iCAAY;AAE5D,EAAM,gBAAU,MAAM;AACpB,UAAM,cAAc,QAAQ,UAAU,CAACA,WAAU;AAC/C,eAASA,MAAK;AAAA,IAChB,CAAC;AAED,UAAM,iBAAiB,YAAY;AACjC,UAAI;AACF,cAAM,QAAQ,eAAe;AAAA,MAC/B,SAAS,OAAO;AACd,gBAAQ,MAAM,4BAA4B,KAAK;AAAA,MACjD;AAAA,IACF;AAEA,mBAAe;AAEf,WAAO,MAAM,YAAY;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO,oCAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,SAAS,MAAM,KAAI,QAAS;AACtE;;;AC7CO,SAAS,YAAY;AAC1B,QAAM,EAAE,SAAS,MAAM,IAAI,iBAAiB;AAE5C,QAAM,EAAE,eAAe,aAAa,IAAI;AAExC,QAAM,UAAU,QAAQ;AACxB,QAAM,cAA+B,QAAQ;AAC7C,QAAM,uBAAuB,QAAQ;AACrC,QAAM,wBAAwB,QAAQ;AACtC,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,mBAAmB,QAAQ;AAEjC,QAAM,mBAAmB,CACvB,UACA,eACA,gBACG;AACH,QAAI,CAAC,cAAc;AACjB,YAAM,IAAI,MAAM,kBAAkB;AAAA,IACpC;AACA,WAAO,QAAQ,iBAAiB,UAAU,eAAe,WAAW;AAAA,EACtE;AAEA,QAAM,oBAAoB,CAAC,UAAiC,kBAA4B;AACtF,QAAI,CAAC,cAAc;AACjB,YAAM,IAAI,MAAM,kBAAkB;AAAA,IACpC;AACA,WAAO,QAAQ,kBAAkB,UAAU,aAAa;AAAA,EAC1D;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["state"]}

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+import * as _txnlab_use_wallet_js from '@txnlab/use-wallet-js';
+import { WalletManager } from '@txnlab/use-wallet-js';
+import algosdk from 'algosdk';
+import * as React from 'react';
+
+declare function useWallet(): {
+    wallets: _txnlab_use_wallet_js.BaseWallet[];
+    algodClient: algosdk.Algodv2;
+    activeNetwork: _txnlab_use_wallet_js.NetworkId;
+    activeWallet: _txnlab_use_wallet_js.WalletId | null;
+    activeWalletAccounts: {
+        name: string;
+        address: string;
+    }[] | null;
+    activeWalletAddresses: string[] | null;
+    activeAccount: {
+        name: string;
+        address: string;
+    } | null;
+    activeAddress: string | null;
+    setActiveNetwork: (networkId: _txnlab_use_wallet_js.NetworkId) => void;
+    signTransactions: (txnGroup: algosdk.Transaction[] | algosdk.Transaction[][] | Uint8Array[] | Uint8Array[][], indexesToSign?: number[], returnGroup?: boolean) => Promise<Uint8Array[]>;
+    transactionSigner: (txnGroup: algosdk.Transaction[], indexesToSign: number[]) => Promise<Uint8Array[]>;
+};
+
+interface IWalletProvider {
+    manager: WalletManager;
+    children?: React.ReactNode;
+}
+declare const WalletProvider: ({ manager, children }: IWalletProvider) => JSX.Element;
+
+export { WalletProvider, useWallet };

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import * as _txnlab_use_wallet_js from '@txnlab/use-wallet-js';
+import { WalletManager } from '@txnlab/use-wallet-js';
+import algosdk from 'algosdk';
+import * as React from 'react';
+
+declare function useWallet(): {
+    wallets: _txnlab_use_wallet_js.BaseWallet[];
+    algodClient: algosdk.Algodv2;
+    activeNetwork: _txnlab_use_wallet_js.NetworkId;
+    activeWallet: _txnlab_use_wallet_js.WalletId | null;
+    activeWalletAccounts: {
+        name: string;
+        address: string;
+    }[] | null;
+    activeWalletAddresses: string[] | null;
+    activeAccount: {
+        name: string;
+        address: string;
+    } | null;
+    activeAddress: string | null;
+    setActiveNetwork: (networkId: _txnlab_use_wallet_js.NetworkId) => void;
+    signTransactions: (txnGroup: algosdk.Transaction[] | algosdk.Transaction[][] | Uint8Array[] | Uint8Array[][], indexesToSign?: number[], returnGroup?: boolean) => Promise<Uint8Array[]>;
+    transactionSigner: (txnGroup: algosdk.Transaction[], indexesToSign: number[]) => Promise<Uint8Array[]>;
+};
+
+interface IWalletProvider {
+    manager: WalletManager;
+    children?: React.ReactNode;
+}
+declare const WalletProvider: ({ manager, children }: IWalletProvider) => JSX.Element;
+
+export { WalletProvider, useWallet };

package/dist/index.js

@@ -0,0 +1,72 @@
+// src/WalletProvider.tsx
+import * as React from "react";
+import { defaultState } from "@txnlab/use-wallet-js";
+var WalletContext = React.createContext({});
+var useWalletManager = () => {
+  const context = React.useContext(WalletContext);
+  if (!context) {
+    throw new Error("useWallet must be used within the WalletProvider");
+  }
+  return context;
+};
+var WalletProvider = ({ manager, children }) => {
+  const [state, setState] = React.useState(defaultState);
+  React.useEffect(() => {
+    const unsubscribe = manager.subscribe((state2) => {
+      setState(state2);
+    });
+    const resumeSessions = async () => {
+      try {
+        await manager.resumeSessions();
+      } catch (error) {
+        console.error("Error resuming sessions:", error);
+      }
+    };
+    resumeSessions();
+    return () => unsubscribe();
+  }, [manager]);
+  return /* @__PURE__ */ React.createElement(WalletContext.Provider, { value: { manager, state } }, children);
+};
+
+// src/useWallet.ts
+function useWallet() {
+  const { manager, state } = useWalletManager();
+  const { activeNetwork, activeWallet } = state;
+  const wallets = manager.wallets;
+  const algodClient = manager.algodClient;
+  const activeWalletAccounts = manager.activeWalletAccounts;
+  const activeWalletAddresses = manager.activeWalletAddresses;
+  const activeAccount = manager.activeAccount;
+  const activeAddress = manager.activeAddress;
+  const setActiveNetwork = manager.setActiveNetwork;
+  const signTransactions = (txnGroup, indexesToSign, returnGroup) => {
+    if (!activeWallet) {
+      throw new Error("No active wallet");
+    }
+    return manager.signTransactions(txnGroup, indexesToSign, returnGroup);
+  };
+  const transactionSigner = (txnGroup, indexesToSign) => {
+    if (!activeWallet) {
+      throw new Error("No active wallet");
+    }
+    return manager.transactionSigner(txnGroup, indexesToSign);
+  };
+  return {
+    wallets,
+    algodClient,
+    activeNetwork,
+    activeWallet,
+    activeWalletAccounts,
+    activeWalletAddresses,
+    activeAccount,
+    activeAddress,
+    setActiveNetwork,
+    signTransactions,
+    transactionSigner
+  };
+}
+export {
+  WalletProvider,
+  useWallet
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/WalletProvider.tsx","../src/useWallet.ts"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { WalletManager, State, defaultState } from '@txnlab/use-wallet-js'\n\ninterface IContext {\n  manager: WalletManager\n  state: State\n}\n\nconst WalletContext = React.createContext<IContext>({} as IContext)\n\nexport const useWalletManager = (): IContext => {\n  const context = React.useContext(WalletContext)\n\n  if (!context) {\n    throw new Error('useWallet must be used within the WalletProvider')\n  }\n\n  return context\n}\n\ninterface IWalletProvider {\n  manager: WalletManager\n  children?: React.ReactNode\n}\n\nexport const WalletProvider = ({ manager, children }: IWalletProvider): JSX.Element => {\n  const [state, setState] = React.useState<State>(defaultState)\n\n  React.useEffect(() => {\n    const unsubscribe = manager.subscribe((state) => {\n      setState(state)\n    })\n\n    const resumeSessions = async () => {\n      try {\n        await manager.resumeSessions()\n      } catch (error) {\n        console.error('Error resuming sessions:', error)\n      }\n    }\n\n    resumeSessions()\n\n    return () => unsubscribe()\n  }, [manager])\n\n  return <WalletContext.Provider value={{ manager, state }}>{children}</WalletContext.Provider>\n}\n","'use client'\n\nimport type algosdk from 'algosdk'\nimport { useWalletManager } from './WalletProvider'\n\nexport function useWallet() {\n  const { manager, state } = useWalletManager()\n\n  const { activeNetwork, activeWallet } = state\n\n  const wallets = manager.wallets\n  const algodClient: algosdk.Algodv2 = manager.algodClient\n  const activeWalletAccounts = manager.activeWalletAccounts\n  const activeWalletAddresses = manager.activeWalletAddresses\n  const activeAccount = manager.activeAccount\n  const activeAddress = manager.activeAddress\n  const setActiveNetwork = manager.setActiveNetwork\n\n  const signTransactions = (\n    txnGroup: algosdk.Transaction[] | algosdk.Transaction[][] | Uint8Array[] | Uint8Array[][],\n    indexesToSign?: number[],\n    returnGroup?: boolean\n  ) => {\n    if (!activeWallet) {\n      throw new Error('No active wallet')\n    }\n    return manager.signTransactions(txnGroup, indexesToSign, returnGroup)\n  }\n\n  const transactionSigner = (txnGroup: algosdk.Transaction[], indexesToSign: number[]) => {\n    if (!activeWallet) {\n      throw new Error('No active wallet')\n    }\n    return manager.transactionSigner(txnGroup, indexesToSign)\n  }\n\n  return {\n    wallets,\n    algodClient,\n    activeNetwork,\n    activeWallet,\n    activeWalletAccounts,\n    activeWalletAddresses,\n    activeAccount,\n    activeAddress,\n    setActiveNetwork,\n    signTransactions,\n    transactionSigner\n  }\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAEvB,SAA+B,oBAAoB;AAOnD,IAAM,gBAAsB,oBAAwB,CAAC,CAAa;AAE3D,IAAM,mBAAmB,MAAgB;AAC9C,QAAM,UAAgB,iBAAW,aAAa;AAE9C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AAEA,SAAO;AACT;AAOO,IAAM,iBAAiB,CAAC,EAAE,SAAS,SAAS,MAAoC;AACrF,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAgB,YAAY;AAE5D,EAAM,gBAAU,MAAM;AACpB,UAAM,cAAc,QAAQ,UAAU,CAACA,WAAU;AAC/C,eAASA,MAAK;AAAA,IAChB,CAAC;AAED,UAAM,iBAAiB,YAAY;AACjC,UAAI;AACF,cAAM,QAAQ,eAAe;AAAA,MAC/B,SAAS,OAAO;AACd,gBAAQ,MAAM,4BAA4B,KAAK;AAAA,MACjD;AAAA,IACF;AAEA,mBAAe;AAEf,WAAO,MAAM,YAAY;AAAA,EAC3B,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO,oCAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,SAAS,MAAM,KAAI,QAAS;AACtE;;;AC7CO,SAAS,YAAY;AAC1B,QAAM,EAAE,SAAS,MAAM,IAAI,iBAAiB;AAE5C,QAAM,EAAE,eAAe,aAAa,IAAI;AAExC,QAAM,UAAU,QAAQ;AACxB,QAAM,cAA+B,QAAQ;AAC7C,QAAM,uBAAuB,QAAQ;AACrC,QAAM,wBAAwB,QAAQ;AACtC,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,mBAAmB,QAAQ;AAEjC,QAAM,mBAAmB,CACvB,UACA,eACA,gBACG;AACH,QAAI,CAAC,cAAc;AACjB,YAAM,IAAI,MAAM,kBAAkB;AAAA,IACpC;AACA,WAAO,QAAQ,iBAAiB,UAAU,eAAe,WAAW;AAAA,EACtE;AAEA,QAAM,oBAAoB,CAAC,UAAiC,kBAA4B;AACtF,QAAI,CAAC,cAAc;AACjB,YAAM,IAAI,MAAM,kBAAkB;AAAA,IACpC;AACA,WAAO,QAAQ,kBAAkB,UAAU,aAAa;AAAA,EAC1D;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["state"]}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@txnlab/use-wallet-react",
+  "version": "3.0.0-alpha.1",
+  "description": "React library for integrating Algorand wallets into decentralized applications",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/txnlab/use-wallet-js.git",
+    "directory": "packages/use-wallet-react"
+  },
+  "keywords": [
+    "algorand",
+    "wallet",
+    "walletconnect",
+    "pera",
+    "defly",
+    "exodus",
+    "algosdk",
+    "algokit",
+    "kmd",
+    "react"
+  ],
+  "author": "Doug Richar <drichar@gmail.com>",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "peerDependencies": {
+    "@blockshake/defly-connect": "^1.1.6",
+    "@perawallet/connect": "^1.3.3",
+    "@walletconnect/modal": "^2.6.2",
+    "@walletconnect/sign-client": "^2.10.2",
+    "algosdk": "^2.6.0",
+    "react": "^18.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@blockshake/defly-connect": {
+      "optional": true
+    },
+    "@perawallet/connect": {
+      "optional": true
+    },
+    "@walletconnect/modal": {
+      "optional": true
+    },
+    "@walletconnect/sign-client": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@txnlab/use-wallet-js": "3.0.0-alpha.10"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "algosdk": "^2.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.2.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "start": "tsup src/index.ts --watch",
+    "lint": "eslint -c '../../.eslintrc.json' '**/*.{js,ts}'",
+    "prettier": "prettier --check '**/*.{js,ts}'",
+    "typecheck": "tsc --noEmit"
+  }
+}