From a7d921b8625cb5f51f4a536a6216d9ab6a51d5aa Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 19 Dec 2024 12:06:49 +0100 Subject: [PATCH 01/11] wip --- apps/laboratory/src/pages/library/wagmi.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/apps/laboratory/src/pages/library/wagmi.tsx b/apps/laboratory/src/pages/library/wagmi.tsx index 035dfd6df2..00c9f9a931 100644 --- a/apps/laboratory/src/pages/library/wagmi.tsx +++ b/apps/laboratory/src/pages/library/wagmi.tsx @@ -7,17 +7,13 @@ import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' import { createAppKit } from '@reown/appkit/react' import { ConstantsUtil } from '../../utils/ConstantsUtil' import { ThemeStore } from '../../utils/StoreUtil' -import { mainnet } from 'viem/chains' const queryClient = new QueryClient() const wagmiAdapter = new WagmiAdapter({ ssr: true, networks: ConstantsUtil.EvmNetworks, - projectId: ConstantsUtil.ProjectId, - transports: { - [mainnet.id]: http('https://foo-bar-baz.quiknode.pro') - } + projectId: ConstantsUtil.ProjectId }) const modal = createAppKit({ From 912ed0d21d0416e0df4c6a939a840086ad66d9be Mon Sep 17 00:00:00 2001 From: Sven Date: Tue, 7 Jan 2025 11:00:39 +0100 Subject: [PATCH 02/11] wip --- apps/laboratory/src/pages/library/wagmi.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/laboratory/src/pages/library/wagmi.tsx b/apps/laboratory/src/pages/library/wagmi.tsx index 00c9f9a931..1972e7f61d 100644 --- a/apps/laboratory/src/pages/library/wagmi.tsx +++ b/apps/laboratory/src/pages/library/wagmi.tsx @@ -1,5 +1,5 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { fallback, http, WagmiProvider } from 'wagmi' +import { WagmiProvider } from 'wagmi' import { AppKitButtons } from '../../components/AppKitButtons' import { WagmiTests } from '../../components/Wagmi/WagmiTests' import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo' From 1a5549497e098fb448f460d7c97701fa37ece613 Mon Sep 17 00:00:00 2001 From: Sven Date: Mon, 13 Jan 2025 16:14:18 +0100 Subject: [PATCH 03/11] wip --- .../w3m-swap-preview-view.test.ts | 40 ++++++++++++++++++- .../w3m-swap-select-token-view.test.ts | 0 .../{modal => views}/w3m-swap-view.test.ts | 0 .../w3m-wallet-send-preview-view.test.ts | 0 .../w3m-wallet-send-select-token-view.test.ts | 0 5 files changed, 39 insertions(+), 1 deletion(-) rename packages/scaffold-ui/test/{modal => views}/w3m-swap-preview-view.test.ts (81%) rename packages/scaffold-ui/test/{modal => views}/w3m-swap-select-token-view.test.ts (100%) rename packages/scaffold-ui/test/{modal => views}/w3m-swap-view.test.ts (100%) rename packages/scaffold-ui/test/{modal => views}/w3m-wallet-send-preview-view.test.ts (100%) rename packages/scaffold-ui/test/{modal => views}/w3m-wallet-send-select-token-view.test.ts (100%) diff --git a/packages/scaffold-ui/test/modal/w3m-swap-preview-view.test.ts b/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts similarity index 81% rename from packages/scaffold-ui/test/modal/w3m-swap-preview-view.test.ts rename to packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts index a17b5fd9b8..089659d944 100644 --- a/packages/scaffold-ui/test/modal/w3m-swap-preview-view.test.ts +++ b/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts @@ -1,6 +1,6 @@ import { expect as expectChai, html, fixture } from '@open-wc/testing' import { describe, it, afterEach, beforeEach, vi, expect } from 'vitest' -import { W3mSwapPreviewView } from '../../src/views/w3m-swap-preview-view' +import { W3mSwapPreviewView } from '../../src/Add test for views/w3m-swap-preview-view' import { SwapController, RouterController, @@ -283,3 +283,41 @@ describe('W3mSwapPreviewView', () => { expect(clearIntervalSpy).toHaveBeenCalled() }) }) +Add test for views/w3m-account-settings-view +Add test for views/w3m-account-view +Add test for views/w3m-all-wallets-view +Add test for views/w3m-approve-transaction-view +Add test for views/w3m-buy-in-progress-view +Add test for views/w3m-choose-account-name-view +Add test for views/w3m-connect-socials-view +Add test for views/w3m-connect-wallets-view +Add test for views/w3m-connecting-external-view +Add test for views/w3m-connecting-farcaster-view +Add test for views/w3m-connecting-multi-chain-view +Add test for views/w3m-connecting-wc-basic-view +Add test for views/w3m-downloads-view +Add test for views/w3m-email-verify-device-view +Add test for views/w3m-email-verify-otp-view +Add test for views/w3m-get-wallet-view +Add test for views/w3m-network-switch-view +Add test for views/w3m-networks-view +Add test for views/w3m-onramp-activity-view +Add test for views/w3m-onramp-fiat-select-view +Add test for views/w3m-onramp-providers-view +Add test for views/w3m-onramp-tokens-select-view +Add test for views/w3m-register-account-name-success-view +Add test for views/w3m-register-account-name-view +Add test for views/w3m-siwx-sign-message-view +Add test for views/w3m-switch-active-chain-view +Add test for views/w3m-switch-address-view +Add test for views/w3m-transactions-view +Add test for views/w3m-unsupported-chain-view +Add test for views/w3m-update-email-primary-otp-view +Add test for views/w3m-update-email-secondary-otp-view +Add test for views/w3m-update-email-wallet-view +Add test for views/w3m-upgrade-wallet-view +Add test for views/w3m-wallet-compatible-networks-view +Add test for views/w3m-wallet-receive-view +Add test for views/w3m-what-is-a-buy-view +Add test for views/w3m-what-is-a-network-view +Add test for views/w3m-what-is-a-wallet-view diff --git a/packages/scaffold-ui/test/modal/w3m-swap-select-token-view.test.ts b/packages/scaffold-ui/test/views/w3m-swap-select-token-view.test.ts similarity index 100% rename from packages/scaffold-ui/test/modal/w3m-swap-select-token-view.test.ts rename to packages/scaffold-ui/test/views/w3m-swap-select-token-view.test.ts diff --git a/packages/scaffold-ui/test/modal/w3m-swap-view.test.ts b/packages/scaffold-ui/test/views/w3m-swap-view.test.ts similarity index 100% rename from packages/scaffold-ui/test/modal/w3m-swap-view.test.ts rename to packages/scaffold-ui/test/views/w3m-swap-view.test.ts diff --git a/packages/scaffold-ui/test/modal/w3m-wallet-send-preview-view.test.ts b/packages/scaffold-ui/test/views/w3m-wallet-send-preview-view.test.ts similarity index 100% rename from packages/scaffold-ui/test/modal/w3m-wallet-send-preview-view.test.ts rename to packages/scaffold-ui/test/views/w3m-wallet-send-preview-view.test.ts diff --git a/packages/scaffold-ui/test/modal/w3m-wallet-send-select-token-view.test.ts b/packages/scaffold-ui/test/views/w3m-wallet-send-select-token-view.test.ts similarity index 100% rename from packages/scaffold-ui/test/modal/w3m-wallet-send-select-token-view.test.ts rename to packages/scaffold-ui/test/views/w3m-wallet-send-select-token-view.test.ts From 20c041793881fb2c93540336dd3ac6d7b04dfa6e Mon Sep 17 00:00:00 2001 From: Sven Date: Tue, 14 Jan 2025 11:45:28 +0100 Subject: [PATCH 04/11] wip --- .../test/views/w3m-swap-preview-view.test.ts | 40 +------------------ 1 file changed, 1 insertion(+), 39 deletions(-) diff --git a/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts b/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts index 089659d944..40b9c4f738 100644 --- a/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts +++ b/packages/scaffold-ui/test/views/w3m-swap-preview-view.test.ts @@ -1,6 +1,6 @@ import { expect as expectChai, html, fixture } from '@open-wc/testing' import { describe, it, afterEach, beforeEach, vi, expect } from 'vitest' -import { W3mSwapPreviewView } from '../../src/Add test for views/w3m-swap-preview-view' +import { W3mSwapPreviewView } from '../../exports' import { SwapController, RouterController, @@ -283,41 +283,3 @@ describe('W3mSwapPreviewView', () => { expect(clearIntervalSpy).toHaveBeenCalled() }) }) -Add test for views/w3m-account-settings-view -Add test for views/w3m-account-view -Add test for views/w3m-all-wallets-view -Add test for views/w3m-approve-transaction-view -Add test for views/w3m-buy-in-progress-view -Add test for views/w3m-choose-account-name-view -Add test for views/w3m-connect-socials-view -Add test for views/w3m-connect-wallets-view -Add test for views/w3m-connecting-external-view -Add test for views/w3m-connecting-farcaster-view -Add test for views/w3m-connecting-multi-chain-view -Add test for views/w3m-connecting-wc-basic-view -Add test for views/w3m-downloads-view -Add test for views/w3m-email-verify-device-view -Add test for views/w3m-email-verify-otp-view -Add test for views/w3m-get-wallet-view -Add test for views/w3m-network-switch-view -Add test for views/w3m-networks-view -Add test for views/w3m-onramp-activity-view -Add test for views/w3m-onramp-fiat-select-view -Add test for views/w3m-onramp-providers-view -Add test for views/w3m-onramp-tokens-select-view -Add test for views/w3m-register-account-name-success-view -Add test for views/w3m-register-account-name-view -Add test for views/w3m-siwx-sign-message-view -Add test for views/w3m-switch-active-chain-view -Add test for views/w3m-switch-address-view -Add test for views/w3m-transactions-view -Add test for views/w3m-unsupported-chain-view -Add test for views/w3m-update-email-primary-otp-view -Add test for views/w3m-update-email-secondary-otp-view -Add test for views/w3m-update-email-wallet-view -Add test for views/w3m-upgrade-wallet-view -Add test for views/w3m-wallet-compatible-networks-view -Add test for views/w3m-wallet-receive-view -Add test for views/w3m-what-is-a-buy-view -Add test for views/w3m-what-is-a-network-view -Add test for views/w3m-what-is-a-wallet-view From 02d2e7b7db264a05c4c5444653c97e6e4b4680b6 Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 15 Jan 2025 14:22:51 +0100 Subject: [PATCH 05/11] add test for w3m-connect-injected-widget --- .../w3m-connect-injected-widget.test.ts | 218 ++++++++++++++++++ 1 file changed, 218 insertions(+) create mode 100644 packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts diff --git a/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts b/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts new file mode 100644 index 0000000000..b53884e6e4 --- /dev/null +++ b/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts @@ -0,0 +1,218 @@ +import { W3mConnectInjectedWidget } from '../../src/partials/w3m-connect-injected-widget' +import { describe, it, expect, vi, beforeAll, afterEach, beforeEach } from 'vitest' +import { fixture, elementUpdated } from '@open-wc/testing' +import type { ConnectorWithProviders, ConnectorType } from '@reown/appkit-core' +import { + ApiController, + ConnectorController, + CoreHelperUtil, + RouterController, + ConnectionController +} from '@reown/appkit-core' +import { ConstantsUtil } from '@reown/appkit-common' +import { html } from 'lit' +import { HelpersUtil } from '../utils/HelpersUtil' + +// --- Constants ---------------------------------------------------- // +const MOCK_INJECTED_CONNECTOR: ConnectorWithProviders = { + id: 'mockInjected', + name: 'Mock Injected Wallet', + type: 'INJECTED' as ConnectorType, + info: { + rdns: 'mock.injected.wallet' + }, + provider: undefined, + chain: ConstantsUtil.CHAIN.EVM +} + +const BROWSER_WALLET_CONNECTOR: ConnectorWithProviders = { + id: 'browserWallet', + name: 'Browser Wallet', + type: 'INJECTED' as ConnectorType, + provider: undefined, + chain: ConstantsUtil.CHAIN.EVM +} + +describe('W3mConnectInjectedWidget', () => { + beforeAll(() => { + vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false) + }) + + beforeEach(() => { + vi.spyOn(ApiController, 'state', 'get').mockReturnValue({ + ...ApiController.state, + excludedRDNS: [] + }) + vi.spyOn(ConnectionController, 'checkInstalled').mockReturnValue(true) + }) + + afterEach(() => { + vi.resetAllMocks() + }) + + it('should not render anything if there are no injected connectors', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [] + }) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + expect(element.style.display).toBe('none') + }) + + it('should render injected connectors', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [MOCK_INJECTED_CONNECTOR] + }) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` + ) + expect(walletSelector).not.toBeNull() + expect(walletSelector.getAttribute('name')).toBe(MOCK_INJECTED_CONNECTOR.name) + expect(walletSelector.getAttribute('tagLabel')).toBe('installed') + expect(walletSelector.getAttribute('tagVariant')).toBe('success') + }) + + it('should not render excluded RDNS wallets', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [MOCK_INJECTED_CONNECTOR] + }) + + vi.spyOn(ApiController, 'state', 'get').mockReturnValue({ + ...ApiController.state, + excludedRDNS: ['mock.injected.wallet'] + }) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` + ) + expect(walletSelector).toBeNull() + }) + + it('should not render Browser Wallet on desktop', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [BROWSER_WALLET_CONNECTOR] + }) + vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${BROWSER_WALLET_CONNECTOR.id}` + ) + expect(walletSelector).toBeNull() + }) + + it('should render Browser Wallet on mobile', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [BROWSER_WALLET_CONNECTOR] + }) + vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(true) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + element.requestUpdate() + await elementUpdated(element) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${BROWSER_WALLET_CONNECTOR.id}` + ) + expect(walletSelector).not.toBeNull() + }) + + it('should route to ConnectingExternal on connector click', async () => { + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [MOCK_INJECTED_CONNECTOR] + }) + const setActiveConnectorSpy = vi.spyOn(ConnectorController, 'setActiveConnector') + const pushSpy = vi.spyOn(RouterController, 'push') + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` + ) + walletSelector.click() + + expect(setActiveConnectorSpy).toHaveBeenCalledWith(MOCK_INJECTED_CONNECTOR) + expect(pushSpy).toHaveBeenCalledWith('ConnectingExternal', { + connector: MOCK_INJECTED_CONNECTOR + }) + }) + + it('should handle unknown wallet names', async () => { + const unknownConnector: ConnectorWithProviders = { + ...MOCK_INJECTED_CONNECTOR, + name: undefined + } as unknown as ConnectorWithProviders + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [unknownConnector] + }) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + const walletSelector = HelpersUtil.getByTestId( + element, + `wallet-selector-${unknownConnector.id}` + ) + expect(walletSelector.getAttribute('name')).toBe('Unknown') + }) + + it('should not render when no RDNS and not installed', async () => { + const noRdnsConnector: ConnectorWithProviders = { + ...MOCK_INJECTED_CONNECTOR, + info: undefined + } + vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ + ...ConnectorController.state, + connectors: [noRdnsConnector] + }) + vi.spyOn(ConnectionController, 'checkInstalled').mockReturnValue(false) + + const element: W3mConnectInjectedWidget = await fixture( + html`` + ) + + expect(element.style.display).toBe('none') + }) +}) From 64b6b19c4b79d794c1da9fb682afd0579cf384cf Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 15 Jan 2025 14:27:29 +0100 Subject: [PATCH 06/11] wip --- .../w3m-connect-injected-widget.test.ts | 218 ------------------ 1 file changed, 218 deletions(-) delete mode 100644 packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts diff --git a/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts b/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts deleted file mode 100644 index b53884e6e4..0000000000 --- a/packages/scaffold-ui/test/partials/w3m-connect-injected-widget.test.ts +++ /dev/null @@ -1,218 +0,0 @@ -import { W3mConnectInjectedWidget } from '../../src/partials/w3m-connect-injected-widget' -import { describe, it, expect, vi, beforeAll, afterEach, beforeEach } from 'vitest' -import { fixture, elementUpdated } from '@open-wc/testing' -import type { ConnectorWithProviders, ConnectorType } from '@reown/appkit-core' -import { - ApiController, - ConnectorController, - CoreHelperUtil, - RouterController, - ConnectionController -} from '@reown/appkit-core' -import { ConstantsUtil } from '@reown/appkit-common' -import { html } from 'lit' -import { HelpersUtil } from '../utils/HelpersUtil' - -// --- Constants ---------------------------------------------------- // -const MOCK_INJECTED_CONNECTOR: ConnectorWithProviders = { - id: 'mockInjected', - name: 'Mock Injected Wallet', - type: 'INJECTED' as ConnectorType, - info: { - rdns: 'mock.injected.wallet' - }, - provider: undefined, - chain: ConstantsUtil.CHAIN.EVM -} - -const BROWSER_WALLET_CONNECTOR: ConnectorWithProviders = { - id: 'browserWallet', - name: 'Browser Wallet', - type: 'INJECTED' as ConnectorType, - provider: undefined, - chain: ConstantsUtil.CHAIN.EVM -} - -describe('W3mConnectInjectedWidget', () => { - beforeAll(() => { - vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false) - }) - - beforeEach(() => { - vi.spyOn(ApiController, 'state', 'get').mockReturnValue({ - ...ApiController.state, - excludedRDNS: [] - }) - vi.spyOn(ConnectionController, 'checkInstalled').mockReturnValue(true) - }) - - afterEach(() => { - vi.resetAllMocks() - }) - - it('should not render anything if there are no injected connectors', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [] - }) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - expect(element.style.display).toBe('none') - }) - - it('should render injected connectors', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [MOCK_INJECTED_CONNECTOR] - }) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - element.requestUpdate() - await elementUpdated(element) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` - ) - expect(walletSelector).not.toBeNull() - expect(walletSelector.getAttribute('name')).toBe(MOCK_INJECTED_CONNECTOR.name) - expect(walletSelector.getAttribute('tagLabel')).toBe('installed') - expect(walletSelector.getAttribute('tagVariant')).toBe('success') - }) - - it('should not render excluded RDNS wallets', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [MOCK_INJECTED_CONNECTOR] - }) - - vi.spyOn(ApiController, 'state', 'get').mockReturnValue({ - ...ApiController.state, - excludedRDNS: ['mock.injected.wallet'] - }) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - element.requestUpdate() - await elementUpdated(element) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` - ) - expect(walletSelector).toBeNull() - }) - - it('should not render Browser Wallet on desktop', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [BROWSER_WALLET_CONNECTOR] - }) - vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(false) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - element.requestUpdate() - await elementUpdated(element) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${BROWSER_WALLET_CONNECTOR.id}` - ) - expect(walletSelector).toBeNull() - }) - - it('should render Browser Wallet on mobile', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [BROWSER_WALLET_CONNECTOR] - }) - vi.spyOn(CoreHelperUtil, 'isMobile').mockReturnValue(true) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - element.requestUpdate() - await elementUpdated(element) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${BROWSER_WALLET_CONNECTOR.id}` - ) - expect(walletSelector).not.toBeNull() - }) - - it('should route to ConnectingExternal on connector click', async () => { - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [MOCK_INJECTED_CONNECTOR] - }) - const setActiveConnectorSpy = vi.spyOn(ConnectorController, 'setActiveConnector') - const pushSpy = vi.spyOn(RouterController, 'push') - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${MOCK_INJECTED_CONNECTOR.id}` - ) - walletSelector.click() - - expect(setActiveConnectorSpy).toHaveBeenCalledWith(MOCK_INJECTED_CONNECTOR) - expect(pushSpy).toHaveBeenCalledWith('ConnectingExternal', { - connector: MOCK_INJECTED_CONNECTOR - }) - }) - - it('should handle unknown wallet names', async () => { - const unknownConnector: ConnectorWithProviders = { - ...MOCK_INJECTED_CONNECTOR, - name: undefined - } as unknown as ConnectorWithProviders - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [unknownConnector] - }) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - const walletSelector = HelpersUtil.getByTestId( - element, - `wallet-selector-${unknownConnector.id}` - ) - expect(walletSelector.getAttribute('name')).toBe('Unknown') - }) - - it('should not render when no RDNS and not installed', async () => { - const noRdnsConnector: ConnectorWithProviders = { - ...MOCK_INJECTED_CONNECTOR, - info: undefined - } - vi.spyOn(ConnectorController, 'state', 'get').mockReturnValue({ - ...ConnectorController.state, - connectors: [noRdnsConnector] - }) - vi.spyOn(ConnectionController, 'checkInstalled').mockReturnValue(false) - - const element: W3mConnectInjectedWidget = await fixture( - html`` - ) - - expect(element.style.display).toBe('none') - }) -}) From c0d9f8147fd41f2be8b0f77ecd221a984cc0f290 Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 6 Feb 2025 11:02:55 +0100 Subject: [PATCH 07/11] fix demo social issue --- packages/appkit/src/client.ts | 3 + .../src/partials/w3m-header/index.ts | 5 +- .../views/w3m-connecting-social-view/index.ts | 3 +- .../test/partials/w3m-header.test.ts | 233 ++++++++++++++++++ .../views/w3m-connecting-social-view.test.ts | 74 ++++++ 5 files changed, 316 insertions(+), 2 deletions(-) create mode 100644 packages/scaffold-ui/test/partials/w3m-header.test.ts diff --git a/packages/appkit/src/client.ts b/packages/appkit/src/client.ts index cc84dc98aa..30dcde8bbe 100644 --- a/packages/appkit/src/client.ts +++ b/packages/appkit/src/client.ts @@ -464,6 +464,9 @@ export class AppKit { public setUser: (typeof AccountController)['setUser'] = user => { AccountController.setUser(user) + if (OptionsController.state.enableEmbedded) { + ModalController.close() + } } public resetAccount: (typeof AccountController)['resetAccount'] = (chain: ChainNamespace) => { diff --git a/packages/scaffold-ui/src/partials/w3m-header/index.ts b/packages/scaffold-ui/src/partials/w3m-header/index.ts index 08df5a51b8..4458bd5f32 100644 --- a/packages/scaffold-ui/src/partials/w3m-header/index.ts +++ b/packages/scaffold-ui/src/partials/w3m-header/index.ts @@ -134,7 +134,10 @@ export class W3mHeader extends LitElement { this.onHistoryChange() }), ConnectionController.subscribeKey('buffering', val => (this.buffering = val)), - ChainController.subscribeKey('activeCaipNetwork', val => (this.network = val)) + ChainController.subscribeKey('activeCaipNetwork', val => { + this.network = val + this.networkImage = AssetUtil.getNetworkImage(this.network) + }) ) } diff --git a/packages/scaffold-ui/src/views/w3m-connecting-social-view/index.ts b/packages/scaffold-ui/src/views/w3m-connecting-social-view/index.ts index 3189596f51..0b7c76d170 100644 --- a/packages/scaffold-ui/src/views/w3m-connecting-social-view/index.ts +++ b/packages/scaffold-ui/src/views/w3m-connecting-social-view/index.ts @@ -10,6 +10,7 @@ import { ConnectorController, EventsController, ModalController, + OptionsController, RouterController, SnackController, StorageUtil, @@ -52,7 +53,7 @@ export class W3mConnectingSocialView extends LitElement { this.socialWindow = val.socialWindow } if (val.address) { - if (ModalController.state.open) { + if (ModalController.state.open || OptionsController.state.enableEmbedded) { ModalController.close() } } diff --git a/packages/scaffold-ui/test/partials/w3m-header.test.ts b/packages/scaffold-ui/test/partials/w3m-header.test.ts new file mode 100644 index 0000000000..7588ad188a --- /dev/null +++ b/packages/scaffold-ui/test/partials/w3m-header.test.ts @@ -0,0 +1,233 @@ +import { elementUpdated, fixture } from '@open-wc/testing' +import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest' + +import { html } from 'lit' + +import type { CaipNetwork } from '@reown/appkit-common' +import { + AssetController, + AssetUtil, + ChainController, + EventsController, + ModalController, + OptionsController, + RouterController, + SIWXUtil +} from '@reown/appkit-core' + +import { W3mHeader } from '../../src/partials/w3m-header' +import { HelpersUtil } from '../utils/HelpersUtil' + +describe('W3mHeader', () => { + let element: W3mHeader + + beforeAll(() => { + Element.prototype.animate = vi.fn().mockReturnValue({ finished: Promise.resolve() }) + }) + + beforeEach(async () => { + vi.clearAllMocks() + RouterController.reset('Connect') + element = await fixture(html``) + await element.updateComplete + }) + + describe('Network Selection', () => { + const mockNetwork = { + id: '1', + name: 'Test Network', + chainNamespace: 'eip155', + caipNetworkId: 'eip155:1', + nativeCurrency: { name: 'Test', symbol: 'TEST', decimals: 18 }, + rpcUrls: { default: { http: ['https://test.com'] } } + } as unknown as CaipNetwork + + it('should render network select in Account view', async () => { + RouterController.state.view = 'Account' + element.requestUpdate() + await element.updateComplete + await elementUpdated(element) + + const networkSelect = HelpersUtil.getByTestId(element, 'w3m-account-select-network') + expect(networkSelect).toBeTruthy() + }) + + it('should update network image when network changes', async () => { + RouterController.state.view = 'Account' + element.requestUpdate() + await element.updateComplete + + const getNetworkImageSpy = vi.spyOn(AssetUtil, 'getNetworkImage') + ChainController.setActiveCaipNetwork(mockNetwork) + await elementUpdated(element) + + const networkSelect = HelpersUtil.getByTestId(element, 'w3m-account-select-network') + expect(networkSelect?.getAttribute('active-network')).toBe('Test Network') + expect(getNetworkImageSpy).toHaveBeenCalledWith(mockNetwork) + }) + + it('should update network image when AssetController emits new images', async () => { + RouterController.state.view = 'Account' + element.requestUpdate() + await element.updateComplete + + let subscriberCallback: Function | undefined + vi.spyOn(AssetController, 'subscribeNetworkImages').mockImplementation(callback => { + subscriberCallback = callback + return () => undefined + }) + + element = await fixture(html``) + await element.updateComplete + + ChainController.setActiveCaipNetwork(mockNetwork) + await elementUpdated(element) + + const getNetworkImageSpy = vi.spyOn(AssetUtil, 'getNetworkImage') + + // Simulate AssetController emitting new network images + if (subscriberCallback) { + subscriberCallback() + } + + expect(getNetworkImageSpy).toHaveBeenCalledWith(mockNetwork) + }) + }) + + describe('Back Button', () => { + it('should show back button when history length > 1', async () => { + RouterController.push('Networks') + await element.updateComplete + await elementUpdated(element) + + const backButton = HelpersUtil.getByTestId(element, 'header-back') + expect(backButton).toBeTruthy() + }) + + it('should not show back button in ApproveTransaction view', async () => { + RouterController.state.view = 'ApproveTransaction' + element.requestUpdate() + await element.updateComplete + await elementUpdated(element) + + const backButton = HelpersUtil.getByTestId(element, 'header-back') + expect(backButton).toBeFalsy() + }) + + it('should call RouterController.goBack when back button is clicked', async () => { + const goBackSpy = vi.spyOn(RouterController, 'goBack') + RouterController.push('Networks') + await element.updateComplete + await elementUpdated(element) + + const backButton = HelpersUtil.getByTestId(element, 'header-back') + backButton?.click() + + expect(goBackSpy).toHaveBeenCalled() + }) + }) + + describe('Close Button', () => { + it('should render close button', async () => { + const closeButton = HelpersUtil.getByTestId(element, 'w3m-header-close') + expect(closeButton).toBeTruthy() + }) + + it('should call ModalController.close when close button is clicked', async () => { + const closeSpy = vi.spyOn(ModalController, 'close') + vi.spyOn(SIWXUtil, 'isSIWXCloseDisabled').mockResolvedValue(false) + + const closeButton = HelpersUtil.getByTestId(element, 'w3m-header-close') + await closeButton?.click() + + expect(closeSpy).toHaveBeenCalled() + }) + + it('should shake modal when trying to close in UnsupportedChain view', async () => { + const shakeSpy = vi.spyOn(ModalController, 'shake') + RouterController.state.view = 'UnsupportedChain' + element.requestUpdate() + await element.updateComplete + await elementUpdated(element) + + const closeButton = HelpersUtil.getByTestId(element, 'w3m-header-close') + await closeButton?.click() + + expect(shakeSpy).toHaveBeenCalled() + }) + }) + + describe('Smart Sessions', () => { + it('should show smart sessions button in Account view when enabled', async () => { + RouterController.state.view = 'Account' + OptionsController.state.features = { smartSessions: true } + element.requestUpdate() + await element.updateComplete + await elementUpdated(element) + + const smartSessionsButton = HelpersUtil.getByTestId(element, 'w3m-header-smart-sessions') + expect(smartSessionsButton).toBeTruthy() + }) + + it('should not show smart sessions button when disabled', async () => { + RouterController.state.view = 'Account' + OptionsController.state.features = { smartSessions: false } + element.requestUpdate() + await element.updateComplete + await elementUpdated(element) + + const smartSessionsButton = HelpersUtil.getByTestId(element, 'w3m-header-smart-sessions') + expect(smartSessionsButton).toBeFalsy() + }) + + it('should navigate to SmartSessionList when smart sessions button is clicked', async () => { + RouterController.state.view = 'Account' + OptionsController.state.features = { smartSessions: true } + element.requestUpdate() + await element.updateComplete + await elementUpdated(element) + + const smartSessionsButton = HelpersUtil.getByTestId(element, 'w3m-header-smart-sessions') + smartSessionsButton?.dispatchEvent(new Event('click')) + + expect(RouterController.state.view).toBe('SmartSessionList') + }) + }) + + describe('Help Button', () => { + it('should show help button in Connect view', async () => { + RouterController.state.view = 'Connect' + element.requestUpdate() + await element.updateComplete + await elementUpdated(element) + + const helpButton = element.shadowRoot?.querySelector('wui-icon-link[icon="helpCircle"]') + expect(helpButton).toBeTruthy() + }) + + it('should navigate to WhatIsAWallet when help button is clicked', async () => { + RouterController.state.view = 'Connect' + element.requestUpdate() + await element.updateComplete + await elementUpdated(element) + + const helpButton = element.shadowRoot?.querySelector('wui-icon-link[icon="helpCircle"]') + helpButton?.dispatchEvent(new Event('click')) + + expect(RouterController.state.view).toBe('WhatIsAWallet') + }) + + it('should track help button click event', async () => { + const trackSpy = vi.spyOn(EventsController, 'sendEvent') + RouterController.state.view = 'Connect' + element.requestUpdate() + await element.updateComplete + await elementUpdated(element) + + const helpButton = element.shadowRoot?.querySelector('wui-icon-link[icon="helpCircle"]') + helpButton?.dispatchEvent(new Event('click')) + + expect(trackSpy).toHaveBeenCalledWith({ type: 'track', event: 'CLICK_WALLET_HELP' }) + }) + }) +}) diff --git a/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts b/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts index 351233869e..9042db89aa 100644 --- a/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts +++ b/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts @@ -9,6 +9,8 @@ import { ChainController, ConnectionController, ConnectorController, + ModalController, + OptionsController, RouterController } from '@reown/appkit-core' @@ -54,3 +56,75 @@ describe('W3mConnectingSocialView - disconnectedCallback', () => { expect(setSocialWindowSpy).toHaveBeenCalledWith(undefined, 'eip155') }) }) + +describe('W3mConnectingSocialView - Embedded Modal Behavior', () => { + it('should close modal when address is set and enableEmbedded is true', async () => { + const mockSocialWindow = { + close: vi.fn(), + closed: false + } as unknown as Window + + let subscriptionCallback: ((val: any) => void) | undefined + + vi.spyOn(ModalController, 'close').mockImplementation(() => {}) + vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({ + ...OptionsController.state, + enableEmbedded: true + }) + vi.spyOn(AccountController, 'state', 'get').mockReturnValue({ + ...AccountController.state, + socialWindow: mockSocialWindow + }) + vi.spyOn(ModalController, 'state', 'get').mockReturnValue({ + ...ModalController.state, + open: true + }) + vi.spyOn(AccountController, 'subscribe').mockImplementation(callback => { + subscriptionCallback = callback + return () => {} + }) + + await fixture(html``) + + if (subscriptionCallback) { + subscriptionCallback({ address: '0x123' }) + } + + expect(ModalController.close).toHaveBeenCalled() + }) + + it('should not close modal when address is set but enableEmbedded is false', async () => { + const mockSocialWindow = { + close: vi.fn(), + closed: false + } as unknown as Window + + let subscriptionCallback: ((val: any) => void) | undefined + + vi.spyOn(ModalController, 'close').mockImplementation(() => {}) + vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({ + ...OptionsController.state, + enableEmbedded: false + }) + vi.spyOn(AccountController, 'state', 'get').mockReturnValue({ + ...AccountController.state, + socialWindow: mockSocialWindow + }) + vi.spyOn(ModalController, 'state', 'get').mockReturnValue({ + ...ModalController.state, + open: false + }) + vi.spyOn(AccountController, 'subscribe').mockImplementation(callback => { + subscriptionCallback = callback + return () => {} + }) + + await fixture(html``) + + if (subscriptionCallback) { + subscriptionCallback({ address: '0x123' }) + } + + expect(ModalController.close).not.toHaveBeenCalled() + }) +}) From 58d8381afeb7c56e6d1b00cd4716b7be82662648 Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 6 Feb 2025 12:42:01 +0100 Subject: [PATCH 08/11] fix test --- .../scaffold-ui/test/views/w3m-connecting-social-view.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts b/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts index 9042db89aa..c110a3a5d3 100644 --- a/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts +++ b/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts @@ -67,7 +67,7 @@ describe('W3mConnectingSocialView - Embedded Modal Behavior', () => { let subscriptionCallback: ((val: any) => void) | undefined vi.spyOn(ModalController, 'close').mockImplementation(() => {}) - vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({ + vi.spyOn(OptionsController, 'state', 'get').mockReturnValueOnce({ ...OptionsController.state, enableEmbedded: true }) From 87758e89172175a761566f84ad1bc07c10e7b81b Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 6 Feb 2025 13:34:28 +0100 Subject: [PATCH 09/11] fix test for mock implementation once --- .../views/w3m-connecting-social-view.test.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts b/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts index c110a3a5d3..f5160375e6 100644 --- a/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts +++ b/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts @@ -29,17 +29,19 @@ describe('W3mConnectingSocialView - disconnectedCallback', () => { } } as unknown as AuthConnector - vi.spyOn(ConnectionController, 'connectExternal').mockImplementation(() => Promise.resolve()) - vi.spyOn(ConnectorController, 'getAuthConnector').mockReturnValue(mockAuthConnector) - vi.spyOn(AccountController, 'state', 'get').mockReturnValue({ + vi.spyOn(ConnectionController, 'connectExternal').mockImplementationOnce(() => + Promise.resolve() + ) + vi.spyOn(ConnectorController, 'getAuthConnector').mockReturnValueOnce(mockAuthConnector) + vi.spyOn(AccountController, 'state', 'get').mockReturnValueOnce({ ...AccountController.state, socialWindow: mockSocialWindow }) - vi.spyOn(RouterController, 'state', 'get').mockReturnValue({ + vi.spyOn(RouterController, 'state', 'get').mockReturnValueOnce({ ...RouterController.state, view: 'ConnectingSocial' }) - vi.spyOn(ChainController, 'state', 'get').mockReturnValue({ + vi.spyOn(ChainController, 'state', 'get').mockReturnValueOnce({ ...ChainController.state, activeChain: 'eip155' }) @@ -71,11 +73,11 @@ describe('W3mConnectingSocialView - Embedded Modal Behavior', () => { ...OptionsController.state, enableEmbedded: true }) - vi.spyOn(AccountController, 'state', 'get').mockReturnValue({ + vi.spyOn(AccountController, 'state', 'get').mockReturnValueOnce({ ...AccountController.state, socialWindow: mockSocialWindow }) - vi.spyOn(ModalController, 'state', 'get').mockReturnValue({ + vi.spyOn(ModalController, 'state', 'get').mockReturnValueOnce({ ...ModalController.state, open: true }) From 19002552d276555af00483752facae4db8845d7b Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 6 Feb 2025 13:41:22 +0100 Subject: [PATCH 10/11] fix test for mock implementation once --- .../test/views/w3m-connecting-social-view.test.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts b/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts index f5160375e6..be077d3ed0 100644 --- a/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts +++ b/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts @@ -29,19 +29,17 @@ describe('W3mConnectingSocialView - disconnectedCallback', () => { } } as unknown as AuthConnector - vi.spyOn(ConnectionController, 'connectExternal').mockImplementationOnce(() => - Promise.resolve() - ) - vi.spyOn(ConnectorController, 'getAuthConnector').mockReturnValueOnce(mockAuthConnector) - vi.spyOn(AccountController, 'state', 'get').mockReturnValueOnce({ + vi.spyOn(ConnectionController, 'connectExternal').mockImplementation(() => Promise.resolve()) + vi.spyOn(ConnectorController, 'getAuthConnector').mockReturnValue(mockAuthConnector) + vi.spyOn(AccountController, 'state', 'get').mockReturnValue({ ...AccountController.state, socialWindow: mockSocialWindow }) - vi.spyOn(RouterController, 'state', 'get').mockReturnValueOnce({ + vi.spyOn(RouterController, 'state', 'get').mockReturnValue({ ...RouterController.state, view: 'ConnectingSocial' }) - vi.spyOn(ChainController, 'state', 'get').mockReturnValueOnce({ + vi.spyOn(ChainController, 'state', 'get').mockReturnValue({ ...ChainController.state, activeChain: 'eip155' }) From 67930655b3b7d096b7ed7a81168e8e4846606617 Mon Sep 17 00:00:00 2001 From: Sven Date: Thu, 6 Feb 2025 13:42:25 +0100 Subject: [PATCH 11/11] fix test for mock implementation once --- .../test/views/w3m-connecting-social-view.test.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts b/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts index be077d3ed0..3f919f2e01 100644 --- a/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts +++ b/packages/scaffold-ui/test/views/w3m-connecting-social-view.test.ts @@ -79,7 +79,7 @@ describe('W3mConnectingSocialView - Embedded Modal Behavior', () => { ...ModalController.state, open: true }) - vi.spyOn(AccountController, 'subscribe').mockImplementation(callback => { + vi.spyOn(AccountController, 'subscribe').mockImplementationOnce(callback => { subscriptionCallback = callback return () => {} }) @@ -101,20 +101,20 @@ describe('W3mConnectingSocialView - Embedded Modal Behavior', () => { let subscriptionCallback: ((val: any) => void) | undefined - vi.spyOn(ModalController, 'close').mockImplementation(() => {}) - vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({ + vi.spyOn(ModalController, 'close').mockImplementationOnce(() => {}) + vi.spyOn(OptionsController, 'state', 'get').mockReturnValueOnce({ ...OptionsController.state, enableEmbedded: false }) - vi.spyOn(AccountController, 'state', 'get').mockReturnValue({ + vi.spyOn(AccountController, 'state', 'get').mockReturnValueOnce({ ...AccountController.state, socialWindow: mockSocialWindow }) - vi.spyOn(ModalController, 'state', 'get').mockReturnValue({ + vi.spyOn(ModalController, 'state', 'get').mockReturnValueOnce({ ...ModalController.state, open: false }) - vi.spyOn(AccountController, 'subscribe').mockImplementation(callback => { + vi.spyOn(AccountController, 'subscribe').mockImplementationOnce(callback => { subscriptionCallback = callback return () => {} })