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

[Bug]: PPOM Blockaid Security Alert UI See Details content overflows #21316

Closed
digiwand opened this issue Oct 11, 2023 · 0 comments · Fixed by #21317
Closed

[Bug]: PPOM Blockaid Security Alert UI See Details content overflows #21316

digiwand opened this issue Oct 11, 2023 · 0 comments · Fixed by #21317
Assignees
@digiwand
Labels
release-11.5.0 Issue or pull request that will be included in release 11.5.0 Sev2-normal Normal severity; minor loss of service or inconvenience. team-confirmations-secure-ux DEPRECATED: please use "team-confirmations" label instead type-bug

Comments

@digiwand
Copy link
Contributor

digiwand commented Oct 11, 2023 •
edited
Loading

Describe the bug

Problem:

Initially reported by @seaona here #20691

If ppom passes a long string, this overflows the container

Screenshots

Screenshot from 2023-09-01 15-28-24

Steps to reproduce

  1. Go to extension codebase file ppom-midleware.ts
  2. Change line 48 with the following code:
  3. Build flask
  4. Go to test dapp and trigger any tx
  5. See all the UI issues mentioned above, by manipulating the res variable
        req.securityAlertResponse = await ppomController.usePPOM(
          async (ppom: PPOM) => {
            const res =
            {
              "result_type": "Warning",
              "reason": "",
              "description": "",
              "features": [
                "The address 0x07Be9763a718C0539017E2Ab6fC42853b4aEeb6B is malicious",
                "blablabla",
                "blablabla",
              ]
          }

            return res;
          },
        );

Error messages or log output

No response

Version

11.1.0

Build type

None

Browser

Chrome

Operating system

MacOS

Hardware wallet

No response

Additional context

No response

Severity

No response
@digiwand digiwand self-assigned this Oct 11, 2023
@digiwand digiwand added the team-confirmations-secure-ux DEPRECATED: please use "team-confirmations" label instead label Oct 11, 2023
This was referenced Oct 11, 2023
Closed
Merged
@anaamolnar anaamolnar added the Sev2-normal Normal severity; minor loss of service or inconvenience. label Oct 11, 2023
brad-decker pushed a commit that referenced this issue Oct 13, 2023
@digiwand
Add min-width support to Box DS component; Fix Blockaid Security Aler…
a3b78f0 
…t overflow issue; Fix missing Box width-max breakpoint styles (#21317)

## **Description**

- Fix Blockaid Security Alert Overflow Issue
- Fix missing ".mm-box--width-max" breakpoint styles. Discovered while
adding min-width styles
- Add min-width support to Box DS component to support fix
- Add 0 value to $fractions

## **Manual testing steps**

One way to test this: 
1. yarn storybook
2. go to Blockaid Security Alert page
3. update "Features" value with the example or another long text.
example:
> "The address 0x07Be9763a718C0539017E2Ab6fC42853b4aEeb6B is malicious"

## **Screenshots/Recordings**

### **Before**

<img width="420" alt="Screenshot 2023-10-11 at 10 45 46 AM"
src="https://github.com/MetaMask/metamask-extension/assets/20778143/f2051485-0d98-4b9b-819f-f2a710131c08">

### **After**

<img width="420" alt="Screenshot 2023-10-11 at 10 45 18 AM"
src="https://github.com/MetaMask/metamask-extension/assets/20778143/98c52b93-c68d-4d41-88e0-969690e34d92">

## **Related issues**

Fixes #21316

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained:
  - [ ] What problem this PR is solving.
  - [ ] How this problem was solved.
  - [ ] How reviewers can test my changes.
- [ ] I’ve indicated what issue this PR is linked to: Fixes #???
- [ ] I’ve included tests if applicable.
- [ ] I’ve documented any added code.
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **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.
@metamaskbot metamaskbot added the release-11.5.0 Issue or pull request that will be included in release 11.5.0 label Oct 13, 2023
k-g-j pushed a commit that referenced this issue Nov 1, 2023
@digiwand @k-g-j
Add min-width support to Box DS component; Fix Blockaid Security Aler…
e32a644 
…t overflow issue; Fix missing Box width-max breakpoint styles (#21317)

## **Description**

- Fix Blockaid Security Alert Overflow Issue
- Fix missing ".mm-box--width-max" breakpoint styles. Discovered while
adding min-width styles
- Add min-width support to Box DS component to support fix
- Add 0 value to $fractions

## **Manual testing steps**

One way to test this: 
1. yarn storybook
2. go to Blockaid Security Alert page
3. update "Features" value with the example or another long text.
example:
> "The address 0x07Be9763a718C0539017E2Ab6fC42853b4aEeb6B is malicious"

## **Screenshots/Recordings**

### **Before**

<img width="420" alt="Screenshot 2023-10-11 at 10 45 46 AM"
src="https://github.com/MetaMask/metamask-extension/assets/20778143/f2051485-0d98-4b9b-819f-f2a710131c08">

### **After**

<img width="420" alt="Screenshot 2023-10-11 at 10 45 18 AM"
src="https://github.com/MetaMask/metamask-extension/assets/20778143/98c52b93-c68d-4d41-88e0-969690e34d92">

## **Related issues**

Fixes #21316

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've clearly explained:
  - [ ] What problem this PR is solving.
  - [ ] How this problem was solved.
  - [ ] How reviewers can test my changes.
- [ ] I’ve indicated what issue this PR is linked to: Fixes #???
- [ ] I’ve included tests if applicable.
- [ ] I’ve documented any added code.
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@digiwand digiwand

Labels
release-11.5.0 Issue or pull request that will be included in release 11.5.0 Sev2-normal Normal severity; minor loss of service or inconvenience. team-confirmations-secure-ux DEPRECATED: please use "team-confirmations" label instead type-bug
Projects
None yet
Milestone
No milestone
3 participants
@digiwand @metamaskbot @anaamolnar