Metamask snap as web3 provider

packages/apps/public/locales/en/app-accounts.json

@@ -32,6 +32,7 @@
   "Change this account's password": "Change this account's password",
   "Claim tokens...": "Claim tokens...",
   "Clear expired democracy locks": "Clear expired democracy locks",
+  "Connect Metamask": "Connect Metamask",
   "Council": "Council",
   "Create": "Create",
   "Create a backup file for this account": "Create a backup file for this account",
@@ -287,4 +288,4 @@
   "website": "website",
   "your current password": "your current password",
   "your new password": "your new password"
-}
+}

packages/apps/public/locales/en/translation.json

@@ -110,6 +110,7 @@
   "Confirm claim": "",
   "Confirm code removal": "",
   "Confirm contract removal": "",
+  "Connect Metamask": "",
   "Constants": "",
   "Continue": "",
   "Conviction locks do overlap and is additive, meaning that funds locked during a previous vote can be locked again.": "",

packages/page-accounts/package.json

@@ -12,6 +12,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.10.5",
+    "@nodefactory/metamask-polkadot-adapter": "^0.4.0",
     "@polkadot/react-components": "0.51.0-beta.3",
     "@polkadot/vanitygen": "^0.17.1",
     "detect-browser": "^5.1.1",

packages/page-accounts/src/Accounts/index.tsx

@@ -5,7 +5,7 @@
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { Voting } from '@polkadot/types/interfaces';
 import { Delegation, SortedAccount } from '../types';
-
+import { BN_ZERO } from '@polkadot/util';
 import BN from 'bn.js';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
@@ -14,8 +14,6 @@ import { getLedger, isLedger } from '@polkadot/react-api';
 import { useApi, useAccounts, useCall, useFavorites, useIpfs, useToggle } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { Button, Input, Table } from '@polkadot/react-components';
-import { BN_ZERO } from '@polkadot/util';
-
 import { useTranslation } from '../translate';
 import CreateModal from './modals/Create';
 import ImportModal from './modals/Import';
@@ -26,6 +24,10 @@ import Account from './Account';
 import BannerClaims from './BannerClaims';
 import BannerExtension from './BannerExtension';
 import { sortAccounts } from '../util';
+import { web3Enable, web3FromSource } from '@polkadot/extension-dapp';
+import { injectMetamaskPolkadotSnapProvider } from '@nodefactory/metamask-polkadot-adapter';
+import { Keyring } from '@polkadot/keyring';
+import settings from '@polkadot/ui-settings';
 
 interface Balances {
   accounts: Record<string, BN>;
@@ -57,6 +59,23 @@ async function queryLedger (): Promise<void> {
   }
 }
 
+async function queryMetamask (): Promise<void> {
+  await web3Enable('polkadot-js/apps');
+  const metamaskExtension = await web3FromSource('metamask-polkadot-snap');
+
+  if (metamaskExtension) {
+    (await metamaskExtension.accounts.get()).forEach((account) => {
+      const accountKeyring = new Keyring();
+      const keyringPair = accountKeyring.addFromAddress(account.address, {
+        isInjected: true, source: 'metamask-polkadot-snap', tags: ['metamask']
+      });
+
+      keyring.saveAccount(keyringPair);
+    }
+    );
+  }
+}
+
 function Overview ({ className = '', onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
@@ -134,15 +153,15 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
 
   const footer = useMemo(() => (
     <tr>
-      <td colSpan={3} />
-      <td className='ui--media-1400' />
-      <td colSpan={2} />
-      <td className='ui--media-1500' />
+      <td colSpan={3}/>
+      <td className='ui--media-1400'/>
+      <td colSpan={2}/>
+      <td className='ui--media-1500'/>
       <td className='number'>
-        {balanceTotal && <FormatBalance value={balanceTotal} />}
+        {balanceTotal && <FormatBalance value={balanceTotal}/>}
       </td>
-      <td />
-      <td className='ui--media-1400' />
+      <td/>
+      <td className='ui--media-1400'/>
     </tr>
   ), [balanceTotal]);
 
@@ -158,10 +177,15 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
     </div>
   ), [filterOn, t]);
 
+  const connectMetamaskAccount = async (): Promise<void> => {
+    injectMetamaskPolkadotSnapProvider(settings.apiUrl.includes('kusama') ? 'kusama' : 'westend');
+    await queryMetamask();
+  };
+
   return (
     <div className={className}>
-      <BannerExtension />
-      <BannerClaims />
+      <BannerExtension/>
+      <BannerClaims/>
       {isCreateOpen && (
         <CreateModal
           onClose={toggleCreate}
@@ -231,6 +255,11 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
           label={t<string>('Proxied')}
           onClick={toggleProxy}
         />
+        <Button
+          icon='plus'
+          label={t('Connect Metamask')}
+          onClick={connectMetamaskAccount}
+        />
       </Button.Group>
       <Table
         empty={t<string>("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")}