@txnlab/use-wallet 0.0.1 → 0.0.3

package/README.md

@@ -4,6 +4,8 @@ React hooks for using Algorand compatible wallets with web applications.
 
 ### Quick Start
 
+If you're using Webpack 5 (most newer React projects), you need to install polyfills. Follow [these directions.](#webpack-5-issues)
+
 Install with Yarn.
 
 ```bash
@@ -34,13 +36,9 @@ Setup the wallet providers
 
 ```jsx
 import React from "react";
-import { useConnectWallet } from "../../index";
-
-type ConnectWalletProps = {
-  foo?: string;
-};
+import { useConnectWallet } from "@txnlab/use-wallet";
 
-export default function ConnectWallet(props: ConnectWalletProps) {
+function App() {
   const { providers, reconnectProviders, accounts, activeAccount } =
     useConnectWallet();
 
@@ -50,12 +48,13 @@ export default function ConnectWallet(props: ConnectWalletProps) {
   }, []);
 
   // Use these properties to display connected accounts to users.
+  // They are reactive and presisted to local storage.
   React.useEffect(() => {
     console.log("connected accounts", accounts);
     console.log("active account", activeAccount);
   });
 
-  // Map through the providers, and render "connect", "set active", and "disconnect" buttons
+  // Map through the providers, and render account information and "connect", "set active", and "disconnect" buttons
   return (
     <div>
       {providers.map((provider) => (
@@ -65,18 +64,15 @@ export default function ConnectWallet(props: ConnectWalletProps) {
             {provider.name} {provider.isActive && "[active]"}
           </h4>
           <div>
-            {/* If the wallet provider isn't connected, render a "connect" button */}
-            {!provider.isConnected && (
-              <button onClick={provider.connect}>Connect</button>
-            )}
-            {/* If the wallet provider is connected and active, render a "disconnect" button */}
-            {provider.isConnected && (
-              <button onClick={provider.disconnect}>Disonnect</button>
-            )}
-            {/* If the wallet provider is connected but not active, render a "set active" button */}
-            {provider.isConnected && !provider.isActive && (
-              <button onClick={provider.setActive}>Set Active</button>
-            )}
+            <button onClick={provider.connect} disabled={provider.isConnected}>
+              Connect
+            </button>
+            <button onClick={provider.disconnect} disabled={!provider.isConnected}>
+              Disonnect
+            </button>
+            <button onClick={provider.setActive} disabled={!provider.isConnected || provider.isActive}>
+              Set Active
+            </button>
           </div>
         </div>
       ))}
@@ -85,10 +81,16 @@ export default function ConnectWallet(props: ConnectWalletProps) {
 }
 ```
 
+Each provider has two connection states: `isConnected` and `isActive`.
+
+`isConnected` means that the user has authorized the provider to talk to the dApp. The connection flow does not need to be restarted when switching to this wallet from a different one.
+
+`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
 
 ```jsx
-const Wallet = (props: WalletProps) => {
+function Wallet() {
   const { activeAccount, signTransactions, sendTransactions } = useWallet();
 
   const sendTransaction = async (
@@ -102,6 +104,7 @@ const Wallet = (props: WalletProps) => {
 
     const params = await algodClient.getTransactionParams().do();
 
+  // Construct a transaction to be signed and sent. 
     const transaction = algosdk.makePaymentTxnWithSuggestedParamsFromObject({
       from,
       to,
@@ -109,9 +112,13 @@ const Wallet = (props: WalletProps) => {
       suggestedParams: params,
     });
 
+    // Encode the transactions into a byte array.
     const encodedTransaction = algosdk.encodeUnsignedTransaction(transaction);
+
+    // Sign the transactions.
     const signedTransactions = await signTransactions([encodedTransaction]);
 
+    // Send the transactions.
     const { id } = await sendTransactions(signedTransactions);
 
     console.log("Successfully sent transaction. Transaction ID: ", id);
@@ -141,3 +148,67 @@ const Wallet = (props: WalletProps) => {
   );
 };
 ```
+
+### Local Development
+
+Install dependencies.
+
+```bash
+yarn install
+```
+
+Demo the components in StoryBook.
+
+```bash
+yarn storybook
+
+```
+Build the library.
+
+```bash
+yarn build
+```
+### Webpack 5 issues
+
+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
+```
+
+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:
+```
+"scripts": {
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject"
+},
+```

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

@@ -5,6 +5,6 @@ export declare enum PROVIDER_ID {
     DEFLY = "Defly",
     EXODUS = "Exodus"
 }
-export declare const NODE_SERVER = "https://node.algoexplorerapi.io";
+export declare const NODE_SERVER = "https://mainnet-api.algonode.cloud";
 export declare const NODE_TOKEN = "";
 export declare const NODE_PORT = "";

package/dist/cjs/index.js

@@ -520,7 +520,7 @@ exports.PROVIDER_ID = void 0;
     PROVIDER_ID["DEFLY"] = "Defly";
     PROVIDER_ID["EXODUS"] = "Exodus";
 })(exports.PROVIDER_ID || (exports.PROVIDER_ID = {}));
-const NODE_SERVER = "https://node.algoexplorerapi.io";
+const NODE_SERVER = "https://mainnet-api.algonode.cloud";
 const NODE_TOKEN = "";
 const NODE_PORT = "";