[TESTING]: support @substrate/discovery

Author: ryanleecode

package.json

@@ -58,6 +58,7 @@
     "@polkadot/util-crypto": "^12.6.2",
     "@polkadot/x-fetch": "^12.6.2",
     "safe-buffer": "^5.2.1",
+    "smoldot": "2.0.29",
     "typescript": "^5.3.3"
   }
 }

packages/extension/package.json

@@ -17,10 +17,16 @@
   "type": "module",
   "version": "0.48.3-3-x",
   "dependencies": {
+    "@polkadot-api/pjs-signer": "^0.2.1",
+    "@polkadot-api/utils": "^0.1.0",
     "@polkadot/api": "^12.0.2",
     "@polkadot/extension-base": "0.48.3-3-x",
     "@polkadot/extension-inject": "0.48.3-3-x",
     "@polkadot/extension-ui": "0.48.3-3-x",
+    "@substrate/connect-discovery": "^0.0.6",
+    "@substrate/light-client-extension-helpers": "./substrate-light-client-extension-helpers-2.0.3.tgz",
+    "@substrate/smoldot-discovery": "^0.0.7",
+    "smoldot": "^2.0.29",
     "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,15 @@
 
 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 { chrome } from '@polkadot/extension-inject/chrome';
 
+import { CHANNEL_ID } from './constants';
+
+register(CHANNEL_ID);
+
 // connect to the extension
 const port = chrome.runtime.connect({ name: PORT_CONTENT });
 

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 { SmoldotExtensionProviderDetail } from '@substrate/smoldot-discovery/types';
 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 { connector } from '@substrate/smoldot-discovery';
+
 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 { fromHex, toHex } from '@polkadot-api/utils';
 
+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 lightClientProviderPromise = getLightClientProvider(CHANNEL_ID);
+
+// #region Smoldot Discovery Provider
+{
+  const provider = lightClientProviderPromise
+    .then((provider) => connector.make({ lightClientProvider: provider }));
+
+  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 = lightClientProviderPromise.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',