feat: add ew method to get extensions

src/background/providers/MultiWalletProviderProxy.ts

@@ -8,6 +8,7 @@ import { getWalletExtensionType } from './utils/getWalletExtensionType';
 import { Maybe } from '@avalabs/core-utils-sdk';
 import EventEmitter from 'events';
 import { EVMProvider } from '@avalabs/evm-module/dist/provider';
+import { EIP6963ProviderDetail } from '@avalabs/vm-module-types';
 
 export class MultiWalletProviderProxy extends EventEmitter {
   #_providers: unknown[] = [];
@@ -64,8 +65,10 @@ export class MultiWalletProviderProxy extends EventEmitter {
     });
   }
 
-  public addProvider(provider) {
+  public addProvider(providerDetail) {
+    console.log('providerDetail: ', providerDetail);
     // the COINBASE collects here the wallets
+    /*
     if (provider.providerMap) {
       for (const providerProxy of provider.providerMap.values()) {
         if (
@@ -77,14 +80,22 @@ export class MultiWalletProviderProxy extends EventEmitter {
       }
       return;
     }
+      */
 
     // the coinbase would add another proxy which is useless for us
-    if (provider.coinbaseWalletInstalls) {
-      return;
-    }
-
-    if (!this.#_providers.includes(provider)) {
-      this.#_providers.push(provider);
+    // if (providerDetail.coinbaseWalletInstalls) {
+    //   return;
+    // }
+
+    const isProviderAdded = this.#_providers.find(
+      (provider) => provider.info.uuid === providerDetail.info.uuid
+    );
+    console.log('isProviderAdded: ', isProviderAdded);
+    if (!isProviderAdded) {
+      console.log('providerDetail: ', providerDetail);
+      console.log('ADD -++++--_');
+      this.#_providers.push(providerDetail);
+      console.log('this.#_providers: ', this.#_providers);
     }
   }
 
@@ -105,6 +116,7 @@ export class MultiWalletProviderProxy extends EventEmitter {
           return {
             index: i,
             type,
+            info: p.info,
           };
         }),
       ],

src/background/providers/initializeInpageProvider.ts

@@ -17,6 +17,7 @@ export function initializeProvider(
   maxListeners = 100,
   globalObject = window
 ): EVMProvider {
+  console.log('initializeProvider globalObject: ', globalObject);
   const chainAgnosticProvider = new Proxy(
     new ChainAgnosticProvider(connection),
     {
@@ -44,10 +45,27 @@ export function initializeProvider(
       deleteProperty: () => true,
     }
   );
+  const multiWalletProxy = createMultiWalletProxy(evmProvider);
+
+  globalObject.addEventListener('eip6963:announceProvider', (event: any) => {
+    // console.log('event: ', event.detail);
+    multiWalletProxy.addProvider(
+      new Proxy(
+        {
+          info: { ...event.detail.info },
+          ...event.detail.provider,
+        },
+        {
+          deleteProperty: () => true,
+          set: () => true,
+        }
+      )
+    );
+  });
 
-  setGlobalProvider(evmProvider, globalObject);
+  setGlobalProvider(evmProvider, globalObject, multiWalletProxy);
   setAvalancheGlobalProvider(evmProvider, globalObject);
-  setEvmproviders(evmProvider, globalObject);
+  // setEvmproviders(evmProvider, globalObject);
   announceWalletProvider(evmProvider, globalObject);
   announceChainAgnosticProvider(chainAgnosticProvider, globalObject);
 
@@ -62,23 +80,28 @@ export function initializeProvider(
  */
 function setGlobalProvider(
   providerInstance: EVMProvider,
-  globalObject = window
+  globalObject = window,
+  multiWalletProxy
 ): void {
+  // console.log('globalObject: ', globalObject);
+  // console.log('globalObject.ethereum: ', globalObject.ethereum);
+  // console.log('globalObject.phatnom: ', globalObject.phantom);
   try {
-    const multiWalletProxy = createMultiWalletProxy(providerInstance);
+    // const multiWalletProxy = createMultiWalletProxy(providerInstance);
 
     // if we already have a wallet lets add it
-    if (globalObject.ethereum) {
-      multiWalletProxy.addProvider(globalObject.ethereum);
-    }
+    // if (globalObject.ethereum) {
+    //   console.log('addProvider globalObject.ethereum: ', globalObject.ethereum);
+    //   multiWalletProxy.addProvider(globalObject.ethereum);
+    // }
 
     Object.defineProperty(globalObject, 'ethereum', {
       get: () => {
         return multiWalletProxy;
       },
       // in case a wallet tries to overwrite us lets add them to the list
-      set: (value) => {
-        multiWalletProxy.addProvider(value);
+      set: () => {
+        return multiWalletProxy;
       },
     });
 

src/background/providers/models.ts

@@ -24,6 +24,11 @@ export interface EIP6963ProviderDetail {
   provider: Eip1193Provider;
 }
 
+export interface EIP6963AnnounceProviderEvent extends CustomEvent {
+  type: 'eip6963:announceProvider';
+  detail: EIP6963ProviderDetail;
+}
+
 export enum EventNames {
   CORE_WALLET_ANNOUNCE_PROVIDER = 'core-wallet:announceProvider',
   CORE_WALLET_REQUEST_PROVIDER = 'core-wallet:requestProvider',

src/background/providers/utils/getWalletExtensionType.ts

@@ -2,9 +2,19 @@ import { WalletExtensionType } from '../../services/web3/models';
 
 // using any since we don't really know what properties other wallets define
 export function getWalletExtensionType(provider: any): WalletExtensionType {
+  console.log('provider: ', provider);
   if (provider.isAvalanche) {
     return WalletExtensionType.CORE;
   }
+  if (provider.isPhantom) {
+    return WalletExtensionType.PHANTOM;
+  }
+  if (provider.isKeplr) {
+    return WalletExtensionType.KEPLR;
+  }
+  if (provider.isZerion) {
+    return WalletExtensionType.ZERION;
+  }
   if (provider.isRabby) {
     return WalletExtensionType.RABBY;
   }

src/background/services/web3/handlers/avalanche_selectWallet.ts

@@ -13,6 +13,7 @@ export class AvalancheSelectWalletHandler extends DAppRequestHandler {
   handleUnauthenticated = async (rpcCall) => {
     const { request } = rpcCall;
     const [availableExtensions] = request.params;
+    console.log('availableExtensions: ', availableExtensions);
 
     if (!availableExtensions || availableExtensions.length === 0) {
       return {
@@ -26,6 +27,7 @@ export class AvalancheSelectWalletHandler extends DAppRequestHandler {
         ...request,
         displayData: {
           options: availableExtensions.map((o) => o.type),
+          info: availableExtensions.map((extension) => extension.info),
         },
       },
       `approve/select-wallet`

src/background/services/web3/models.ts

@@ -4,4 +4,7 @@ export enum WalletExtensionType {
   UNKNOWN = 'UNKNOWN',
   RABBY = 'RABBY',
   COINBASE = 'COINBASE',
+  PHANTOM = 'PHANTOM',
+  ZERION = 'ZERION',
+  KEPLR = 'KEPLR',
 }

src/pages/ApproveAction/SelectWallet.tsx

@@ -4,13 +4,17 @@ import { useApproveAction } from '@src/hooks/useApproveAction';
 import { useGetRequestId } from '@src/hooks/useGetRequestId';
 import { useCallback } from 'react';
 import { LoadingOverlay } from '../../components/common/LoadingOverlay';
-import { WalletExtensionButton } from '../Wallet/components/WalletExtensionButton';
+import {
+  NewButton,
+  WalletExtensionButton,
+} from '../Wallet/components/WalletExtensionButton';
 import { Trans } from 'react-i18next';
 import { Stack, Typography, WalletIcon } from '@avalabs/core-k2-components';
 
 export function SelectWallet() {
   const requestId = useGetRequestId();
   const { action: request, updateAction } = useApproveAction(requestId);
+  console.log('request: ', request);
 
   const selectWallet = useCallback(
     async (index: number | string) =>
@@ -46,15 +50,30 @@ export function SelectWallet() {
         </Typography>
       </Stack>
       <Stack>
-        {request.displayData.options.map((option, i) => (
-          <WalletExtensionButton
-            key={i}
+        {request.displayData.info.map((info, i) => {
+          if (info.rdns === 'app.core.extension') {
+            return (
+              <WalletExtensionButton
+                key={i}
+                onClick={() => {
+                  selectWallet(i);
+                }}
+                info={info}
+              />
+            );
+          }
+          return;
+        })}
+        {request.displayData.info.length > 1 && (
+          <NewButton
             onClick={() => {
-              selectWallet(i);
+              // selectWallet(i);
+              console.log('selectWAlelt');
             }}
-            type={option}
+            // info={info}
+            wallets={request.displayData.info}
           />
-        ))}
+        )}
       </Stack>
     </Stack>
   );