Skip to content

Commit

Permalink
BlockaidBannerAlert: rm footer w failed resultType
Browse files Browse the repository at this point in the history
  • Loading branch information
@digiwand
digiwand committed Aug 3, 2023
1 parent f30056c commit 814d4fb
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 70 deletions.
2 changes: 1 addition & 1 deletion .../security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = `
</details>
</div>
<p
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative"
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-3 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
>
<span
class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
Expand Down
56 changes: 17 additions & 39 deletions ...vider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
If you approve this request, a third party known for scams might take all your assets.
</p>
<p
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-3 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
>
<span
class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/security-tick.svg');"
/>
<span>
Security advice by
Security advice by
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://blockaid.io/"
Expand All @@ -38,8 +38,8 @@ exports[`Blockaid Banner Alert should render 'danger' UI when securityAlertRespo
>
Blockaid
</a>
</span>
</p>
</div>
Expand All @@ -66,28 +66,6 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
>
If you approve this request, a third party known for scams might take all your assets.
</p>
<p
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
>
<span
class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/security-tick.svg');"
/>
<span>
Security advice by
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://blockaid.io/"
rel="noopener noreferrer"
target="_blank"
>
Blockaid
</a>
</span>
</p>
</div>
</div>
`;
Expand All @@ -113,15 +91,15 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
If you approve this request, a third party known for scams might take all your assets.
</p>
<p
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-3 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
>
<span
class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/security-tick.svg');"
/>
<span>
Security advice by
Security advice by
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://blockaid.io/"
Expand All @@ -130,8 +108,8 @@ exports[`Blockaid Banner Alert should render 'warning' UI when securityAlertResp
>
Blockaid
</a>
</span>
</p>
</div>
Expand Down Expand Up @@ -183,11 +161,11 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
>
<li>
•
•
Operator is an EOA
</li>
<li>
•
•
Operator is untrusted according to previous activity
</li>
</ul>
Expand All @@ -198,15 +176,15 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
</details>
</div>
<p
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
class="mm-box mm-text mm-text--body-sm mm-box--margin-top-3 mm-box--display-flex mm-box--align-items-center mm-box--color-text-alternative"
>
<span
class="mm-box disclosure__summary--icon mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-primary-default"
style="mask-image: url('./images/icons/security-tick.svg');"
/>
<span>
Security advice by
Security advice by
<a
class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
href="https://blockaid.io/"
Expand All @@ -215,8 +193,8 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = `
>
Blockaid
</a>
</span>
</p>
</div>
Expand Down
4 changes: 3 additions & 1 deletion ...ponents/app/security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ function BlockaidBannerAlert({ securityAlertResponse }) {
</Text>
);

const isFailedResultType = resultType === BlockaidResultType.Failed;

const severity =
resultType === BlockaidResultType.Malicious
? Severity.Danger
Expand All @@ -82,7 +84,7 @@ function BlockaidBannerAlert({ securityAlertResponse }) {
<SecurityProviderBannerAlert
description={description}
details={details}
provider={SecurityProvider.Blockaid}
provider={isFailedResultType ? null : SecurityProvider.Blockaid}
severity={severity}
title={title}
/>
Expand Down
58 changes: 30 additions & 28 deletions ui/components/app/security-provider-banner-alert/security-provider-banner-alert.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,31 +46,33 @@ function SecurityProviderBannerAlert({
</Disclosure>
)}

<Text
marginTop={2}
display={Display.Flex}
alignItems={AlignItems.center}
color={Color.textAlternative}
variant={TextVariant.bodySm}
>
<Icon
className="disclosure__summary--icon"
color={IconColor.primaryDefault}
name={IconName.SecurityTick}
size={IconSize.Sm}
marginInlineEnd={1}
/>
{t('securityProviderAdviceBy', [
<ButtonLink
key={`security-provider-button-link-${provider}`}
size={Size.inherit}
href={SECURITY_PROVIDER_CONFIG[provider].url}
externalLink
>
{t(SECURITY_PROVIDER_CONFIG[provider].tKeyName)}
</ButtonLink>,
])}
</Text>
{provider && (
<Text
marginTop={3}
display={Display.Flex}
alignItems={AlignItems.center}
color={Color.textAlternative}
variant={TextVariant.bodySm}
>
<Icon
className="disclosure__summary--icon"
color={IconColor.primaryDefault}
name={IconName.SecurityTick}
size={IconSize.Sm}
marginInlineEnd={1}
/>
{t('securityProviderAdviceBy', [
<ButtonLink
key={`security-provider-button-link-${provider}`}
size={Size.inherit}
href={SECURITY_PROVIDER_CONFIG[provider].url}
externalLink
>
{t(SECURITY_PROVIDER_CONFIG[provider].tKeyName)}
</ButtonLink>,
])}
</Text>
)}
</BannerAlert>
);
}
Expand All @@ -80,9 +82,6 @@ SecurityProviderBannerAlert.propTypes = {
description: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
.isRequired,

/** Name of the security provider */
provider: PropTypes.oneOfType(Object.values(SecurityProvider)).isRequired,

/** Severity level */
severity: PropTypes.oneOfType([Severity.Danger, Severity.Warning]).isRequired,

Expand All @@ -95,6 +94,9 @@ SecurityProviderBannerAlert.propTypes = {

/** Additional details to be displayed under the description */
details: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),

/** Name of the security provider */
provider: PropTypes.oneOfType(Object.values(SecurityProvider)),
};

export default SecurityProviderBannerAlert;
5 changes: 4 additions & 1 deletion ui/components/app/security-provider-banner-alert/security-provider-banner-alert.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,10 @@ export default {
control: {
type: 'select',
},
options: [Object.values(SecurityProvider)],
options: ['none', ...Object.values(SecurityProvider)],
mapping: {
none: null,
},
},
severity: {
control: {
Expand Down

0 comments on commit 814d4fb

Please sign in to comment.