Wallet Tx Security Provider: Warning Message

[ElvirCe]

User Story

As a user, I want my tx security provider to be able to flag transactions and signature requests as malicious in my confirmation screen.

User research request:
OpenSea Collab - Tx Security Provider

User story

Resources

• Figma design file

Acceptance Criteria

1. User gets prompted a transaction request
2. If an unsigned transaction or signature request payload is flagged as malicious then:
3. A warning message is shown to the user in the transaction confirmation screen as in design
4. Users should be able to still proceed with the transaction if they want to by clicking on the "Confirm" button

[ElvirCe]

@bschorchit the original requirement was to create only one message with the copy: “OpenSea has reviewed this request and is flagging it as malicious. Approving it could lead to a loss of funds. Proceed with caution.”
I see that the design has been updated and will put the ticket on hold until we groom it out and clarify everything.

[bschorchit]

• This should be shown whenever the API response data has flagAsDangerous with value 1. The copy will change based on the response data. The bold part is the reason_header and the copy below the reason from the API response data.

• This should be shown whenever the API response data has flagAsDangerous with value 2. Copy won't vary with response data.

• This should be shown whenever an error occur and we're not able to get a response data from the API.

• When the API response data has flagAsDangerous with value 0, no warning or message should be shown.

[ElvirCe]

@bschorchit we will need the URL for the OpenSea link and also please note that the messages are a new component since we don't have them anywhere like this so the scope of the ticket will have to be expanded.

[bschorchit]

url is this: https://opensea.io/

[bschorchit]

please note that the messages are a new component since we don't have them anywhere like this so the scope of the ticket will have to be expanded.

Thanks for pointing this out, Elvir. I agree with expanded scope, but just want to have this component reviewed by design system team before we add it.
@georgewrmarshall could you kindly confirm if the warning component being used in the design matches our patterns and design system before we go ahead with it?
Here's the link for the designs: https://www.figma.com/file/Q69vHaA7Or7Rxz4vdzjVHC/Support-for-tx-security-providers-(MVP)?node-id=4986%3A26901&t=H3PgEpqvjHPr1hnS-0

[garrettbear]

I'm working on the Banner component right now that would be used here. In the meantime, the BannerBase component can be easily used with a few color prop modifications.

BannerBase Docs

When the Banner component is completed, I will be sure to have this swapped out properly.

Would look something like this:

<BannerBase
      title="This could be a scam"
      startAccessory={<Icon name={ICON_NAMES.DANGER_FILLED} size={SIZES.LG} />}
      color={COLORS.ERROR_DEFAULT}
      backgroundColor={COLORS.ERROR_MUTED}
      className="mm-banner--type-error"
    >
      <Text>
        Approval is to an unverified smart contract known for stealing NFTs in
        the past.
      </Text>
      <Text color={COLORS.TEXT_ALTERNATIVE} size={TEXT_VARIANTS.BODY_SM}>
        This is based on information from{' '}
        <ButtonLink
          size={SIZES.INHERIT}
          href="https://opensea.io/"
          target="_blank"
        >
          OpenSea
        </ButtonLink>
        .
      </Text>
    </BannerBase>

You'll need to add a class to update the color for the border:

.mm-banner--type-error {
   border-left: 4px solid var(--color-error-default);
}

Ping me with questions

[garrettbear]

Got a PR opened for the Banner component so it may be ready in time!

Banner Component

[ElvirCe]

We are blocked on this ticket until the Banner component gets merged.

[bschorchit]

Banner has been merged, @ElvirCe
Thanks, @garrettbear!