-
+ { statusText }
+
+ {' · '}
+
+ )
+}
- return (
-
-
)}
buttons={(
}
onClick={() => {
sendTokenEvent()
dispatch(updateSendToken(token))
diff --git a/ui/app/components/ui/button/button.component.js b/ui/app/components/ui/button/button.component.js
index cc4bb45e2..64b19cca3 100644
--- a/ui/app/components/ui/button/button.component.js
+++ b/ui/app/components/ui/button/button.component.js
@@ -25,7 +25,7 @@ const typeHash = {
'first-time': CLASSNAME_FIRST_TIME,
}
-const Button = ({ type, submit, large, children, rounded, className, ...buttonProps }) => (
+const Button = ({ type, submit, large, children, icon, rounded, className, ...buttonProps }) => (
)
@@ -48,6 +49,7 @@ Button.propTypes = {
rounded: PropTypes.bool,
className: PropTypes.string,
children: PropTypes.node,
+ icon: PropTypes.node,
}
Button.defaultProps = {
diff --git a/ui/app/components/ui/button/buttons.scss b/ui/app/components/ui/button/buttons.scss
index be2295a9f..a28dfa4d2 100644
--- a/ui/app/components/ui/button/buttons.scss
+++ b/ui/app/components/ui/button/buttons.scss
@@ -66,6 +66,12 @@ $warning-light-orange: #F8B588;
.button {
@extend %button;
+
+ &__icon {
+ display: flex;
+ align-items: center;
+ margin-right: 4px;
+ }
}
.btn-secondary {
diff --git a/ui/app/components/ui/editable-label.js b/ui/app/components/ui/editable-label.js
index 553965b1c..d1788472e 100644
--- a/ui/app/components/ui/editable-label.js
+++ b/ui/app/components/ui/editable-label.js
@@ -57,7 +57,7 @@ class EditableLabel extends Component {
- { permissionRejected ? t('cancelling') : t('connecting') }
-
- )
- }
-
renderRequestedPermissions () {
const {
selectedPermissions, onPermissionToggle,
@@ -134,14 +95,10 @@ export default class PermissionPageContainerContent extends PureComponent {
}
getTitle () {
- const { domainMetadata, redirect, permissionRejected, selectedIdentities, allIdentitiesSelected } = this.props
+ const { domainMetadata, selectedIdentities, allIdentitiesSelected } = this.props
const { t } = this.context
- if (redirect && permissionRejected) {
- return t('cancelledConnectionWithMetaMask')
- } else if (redirect) {
- return t('connectingWithMetaMask')
- } else if (domainMetadata.extensionId) {
+ if (domainMetadata.extensionId) {
return t('externalExtension', [domainMetadata.extensionId])
} else if (allIdentitiesSelected) {
return t(
@@ -166,36 +123,27 @@ export default class PermissionPageContainerContent extends PureComponent {
}
render () {
- const { domainMetadata, redirect } = this.props
+ const { domainMetadata } = this.props
const { t } = this.context
const title = this.getTitle()
return (
-
-
-
- { permissionRejected
- ?
- :
- }
- { this.renderBrokenLine() }
-
-
-
-
- 
-
-
-
- { !redirect
- ? (
-
)
}
diff --git a/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js b/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js
index 456295536..e32f8a0b1 100644
--- a/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js
+++ b/ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js
@@ -1,17 +1,18 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react'
-import IconWithFallBack from '../../ui/icon-with-fallback'
+import SiteIcon from '../../ui/site-icon'
export default class PermissionsConnectHeader extends Component {
static propTypes = {
icon: PropTypes.string,
- iconName: PropTypes.string.isRequired,
+ iconName: PropTypes.string,
headerTitle: PropTypes.node,
headerText: PropTypes.string,
}
static defaultProps = {
icon: null,
+ iconName: '',
headerTitle: '',
headerText: '',
}
@@ -21,7 +22,7 @@ export default class PermissionsConnectHeader extends Component {
return (
-
- { this.renderRequestedPermissions() }
-
-
- )
- : this.renderRedirect()
- }
+
+
)
}
diff --git a/ui/app/components/app/permission-page-container/permission-page-container.component.js b/ui/app/components/app/permission-page-container/permission-page-container.component.js
index 320c28be4..3020b82b5 100644
--- a/ui/app/components/app/permission-page-container/permission-page-container.component.js
+++ b/ui/app/components/app/permission-page-container/permission-page-container.component.js
@@ -13,15 +13,11 @@ export default class PermissionPageContainer extends Component {
selectedIdentities: PropTypes.array,
allIdentitiesSelected: PropTypes.bool,
request: PropTypes.object,
- redirect: PropTypes.bool,
- permissionRejected: PropTypes.bool,
requestMetadata: PropTypes.object,
targetDomainMetadata: PropTypes.object.isRequired,
}
static defaultProps = {
- redirect: null,
- permissionRejected: null,
request: {},
requestMetadata: {},
selectedIdentities: [],
@@ -116,8 +112,6 @@ export default class PermissionPageContainer extends Component {
requestMetadata,
targetDomainMetadata,
selectedIdentities,
- redirect,
- permissionRejected,
allIdentitiesSelected,
} = this.props
@@ -129,27 +123,20 @@ export default class PermissionPageContainer extends Component {
selectedPermissions={this.state.selectedPermissions}
onPermissionToggle={this.onPermissionToggle}
selectedIdentities={selectedIdentities}
- redirect={redirect}
- permissionRejected={permissionRejected}
allIdentitiesSelected={allIdentitiesSelected}
/>
- { !redirect
- ? (
-
+
+ { this.renderRequestedPermissions() }
+
+
- this.onCancel()}
- cancelText={this.context.t('cancel')}
- onSubmit={() => this.onSubmit()}
- submitText={this.context.t('connect')}
- submitButtonType="confirm"
- buttonSizeLarge={false}
- />
-
- )
- : null
- }
+
+ this.onCancel()}
+ cancelText={this.context.t('cancel')}
+ onSubmit={() => this.onSubmit()}
+ submitText={this.context.t('connect')}
+ submitButtonType="confirm"
+ buttonSizeLarge={false}
+ />
+
-
)
diff --git a/ui/app/components/app/token-cell/token-cell.js b/ui/app/components/app/token-cell/token-cell.js
index 87b3210a8..cf23b51ac 100644
--- a/ui/app/components/app/token-cell/token-cell.js
+++ b/ui/app/components/app/token-cell/token-cell.js
@@ -1,47 +1,18 @@
import classnames from 'classnames'
import PropTypes from 'prop-types'
import React from 'react'
-import { conversionUtil, multiplyCurrencies } from '../../../helpers/utils/conversion-util'
import AssetListItem from '../asset-list-item'
import { useSelector } from 'react-redux'
-import { getTokenExchangeRates, getConversionRate, getCurrentCurrency, getSelectedAddress } from '../../../selectors'
+import { getSelectedAddress } from '../../../selectors'
import { useI18nContext } from '../../../hooks/useI18nContext'
-import { formatCurrency } from '../../../helpers/utils/confirm-tx.util'
+import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'
+
export default function TokenCell ({ address, outdatedBalance, symbol, string, image, onClick }) {
- const contractExchangeRates = useSelector(getTokenExchangeRates)
- const conversionRate = useSelector(getConversionRate)
- const currentCurrency = useSelector(getCurrentCurrency)
const userAddress = useSelector(getSelectedAddress)
const t = useI18nContext()
- let currentTokenToFiatRate
- let currentTokenInFiat
- let formattedFiat = ''
-
-
- // if the conversionRate is 0 eg: currently unknown
- // or the contract exchange rate is currently unknown
- // the effective currentTokenToFiatRate is 0 and erroneous.
- // Skipping this entire block will result in fiat not being
- // shown to the user, instead of a fiat value of 0 for a non-zero
- // token amount.
- if (conversionRate > 0 && contractExchangeRates[address]) {
- currentTokenToFiatRate = multiplyCurrencies(
- contractExchangeRates[address],
- conversionRate
- )
- currentTokenInFiat = conversionUtil(string, {
- fromNumericBase: 'dec',
- fromCurrency: symbol,
- toCurrency: currentCurrency.toUpperCase(),
- numberOfDecimals: 2,
- conversionRate: currentTokenToFiatRate,
- })
- formattedFiat = `${formatCurrency(currentTokenInFiat, currentCurrency)} ${currentCurrency.toUpperCase()}`
- }
-
- const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol
+ const formattedFiat = useTokenFiatAmount(address, string, symbol)
const warning = outdatedBalance
? (
@@ -68,7 +39,7 @@ export default function TokenCell ({ address, outdatedBalance, symbol, string, i
tokenImage={image}
warning={warning}
primary={`${string || 0} ${symbol}`}
- secondary={showFiat ? formattedFiat : undefined}
+ secondary={formattedFiat}
/>
)
diff --git a/ui/app/components/app/token-cell/token-cell.test.js b/ui/app/components/app/token-cell/token-cell.test.js
index fba52b602..2b239dab1 100644
--- a/ui/app/components/app/token-cell/token-cell.test.js
+++ b/ui/app/components/app/token-cell/token-cell.test.js
@@ -20,6 +20,12 @@ describe('Token Cell', function () {
'0xAnotherToken': 0.015,
},
conversionRate: 7.00,
+ preferences: {},
+ provider: {
+ chainId: '1',
+ ticker: 'ETH',
+ type: 'mainnet',
+ },
},
appState: {
sidebar: {
diff --git a/ui/app/components/app/token-list/token-list.js b/ui/app/components/app/token-list/token-list.js
index cc0a4acaf..591dbe33a 100644
--- a/ui/app/components/app/token-list/token-list.js
+++ b/ui/app/components/app/token-list/token-list.js
@@ -1,6 +1,5 @@
import React from 'react'
import PropTypes from 'prop-types'
-import contracts from 'eth-contract-metadata'
import { isEqual } from 'lodash'
import TokenCell from '../token-cell'
@@ -10,15 +9,6 @@ import { useSelector } from 'react-redux'
import { getAssetImages } from '../../../selectors'
import { getTokens } from '../../../ducks/metamask/metamask'
-const defaultTokens = []
-for (const address in contracts) {
- const contract = contracts[address]
- if (contract.erc20) {
- contract.address = address
- defaultTokens.push(contract)
- }
-}
-
export default function TokenList ({ onTokenClick }) {
const t = useI18nContext()
const assetImages = useSelector(getAssetImages)
diff --git a/ui/app/components/app/transaction-icon/index.js b/ui/app/components/app/transaction-icon/index.js
new file mode 100644
index 000000000..d41970a54
--- /dev/null
+++ b/ui/app/components/app/transaction-icon/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-icon'
diff --git a/ui/app/components/app/transaction-icon/transaction-icon.js b/ui/app/components/app/transaction-icon/transaction-icon.js
new file mode 100644
index 000000000..24f4f4715
--- /dev/null
+++ b/ui/app/components/app/transaction-icon/transaction-icon.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Approve from '../../ui/icon/approve-icon.component'
+import Interaction from '../../ui/icon/interaction-icon.component'
+import Receive from '../../ui/icon/receive-icon.component'
+import Send from '../../ui/icon/send-icon.component'
+import Sign from '../../ui/icon/sign-icon.component'
+import {
+ TRANSACTION_CATEGORY_APPROVAL,
+ TRANSACTION_CATEGORY_SIGNATURE_REQUEST,
+ TRANSACTION_CATEGORY_INTERACTION,
+ TRANSACTION_CATEGORY_SEND,
+ TRANSACTION_CATEGORY_RECEIVE,
+ UNAPPROVED_STATUS,
+ FAILED_STATUS,
+ REJECTED_STATUS,
+ CANCELLED_STATUS,
+ DROPPED_STATUS,
+ SUBMITTED_STATUS,
+ APPROVED_STATUS,
+} from '../../../helpers/constants/transactions'
+
+
+const ICON_MAP = {
+ [TRANSACTION_CATEGORY_APPROVAL]: Approve,
+ [TRANSACTION_CATEGORY_INTERACTION]: Interaction,
+ [TRANSACTION_CATEGORY_SEND]: Send,
+ [TRANSACTION_CATEGORY_SIGNATURE_REQUEST]: Sign,
+ [TRANSACTION_CATEGORY_RECEIVE]: Receive,
+}
+
+const FAIL_COLOR = '#D73A49'
+const PENDING_COLOR = '#6A737D'
+const OK_COLOR = '#2F80ED'
+
+const COLOR_MAP = {
+ [SUBMITTED_STATUS]: PENDING_COLOR,
+ [UNAPPROVED_STATUS]: PENDING_COLOR,
+ [APPROVED_STATUS]: PENDING_COLOR,
+ [FAILED_STATUS]: FAIL_COLOR,
+ [REJECTED_STATUS]: FAIL_COLOR,
+ [CANCELLED_STATUS]: FAIL_COLOR,
+ [DROPPED_STATUS]: FAIL_COLOR,
+}
+
+export default function TransactionIcon ({ status, category }) {
+
+ const color = COLOR_MAP[status] || OK_COLOR
+
+ const Icon = ICON_MAP[category]
+
+ return {iconName}
{primaryCurrency}
@@ -184,7 +152,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce senderAddress={senderAddress} recipientAddress={recipientAddress} onRetry={retryTransaction} - showRetry={isFailed} + showRetry={status === FAILED_STATUS} showSpeedUp={shouldShowSpeedUp} isEarliestNonce={isEarliestNonce} onCancel={cancelTransaction} diff --git a/ui/app/components/app/transaction-list/transaction-list.component.js b/ui/app/components/app/transaction-list/transaction-list.component.js index 46b8b45de..dac902add 100644 --- a/ui/app/components/app/transaction-list/transaction-list.component.js +++ b/ui/app/components/app/transaction-list/transaction-list.component.js @@ -12,6 +12,7 @@ import * as actions from '../../../ducks/gas/gas.duck' import { useI18nContext } from '../../../hooks/useI18nContext' import TransactionListItem from '../transaction-list-item' import Button from '../../ui/button' +import { TOKEN_CATEGORY_HASH } from '../../../helpers/constants/transactions' const PAGE_INCREMENT = 10 @@ -19,7 +20,23 @@ const getTransactionGroupRecipientAddressFilter = (recipientAddress) => { return ({ initialTransaction: { txParams } }) => txParams && txParams.to === recipientAddress } -export default function TransactionList ({ tokenAddress }) { +const tokenTransactionFilter = ({ + initialTransaction: { + transactionCategory, + }, +}) => !TOKEN_CATEGORY_HASH[transactionCategory] + + +const getFilteredTransactionGroups = (transactionGroups, hideTokenTransactions, tokenAddress) => { + if (hideTokenTransactions) { + return transactionGroups.filter(tokenTransactionFilter) + } else if (tokenAddress) { + return transactionGroups.filter(getTransactionGroupRecipientAddressFilter(tokenAddress)) + } + return transactionGroups +} + +export default function TransactionList ({ hideTokenTransactions, tokenAddress }) { const [limit, setLimit] = useState(PAGE_INCREMENT) const t = useI18nContext() @@ -29,22 +46,12 @@ export default function TransactionList ({ tokenAddress }) { const { transactionTime: transactionTimeFeatureActive } = useSelector(getFeatureFlags) const pendingTransactions = useMemo( - () => ( - tokenAddress && tokenAddress.startsWith('0x') - ? unfilteredPendingTransactions - .filter(getTransactionGroupRecipientAddressFilter(tokenAddress)) - : unfilteredPendingTransactions - ), - [unfilteredPendingTransactions, tokenAddress] + () => getFilteredTransactionGroups(unfilteredPendingTransactions, hideTokenTransactions, tokenAddress), + [hideTokenTransactions, tokenAddress, unfilteredPendingTransactions] ) const completedTransactions = useMemo( - () => ( - tokenAddress && tokenAddress.startsWith('0x') - ? unfilteredCompletedTransactions - .filter(getTransactionGroupRecipientAddressFilter(tokenAddress)) - : unfilteredCompletedTransactions - ), - [unfilteredCompletedTransactions, tokenAddress] + () => getFilteredTransactionGroups(unfilteredCompletedTransactions, hideTokenTransactions, tokenAddress), + [hideTokenTransactions, tokenAddress, unfilteredCompletedTransactions] ) const { fetchGasEstimates, fetchBasicGasAndTimeEstimates } = useMemo(() => ({ @@ -122,9 +129,11 @@ export default function TransactionList ({ tokenAddress }) { } TransactionList.propTypes = { + hideTokenTransactions: PropTypes.bool, tokenAddress: PropTypes.string, } TransactionList.defaultProps = { + hideTokenTransactions: false, tokenAddress: undefined, } diff --git a/ui/app/components/app/transaction-status/index.scss b/ui/app/components/app/transaction-status/index.scss index 99884d28c..13dcd6c30 100644 --- a/ui/app/components/app/transaction-status/index.scss +++ b/ui/app/components/app/transaction-status/index.scss @@ -1,52 +1,24 @@ .transaction-status { - height: 26px; - width: 84px; - border-radius: 4px; - background-color: #f0f0f0; - color: #5e6064; - font-size: .625rem; - text-transform: uppercase; - display: flex; - justify-content: center; - align-items: center; - - @media screen and (max-width: $break-small) { - height: 16px; - min-width: 72px; - font-size: 10px; - padding: 0 12px; + display: inline; + &--unapproved { + color: $Orange-500; } - - &--confirmed { - background-color: #eafad7; - color: #609a1c; - - .transaction-status__transaction-count { - border: 1px solid #609a1c; - } + &--failed { + color: $Red-500; } - - &--approved, &--submitted { - background-color: #FFF2DB; - color: #CA810A; - - .transaction-status__transaction-count { - border: 1px solid #CA810A; - } + &--cancelled { + color: $Red-500; } - - &--failed { - background: lighten($monzo, 56%); - color: $monzo; - - .transaction-status__transaction-count { - border: 1px solid $monzo; - } + &--dropped { + color: $Red-500; + } + &--rejected { + color: $Red-500; + } + &--pending { + color: $Orange-500; } - - &__pending-spinner { - height: 16px; - width: 16px; - margin-right: 6px; + &--queued { + color: $Grey-500; } } diff --git a/ui/app/components/app/transaction-status/tests/transaction-status.component.test.js b/ui/app/components/app/transaction-status/tests/transaction-status.component.test.js index 510950248..939090875 100644 --- a/ui/app/components/app/transaction-status/tests/transaction-status.component.test.js +++ b/ui/app/components/app/transaction-status/tests/transaction-status.component.test.js @@ -1,33 +1,80 @@ import React from 'react' import assert from 'assert' import { mount } from 'enzyme' +import sinon from 'sinon' +import * as i18nHook from '../../../../hooks/useI18nContext' import TransactionStatus from '../transaction-status.component' import Tooltip from '../../../ui/tooltip-v2' describe('TransactionStatus Component', function () { - it('should render APPROVED properly', function () { + before(function () { + sinon.stub(i18nHook, 'useI18nContext').returns((str) => str.toUpperCase()) + }) + + it('should render CONFIRMED properly', function () { const wrapper = mount(
- { statusToTextHash[statusKey] === 'pending' ?
- { statusText }
-
-
- )
- }
+TransactionStatus.propTypes = {
+ status: PropTypes.string,
+ className: PropTypes.string,
+ date: PropTypes.string,
+ error: PropTypes.object,
+ isEarliestNonce: PropTypes.bool,
}
diff --git a/ui/app/components/app/transaction-time-remaining/index.js b/ui/app/components/app/transaction-time-remaining/index.js
deleted file mode 100644
index 87c6821d8..000000000
--- a/ui/app/components/app/transaction-time-remaining/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './transaction-time-remaining.container'
diff --git a/ui/app/components/app/transaction-time-remaining/transaction-time-remaining.component.js b/ui/app/components/app/transaction-time-remaining/transaction-time-remaining.component.js
deleted file mode 100644
index c9598d69b..000000000
--- a/ui/app/components/app/transaction-time-remaining/transaction-time-remaining.component.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { calcTransactionTimeRemaining } from './transaction-time-remaining.util'
-
-export default class TransactionTimeRemaining extends PureComponent {
- static propTypes = {
- className: PropTypes.string,
- initialTimeEstimate: PropTypes.number,
- submittedTime: PropTypes.number,
- }
-
- constructor (props) {
- super(props)
- const { initialTimeEstimate, submittedTime } = props
- this.state = {
- timeRemaining: calcTransactionTimeRemaining(initialTimeEstimate, submittedTime),
- }
- this.interval = setInterval(
- () => this.setState({ timeRemaining: calcTransactionTimeRemaining(initialTimeEstimate, submittedTime) }),
- 1000
- )
- }
-
- componentDidUpdate (prevProps) {
- const { initialTimeEstimate, submittedTime } = this.props
- if (initialTimeEstimate !== prevProps.initialTimeEstimate) {
- clearInterval(this.interval)
- const calcedTimeRemaining = calcTransactionTimeRemaining(initialTimeEstimate, submittedTime)
- this.setState({ timeRemaining: calcedTimeRemaining })
- this.interval = setInterval(
- () => this.setState({ timeRemaining: calcTransactionTimeRemaining(initialTimeEstimate, submittedTime) }),
- 1000
- )
- }
- }
-
- componentWillUnmount () {
- clearInterval(this.interval)
- }
-
- render () {
- const { className } = this.props
- const { timeRemaining } = this.state
-
- return (
-
- { timeRemaining }
-
-
- )
- }
-}
diff --git a/ui/app/components/app/transaction-time-remaining/transaction-time-remaining.container.js b/ui/app/components/app/transaction-time-remaining/transaction-time-remaining.container.js
deleted file mode 100644
index 754d84991..000000000
--- a/ui/app/components/app/transaction-time-remaining/transaction-time-remaining.container.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { connect } from 'react-redux'
-import TransactionTimeRemaining from './transaction-time-remaining.component'
-import {
- getEstimatedGasPrices,
- getEstimatedGasTimes,
-} from '../../../selectors'
-import { getRawTimeEstimateData } from '../../../helpers/utils/gas-time-estimates.util'
-import { hexWEIToDecGWEI } from '../../../helpers/utils/conversions.util'
-
-const mapStateToProps = (state, ownProps) => {
- const { transaction } = ownProps
- const { gasPrice: currentGasPrice } = transaction.txParams
- const customGasPrice = calcCustomGasPrice(currentGasPrice)
- const gasPrices = getEstimatedGasPrices(state)
- const estimatedTimes = getEstimatedGasTimes(state)
-
- const {
- newTimeEstimate: initialTimeEstimate,
- } = getRawTimeEstimateData(customGasPrice, gasPrices, estimatedTimes)
-
- const submittedTime = transaction.submittedTime
-
- return {
- initialTimeEstimate,
- submittedTime,
- }
-}
-
-export default connect(mapStateToProps)(TransactionTimeRemaining)
-
-function calcCustomGasPrice (customGasPriceInHex) {
- return Number(hexWEIToDecGWEI(customGasPriceInHex))
-}
diff --git a/ui/app/components/app/transaction-time-remaining/transaction-time-remaining.util.js b/ui/app/components/app/transaction-time-remaining/transaction-time-remaining.util.js
deleted file mode 100644
index 0ba81edfc..000000000
--- a/ui/app/components/app/transaction-time-remaining/transaction-time-remaining.util.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { formatTimeEstimate } from '../../../helpers/utils/gas-time-estimates.util'
-
-export function calcTransactionTimeRemaining (initialTimeEstimate, submittedTime) {
- const currentTime = (new Date()).getTime()
- const timeElapsedSinceSubmission = (currentTime - submittedTime) / 1000
- const timeRemainingOnEstimate = initialTimeEstimate - timeElapsedSinceSubmission
-
- const renderingTimeRemainingEstimate = timeRemainingOnEstimate < 30
- ? '< 30 s'
- : formatTimeEstimate(timeRemainingOnEstimate)
-
- return renderingTimeRemainingEstimate
-}
diff --git a/ui/app/components/app/wallet-overview/eth-overview.js b/ui/app/components/app/wallet-overview/eth-overview.js
index c9b142af2..d232b0af8 100644
--- a/ui/app/components/app/wallet-overview/eth-overview.js
+++ b/ui/app/components/app/wallet-overview/eth-overview.js
@@ -15,6 +15,7 @@ import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display
import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
import { showModal } from '../../../store/actions'
import { isBalanceCached, getSelectedAccount, getShouldShowFiat } from '../../../selectors/selectors'
+import PaperAirplane from '../../ui/icon/paper-airplane-icon'
const EthOverview = ({ className }) => {
const dispatch = useDispatch()
@@ -78,18 +79,21 @@ const EthOverview = ({ className }) => {
buttons={(
<>
}
onClick={() => {
sendEvent()
history.push(SEND_ROUTE)
diff --git a/ui/app/components/app/wallet-overview/index.scss b/ui/app/components/app/wallet-overview/index.scss
index ac62d3f43..b461f062a 100644
--- a/ui/app/components/app/wallet-overview/index.scss
+++ b/ui/app/components/app/wallet-overview/index.scss
@@ -27,6 +27,17 @@
}
}
+%asset-buttons {
+ min-width: initial;
+ width: 100px;
+
+ &:not(:last-child) {
+ margin-right: 12px;
+ }
+ text-transform: uppercase;
+ font-weight: bold;
+}
+
.eth-overview {
&__balance {
display: flex;
@@ -73,12 +84,7 @@
}
&__button {
- min-width: initial;
- width: 100px;
-
- &:not(:last-child) {
- margin-right: 12px;
- }
+ @extend %asset-buttons;
}
}
@@ -102,12 +108,14 @@
justify-content: center;
}
- &__button {
- min-width: initial;
- width: 100px;
+ &__secondary-balance {
+ font-size: 16px;
+ line-height: 23px;
+ font-weight: 400;
+ color: $Grey-400;
+ }
- &:not(:last-child) {
- margin-right: 12px;
- }
+ &__button {
+ @extend %asset-buttons;
}
}
diff --git a/ui/app/components/app/wallet-overview/token-overview.js b/ui/app/components/app/wallet-overview/token-overview.js
index 67f5783fb..e1e0df2b6 100644
--- a/ui/app/components/app/wallet-overview/token-overview.js
+++ b/ui/app/components/app/wallet-overview/token-overview.js
@@ -5,13 +5,16 @@ import { useHistory } from 'react-router-dom'
import Button from '../../ui/button'
import Identicon from '../../ui/identicon'
-import TokenBalance from '../../ui/token-balance'
+import CurrencyDisplay from '../../ui/currency-display'
import { I18nContext } from '../../../contexts/i18n'
import WalletOverview from './wallet-overview'
import { SEND_ROUTE } from '../../../helpers/constants/routes'
import { useMetricEvent } from '../../../hooks/useMetricEvent'
+import { useTokenTracker } from '../../../hooks/useTokenTracker'
+import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'
import { getAssetImages } from '../../../selectors/selectors'
import { updateSendToken } from '../../../store/actions'
+import PaperAirplane from '../../ui/icon/paper-airplane-icon'
const TokenOverview = ({ className, token }) => {
const dispatch = useDispatch()
@@ -25,21 +28,38 @@ const TokenOverview = ({ className, token }) => {
})
const history = useHistory()
const assetImages = useSelector(getAssetImages)
+ const { tokensWithBalances } = useTokenTracker([token])
+ const balance = tokensWithBalances[0]?.string
+ const formattedFiatBalance = useTokenFiatAmount(token.address, balance, token.symbol)
return (
{this.state.value}
), (
- this.setState({ isEditing: true })} />
+ this.setState({ isEditing: true })} />
)]
}
diff --git a/ui/app/components/ui/icon-border/icon-border.js b/ui/app/components/ui/icon-border/icon-border.js
new file mode 100644
index 000000000..5911cf918
--- /dev/null
+++ b/ui/app/components/ui/icon-border/icon-border.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default function IconBorder ({ children, size }) {
+ const borderStyle = { height: `${size}px`, width: `${size}px` }
+ return (
+
+ { children }
+
+ )
+}
+
+IconBorder.propTypes = {
+ children: PropTypes.node.isRequired,
+ size: PropTypes.number.isRequired,
+}
diff --git a/ui/app/components/ui/icon-border/icon-border.scss b/ui/app/components/ui/icon-border/icon-border.scss
new file mode 100644
index 000000000..6a718c83a
--- /dev/null
+++ b/ui/app/components/ui/icon-border/icon-border.scss
@@ -0,0 +1,10 @@
+
+.icon-border {
+ border-radius: 50%;
+ border: 1px solid #F2F3F4;
+ background: #FFFFFF;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/ui/app/components/ui/icon-border/index.js b/ui/app/components/ui/icon-border/index.js
new file mode 100644
index 000000000..dea3f116e
--- /dev/null
+++ b/ui/app/components/ui/icon-border/index.js
@@ -0,0 +1 @@
+export { default } from './icon-border'
diff --git a/ui/app/components/ui/icon-with-fallback/icon-with-fallback.component.js b/ui/app/components/ui/icon-with-fallback/icon-with-fallback.component.js
index 13b3e93d7..898861468 100644
--- a/ui/app/components/ui/icon-with-fallback/icon-with-fallback.component.js
+++ b/ui/app/components/ui/icon-with-fallback/icon-with-fallback.component.js
@@ -5,6 +5,7 @@ export default class IconWithFallback extends PureComponent {
static propTypes = {
icon: PropTypes.string,
name: PropTypes.string,
+ size: PropTypes.number.isRequired,
}
static defaultProps = {
@@ -17,26 +18,21 @@ export default class IconWithFallback extends PureComponent {
}
render () {
- const { icon, name } = this.props
+ const { icon, name, size } = this.props
+ const style = { height: `${size}px`, width: `${size}px` }
- return (
-
-
- { !this.state.iconError && icon
- ? (
- 
this.setState({ iconError: true })}
- />
- )
- : (
-
- { name.length ? name.charAt(0).toUpperCase() : '' }
-
- )
- }
-
- )
+ return !this.state.iconError && icon
+ ? (
+
+ {icon}
+ {label && {label}}
+
+ )
+}
+
+IconWithLabel.propTypes = {
+ icon: PropTypes.node.isRequired,
+ className: PropTypes.string,
+ label: PropTypes.string,
+}
diff --git a/ui/app/components/ui/icon-with-label/index.js b/ui/app/components/ui/icon-with-label/index.js
new file mode 100644
index 000000000..10432ac8f
--- /dev/null
+++ b/ui/app/components/ui/icon-with-label/index.js
@@ -0,0 +1 @@
+export { default } from './icon-with-label'
diff --git a/ui/app/components/ui/icon-with-label/index.scss b/ui/app/components/ui/icon-with-label/index.scss
new file mode 100644
index 000000000..628a54272
--- /dev/null
+++ b/ui/app/components/ui/icon-with-label/index.scss
@@ -0,0 +1,10 @@
+.icon-with-label {
+ display: flex;
+ align-items: center;
+
+ &__label {
+ font-size: 10px;
+ margin-left: 4px;
+ color: $Grey-500;
+ }
+}
diff --git a/ui/app/components/ui/icon/icon.stories.js b/ui/app/components/ui/icon/icon.stories.js
index 73d25e6fd..ee52a2f90 100644
--- a/ui/app/components/ui/icon/icon.stories.js
+++ b/ui/app/components/ui/icon/icon.stories.js
@@ -51,3 +51,7 @@ export const preloader = () => (
size={number('size', 40)}
/>
)
+
+export const PaperAirplane = () => (
+