From 46131f479a694be804657a1f113bda560a1a8120 Mon Sep 17 00:00:00 2001 From: Viktor Vasas Date: Mon, 14 Oct 2024 23:40:58 +0200 Subject: [PATCH] feat: add selectwallet click event --- .../providers/MultiWalletProviderProxy.ts | 40 +++-------- .../providers/initializeInpageProvider.ts | 12 ---- src/pages/ApproveAction/SelectWallet.tsx | 21 +++--- .../components/WalletExtensionButton.tsx | 67 +++++++------------ 4 files changed, 48 insertions(+), 92 deletions(-) diff --git a/src/background/providers/MultiWalletProviderProxy.ts b/src/background/providers/MultiWalletProviderProxy.ts index a9d86c9b..70fa53bc 100644 --- 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 { // 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 index dd4e1191..e52b2a29 100644 --- 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 index f074661d..eddbe2bd 100644 --- 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() { - {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 ( - { - selectWallet(i); + selectWallet(index); }} info={info} /> @@ -65,12 +67,11 @@ export function SelectWallet() { return; })} {request.displayData.info.length > 1 && ( - { - // selectWallet(i); - console.log('selectWAlelt'); + { + 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 index 2a68fba3..c9bb56c5 100644 --- 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)} */} {info?.name || t('Unknown')} ); } -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 ( - + setIsMenuOpen(false)}> @@ -131,27 +116,27 @@ export function NewButton({ width: '180px', }} > - {wallets.map((wallet) => { - if (wallet.rdns === 'app.core.extension') { - return; - } - return ( - console.log('StyledMenuItem onclick')} - data-testid="add-import-account" - key={wallet.name} - sx={{ py: 1 }} - > - - {wallet.name} - - ); - })} + {wallets && + wallets.map((wallet, index) => { + if (wallet.rdns === 'app.core.extension') { + return; + } + return ( + onClick(index)} + data-testid="add-import-account" + key={wallet.name} + sx={{ py: 1 }} + > + + {wallet.name} + + ); + })} )}