[W3F Grant Milestone 2] ECDSA Custom Signature Pallet Hardware Wallet Support UI implementation

[hoonsubin]

Note: This pull request is a clean version of #4435
There is an issue with reading error callbacks in MetaMask extension keyring manager. This issue must be resolved for this pull request to be ready for review (more about that from this thread)

Feature Summary

This feature is related to the Web3 Foundation grant milestone

Adds Custom Signature page under the Account tab.
The Custom Signature page allows the user to submit a transaction that was signed with an Ethereum private key and use it as a native ss58 encoded ECDSA account for Substrate. You can use MetaMask for signature requests, which allows users to use their Ethereum accounts from Ledger and Trezor to create transactions and execute runtime calls.

Preview

Ledger

ecdsa-sig-final.mp4

Trezor

ecdsa-sig-trezor.mov

Notable Changes

• add assert browser polyfill that is used by the ethereumjs-util package
• add basic zero-dependency MetaMask support to the Custom Signature page (only works on that page)
• add custom-signature page that will be available for chains that implement the custom-signatures pallet (https://github.com/PlasmNetwork/Astar/tree/development/dusty/frame/custom-signatures) as EthCall (https://github.com/PlasmNetwork/Astar/blob/2745af52f114510a1c3d0b7b9ec7f9dd04d83e8b/bin/node/runtime/src/lib.rs#L789)
• add Ethereum account to SS58 ECDSA account converter

Usage

Currently, this page is made with MetaMask in mind. Most browser-injected ethereum wallets that use the window.ethereum object and accept the personal_sign method should be compatible, but please understand that there may be unexpected errors.

You can learn more about the usage from the official documentation: https://docs.astar.network/build/metamask-signatures

[hoonsubin]

Sorry for the messy commit history, I must have been drunk 😓
I can close this and open a clean one if you think that is better

[jacogr]

We merge with squash merges, so it doesn’t affect anything. So if you are happy, I am happy :)

[hoonsubin]

@jacogr if it's not too much, can you help me with this error I'm having? After adding the custom page to tsconfig paths, I'm starting to see type errors related to onChange and isDisabled React component properties. Plus, the custom type page is not being read properly too. My guess is related to some package reference error or invalid configs.

I'm trying to finalize this PR and wrap things up for review :)

Here is the full error log:

packages/react-params/src/Param/Enum.tsx:99:11 - error TS2322: Type '{ onChange: ([{ isValid, value }]: RawParam[]) => void; overrides: ComponentMap | undefined; params: ParamDef[]; registry: Registry; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'onChange' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

99           onChange={_onChangeParam}
             ~~~~~~~~

packages/react-params/src/Param/Struct.tsx:43:9 - error TS2322: Type '{ onChange: (values: RawParam[]) => void; overrides: ComponentMap | undefined; params: ParamDef[]; registry: Registry; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'onChange' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

43         onChange={_onChangeParams}
           ~~~~~~~~

packages/react-params/src/Param/Tuple.tsx:39:9 - error TS2322: Type '{ onChange: (values: RawParam[]) => void; overrides: ComponentMap | undefined; params: ParamDef[]; registry: Registry; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'onChange' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

39         onChange={_onChangeParams}
           ~~~~~~~~

packages/react-params/src/Param/Vector.tsx:115:9 - error TS2322: Type '{ isDisabled: boolean; onChange: Dispatch<SetStateAction<RawParam[]>>; overrides: ComponentMap | undefined; params: ParamDef[]; registry: Registry; values: RawParam[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

115         isDisabled={isDisabled}
            ~~~~~~~~~~

packages/react-params/src/Param/VectorFixed.tsx:90:9 - error TS2322: Type '{ isDisabled: boolean; onChange: Dispatch<SetStateAction<RawParam[]>>; overrides: ComponentMap | undefined; params: ParamDef[]; registry: Registry; values: RawParam[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

90         isDisabled={isDisabled}
           ~~~~~~~~~~

packages/react-params/src/index.tsx:156:26 - error TS2345: Argument of type 'typeof Params' is not assignable to parameter of type 'ComponentType<WithTranslationProps>'.
  Type 'typeof Params' is not assignable to type 'ComponentClass<WithTranslationProps, any>'.
    Types of property 'getDerivedStateFromProps' are incompatible.
      Type '({ isDisabled, params, registry, values }: Props, prevState: State) => Pick<State, never> | null' is not assignable to type 'GetDerivedStateFromProps<WithTranslationProps, any>'.
        Types of parameters '__0' and 'nextProps' are incompatible.
          Type 'Readonly<WithTranslationProps>' is missing the following properties from type 'Props': params, t, tReady

156 export default translate(Params);
                             ~~~~~~

packages/react-components/src/Call.tsx:98:9 - error TS2322: Type '{ isDisabled: true; onError: (() => void) | undefined; params: Param[]; registry: Registry; values: Value[]; withBorder: boolean | undefined; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

98         isDisabled
           ~~~~~~~~~~

packages/react-components/src/Event.tsx:70:9 - error TS2322: Type '{ children: Element | null; isDisabled: true; params: { type: TypeDef; }[]; values: { isValid: boolean; value: Codec; }[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

70         isDisabled
           ~~~~~~~~~~

packages/react-components/src/Event.tsx:82:15 - error TS2322: Type '{ isDisabled: true; params: AbiParam[]; values: Value[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

82               isDisabled
                 ~~~~~~~~~~

packages/react-components/src/Extrinsic.tsx:104:9 - error TS2322: Type '{ key: string; onChange: Dispatch<SetStateAction<RawParam[]>>; onEnter: (() => void) | undefined; onEscape: (() => void) | undefined; overrides: ComponentMap; params: { ...; }[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'onChange' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

104         onChange={setValues}
            ~~~~~~~~

packages/page-contracts/src/shared/Params.tsx:42:7 - error TS2322: Type '{ isDisabled: boolean | undefined; onChange: (values: RawParams) => void; onEnter: (() => void) | undefined; params: ParamDef[]; registry: Registry; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

42       isDisabled={isDisabled}
         ~~~~~~~~~~

packages/page-democracy/src/Overview/TreasuryCell.tsx:70:9 - error TS2322: Type '{ children: Element[]; isDisabled: true; params: Param[]; values: Value[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

70         isDisabled
           ~~~~~~~~~~

packages/apps-routing/src/custom-signature.ts:7:23 - error TS2307: Cannot find module '@polkadot/app-custom-signature' or its corresponding type declarations.

7 import Component from '@polkadot/app-custom-signature';
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

packages/page-explorer/src/BlockInfo/Justifications.tsx:31:7 - error TS2322: Type '{ isDisabled: true; params: { type: TypeDef; }[]; values: { isValid: boolean; value: Codec; }[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

31       isDisabled
         ~~~~~~~~~~

packages/page-explorer/src/BlockInfo/Logs.tsx:23:7 - error TS2322: Type '{ isDisabled: true; params: { type: TypeDef; }[]; values: { isValid: boolean; value: Raw; }[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

23       isDisabled
         ~~~~~~~~~~

packages/page-explorer/src/BlockInfo/Logs.tsx:42:7 - error TS2322: Type '{ isDisabled: true; params: { name: string; type: TypeDef; }[]; values: { isValid: boolean; value: Codec; }[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

42       isDisabled
         ~~~~~~~~~~

packages/page-explorer/src/BlockInfo/Logs.tsx:60:7 - error TS2322: Type '{ isDisabled: true; params: { type: TypeDef; }[]; values: { isValid: boolean; value: Codec; }[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

60       isDisabled
         ~~~~~~~~~~

packages/page-explorer/src/BlockInfo/Logs.tsx:80:7 - error TS2322: Type '{ isDisabled: true; params: { name: string; type: TypeDef; }[]; values: { isValid: boolean; value: Codec; }[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'isDisabled' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

80       isDisabled
         ~~~~~~~~~~

packages/page-rpc/src/Rpc/Selection.tsx:91:9 - error TS2322: Type '{ key: string; onChange: (values: RawParam[]) => void; params: ParamDef[]; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'onChange' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

91         onChange={_onChangeValues}
           ~~~~~~~~

packages/page-storage/src/Selection/Modules.tsx:196:11 - error TS2322: Type '{ key: string; onChange: (values: RawParams) => void; onEnter: () => void; params: ParamsType; values: RawParams | null | undefined; }' is not assignable to type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.
  Property 'onChange' does not exist on type 'IntrinsicAttributes & Omit<Subtract<WithTranslationProps | (WithTranslationProps & { children?: ReactNode; }), WithTranslationProps>, keyof WithTranslation<...>> & WithTranslationProps & { ...; }'.

196           onChange={_onChangeValues}
              ~~~~~~~~


Found 20 errors.

[jacogr]

Will take a peek in the morning EU time.

[jacogr]

Change to tsconfig.base.json to fix eslint -

Original:

      "@polkadot/app-council": ["page-council/src"],
      "@polkadot/app-council/*": ["page-council/src/*"],
      "@polkadot/app-custom-signature/*": ["page-custom-signature/src/*"],

New: (Addition of root import)

      "@polkadot/app-council": ["page-council/src"],
      "@polkadot/app-council/*": ["page-council/src/*"],
      "@polkadot/app-custom-signature": ["page-custom-signature/src"],
      "@polkadot/app-custom-signature/*": ["page-custom-signature/src/*"],

[hoonsubin]

Thanks @jacogr for the help! Everything is working well!

[jacogr]

O, hell. Now I see it is not in draft anymore and needs a review. And 2 months ago as well. Sorry about that, the draft -> ready status changes always create and issue for me.

[lgtm-com]

This pull request introduces 1 alert when merging 00e1b6b into 56087a7 - view on LGTM.com

new alerts:

• 1 for Useless assignment to local variable