Add metamask extension web3 #566

joelamouche · 2020-12-08T13:38:20Z

Create injectMetaMaskWeb3 function to inject MetaMask accounts and allow signing Tx
First sends a request to MM to ask the user to authorize the app
Metamask accounts are now displayed in the accounts section
User can use theses accounts to sign tx
Signing will trigger a MM window with a warning (because signing unprefixed messages is dangerous)

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

joelamouche · 2020-12-10T16:05:37Z

updated with current state of my modifs

transfer get stuck here:

joelamouche · 2021-05-05T15:58:59Z

MetaMask integration is back 🥳 @jacogr

After a long inquiry, I discovered that eth_sign (unprefixed) is available.
Here is a working test: https://github.com/joelamouche/test-dapp/tree/testEthSign

joelamouche · 2021-05-05T16:05:25Z

@jacogr There is a problem though: when I run yarn polkadot-dev-copy-to apps in extensions, and then yarn start in apps, I get:

ERROR in ../../node_modules/@polkadot/extension-dapp/compat/Web3Source.js 7:0-24
<e> Module not found: Error: Can't resolve 'web3' in '/Users/antoineestienne/Github_Files/apps/node_modules/@polkadot/extension-dapp/compat'
<e> resolve 'web3' in '/Users/antoineestienne/Github_Files/apps/node_modules/@polkadot/extension-dapp/compat'
<e>   Parsed request is a module
<e>   using description file: /Users/antoineestienne/Github_Files/apps/node_modules/@polkadot/extension-dapp/package.json (relative path: ./compat)
<e>     Field 'browser' doesn't contain a valid alias configuration
<e>     resolve as module
<e>       /Users/antoineestienne/Github_Files/apps/node_modules/@polkadot/extension-dapp/compat/node_modules doesn't exist or is not a directory
<e>       /Users/antoineestienne/Github_Files/apps/node_modules/@polkadot/extension-dapp/node_modules doesn't exist or is not a directory
<e>       /Users/antoineestienne/Github_Files/apps/node_modules/@polkadot/node_modules doesn't exist or is not a directory
<e>       /Users/antoineestienne/Github_Files/apps/node_modules/node_modules doesn't exist or is not a directory
<e>       looking for modules in /Users/antoineestienne/Github_Files/apps/node_modules
<e>         single file module
<e>           using description file: /Users/antoineestienne/Github_Files/apps/package.json (relative path: ./node_modules/web3)
<e>             no extension
<e>               Field 'browser' doesn't contain a valid alias configuration
<e>               /Users/antoineestienne/Github_Files/apps/node_modules/web3 doesn't exist
<e>             .js
<e>               Field 'browser' doesn't contain a valid alias configuration
<e>               /Users/antoineestienne/Github_Files/apps/node_modules/web3.js doesn't exist
<e>             .jsx
<e>               Field 'browser' doesn't contain a valid alias configuration
<e>               /Users/antoineestienne/Github_Files/apps/node_modules/web3.jsx doesn't exist
<e>             .mjs
<e>               Field 'browser' doesn't contain a valid alias configuration
<e>               /Users/antoineestienne/Github_Files/apps/node_modules/web3.mjs doesn't exist
<e>             .ts
<e>               Field 'browser' doesn't contain a valid alias configuration
<e>               /Users/antoineestienne/Github_Files/apps/node_modules/web3.ts doesn't exist
<e>             .tsx
<e>               Field 'browser' doesn't contain a valid alias configuration
<e>               /Users/antoineestienne/Github_Files/apps/node_modules/web3.tsx doesn't exist
<e>         /Users/antoineestienne/Github_Files/apps/node_modules/web3 doesn't exist
<e>       /Users/antoineestienne/Github_Files/node_modules doesn't exist or is not a directory
<e>       /Users/antoineestienne/node_modules doesn't exist or is not a directory
<e>       /Users/node_modules doesn't exist or is not a directory
<e>       /node_modules doesn't exist or is not a directory
<e>  @ ../../node_modules/@polkadot/extension-dapp/compat/index.js 4:0-41 8:38-48
<e>  @ ../../node_modules/@polkadot/extension-dapp/index.js 11:0-43 71:49-59

web3 being a dependency added by my extension

joelamouche · 2021-05-05T16:08:51Z

And when I install yarn add web3 I get:

ERROR in ../../node_modules/ethereumjs-util/dist/account.js 4:13-30
<e> Module not found: Error: Can't resolve 'assert' in '/Users/antoineestienne/Github_Files/apps/node_modules/ethereumjs-util/dist'
<e> 
<e> BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
<e> This is no longer the case. Verify if you need this module and configure a polyfill for it.
<e> 
<e> If you want to include a polyfill, you need to:
<e> 	- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
<e> 	- install 'assert'
<e> If you don't want to include a polyfill, you can use an empty module like this:
<e> 	resolve.fallback: { "assert": false }
<e>  @ ../../node_modules/ethereumjs-util/dist/index.js 29:13-33
<e>  @ ../../node_modules/ethereumjs-tx/dist/transaction.js 14:24-50
<e>  @ ../../node_modules/ethereumjs-tx/dist/index.js 3:20-44
<e>  @ ../../node_modules/web3-eth-accounts/lib/index.js 35:18-54
<e>  @ ../../node_modules/web3-eth/lib/index.js 34:15-43
<e>  @ ../../node_modules/web3/lib/index.js 30:10-29
<e>  @ ../../node_modules/@polkadot/extension-dapp/compat/Web3Source.js 7:0-24 33:21-25
<e>  @ ../../node_modules/@polkadot/extension-dapp/compat/index.js 4:0-41 8:38-48
<e>  @ ../../node_modules/@polkadot/extension-dapp/index.js 11:0-43 71:49-59
<e>  @ ../react-api/src/Api.tsx 14:0-68 52:27-39 188:30-40
<e>  @ ../react-api/src/index.ts 3:0-65 6:0-124 6:0-124 6:0-124 6:0-124
<e>  @ ./src/Root.tsx 6:0-42 35:36-39
<e>  @ ./src/index.tsx 9:0-26 18:35-39

And similar errors for http, https, os

using yarn add to add them doesnt work

joelamouche · 2021-05-05T16:49:12Z

Adapting the apps helped: polkadot-js/apps#5216

The console shows the right logs and MetaMask does ask me for user permissions. but then the address doesn't display in the accounts. Can you refresh my memory: what do I need to do to display it and test it?

joelamouche · 2021-05-05T17:36:40Z

I think the problem is that the injcted accounts are injected without a type and default to substrate type addresses.

Furthermore, it looks like getInjectedAccounts doesnt pass down the signer in the app

joelamouche · 2021-05-06T19:02:00Z

polkadot-js/common#969 (ready)
#566 (wip)
polkadot-js/ui#464 (ready)
polkadot-js/apps#5216 (wip)

Are all part of a first milestone: displaying injected accounts from metamask into the app

joelamouche · 2021-05-11T10:32:36Z

@ubaistp ?

joelamouche · 2021-07-12T13:26:50Z

@jacogr ready for review (tested)

joelamouche · 2021-07-23T09:36:29Z

@jacogr updated and ready for review

jacogr

Think we are close. Some small comments and updates.

(Bit difficult wading through the reformats as well to ensure that the logic is stil in-tact)

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

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

jacogr · 2021-08-16T09:11:50Z

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

@@ -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;


Believe I commented elsewhere - the original is correct. (All ok, since this will be dropped anyway)

jacogr · 2021-08-16T09:12:44Z

packages/extension-dapp/src/index.ts

-          console.error(`Error initializing ${name}: ${error.message}`);
-        })
-      ])
+    Object.entries(win.injectedWeb3).map(


Still applicable, but will do a manual revert of this and the one above once in.

jacogr · 2021-08-16T09:22:49Z

packages/extension-dapp/src/index.ts

+    injected.map(
+      async ({ accounts, name: source, signer }): Promise<InjectedAccountWithMeta[]> => {
+        try {
+          const list = await accounts.get();


So on web3Accounts() would just add an extra flag for the types, e.g. ['sr25519', 'ed25519', 'ethereum'] - there may be some dance required by users to correctly pass the flag, but it is all ok.

So I think the easiest is to indeed initialise all source, but then just filter the accounts if need be. By default would not use (if nothing passed) the filter as `['sr25519', 'ed25519'] - obviously if no type is available, just pass it through.

The tricky bit here is that if we don't have sr25519 we never pass through the accounts with no type.

Should work in the case of the apps UI as well, e.g. in the case of Moonbeam, we just pass through the ['ethereum'] type. (As mentioned above that interface may also require some additional juggling, but all ok)

jacogr · 2021-08-16T12:41:41Z

Added a deps PR (web3 & detect-provider) in #794 just to eliminate conflicts.

Co-authored-by: Jaco <[email protected]>

joelamouche · 2021-08-24T08:48:01Z

@jacogr updated and ready for review

packages/extension-dapp/src/index.ts

Co-authored-by: Jaco <[email protected]>

joelamouche · 2021-08-25T15:01:40Z

@jacogr Updated!
So is ed25519 & sr25519 the default for regular substrate parachains? Asking for the polakdot/apps PR

jacogr · 2021-08-26T04:38:42Z

Yes, sr/ed is default. However the Substrate secp accounts can also be used and it valid. In broad terms there is just a split between the Ethereum-style and Substrate-style.

joelamouche · 2021-08-26T10:05:37Z

@jacogr updated and ready for review

joelamouche · 2021-09-01T12:06:02Z

@jacogr please review when you have some time

jacogr · 2021-09-02T08:51:36Z

On it, want to get it in ASAP. (And importantly, get a release out with this)

Could you just look at the yarn.lock conflicts?

joelamouche · 2021-09-02T12:51:28Z

@jacogr done

jacogr

Thank you.

polkadot-js-bot · 2021-09-05T11:31:52Z

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

joelamouche added 2 commits December 8, 2020 12:50

added web3source

4c8b1c8

tried fixing dependencies

a98b814

joelamouche marked this pull request as draft December 8, 2020 13:38

joelamouche mentioned this pull request Dec 8, 2020

Integrate MetaMask/web3 into polkadot-js interface polkadot-js/apps#4024

Open

removed load event listener and added name

a956347

jacogr mentioned this pull request Dec 9, 2020

Adjust accounts, with type #569

Closed

joelamouche added 4 commits December 10, 2020 15:15

add signer to interface

2d44686

Merge branch 'master' into jlm-add-metamask-extension-web3

f8c01a2

added signPayload draft

f056a53

lint

42bf1fd

jacogr reviewed Dec 10, 2020

View reviewed changes

packages/extension-dapp/src/compat/web3Source.ts Outdated Show resolved Hide resolved

joelamouche commented Dec 10, 2020

View reviewed changes

packages/extension-dapp/src/compat/web3Source.ts Outdated Show resolved Hide resolved

modified signpayload

966c6db

switch back to only signRaw

b3ff173

joelamouche mentioned this pull request Apr 21, 2021

Metamask snap as web3 provider polkadot-js/apps#2865

Closed

sync with master and update to new metamask norm

6303215

add types to injecetd accounts

a1f12b9

joelamouche added 3 commits May 7, 2021 14:23

update deps

e275ad3

hash tx and finalize code

6ff55de

lint and type

e8dc31c

joelamouche marked this pull request as ready for review May 10, 2021 17:21

sync with master

83b02de

sync

3ba0757

update packages

e91483f

joelamouche mentioned this pull request Jul 23, 2021

Adapt app for metamask integration extension polkadot-js/apps#5216

Open

jacogr reviewed Aug 16, 2021

View reviewed changes

jacogr mentioned this pull request Aug 16, 2021

Add web3 deps #794

Merged

joelamouche and others added 6 commits August 23, 2021 10:54

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

d9822ed

Co-authored-by: Jaco <[email protected]>

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

58188be

Co-authored-by: Jaco <[email protected]>

filter accounts by type

a68bc59

sync with master

a312bf4

lint

b8ee32c

fix type typing

5d315b3

jacogr reviewed Aug 25, 2021

View reviewed changes

packages/extension-dapp/src/index.ts Outdated Show resolved Hide resolved

joelamouche and others added 2 commits August 25, 2021 16:54

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

88b707c

Co-authored-by: Jaco <[email protected]>

filter by array of type, instead of single type

bbf0627

sync with master

3e046a9

sync with master

846d274

jacogr approved these changes Sep 3, 2021

View reviewed changes

jacogr merged commit 5c53ee7 into polkadot-js:master Sep 3, 2021

polkadot-js locked as resolved and limited conversation to collaborators Sep 5, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add metamask extension web3 #566

Add metamask extension web3 #566

joelamouche commented Dec 8, 2020 •

edited

Loading

joelamouche commented Dec 10, 2020

joelamouche commented May 5, 2021 •

edited

Loading

joelamouche commented May 5, 2021 •

edited

Loading

joelamouche commented May 5, 2021

joelamouche commented May 5, 2021

joelamouche commented May 5, 2021 •

edited

Loading

joelamouche commented May 6, 2021 •

edited

Loading

joelamouche commented May 11, 2021

joelamouche commented Jul 12, 2021

joelamouche commented Jul 23, 2021

jacogr left a comment

jacogr Aug 16, 2021

jacogr Aug 16, 2021

jacogr Aug 16, 2021

jacogr commented Aug 16, 2021

joelamouche commented Aug 24, 2021

joelamouche commented Aug 25, 2021

jacogr commented Aug 26, 2021

joelamouche commented Aug 26, 2021

joelamouche commented Sep 1, 2021

jacogr commented Sep 2, 2021

joelamouche commented Sep 2, 2021

jacogr left a comment

polkadot-js-bot commented Sep 5, 2021

Add metamask extension web3 #566

Add metamask extension web3 #566

Conversation

joelamouche commented Dec 8, 2020 • edited Loading

joelamouche commented Dec 10, 2020

joelamouche commented May 5, 2021 • edited Loading

joelamouche commented May 5, 2021 • edited Loading

joelamouche commented May 5, 2021

joelamouche commented May 5, 2021

joelamouche commented May 5, 2021 • edited Loading

joelamouche commented May 6, 2021 • edited Loading

joelamouche commented May 11, 2021

joelamouche commented Jul 12, 2021

joelamouche commented Jul 23, 2021

jacogr left a comment

Choose a reason for hiding this comment

jacogr Aug 16, 2021

Choose a reason for hiding this comment

jacogr Aug 16, 2021

Choose a reason for hiding this comment

jacogr Aug 16, 2021

Choose a reason for hiding this comment

jacogr commented Aug 16, 2021

joelamouche commented Aug 24, 2021

joelamouche commented Aug 25, 2021

jacogr commented Aug 26, 2021

joelamouche commented Aug 26, 2021

joelamouche commented Sep 1, 2021

jacogr commented Sep 2, 2021

joelamouche commented Sep 2, 2021

jacogr left a comment

Choose a reason for hiding this comment

polkadot-js-bot commented Sep 5, 2021

joelamouche commented Dec 8, 2020 •

edited

Loading

joelamouche commented May 5, 2021 •

edited

Loading

joelamouche commented May 5, 2021 •

edited

Loading

joelamouche commented May 5, 2021 •

edited

Loading

joelamouche commented May 6, 2021 •

edited

Loading