safe-wallet-web icon indicating copy to clipboard operation
safe-wallet-web copied to clipboard

Published 20 hours ago • verified publisher icon safe-global

Keystone logo is not seen on "Continue with..."

Open liliya-soroka opened this issue 1 year ago • 10 comments

Bug description

Keystone logo is not seen on the "Continue with..." button.

Environment

  • Browser: Chrome
  • Wallet: Keystone
  • Chain: any

Steps to reproduce

  1. Go to the Welcome page page
  2. Connect the Keystone wallet

Expected result

Keystone logo should be visible.

Obtained result

It blends with the black background.

Screenshots

image

liliya-soroka avatar Feb 12 '24 09:02 liliya-soroka

Hi @liliya-soroka
Do you have a preference for the final appearance of the button? If you prefer the button to remain black, I could either add a white box behind the logo or a white stroke around the entire logo.

Akhaled19 avatar Feb 21 '24 22:02 Akhaled19

It would be good to make it look like the Keystone icon in this component:

Screenshot 2024-02-22 at 10 57 09

katspaugh avatar Feb 22 '24 09:02 katspaugh

Yes so in dark mode would -> add a gray box behind the logo and in light mode -> add a white box behind the logo this change should apply to all logos, not just keystone. Let me know what you think

Akhaled19 avatar Feb 22 '24 21:02 Akhaled19

In addition to that the logos themeselves change depending on the theme. I'm not sure how it works, either the SVGs themselves have adaptive CSS inside, or this popup changes the logo URL depending on the theme.

katspaugh avatar Feb 22 '24 21:02 katspaugh

I'm currently examining the files to identify the components responsible for styling the logos. Any guidance on where to focus my efforts would be greatly appreciated.

Akhaled19 avatar Feb 27 '24 21:02 Akhaled19

It’s a part of a library called web3-onboard. The icons come from the packages of that library.

katspaugh avatar Feb 28 '24 07:02 katspaugh

Hi @katspaugh, thank you for the guidance! I've started working on this issue but encountered a roadblock. When running the app locally, not all UI features are supported, including the Connect Wallet button on the welcome landing page http://localhost:3000/welcome. I'm testing it on Chrome and ensured my .env file matches the variables listed here. I also confirmed that my popups aren't disabled. Please let me know if there's a key part of the setup that I'm missing.

Akhaled19 avatar Mar 02 '24 22:03 Akhaled19

A valid Infura token in the env vars be enough to display the wallet popup.

katspaugh avatar Mar 04 '24 07:03 katspaugh

It seems that this logo is outdated, though (see their website). For the button we can use the icon below. Do we control the logos in the blocknative modal @katspaugh ? logo-keystone

TanyaEfremova avatar Mar 19 '24 15:03 TanyaEfremova

Not sure if we can override blocknative's icon but we can make a pull request to their repo.

katspaugh avatar Mar 19 '24 15:03 katspaugh

I've updated the Keystone plugin but the icon is still the same. Closing as wontfix because the effort is not proportional to the result.

katspaugh avatar Aug 08 '24 09:08 katspaugh