m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

fix overflowing contract names and origins (#8823)

Browse Source 
* fix overflowing contract names and origins

Moves heading and subtitle into divs with h3/h2 children so that the
div can be display flex and still have ellipses overflow. Only the
heading was display flex but I wanted the two to have similar structure.
this allows subheading to be display flex in the future.

Also uses stripHttpSchemes to remove that from origin in the subheading

* rtl ellipses on domain

* Update ui/app/components/app/transaction-list-item/index.scss

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

Co-authored-by: Mark Stacey <markjstacey@gmail.com>
This commit is contained in:
Brad Decker 2020-06-17 11:38:15 -05:00 committed by GitHub
parent dafc5046ff
commit c07bf62a73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 100 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/app/asset-list-item/asset-list-item.js
View File

@ -97,7 +97,7 @@ const AssetListItem = ({
data-testid={dataTestId}
title={primary}
titleIcon={titleIcon}
subtitle={secondary}
subtitle={<h3>{secondary}</h3>}
onClick={onClick}
icon={(
<Identicon

2
ui/app/components/app/token-cell/token-cell.test.js
View File

@ -69,7 +69,7 @@ describe('Token Cell', function () {
})
it('renders token balance and symbol', function () {
assert.equal(wrapper.find('.list-item__heading').text(), '5.000 TEST ')
assert.equal(wrapper.find('.list-item__heading').text(), '5.000 TEST')
})
it('renders converted fiat amount', function () {

23
ui/app/components/app/transaction-list-item/index.scss
View File

@ -31,4 +31,27 @@
padding-top: 0;
}
}
.list-item__subheading > h3 {
overflow: visible;
display: flex;
white-space: nowrap;
text-overflow: initial;
}
.transaction-status:after {
content: "·";
margin: 0 4px;
}
&__origin, &__address {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&__origin {
/*rtl:ignore*/
direction: rtl;
}
}

9
ui/app/components/app/transaction-list-item/transaction-list-item.component.js
View File

@ -40,6 +40,7 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
const {
title,
subtitle,
subtitleContainsOrigin,
date,
category,
primaryCurrency,
@ -122,8 +123,8 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
/>
)}
icon={<TransactionIcon category={category} status={status} />}
subtitle={subtitle}
subtitleStatus={(
subtitle={(
<h3>
<TransactionStatus
isPending={isPending}
isEarliestNonce={isEarliestNonce}
@ -131,6 +132,10 @@ export default function TransactionListItem ({ transactionGroup, isEarliestNonce
date={date}
status={status}
/>
<span className={subtitleContainsOrigin ? 'transaction-list-item__origin' : 'transaction-list-item__address'}>
{subtitle}
</span>
</h3>
)}
rightContent={!isSignatureReq && (
<>

10
ui/app/components/app/transaction-status/tests/transaction-status.component.test.js
View File

@ -20,7 +20,7 @@ describe('TransactionStatus Component', function () {
)
assert.ok(wrapper)
assert.equal(wrapper.text(), 'June 1 · ')
assert.equal(wrapper.text(), 'June 1')
})
it('should render PENDING properly when status is APPROVED', function () {
@ -33,7 +33,7 @@ describe('TransactionStatus Component', function () {
)
assert.ok(wrapper)
assert.equal(wrapper.text(), 'PENDING · ')
assert.equal(wrapper.text(), 'PENDING')
assert.equal(wrapper.find(Tooltip).props().title, 'test-title')
})
@ -47,7 +47,7 @@ describe('TransactionStatus Component', function () {
)
assert.ok(wrapper)
assert.equal(wrapper.text(), 'PENDING · ')
assert.equal(wrapper.text(), 'PENDING')
})
it('should render QUEUED properly', function () {
@ -59,7 +59,7 @@ describe('TransactionStatus Component', function () {
assert.ok(wrapper)
assert.ok(wrapper.find('.transaction-status--queued').length, 'queued className not found')
assert.equal(wrapper.text(), 'QUEUED · ')
assert.equal(wrapper.text(), 'QUEUED')
})
it('should render UNAPPROVED properly', function () {
@ -71,7 +71,7 @@ describe('TransactionStatus Component', function () {
assert.ok(wrapper)
assert.ok(wrapper.find('.transaction-status--unapproved').length, 'unapproved className not found')
assert.equal(wrapper.text(), 'UNAPPROVED · ')
assert.equal(wrapper.text(), 'UNAPPROVED')
})
after(function () {

3
ui/app/components/app/transaction-status/transaction-status.component.js
View File

@ -56,7 +56,6 @@ export default function TransactionStatus ({ status, date, error, isEarliestNonc
const statusText = statusKey === CONFIRMED_STATUS ? date : t(statusKey)
return (
<span>
<Tooltip
position="top"
title={tooltipText}
@ -64,8 +63,6 @@ export default function TransactionStatus ({ status, date, error, isEarliestNonc
>
{ statusText }
</Tooltip>
{' · '}
</span>
)
}

12
ui/app/components/ui/list-item/index.scss
View File

@ -41,6 +41,11 @@
display: flex;
align-items: center;
> h2 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-wrap {
display: inline-block;
margin-left: 8px;
@ -53,6 +58,13 @@
line-height: 14px;
color: $Grey-500;
margin-top: 4px;
// all direct descendants should be truncated with ellipses
// allows flexibility in consuming components to use h3/other tag
> * {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:empty {
display: none;
}

19
ui/app/components/ui/list-item/list-item.component.js
View File

@ -6,7 +6,6 @@ export default function ListItem ({
title,
subtitle,
onClick,
subtitleStatus,
children,
titleIcon,
icon,
@ -24,16 +23,19 @@ export default function ListItem ({
{icon}
</div>
)}
<h2 className="list-item__heading">
{ title } {titleIcon && (
<div className="list-item__heading">
<h2>{ title }</h2>
{titleIcon && (
<div className="list-item__heading-wrap">
{titleIcon}
</div>
)}
</h2>
<h3 className="list-item__subheading">
{subtitleStatus}{subtitle}
</h3>
</div>
{subtitle && (
<div className="list-item__subheading">
{subtitle}
</div>
)}
{children && (
<div className="list-item__actions">
{ children }
@ -56,8 +58,7 @@ export default function ListItem ({
ListItem.propTypes = {
title: PropTypes.string.isRequired,
titleIcon: PropTypes.node,
subtitle: PropTypes.string,
subtitleStatus: PropTypes.node,
subtitle: PropTypes.node,
children: PropTypes.node,
icon: PropTypes.node,
rightContent: PropTypes.node,

6
ui/app/hooks/tests/useTransactionDisplayData.test.js
View File

@ -16,6 +16,7 @@ const expectedResults = [
{ title: 'Send ETH',
category: 'send',
subtitle: 'To: 0xffe5...1a97',
subtitleContainsOrigin: false,
date: 'May 12',
primaryCurrency: '-1 ETH',
senderAddress: '0x9eca64466f257793eaa52fcfff5066894b76a149',
@ -26,6 +27,7 @@ const expectedResults = [
{ title: 'Send ETH',
category: 'send',
subtitle: 'To: 0x0ccc...8848',
subtitleContainsOrigin: false,
date: 'May 12',
primaryCurrency: '-2 ETH',
senderAddress: '0x9eca64466f257793eaa52fcfff5066894b76a149',
@ -36,6 +38,7 @@ const expectedResults = [
{ title: 'Send ETH',
category: 'send',
subtitle: 'To: 0xffe5...1a97',
subtitleContainsOrigin: false,
date: 'May 12',
primaryCurrency: '-2 ETH',
senderAddress: '0x9eca64466f257793eaa52fcfff5066894b76a149',
@ -46,6 +49,7 @@ const expectedResults = [
{ title: 'Receive',
category: 'receive',
subtitle: 'From: 0x31b9...4523',
subtitleContainsOrigin: false,
date: 'May 12',
primaryCurrency: '18.75 ETH',
senderAddress: '0x31b98d14007bdee637298086988a0bbd31184523',
@ -56,6 +60,7 @@ const expectedResults = [
{ title: 'Receive',
category: 'receive',
subtitle: 'From: 0x9eca...a149',
subtitleContainsOrigin: false,
date: 'May 8',
primaryCurrency: '0 ETH',
senderAddress: '0x9eca64466f257793eaa52fcfff5066894b76a149',
@ -66,6 +71,7 @@ const expectedResults = [
{ title: 'Receive',
category: 'receive',
subtitle: 'From: 0xee01...febb',
subtitleContainsOrigin: false,
date: 'May 24',
primaryCurrency: '1 ETH',
senderAddress: '0xee014609ef9e09776ac5fe00bdbfef57bcdefebb',

19
ui/app/hooks/useTransactionDisplayData.js
View File

@ -7,7 +7,7 @@ import { useTokenFiatAmount } from './useTokenFiatAmount'
import { PRIMARY, SECONDARY } from '../helpers/constants/common'
import { getTokenToAddress } from '../helpers/utils/token-util'
import { useUserPreferencedCurrency } from './useUserPreferencedCurrency'
import { formatDateWithYearContext, shortenAddress } from '../helpers/utils/util'
import { formatDateWithYearContext, shortenAddress, stripHttpSchemes } from '../helpers/utils/util'
import {
CONTRACT_INTERACTION_KEY,
DEPLOY_CONTRACT_ACTION_KEY,
@ -33,6 +33,7 @@ import { getTokens } from '../ducks/metamask/metamask'
* @typedef {Object} TransactionDisplayData
* @property {string} title - primary description of the transaction
* @property {string} subtitle - supporting text describing the transaction
* @property {bool} subtitleContainsOrigin - true if the subtitle includes the origin of the tx
* @property {string} category - the transaction category
* @property {string} primaryCurrency - the currency string to display in the primary position
* @property {string} [secondaryCurrency] - the currency string to display in the secondary position
@ -70,6 +71,7 @@ export function useTransactionDisplayData (transactionGroup) {
let prefix = '-'
const date = formatDateWithYearContext(initialTransaction.time || 0)
let subtitle
let subtitleContainsOrigin = false
let recipientAddress = to
// This value is used to determine whether we should look inside txParams.data
@ -87,27 +89,31 @@ export function useTransactionDisplayData (transactionGroup) {
const tokenDisplayValue = useTokenDisplayValue(initialTransaction?.txParams?.data, token, isTokenCategory)
const tokenFiatAmount = useTokenFiatAmount(token?.address, tokenDisplayValue, token?.symbol)
const origin = stripHttpSchemes(initialTransaction.origin || initialTransaction.msgParams?.origin || '')
let category
let title
// There are four types of transaction entries that are currently differentiated in the design
// 1. (PENDING DESIGN) signature request
// 1. signature request
// 2. Send (sendEth sendTokens)
// 3. Deposit
// 4. Site interaction
// 5. Approval
if (transactionCategory == null) {
const origin = initialTransaction.msgParams?.origin || initialTransaction.origin
category = TRANSACTION_CATEGORY_SIGNATURE_REQUEST
title = t('signatureRequest')
subtitle = origin || ''
subtitle = origin
subtitleContainsOrigin = true
} else if (transactionCategory === TOKEN_METHOD_APPROVE) {
category = TRANSACTION_CATEGORY_APPROVAL
title = t('approve')
subtitle = initialTransaction.origin
subtitle = origin
subtitleContainsOrigin = true
} else if (transactionCategory === DEPLOY_CONTRACT_ACTION_KEY || transactionCategory === CONTRACT_INTERACTION_KEY) {
category = TRANSACTION_CATEGORY_INTERACTION
title = (methodData?.name && camelCaseToCapitalize(methodData.name)) || (actionKey && t(actionKey)) || ''
subtitle = initialTransaction.origin
subtitle = origin
subtitleContainsOrigin = true
} else if (transactionCategory === INCOMING_TRANSACTION) {
category = TRANSACTION_CATEGORY_RECEIVE
title = t('receive')
@ -146,6 +152,7 @@ export function useTransactionDisplayData (transactionGroup) {
category,
date,
subtitle,
subtitleContainsOrigin,
primaryCurrency,
senderAddress,
recipientAddress,