Merge pull request #2188 from Koniverse/koni/dev/issue-2021

[Issue-2021] Support EIP-6963 (Multi eth provider)

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

@@ -345,7 +345,7 @@ export default class KoniTabs {
     }
   }
 
-  private async getEvmCurrentAccount (url: string, getAll = false): Promise<string[]> {
+  private async getEvmCurrentAccount (url: string): Promise<string[]> {
     return await new Promise((resolve) => {
       this.getAuthInfo(url).then((authInfo) => {
         const allAccounts = this.#koniState.keyringService.accounts;
@@ -354,10 +354,17 @@ export default class KoniTabs {
 
         const address = this.#koniState.keyringService.currentAccount.address;
 
-        if (address === ALL_ACCOUNT_KEY || !accountList.includes(address) || getAll) {
+        if (address === ALL_ACCOUNT_KEY || !address) {
           accounts = accountList;
-        } else if (address && accountList.includes(address)) {
-          accounts = ([address]);
+        } else {
+          if (accountList.includes(address)) {
+            const result = accountList.filter((adr) => adr !== address);
+
+            result.unshift(address);
+            accounts = result;
+          } else {
+            accounts = accountList;
+          }
         }
 
         resolve(accounts);
@@ -432,7 +439,7 @@ export default class KoniTabs {
   }
 
   private async getEvmPermission (url: string, id: string) {
-    const accounts = await this.getEvmCurrentAccount(url, true);
+    const accounts = await this.getEvmCurrentAccount(url);
 
     return [{
       id: id,
@@ -844,13 +851,13 @@ export default class KoniTabs {
   }
 
   public async canUseAccount (address: string, url: string) {
-    const allowedAccounts = await this.getEvmCurrentAccount(url, true);
+    const allowedAccounts = await this.getEvmCurrentAccount(url);
 
     return !!allowedAccounts.find((acc) => (acc.toLowerCase() === address.toLowerCase()));
   }
 
   private async evmSign (id: string, url: string, { method, params }: RequestArguments) {
-    const allowedAccounts = (await this.getEvmCurrentAccount(url, true));
+    const allowedAccounts = (await this.getEvmCurrentAccount(url));
     const signResult = await this.#koniState.evmSign(id, url, method, params, allowedAccounts);
 
     if (signResult) {
@@ -874,7 +881,7 @@ export default class KoniTabs {
       throw new Error('Network unavailable. Please switch network or manually add network to wallet');
     }
 
-    const allowedAccounts = await this.getEvmCurrentAccount(url, true);
+    const allowedAccounts = await this.getEvmCurrentAccount(url);
     const transactionHash = await this.#koniState.evmSendTransaction(id, url, networkKey, allowedAccounts, transactionParams);
 
     if (!transactionHash) {

packages/extension-inject/src/bundle.ts

@@ -3,7 +3,7 @@
 
 import type { Injected, InjectedWindow, InjectOptions } from './types';
 
-import { EvmProvider } from './types';
+import { EIP6963ProviderDetail, EIP6963ProviderInfo, EvmProvider } from './types';
 
 export { packageInfo } from './packageInfo';
 
@@ -47,9 +47,43 @@ export function injectEvmExtension (evmProvider: EvmProvider): void {
       windowInject.ethereum = evmProvider;
       windowInject.dispatchEvent(new Event('ethereum#initialized'));
     }
+
+    inject6963EIP(evmProvider);
   });
 
   // Todo: Need more discuss to make SubWallet as global before window load because it can be conflict with MetaMask
   // windowInject.ethereum = evmProvider;
   // windowInject.dispatchEvent(new Event('ethereum#initialized'));
 }
+
+export const inject6963EIP = (provider: EvmProvider) => {
+  // TODO: Need to confirm that infomation
+  const info: EIP6963ProviderInfo = {
+    uuid: '10c67337-9211-48d9-aab0-cecdc4224acc',
+    name: 'SubWallet',
+    icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODAgNGM1Ny42MyAwIDc2IDE4LjM3IDc2IDc2IDAgNTcuNjMtMTguMzcgNzYtNzYgNzYtNTcuNjMgMC03Ni0xOC4zNy03Ni03NkM0IDIyLjM3IDIyLjM3IDQgODAgNFoiIGZpbGw9InVybCgjYSkiLz48ZyBjbGlwLXBhdGg9InVybCgjYikiPjxwYXRoIGQ9Ik0xMTIuNjE1IDY2LjcyVjUzLjM5OEw1OC43NiAzMiA0OCAzNy40MTJsLjA1NyA0MS40NjQgNDAuMjkyIDE2LjA3LTIxLjUyIDkuMDc1di03LjAxOEw1Ni45NSA5My4wM2wtOC44OTMgNC4xNjN2MjUuMzk1TDU4Ljc2OSAxMjhsNTMuODQ2LTI0LjA2MlY4Ni44NjlMNjQuMTU0IDY3LjY1N1Y1NmwzOC40NDkgMTUuMjE2IDEwLjAxMi00LjQ5NloiIGZpbGw9IiNmZmYiLz48L2c+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iODAiIHkxPSI0IiB4Mj0iODAiIHkyPSIxNTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDA0QkZGIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNENFQUFDIi8+PC9saW5lYXJHcmFkaWVudD48Y2xpcFBhdGggaWQ9ImIiPjxwYXRoIGZpbGw9IiNmZmYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4IDMyKSIgZD0iTTAgMGg2NC42MTV2OTZIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=',
+    rdns: 'extension.subwallet.app'
+  };
+
+  const _provider = new Proxy(provider, {
+    // TODO: Please review the security of this
+    get (target, key) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-return
+      return Reflect.get(target, key).bind(target);
+    },
+    deleteProperty () {
+      return true;
+    }
+  });
+
+  const announceProvider = () => {
+    const detail: EIP6963ProviderDetail = Object.freeze({ info: info, provider: _provider });
+    const event = new CustomEvent('eip6963:announceProvider', { detail });
+
+    window.dispatchEvent(event);
+  };
+
+  window.addEventListener('eip6963:requestProvider', announceProvider);
+
+  announceProvider();
+};

packages/extension-inject/src/types.ts

@@ -124,3 +124,24 @@ export interface Web3AccountsOptions {
   ss58Format?: number,
   accountType?: KeypairType[]
 }
+
+export interface EIP6963ProviderInfo {
+  uuid: string;
+  name: string;
+  icon: string;
+  rdns: string;
+}
+
+export interface EIP6963ProviderDetail {
+  info: EIP6963ProviderInfo;
+  provider: EvmProvider;
+}
+
+export interface EIP6963AnnounceProviderEvent extends CustomEvent {
+  type: 'eip6963:announceProvider';
+  detail: EIP6963ProviderDetail;
+}
+
+export interface EIP6963RequestProviderEvent extends Event {
+  type: 'eip6963:requestProvider';
+}