Skip to content

Commit

Permalink
implement new transaction history design
Browse files Browse the repository at this point in the history
  • Loading branch information
@brad-decker
brad-decker committed May 13, 2020
1 parent 7327212 commit 444aed1
Show file tree
Hide file tree
Showing 38 changed files with 1,802 additions and 821 deletions.
9 changes: 9 additions & 0 deletions app/_locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,9 @@
"approved": {
"message": "Approved"
},
"approveSpendLimit": {
"message": "Approve spend limit"
},
"asset": {
"message": "Asset"
},
Expand Down Expand Up @@ -1092,6 +1095,9 @@
"queue": {
"message": "Queue"
},
"queued": {
"message": "Queued"
},
"readdToken": {
"message": "You can add this token back in the future by going to “Add token” in your accounts options menu."
},
Expand Down Expand Up @@ -1276,6 +1282,9 @@
"sentTokens": {
"message": "sent tokens"
},
"sendSpecifiedTokens": {
"message": "Send $1"
},
"separateEachWord": {
"message": "Separate each word with a single space"
},
Expand Down
499 changes: 499 additions & 0 deletions test/data/transaction-data.json
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions test/e2e/address-book.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ describe('MetaMask', function () {
return confirmedTxes.length === 1
}, 10000)

const txValues = await driver.findElement(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElement(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
})
})
Expand Down Expand Up @@ -237,7 +237,7 @@ describe('MetaMask', function () {
return confirmedTxes.length === 2
}, 10000)

const txValues = await driver.findElement(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElement(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues, /-2\s*ETH/), 10000)
})
})
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/from-import-ui.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ describe('Using MetaMask with an existing account', function () {
return confirmedTxes.length === 1
}, 10000)

const txValues = await driver.findElements(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElements(By.css('.transaction-list-item__primaryCurrency'))
assert.equal(txValues.length, 1)
assert.ok(/-1\s*ETH/.test(await txValues[0].getText()))
})
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/metamask-responsive-ui.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ describe('MetaMask', function () {
return confirmedTxes.length === 1
}, 10000)

const txValues = await driver.findElement(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElement(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
})
})
Expand Down
57 changes: 29 additions & 28 deletions test/e2e/metamask-ui.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ describe('MetaMask', function () {
return confirmedTxes.length === 1
}, 10000)

const txValues = await driver.findElement(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElement(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
})
})
Expand Down Expand Up @@ -309,7 +309,7 @@ describe('MetaMask', function () {
return confirmedTxes.length === 2
}, 10000)

const txValues = await driver.findElement(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElement(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
})
})
Expand Down Expand Up @@ -357,7 +357,7 @@ describe('MetaMask', function () {
return confirmedTxes.length === 3
}, 10000)

const txValues = await driver.findElement(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElement(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues, /-1\s*ETH/), 10000)
})
})
Expand Down Expand Up @@ -462,18 +462,19 @@ describe('MetaMask', function () {
return confirmedTxes.length === 4
}, 10000)

const txValue = await driver.findClickableElement(By.css('.transaction-list-item__amount--primary'))
const txValue = await driver.findClickableElement(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValue, /-3\s*ETH/), 10000)
})

it('the transaction has the expected gas price', async function () {
const txValue = await driver.findClickableElement(By.css('.transaction-list-item__amount--primary'))
const txValue = await driver.findClickableElement(By.css('.transaction-list-item__primaryCurrency'))
await txValue.click()
const popoverCloseButton = await driver.findClickableElement(By.css('.popover-header__button'))
const txGasPrices = await driver.findElements(By.css('.transaction-breakdown__value'))
const txGasPriceLabels = await driver.findElements(By.css('.transaction-breakdown-row__title'))
await driver.wait(until.elementTextMatches(txGasPrices[3], /^10$/), 10000)
assert(txGasPriceLabels[2])
await txValue.click()
await popoverCloseButton.click()
})
})

Expand Down Expand Up @@ -624,7 +625,7 @@ describe('MetaMask', function () {
await driver.switchToWindow(extension)
await driver.delay(regularDelayMs)

await driver.clickElement(By.xpath(`//div[contains(text(), 'Contract Deployment')]`))
await driver.clickElement(By.xpath(`//h2[contains(text(), 'Contract Deployment')]`))
await driver.delay(largeDelayMs)
})

Expand Down Expand Up @@ -654,7 +655,7 @@ describe('MetaMask', function () {
return confirmedTxes.length === 6
}, 10000)

const txAction = await driver.findElements(By.css('.transaction-list-item__action'))
const txAction = await driver.findElements(By.css('.list-item__heading'))
await driver.wait(until.elementTextMatches(txAction[0], /Contract\sDeployment/), 10000)
await driver.delay(regularDelayMs)
})
Expand All @@ -676,7 +677,7 @@ describe('MetaMask', function () {
await driver.delay(largeDelayMs * 2)

await driver.findElements(By.css('.transaction-list-item'))
const txListValue = await driver.findClickableElement(By.css('.transaction-list-item__amount--primary'))
const txListValue = await driver.findClickableElement(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txListValue, /-4\s*ETH/), 10000)
await txListValue.click()
await driver.delay(regularDelayMs)
Expand Down Expand Up @@ -718,7 +719,7 @@ describe('MetaMask', function () {
return confirmedTxes.length === 7
}, 10000)

const txValues = await driver.findElements(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElements(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues[0], /-4\s*ETH/), 10000)
})

Expand All @@ -743,7 +744,7 @@ describe('MetaMask', function () {
return confirmedTxes.length === 8
}, 10000)

const txValues = await driver.findElement(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElement(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues, /-0\s*ETH/), 10000)

await driver.closeAllWindowHandlesExcept([extension, dapp])
Expand Down Expand Up @@ -904,12 +905,12 @@ describe('MetaMask', function () {
return confirmedTxes.length === 1
}, 10000)

const txValues = await driver.findElements(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElements(By.css('.transaction-list-item__primaryCurrency'))
assert.equal(txValues.length, 1)
await driver.wait(until.elementTextMatches(txValues[0], /-1\s*TST/), 10000)

const txStatuses = await driver.findElements(By.css('.transaction-list-item__action'))
await driver.wait(until.elementTextMatches(txStatuses[0], /Sent\sToken/i), 10000)
const txStatuses = await driver.findElements(By.css('.list-item__heading'))
await driver.wait(until.elementTextMatches(txStatuses[0], /Send\sTST/i), 10000)
})
})

Expand All @@ -930,7 +931,7 @@ describe('MetaMask', function () {
await driver.delay(largeDelayMs)

await driver.findElements(By.css('.transaction-list__pending-transactions'))
const txListValue = await driver.findClickableElement(By.css('.transaction-list-item__amount--primary'))
const txListValue = await driver.findClickableElement(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txListValue, /-1.5\s*TST/), 10000)
await txListValue.click()
await driver.delay(regularDelayMs)
Expand Down Expand Up @@ -986,10 +987,10 @@ describe('MetaMask', function () {
return confirmedTxes.length === 2
}, 10000)

const txValues = await driver.findElements(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElements(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues[0], /-1.5\s*TST/))
const txStatuses = await driver.findElements(By.css('.transaction-list-item__action'))
await driver.wait(until.elementTextMatches(txStatuses[0], /Sent\sToken/), 10000)
const txStatuses = await driver.findElements(By.css('.list-item__heading'))
await driver.wait(until.elementTextMatches(txStatuses[0], /Send\sTST/), 10000)

await driver.clickElement(By.css('[data-testid="wallet-balance"]'))

Expand Down Expand Up @@ -1023,7 +1024,7 @@ describe('MetaMask', function () {
return pendingTxes.length === 1
}, 10000)

const [txListValue] = await driver.findElements(By.css('.transaction-list-item__amount--primary'))
const [txListValue] = await driver.findElements(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txListValue, /-7\s*TST/))
await driver.clickElement(By.css('.transaction-list-item'))
await driver.delay(regularDelayMs)
Expand Down Expand Up @@ -1109,9 +1110,9 @@ describe('MetaMask', function () {
return confirmedTxes.length === 3
}, 10000)

const txValues = await driver.findElements(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElements(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues[0], /-5\s*TST/))
const txStatuses = await driver.findElements(By.css('.transaction-list-item__action'))
const txStatuses = await driver.findElements(By.css('.list-item__heading'))
await driver.wait(until.elementTextMatches(txStatuses[0], /Approve/))
})
})
Expand All @@ -1136,7 +1137,7 @@ describe('MetaMask', function () {
return pendingTxes.length === 1
}, 10000)

const [txListValue] = await driver.findElements(By.css('.transaction-list-item__amount--primary'))
const [txListValue] = await driver.findElements(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txListValue, /-1.5\s*TST/))
await driver.clickElement(By.css('.transaction-list-item'))
await driver.delay(regularDelayMs)
Expand All @@ -1154,10 +1155,10 @@ describe('MetaMask', function () {
return confirmedTxes.length === 4
}, 10000)

const txValues = await driver.findElements(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElements(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues[0], /-1.5\s*TST/))
const txStatuses = await driver.findElements(By.css('.transaction-list-item__action'))
await driver.wait(until.elementTextMatches(txStatuses[0], /Sent Tokens/))
const txStatuses = await driver.findElements(By.css('.list-item__heading'))
await driver.wait(until.elementTextMatches(txStatuses[0], /Send TST/))
})
})

Expand All @@ -1182,7 +1183,7 @@ describe('MetaMask', function () {
return pendingTxes.length === 1
}, 10000)

const [txListValue] = await driver.findElements(By.css('.transaction-list-item__amount--primary'))
const [txListValue] = await driver.findElements(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txListValue, /-7\s*TST/))
await driver.clickElement(By.css('.transaction-list-item'))
await driver.delay(regularDelayMs)
Expand All @@ -1209,9 +1210,9 @@ describe('MetaMask', function () {
return confirmedTxes.length === 5
}, 10000)

const txValues = await driver.findElements(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElements(By.css('.transaction-list-item__primaryCurrency'))
await driver.wait(until.elementTextMatches(txValues[0], /-7\s*TST/))
const txStatuses = await driver.findElements(By.css('.transaction-list-item__action'))
const txStatuses = await driver.findElements(By.css('.list-item__heading'))
await driver.wait(until.elementTextMatches(txStatuses[0], /Approve/))
})
})
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/send-edit.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ describe('Using MetaMask with an existing account', function () {
return confirmedTxes.length === 1
}, 10000)

const txValues = await driver.findElements(By.css('.transaction-list-item__amount--primary'))
const txValues = await driver.findElements(By.css('.transaction-list-item__primaryCurrency'))
assert.equal(txValues.length, 1)
assert.ok(/-2.2\s*ETH/.test(await txValues[0].getText()))
})
Expand Down
16 changes: 8 additions & 8 deletions test/integration/lib/tx-list-items.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,18 +46,18 @@ async function runTxListItemsTest (assert) {
assert.equal(txListItems.length, 6, 'all tx list items are rendered')

const unapprovedMsg = txListItems[0]
const unapprovedMsgDescription = await findAsync($(unapprovedMsg), '.transaction-list-item__action')
assert.equal(unapprovedMsgDescription[0].textContent, 'Signature Request', 'unapprovedMsg has correct description')
const unapprovedMsgDescription = await findAsync($(unapprovedMsg), '.transaction-list-item__status--unapproved')
assert.equal(unapprovedMsgDescription[0].textContent, 'Unapproved', 'unapprovedMsg has correct description')

const approvedTx = txListItems[2]
const approvedTxRenderedStatus = await findAsync($(approvedTx), '.transaction-list-item__status')
assert.equal(approvedTxRenderedStatus[0].textContent, 'pending', 'approvedTx has correct label')
const approvedTxRenderedStatus = await findAsync($(approvedTx), '.transaction-list-item__status--queued')
assert.equal(approvedTxRenderedStatus[0].textContent, 'Queued', 'approvedTx has correct label')

const confirmedTokenTx1 = txListItems[4]
const confirmedTokenTx1Address = await findAsync($(confirmedTokenTx1), '.transaction-list-item__status')
assert.equal(confirmedTokenTx1Address[0].textContent, 'Confirmed', 'confirmedTokenTx has correct status')
const confirmedTokenTx1Address = await findAsync($(confirmedTokenTx1), '.list-item__subheading')
assert.equal(confirmedTokenTx1Address[0].textContent, 'Mar 29, 2018 · To: 0x66f3...e1ec', 'confirmedTokenTx has correct status')

const confirmedTokenTx2 = txListItems[5]
const confirmedTokenTx2Address = await findAsync($(confirmedTokenTx2), '.transaction-list-item__status')
assert.equal(confirmedTokenTx2Address[0].textContent, 'Confirmed', 'confirmedTokenTx has correct status')
const confirmedTokenTx2Address = await findAsync($(confirmedTokenTx2), '.list-item__subheading')
assert.equal(confirmedTokenTx2Address[0].textContent, 'Mar 29, 2018 · To: 0x66f3...e1eb', 'confirmedTokenTx has correct status')
}
15 changes: 3 additions & 12 deletions ui/app/components/app/transaction-list-item-details/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,29 +30,20 @@

&__cards-container {
display: flex;
flex-direction: row;

@media screen and (max-width: $break-small) {
flex-direction: column;
}
flex-direction: column;
}

&__transaction-breakdown {
flex: 1;
margin-right: 8px;
min-width: 0;
margin: 0 0 8px 0;

@media screen and (max-width: $break-small) {
margin: 0 0 8px 0;
}
}

&__transaction-activity-log {
flex: 2;
min-width: 0;

@media screen and (min-width: $break-large) {
padding-left: 12px;
}
padding-left: 12px;
}
}
31 changes: 19 additions & 12 deletions ...s/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ describe('TransactionListItemDetails Component', function () {

const wrapper = shallow(
<TransactionListItemDetails
title="Test Transaction Details"
recipientAddress="0x1"
senderAddress="0x2"
tryReverseResolveAddress={() => {}}
Expand All @@ -40,12 +41,12 @@ describe('TransactionListItemDetails Component', function () {
/>,
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }
)

assert.ok(wrapper.hasClass('transaction-list-item-details'))
assert.equal(wrapper.find(Button).length, 2)
assert.equal(wrapper.find(SenderToRecipient).length, 1)
assert.equal(wrapper.find(TransactionBreakdown).length, 1)
assert.equal(wrapper.find(TransactionActivityLog).length, 1)
const child = wrapper.childAt(0)
assert.ok(child.hasClass('transaction-list-item-details'))
assert.equal(child.find(Button).length, 2)
assert.equal(child.find(SenderToRecipient).length, 1)
assert.equal(child.find(TransactionBreakdown).length, 1)
assert.equal(child.find(TransactionActivityLog).length, 1)
})

it('should render a retry button', function () {
Expand Down Expand Up @@ -85,8 +86,10 @@ describe('TransactionListItemDetails Component', function () {
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }
)

assert.ok(wrapper.hasClass('transaction-list-item-details'))
assert.equal(wrapper.find(Button).length, 3)
const child = wrapper.childAt(0)

assert.ok(child.hasClass('transaction-list-item-details'))
assert.equal(child.find(Button).length, 3)
})

it('should disable the Copy Tx ID and View In Etherscan buttons when tx hash is missing', function () {
Expand Down Expand Up @@ -122,8 +125,10 @@ describe('TransactionListItemDetails Component', function () {
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }
)

assert.ok(wrapper.hasClass('transaction-list-item-details'))
const buttons = wrapper.find(Button)
const child = wrapper.childAt(0)

assert.ok(child.hasClass('transaction-list-item-details'))
const buttons = child.find(Button)
assert.strictEqual(buttons.at(0).prop('disabled'), true)
assert.strictEqual(buttons.at(1).prop('disabled'), true)
})
Expand Down Expand Up @@ -162,8 +167,10 @@ describe('TransactionListItemDetails Component', function () {
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }
)

assert.ok(wrapper.hasClass('transaction-list-item-details'))
const buttons = wrapper.find(Button)
const child = wrapper.childAt(0)

assert.ok(child.hasClass('transaction-list-item-details'))
const buttons = child.find(Button)
assert.strictEqual(buttons.at(0).prop('disabled'), false)
assert.strictEqual(buttons.at(1).prop('disabled'), false)
})
Expand Down
Loading

0 comments on commit 444aed1

Please sign in to comment.