mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Fee card component (#9169)
* Fee card component * Clean up * Style lint fixes
This commit is contained in:
parent
08be3dc046
commit
b8edc32f48
@ -1,5 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
stories: ['../ui/app/components/**/*.stories.js'],
|
stories: ['../ui/app/**/*.stories.js'],
|
||||||
addons: [
|
addons: [
|
||||||
'@storybook/addon-knobs',
|
'@storybook/addon-knobs',
|
||||||
'@storybook/addon-actions',
|
'@storybook/addon-actions',
|
||||||
|
@ -12,3 +12,4 @@
|
|||||||
@import 'confirm-approve/index';
|
@import 'confirm-approve/index';
|
||||||
@import 'permissions-connect/index';
|
@import 'permissions-connect/index';
|
||||||
@import 'asset/asset';
|
@import 'asset/asset';
|
||||||
|
@import 'token/index';
|
||||||
|
69
ui/app/pages/token/fee-card/fee-card.js
Normal file
69
ui/app/pages/token/fee-card/fee-card.js
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
|
export default function FeeCard ({
|
||||||
|
onFeeRowClick = null,
|
||||||
|
feeRowText,
|
||||||
|
feeRowLinkText = '',
|
||||||
|
primaryFee,
|
||||||
|
secondaryFee = '',
|
||||||
|
onSecondRowClick = null,
|
||||||
|
secondRowText = '',
|
||||||
|
secondRowLinkText = '',
|
||||||
|
hideSecondRow = false,
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="fee-card">
|
||||||
|
<div className="fee-card__main">
|
||||||
|
<div className="fee-card__row-header" onClick={() => onFeeRowClick && onFeeRowClick()}>
|
||||||
|
<div>
|
||||||
|
<div className="fee-card__row-header-text">
|
||||||
|
{feeRowText}
|
||||||
|
</div>
|
||||||
|
{onFeeRowClick && (
|
||||||
|
<div className="fee-card__link">
|
||||||
|
{feeRowLinkText}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="fee-card__row-header-secondary">
|
||||||
|
{primaryFee}
|
||||||
|
</div>
|
||||||
|
{secondaryFee && (
|
||||||
|
<div className="fee-card__row-header-primary">
|
||||||
|
{secondaryFee}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{!hideSecondRow && secondRowText && (
|
||||||
|
<div className="fee-card__row">
|
||||||
|
<div className="fee-card__row-label">
|
||||||
|
<div className="fee-card__row-text">
|
||||||
|
{secondRowText}
|
||||||
|
</div>
|
||||||
|
{secondRowLinkText && (
|
||||||
|
<div className="fee-card__link" onClick={() => onSecondRowClick && onSecondRowClick()}>
|
||||||
|
{secondRowLinkText}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
FeeCard.propTypes = {
|
||||||
|
onFeeRowClick: PropTypes.func,
|
||||||
|
feeRowText: PropTypes.string.isRequired,
|
||||||
|
feeRowLinkText: PropTypes.string,
|
||||||
|
primaryFee: PropTypes.string.isRequired,
|
||||||
|
secondaryFee: PropTypes.string,
|
||||||
|
onSecondRowClick: PropTypes.func,
|
||||||
|
secondRowText: PropTypes.string,
|
||||||
|
secondRowLinkText: PropTypes.string,
|
||||||
|
hideSecondRow: PropTypes.bool,
|
||||||
|
}
|
47
ui/app/pages/token/fee-card/fee-card.stories.js
Normal file
47
ui/app/pages/token/fee-card/fee-card.stories.js
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import FeeCard from './fee-card.js'
|
||||||
|
import { action } from '@storybook/addon-actions'
|
||||||
|
import { text } from '@storybook/addon-knobs/react'
|
||||||
|
|
||||||
|
const containerStyle = {
|
||||||
|
width: '300px',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'FeeCard',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WithSecondRow = () => {
|
||||||
|
return (
|
||||||
|
<div style={containerStyle}>
|
||||||
|
<FeeCard
|
||||||
|
onFeeRowClick={action('Fee row link clicked')}
|
||||||
|
feeRowText={text('feeRowText', 'Network fees')}
|
||||||
|
feeRowLinkText={text('feeRowLinkText', 'Edit')}
|
||||||
|
primaryFee={text('primaryFee', '1 ETH')}
|
||||||
|
secondaryFee={text('secondaryFee', '$300.57')}
|
||||||
|
onSecondRowClick={action('Second row link clicked')}
|
||||||
|
secondRowText={text('secondRowText', 'This calls a contract')}
|
||||||
|
secondRowLinkText={text('secondRowLinkText', 'Learn More')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WithoutSecondRow = () => {
|
||||||
|
return (
|
||||||
|
<div style={containerStyle}>
|
||||||
|
<FeeCard
|
||||||
|
onFeeRowClick={action('Fee row link clicked')}
|
||||||
|
feeRowText={text('feeRowText', 'Network fees')}
|
||||||
|
feeRowLinkText={text('feeRowLinkText', 'Edit')}
|
||||||
|
primaryFee={text('primaryFee', '1 ETH')}
|
||||||
|
secondaryFee={text('secondaryFee', '$300.57')}
|
||||||
|
onSecondRowClick={action('Second row link clicked')}
|
||||||
|
secondRowText={text('secondRowText', 'This calls a contract')}
|
||||||
|
secondRowLinkText={text('secondRowLinkText', 'Learn More')}
|
||||||
|
hideSecondRow
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
1
ui/app/pages/token/fee-card/index.js
Normal file
1
ui/app/pages/token/fee-card/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './fee-card'
|
102
ui/app/pages/token/fee-card/index.scss
Normal file
102
ui/app/pages/token/fee-card/index.scss
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
.fee-card {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid $Grey-100;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
@include H7;
|
||||||
|
|
||||||
|
&__main {
|
||||||
|
padding: 16px 16px 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 8px;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
@include H6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row-header-text {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
margin-left: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row-text {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row-fee {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
color: $Blue-500;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__total-box {
|
||||||
|
border-top: 1px solid $Grey-100;
|
||||||
|
padding: 12px 16px 16px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__total-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__total-secondary {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $Grey-500;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row-header-secondary {
|
||||||
|
color: $Grey-500;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row-header-primary {
|
||||||
|
font-weight: bold;
|
||||||
|
color: $Grey-500;
|
||||||
|
}
|
||||||
|
}
|
1
ui/app/pages/token/index.scss
Normal file
1
ui/app/pages/token/index.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import 'fee-card/index';
|
Loading…
x
Reference in New Issue
Block a user