feat: snaps dynamic UI #12429
feat: snaps dynamic UI #12429
Conversation
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
app/components/Approvals/Snaps/SnapUIRenderer/SnapInterfaceContext.tsx
Outdated
Show resolved
Hide resolved
Daniel-Cross
added
team-accounts
team-snaps-platform
|
|
|
||
| import { UIComponentFactory } from './types'; | ||
|
|
||
| export const input: UIComponentFactory<InputElement> = ({ |
There was a problem hiding this comment.
Would be great to update this to the latest logic from the extension
| export const heading: UIComponentFactory<IconElement> = ({ element }) => ({ | ||
| element: 'Icon', | ||
| props: { | ||
| name: element.props.name, |
There was a problem hiding this comment.
We should consider the name being invalid here, same applies to sizing and color, we have remapping of these values on the extension for that reason
There was a problem hiding this comment.
Defaults values needed for fallback
| }) => ({ | ||
| element: 'SheetHeader', | ||
| props: { | ||
| title: e.props.children, |
There was a problem hiding this comment.
We should add support for sizing here
| mapToTemplate({ | ||
| ...params, | ||
| element: child as JSXElement, |
There was a problem hiding this comment.
Seems like a bunch of params aren't being passed down to the children here
There was a problem hiding this comment.
Add to templateChildren:
useFooter,
onCancel,
promptLegacyProps,
t,
| * @param file - The file to upload. | ||
| * @param form - The name of the form containing the input. | ||
| */ | ||
| const handleFileChange: HandleFileChange = (name, file, form) => { |
There was a problem hiding this comment.
Since we don't have the file input we can remove this and uploadFile for now
app/components/Approvals/Snaps/SnapUIRenderer/SnapUIRenderer.tsx
Outdated
Show resolved
Hide resolved
| variant: TextVariant.BodyMDBold, | ||
| ellipsizeMode: TextWrap.TailEllipsis, | ||
| color: TextColor.Default, | ||
| ...(element.props as ExtendedTextProps), |
There was a problem hiding this comment.
What additional props are we trying to pass here?
There was a problem hiding this comment.
Try removing this line
|
|
||
| export const address: UIComponentFactory<AddressElement> = ({ element }) => ({ | ||
| element: 'AddressElement', | ||
| props: element.props as ExtendedAddressProps, |
There was a problem hiding this comment.
Looks like none of the props that Snaps are passing are supported in the address component
We also will need to support CAIP-10 addresses in addition to ethereum addresses
Maybe worth omitting the address component for now?
There was a problem hiding this comment.
Update based on extension file but omit this file for now
There was a problem hiding this comment.
This file seems like it should be in the folder above it
There was a problem hiding this comment.
Can we name the test files the same as the file they are testing?
There was a problem hiding this comment.
Can we name the test files the same as the file they are testing?
| Warning = 'warning', | ||
| } | ||
|
|
||
| export const getDelineatorTitle = (type: DelineatorType) => { |
There was a problem hiding this comment.
As far as I can tell this isn't used anywhere
Same for the enum above
There was a problem hiding this comment.
I'll double check
There was a problem hiding this comment.
Is the preferred pattern on mobile to have Index files for every component?
Seems harder to find things then, but maybe I'm missing something
| Linking.openURL(href); | ||
| }; | ||
|
|
||
| export const SnapUILink: React.FC<SnapUILinkProps> = ({ href, children }) => ( |
There was a problem hiding this comment.
We should make a note that this component should show a modal for links when not using preinstalled Snaps
| : FlexDirection.Column, | ||
| justifyContent: generateJustifyContent(element.props.alignment), | ||
| color: TextColor.Default, | ||
| ...(element.props as ViewProps), |
There was a problem hiding this comment.
What additional props are we trying to support here?
There was a problem hiding this comment.
Check extension file and compare
| buttonProps.label = element.props.children; | ||
| } | ||
|
|
||
| return { |
There was a problem hiding this comment.
We'll need to map over the children and remap props here
There was a problem hiding this comment.
Check extension file and compare
| import { UIComponentFactory } from './types'; | ||
|
|
||
| export const card: UIComponentFactory<CardElement> = ({ element }) => ({ | ||
| element: 'Card', |
There was a problem hiding this comment.
You've added SnapUICard but this seems to use another component?
There was a problem hiding this comment.
Two possible Card files SnapUICard and Card. Card currently called possibly by mistake.
| > | ||
| <Box gap={4} alignItems={AlignItems.center}> | ||
| {image && ( | ||
| <Image |
There was a problem hiding this comment.
This should probably be SnapUIImage
| element: children, | ||
| } as UIComponentParams<ButtonElement>); | ||
| return { | ||
| element: 'SnapUIFooterButton', |
There was a problem hiding this comment.
Seems like we haven't implemented this component
Co-authored-by: Frederik Bolding <[email protected]>
Co-authored-by: Frederik Bolding <[email protected]>
| import { UIComponentFactory } from './types'; | ||
|
|
||
| export const value: UIComponentFactory<ValueElement> = ({ element: e }) => ({ | ||
| element: 'ConfirmInfoRowValueDouble', |
There was a problem hiding this comment.
ConfirmInfoRowValueDouble not found in current implementation
There was a problem hiding this comment.
Could be called infoValue or something similar
There was a problem hiding this comment.
Check extension code to implement the Text file from there
Co-authored-by: Frederik Bolding <[email protected]>
Co-authored-by: Frederik Bolding <[email protected]>
Co-authored-by: Frederik Bolding <[email protected]>
|
Description
This PR integrates the Snaps Dynamic UI controller and components to allow different dialog prompts to show on the screen.
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist