Do not throw on useWeb3Injected if no metamask (#24)

Given that hooks cannot be used within conditionals, it's not possible to check whether there is an injected provider to conditionally call useWeb3Injected. To work around this, this commit changes its behaviour so it returns undefined instead of throwing if window.ethereum is not present.

src/context/providers.test.ts

@@ -14,6 +14,16 @@ describe('providers', (): void => {
 
     delete window.ethereum;
   });
+
+  it('returns undefined if no injected provider', async (): Promise<void> => {
+    const injected = providers.tryInjected();
+    expect(injected).toBeUndefined();
+  });
+
+  it('throws if no injected provider', async (): Promise<void> => {
+    expect(() => providers.injected()).toThrow('A web3 provider is not attached to a window.');
+  });
+
   it('create a provider from a connection', async (): Promise<void> => {
     const provider = providers.connection(localConnection);
 

src/context/providers.ts

@@ -12,19 +12,21 @@ export function connection(conn: string): Provider {
   return new Web3(conn).currentProvider;
 }
 
-export function injected(): Provider {
-  // Detect whether the current browser is ethereum-compatible,
-  // and throw an error if it is not
-  if (window.ethereum === undefined) {
-    throw new Error('A web3 provider is not attached to a window.');
-  }
-
+export function tryInjected(): Provider | undefined {
+  // Detect whether the current browser is ethereum-compatible
+  if (window.ethereum === undefined) return undefined;
   const provider = window.ethereum as ExtendedProvider;
 
-  // disable auto refresh if possible
+  // Disable auto refresh if possible
   if (provider.autoRefreshOnNetworkChange === true) {
     provider.autoRefreshOnNetworkChange = false;
   }
 
   return provider;
 }
+
+export function injected(): Provider {
+  const provider = tryInjected();
+  if (!provider) throw new Error('A web3 provider is not attached to a window.');
+  return provider;
+}

src/react/useWeb3Hook.ts

@@ -38,8 +38,9 @@ export function useWeb3Context(provider: Provider, options?: Web3ContextOptions)
   return context;
 }
 
-export function useWeb3Injected(options?: Web3ContextOptions): Web3Context {
-  const [provider] = useState((): Provider => providers.injected());
+export function useWeb3Injected(options?: Web3ContextOptions): Web3Context | undefined {
+  const [provider] = useState((): Provider | undefined => providers.tryInjected());
+  if (!provider) return undefined;
   return useWeb3Context(provider, options);
 }