Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(snaps): Adjust alignment of custom UI links #27957

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

fix(snaps): Adjust alignment of custom UI links #27957

wants to merge 8 commits into from
+44 −20

Conversation

GuillaumeRx
Copy link
Contributor

@GuillaumeRx GuillaumeRx commented Oct 18, 2024 •
edited
Loading

Description

This PR fixes the alignment issues of the custom UI link.

Open in GitHub Codespaces

Related issues

Fixes:

Manual testing steps

import {
  Address,
  Box,
  Button,
  Container,
  Footer,
  Link,
  Row,
  Text,
  type SnapComponent,
} from '@metamask/snaps-sdk/jsx';

/**
 * A custom dialog component.
 *
 * @returns The custom dialog component.
 */
export const CustomDialog: SnapComponent = () => (
  <Container>
    <Box>
      <Row label="Test">
        <Link href="https://metamask.io">
          <Address address="0xc366063eA70eBD30316062C9C82445591c772870" />
        </Link>
      </Row>
      <Link href="https://metamask.io">This is a link</Link>
      <Text>
        This is a long text that should wrap around and take up multiple lines
        to test the layout of the dialog with a{' '}
        <Link href="https://metamask.io">
          very very very very long link that should wrap on multiple lines, we
          will see
        </Link>{' '}
        in the middle.
      </Text>
      <Link href="https://metamask.io">
        <Icon name="search" />
      </Link>
      <Link href="https://metamask.io">
        <Address address="0xc366063eA70eBD30316062C9C82445591c772870" />
      </Link>
    </Box>
    <Footer>
      <Button name="cancel">Cancel</Button>
      <Button name="confirm">Confirm</Button>
    </Footer>
  </Container>
);

Screenshots/Recordings

Before

Screenshot from 2024-10-21 12-34-40

After

Screenshot from 2024-10-21 15-06-57

Pre-merge author checklist

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.

@GuillaumeRx GuillaumeRx requested a review from a team as a code owner October 18, 2024 12:22
@github-actions GitHub Actions
Copy link
Contributor

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.

@GuillaumeRx GuillaumeRx added the team-snaps-platform Snaps Platform team label Oct 18, 2024
@metamaskbot
Copy link
Collaborator

Builds ready [af1993d]
Page Load Metrics (1941 ± 100 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint34724701775515247
domContentLoaded16482400190320699
load166324131941208100
domInteractive1996552010
backgroundConnect1085442713
firstReactRender462511055526
getState67318199
initialActions01000
loadScripts11681934141319593
setupStore12181434120
uiStartup186627492195254122
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 106 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@metamaskbot
Copy link
Collaborator

Builds ready [136603f]
Page Load Metrics (1948 ± 96 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint34125571817495238
domContentLoaded17152548193020096
load17252559194820096
domInteractive15128512813
backgroundConnect86722178
firstReactRender472051033215
getState464192110
initialActions01000
loadScripts12212057144019996
setupStore1177312412
uiStartup193128132181219105
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 139 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

david0xd
david0xd previously approved these changes Oct 18, 2024
View reviewed changes
Mrtenz
Mrtenz previously approved these changes Oct 18, 2024
View reviewed changes
@GuillaumeRx GuillaumeRx dismissed stale reviews from Mrtenz and david0xd via 1e69b0f October 21, 2024 10:30
@GuillaumeRx GuillaumeRx requested a review from a team as a code owner October 21, 2024 10:30
@metamaskbot
Copy link
Collaborator

Builds ready [251e79c]
Page Load Metrics (1760 ± 53 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint16192090175811555
domContentLoaded1594193617208440
load16212097176011153
domInteractive168037147
backgroundConnect13202384220
firstReactRender45204793718
getState65619199
initialActions01000
loadScripts1124142712597436
setupStore1295282411
uiStartup18122700195819091
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 59 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@metamaskbot
Copy link
Collaborator

Builds ready [6e1a635]
Page Load Metrics (1797 ± 71 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint15652110180014067
domContentLoaded15332015175112158
load15662141179714771
domInteractive2097452210
backgroundConnect8157464521
firstReactRender482841185929
getState4110223115
initialActions01000
loadScripts11031560129010953
setupStore10109443215
uiStartup187428062099264127
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 59 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@metamaskbot
Copy link
Collaborator

Builds ready [6c2c1e9]
Page Load Metrics (1926 ± 112 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint166027931940262126
domContentLoaded164725461902223107
load165826461926234112
domInteractive16163483014
backgroundConnect10111262411
firstReactRender50170973115
getState4101272914
initialActions01000
loadScripts12281985143819996
setupStore1176332311
uiStartup187835552171359172
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 123 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

FrederikBolding
FrederikBolding reviewed Oct 21, 2024
View reviewed changes
ui/components/app/snaps/snap-ui-renderer/index.scss
@@ -48,10 +48,6 @@

&__panel {
gap: 8px;

.mm-icon--size-inherit {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would imagine that this breaks this use-case: #26904

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me check

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in bb3cc6e

Screenshot from 2024-10-21 17-03-34

@metamaskbot
Copy link
Collaborator

Builds ready [bb3cc6e]
Page Load Metrics (1932 ± 93 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint16382402193719292
domContentLoaded16262296189617383
load16352421193219393
domInteractive188941209
backgroundConnect9158393718
firstReactRender491871023014
getState596182412
initialActions00000
loadScripts11421761139715575
setupStore1297322612
uiStartup182529842172248119
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 123 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@FrederikBolding FrederikBolding FrederikBolding approved these changes

@Mrtenz Mrtenz Mrtenz left review comments

@david0xd david0xd david0xd left review comments

At least 2 approving reviews are required to merge this pull request.

Assignees
No one assigned
Labels
team-snaps-platform Snaps Platform team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@GuillaumeRx @metamaskbot @FrederikBolding @Mrtenz @david0xd