Skip to content

Commit

Permalink
implement new transaction list design
Browse files Browse the repository at this point in the history
  • Loading branch information
@brad-decker
brad-decker committed May 11, 2020
1 parent 5ed3ab5 commit 982911d
Show file tree
Hide file tree
Showing 28 changed files with 832 additions and 939 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 @@ -194,6 +194,9 @@
"approved": {
"message": "Approved"
},
"approveSpendLimit": {
"message": "Approve spend limit"
},
"asset": {
"message": "Asset"
},
Expand Down Expand Up @@ -1264,9 +1267,15 @@
"sentEther": {
"message": "sent ether"
},
"sendEther": {
"message": "Send Ether"
},
"sentTokens": {
"message": "sent tokens"
},
"sendSpecifiedTokens": {
"message": "Send $1"
},
"separateEachWord": {
"message": "Separate each word with a single space"
},
Expand Down
34 changes: 17 additions & 17 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,12 +462,12 @@ 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 txGasPrices = await driver.findElements(By.css('.transaction-breakdown__value'))
const txGasPriceLabels = await driver.findElements(By.css('.transaction-breakdown-row__title'))
Expand Down Expand Up @@ -676,7 +676,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 +718,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 +743,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,7 +904,7 @@ 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)

Expand All @@ -930,7 +930,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,7 +986,7 @@ 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)
Expand Down Expand Up @@ -1023,7 +1023,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,7 +1109,7 @@ 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'))
await driver.wait(until.elementTextMatches(txStatuses[0], /Approve/))
Expand All @@ -1136,7 +1136,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,7 +1154,7 @@ 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/))
Expand Down Expand Up @@ -1182,7 +1182,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,7 +1209,7 @@ 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'))
await driver.wait(until.elementTextMatches(txStatuses[0], /Approve/))
Expand Down
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 982911d

Please sign in to comment.