Add metamask extension web3

packages/extension-base/src/background/handlers/Tabs.ts

@@ -30,7 +30,7 @@ function transformAccounts (accounts: SubjectInfo, anyType = false): InjectedAcc
       address,
       genesisHash,
       name,
-      type
+      type: type || undefined
     }));
 }
 

packages/extension-dapp/package.json

@@ -9,9 +9,11 @@
   "sideEffects": false,
   "dependencies": {
     "@babel/runtime": "^7.14.6",
+    "@metamask/detect-provider": "^1.2.0",
     "@polkadot/extension-inject": "^0.39.2-0",
     "@polkadot/util": "^7.0.2",
-    "@polkadot/util-crypto": "^7.0.2"
+    "@polkadot/util-crypto": "^7.0.2",
+    "web3": "^1.3.0"
   },
   "peerDependencies": {
     "@polkadot/api": "*",

packages/extension-dapp/src/compat/index.ts

@@ -1,11 +1,15 @@
 // Copyright 2019-2021 @polkadot/extension-dapp authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import initMetaMaskSource from './metaMaskSource';
 import singleSource from './singleSource';
 
 // initialize all the compatibility engines
 export default function initCompat (): Promise<boolean> {
   return Promise.all([
-    singleSource()
-  ]).then((): boolean => true);
+    singleSource(),
+    initMetaMaskSource()
+  ]).then((): boolean => {
+    return true;
+  });
 }

packages/extension-dapp/src/compat/metaMaskSource.ts

@@ -0,0 +1,100 @@
+// Copyright 2019-2020 @polkadot/extension-dapp authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Injected, InjectedAccount, InjectedWindow } from '@polkadot/extension-inject/types';
+
+import detectEthereumProvider from '@metamask/detect-provider';
+import Web3 from 'web3';
+
+import { SignerPayloadRaw, SignerResult } from '@polkadot/types/types';
+
+interface RequestArguments {
+  method: string;
+  params?: unknown[];
+}
+
+interface EthRpcSubscription {
+  unsubscribe: () => void
+}
+
+interface EthereumProvider {
+  request: (args: RequestArguments) => Promise<any>;
+  isMetaMask: boolean;
+  on: (name: string, cb: any) => EthRpcSubscription;
+}
+
+interface Web3Window extends InjectedWindow {
+  // this is injected by metaMask
+  ethereum: any;
+}
+
+function isMetaMaskProvider (prov: unknown): EthereumProvider {
+  if (prov !== null) {
+    return (prov as EthereumProvider);
+  } else {
+    throw new Error('Injected provider is not MetaMask');
+  }
+}
+
+// transfor the Web3 accounts into a simple address/name array
+function transformAccounts (accounts: string[]): InjectedAccount[] {
+  return accounts.map((acc, i) => {
+    return { address: acc, name: 'MetaMask Address #' + i.toString(), type: 'ethereum' };
+  });
+}
+
+// add a compat interface of metaMaskSource to window.injectedWeb3
+function injectMetaMaskWeb3 (win: Web3Window): void {
+  // decorate the compat interface
+  win.injectedWeb3.Web3Source = {
+    enable: async (): Promise<Injected> => {
+      // win.web3 = new Web3(win.ethereum);
+
+      const providerRaw: unknown = await detectEthereumProvider({ mustBeMetaMask: true });
+      const provider: EthereumProvider = isMetaMaskProvider(providerRaw);
+
+      await provider.request({ method: 'eth_requestAccounts' });
+
+      return {
+        accounts: {
+          get: async (): Promise<InjectedAccount[]> => {
+            return transformAccounts(await provider.request({ method: 'eth_requestAccounts' }));
+          },
+          subscribe: (cb: (accounts: InjectedAccount[]) => void): (() => void) => {
+            const sub = provider.on('accountsChanged', function (accounts: string[]) {
+              cb(transformAccounts(accounts));
+            });
+            // TODO: add onchainchanged
+
+            return (): void => {
+              sub.unsubscribe();
+            };
+          }
+        },
+        signer: {
+          signRaw: async (raw: SignerPayloadRaw): Promise<SignerResult> => {
+            const signature = (await provider.request({ method: 'eth_sign', params: [raw.address, Web3.utils.sha3(raw.data)] })as string);
+
+            return { id: 0, signature };
+          }
+        }
+      };
+    },
+    version: '0' // TODO: win.ethereum.version
+  };
+}
+
+// returns the MetaMask source instance, as per
+// https://github.com/cennznet/singlesource-extension/blob/f7cb35b54e820bf46339f6b88ffede1b8e140de0/react-example/src/App.js#L19
+export default function initMetaMaskSource (): Promise<boolean> {
+  return new Promise((resolve): void => {
+    const win = window as Window & Web3Window;
+
+    if (win.ethereum) {
+      injectMetaMaskWeb3(win);
+      resolve(true);
+    } else {
+      resolve(false);
+    }
+  });
+}

packages/extension-dapp/src/compat/singleSource.ts

@@ -27,7 +27,7 @@ interface SingleWindow extends InjectedWindow {
   SingleSource: SingleSource;
 }
 
-// transfor the SingleSource accounts into a simple address/name array
+// transform the SingleSource accounts into a simple address/name array
 function transformAccounts (accounts: SingleSourceAccount[]): InjectedAccount[] {
   return accounts.map(({ address, name }): InjectedAccount => ({
     address,
@@ -73,15 +73,13 @@ function injectSingleSource (win: SingleWindow): void {
 // https://github.com/cennznet/singlesource-extension/blob/f7cb35b54e820bf46339f6b88ffede1b8e140de0/react-example/src/App.js#L19
 export default function initSingleSource (): Promise<boolean> {
   return new Promise((resolve): void => {
-    window.addEventListener('load', (): void => {
-      const win = window as Window & SingleWindow;
+    const win = window as Window & SingleWindow;
 
-      if (win.SingleSource) {
-        injectSingleSource(win);
-        resolve(true);
-      } else {
-        resolve(false);
-      }
-    });
+    if (win.SingleSource) {
+      injectSingleSource(win);
+      resolve(true);
+    } else {
+      resolve(false);
+    }
   });
 }