Adapt app for metamask integration extension

package.json

@@ -102,5 +102,13 @@
     "stylelint-config-styled-components": "^0.1.1",
     "webpack": "^5.42.0",
     "webpack-cli": "^4.7.2"
+  },
+  "dependencies": {
+    "@metamask/detect-provider": "^1.2.0",
+    "assert": "^2.0.0",
+    "https-browserify": "^1.0.0",
+    "os-browserify": "^0.3.0",
+    "stream-http": "^3.2.0",
+    "web3": "^1.3.5"
   }
 }

packages/apps-config/package.json

@@ -26,7 +26,7 @@
     "@sora-substrate/type-definitions": "1.3.34",
     "@subsocial/types": "0.5.9-dev.2",
     "@zeitgeistpm/type-defs": "0.2.0",
-    "moonbeam-types-bundle": "1.1.26",
+    "moonbeam-types-bundle": "1.1.27",
     "pontem-types-bundle": "1.0.5",
     "rxjs": "^7.2.0"
   },

packages/apps/webpack.base.cjs

@@ -169,7 +169,11 @@ function createWebpack (context, mode = 'production') {
       },
       extensions: ['.js', '.jsx', '.mjs', '.ts', '.tsx'],
       fallback: {
+        assert: require.resolve('assert'),
         crypto: require.resolve('crypto-browserify'),
+        http: require.resolve('stream-http'),
+        https: require.resolve('https-browserify'),
+        os: require.resolve('os-browserify/browser'),
         path: require.resolve('path-browserify'),
         stream: require.resolve('stream-browserify')
       }

packages/react-api/src/Api.tsx

@@ -5,6 +5,7 @@ import type BN from 'bn.js';
 import type { InjectedExtension } from '@polkadot/extension-inject/types';
 import type { ChainProperties, ChainType } from '@polkadot/types/interfaces';
 import type { KeyringStore } from '@polkadot/ui-keyring/types';
+import type { KeypairType } from '@polkadot/util-crypto/types';
 import type { ApiProps, ApiState } from './types';
 
 import { Detector } from '@substrate/connect';
@@ -40,7 +41,9 @@ interface InjectedAccountExt {
     name: string;
     source: string;
     whenCreated: number;
+    genesisHash?: string | null;
   };
+  type: KeypairType
 }
 
 interface ChainData {
@@ -80,16 +83,16 @@ function getDevTypes (): Record<string, Record<string, string>> {
 async function getInjectedAccounts (injectedPromise: Promise<InjectedExtension[]>): Promise<InjectedAccountExt[]> {
   try {
     await injectedPromise;
+    const accounts = (await web3Accounts()) as InjectedAccountExt[]; // TODO-MOONBEAM: web3Accounts should be updated to return the right type
 
-    const accounts = await web3Accounts();
-
-    return accounts.map(({ address, meta }, whenCreated): InjectedAccountExt => ({
+    return accounts.map(({ address, meta, type }, whenCreated): InjectedAccountExt => ({
       address,
       meta: {
         ...meta,
         name: `${meta.name || 'unknown'} (${meta.source === 'polkadot-js' ? 'extension' : meta.source})`,
         whenCreated
-      }
+      },
+      type: type || 'sr25519'
     }));
   } catch (error) {
     console.error('web3Accounts', error);