Allow supplying a custom stylesheet for the dApp SDK's wallet picker popup - #2323
Open
ayushsingh82 wants to merge 1 commit into
Open
Allow supplying a custom stylesheet for the dApp SDK's wallet picker popup#2323ayushsingh82 wants to merge 1 commit into
ayushsingh82 wants to merge 1 commit into
Conversation
…popup
The wallet picker popup (opened via pickWallet, the default walletPicker
for DappSDK) renders as a Lit custom element in an isolated popup window,
themed entirely through --wg-theme-* CSS custom properties (see
themes/default.css). Since it's a separate browsing context, a dApp
implementer had no way to affect that theming -- setting those properties
on their own page has no effect on a totally separate window/document.
Add an optional `stylesheet` to PopupOptions, injected as CSS text into
the popup document's own <head> (outside the component's shadow root).
Custom properties inherit through the shadow boundary by spec, so a
`:root { --wg-theme-primary-color: ... }` rule there re-themes the
component without needing to know its internal selectors.
Threaded through: popup.open's stylesheet option -> pickWallet's new
PickWalletOptions -> DappSDK's new constructor option
`walletPickerStylesheet` (ignored if a custom walletPicker is supplied,
since that bypasses the default popup entirely).
Related to canton-network#609. Fixes canton-network#1151
Also added a Storybook story and two tests: one confirming the
stylesheet actually reaches the popup document, and one confirming a
literal `</style` in caller-supplied CSS can't break out of the <style>
tag it's injected into.
Signed-off-by: ayushsingh82 <[email protected]>
Contributor
Author
|
@mjuchli-da whenever you have a chance, would appreciate a look at this one. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The wallet picker popup (opened via `pickWallet`, the default `walletPicker` for `DappSDK`) renders as a Lit custom element inside an isolated popup window, themed entirely through `--wg-theme-*` CSS custom properties (`themes/default.css`). Since it's a separate browsing context, a dApp implementer had no way to affect that theming -- setting those properties on their own page has no effect on a completely separate window/document.
Added an optional `stylesheet` to `PopupOptions` (`core/wallet-ui-components/src/windows/popup.ts`), injected as CSS text into the popup document's own ``, outside the component's shadow root. Custom properties inherit through the shadow boundary by spec, so a `:root { --wg-theme-primary-color: ... }` rule there re-themes the component without needing to know its internal selectors.
Threaded through the existing call chain:
Related to #609. Fixes #1151
Test plan