@txnlab/use-wallet 0.1.0 → 0.1.2

package/LICENSE.md

@@ -0,0 +1,20 @@
+Copyright (c) 2022 TxnLab Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,48 +1,58 @@
-### @txnlab/use-wallet
+# @TxnLab/use-wallet
 
 React hooks for using Algorand compatible wallets with web applications.
 
-Demo `@txnlab/use-wallet` in [StoryBook](https://txnlab.github.io/use-wallet) or check out [this example](https://github.com/gabrielkuettel/use-wallet-example).
+## Supported Providers
 
-### Quick Start
+- [Pera](https://perawallet.app/)
+- [MyAlgo](https://wallet.myalgo.com/home)
+- [Defly](https://defly.app)
+- [AlgoSigner](https://www.purestake.com/technology/algosigner)
+- [Exodus](https://www.exodus.com)
+- [WalletConnect](https://walletconnect.com)
+- [KMD](https://developer.algorand.org/docs/rest-apis/kmd)
 
-If you're using Webpack 5 (most newer React projects), you need to install polyfills. Follow [these directions.](#webpack-5-issues)
 
-Install with Yarn.
+## Demo
+
+Preview a basic implementation in [Storybook](https://txnlab.github.io/use-wallet) or check out [this example](https://github.com/gabrielkuettel/use-wallet-example).
+
+## Quick Start
+
+⚠️ If you're using Webpack 5 (most newer React projects), you will need to install polyfills. Follow [these directions](#webpack-5).
+
+### Yarn
 
 ```bash
 yarn add @txnlab/use-wallet
 ```
 
-Install with NPM.
+Install peer dependencies (if needed)
 
 ```bash
-npm install @txnlab/use-wallet
+yarn add algosdk @blockshake/defly-connect @perawallet/connect @randlabs/myalgo-connect @walletconnect/client algorand-walletconnect-qrcode-modal
 ```
 
-Install peer dependencies if you don't have them.
-
-With Yarn.
+### NPM
 
 ```bash
-yarn add algosdk @blockshake/defly-connect @perawallet/connect @randlabs/myalgo-connect @walletconnect/client
+npm install @txnlab/use-wallet
 ```
 
-With NPM.
+Install peer dependencies (if needed)
 
 ```bash
-npm install algosdk @blockshake/defly-connect @perawallet/connect @randlabs/myalgo-connect @walletconnect/client
+npm install algosdk @blockshake/defly-connect @perawallet/connect @randlabs/myalgo-connect @walletconnect/client algorand-walletconnect-qrcode-modal
 ```
 
-Setup the wallet providers
+### Set up the wallet providers
 
 ```jsx
 import React from "react";
 import { useConnectWallet } from "@txnlab/use-wallet";
 
 function App() {
-  const { providers, reconnectProviders, accounts, activeAccount } =
-    useConnectWallet();
+  const { providers, reconnectProviders, accounts, activeAccount } = useConnectWallet();
 
   // Reconnect the session when the user returns to the dApp
   React.useEffect(() => {
@@ -56,7 +66,9 @@ function App() {
     console.log("active account", activeAccount);
   });
 
-  // Map through the providers, and render account information and "connect", "set active", and "disconnect" buttons
+  // Map through the providers, 
+  // render account information and "connect", "set active", and "disconnect" buttons.
+  // Finally, map through the `accounts` property to render a dropdown for each connected account.
   return (
     <div>
       {providers.map((provider) => (
@@ -75,6 +87,16 @@ function App() {
             <button onClick={provider.setActive} disabled={!provider.isConnected || provider.isActive}>
               Set Active
             </button>
+            {provider.isActive && provider.accounts.length && (
+              <select
+                value={provider.activeAccount?.address}
+                onChange={(e) => provider.selectAccount(e.target.value)}
+              >
+                {provider.accounts.map((account) => (
+                  <option value={account.address}>{account.address}</option>
+                ))}
+              </select>
+             )}
           </div>
         </div>
       ))}
@@ -89,9 +111,28 @@ Each provider has two connection states: `isConnected` and `isActive`.
 
 `isActive` indicates that the provider is currently active and will be used to sign and send transactions when using the `useWallet` hook.
 
-Sign and send transactions
+By default, all of the supported providers except for `KMD` are returned by `useConnectWallet`. A configuration object can be passed to determine which providers your dApp suports, as shown below.
+
+```jsx
+import { useConnectWallet, PROVIDER_ID } from "@txnlab/use-wallet";
+
+...
+
+const { providers } = useConnectWallet({
+  providers: [
+    PROVIDER_ID.MYALGO_WALLET,
+    PROVIDER_ID.PERA_WALLET,
+    PROVIDER_ID.KMD_WALLET,
+  ],
+});
+```
+
+### Sign and send transactions
 
 ```jsx
+import React from "react";
+import { useWallet } from "@txnlab/use-wallet";
+
 function Wallet() {
   const { activeAccount, signTransactions, sendTransactions } = useWallet();
 
@@ -151,66 +192,111 @@ function Wallet() {
 };
 ```
 
-### Local Development
+## Environment Variables
 
-Install dependencies.
+By default, wallets will connect to Algorand [MainNet](https://developer.algorand.org/docs/get-details/algorand-networks/mainnet). You can change this behavior by setting the following environment variables:
 
-```bash
-yarn install
+* `NODE_NETWORK` (defaults to `mainnet`, and can be set to `testnet`, `betanet`, or the name of a local network running in dev mode)
+ 
+* `NODE_SERVER`
+
+* `NODE_TOKEN` 
+
+* `NODE_PORT`
+
+Example `.env` file:
+
+```
+NODE_NETWORK=devmodenet
+NODE_SERVER=http://algod
+NODE_TOKEN=xxxxxxxxx
+NODE_PORT=8080
 ```
 
-Demo the components in StoryBook.
+### Create React App and Next.js
 
-```bash
-yarn storybook
+In Create React App and Next.js projects, you'll need to add a prefix to these environment variables to expose them to the browser.
+
+* `REACT_APP_` in [Create React App](https://create-react-app.dev/docs/adding-custom-environment-variables/)
 
+* `NEXT_PUBLIC_` in [Next.js](https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser)
+
+Example `.env` file in Create React App:
+
+```
+REACT_APP_NODE_NETWORK=devmodenet
+REACT_APP_NODE_SERVER=http://algod
+REACT_APP_NODE_TOKEN=xxxxxxxxx
+REACT_APP_NODE_PORT=8080
 ```
-Build the library.
+
+## Webpack 5
+
+1. Install `react-app-rewired` and the missing polyfills.
+
+    ```bash
+    yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
+    ```
+
+2. Create `config-overrides.js` in the root of your project and add the following:
+
+    ```js
+    const webpack = require("webpack");
+    
+    module.exports = function override(config) {
+      const fallback = config.resolve.fallback || {};
+      Object.assign(fallback, {
+        crypto: require.resolve("crypto-browserify"),
+        stream: require.resolve("stream-browserify"),
+        assert: require.resolve("assert"),
+        http: require.resolve("stream-http"),
+        https: require.resolve("https-browserify"),
+        os: require.resolve("os-browserify"),
+        url: require.resolve("url"),
+      });
+      config.resolve.fallback = fallback;
+      config.plugins = (config.plugins || []).concat([
+        new webpack.ProvidePlugin({
+          process: "process/browser",
+          Buffer: ["buffer", "Buffer"],
+        }),
+      ]);
+      return config;
+    };
+    ```
+
+3. Change your scripts in `package.json` to the following:
+
+    ```js
+    "scripts": {
+        "start": "react-app-rewired start",
+        "build": "react-app-rewired build",
+        "test": "react-app-rewired test",
+        "eject": "react-scripts eject"
+    },
+    ```
+
+## Local Development
+
+### Install dependencies
 
 ```bash
-yarn build
+yarn install
 ```
-### Webpack 5 issues
 
-Install `react-app-rewired` and the missing polyfills.
+### Demo in Storybook
 
 ```bash
-yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
-```
+yarn storybook
 
-Create `config-overrides.js` in the root of your project and add the following:
-
-```js
-const webpack = require("webpack");
-
-module.exports = function override(config) {
-  const fallback = config.resolve.fallback || {};
-  Object.assign(fallback, {
-    crypto: require.resolve("crypto-browserify"),
-    stream: require.resolve("stream-browserify"),
-    assert: require.resolve("assert"),
-    http: require.resolve("stream-http"),
-    https: require.resolve("https-browserify"),
-    os: require.resolve("os-browserify"),
-    url: require.resolve("url"),
-  });
-  config.resolve.fallback = fallback;
-  config.plugins = (config.plugins || []).concat([
-    new webpack.ProvidePlugin({
-      process: "process/browser",
-      Buffer: ["buffer", "Buffer"],
-    }),
-  ]);
-  return config;
-};
 ```
 
-Change your scripts in `package.json` to the following:
+### Build the library
+
+```bash
+yarn build
 ```
-"scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "eject": "react-scripts eject"
-},
-```
+
+## License
+
+See the [LICENSE](https://github.com/TxnLab/use-wallet/blob/main/LICENSE.md) file for license rights and limitations (MIT)

package/dist/cjs/clients/algosigner.d.ts

@@ -13,7 +13,7 @@ declare type AlgoSignerTransaction = {
     signers?: [];
     multisig?: string;
 };
-declare type SupportedLedgers = "MainNet" | "TestNet" | "BetaNet" | "devmodenet";
+declare type SupportedLedgers = "MainNet" | "TestNet" | "BetaNet" | string;
 declare type AlgoSigner = {
     connect: () => Promise<Record<string, never>>;
     accounts: (ledger: {

package/dist/cjs/clients/index.d.ts

@@ -1,5 +1,53 @@
 import { PROVIDER_ID } from "../constants";
 export declare const clients: {
+    "KMD Wallet": Promise<void | {
+        "__#6@#client": import("algosdk").Kmd;
+        walletId: string;
+        id: PROVIDER_ID;
+        provider: import("..").WalletProvider;
+        connect(): Promise<import("..").Wallet>;
+        disconnect(): Promise<void>;
+        reconnect(): Promise<import("..").Wallet | null>;
+        requestPassword(): Promise<string>;
+        getWalletToken(walletId: string, password: string): Promise<string>;
+        releaseToken(token: string): Promise<void>;
+        listWallets(): Promise<Record<string, string>>;
+        listAccounts(wallet: string, password: string): Promise<import("..").Account[]>;
+        signTransactions(activeAddress: string, transactions: Uint8Array[]): Promise<Uint8Array[]>;
+        signEncodedTransactions(transactions: import("..").TransactionsArray): Promise<Uint8Array[]>;
+        algodClient: import("algosdk").Algodv2;
+        algosdk: typeof import("algosdk/dist/types/src/main");
+        keepWCAlive: HTMLAudioElement;
+        healthCheck(): Promise<{}>;
+        getAccountInfo(address: string): Promise<import("..").AccountInfo>;
+        getAssets(address: string): Promise<import("..").Asset[]>;
+        waitForConfirmation(txId: string, timeout?: number): Promise<{
+            "confirmed-round": number;
+            "global-state-delta": Record<string, unknown>[];
+            "pool-error": string;
+            txn: {
+                sig: Uint8Array;
+                txn: import("..").Txn;
+            };
+            txId: string;
+        }>;
+        decodeTransaction: (txn: string, isSigned: boolean) => import("algosdk").Transaction;
+        logEncodedTransaction(txn: string, isSigned: boolean): void;
+        groupTransactionsBySender(transactions: import("..").TransactionsArray): Record<string, any>;
+        sendRawTransactions(transactions: Uint8Array[]): Promise<{
+            "confirmed-round": number;
+            "global-state-delta": Record<string, unknown>[];
+            "pool-error": string;
+            txn: {
+                sig: Uint8Array;
+                txn: import("..").Txn;
+            };
+            txId: string;
+            id: any;
+        }>;
+        keepWCAliveStart(): void;
+        keepWCAliveStop(): void;
+    }>;
     "Pera Wallet": Promise<void | {
         "__#1@#client": import("@perawallet/connect/dist/PeraWalletConnect").default;
         id: PROVIDER_ID;
@@ -109,7 +157,7 @@ export declare const clients: {
         "__#3@#client": {
             connect: () => Promise<Record<string, never>>;
             accounts: (ledger: {
-                ledger: "MainNet" | "TestNet" | "BetaNet" | "devmodenet";
+                ledger: string;
             }) => Promise<{
                 address: string;
             }[]>;
@@ -297,4 +345,62 @@ export declare const clients: {
         keepWCAliveStart(): void;
         keepWCAliveStop(): void;
     }>;
+    "Wallet Connect": Promise<void | {
+        "__#7@#client": import("@walletconnect/client").default;
+        id: PROVIDER_ID;
+        provider: import("..").WalletProvider;
+        connect(): Promise<import("..").Wallet>;
+        reconnect(): Promise<{
+            accounts: {
+                name: string;
+                address: string;
+                providerId: PROVIDER_ID;
+            }[];
+            id: PROVIDER_ID;
+            name: string;
+            icon: string;
+            isWalletConnect: boolean;
+        } | null>;
+        check(): boolean;
+        disconnect(): Promise<void>;
+        formatTransactionsArray(transactions: import("..").TransactionsArray): {
+            txn: string;
+            message?: string | undefined;
+            signers?: [] | string[] | undefined;
+        }[];
+        signTransactions(activeAdress: string, transactions: Uint8Array[]): Promise<Uint8Array[]>;
+        signEncodedTransactions(transactions: import("..").TransactionsArray): Promise<Uint8Array[]>;
+        algodClient: import("algosdk").Algodv2;
+        algosdk: typeof import("algosdk/dist/types/src/main");
+        keepWCAlive: HTMLAudioElement;
+        healthCheck(): Promise<{}>;
+        getAccountInfo(address: string): Promise<import("..").AccountInfo>;
+        getAssets(address: string): Promise<import("..").Asset[]>;
+        waitForConfirmation(txId: string, timeout?: number): Promise<{
+            "confirmed-round": number;
+            "global-state-delta": Record<string, unknown>[];
+            "pool-error": string;
+            txn: {
+                sig: Uint8Array;
+                txn: import("..").Txn;
+            };
+            txId: string;
+        }>;
+        decodeTransaction: (txn: string, isSigned: boolean) => import("algosdk").Transaction;
+        logEncodedTransaction(txn: string, isSigned: boolean): void;
+        groupTransactionsBySender(transactions: import("..").TransactionsArray): Record<string, any>;
+        sendRawTransactions(transactions: Uint8Array[]): Promise<{
+            "confirmed-round": number;
+            "global-state-delta": Record<string, unknown>[];
+            "pool-error": string;
+            txn: {
+                sig: Uint8Array;
+                txn: import("..").Txn;
+            };
+            txId: string;
+            id: any;
+        }>;
+        keepWCAliveStart(): void;
+        keepWCAliveStop(): void;
+    }>;
 };

package/dist/cjs/clients/kmd.d.ts

@@ -0,0 +1,32 @@
+import type { Kmd } from "algosdk";
+import BaseWallet from "./base";
+import type { InitAlgodClient } from "./base";
+import { PROVIDER_ID } from "../constants";
+import { providers } from "../providers";
+import type { Account, Wallet, WalletProvider } from "../types";
+import { TransactionsArray } from "../types";
+declare type InitWallet = {
+    client: Kmd;
+    id: PROVIDER_ID;
+    providers: typeof providers;
+};
+declare class KMDWallet extends BaseWallet {
+    #private;
+    walletId: string;
+    id: PROVIDER_ID;
+    provider: WalletProvider;
+    constructor(initAlgodClient: InitAlgodClient, initWallet: InitWallet);
+    static init(): Promise<KMDWallet>;
+    connect(): Promise<Wallet>;
+    disconnect(): Promise<void>;
+    reconnect(): Promise<Wallet | null>;
+    requestPassword(): Promise<string>;
+    getWalletToken(walletId: string, password: string): Promise<string>;
+    releaseToken(token: string): Promise<void>;
+    listWallets(): Promise<Record<string, string>>;
+    listAccounts(wallet: string, password: string): Promise<Array<Account>>;
+    signTransactions(activeAddress: string, transactions: Uint8Array[]): Promise<Uint8Array[]>;
+    signEncodedTransactions(transactions: TransactionsArray): Promise<Uint8Array[]>;
+}
+declare const _default: Promise<void | KMDWallet>;
+export default _default;

package/dist/cjs/clients/walletconnect.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Helpful resources:
+ * https://developer.algorand.org/docs/get-details/walletconnect/
+ */
+import type WalletConnect from "@walletconnect/client";
+import type { IWalletConnectOptions } from "@walletconnect/types";
+import type QRCodeModal from "algorand-walletconnect-qrcode-modal";
+import { providers } from "../providers";
+import type { WalletProvider, Wallet } from "../types/wallet";
+import { PROVIDER_ID } from "../constants";
+import BaseWallet from "./base";
+import type { InitAlgodClient } from "./base";
+import { TransactionsArray } from "../types/api";
+declare type WalletConnectTransaction = {
+    txn: string;
+    message?: string;
+    signers?: string[] | [];
+};
+declare type InitWallet = {
+    id: PROVIDER_ID;
+    walletConnect: typeof WalletConnect;
+    bridge: string;
+    qrcodeModal: typeof QRCodeModal;
+    WalletConnectOptions?: IWalletConnectOptions;
+    providers: typeof providers;
+};
+declare class WalletConnectClient extends BaseWallet {
+    #private;
+    id: PROVIDER_ID;
+    provider: WalletProvider;
+    constructor(initAlgodClient: InitAlgodClient, initWallet: InitWallet);
+    static init(): Promise<WalletConnectClient>;
+    connect(): Promise<Wallet>;
+    reconnect(): Promise<{
+        accounts: {
+            name: string;
+            address: string;
+            providerId: PROVIDER_ID;
+        }[];
+        id: PROVIDER_ID;
+        name: string;
+        icon: string;
+        isWalletConnect: boolean;
+    } | null>;
+    check(): boolean;
+    disconnect(): Promise<void>;
+    formatTransactionsArray(transactions: TransactionsArray): WalletConnectTransaction[];
+    signTransactions(activeAdress: string, transactions: Uint8Array[]): Promise<Uint8Array[]>;
+    signEncodedTransactions(transactions: TransactionsArray): Promise<Uint8Array[]>;
+}
+declare const _default: Promise<void | WalletConnectClient>;
+export default _default;

package/dist/cjs/constants/constants.d.ts

@@ -1,10 +1,18 @@
 export declare enum PROVIDER_ID {
+    KMD_WALLET = "KMD Wallet",
     PERA_WALLET = "Pera Wallet",
     MYALGO_WALLET = "MyAlgo Wallet",
     ALGO_SIGNER = "Algo Signer",
     DEFLY = "Defly",
-    EXODUS = "Exodus"
+    EXODUS = "Exodus",
+    WALLET_CONNECT = "Wallet Connect"
 }
 export declare const NODE_SERVER: string;
 export declare const NODE_TOKEN: string;
 export declare const NODE_PORT: string;
+export declare const NODE_NETWORK: string;
+export declare const KMD_HOST: string;
+export declare const KMD_TOKEN: string;
+export declare const KMD_PORT: string;
+export declare const KMD_WALLET: string;
+export declare const KMD_PASSWORD: string;

package/dist/cjs/hooks/useConnectWallet.d.ts

@@ -1,9 +1,14 @@
-import type { PROVIDER_ID } from "../types";
-export default function useConnectWallet(): {
+import { PROVIDER_ID } from "../types";
+declare type Options = Partial<{
+    providers: PROVIDER_ID[];
+}>;
+export default function useConnectWallet(options?: Options): {
     providers: {
         id: PROVIDER_ID;
         name: string;
         icon: string;
+        accounts: import("../types").Account[];
+        activeAccount: import("../types").Account | null;
         isActive: boolean;
         isConnected: boolean;
         isWalletConnect: boolean;
@@ -11,12 +16,15 @@ export default function useConnectWallet(): {
         disconnect: () => Promise<void>;
         reconnect: () => Promise<void>;
         setActive: () => Promise<void>;
+        selectAccount: (account: string) => Promise<void>;
     }[];
     activeAccount: import("../types").Account | null;
     accounts: import("../types").Account[];
     connect: (id: PROVIDER_ID) => Promise<void>;
     reconnect: (id: PROVIDER_ID) => Promise<void>;
     disconnect: (id: PROVIDER_ID) => Promise<void>;
+    selectActiveAccount: (providerId: PROVIDER_ID, address: string) => Promise<void>;
     setActive: (id: PROVIDER_ID) => Promise<void>;
     reconnectProviders: () => Promise<void>;
 };
+export {};

package/dist/cjs/hooks/useWallet.d.ts

@@ -1,9 +1,11 @@
+import algosdk from "algosdk";
 import { PROVIDER_ID } from "../types";
 import { TransactionsArray } from "../types";
 export { PROVIDER_ID };
 export default function useWallet(): {
     accounts: import("../types").Account[];
     activeAccount: import("../types").Account | null;
+    signer: algosdk.TransactionSigner;
     signTransactions: (transactions: Array<Uint8Array>) => Promise<Uint8Array[]>;
     sendTransactions: (transactions: Uint8Array[]) => Promise<import("../types").ConfirmedTxn & {
         id: string;