Skip to content

[bug] "Continue with a wallet" button shows copy icon instead of wallet icon #5350

@web3coderman-dev

Description

@web3coderman-dev

Link to minimal reproducible example

N/A - This is a visual bug in AppKit's built-in UI components that occurs with standard setup. No custom code required to reproduce - simply initialize AppKit 1.8.14 and open the connection modal.

Steps to Reproduce

  1. Install @reown/[email protected] and @reown/[email protected]
  2. Initialize AppKit with the following configuration:
    import { createAppKit } from '@reown/appkit'
    import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
    
    createAppKit({
      adapters: [wagmiAdapter],
      networks: [mainnet, polygon, arbitrum, optimism, base],
      projectId: 'YOUR_PROJECT_ID',
      features: {
        email: true,
        socials: ['google', 'github', 'x', 'discord'],
      }
    })

Click the "Get Started" or connection button to open the AppKit modal
Observe the "Continue with a wallet" button
Expected Behavior
The "Continue with a wallet" button should display a wallet icon 💳

Actual Behavior
The button displays a copy/clipboard icon 📋 instead of a wallet icon

Screenshots
Unsupported image

(Please upload your screenshot: attached_assets/image_1763038023969.png)

Environment
@reown/appkit version: 1.8.14
@reown/appkit-adapter-wagmi version: 1.8.14
Framework: React 18.3.1
Build tool: Vite 5.4.11
Browser: Chrome/Firefox/Safari (all affected)
OS: macOS/Windows/Linux
Additional Context
The button is functionally correct - clicking it properly opens the wallet selection screen
This is purely a visual/UX issue
The icon appears to be using a clipboard/copy icon instead of the intended wallet icon
Issue persists after upgrading from 1.8.13 to 1.8.14
The wallet search filtering improvements in 1.8.14 did not resolve this icon issue
Impact
Severity: Low (cosmetic issue, no functional impact)
User Experience: May confuse users about the button's purpose

Image

Possible Root Cause
The button component may be referencing the wrong icon identifier in the UI scaffold layer.

Summary

The "Continue with a wallet" button in the AppKit connection modal displays a copy/clipboard icon instead of the expected wallet icon. This is a cosmetic UI issue affecting all browsers and platforms (React/Vite environment with AppKit 1.8.14).

Expected: Wallet icon 💳 to indicate wallet connection functionality
Actual: Copy/clipboard icon 📋 displayed instead
Functional Impact: None - button works correctly, purely a visual UX issue

All authentication methods work properly (email, social, wallet connections), but the incorrect icon may confuse users about the button's purpose.

List of related npm package versions

@reown/[email protected]
@reown/[email protected]
@reown/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

Node.js Version

v20.18.1

Package Manager

[email protected]

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions