mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 09:23:21 +01:00
Fix styling on confirm-send-ether and confirm-send-token (#3600)
This commit is contained in:
Alexander Tseung
GitHub
parent
3bc8493166
commit
4512243290
@ -167,7 +167,7 @@ async function runSendFlowTest(assert, done) {
|
|||||||
// TODO: Need a way to mock background so that we can test correct transition from editing to confirm
|
// TODO: Need a way to mock background so that we can test correct transition from editing to confirm
|
||||||
selectState.val('confirm new ui')
|
selectState.val('confirm new ui')
|
||||||
reactTriggerChange(selectState[0])
|
reactTriggerChange(selectState[0])
|
||||||
const confirmScreenConfirmButton = await queryAsync($, '.confirm-screen-confirm-button')
|
const confirmScreenConfirmButton = await queryAsync($, '.btn-confirm.page-container__footer-button')
|
||||||
console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]);
|
console.log(`+++++++++++++++++++++++++++++++= confirmScreenConfirmButton[0]`, confirmScreenConfirmButton[0]);
|
||||||
confirmScreenConfirmButton[0].click()
|
confirmScreenConfirmButton[0].click()
|
||||||
|
|
||||||
|
|||||||
@ -293,7 +293,7 @@ class ConfirmDeployContract extends Component {
|
|||||||
]),
|
]),
|
||||||
|
|
||||||
h('form#pending-tx-form', {
|
h('form#pending-tx-form', {
|
||||||
onClick: event => this.onSubmit(event),
|
onSubmit: event => this.onSubmit(event),
|
||||||
}, [
|
}, [
|
||||||
h('.page-container__footer', [
|
h('.page-container__footer', [
|
||||||
// Cancel Button
|
// Cancel Button
|
||||||
|
|||||||
@ -224,181 +224,185 @@ ConfirmSendEther.prototype.render = function () {
|
|||||||
h('div.page-container__title', 'Confirm'),
|
h('div.page-container__title', 'Confirm'),
|
||||||
h('div.page-container__subtitle', `Please review your transaction.`),
|
h('div.page-container__subtitle', `Please review your transaction.`),
|
||||||
]),
|
]),
|
||||||
h('div.flex-row.flex-center.confirm-screen-identicons', [
|
h('.page-container__content', [
|
||||||
h('div.confirm-screen-account-wrapper', [
|
h('div.flex-row.flex-center.confirm-screen-identicons', [
|
||||||
h(
|
h('div.confirm-screen-account-wrapper', [
|
||||||
Identicon,
|
h(
|
||||||
{
|
Identicon,
|
||||||
address: fromAddress,
|
{
|
||||||
diameter: 60,
|
address: fromAddress,
|
||||||
|
diameter: 60,
|
||||||
|
},
|
||||||
|
),
|
||||||
|
h('span.confirm-screen-account-name', fromName),
|
||||||
|
// h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
|
||||||
|
]),
|
||||||
|
h('i.fa.fa-arrow-right.fa-lg'),
|
||||||
|
h('div.confirm-screen-account-wrapper', [
|
||||||
|
h(
|
||||||
|
Identicon,
|
||||||
|
{
|
||||||
|
address: txParams.to,
|
||||||
|
diameter: 60,
|
||||||
|
},
|
||||||
|
),
|
||||||
|
h('span.confirm-screen-account-name', toName),
|
||||||
|
// h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
|
||||||
|
// h('h3.flex-center.confirm-screen-sending-to-message', {
|
||||||
|
// style: {
|
||||||
|
// textAlign: 'center',
|
||||||
|
// fontSize: '16px',
|
||||||
|
// },
|
||||||
|
// }, [
|
||||||
|
// `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
|
||||||
|
// ]),
|
||||||
|
|
||||||
|
h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
|
||||||
|
h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
|
||||||
|
h('div.flex-center.confirm-memo-wrapper', [
|
||||||
|
h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
|
||||||
|
]),
|
||||||
|
|
||||||
|
h('div.confirm-screen-rows', [
|
||||||
|
h('section.flex-row.flex-center.confirm-screen-row', [
|
||||||
|
h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
|
||||||
|
h('div.confirm-screen-section-column', [
|
||||||
|
h('div.confirm-screen-row-info', fromName),
|
||||||
|
h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
|
||||||
|
h('section.flex-row.flex-center.confirm-screen-row', [
|
||||||
|
h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
|
||||||
|
h('div.confirm-screen-section-column', [
|
||||||
|
h('div.confirm-screen-row-info', toName),
|
||||||
|
h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
|
||||||
|
h('section.flex-row.flex-center.confirm-screen-row', [
|
||||||
|
h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
|
||||||
|
h('div.confirm-screen-section-column', [
|
||||||
|
h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
|
||||||
|
|
||||||
|
h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
|
||||||
|
|
||||||
|
h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
|
||||||
|
h('div.confirm-screen-section-column', [
|
||||||
|
h('span.confirm-screen-label', [ t('total') + ' ' ]),
|
||||||
|
h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
|
||||||
|
]),
|
||||||
|
|
||||||
|
h('div.confirm-screen-section-column', [
|
||||||
|
h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
|
||||||
|
h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
|
||||||
|
// These are latest errors handling from master
|
||||||
|
// Leaving as comments as reference when we start implementing error handling
|
||||||
|
// h('style', `
|
||||||
|
// .conf-buttons button {
|
||||||
|
// margin-left: 10px;
|
||||||
|
// text-transform: uppercase;
|
||||||
|
// }
|
||||||
|
// `),
|
||||||
|
|
||||||
|
// txMeta.simulationFails ?
|
||||||
|
// h('.error', {
|
||||||
|
// style: {
|
||||||
|
// marginLeft: 50,
|
||||||
|
// fontSize: '0.9em',
|
||||||
|
// },
|
||||||
|
// }, 'Transaction Error. Exception thrown in contract code.')
|
||||||
|
// : null,
|
||||||
|
|
||||||
|
// !isValidAddress ?
|
||||||
|
// h('.error', {
|
||||||
|
// style: {
|
||||||
|
// marginLeft: 50,
|
||||||
|
// fontSize: '0.9em',
|
||||||
|
// },
|
||||||
|
// }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
|
||||||
|
// : null,
|
||||||
|
|
||||||
|
// insufficientBalance ?
|
||||||
|
// h('span.error', {
|
||||||
|
// style: {
|
||||||
|
// marginLeft: 50,
|
||||||
|
// fontSize: '0.9em',
|
||||||
|
// },
|
||||||
|
// }, 'Insufficient balance for transaction')
|
||||||
|
// : null,
|
||||||
|
|
||||||
|
// // send + cancel
|
||||||
|
// h('.flex-row.flex-space-around.conf-buttons', {
|
||||||
|
// style: {
|
||||||
|
// display: 'flex',
|
||||||
|
// justifyContent: 'flex-end',
|
||||||
|
// margin: '14px 25px',
|
||||||
|
// },
|
||||||
|
// }, [
|
||||||
|
// h('button', {
|
||||||
|
// onClick: (event) => {
|
||||||
|
// this.resetGasFields()
|
||||||
|
// event.preventDefault()
|
||||||
|
// },
|
||||||
|
// }, 'Reset'),
|
||||||
|
|
||||||
|
// // Accept Button or Buy Button
|
||||||
|
// insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
|
||||||
|
// h('input.confirm.btn-green', {
|
||||||
|
// type: 'submit',
|
||||||
|
// value: 'SUBMIT',
|
||||||
|
// style: { marginLeft: '10px' },
|
||||||
|
// disabled: buyDisabled,
|
||||||
|
// }),
|
||||||
|
|
||||||
|
// h('button.cancel.btn-red', {
|
||||||
|
// onClick: props.cancelTransaction,
|
||||||
|
// }, 'Reject'),
|
||||||
|
// ]),
|
||||||
|
// showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
|
||||||
|
// style: {
|
||||||
|
// display: 'flex',
|
||||||
|
// justifyContent: 'flex-end',
|
||||||
|
// margin: '14px 25px',
|
||||||
|
// },
|
||||||
|
// }, [
|
||||||
|
// h('button.cancel.btn-red', {
|
||||||
|
// onClick: props.cancelAllTransactions,
|
||||||
|
// }, 'Reject All'),
|
||||||
|
// ]) : null,
|
||||||
|
// ]),
|
||||||
|
// ])
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
]),
|
||||||
|
|
||||||
|
h('form#pending-tx-form', {
|
||||||
|
onSubmit: this.onSubmit,
|
||||||
|
}, [
|
||||||
|
h('.page-container__footer', [
|
||||||
|
// Cancel Button
|
||||||
|
h('button.btn-cancel.page-container__footer-button.allcaps', {
|
||||||
|
onClick: (event) => {
|
||||||
|
clearSend()
|
||||||
|
this.cancel(event, txMeta)
|
||||||
},
|
},
|
||||||
),
|
}, t('cancel')),
|
||||||
h('span.confirm-screen-account-name', fromName),
|
|
||||||
// h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
|
// Accept Button
|
||||||
]),
|
h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
|
||||||
h('i.fa.fa-arrow-right.fa-lg'),
|
|
||||||
h('div.confirm-screen-account-wrapper', [
|
|
||||||
h(
|
|
||||||
Identicon,
|
|
||||||
{
|
|
||||||
address: txParams.to,
|
|
||||||
diameter: 60,
|
|
||||||
},
|
|
||||||
),
|
|
||||||
h('span.confirm-screen-account-name', toName),
|
|
||||||
// h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
|
|
||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
// h('h3.flex-center.confirm-screen-sending-to-message', {
|
|
||||||
// style: {
|
|
||||||
// textAlign: 'center',
|
|
||||||
// fontSize: '16px',
|
|
||||||
// },
|
|
||||||
// }, [
|
|
||||||
// `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
|
|
||||||
// ]),
|
|
||||||
|
|
||||||
h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
|
|
||||||
h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
|
|
||||||
h('div.flex-center.confirm-memo-wrapper', [
|
|
||||||
h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('div.confirm-screen-rows', [
|
|
||||||
h('section.flex-row.flex-center.confirm-screen-row', [
|
|
||||||
h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
|
|
||||||
h('div.confirm-screen-section-column', [
|
|
||||||
h('div.confirm-screen-row-info', fromName),
|
|
||||||
h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
|
|
||||||
]),
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('section.flex-row.flex-center.confirm-screen-row', [
|
|
||||||
h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
|
|
||||||
h('div.confirm-screen-section-column', [
|
|
||||||
h('div.confirm-screen-row-info', toName),
|
|
||||||
h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
|
|
||||||
]),
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('section.flex-row.flex-center.confirm-screen-row', [
|
|
||||||
h('span.confirm-screen-label.confirm-screen-section-column', [ t('gasFee') ]),
|
|
||||||
h('div.confirm-screen-section-column', [
|
|
||||||
h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
|
|
||||||
|
|
||||||
h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
|
|
||||||
]),
|
|
||||||
]),
|
|
||||||
|
|
||||||
|
|
||||||
h('section.flex-row.flex-center.confirm-screen-total-box ', [
|
|
||||||
h('div.confirm-screen-section-column', [
|
|
||||||
h('span.confirm-screen-label', [ t('total') + ' ' ]),
|
|
||||||
h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('div.confirm-screen-section-column', [
|
|
||||||
h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
|
|
||||||
h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
|
|
||||||
]),
|
|
||||||
]),
|
|
||||||
]),
|
|
||||||
|
|
||||||
// These are latest errors handling from master
|
|
||||||
// Leaving as comments as reference when we start implementing error handling
|
|
||||||
// h('style', `
|
|
||||||
// .conf-buttons button {
|
|
||||||
// margin-left: 10px;
|
|
||||||
// text-transform: uppercase;
|
|
||||||
// }
|
|
||||||
// `),
|
|
||||||
|
|
||||||
// txMeta.simulationFails ?
|
|
||||||
// h('.error', {
|
|
||||||
// style: {
|
|
||||||
// marginLeft: 50,
|
|
||||||
// fontSize: '0.9em',
|
|
||||||
// },
|
|
||||||
// }, 'Transaction Error. Exception thrown in contract code.')
|
|
||||||
// : null,
|
|
||||||
|
|
||||||
// !isValidAddress ?
|
|
||||||
// h('.error', {
|
|
||||||
// style: {
|
|
||||||
// marginLeft: 50,
|
|
||||||
// fontSize: '0.9em',
|
|
||||||
// },
|
|
||||||
// }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
|
|
||||||
// : null,
|
|
||||||
|
|
||||||
// insufficientBalance ?
|
|
||||||
// h('span.error', {
|
|
||||||
// style: {
|
|
||||||
// marginLeft: 50,
|
|
||||||
// fontSize: '0.9em',
|
|
||||||
// },
|
|
||||||
// }, 'Insufficient balance for transaction')
|
|
||||||
// : null,
|
|
||||||
|
|
||||||
// // send + cancel
|
|
||||||
// h('.flex-row.flex-space-around.conf-buttons', {
|
|
||||||
// style: {
|
|
||||||
// display: 'flex',
|
|
||||||
// justifyContent: 'flex-end',
|
|
||||||
// margin: '14px 25px',
|
|
||||||
// },
|
|
||||||
// }, [
|
|
||||||
// h('button', {
|
|
||||||
// onClick: (event) => {
|
|
||||||
// this.resetGasFields()
|
|
||||||
// event.preventDefault()
|
|
||||||
// },
|
|
||||||
// }, 'Reset'),
|
|
||||||
|
|
||||||
// // Accept Button or Buy Button
|
|
||||||
// insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
|
|
||||||
// h('input.confirm.btn-green', {
|
|
||||||
// type: 'submit',
|
|
||||||
// value: 'SUBMIT',
|
|
||||||
// style: { marginLeft: '10px' },
|
|
||||||
// disabled: buyDisabled,
|
|
||||||
// }),
|
|
||||||
|
|
||||||
// h('button.cancel.btn-red', {
|
|
||||||
// onClick: props.cancelTransaction,
|
|
||||||
// }, 'Reject'),
|
|
||||||
// ]),
|
|
||||||
// showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
|
|
||||||
// style: {
|
|
||||||
// display: 'flex',
|
|
||||||
// justifyContent: 'flex-end',
|
|
||||||
// margin: '14px 25px',
|
|
||||||
// },
|
|
||||||
// }, [
|
|
||||||
// h('button.cancel.btn-red', {
|
|
||||||
// onClick: props.cancelAllTransactions,
|
|
||||||
// }, 'Reject All'),
|
|
||||||
// ]) : null,
|
|
||||||
// ]),
|
|
||||||
// ])
|
|
||||||
// )
|
|
||||||
// }
|
|
||||||
]),
|
|
||||||
|
|
||||||
h('form#pending-tx-form', {
|
|
||||||
onSubmit: this.onSubmit,
|
|
||||||
}, [
|
|
||||||
// Cancel Button
|
|
||||||
h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
|
|
||||||
onClick: (event) => {
|
|
||||||
clearSend()
|
|
||||||
this.cancel(event, txMeta)
|
|
||||||
},
|
|
||||||
}, t('cancel')),
|
|
||||||
|
|
||||||
// Accept Button
|
|
||||||
h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
|
|
||||||
]),
|
]),
|
||||||
])
|
])
|
||||||
)
|
)
|
||||||
|
|||||||
@ -265,7 +265,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
|
|||||||
|
|
||||||
return fiatAmount && fiatGas
|
return fiatAmount && fiatGas
|
||||||
? (
|
? (
|
||||||
h('section.flex-row.flex-center.confirm-screen-total-box ', [
|
h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
|
||||||
h('div.confirm-screen-section-column', [
|
h('div.confirm-screen-section-column', [
|
||||||
h('span.confirm-screen-label', [ t('total') + ' ' ]),
|
h('span.confirm-screen-label', [ t('total') + ' ' ]),
|
||||||
h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
|
h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
|
||||||
@ -278,7 +278,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () {
|
|||||||
])
|
])
|
||||||
)
|
)
|
||||||
: (
|
: (
|
||||||
h('section.flex-row.flex-center.confirm-screen-total-box ', [
|
h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [
|
||||||
h('div.confirm-screen-section-column', [
|
h('div.confirm-screen-section-column', [
|
||||||
h('span.confirm-screen-label', [ t('total') + ' ' ]),
|
h('span.confirm-screen-label', [ t('total') + ' ' ]),
|
||||||
h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
|
h('div.confirm-screen-total-box__subtitle', [ t('amountPlusGas') ]),
|
||||||
@ -319,80 +319,82 @@ ConfirmSendToken.prototype.render = function () {
|
|||||||
h('div.page-container__title', t('confirm')),
|
h('div.page-container__title', t('confirm')),
|
||||||
h('div.page-container__subtitle', t('pleaseReviewTransaction')),
|
h('div.page-container__subtitle', t('pleaseReviewTransaction')),
|
||||||
]),
|
]),
|
||||||
h('div.flex-row.flex-center.confirm-screen-identicons', [
|
h('.page-container__content', [
|
||||||
h('div.confirm-screen-account-wrapper', [
|
h('div.flex-row.flex-center.confirm-screen-identicons', [
|
||||||
h(
|
h('div.confirm-screen-account-wrapper', [
|
||||||
Identicon,
|
h(
|
||||||
{
|
Identicon,
|
||||||
address: fromAddress,
|
{
|
||||||
diameter: 60,
|
address: fromAddress,
|
||||||
},
|
diameter: 60,
|
||||||
),
|
},
|
||||||
h('span.confirm-screen-account-name', fromName),
|
),
|
||||||
// h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
|
h('span.confirm-screen-account-name', fromName),
|
||||||
]),
|
// h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
|
||||||
h('i.fa.fa-arrow-right.fa-lg'),
|
]),
|
||||||
h('div.confirm-screen-account-wrapper', [
|
h('i.fa.fa-arrow-right.fa-lg'),
|
||||||
h(
|
h('div.confirm-screen-account-wrapper', [
|
||||||
Identicon,
|
h(
|
||||||
{
|
Identicon,
|
||||||
address: toAddress,
|
{
|
||||||
diameter: 60,
|
address: toAddress,
|
||||||
},
|
diameter: 60,
|
||||||
),
|
},
|
||||||
h('span.confirm-screen-account-name', toName),
|
),
|
||||||
// h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
|
h('span.confirm-screen-account-name', toName),
|
||||||
]),
|
// h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
|
||||||
]),
|
|
||||||
|
|
||||||
// h('h3.flex-center.confirm-screen-sending-to-message', {
|
|
||||||
// style: {
|
|
||||||
// textAlign: 'center',
|
|
||||||
// fontSize: '16px',
|
|
||||||
// },
|
|
||||||
// }, [
|
|
||||||
// `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
|
|
||||||
// ]),
|
|
||||||
|
|
||||||
this.renderHeroAmount(),
|
|
||||||
|
|
||||||
h('div.confirm-screen-rows', [
|
|
||||||
h('section.flex-row.flex-center.confirm-screen-row', [
|
|
||||||
h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
|
|
||||||
h('div.confirm-screen-section-column', [
|
|
||||||
h('div.confirm-screen-row-info', fromName),
|
|
||||||
h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
|
|
||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
|
// h('h3.flex-center.confirm-screen-sending-to-message', {
|
||||||
h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
|
// style: {
|
||||||
h('div.confirm-screen-section-column', [
|
// textAlign: 'center',
|
||||||
h('div.confirm-screen-row-info', toName),
|
// fontSize: '16px',
|
||||||
h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
|
// },
|
||||||
|
// }, [
|
||||||
|
// `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
|
||||||
|
// ]),
|
||||||
|
|
||||||
|
this.renderHeroAmount(),
|
||||||
|
|
||||||
|
h('div.confirm-screen-rows', [
|
||||||
|
h('section.flex-row.flex-center.confirm-screen-row', [
|
||||||
|
h('span.confirm-screen-label.confirm-screen-section-column', [ t('from') ]),
|
||||||
|
h('div.confirm-screen-section-column', [
|
||||||
|
h('div.confirm-screen-row-info', fromName),
|
||||||
|
h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
|
||||||
|
]),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
|
toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
|
||||||
|
h('span.confirm-screen-label.confirm-screen-section-column', [ t('to') ]),
|
||||||
|
h('div.confirm-screen-section-column', [
|
||||||
|
h('div.confirm-screen-row-info', toName),
|
||||||
|
h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
|
||||||
|
this.renderGasFee(),
|
||||||
|
|
||||||
|
this.renderTotalPlusGas(),
|
||||||
|
|
||||||
]),
|
]),
|
||||||
|
|
||||||
this.renderGasFee(),
|
]),
|
||||||
|
h('form#pending-tx-form', {
|
||||||
this.renderTotalPlusGas(),
|
onSubmit: this.onSubmit,
|
||||||
|
}, [
|
||||||
|
h('.page-container__footer', [
|
||||||
|
// Cancel Button
|
||||||
|
h('button.btn-cancel.page-container__footer-button.allcaps', {
|
||||||
|
onClick: (event) => this.cancel(event, txMeta),
|
||||||
|
}, t('cancel')),
|
||||||
|
|
||||||
|
// Accept Button
|
||||||
|
h('button.btn-confirm.page-container__footer-button.allcaps', [t('confirm')]),
|
||||||
|
]),
|
||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
h('form#pending-tx-form', {
|
|
||||||
onSubmit: this.onSubmit,
|
|
||||||
}, [
|
|
||||||
// Cancel Button
|
|
||||||
h('div.cancel.btn-light.confirm-screen-cancel-button.allcaps', {
|
|
||||||
onClick: (event) => this.cancel(event, txMeta),
|
|
||||||
}, t('cancel')),
|
|
||||||
|
|
||||||
// Accept Button
|
|
||||||
h('button.confirm-screen-confirm-button.allcaps', [t('confirm')]),
|
|
||||||
]),
|
|
||||||
|
|
||||||
|
|
||||||
])
|
])
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user