feat: add evm chain support

.env.example

@@ -1,2 +1,9 @@
-EXTENSION_PREFIX = POLKAGATE
-BG_THEME = christmas
+EXTENSION_PREFIX = MY_EXTENSION
+SUBSCAN_DEFAULT_KEY=''
+ALCHEMY_API_KEY= ''
+ETHERSCAN_API_KEY= ''
+INFURA_PROJECT_ID=''
+SENTRY_DSN=''
+SENTRY_AUTH_TOKEN=''
+SENTRY_ORG=''
+SENTRY_PROJECT=''

package.json

@@ -24,10 +24,9 @@
   ],
   "scripts": {
     "apply-version": "node -e \"const { execSync } = require('child_process'); const fs = require('fs'); try { const version = execSync('git describe --tags --abbrev=0').toString().trim().replace(/^v/, ''); console.log('Version fetched:', version); const packageJsonPath = './packages/extension/package.json'; const packageJson = JSON.parse(fs.readFileSync(packageJsonPath)); packageJson.version = version; fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2)); } catch (error) { console.log('No tags found, skipping package.json update'); }\"",
-    "build": "NODE_ENV=production yarn apply-version && polkadot-dev-build-ts && yarn build:zip && yarn build:rollup",
+    "build": "NODE_ENV=production yarn copy-prod-manifest && yarn apply-version && polkadot-dev-build-ts && yarn clean-map-build && yarn  build:zip && yarn build:rollup",
     "build:before": "yarn build:i18n",
-    "build:clean": "yarn build && find packages/extension/build -name '*.map' -type f -delete",
-    "build:dev": "NODE_ENV=development polkadot-dev-build-ts",
+    "build:dev": "NODE_ENV=development yarn copy-dev-manifest && polkadot-dev-build-ts",
     "build:i18n": "i18next-scanner --config i18next-scanner.config.cjs",
     "build:release": "polkadot-ci-ghact-build",
     "build:rollup": "polkadot-exec-rollup --config",
@@ -36,7 +35,10 @@
     "build:zip:dst": "rm -rf ./master-build.zip && cd packages/extension/build && zip -r -FS ../../../master-build.zip .",
     "build:zip:src": "rm -rf ./master-src.zip && zip -r -x '*build/*' -x '*node_modules*' -FS ./master-src.zip packages .editorconfig .eslintignore .eslintrc.js babel.config.cjs CHANGELOG.md CONTRIBUTING.md i18next-scanner.config.js jest.config.cjs LICENSE package.json README.md tsconfig.json yarn.lock",
     "clean": "polkadot-dev-clean-build",
+    "clean-map-build": "find packages/extension/build -name '*.map' -type f -delete",
     "clean-translations": "node cleanTranslations.cjs",
+    "copy-dev-manifest": "cp packages/extension/manifest.dev.json packages/extension/manifest.json",
+    "copy-prod-manifest": "cp packages/extension/manifest.prod.json packages/extension/manifest.json",
     "docs": "npx typedoc && (start ./docs/index.html || open ./docs/index.html || xdg-open ./docs/index.html)",
     "lint": "polkadot-dev-run-lint",
     "postinstall": "polkadot-dev-yarn-only",
@@ -45,7 +47,7 @@
     "start": "NODE_ENV=development yarn watch",
     "test": "polkadot-dev-run-test --silent --detectOpenHandles --testPathPattern=packages/extension-polkagate/src --maxWorkers=1",
     "test:one": "polkadot-dev-run-test --detectOpenHandles",
-    "watch": "cd packages/extension && yarn polkadot-exec-webpack --config webpack.watch.cjs --mode development --watch"
+    "watch": "yarn copy-dev-manifest && cd packages/extension && yarn polkadot-exec-webpack --config webpack.watch.cjs --mode development --watch"
   },
   "dependencies": {
     "@acala-network/api": "^6.2.0",
@@ -60,7 +62,7 @@
     "@mui/icons-material": "^5.15.18",
     "@mui/lab": "^5.0.0-alpha.85",
     "@mui/material": "^5.8.3",
-    "@paraspell/sdk-pjs": "^12.6.0",
+    "@paraspell/sdk-pjs": "12.7.0",
     "@polkadot/api": "^16.5.4",
     "@polkadot/api-augment": "^16.5.4",
     "@polkadot/api-base": "^16.5.4",
@@ -75,10 +77,11 @@
     "@polkadot/types-support": "^16.5.4",
     "@polkadot/util": "^13.5.3",
     "@polkadot/util-crypto": "^13.5.3",
-    "@polkagate/apps-config": "^1.3.0",
+    "@polkagate/apps-config": "2.1.1",
     "@sentry/react": "^9.40.0",
     "@sentry/webpack-plugin": "^4.0.0",
     "@substrate/connect": "^0.7.32",
+    "@web3icons/react": "^4.0.25",
     "babel-plugin-transform-import-meta": "^2.1.1",
     "better-react-spinkit": "^2.0.4",
     "chance": "^1.1.11",
@@ -87,6 +90,7 @@
     "country-flag-icons": "^1.5.9",
     "css-loader": "^6.7.3",
     "date-fns": "^4.1.0",
+    "ethers": "^6.15.0",
     "framer-motion": "^11.11.13",
     "memoize-one": "^6.0.0",
     "polkadot-api": "^1.13.0",
@@ -128,6 +132,7 @@
     "jsdom-worker-fix": "^0.1.8",
     "openai": "^4.0.0",
     "pinst": "^3.0.0",
+    "react-devtools-core": "^7.0.1",
     "semantic-release": "^24.1.0",
     "sinon-chrome": "^3.0.1",
     "typedoc": "^0.27.9",

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

@@ -9,15 +9,15 @@ import type { KeyringAddress } from '@polkadot/ui-keyring/types';
 import type { HexString } from '@polkadot/util/types';
 import type { KeypairType } from '@polkadot/util-crypto/types';
 // added for plus to import RequestUpdateMeta
-import type { AccountJson, AllowedPath, ApplyAddedTime, AuthorizeRequest, AuthUrls, MessageTypes, MetadataRequest, RequestAccountBatchExport, RequestAccountChangePassword, RequestAccountChangePasswordAll, RequestAccountCreateExternal, RequestAccountCreateHardware, RequestAccountCreateSuri, RequestAccountEdit, RequestAccountExport, RequestAccountForget, RequestAccountShow, RequestAccountsSetUnlockExpiry, RequestAccountTie, RequestAccountValidate, RequestAuthorizeApprove, RequestBatchRestore, RequestCreateAgent, RequestDeriveCreate, RequestDeriveValidate, RequestExplainTx, RequestJsonRestore, RequestMetadataApprove, RequestMetadataReject, RequestSeedCreate, RequestSeedValidate, RequestSigningApprovePassword, RequestSigningApproveSignature, RequestSigningCancel, RequestSigningIsLocked, RequestSigningSignature, RequestTypes, RequestUnlockAllAccounts, RequestUpdateAuthorizedAccounts, RequestUpdateMeta, ResponseAccountExport, ResponseAccountsExport, ResponseAuthorizeList, ResponseDeriveValidate, ResponseJsonGetAccountInfo, ResponseSeedCreate, ResponseSeedValidate, ResponseSigningIsLocked, ResponseType, SigningRequest } from '../types';
+import type { AccountJson, AllowedPath, ApplyAddedTime, AuthorizeRequest, AuthUrls, MessageTypes, MetadataRequest, RequestAccountBatchExport, RequestAccountChangePassword, RequestAccountChangePasswordAll, RequestAccountCreateExternal, RequestAccountCreateHardware, RequestAccountCreateSuri, RequestAccountEdit, RequestAccountExport, RequestAccountForget, RequestAccountShow, RequestAccountsSetUnlockExpiry, RequestAccountTie, RequestAccountValidate, RequestAuthorizeApprove, RequestBatchRestore, RequestCreateAgent, RequestDeriveCreate, RequestDeriveValidate, RequestExplainTx, RequestJsonRestore, RequestMetadataApprove, RequestMetadataReject, RequestSeedCreate, RequestSeedValidate, RequestSigningApprovePassword, RequestSigningApproveSignature, RequestSigningCancel, RequestSigningEthereumRawSignature, RequestSigningIsLocked, RequestSigningSignature, RequestTypes, RequestUnlockAllAccounts, RequestUpdateAuthorizedAccounts, RequestUpdateMeta, ResponseAccountExport, ResponseAccountsExport, ResponseAuthorizeList, ResponseDeriveValidate, ResponseJsonGetAccountInfo, ResponseSeedCreate, ResponseSeedValidate, ResponseSigningIsLocked, ResponseType, SigningRequest } from '../types';
 import type State from './State';
 
 import { ALLOWED_PATH, START_WITH_PATH } from '@polkadot/extension-base/defaults';
 import { metadataExpand } from '@polkadot/extension-chains';
 import { TypeRegistry } from '@polkadot/types';
 import keyring from '@polkadot/ui-keyring';
 import { accounts as accountsObservable } from '@polkadot/ui-keyring/observable/accounts';
-import { assert, isHex } from '@polkadot/util';
+import { assert, hexToU8a,isHex, u8aToHex } from '@polkadot/util';
 import { keyExtractSuri, mnemonicGenerate, mnemonicValidate } from '@polkadot/util-crypto';
 
 import { withErrorLog } from './helpers';
@@ -110,8 +110,8 @@ export default class Extension {
     keyring.saveAccountMeta(pair, { ...pair.meta, addedTime: Date.now() });
   }
 
-  private accountsCreateExternal({ address, genesisHash, name }: RequestAccountCreateExternal): boolean {
-    const { pair } = keyring.addExternal(address, { genesisHash, name });
+  private accountsCreateExternal({ address, genesisHash, name, type }: RequestAccountCreateExternal): boolean {
+    const { pair } = keyring.addExternal(address, { genesisHash, name, type });
 
     this.applyAddedTime({ pair });
 
@@ -630,9 +630,7 @@ export default class Extension {
       throw new Error('Invalid payload: missing required fields.');
     }
 
-    const { address } = payload;
-
-    const pair = keyring.getPair(address);
+    const pair = keyring.getPair(payload.address);
 
     this.refreshAccountPasswordCache(pair); // check if auto lock duration is expired
 
@@ -647,6 +645,28 @@ export default class Extension {
     return signature;
   }
 
+  private signEthereumRaw({ address, data }: RequestSigningEthereumRawSignature): HexString | null {
+    const pair = keyring.getPair(address);
+
+    this.refreshAccountPasswordCache(pair);
+
+    if (pair.isLocked) {
+      return null;
+    }
+
+    const bytes = hexToU8a(data);
+    const sigBytes = pair.sign(bytes);
+
+    const v = (sigBytes[64] & 1) + 27;
+    const serialized = new Uint8Array(65);
+
+    serialized.set(sigBytes.slice(0, 32), 0);
+    serialized.set(sigBytes.slice(32, 64), 32);
+    serialized[64] = v;
+
+    return u8aToHex(serialized);
+  }
+
   private signingApproveSignature({ id, signature, signedTransaction }: RequestSigningApproveSignature): boolean {
     const queued = this.#state.getSignRequest(id);
 
@@ -811,6 +831,9 @@ export default class Extension {
       case 'pri(signing.getSignature)':
         return this.getSignature(request as RequestSigningSignature);
 
+      case 'pri(signing.signEthereumRaw)':
+        return this.signEthereumRaw(request as RequestSigningEthereumRawSignature);
+
       case 'pri(accounts.unlockAll)':
         return this.accountsUnlockAll(request as RequestUnlockAllAccounts);
 

packages/extension-base/src/background/types.ts

@@ -125,6 +125,7 @@ export interface RequestSignatures {
   'pri(accounts.changePassword)': [RequestAccountChangePassword, boolean];
   'pri(accounts.changePasswordAll)': [RequestAccountChangePasswordAll, boolean];
   'pri(signing.getSignature)': [RequestSigningSignature, HexString | null];
+  'pri(signing.signEthereumRaw)': [RequestSigningEthereumRawSignature, HexString | null];
   'pri(authorize.approve)': [RequestAuthorizeApprove, boolean];
   'pri(authorize.update)': [RequestUpdateAuthorizedAccounts, void];
   'pri(authorize.list)': [null, ResponseAuthorizeList];
@@ -213,6 +214,7 @@ export interface RequestAccountCreateExternal {
   address: string;
   genesisHash?: HexString | null;
   name: string;
+  type?: KeypairType;
 }
 
 export interface RequestAccountCreateSuri {
@@ -337,6 +339,10 @@ export interface RequestSigningApprovePassword {
 export interface RequestSigningSignature {
   payload: SignerPayloadJSON;
 }
+export interface RequestSigningEthereumRawSignature {
+  address: string;
+  data: string;
+}
 
 export interface RequestSigningApproveSignature {
   id: string;

packages/extension-polkagate/src/components/AccountSelectionDropDown.tsx

@@ -1,20 +1,20 @@
 // Copyright 2019-2026 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { useSelectedAccount } from '../hooks';
+import { useAccounts, useSelectedAccount } from '../hooks';
 import { setStorage } from '../util';
 import { STORAGE_KEY } from '../util/constants';
-import { AccountContext, DropSelect } from '.';
+import { DropSelect } from '.';
 
 interface Props {
   style?: React.CSSProperties;
 }
 
 function AccountSelectionDropDown({ style }: Props) {
   const selectedAccount = useSelectedAccount();
-  const { accounts } = useContext(AccountContext);
+  const accounts = useAccounts();
 
   const onClick = useCallback((address: string | number) => {
     setStorage(STORAGE_KEY.SELECTED_ACCOUNT, address).catch(console.error);

packages/extension-polkagate/src/components/Address.tsx

@@ -14,11 +14,11 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { noop } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
-import { useAccountName, useIsDark, useTranslation } from '../hooks';
+import { useAccountName, useAccounts, useIsDark, useTranslation } from '../hooks';
 import useMetadata from '../hooks/useMetadata';
 import PolkaGateIdenticon from '../style/PolkaGateIdenticon';
 import { DEFAULT_TYPE } from '../util/defaultType';
-import { AccountContext, ActionButton, GlowCheckbox, SettingsContext, ShortAddress } from './';
+import { ActionButton, GlowCheckbox, SettingsContext, ShortAddress } from './';
 
 export interface Props {
   actions?: React.ReactNode;
@@ -93,7 +93,7 @@ function Address({ address, backgroundColor, check, genesisHash, handleCheck, ma
   const { t } = useTranslation();
   const isDark = useIsDark();
 
-  const { accounts } = useContext(AccountContext);
+    const accounts = useAccounts();
   const accountName = useAccountName(address || '');
   const settings = useContext(SettingsContext);
   const [{ formatted, genesisHash: recodedGenesis }, setRecoded] = useState<Recoded>(defaultRecoded);

packages/extension-polkagate/src/components/AddressInput.tsx

@@ -2,11 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Chain } from '@polkadot/extension-chains/types';
+import type { KeypairType } from '@polkadot/util-crypto/types';
 
 import { Divider, InputAdornment, Stack, type SxProps, TextField, type Theme, Typography, useTheme } from '@mui/material';
 import { ArrowCircleDown, Document, Hashtag, ScanBarcode } from 'iconsax-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
+import { isEthereumAddress } from '@polkadot/util-crypto';
+
 import AccountListModal from '../fullscreen/components/AccountListModal';
 import { useIsBlueish, useTranslation } from '../hooks';
 import QrScanner from '../popup/import/addWatchOnlyFullScreen/QrScanner';
@@ -25,10 +28,11 @@ interface Props {
   style?: SxProps<Theme>;
   withSelect?: boolean;
   setIsError?: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+  setType?: React.Dispatch<React.SetStateAction<KeypairType | undefined>>;
   showAddressBook?: boolean;
 }
 
-export default function AddressInput({ addWithQr = false, address, chain, disabled = false, label, placeHolder, setAddress, setIsError, showAddressBook, style, withSelect }: Props): React.ReactElement<Props> {
+export default function AddressInput({ addWithQr = false, address, chain, disabled = false, label, placeHolder, setAddress, setIsError, setType, showAddressBook, style, withSelect }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
   const isBlueish = useIsBlueish();
@@ -38,10 +42,10 @@ export default function AddressInput({ addWithQr = false, address, chain, disabl
   const [openCamera, setOpenCamera] = useState<boolean>(false);
   const [openAccountList, setOpenAccountList] = useState<boolean>(false);
   const [invalidAddress, setInvalidAddress] = useState<boolean>(false);
-  const [enteredAddress, setEnteredAddress] = useState<string | undefined>();
+  const [enteredAddress, setEnteredAddress] = useState<string | undefined | null>();
 
   useEffect(() => {
-    if (address) {
+    if (address || address === null) {
       setEnteredAddress(address);
       setInvalidAddress(false);
     }
@@ -51,45 +55,57 @@ export default function AddressInput({ addWithQr = false, address, chain, disabl
     setIsError && setIsError(invalidAddress);
   }, [address, invalidAddress, setIsError]);
 
+  const onReset = useCallback((): void => {
+    setAddress?.(null);
+    setEnteredAddress(undefined);
+    setInvalidAddress(false);
+    setType?.((prev) => (prev === 'ethereum' ? undefined : prev));
+  }, [setAddress, setType]);
+
+  const onSet = useCallback((value: string): void => {
+    const isEvm = isEthereumAddress(value);
+
+    isEvm && setType?.('ethereum');
+    const isValid = isValidAddress(value);
+
+    isValid
+      ? setAddress?.(value)
+      : setAddress?.(undefined);
+
+    setEnteredAddress(value);
+    setInvalidAddress(!isValid);
+  }, [setAddress, setType]);
+
   const handleAddress = useCallback(({ target: { value } }: React.ChangeEvent<HTMLInputElement>): void => {
     if (!value) {
-      setAddress && setAddress(null);
-      setEnteredAddress(undefined);
-      setInvalidAddress(false);
+      onReset();
 
       return;
     }
 
-    setInvalidAddress(!(isValidAddress(value)));
-    setEnteredAddress(value);
-    isValidAddress(value) ? setAddress && setAddress(value) : setAddress && setAddress(undefined);
-  }, [setAddress]);
+    onSet(value);
+  }, [onReset, onSet]);
 
   // @ts-ignore
   const _selectAddress = useCallback((newAddr?: string) => handleAddress({ target: { value: newAddr } }), [handleAddress]);
-
   const openQrScanner = useCallback(() => setOpenCamera(true), []);
   const onOpenAccountList = useCallback(() => setOpenAccountList(true), []);
-
   const handleInputAddress = useCallback((value: React.ChangeEvent<HTMLInputElement>) => {
     handleAddress(value);
   }, [handleAddress]);
 
   const pasteAddress = useCallback(() => {
     if (enteredAddress || address) {
-      setAddress && setAddress(null);
-      setEnteredAddress(undefined);
-      setInvalidAddress(false);
-    } else {
-      navigator.clipboard.readText().then((clipText) => {
-        const isValid = isValidAddress(clipText);
+      onReset();
 
-        isValid ? setAddress?.(clipText) : setAddress?.(undefined);
-        setEnteredAddress(clipText);
-        setInvalidAddress(!isValid);
-      }).catch(console.error);
+      return;
     }
-  }, [address, enteredAddress, setAddress]);
+
+    navigator.clipboard.readText()
+      .then((clipText) => {
+        onSet(clipText);
+      }).catch(console.error);
+  }, [address, enteredAddress, onReset, onSet]);
 
   return (
     <>
@@ -134,7 +150,7 @@ export default function AddressInput({ addWithQr = false, address, chain, disabl
                     size='18'
                     style={{ cursor: 'pointer', margin: '0 2px 0' }}
                     variant='Bulk'
-                    />
+                  />
                 }
               </InputAdornment>
             ),
@@ -205,4 +221,4 @@ export default function AddressInput({ addWithQr = false, address, chain, disabl
       }
     </>
   );
-}
+}