* origin/develop: (29 commits) Reset swaps routeState in navigateBackToBuildQuote (#10166) Fix decrypt message confirmation UI crash (#10252) Fix site metadata JSON-RPC handler (#10243) Fix design system error constants (#10246) Remove unused environment variables (#10234) Update `yarn.lock` (#10241) Update postMessage structure for TrezorConnect 8 (#10192) Increase minimum Firefox version to v68 (#10195) Bump socket.io from 2.2.0 to 2.4.1 (#10232) Update `@reduxjs/toolkit` from v1.3.2 to v1.5.0 (#10228) eth-rpc-errors@4.0.2 (#10226) Add MAX_SAFE_CHAIN_ID and refactor chain ID validation (#10224) add chip component (#10199) add new typography component (#10197) @metamask/inpage-provider@8.0.3 (#10219) Add NETWORK_TYPE_RPC constant (#10203) Further improve organization of constants (#10200) add includePaths to sass-loader in storybook (#10213) Disable the swaps submit button after the first time it is clicked (#10162) Remove default to 18 decimals in quotesToRenderableData method (#10212) ...feature/default_network_editable
Mark Stacey
4 years ago
commit
74ee13f7c3
@ -0,0 +1,4 @@ |
||||
export const CAVEAT_NAMES = { |
||||
exposedAccounts: 'exposedAccounts', |
||||
primaryAccountOnly: 'primaryAccountOnly', |
||||
} |
||||
@ -1,3 +0,0 @@ |
||||
### Shared Modules |
||||
|
||||
This folder is reserved for modules that can be used globally within both the background and ui applications. |
||||
@ -0,0 +1,30 @@ |
||||
import { MAX_SAFE_CHAIN_ID } from '../constants/network' |
||||
|
||||
/** |
||||
* Checks whether the given number primitive chain ID is safe. |
||||
* Because some cryptographic libraries we use expect the chain ID to be a |
||||
* number primitive, it must not exceed a certain size. |
||||
* |
||||
* @param {number} chainId - The chain ID to check for safety. |
||||
* @returns {boolean} Whether the given chain ID is safe. |
||||
*/ |
||||
export function isSafeChainId(chainId) { |
||||
return ( |
||||
Number.isSafeInteger(chainId) && chainId > 0 && chainId <= MAX_SAFE_CHAIN_ID |
||||
) |
||||
} |
||||
|
||||
/** |
||||
* Checks whether the given value is a 0x-prefixed, non-zero, non-zero-padded, |
||||
* hexadecimal string. |
||||
* |
||||
* @param {any} value - The value to check. |
||||
* @returns {boolean} True if the value is a correctly formatted hex string, |
||||
* false otherwise. |
||||
*/ |
||||
export function isPrefixedFormattedHexString(value) { |
||||
if (typeof value !== 'string') { |
||||
return false |
||||
} |
||||
return /^0x[1-9a-f]+[0-9a-f]*$/iu.test(value) |
||||
} |
||||
@ -1,3 +1,3 @@ |
||||
import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../../app/scripts/lib/enums' |
||||
import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../../shared/constants/app' |
||||
|
||||
export { ENVIRONMENT_TYPE_NOTIFICATION } |
||||
|
||||
@ -0,0 +1,55 @@ |
||||
import React from 'react' |
||||
import PropTypes from 'prop-types' |
||||
import classnames from 'classnames' |
||||
import { omit } from 'lodash' |
||||
import Typography from '../typography' |
||||
import { COLORS } from '../../../helpers/constants/design-system' |
||||
|
||||
export default function Chip({ |
||||
className, |
||||
children, |
||||
borderColor = COLORS.UI1, |
||||
label, |
||||
labelProps = {}, |
||||
leftIcon, |
||||
rightIcon, |
||||
onClick, |
||||
}) { |
||||
return ( |
||||
<div |
||||
onClick={onClick} |
||||
className={classnames(className, 'chip', { |
||||
'chip--with-left-icon': Boolean(leftIcon), |
||||
'chip--with-right-icon': Boolean(rightIcon), |
||||
[`chip--${borderColor}`]: true, |
||||
})} |
||||
role="button" |
||||
tabIndex={0} |
||||
> |
||||
{leftIcon && <div className="chip__left-icon">{leftIcon}</div>} |
||||
{children ?? ( |
||||
<Typography |
||||
className="chip__label" |
||||
variant="h6" |
||||
tag="span" |
||||
color="UI4" |
||||
{...labelProps} |
||||
> |
||||
{label} |
||||
</Typography> |
||||
)} |
||||
{rightIcon && <div className="chip__right-icon">{rightIcon}</div>} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
Chip.propTypes = { |
||||
borderColor: PropTypes.oneOf(Object.values(COLORS)), |
||||
label: PropTypes.string, |
||||
children: PropTypes.node, |
||||
labelProps: PropTypes.shape(omit(Typography.propTypes, ['className'])), |
||||
leftIcon: PropTypes.node, |
||||
rightIcon: PropTypes.node, |
||||
className: PropTypes.string, |
||||
onClick: PropTypes.func, |
||||
} |
||||
@ -0,0 +1,48 @@ |
||||
@use "design-system"; |
||||
|
||||
.chip { |
||||
$self: &; |
||||
|
||||
border-radius: 100px; |
||||
border: 1px solid design-system.$ui-1; |
||||
padding: 8px 16px; |
||||
margin: 0 4px; |
||||
display: flex; |
||||
align-items: center; |
||||
width: max-content; |
||||
|
||||
&__left-icon, |
||||
&__right-icon { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
@each $variant, $color in design-system.$color-map { |
||||
&--#{$variant} { |
||||
border-color: $color; |
||||
} |
||||
} |
||||
|
||||
&--with-left-icon, |
||||
&--with-right-icon { |
||||
padding-top: 4px; |
||||
padding-bottom: 4px; |
||||
} |
||||
|
||||
&--with-left-icon { |
||||
padding-left: 4px; |
||||
|
||||
#{$self}__label { |
||||
margin-left: 8px; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
&--with-right-icon { |
||||
padding-right: 4px; |
||||
#{$self}__label { |
||||
margin-right: 8px; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,82 @@ |
||||
/* eslint-disable react/prop-types */ |
||||
|
||||
import React from 'react' |
||||
import { select, text } from '@storybook/addon-knobs' |
||||
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system' |
||||
import ApproveIcon from '../icon/approve-icon.component' |
||||
import Identicon from '../identicon/identicon.component' |
||||
import Chip from '.' |
||||
|
||||
export default { |
||||
title: 'Chip', |
||||
} |
||||
|
||||
export const Plain = ({ |
||||
leftIcon, |
||||
rightIcon, |
||||
label = 'Hello', |
||||
borderColor = COLORS.UI1, |
||||
fontColor = COLORS.BLACK, |
||||
}) => ( |
||||
<Chip |
||||
leftIcon={leftIcon} |
||||
rightIcon={rightIcon} |
||||
label={text('label', label)} |
||||
labelProps={{ |
||||
color: select('color', COLORS, fontColor), |
||||
variant: select('typography', TYPOGRAPHY, TYPOGRAPHY.H6), |
||||
}} |
||||
borderColor={select('borderColor', COLORS, borderColor)} |
||||
/> |
||||
) |
||||
|
||||
export const WithLeftIcon = () => ( |
||||
<Plain |
||||
label="Done!" |
||||
borderColor={COLORS.SUCCESS3} |
||||
fontColor={COLORS.SUCCESS3} |
||||
leftIcon={<ApproveIcon size={24} color="#4cd964" />} |
||||
/> |
||||
) |
||||
|
||||
export const WithRightIcon = () => ( |
||||
<Plain |
||||
label="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" |
||||
borderColor={COLORS.UI4} |
||||
fontColor={COLORS.UI4} |
||||
rightIcon={ |
||||
<Identicon |
||||
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" |
||||
diameter={25} |
||||
/> |
||||
} |
||||
/> |
||||
) |
||||
|
||||
export const WithBothIcons = () => ( |
||||
<Plain |
||||
label="Account 1" |
||||
borderColor={COLORS.UI4} |
||||
fontColor={COLORS.UI4} |
||||
rightIcon={ |
||||
<svg |
||||
width="10" |
||||
height="6" |
||||
viewBox="0 0 10 6" |
||||
fill="none" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
d="M9.45759 0.857142C9.45759 0.785714 9.42188 0.705357 9.3683 0.651785L8.92188 0.205357C8.8683 0.151785 8.78795 0.116071 8.71652 0.116071C8.64509 0.116071 8.56473 0.151785 8.51116 0.205357L5.00223 3.71429L1.4933 0.205357C1.43973 0.151785 1.35938 0.116071 1.28795 0.116071C1.20759 0.116071 1.13616 0.151785 1.08259 0.205357L0.636161 0.651785C0.582589 0.705357 0.546875 0.785714 0.546875 0.857142C0.546875 0.928571 0.582589 1.00893 0.636161 1.0625L4.79688 5.22321C4.85045 5.27679 4.9308 5.3125 5.00223 5.3125C5.07366 5.3125 5.15402 5.27679 5.20759 5.22321L9.3683 1.0625C9.42188 1.00893 9.45759 0.928571 9.45759 0.857142Z" |
||||
fill="#24292E" |
||||
/> |
||||
</svg> |
||||
} |
||||
leftIcon={ |
||||
<Identicon |
||||
address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1" |
||||
diameter={25} |
||||
/> |
||||
} |
||||
/> |
||||
) |
||||
@ -0,0 +1 @@ |
||||
export { default } from './chip' |
||||
@ -0,0 +1 @@ |
||||
export { default } from './typography' |
||||
@ -0,0 +1,58 @@ |
||||
import React from 'react' |
||||
import classnames from 'classnames' |
||||
import PropTypes from 'prop-types' |
||||
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system' |
||||
|
||||
const { H6, H7, H8, H9 } = TYPOGRAPHY |
||||
|
||||
export default function Typography({ |
||||
variant = TYPOGRAPHY.Paragraph, |
||||
className, |
||||
color = COLORS.BLACK, |
||||
tag, |
||||
children, |
||||
spacing = 1, |
||||
fontWeight = 'normal', |
||||
align, |
||||
}) { |
||||
const computedClassName = classnames( |
||||
'typography', |
||||
className, |
||||
`typography--${variant}`, |
||||
`typography--align-${align}`, |
||||
`typography--spacing-${spacing}`, |
||||
`typography--color-${color}`, |
||||
`typography--weight-${fontWeight}`, |
||||
) |
||||
|
||||
let Tag = tag ?? variant |
||||
|
||||
if (Tag === TYPOGRAPHY.Paragraph) { |
||||
Tag = 'p' |
||||
} else if ([H7, H8, H9].includes(Tag)) { |
||||
Tag = H6 |
||||
} |
||||
|
||||
return <Tag className={computedClassName}>{children}</Tag> |
||||
} |
||||
|
||||
Typography.propTypes = { |
||||
variant: PropTypes.oneOf(Object.values(TYPOGRAPHY)), |
||||
children: PropTypes.node.isRequired, |
||||
color: PropTypes.oneOf(Object.values(COLORS)), |
||||
className: PropTypes.string, |
||||
align: PropTypes.oneOf(['center', 'right']), |
||||
spacing: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]), |
||||
fontWeight: PropTypes.oneOf(['bold', 'normal']), |
||||
tag: PropTypes.oneOf([ |
||||
'p', |
||||
'h1', |
||||
'h2', |
||||
'h3', |
||||
'h4', |
||||
'h5', |
||||
'h6', |
||||
'span', |
||||
'div', |
||||
]), |
||||
} |
||||
@ -0,0 +1,38 @@ |
||||
@use "design-system"; |
||||
@use "sass:map"; |
||||
|
||||
.typography { |
||||
@include design-system.Paragraph; |
||||
|
||||
@each $variant in map.keys(design-system.$typography-variants) { |
||||
&--#{$variant} { |
||||
@include design-system.typography($variant); |
||||
} |
||||
} |
||||
|
||||
@each $variant, $color in design-system.$color-map { |
||||
&--color-#{$variant} { |
||||
color: $color; |
||||
} |
||||
} |
||||
|
||||
@each $variant, $weight in design-system.$typography-font-weights { |
||||
&--weight-#{$variant} { |
||||
font-weight: $weight; |
||||
} |
||||
} |
||||
|
||||
&--align-center { |
||||
text-align: center; |
||||
} |
||||
|
||||
&--align-right { |
||||
text-align: right; |
||||
} |
||||
|
||||
@for $i from 1 through 8 { |
||||
&--spacing-#{$i} { |
||||
margin: #{$i * 4}px auto; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,53 @@ |
||||
import React from 'react' |
||||
import { number, select, text } from '@storybook/addon-knobs' |
||||
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system' |
||||
import Typography from '.' |
||||
|
||||
export default { |
||||
title: 'Typography', |
||||
} |
||||
|
||||
const fontWeightOptions = { |
||||
bold: 'bold', |
||||
normal: 'normal', |
||||
} |
||||
|
||||
const alignOptions = { |
||||
left: undefined, |
||||
center: 'center', |
||||
right: 'right', |
||||
} |
||||
|
||||
export const list = () => ( |
||||
<div style={{ width: '80%', flexDirection: 'column' }}> |
||||
{Object.values(TYPOGRAPHY).map((variant) => ( |
||||
<div key={variant} style={{ width: '100%' }}> |
||||
<Typography |
||||
variant={variant} |
||||
color={select('color', COLORS, COLORS.BLACK)} |
||||
spacing={number('spacing', 1, { range: true, min: 1, max: 8 })} |
||||
align={select('align', alignOptions, undefined)} |
||||
fontWeight={select('font weight', fontWeightOptions, 'normal')} |
||||
> |
||||
{variant} |
||||
</Typography> |
||||
</div> |
||||
))} |
||||
</div> |
||||
) |
||||
|
||||
export const TheQuickOrangeFox = () => ( |
||||
<div style={{ width: '80%', flexDirection: 'column' }}> |
||||
<div style={{ width: '100%' }}> |
||||
<Typography |
||||
color={select('color', COLORS, COLORS.BLACK)} |
||||
variant={select('variant', TYPOGRAPHY, TYPOGRAPHY.Paragraph)} |
||||
spacing={number('spacing', 1, { range: true, min: 1, max: 8 })} |
||||
align={select('align', alignOptions, undefined)} |
||||
fontWeight={select('font weight', fontWeightOptions, 'normal')} |
||||
> |
||||
{text('content', 'The quick orange fox jumped over the lazy dog.')} |
||||
</Typography> |
||||
</div> |
||||
</div> |
||||
) |
||||
@ -1,5 +1,5 @@ |
||||
@import 'breakpoints'; |
||||
@import 'colors'; |
||||
@import 'deprecated-colors'; |
||||
@import 'typography'; |
||||
@import 'z-index'; |
||||
@forward 'breakpoints'; |
||||
@forward 'colors'; |
||||
@forward 'deprecated-colors'; |
||||
@forward 'typography'; |
||||
@forward 'z-index'; |
||||
|
||||
@ -0,0 +1,42 @@ |
||||
export const COLORS = { |
||||
UI1: 'ui-1', |
||||
UI2: 'ui-2', |
||||
UI3: 'ui-3', |
||||
UI4: 'ui-4', |
||||
BLACK: 'black', |
||||
WHITE: 'white', |
||||
PRIMARY1: 'primary-1', |
||||
PRIMARY2: 'primary-2', |
||||
PRIMARY3: 'primary-3', |
||||
SECONDARY1: 'secondary-1', |
||||
SECONDARY2: 'secondary-2', |
||||
SECONDARY3: 'secondary-3', |
||||
SUCCESS1: 'success-1', |
||||
SUCCESS2: 'success-2', |
||||
SUCCESS3: 'success-3', |
||||
ERROR1: 'error-1', |
||||
ERROR2: 'error-2', |
||||
ERROR3: 'error-3', |
||||
ALERT1: 'alert-1', |
||||
ALERT2: 'alert-2', |
||||
ALERT3: 'alert-3', |
||||
MAINNET: 'mainnet', |
||||
ROPSTEN: 'ropsten', |
||||
KOVAN: 'kovan', |
||||
RINKEBY: 'rinkeby', |
||||
GOERLI: 'goerli', |
||||
TRANSPARENT: 'transparent', |
||||
} |
||||
|
||||
export const TYPOGRAPHY = { |
||||
H1: 'h1', |
||||
H2: 'h2', |
||||
H3: 'h3', |
||||
H4: 'h4', |
||||
H5: 'h5', |
||||
H6: 'h6', |
||||
H7: 'h7', |
||||
H8: 'h8', |
||||
H9: 'h9', |
||||
Paragraph: 'paragraph', |
||||
} |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue