From 7294aede4fc33e950f84147f1b7402675f53398d Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 20 Aug 2018 20:16:54 -0700 Subject: [PATCH] Add new variant for SenderToRecipient component --- app/_locales/cs/messages.json | 2 +- app/_locales/de/messages.json | 6 +- app/_locales/en/messages.json | 2 +- app/_locales/es/messages.json | 2 +- app/_locales/ru/messages.json | 2 +- app/_locales/tml/messages.json | 2 +- app/_locales/tr/messages.json | 2 +- test/integration/lib/send-new-ui.js | 4 +- .../send-to-row/send-to-row.component.js | 2 +- .../tests/send-to-row-component.test.js | 2 +- .../components/sender-to-recipient/index.scss | 147 ++++++++++++------ .../sender-to-recipient.component.js | 141 +++++++++++------ .../sender-to-recipient.constants.js | 3 + 13 files changed, 210 insertions(+), 107 deletions(-) create mode 100644 ui/app/components/sender-to-recipient/sender-to-recipient.constants.js diff --git a/app/_locales/cs/messages.json b/app/_locales/cs/messages.json index 6a4ebc8a5..55344f3e1 100644 --- a/app/_locales/cs/messages.json +++ b/app/_locales/cs/messages.json @@ -796,7 +796,7 @@ "message": "Testovací faucet" }, "to": { - "message": "Komu: " + "message": "Komu" }, "toETHviaShapeShift": { "message": "$1 na ETH přes ShapeShift", diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index c06a99250..352d5ad7d 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -384,7 +384,7 @@ "infoHelp": { "message": "Info & Hilfe" }, - "insufficientFunds": { + "insufficientFunds": { "message": "Nicht genügend Guthaben." }, "insufficientTokens": { @@ -572,7 +572,7 @@ "description": "Wähle diesen Dateityp um damit einen Account zu importieren" }, "privateKeyWarning": { - "message": "Warnung: Niemals jemanden deinen Private Key mitteilen. Jeder der im Besitz deines Private Keys ist, kann jegliches Guthaben deines Accounts stehlen." + "message": "Warnung: Niemals jemanden deinen Private Key mitteilen. Jeder der im Besitz deines Private Keys ist, kann jegliches Guthaben deines Accounts stehlen." }, "privateNetwork": { "message": "Privates Netzwerk" @@ -775,7 +775,7 @@ "message": "Testfaucet" }, "to": { - "message": "An:" + "message": "An" }, "toETHviaShapeShift": { "message": "$1 an ETH via ShapeShift", diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index a25a2bd59..2656432d2 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1025,7 +1025,7 @@ "message": "Test Faucet" }, "to": { - "message": "To: " + "message": "To" }, "toETHviaShapeShift": { "message": "$1 to ETH via ShapeShift", diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index ed7f8f681..3e43a7b43 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -772,7 +772,7 @@ "message": "Probar Faucet" }, "to": { - "message": "Para:" + "message": "Para" }, "toETHviaShapeShift": { "message": "$1 a ETH via ShapeShift", diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index bb722735d..6344e1beb 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -784,7 +784,7 @@ "message": "Тестовый кран" }, "to": { - "message": "Получатель: " + "message": "Получатель" }, "toETHviaShapeShift": { "message": "$1 в ETH через ShapeShift", diff --git a/app/_locales/tml/messages.json b/app/_locales/tml/messages.json index fcc418bac..4f733458e 100644 --- a/app/_locales/tml/messages.json +++ b/app/_locales/tml/messages.json @@ -796,7 +796,7 @@ "message": "சோதனை குழாய்" }, "to": { - "message": "பெறுநர்: " + "message": "பெறுநர்" }, "toETHviaShapeShift": { "message": "$ 1 முதல் ETH வரை வடிவம்", diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 08ba6cde8..8be695108 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -796,7 +796,7 @@ "message": "Test Musluğu" }, "to": { - "message": "Kime: " + "message": "Kime" }, "toETHviaShapeShift": { "message": "ShapeShift üstünden $1'dan ETH'e", diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js index 406863ca6..cef1a32d7 100644 --- a/test/integration/lib/send-new-ui.js +++ b/test/integration/lib/send-new-ui.js @@ -124,10 +124,10 @@ async function runSendFlowTest (assert, done) { selectState.val('send edit') reactTriggerChange(selectState[0]) - const confirmFromName = (await queryAsync($, '.sender-to-recipient__sender-name')).first() + const confirmFromName = (await queryAsync($, '.sender-to-recipient__name')).first() assert.equal(confirmFromName[0].textContent, 'Send Account 4', 'confirm screen should show correct from name') - const confirmToName = (await queryAsync($, '.sender-to-recipient__recipient-name')).last() + const confirmToName = (await queryAsync($, '.sender-to-recipient__name')).last() assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name') const confirmScreenRowFiats = await queryAsync($, '.confirm-detail-row__fiat') diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js index 1163dcffc..434db81e5 100644 --- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js +++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js @@ -48,7 +48,7 @@ export default class SendToRow extends Component { return ( + + + ) + } + + renderSenderAddress () { + const { t } = this.context + const { senderName, senderAddress, addressOnly } = this.props + + return ( + this.setState({ senderAddressCopied: false })} + > +
+ { addressOnly ? `${t('from')}: ${senderAddress}` : senderName } +
+ + ) + } + + renderRecipientIdenticon () { + const { recipientAddress } = this.props + + return !this.props.addressOnly && ( +
+ +
+ ) + } + renderRecipientWithAddress () { const { t } = this.context - const { recipientName, recipientAddress } = this.props + const { recipientName, recipientAddress, addressOnly } = this.props return (
{ this.setState({ recipientAddressCopied: true }) copyToClipboard(recipientAddress) }} > -
- -
+ { this.renderRecipientIdenticon() } this.setState({ recipientAddressCopied: false })} > -
- { recipientName || this.context.t('newContract') } +
+ { + addressOnly + ? `${t('to')}: ${recipientAddress}` + : (recipientName || this.context.t('newContract')) + }
@@ -57,46 +112,25 @@ export default class SenderToRecipient extends Component { renderRecipientWithoutAddress () { return ( -
+
-
+
{ this.context.t('newContract') }
) } - render () { - const { t } = this.context - const { senderName, senderAddress, recipientAddress } = this.props - - return ( -
-
{ - this.setState({ senderAddressCopied: true }) - copyToClipboard(senderAddress) - }} - > -
- -
- this.setState({ senderAddressCopied: false })} - > -
- { senderName } -
- + renderArrow () { + return this.props.variant === CARDS_VARIANT + ? ( +
+
+ ) : (
+ ) + } + + render () { + const { senderAddress, recipientAddress, variant } = this.props + + return ( +
+
{ + this.setState({ senderAddressCopied: true }) + copyToClipboard(senderAddress) + }} + > + { this.renderSenderIdenticon() } + { this.renderSenderAddress() } +
+ { this.renderArrow() } { recipientAddress ? this.renderRecipientWithAddress() diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js b/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js new file mode 100644 index 000000000..166228932 --- /dev/null +++ b/ui/app/components/sender-to-recipient/sender-to-recipient.constants.js @@ -0,0 +1,3 @@ +// Component design variants +export const DEFAULT_VARIANT = 'DEFAULT_VARIANT' +export const CARDS_VARIANT = 'CARDS_VARIANT'