Content and UI updates for the STX modal (#13798)

* Update content and UI for STX modal

* Update the main header image for STX

* Capitalize Smart Transactions in the button label
feature/default_network_editable
Daniel 3 years ago committed by GitHub
parent 1e494f3004
commit 42fd5d19f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 16
      app/_locales/en/messages.json
  2. BIN
      app/images/logo/metamask-smart-transactions@4x.png
  3. BIN
      app/images/logo/smart-transactions-header.png
  4. 17
      ui/pages/swaps/build-quote/build-quote.js

@ -1014,7 +1014,7 @@
"message": "Use OpenSea's API to fetch NFT data. NFT auto-detection relies on OpenSea's API, and will not be available when this is turned off." "message": "Use OpenSea's API to fetch NFT data. NFT auto-detection relies on OpenSea's API, and will not be available when this is turned off."
}, },
"enableSmartTransactions": { "enableSmartTransactions": {
"message": "Enable smart transactions" "message": "Enable Smart Transactions"
}, },
"enableToken": { "enableToken": {
"message": "enable $1", "message": "enable $1",
@ -2949,19 +2949,19 @@
"message": "Store this phrase in a password manager like 1Password." "message": "Store this phrase in a password manager like 1Password."
}, },
"stxAreHere": { "stxAreHere": {
"message": "Smart transactions are here!" "message": "Smart Transactions are here!"
}, },
"stxBenefit1": { "stxBenefit1": {
"message": "Decrease transaction costs" "message": "Minimize transaction costs"
}, },
"stxBenefit2": { "stxBenefit2": {
"message": "Reduce failures & minimize costs" "message": "Reduce transaction failures"
}, },
"stxBenefit3": { "stxBenefit3": {
"message": "Protect from front-running" "message": "Eliminate stuck transactions"
}, },
"stxBenefit4": { "stxBenefit4": {
"message": "Eliminate stuck transactions" "message": "Prevent front-running"
}, },
"stxCancelled": { "stxCancelled": {
"message": "Swap would have failed" "message": "Swap would have failed"
@ -2973,7 +2973,7 @@
"message": "Try your swap again. We’ll be here to protect you against similar risks next time." "message": "Try your swap again. We’ll be here to protect you against similar risks next time."
}, },
"stxDescription": { "stxDescription": {
"message": "Smart transactions use MetaMask smart contracts to simulate transactions before submitting in order to..." "message": "MetaMask Swaps just got a whole lot smarter! Enabling Smart Transactions will allow MetaMask to programmatically optimize your Swap to help:"
}, },
"stxFailure": { "stxFailure": {
"message": "Swap failed" "message": "Swap failed"
@ -2995,7 +2995,7 @@
"message": "Privately submitting the Swap..." "message": "Privately submitting the Swap..."
}, },
"stxSubDescription": { "stxSubDescription": {
"message": "Enabling allows MetaMask to simulate transactions, proactively cancel bad transactions and sign MetaMask Swaps transactions for you." "message": "* Smart Transactions will attempt to submit your transaction privately, multiple times. If all attempts fail, the transaction will be broadcast publicly to ensure your Swap successfully goes through."
}, },
"stxSuccess": { "stxSuccess": {
"message": "Swap complete!" "message": "Swap complete!"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

@ -595,23 +595,32 @@ export default function BuildQuote({
flexDirection={FLEX_DIRECTION.COLUMN} flexDirection={FLEX_DIRECTION.COLUMN}
> >
<img <img
src="./images/logo/metamask-smart-transactions@4x.png" src="./images/logo/smart-transactions-header.png"
alt={t('swapSwapSwitch')} alt={t('swapSwapSwitch')}
/> />
</Box> </Box>
<Typography variant={TYPOGRAPHY.H6} marginTop={0}> <Typography variant={TYPOGRAPHY.H7} marginTop={0}>
{t('stxDescription')} {t('stxDescription')}
</Typography> </Typography>
<Typography <Typography
tag="ul" tag="ul"
variant={TYPOGRAPHY.H6} variant={TYPOGRAPHY.H7}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FONT_WEIGHT.BOLD}
marginTop={3} marginTop={3}
> >
<li>{t('stxBenefit1')}</li> <li>{t('stxBenefit1')}</li>
<li>{t('stxBenefit2')}</li> <li>{t('stxBenefit2')}</li>
<li>{t('stxBenefit3')}</li> <li>{t('stxBenefit3')}</li>
<li>{t('stxBenefit4')}</li> <li>
{t('stxBenefit4')}
<Typography
tag="span"
fontWeight={FONT_WEIGHT.NORMAL}
variant={TYPOGRAPHY.H7}
>
{' *'}
</Typography>
</li>
</Typography> </Typography>
<Typography <Typography
variant={TYPOGRAPHY.H8} variant={TYPOGRAPHY.H8}

Loading…
Cancel
Save