feat: move init functions to utils directory

Author: gabrielkuettel

src/components/Example/Connect.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import useWallet from "../../hooks/useWallet";
+import { useWallet } from "../../index";
 
 export default function ConnectWallet() {
   const {
@@ -48,16 +48,18 @@ export default function ConnectWallet() {
                 Set Active
               </button>
               <div>
-                {provider.isActive && provider.accounts.length && (
+                {provider.isActive && provider.accounts.length ? (
                   <select
                     value={activeAccount?.address}
                     onChange={(e) => provider.setActiveAccount(e.target.value)}
                   >
                     {provider.accounts.map((account) => (
-                      <option value={account.address}>{account.address}</option>
+                      <option key={account.address} value={account.address}>
+                        {account.address}
+                      </option>
                     ))}
                   </select>
-                )}
+                ) : null}
               </div>
             </div>
           </div>

src/components/Example/Example.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect } from "react";
-import { reconnectProviders, initializeProviders } from "../../hooks/useWallet";
-import WalletProvider from "../../store/state/clientStore";
+import {
+  reconnectProviders,
+  initializeProviders,
+  WalletProvider,
+} from "../../index";
 import Account from "./Account";
 import Connect from "./Connect";
 import Transact from "./Transact";

src/hooks/index.ts

@@ -1,2 +1 @@
-export { initializeProviders, reconnectProviders } from "./useWallet";
 export { default as useWallet } from "./useWallet";

src/hooks/useWallet.ts

@@ -2,83 +2,10 @@ import { useMemo, useContext } from "react";
 import type algosdk from "algosdk";
 import { getAlgosdk } from "../algod";
 import { useWalletStore, walletStoreSelector } from "../store/index";
-import {
-  PROVIDER_ID,
-  TransactionsArray,
-  WalletClient,
-  Network,
-} from "../types";
+import { PROVIDER_ID, TransactionsArray, WalletClient } from "../types";
 import { ClientContext } from "../store/state/clientStore";
 import allClients from "../clients";
 import shallow from "zustand/shallow";
-import {
-  DEFAULT_NODE_BASEURL,
-  DEFAULT_NODE_TOKEN,
-  DEFAULT_NODE_PORT,
-  DEFAULT_NETWORK,
-} from "../constants";
-
-type SupportedProviders = { [x: string]: Promise<WalletClient | null> };
-
-type NodeConfig = {
-  network: Network;
-  nodeServer: string;
-  nodeToken?: string;
-  nodePort?: string;
-};
-
-export const initializeProviders = (
-  providers?: PROVIDER_ID[],
-  nodeConfig?: NodeConfig,
-  algosdkStatic?: typeof algosdk
-) => {
-  const initializedProviders: SupportedProviders = {};
-
-  const {
-    network = DEFAULT_NETWORK,
-    nodeServer = DEFAULT_NODE_BASEURL,
-    nodePort = DEFAULT_NODE_PORT,
-    nodeToken = DEFAULT_NODE_TOKEN,
-  } = nodeConfig || {};
-
-  if (!providers || providers.length === 0)
-    for (const [id, client] of Object.entries(allClients)) {
-      if (id === "kmd") {
-        continue;
-      }
-
-      initializedProviders[id] = client.init({
-        network,
-        algodOptions: [nodeToken, nodeServer, nodePort],
-        algosdkStatic: algosdkStatic,
-      });
-    }
-
-  if (providers) {
-    for (const id of providers) {
-      initializedProviders[id] = allClients[id].init({
-        network,
-        algodOptions: [nodeToken, nodeServer, nodePort],
-        algosdkStatic: algosdkStatic,
-      });
-    }
-  }
-
-  return initializedProviders;
-};
-
-export const reconnectProviders = async (providers: SupportedProviders) => {
-  try {
-    const clients = Object.values(providers);
-
-    for (const client of clients) {
-      const c = await client;
-      c?.reconnect(c?.disconnect);
-    }
-  } catch (e) {
-    console.error(e);
-  }
-};
 
 export { PROVIDER_ID };
 

src/index.ts

@@ -1,4 +1,5 @@
-export { useWallet, initializeProviders, reconnectProviders } from "./hooks";
+export { useWallet } from "./hooks";
+export { initializeProviders, reconnectProviders } from "./utils";
 export { WalletProvider } from "./store";
 export * from "./constants";
 export * from "./types";

src/utils/index.ts

@@ -0,0 +1,2 @@
+export { initializeProviders } from "./initializeProviders";
+export { reconnectProviders } from "./reconnectProviders";

src/utils/initializeProviders.ts

@@ -0,0 +1,58 @@
+import type algosdk from "algosdk";
+import { PROVIDER_ID, WalletClient, Network } from "../types";
+import allClients from "../clients";
+import {
+  DEFAULT_NODE_BASEURL,
+  DEFAULT_NODE_TOKEN,
+  DEFAULT_NODE_PORT,
+  DEFAULT_NETWORK,
+} from "../constants";
+
+type SupportedProviders = { [x: string]: Promise<WalletClient | null> };
+
+type NodeConfig = {
+  network: Network;
+  nodeServer: string;
+  nodeToken?: string;
+  nodePort?: string;
+};
+
+export const initializeProviders = (
+  providers?: PROVIDER_ID[],
+  nodeConfig?: NodeConfig,
+  algosdkStatic?: typeof algosdk
+) => {
+  const initializedProviders: SupportedProviders = {};
+
+  const {
+    network = DEFAULT_NETWORK,
+    nodeServer = DEFAULT_NODE_BASEURL,
+    nodePort = DEFAULT_NODE_PORT,
+    nodeToken = DEFAULT_NODE_TOKEN,
+  } = nodeConfig || {};
+
+  if (!providers || providers.length === 0)
+    for (const [id, client] of Object.entries(allClients)) {
+      if (id === "kmd") {
+        continue;
+      }
+
+      initializedProviders[id] = client.init({
+        network,
+        algodOptions: [nodeToken, nodeServer, nodePort],
+        algosdkStatic: algosdkStatic,
+      });
+    }
+
+  if (providers) {
+    for (const id of providers) {
+      initializedProviders[id] = allClients[id].init({
+        network,
+        algodOptions: [nodeToken, nodeServer, nodePort],
+        algosdkStatic: algosdkStatic,
+      });
+    }
+  }
+
+  return initializedProviders;
+};

src/utils/reconnectProviders.ts

@@ -0,0 +1,16 @@
+import { WalletClient } from "../types";
+
+type SupportedProviders = { [x: string]: Promise<WalletClient | null> };
+
+export const reconnectProviders = async (providers: SupportedProviders) => {
+  try {
+    const clients = Object.values(providers);
+
+    for (const client of clients) {
+      const c = await client;
+      c?.reconnect(c?.disconnect);
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};