Merge pull request 'fix: fix: wallet connector panel not rendering at standard viewports — blocks all user funnels (#1156)' (#1160) from fix/issue-1156 into master

This commit is contained in:
johba 2026-03-25 13:56:02 +01:00
commit d54b055cd8
6 changed files with 141 additions and 90 deletions

View file

@ -43,10 +43,17 @@ export async function connectWallet(page: Page): Promise<void> {
const screenWidth = await page.evaluate(() => window.screen.width);
console.log(`[wallet] screen.width = ${screenWidth}`);
// Check if wallet is already connected (e.g. wagmi auto-reconnected from storage)
const connectedButton = page.locator('.connect-button--connected').first();
if (await connectedButton.isVisible({ timeout: 1_000 }).catch(() => false)) {
console.log('[wallet] Wallet already connected (auto-reconnect)');
return;
}
let panelOpened = false;
const connectButton = page.locator('.connect-button--disconnected').first();
if (await connectButton.isVisible({ timeout: 5_000 })) {
if (await connectButton.isVisible({ timeout: 10_000 })) {
console.log('[wallet] Found desktop Connect button, clicking...');
await connectButton.click();
panelOpened = true;

View file

@ -93,13 +93,17 @@ test.describe('Acquire & Stake', () => {
// We expect the desktop Connect button to be visible.
console.log('[TEST] Looking for Connect button...');
// Desktop Connect button
// Check if wallet already connected (wagmi may auto-reconnect from storage)
const alreadyConnected = page.locator('.connect-button--connected').first();
if (await alreadyConnected.isVisible({ timeout: 1_000 }).catch(() => false)) {
console.log('[TEST] Wallet already connected (auto-reconnect), skipping connect flow');
} else {
// Desktop Connect button — wait up to 10s for wagmi to settle into disconnected state
const connectButton = page.locator('.connect-button--disconnected').first();
let panelOpened = false;
// Wait for the Connect button with a reasonable timeout
if (await connectButton.isVisible({ timeout: 5_000 })) {
if (await connectButton.isVisible({ timeout: 10_000 })) {
console.log('[TEST] Found desktop Connect button, clicking...');
await connectButton.click();
panelOpened = true;
@ -138,6 +142,7 @@ test.describe('Acquire & Stake', () => {
console.log('[TEST] WARNING: No wallet connector found in panel');
}
}
}
// Check if wallet shows as connected in UI
console.log('[TEST] Checking for wallet display...');

View file

@ -114,13 +114,17 @@ test.describe('Max Stake All Tax Rates', () => {
// We expect the desktop Connect button to be visible.
console.log('[TEST] Looking for Connect button...');
// Desktop Connect button
// Check if wallet already connected (wagmi may auto-reconnect from storage)
const alreadyConnected = page.locator('.connect-button--connected').first();
if (await alreadyConnected.isVisible({ timeout: 1_000 }).catch(() => false)) {
console.log('[TEST] Wallet already connected (auto-reconnect), skipping connect flow');
} else {
// Desktop Connect button — wait up to 10s for wagmi to settle into disconnected state
const connectButton = page.locator('.connect-button--disconnected').first();
let panelOpened = false;
// Wait for the Connect button with a reasonable timeout
if (await connectButton.isVisible({ timeout: 5_000 })) {
if (await connectButton.isVisible({ timeout: 10_000 })) {
console.log('[TEST] Found desktop Connect button, clicking...');
await connectButton.click();
panelOpened = true;
@ -159,6 +163,7 @@ test.describe('Max Stake All Tax Rates', () => {
console.log('[TEST] WARNING: No wallet connector found in panel');
}
}
}
// Verify wallet connection
console.log('[TEST] Checking for wallet display...');

View file

@ -296,8 +296,30 @@ test.describe('Conversion Funnel: Landing → Swap → Stake', () => {
const hasLocalSwap = await localSwapWidget.isVisible({ timeout: 5_000 }).catch(() => false);
if (hasLocalSwap) {
console.log('[DEEPLINK] Local swap mode — verifying swap widget is functional');
// With wallet context, the swap input and buy button should be visible
console.log('[DEEPLINK] Local swap mode — connecting wallet first');
// The wallet must be explicitly connected for the swap input to render.
const navbarTitle = page.locator('.navbar-title').first();
await navbarTitle.waitFor({ state: 'visible', timeout: 30_000 });
await page.evaluate(() => window.dispatchEvent(new Event('resize')));
// Wait for wagmi to settle — either connected (auto-reconnect) or disconnected
const anyConnectBtn = page.locator('.connect-button--disconnected, .connect-button--connected').first();
await anyConnectBtn.waitFor({ state: 'visible', timeout: 15_000 });
if (await page.locator('.connect-button--connected').first().isVisible()) {
console.log('[DEEPLINK] Wallet already connected (auto-reconnect)');
} else {
console.log('[DEEPLINK] Found desktop Connect button, clicking...');
await page.locator('.connect-button--disconnected').first().click();
const connector = page.locator('.connectors-element').first();
await connector.waitFor({ state: 'visible', timeout: 10_000 });
console.log('[DEEPLINK] Clicking wallet connector...');
await connector.click();
await page.getByText(/0x[a-fA-F0-9]{4}/i).first().waitFor({ state: 'visible', timeout: 15_000 });
console.log('[DEEPLINK] Wallet connected');
}
console.log('[DEEPLINK] Verifying swap widget is functional');
// With wallet connected, the swap input and buy button should be visible
await expect(page.locator('[data-testid="swap-amount-input"]')).toBeVisible({ timeout: 5_000 });
await expect(page.getByTestId('swap-buy-button')).toBeVisible();
console.log('[DEEPLINK] ✅ Local swap widget verified');

View file

@ -148,10 +148,21 @@ export async function connectWallet(page: Page): Promise<void> {
window.dispatchEvent(new Event('resize'));
});
// Try desktop Connect button first
// Wait for wagmi to settle — the connect button or connected display must appear.
// After the wallet-provider fix, eth_accounts returns [] when not connected,
// so wagmi should land on 'disconnected' status and render the connect button.
const connectButton = page.locator('.connect-button--disconnected').first();
const connectedButton = page.locator('.connect-button--connected').first();
if (await connectButton.isVisible({ timeout: 5_000 })) {
// Wait for either the disconnect button (normal case) or connected button (auto-reconnect)
const desktopButton = page.locator('.connect-button--disconnected, .connect-button--connected').first();
if (await desktopButton.isVisible({ timeout: 10_000 })) {
if (await connectedButton.isVisible({ timeout: 500 }).catch(() => false)) {
// Wallet already connected (e.g. wagmi reconnected from storage) — skip connect flow
console.log('[HELPER] Wallet already connected (auto-reconnect)');
} else {
// Desktop connect button found — click to open connector panel
console.log('[HELPER] Found desktop Connect button');
await connectButton.click();
// Wait for the connector panel to open — .connectors-element appearing is the observable event
@ -159,6 +170,7 @@ export async function connectWallet(page: Page): Promise<void> {
await injectedConnector.waitFor({ state: 'visible', timeout: 10_000 });
console.log('[HELPER] Clicking wallet connector...');
await injectedConnector.click();
}
} else {
// Try mobile fallback
const mobileLoginIcon = page.locator('.navbar-end svg').first();

View file

@ -107,7 +107,7 @@ export async function createWalletContext(
emit('accountsChanged', [account]);
return [account];
case 'eth_accounts':
return [account];
return connected ? [account] : [];
case 'eth_chainId':
return cidHex;
case 'net_version':
@ -160,7 +160,7 @@ export async function createWalletContext(
requestPermissions: () =>
Promise.resolve([{ parentCapability: 'eth_accounts' }]),
getProviderState: async () => ({
accounts: [account],
accounts: connected ? [account] : [],
chainId: cidHex,
isConnected: connected,
}),