feat: add selectwallet click event

ava-labs · Oct 14, 2024 · 46131f4 · 46131f4
1 parent c95212a
commit 46131f4
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 92 deletions.
diff --git a/src/background/providers/MultiWalletProviderProxy.ts b/src/background/providers/MultiWalletProviderProxy.ts
@@ -8,10 +8,9 @@ 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[] = [];
+  #_providers: EVMProvider[] = [];
   #isWalletSelected = false;
   #defaultProvider;
 
@@ -66,41 +65,21 @@ export class MultiWalletProviderProxy extends EventEmitter {
   }
 
   public addProvider(providerDetail) {
-    console.log('providerDetail: ', providerDetail);
-    // the COINBASE collects here the wallets
-    /*
-    if (provider.providerMap) {
-      for (const providerProxy of provider.providerMap.values()) {
-        if (
-          !providerProxy.isAvalanche && // we exclude Core being duplicated
-          !this.#_providers.includes(providerProxy)
-        ) {
-          this.#_providers.push(providerProxy);
-        }
-      }
-      return;
-    }
-      */
-
-    // the coinbase would add another proxy which is useless for us
-    // 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);
     }
   }
 
   async #toggleWalletSelection(): Promise<void> {
     // no need to select a wallet when there is only one
+    console.log(
+      'toggleWalletSelection this.#isWalletSelected: ',
+      this.#isWalletSelected
+    );
     if (this.#_providers.length === 1 || this.#isWalletSelected) {
       return;
     }
@@ -122,6 +101,8 @@ export class MultiWalletProviderProxy extends EventEmitter {
       ],
     });
 
+    console.log('selectedIndex: ', selectedIndex);
+
     if (
       selectedIndex === undefined ||
       selectedIndex === null ||
@@ -153,6 +134,7 @@ export class MultiWalletProviderProxy extends EventEmitter {
     if (this.#_providers[selectedIndex]) {
       this.#isWalletSelected = true;
     }
+    console.log(' this.#isWalletSelected: ', this.#isWalletSelected);
 
     // set default wallet for this connection
     this.#defaultProvider =
@@ -278,7 +260,7 @@ export function createMultiWalletProxy(evmProvider: EVMProvider) {
     // intercept unknow calls that are meant to be handled by the current provider
     // and forward them if needed so that we don't have to implement all the custom
     // functions any given wallet provider might expose
-    get: (target, prop, receiver) => {
+    get: (_, prop, receiver) => {
       // if the proxy has the function call it
       if (proxyProvider[prop]) {
         return proxyProvider[prop];
@@ -292,7 +274,7 @@ export function createMultiWalletProxy(evmProvider: EVMProvider) {
       // check if the request param is an extension defined by the dApp
       return Reflect.get(walletProviderExtensions, prop, receiver);
     },
-    set(obj, prop, value) {
+    set(_, prop, value) {
       Reflect.set(walletProviderExtensions, prop, value);
       return true;
     },

diff --git a/src/background/providers/initializeInpageProvider.ts b/src/background/providers/initializeInpageProvider.ts
@@ -48,7 +48,6 @@ export function initializeProvider(
   const multiWalletProxy = createMultiWalletProxy(evmProvider);
 
   globalObject.addEventListener('eip6963:announceProvider', (event: any) => {
-    // console.log('event: ', event.detail);
     multiWalletProxy.addProvider(
       new Proxy(
         {
@@ -65,7 +64,6 @@ export function initializeProvider(
 
   setGlobalProvider(evmProvider, globalObject, multiWalletProxy);
   setAvalancheGlobalProvider(evmProvider, globalObject);
-  // setEvmproviders(evmProvider, globalObject);
   announceWalletProvider(evmProvider, globalObject);
   announceChainAgnosticProvider(chainAgnosticProvider, globalObject);
 
@@ -152,16 +150,6 @@ function setAvalancheGlobalProvider(
   globalObject.dispatchEvent(new Event('avalanche#initialized'));
 }
 
-function setEvmproviders(
-  providerInstance: EVMProvider,
-  globalObject = window
-): void {
-  globalObject.evmproviders = globalObject.evmproviders || {};
-  globalObject.evmproviders.core = providerInstance;
-
-  globalObject.dispatchEvent(new Event('evmproviders#initialized'));
-}
-
 function announceWalletProvider(
   providerInstance: EVMProvider,
   globalObject = window

diff --git a/src/pages/ApproveAction/SelectWallet.tsx b/src/pages/ApproveAction/SelectWallet.tsx
@@ -5,8 +5,8 @@ import { useGetRequestId } from '@src/hooks/useGetRequestId';
 import { useCallback } from 'react';
 import { LoadingOverlay } from '../../components/common/LoadingOverlay';
 import {
-  NewButton,
   WalletExtensionButton,
+  CoreExtensionButton,
 } from '../Wallet/components/WalletExtensionButton';
 import { Trans } from 'react-i18next';
 import { Stack, Typography, WalletIcon } from '@avalabs/core-k2-components';
@@ -50,13 +50,15 @@ export function SelectWallet() {
         </Typography>
       </Stack>
       <Stack>
-        {request.displayData.info.map((info, i) => {
+        {request.displayData.info.map((info, index) => {
+          console.log('index: ', index);
+          console.log('info: ', info);
           if (info.rdns === 'app.core.extension') {
             return (
-              <WalletExtensionButton
-                key={i}
+              <CoreExtensionButton
+                key={index}
                 onClick={() => {
-                  selectWallet(i);
+                  selectWallet(index);
                 }}
                 info={info}
               />
@@ -65,12 +67,11 @@ export function SelectWallet() {
           return;
         })}
         {request.displayData.info.length > 1 && (
-          <NewButton
-            onClick={() => {
-              // selectWallet(i);
-              console.log('selectWAlelt');
+          <WalletExtensionButton
+            onClick={(index) => {
+              console.log('selectWallet' + index);
+              selectWallet(index);
             }}
-            // info={info}
             wallets={request.displayData.info}
           />
         )}

diff --git a/src/pages/Wallet/components/WalletExtensionButton.tsx b/src/pages/Wallet/components/WalletExtensionButton.tsx
@@ -4,18 +4,13 @@ import {
   ButtonGroup,
   ChevronDownIcon,
   ClickAwayListener,
-  CoinbaseWalletIcon,
-  CoreIcon,
   Grow,
-  KeyIcon,
   MenuItem,
   MenuList,
-  MetaMaskIcon,
   Popper,
   Stack,
   styled,
   Typography,
-  WalletIcon,
 } from '@avalabs/core-k2-components';
 
 import { WalletExtensionType } from '@src/background/services/web3/models';
@@ -25,7 +20,7 @@ import { useRef, useState } from 'react';
 interface WalletExtensionButtonProps {
   type?: WalletExtensionType;
   info?: EIP6963ProviderInfo;
-  onClick: () => void;
+  onClick: (index: number) => void;
   wallets?: EIP6963ProviderInfo[];
 }
 
@@ -40,7 +35,7 @@ const StyledButtonGroup = styled(ButtonGroup)`
   border-radius: 999px;
 `;
 
-export function WalletExtensionButton({
+export function CoreExtensionButton({
   info,
   onClick,
 }: WalletExtensionButtonProps) {
@@ -55,30 +50,21 @@ export function WalletExtensionButton({
       onClick={onClick}
       fullWidth
     >
-      {/* {getWalletLogo(type)}
-      {getWalletDisplayName(type)} */}
       <img src={info?.icon} width={24} height={24} />
       {info?.name || t('Unknown')}
     </Button>
   );
 }
 
-export function NewButton({
-  info,
-  onClick,
+export function WalletExtensionButton({
   wallets,
+  onClick,
 }: WalletExtensionButtonProps) {
-  console.log('wallets: ', wallets);
   const { t } = useTranslation();
   const toggleButtonRef = useRef();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   return (
-    <StyledButtonGroup
-      // disabled={disabled}
-      color="secondary"
-      variant="contained"
-      fullWidth
-    >
+    <StyledButtonGroup color="secondary" variant="contained" fullWidth>
       <ClickAwayListener onClickAway={() => setIsMenuOpen(false)}>
         <Stack sx={{ flexDirection: 'row', width: '100%' }}>
           <Button
@@ -90,7 +76,6 @@ export function NewButton({
               borderBottomLeftRadius: '999px !important',
             }}
             data-testid={'add-primary-account'}
-            // disabled={isButtonDisabled}
           >
             {t('Other Wallets')}
           </Button>
@@ -131,27 +116,27 @@ export function NewButton({
                       width: '180px',
                     }}
                   >
-                    {wallets.map((wallet) => {
-                      if (wallet.rdns === 'app.core.extension') {
-                        return;
-                      }
-                      return (
-                        <StyledMenuItem
-                          onClick={() => console.log('StyledMenuItem onclick')}
-                          data-testid="add-import-account"
-                          key={wallet.name}
-                          sx={{ py: 1 }}
-                        >
-                          <img
-                            src={wallet.icon}
-                            // width={24}
-                            height={24}
-                            style={{ paddingRight: '16px' }}
-                          />
-                          <Typography>{wallet.name}</Typography>
-                        </StyledMenuItem>
-                      );
-                    })}
+                    {wallets &&
+                      wallets.map((wallet, index) => {
+                        if (wallet.rdns === 'app.core.extension') {
+                          return;
+                        }
+                        return (
+                          <StyledMenuItem
+                            onClick={() => onClick(index)}
+                            data-testid="add-import-account"
+                            key={wallet.name}
+                            sx={{ py: 1 }}
+                          >
+                            <img
+                              src={wallet.icon}
+                              height={24}
+                              style={{ paddingRight: '16px' }}
+                            />
+                            <Typography>{wallet.name}</Typography>
+                          </StyledMenuItem>
+                        );
+                      })}
                   </MenuList>
                 </Grow>
               )}