HomePhabricator
Diffusion Comm 911e758cf46c

[landing] Update WalletConnect CSS override

Description

[landing] Update WalletConnect CSS override

Summary:
The WalletConnect modal has been reskinned. I redid our CSS override to make sure that the border between our bottom sheet and the WebView on native is clean.

Because the new modal uses even more DOM shadow roots, I was unable to override the CSS from our project. I needed to move the CSS override to occur inside the shadow root.

To make sure the border was clean, I had to force the modal to be flush with the top of the frame. I did that by eliminating padding and using align-items: flex-start.

I also had to eliminate the border-radius at the top of the modal. I was able to do this by overriding a CSS variable.

Depends on D9435

Test Plan:
I tested the WalletConnect modal:

  1. Tested iOS and Android physical devices
  2. Tested in a public staging environment (comm.domains)
  3. Tested the QR code scan feature on web
  4. Tested expanding to see "All wallets"
  5. Tested selecting a wallet (Rainbow)
  6. Tested searching for a wallet by typing a query

Some videos of the testing can be seen in the final diff in the stack.

Reviewers: rohan, atul, ginsu

Reviewed By: atul

Subscribers: tomek, wyilio

Differential Revision: https://phab.comm.dev/D9436

Details

Provenance
ashoatAuthored on Oct 9 2023, 1:04 PM
Reviewer
atul
Differential Revision
D9436: [landing] Update WalletConnect CSS override
Parents
rCOMM3935890dc7e4: [landing] Update useMonitorForWalletConnectModal for new WalletConnect modal
Branches
Unknown
Tags
Unknown