feat(snaps): Add background color prop to Snaps UI Container component #29095

david0xd · 2024-12-11T12:51:47Z

Description

This PR adds backgroundColor property to Container component.
Background colors that can be used are predefined as: default and alternative.
This PR deliberately disables the backgroundColor feature for containers used within Transaction Insights pages (Snaps).

Related issues

Fixes: MetaMask/snaps#2906
Related Snaps PR: MetaMask/snaps#2950

Manual testing steps

Try installing and using a Snap with confirmation window or home page, with Container in its content with backgroundColor defined (e.g. <Container backgroundColor="default">).
Try the same thing on transaction insights Snaps and confirm that the colors are not changing there.
Confirm that the colors are as expected on all pages.

Some source code used for testing:

Source code used for confirmation content:

export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
  switch (request.method) {
    case 'hello':
      return snap.request({
        method: 'snap_dialog',
        params: {
          content: (
            <Container backgroundColor="default">
              <Box>
                <Section>
                  <Row label="From">
                    <Address address="0x1234567890123456789012345678901234567890" />
                  </Row>
                  <Row
                    label="To"
                    variant="warning"
                    tooltip="This address has been deemed dangerous."
                  >
                    <Address address="0x0000000000000000000000000000000000000000" />
                  </Row>
                </Section>
                <Form name="form">
                  <Box direction="horizontal">
                    <Field label="baz">
                      <Input name="baz" placeholder="Enter something..." />
                    </Field>
                    <Field label="foo">
                      <Selector title="bar" name="test">
                        <SelectorOption value="one">
                          <Card title="test" value="test" />
                        </SelectorOption>
                      </Selector>
                    </Field>
                  </Box>
                  <Field label="something_else">
                    <Selector title="bar" name="test2">
                      <SelectorOption value="one">
                        <Card title="test" value="test" />
                      </SelectorOption>
                    </Selector>
                  </Field>
                  <Box direction="horizontal">
                    <Field label="baz2">
                      <Input name="baz2" placeholder="Enter something..." />
                    </Field>
                    <Field label="foo3">
                      <Input name="foo3" placeholder="Enter something..." />
                    </Field>
                  </Box>
                  <Box direction="horizontal">
                    <Field label="Example Dropdown">
                      <Dropdown name="example-dropdown">
                        <Option value="option1">Option 1</Option>
                        <Option value="option2">Option 2</Option>
                        <Option value="option3">Option 3</Option>
                      </Dropdown>
                    </Field>
                    <Field label="Example RadioGroup">
                      <RadioGroup name="example-radiogroup">
                        <Radio value="option1">Option 1</Radio>
                        <Radio value="option2">Option 2</Radio>
                        <Radio value="option3">Option 3</Radio>
                      </RadioGroup>
                    </Field>
                  </Box>
                  <Field label="Example Dropdown full width">
                    <Dropdown name="example-dropdown-full">
                      <Option value="option1">Option 1</Option>
                      <Option value="option2">Option 2</Option>
                      <Option value="option3">Option 3</Option>
                    </Dropdown>
                  </Field>
                  <Field label="Example RadioGroup full width">
                    <RadioGroup name="example-radiogroup-full">
                      <Radio value="option11">Option 11</Radio>
                      <Radio value="option22">Option 22</Radio>
                      <Radio value="option33">Option 33</Radio>
                    </RadioGroup>
                  </Field>
                  <Field label="foo4">
                    <Input name="foo4" placeholder="Enter something..." />
                  </Field>
                  <Box direction="horizontal">
                    <Field label="baz3">
                      <Input name="baz3" placeholder="Enter something..." />
                    </Field>
                  </Box>
                  <Box direction="horizontal">
                    <Field label="Example Checkbox">
                      <Checkbox name="example-checkbox" label="Checkbox" />
                    </Field>
                    <Field label="Example Selector">
                      <Selector
                        name="example-selector"
                        title="Choose an option"
                        value="option1"
                      >
                        <SelectorOption value="option1">
                          <Card title="Option 1" value="option1" />
                        </SelectorOption>
                        <SelectorOption value="option2">
                          <Card title="Option 2" value="option2" />
                        </SelectorOption>
                        <SelectorOption value="option3">
                          <Card title="Option 3" value="option3" />
                        </SelectorOption>
                      </Selector>
                    </Field>
                  </Box>
                  <Field label="Example FileInput 2">
                    <FileInput name="file-input-2" />
                  </Field>
                  <Field label="Example Checkbox Full field">
                    <Checkbox name="example-checkbox-full" label="Checkbox" />
                  </Field>
                  <Box direction="horizontal">
                    <Field label="baz4">
                      <Input name="baz4" placeholder="Enter something..." />
                    </Field>
                    <Field label="Example FileInput">
                      <FileInput name="file-input-1" />
                    </Field>
                  </Box>
                  <Box direction="horizontal">
                    <Field label="baz5">
                      <Input name="baz5" placeholder="Enter something..." />
                    </Field>
                    <Field label="FileInput Compact">
                      <FileInput name="file-input-3" compact={true} />
                    </Field>
                  </Box>
                  <Field label="FileInput Compact 2 full">
                    <FileInput name="file-input-4" compact={true} />
                  </Field>
                </Form>
              </Box>
            </Container>
          ),
        },
      });
    default:
      throw new Error('Method not found.');
  }
};

Screenshots/Recordings

Before

Note: Changing container colors was not possible before.

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

github-actions · 2024-12-11T12:52:53Z

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.

metamaskbot · 2025-01-10T11:16:23Z

Builds ready [0f5f5d3]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1675 ± 43 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1500	1841	1685	99	48
		domContentLoaded	1487	1793	1650	89	43
		load	1549	1837	1675	89	43
		domInteractive	24	172	56	43	21
		backgroundConnect	9	97	28	24	12
		firstReactRender	16	101	48	34	16
		getState	5	66	19	21	10
		initialActions	0	1	0	0	0
		loadScripts	1115	1370	1236	73	35
		setupStore	6	73	15	18	9
		uiStartup	1747	2472	2035	231	111

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 376 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-01-10T13:19:00Z

Builds ready [fdf9081]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1629 ± 43 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1525	1849	1636	95	46
		domContentLoaded	1481	1789	1604	88	42
		load	1524	1807	1629	89	43
		domInteractive	24	218	52	46	22
		backgroundConnect	9	85	26	21	10
		firstReactRender	16	91	56	28	13
		getState	5	95	15	21	10
		initialActions	0	1	0	0	0
		loadScripts	1068	1378	1180	82	40
		setupStore	7	91	21	24	12
		uiStartup	1729	2365	1969	197	95

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 504 Bytes (0.01%)
common: -4.81 KiB (-0.06%)

metamaskbot · 2025-01-10T16:09:26Z

Builds ready [406ca2d]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1811 ± 85 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1590	2271	1815	181	87
		domContentLoaded	1559	2249	1778	173	83
		load	1598	2274	1811	177	85
		domInteractive	27	110	44	22	11
		backgroundConnect	8	80	36	22	11
		firstReactRender	16	103	62	35	17
		getState	6	91	33	30	14
		initialActions	0	1	0	0	0
		loadScripts	1137	1732	1326	152	73
		setupStore	7	80	15	20	9
		uiStartup	1839	3173	2255	320	154

Bundle size diffs [🚀 Bundle size reduced!]

background: 0 Bytes (0.00%)
ui: 1.03 KiB (0.01%)
common: -4.81 KiB (-0.06%)

ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js

ui/components/app/snaps/snap-ui-renderer/components/section.ts

ui/components/app/snaps/snap-ui-renderer/utils.ts

metamaskbot · 2025-01-13T13:08:18Z

Builds ready [21ff2f2]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1465 ± 25 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1354	1574	1474	56	27
		domContentLoaded	1350	1547	1450	50	24
		load	1354	1557	1465	53	25
		domInteractive	17	198	46	40	19
		backgroundConnect	7	41	18	13	6
		firstReactRender	15	92	34	26	13
		getState	4	51	10	13	6
		initialActions	0	1	0	0	0
		loadScripts	994	1165	1070	48	23
		setupStore	6	7	6	0	0
		uiStartup	1547	1998	1679	96	46

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 539 Bytes (0.01%)
common: 0 Bytes (0.00%)

eriknson · 2025-01-13T13:57:12Z

Lgtm!

This PR adds `backgroundColor` property to `Container` component. Related task: #2906 Related extension PR: MetaMask/metamask-extension#29095 ### Notes - Background colors that can be used are predefined as: `default` and `alternative`. - Background colors are meant to mirror `backgroundDefault` and `backgroundAlternative` colors from MetaMask extension design system (https://github.com/MetaMask/metamask-extension/blob/main/ui/helpers/constants/design-system.ts#L54). - Color names are simplified on the Snaps side to make it easier for developers to use. ### Examples (experiments with extension integration) Confirmation example: ![Screenshot 2024-12-11 at 13 14 02](https://github.com/user-attachments/assets/f2b77202-d9c4-403e-87a1-ad36d44299c9) Source code used for content: ```typescript return snap.request({ method: 'snap_dialog', params: { content: ( <Container backgroundColor="default"> <Box> <Text>Testing container background.</Text> <Button variant="primary">Primary button</Button> <Button variant="destructive">Destructive button</Button> <Button disabled={true}>Disabled button</Button> </Box> <Footer> <Button>Accept</Button> <Button name="footer_button">Cancel</Button> </Footer> </Container> ), }, }); ``` Transaction insight example where background color is deliberately ignored: ![Screenshot 2024-12-11 at 13 07 40](https://github.com/user-attachments/assets/b7b3a593-8407-4f92-a629-edd85c8f88dc) Source code used for content: ```typescript return { content: ( <Container backgroundColor="alternative"> <Box> <Text>Testing container background on transaction insight.</Text> <Text>Normal transaction.</Text> </Box> </Container> ), severity: SeverityLevel.Critical, }; ```

david0xd added the team-snaps-platform Snaps Platform team label Dec 11, 2024

david0xd self-assigned this Dec 11, 2024

david0xd mentioned this pull request Dec 11, 2024

Add backgroundColor property to Container component MetaMask/snaps#2950

Merged

david0xd force-pushed the dd/add-snap-ui-container-bg branch from f83bcff to 0f5f5d3 Compare January 10, 2025 10:37

FrederikBolding reviewed Jan 13, 2025

View reviewed changes

ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js Outdated Show resolved Hide resolved

FrederikBolding reviewed Jan 13, 2025

View reviewed changes

ui/components/app/snaps/snap-ui-renderer/components/section.ts Outdated Show resolved Hide resolved

FrederikBolding reviewed Jan 13, 2025

View reviewed changes

ui/components/app/snaps/snap-ui-renderer/utils.ts Outdated Show resolved Hide resolved

david0xd added 6 commits January 13, 2025 12:01

Add background color prop to Snaps UI Container component

702cc15

Update colors and color logic

0718d47

Update colors and color logic again

3a74000

Refactor implementation

1642231

Force default color to insights

bdd5018

Minor refactoring

7004169

david0xd force-pushed the dd/add-snap-ui-container-bg branch from 88e1224 to 7004169 Compare January 13, 2025 11:01

Fix lint

21ff2f2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(snaps): Add background color prop to Snaps UI Container component #29095

feat(snaps): Add background color prop to Snaps UI Container component #29095

david0xd commented Dec 11, 2024 •

edited

Loading

github-actions bot commented Dec 11, 2024

metamaskbot commented Jan 10, 2025

metamaskbot commented Jan 10, 2025

metamaskbot commented Jan 10, 2025

metamaskbot commented Jan 13, 2025

eriknson commented Jan 13, 2025

feat(snaps): Add background color prop to Snaps UI Container component #29095

Are you sure you want to change the base?

feat(snaps): Add background color prop to Snaps UI Container component #29095

Conversation

david0xd commented Dec 11, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Dec 11, 2024

metamaskbot commented Jan 10, 2025

metamaskbot commented Jan 10, 2025

metamaskbot commented Jan 10, 2025

metamaskbot commented Jan 13, 2025

eriknson commented Jan 13, 2025

david0xd commented Dec 11, 2024 •

edited

Loading