Add metamask extension web3

packages/extension-dapp/package.json

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

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

@@ -1,11 +1,13 @@
 // 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()
+    singleSource(),
+    initMetaMaskSource()
   ]).then((): boolean => true);
 }

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

@@ -0,0 +1,103 @@
+// 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 {
+  web3: Web3; // TODO: this could probably be removed
+  // 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 SingleSource to window.injectedWeb3
+function injectMetaMaskWeb3 (win: Web3Window): void {
+  // decorate the compat interface
+  win.injectedWeb3.Web3Source = {
+    enable: async (_: string): 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[]> => {
+            console.log('fetching accounts');
+
+            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: win.web3.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

@@ -31,7 +31,8 @@ interface SingleWindow extends InjectedWindow {
 function transformAccounts (accounts: SingleSourceAccount[]): InjectedAccount[] {
   return accounts.map(({ address, name }): InjectedAccount => ({
     address,
-    name
+    name,
+    type: 'ethereum'
   }));
 }
 
@@ -73,15 +74,16 @@ 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;
+    // window.addEventListener('load', (): void => {
+    console.log('loading singlesource');
+    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);
+    }
+    // });
   });
 }

packages/extension-dapp/src/index.ts

@@ -3,9 +3,11 @@
 
 import type { Injected, InjectedAccount, InjectedAccountWithMeta, InjectedExtension, InjectedExtensionInfo, InjectedProviderWithMeta, InjectedWindow, ProviderList, Unsubcall, Web3AccountsOptions } from '@polkadot/extension-inject/types';
 
+import { Signer } from '@polkadot/api/types';
 import { u8aEq } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
+import initCompat from './compat';
 import { documentReadyPromise } from './util';
 
 // just a helper (otherwise we cast all-over, so shorter and more readable)
@@ -25,15 +27,19 @@ function throwError (method: string): never {
 }
 
 // internal helper to map from Array<InjectedAccount> -> Array<InjectedAccountWithMeta>
-function mapAccounts (source: string, list: InjectedAccount[], ss58Format?: number): InjectedAccountWithMeta[] {
-  return list.map(({ address, genesisHash, name }): InjectedAccountWithMeta => {
-    const encodedAddress = encodeAddress(decodeAddress(address), ss58Format);
-
-    return ({
-      address: encodedAddress,
-      meta: { genesisHash, name, source }
-    });
-  });
+function mapAccounts (source: string, list: InjectedAccount[], signer: Signer, ss58Format?: number): InjectedAccountWithMeta[] {
+  return list.map(
+    ({ address, genesisHash, name, type }): InjectedAccountWithMeta => {
+      const encodedAddress = address.length === 42 ? address : encodeAddress(decodeAddress(address), ss58Format);
+
+      return {
+        address: encodedAddress,
+        meta: { genesisHash, name, source },
+        signer,
+        type: type || 'ethereum'
+      };
+    }
+  );
 }
 
 // have we found a properly constructed window.injectedWeb3
@@ -46,13 +52,14 @@ export { isWeb3Injected, web3EnablePromise };
 
 function getWindowExtensions (originName: string): Promise<[InjectedExtensionInfo, Injected | void][]> {
   return Promise.all(
-    Object.entries(win.injectedWeb3).map(([name, { enable, version }]): Promise<[InjectedExtensionInfo, Injected | void]> =>
-      Promise.all([
-        Promise.resolve({ name, version }),
-        enable(originName).catch((error: Error): void => {
-          console.error(`Error initializing ${name}: ${error.message}`);
-        })
-      ])
+    Object.entries(win.injectedWeb3).map(
+      ([name, { enable, version }]): Promise<[InjectedExtensionInfo, Injected | void]> =>
+        Promise.all([
+          Promise.resolve({ name, version }),
+          enable(originName).catch((error: Error): void => {
+            console.error(`Error initializing ${name}: ${error.message}`);
+          })
+        ])
     )
   );
 }
@@ -63,35 +70,42 @@ export function web3Enable (originName: string): Promise<InjectedExtension[]> {
     throw new Error('You must pass a name for your app to the web3Enable function');
   }
 
-  web3EnablePromise = documentReadyPromise((): Promise<InjectedExtension[]> =>
-    getWindowExtensions(originName)
-      .then((values): InjectedExtension[] =>
-        values
-          .filter((value): value is [InjectedExtensionInfo, Injected] => !!value[1])
-          .map(([info, ext]): InjectedExtension => {
-            // if we don't have an accounts subscriber, add a single-shot version
-            if (!ext.accounts.subscribe) {
-              ext.accounts.subscribe = (cb: (accounts: InjectedAccount[]) => void | Promise<void>): Unsubcall => {
-                ext.accounts.get().then(cb).catch(console.error);
-
-                return (): void => {
-                  // no ubsubscribe needed, this is a single-shot
-                };
-              };
-            }
-
-            return { ...info, ...ext };
+  web3EnablePromise = documentReadyPromise(
+    (): Promise<InjectedExtension[]> =>
+      initCompat().then(() =>
+        getWindowExtensions(originName)
+          .then((values): InjectedExtension[] =>
+            values
+              .filter((value): value is [InjectedExtensionInfo, Injected] => !!value[1])
+              .map(
+                ([info, ext]): InjectedExtension => {
+                  // if we don't have an accounts subscriber, add a single-shot version
+                  if (!ext.accounts.subscribe) {
+                    ext.accounts.subscribe = (cb: (accounts: InjectedAccount[]) => void | Promise<void>): Unsubcall => {
+                      ext.accounts.get().then(cb).catch(console.error);
+
+                      return (): void => {
+                        // no ubsubscribe needed, this is a single-shot
+                      };
+                    };
+                  }
+
+                  return { ...info, ...ext };
+                }
+              )
+          )
+          .catch((): InjectedExtension[] => [])
+          .then((values): InjectedExtension[] => {
+            const names = values.map(({ name, version }): string => `${name}/${version}`);
+
+            isWeb3Injected = web3IsInjected();
+            console.log(
+              `web3Enable: Enabled ${values.length} extension${values.length !== 1 ? 's' : ''}: ${names.join(', ')}`
+            );
+
+            return values;
           })
       )
-      .catch((): InjectedExtension[] => [])
-      .then((values): InjectedExtension[] => {
-        const names = values.map(({ name, version }): string => `${name}/${version}`);
-
-        isWeb3Injected = web3IsInjected();
-        console.log(`web3Enable: Enabled ${values.length} extension${values.length !== 1 ? 's' : ''}: ${names.join(', ')}`);
-
-        return values;
-      })
   );
 
   return web3EnablePromise;
@@ -104,18 +118,22 @@ export async function web3Accounts ({ ss58Format }: Web3AccountsOptions = {}): P
   }
 
   const accounts: InjectedAccountWithMeta[] = [];
-  const injected = await web3EnablePromise;
+  const injected: InjectedExtension[] = await web3EnablePromise;
   const retrieved = await Promise.all(
-    injected.map(async ({ accounts, name: source }): Promise<InjectedAccountWithMeta[]> => {
-      try {
-        const list = await accounts.get();
-
-        return mapAccounts(source, list, ss58Format);
-      } catch (error) {
-        // cannot handle this one
-        return [];
+    injected.map(
+      async ({ accounts, name: source, signer }): Promise<InjectedAccountWithMeta[]> => {
+        try {
+          const list = await accounts.get();
+
+          console.log('web3Accounts call res', list);
+
+          return mapAccounts(source, list, signer, ss58Format);
+        } catch (error) {
+          // cannot handle this one
+          return [];
+        }
       }
-    })
+    )
   );
 
   retrieved.forEach((result): void => {
@@ -124,35 +142,43 @@ export async function web3Accounts ({ ss58Format }: Web3AccountsOptions = {}): P
 
   const addresses = accounts.map(({ address }): string => address);
 
-  console.log(`web3Accounts: Found ${accounts.length} address${accounts.length !== 1 ? 'es' : ''}: ${addresses.join(', ')}`);
+  console.log(
+    `web3Accounts: Found ${accounts.length} address${accounts.length !== 1 ? 'es' : ''}: ${addresses.join(', ')}`
+  );
 
   return accounts;
 }
 
-export async function web3AccountsSubscribe (cb: (accounts: InjectedAccountWithMeta[]) => void | Promise<void>, { ss58Format }: Web3AccountsOptions = {}): Promise<Unsubcall> {
+export async function web3AccountsSubscribe (
+  cb: (accounts: InjectedAccountWithMeta[]) => void | Promise<void>,
+  { ss58Format }: Web3AccountsOptions = {}
+): Promise<Unsubcall> {
   if (!web3EnablePromise) {
     return throwError('web3AccountsSubscribe');
   }
 
   const accounts: Record<string, InjectedAccount[]> = {};
 
-  const triggerUpdate = (): void | Promise<void> => cb(
-    Object
-      .entries(accounts)
-      .reduce((result: InjectedAccountWithMeta[], [source, list]): InjectedAccountWithMeta[] => {
-        result.push(...mapAccounts(source, list, ss58Format));
+  const triggerUpdate = (): void | Promise<void> =>
+    cb(
+      Object.entries(accounts).reduce(
+        (result: InjectedAccountWithMeta[], [source, list]): InjectedAccountWithMeta[] => {
+          result.push(...mapAccounts(source, list, result[0].signer, ss58Format));
 
-        return result;
-      }, [])
-  );
+          return result;
+        },
+        []
+      )
+    );
 
-  const unsubs = (await web3EnablePromise).map(({ accounts: { subscribe }, name: source }): Unsubcall =>
-    subscribe((result): void => {
-      accounts[source] = result;
+  const unsubs = (await web3EnablePromise).map(
+    ({ accounts: { subscribe }, name: source }): Unsubcall =>
+      subscribe((result): void => {
+        accounts[source] = result;
 
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      triggerUpdate();
-    })
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        triggerUpdate();
+      })
   );
 
   return (): void => {