Map error type to message

components/account/WalletSelect.tsx

@@ -63,9 +63,10 @@ const WalletSelect = () => {
               )}
               {hasError && (
                 <div className="text-vermilion ml-auto  text-ztg-12-120 w-ztg-275">
-                  {error.type === "NoAccounts"
-                    ? "No accounts on this wallet. Please add account in wallet extension."
-                    : "Not allowed to interact with extension. Please change permission settings."}
+                  {error.type === "NoAccounts" &&
+                    "No accounts on this wallet. Please add account in wallet extension."}
+                  {error.type === "InteractionDenied" &&
+                    "Not allowed to interact with extension. Please change permission settings."}
                 </div>
               )}
             </div>

lib/state/wallet.ts

@@ -14,7 +14,7 @@ import {
 import { cryptoWaitReady } from "@polkadot/util-crypto";
 import { InjectedAccount } from "@polkadot/extension-inject/types";
 import { isPresent } from "lib/types";
-import { PollingTimeout, poll } from "@zeitgeistpm/avatara-util";
+import { PollingTimeout, poll } from "lib/util/poll";
 
 const DAPP_NAME = "zeitgeist";
 
@@ -225,15 +225,15 @@ const enableWallet = async (walletId: string) => {
   }
 
   const enablePoll = async (): Promise<void> => {
-    await cryptoWaitReady();
     try {
       const extension = await poll(
         async () => {
+          await cryptoWaitReady();
           await wallet.enable(DAPP_NAME);
           return wallet;
         },
         {
-          intervall: 66,
+          interval: 66,
           timeout: 10_000,
         },
       );

lib/util/poll.spec.ts

@@ -0,0 +1,34 @@
+import { poll, PollingTimeout } from "./poll";
+
+describe("poll", () => {
+  test("should only call input function once if it succeeds", async () => {
+    const testFn = jest.fn(async () => {
+      return new Promise((resolve) => {
+        resolve("foo");
+      });
+    });
+
+    const res = await poll(testFn, {
+      interval: 50,
+      timeout: 1000,
+    });
+
+    expect(res).toEqual("foo");
+    expect(testFn).toHaveBeenCalledTimes(1);
+  });
+
+  test("should call function at least twice and timeout", async () => {
+    const testFn = jest.fn(async () => {
+      throw new Error("1) What");
+    });
+
+    const res = await poll(testFn, {
+      interval: 1,
+      timeout: 100,
+    });
+
+    expect(res).toEqual(PollingTimeout);
+    expect(testFn).toHaveBeenNthCalledWith(1);
+    expect(testFn).toHaveBeenNthCalledWith(2);
+  });
+});

lib/util/poll.ts

@@ -0,0 +1,49 @@
+import { delay } from "./delay";
+
+/**
+ * Static literal symbol for a timed out polling try.
+ */
+export const PollingTimeout = "timeout";
+export type PollingTimeout = typeof PollingTimeout;
+
+/**
+ * @generic T type of the returned value
+ * @param fn () => Promise T - the fn called to poll for values
+ * @param opts.timeout number - how long to try total from start to finish.
+ * @param opts.interval number - the time between tries.
+ * @param opts.retries number - number of retries.
+ * @param opts.validator (value: T) => Promise<boolean> - check the value returned from the fn
+ * @returns Promise T | PollingTimeout | null
+ */
+export const poll = async <T>(
+  fn: () => Promise<T | null | PollingTimeout>,
+  opts: {
+    timeout: number;
+    interval: number;
+    validator?: (value: T | null | PollingTimeout) => Promise<boolean>;
+  },
+): Promise<T | null | PollingTimeout> => {
+  if (opts.timeout <= 0) {
+    return PollingTimeout;
+  }
+
+  const start = Date.now();
+
+  try {
+    const value = await fn();
+    if (value && (!opts.validator || (await opts.validator(value)))) {
+      return value;
+    }
+  } catch {
+    await delay(opts.interval);
+
+    const end = Date.now();
+
+    return poll<T>(fn, { ...opts, timeout: opts.timeout - (end - start) });
+  }
+  await delay(opts.interval);
+
+  const end = Date.now();
+
+  return poll<T>(fn, { ...opts, timeout: opts.timeout - (end - start) });
+};