mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Created review spending cap component (#15633)
This commit is contained in:
VSaric
GitHub
parent
d55507615c
commit
4424686a3c
13
app/_locales/en/messages.json
generated
13
app/_locales/en/messages.json
generated
@ -429,6 +429,9 @@
|
||||
"basic": {
|
||||
"message": "Basic"
|
||||
},
|
||||
"beCareful": {
|
||||
"message": "Be careful"
|
||||
},
|
||||
"betaMetamaskDescription": {
|
||||
"message": "Trusted by millions, MetaMask is a secure wallet making the world of web3 accessible to all."
|
||||
},
|
||||
@ -831,6 +834,9 @@
|
||||
"customSpendLimit": {
|
||||
"message": "Custom spend limit"
|
||||
},
|
||||
"customSpendingCap": {
|
||||
"message": "Custom spending cap"
|
||||
},
|
||||
"customToken": {
|
||||
"message": "Custom token"
|
||||
},
|
||||
@ -2841,6 +2847,9 @@
|
||||
"message": "By revoking permission, the following $1 will no longer be able to access your $2",
|
||||
"description": "$1 is either key 'account' or 'contract', and $2 is either a string or link of a given token symbol or name"
|
||||
},
|
||||
"revokeSpendingCapTooltipText": {
|
||||
"message": "This contract will be unable to spend any more of your current or future tokens."
|
||||
},
|
||||
"rinkeby": {
|
||||
"message": "Rinkeby test network"
|
||||
},
|
||||
@ -4199,6 +4208,10 @@
|
||||
"warning": {
|
||||
"message": "Warning"
|
||||
},
|
||||
"warningTooltipText": {
|
||||
"message": "$1 The contract could spend your entire token balance without further notice or consent. Protect yourself by customizing a lower spending cap.",
|
||||
"description": "$1 is a fa-exclamation-circle icon with text 'Be careful' in 'warning' colour"
|
||||
},
|
||||
"weak": {
|
||||
"message": "Weak"
|
||||
},
|
||||
|
||||
1
ui/components/ui/review-spending-cap/index.js
Normal file
1
ui/components/ui/review-spending-cap/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './review-spending-cap';
|
||||
33
ui/components/ui/review-spending-cap/index.scss
Normal file
33
ui/components/ui/review-spending-cap/index.scss
Normal file
@ -0,0 +1,33 @@
|
||||
.review-spending-cap {
|
||||
&__heading {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__heading-title {
|
||||
&__tooltip {
|
||||
width: 180px;
|
||||
|
||||
&__warning-icon {
|
||||
color: var(--color-warning-default);
|
||||
}
|
||||
|
||||
&__question-icon {
|
||||
color: var(--color-icon-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__heading-detail {
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
|
||||
&__button {
|
||||
background: none;
|
||||
color: var(--color-primary-default);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: $font-size-h7;
|
||||
}
|
||||
}
|
||||
131
ui/components/ui/review-spending-cap/review-spending-cap.js
Normal file
131
ui/components/ui/review-spending-cap/review-spending-cap.js
Normal file
@ -0,0 +1,131 @@
|
||||
import React, { useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { I18nContext } from '../../../contexts/i18n';
|
||||
import Box from '../box';
|
||||
import Tooltip from '../tooltip';
|
||||
import Typography from '../typography';
|
||||
import {
|
||||
ALIGN_ITEMS,
|
||||
COLORS,
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
FONT_WEIGHT,
|
||||
TYPOGRAPHY,
|
||||
TEXT_ALIGN,
|
||||
SIZES,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
|
||||
export default function ReviewSpendingCap({
|
||||
tokenName,
|
||||
currentTokenBalance,
|
||||
tokenValue,
|
||||
onEdit,
|
||||
}) {
|
||||
const t = useContext(I18nContext);
|
||||
|
||||
return (
|
||||
<Box
|
||||
className="review-spending-cap"
|
||||
borderRadius={SIZES.SM}
|
||||
paddingTop={4}
|
||||
paddingRight={4}
|
||||
paddingLeft={4}
|
||||
display={DISPLAY.FLEX}
|
||||
alignItems={ALIGN_ITEMS.FLEX_START}
|
||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||
backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
|
||||
gap={1}
|
||||
>
|
||||
<Box
|
||||
flexDirection={FLEX_DIRECTION.ROW}
|
||||
display={DISPLAY.FLEX}
|
||||
alignItems={ALIGN_ITEMS.CENTER}
|
||||
className="review-spending-cap__heading"
|
||||
>
|
||||
<Box
|
||||
flexDirection={FLEX_DIRECTION.ROW}
|
||||
className="review-spending-cap__heading-title"
|
||||
>
|
||||
<Typography
|
||||
as={TYPOGRAPHY.H6}
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
variant={TYPOGRAPHY.H6}
|
||||
boxProps={{ display: DISPLAY.INLINE_BLOCK }}
|
||||
>
|
||||
{t('customSpendingCap')}
|
||||
</Typography>
|
||||
<Box marginLeft={2} display={DISPLAY.INLINE_BLOCK}>
|
||||
<Tooltip
|
||||
interactive
|
||||
position="top"
|
||||
html={
|
||||
<Typography
|
||||
variant={TYPOGRAPHY.H7}
|
||||
color={COLORS.TEXT_ALTERNATIVE}
|
||||
className="review-spending-cap__heading-title__tooltip"
|
||||
>
|
||||
{tokenValue > currentTokenBalance &&
|
||||
t('warningTooltipText', [
|
||||
<Typography
|
||||
key="tooltip-text"
|
||||
variant={TYPOGRAPHY.H7}
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
color={COLORS.WARNING_DEFAULT}
|
||||
>
|
||||
<i className="fa fa-exclamation-circle" />{' '}
|
||||
{t('beCareful')}
|
||||
</Typography>,
|
||||
])}
|
||||
{tokenValue === 0 && t('revokeSpendingCapTooltipText')}
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
{tokenValue > currentTokenBalance && (
|
||||
<i className="fa fa-exclamation-triangle review-spending-cap__heading-title__tooltip__warning-icon" />
|
||||
)}
|
||||
{tokenValue === 0 && (
|
||||
<i className="far fa-question-circle review-spending-cap__heading-title__tooltip__question-icon" />
|
||||
)}
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
className="review-spending-cap__heading-detail"
|
||||
textAlign={TEXT_ALIGN.END}
|
||||
>
|
||||
<button
|
||||
className="review-spending-cap__heading-detail__button"
|
||||
type="link"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onEdit();
|
||||
}}
|
||||
>
|
||||
{t('edit')}
|
||||
</button>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography
|
||||
as={TYPOGRAPHY.H6}
|
||||
color={
|
||||
tokenValue > currentTokenBalance
|
||||
? COLORS.WARNING_DEFAULT
|
||||
: COLORS.TEXT_DEFAULT
|
||||
}
|
||||
variant={TYPOGRAPHY.H6}
|
||||
marginBottom={3}
|
||||
>
|
||||
{tokenValue} {tokenName}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
ReviewSpendingCap.propTypes = {
|
||||
tokenName: PropTypes.string,
|
||||
currentTokenBalance: PropTypes.number,
|
||||
tokenValue: PropTypes.number,
|
||||
onEdit: PropTypes.func,
|
||||
};
|
||||
@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import ReviewSpendingCap from './review-spending-cap';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/ReviewSpendingCap',
|
||||
id: __filename,
|
||||
argTypes: {
|
||||
tokenName: {
|
||||
control: { type: 'text' },
|
||||
},
|
||||
currentTokenBalance: {
|
||||
control: { type: 'number' },
|
||||
},
|
||||
tokenValue: {
|
||||
control: { type: 'number' },
|
||||
},
|
||||
onEdit: {
|
||||
action: 'onEdit',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
tokenName: 'DAI',
|
||||
currentTokenBalance: 200.12,
|
||||
tokenValue: 7,
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => {
|
||||
return <ReviewSpendingCap {...args} />;
|
||||
};
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
@ -24,6 +24,7 @@ export const ValidColors = [
|
||||
COLORS.ERROR_INVERSE,
|
||||
COLORS.SUCCESS_DEFAULT,
|
||||
COLORS.SUCCESS_INVERSE,
|
||||
COLORS.WARNING_DEFAULT,
|
||||
COLORS.WARNING_INVERSE,
|
||||
COLORS.INFO_DEFAULT,
|
||||
COLORS.INFO_INVERSE,
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
@import 'pulse-loader/index';
|
||||
@import 'qr-code/index';
|
||||
@import 'radio-group/index';
|
||||
@import 'review-spending-cap/index';
|
||||
@import 'sender-to-recipient/index';
|
||||
@import 'show-hide-toggle/index.scss';
|
||||
@import 'snackbar/index';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user