[TESTING]: support @substrate/discovery

Author: ryanleecode

package.json

@@ -59,6 +59,7 @@
     "@polkadot/util-crypto": "^13.2.2",
     "@polkadot/x-fetch": "^13.2.2",
     "safe-buffer": "^5.2.1",
+    "smoldot": "2.0.30",
     "typescript": "^5.3.3"
   }
 }

packages/extension/manifest_chrome.json

@@ -5,7 +5,7 @@
   "name": "polkadot{.js} extension",
   "short_name": "polkadot{.js}",
   "manifest_version": 3,
-  "permissions": ["storage", "tabs"],
+  "permissions": ["storage", "scripting", "tabs", "notifications", "alarms"],
   "background": {
     "service_worker": "background.js",
     "type": "module"

packages/extension/package.json

@@ -17,10 +17,17 @@
   "type": "module",
   "version": "0.56.1",
   "dependencies": {
+    "@polkadot-api/pjs-signer": "^0.6.0",
+    "@polkadot-api/utils": "^0.1.2",
     "@polkadot/api": "^14.2.1",
     "@polkadot/extension-base": "0.56.1",
     "@polkadot/extension-inject": "0.56.1",
     "@polkadot/extension-ui": "0.56.1",
+    "@substrate/connect-discovery": "^0.2.1",
+    "@substrate/light-client-extension-helpers": "^2.5.2",
+    "@substrate/smoldot-discovery": "^2.0.1",
+    "@substrate/smoldot-discovery-connector": "^0.3.1",
+    "smoldot": "2.0.30",
     "tslib": "^2.6.2"
   },
   "devDependencies": {

packages/extension/src/background.ts

@@ -9,13 +9,22 @@ import '@polkadot/extension-inject/crossenv';
 
 import type { RequestSignatures, TransportRequestMessage } from '@polkadot/extension-base/background/types';
 
+import { ksmcc3, polkadot, westend2 } from '@substrate/connect-known-chains';
+import { register } from '@substrate/light-client-extension-helpers/background';
+import { start } from '@substrate/light-client-extension-helpers/smoldot';
+
 import { handlers, withErrorLog } from '@polkadot/extension-base/background';
 import { PORT_CONTENT, PORT_EXTENSION } from '@polkadot/extension-base/defaults';
 import { AccountsStore } from '@polkadot/extension-base/stores';
 import { keyring } from '@polkadot/ui-keyring';
 import { assert } from '@polkadot/util';
 import { cryptoWaitReady } from '@polkadot/util-crypto';
 
+register({
+  getWellKnownChainSpecs: () => Promise.resolve([polkadot, ksmcc3, westend2]),
+  smoldotClient: start({ maxLogLevel: 4 })
+});
+
 // setup the notification (same a FF default background, white text)
 withErrorLog(() => chrome.action.setBadgeBackgroundColor({ color: '#d90000' }));
 

packages/extension/src/constants.ts

@@ -0,0 +1,4 @@
+// Copyright 2017-2024 @polkadot/extension authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export const CHANNEL_ID = 'polkadot-js-extension';

packages/extension/src/content.ts

@@ -3,9 +3,14 @@
 
 import type { Message } from '@polkadot/extension-base/types';
 
+import { register } from '@substrate/light-client-extension-helpers/content-script';
+
 import { MESSAGE_ORIGIN_CONTENT, MESSAGE_ORIGIN_PAGE, PORT_CONTENT } from '@polkadot/extension-base/defaults';
 import { ensurePortConnection } from '@polkadot/extension-base/utils/portUtils';
 import { chrome } from '@polkadot/extension-inject/chrome';
+import { CHANNEL_ID } from './constants';
+
+register(CHANNEL_ID);
 
 let port: chrome.runtime.Port | undefined;
 

packages/extension/src/page.ts

@@ -1,15 +1,111 @@
 // Copyright 2019-2024 @polkadot/extension authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { Unstable } from '@substrate/connect-discovery';
 import type { RequestSignatures, TransportRequestMessage } from '@polkadot/extension-base/background/types';
 import type { Message } from '@polkadot/extension-base/types';
 
+import { createTx } from '@substrate/light-client-extension-helpers/tx-helper';
+import { getLightClientProvider } from '@substrate/light-client-extension-helpers/web-page';
+
 import { MESSAGE_ORIGIN_CONTENT } from '@polkadot/extension-base/defaults';
 import { enable, handleResponse, redirectIfPhishing } from '@polkadot/extension-base/page';
 import { injectExtension } from '@polkadot/extension-inject';
+import { connectInjectedExtension } from '@polkadot-api/pjs-signer';
+import { toHex, fromHex } from '@polkadot-api/utils'
+import {
+  make as makeSmoldotDiscoveryConnector,
+  type SmoldotExtensionProviderDetail,
+} from "@substrate/smoldot-discovery-connector"
 
+import { CHANNEL_ID } from './constants.js';
 import { packageInfo } from './packageInfo.js';
 
+const PROVIDER_INFO = {
+  icon: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>",
+  name: 'Polkadot JS Extension',
+  rdns: 'io.github.paritytech.PolkadotJsExtension',
+  uuid: crypto.randomUUID()
+};
+
+const lightClientProvider = getLightClientProvider(CHANNEL_ID);
+
+// #region Smoldot Discovery Provider
+{
+  const provider = lightClientProvider.then(makeSmoldotDiscoveryConnector)
+  const detail: SmoldotExtensionProviderDetail = Object.freeze({
+    info: PROVIDER_INFO,
+    kind: 'smoldot-v1',
+    provider
+  });
+
+  window.addEventListener(
+    'substrateDiscovery:requestProvider',
+    ({ detail: { onProvider } }) => onProvider(detail)
+  );
+
+  window.dispatchEvent(
+    new CustomEvent('substrateDiscovery:announceProvider', {
+      detail
+    })
+  );
+}
+// #endregion
+
+// #region Connect Discovery Provider
+{
+  const provider = lightClientProvider.then((lightClientProvider): Unstable.Provider => ({
+    ...lightClientProvider,
+    async createTx (chainId: string, from: string, callData: string) {
+      const chains = Object.values(lightClientProvider.getChains());
+      const chain = chains.find(({ genesisHash }) => genesisHash === chainId);
+
+      if (!chain) {
+        throw new Error('unknown chain');
+      }
+
+      const injectedExt = await connectInjectedExtension('polkadot-js');
+
+      const account = injectedExt.getAccounts()
+        .find((account) => toHex(account.polkadotSigner.publicKey) === from);
+
+      if (!account) {
+        throw new Error('no account');
+      }
+
+      const signer = account.polkadotSigner;
+
+      const tx = await createTx(chain.connect)({ callData: fromHex(callData), signer });
+
+      return toHex(tx);
+    },
+    async getAccounts (_chainId: string) {
+      const injectedExt = await connectInjectedExtension('polkadot-js');
+      const accounts = injectedExt.getAccounts();
+
+      return accounts;
+    }
+  }));
+
+  const detail: Unstable.SubstrateConnectProviderDetail = Object.freeze({
+    info: PROVIDER_INFO,
+    kind: 'substrate-connect-unstable',
+    provider
+  });
+
+  window.addEventListener(
+    'substrateDiscovery:requestProvider',
+    ({ detail: { onProvider } }) => onProvider(detail)
+  );
+
+  window.dispatchEvent(
+    new CustomEvent('substrateDiscovery:announceProvider', {
+      detail
+    })
+  );
+}
+// #endregion
+
 function inject () {
   injectExtension(enable, {
     name: 'polkadot-js',