Page MenuHomePhabricator

[landing] Update WalletConnect CSS override
ClosedPublic

Authored by ashoat on Oct 9 2023, 1:13 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Nov 21, 6:25 PM
Unknown Object (File)
Thu, Nov 21, 12:36 AM
Unknown Object (File)
Wed, Nov 20, 4:39 PM
Unknown Object (File)
Wed, Nov 20, 4:39 PM
Unknown Object (File)
Wed, Nov 20, 4:37 PM
Unknown Object (File)
Wed, Nov 20, 4:17 PM
Unknown Object (File)
Fri, Nov 15, 9:40 PM
Unknown Object (File)
Sun, Nov 10, 5:25 AM
Subscribers

Details

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.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable