From 0a0eb207e87bdce8b4adc9891ddac68efc676558 Mon Sep 17 00:00:00 2001 From: Alex Jupiter Date: Tue, 4 Oct 2022 12:16:57 -0300 Subject: [PATCH] Hardware wallet copy updates, referral and tutorial buttons (#14738) Co-authored-by: ryanml Co-authored-by: Alex Donesky --- app/_locales/de/messages.json | 6 - app/_locales/el/messages.json | 6 - app/_locales/en/messages.json | 37 +-- app/_locales/es/messages.json | 6 - app/_locales/es_419/messages.json | 3 - app/_locales/fr/messages.json | 6 - app/_locales/hi/messages.json | 6 - app/_locales/id/messages.json | 6 - app/_locales/ja/messages.json | 6 - app/_locales/ko/messages.json | 6 - app/_locales/pt/messages.json | 6 - app/_locales/pt_BR/messages.json | 3 - app/_locales/ru/messages.json | 6 - app/_locales/tl/messages.json | 6 - app/_locales/tr/messages.json | 6 - app/_locales/vi/messages.json | 6 - app/_locales/zh_CN/messages.json | 6 - shared/constants/hardware-wallets.js | 25 ++ .../connect-hardware/index.scss | 26 ++ .../connect-hardware/select-hardware.js | 236 +++++++++++++++--- 20 files changed, 278 insertions(+), 136 deletions(-) diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 76c3c75ad..05d837044 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "AirGap-Tresor" }, - "airgapVaultTutorial": { - "message": " (Tutorials)" - }, "alertDisableTooltip": { "message": "Dies kann in \"Einstellungen > Warnungen\" geändert werden" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Tutorials)" - }, "knownAddressRecipient": { "message": "Bekannte Vertragsadresse." }, diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 8080b314f..d42097345 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "Θησαυροφυλάκιο AirGap" }, - "airgapVaultTutorial": { - "message": " (Μαθήματα)" - }, "alertDisableTooltip": { "message": "Αυτό μπορεί να αλλάξει στο \"Ρυθμίσεις > Ειδοποιήσεις\"" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Εκμάθηση)" - }, "knownAddressRecipient": { "message": "Γνωστή διεύθυνση συμβολαίου." }, diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 8d643deed..426bcd814 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -36,10 +36,10 @@ "message": "Scan QR code" }, "QRHardwareWalletSteps1Description": { - "message": "Connect an airgapped hardware wallet that communicates through QR-codes. Officially supported airgapped hardware wallets include:" + "message": "You can choose from a list of official QR-code supporting partners below." }, "QRHardwareWalletSteps1Title": { - "message": "QR-based HW wallet" + "message": "Connect your QR hardware wallet" }, "QRHardwareWalletSteps2Description": { "message": "Ngrave (coming soon)" @@ -263,9 +263,6 @@ "airgapVault": { "message": "AirGap Vault" }, - "airgapVaultTutorial": { - "message": " (Tutorials)" - }, "alertDisableTooltip": { "message": "This can be changed in \"Settings > Alerts\"" }, @@ -521,6 +518,9 @@ "message": "Transak supports credit & debit cards, Apple Pay, MobiKwik, and bank transfers (depending on location) in 100+ countries. $1 deposits directly into your MetaMask account.", "description": "$1 represents the crypto symbol to be purchased" }, + "buyNow": { + "message": "Buy Now" + }, "buyWithWyre": { "message": "Buy $1 with Wyre" }, @@ -768,6 +768,9 @@ "convertTokenToNFTExistDescription": { "message": "We’ve detected that this asset has been added as an NFT. Would you like to remove it from your token list?" }, + "coolWallet": { + "message": "CoolWallet" + }, "copiedExclamation": { "message": "Copied!" }, @@ -897,6 +900,9 @@ "dataHex": { "message": "Hex" }, + "dcent": { + "message": "D'Cent" + }, "decimal": { "message": "Token decimal" }, @@ -1000,6 +1006,9 @@ "downloadGoogleChrome": { "message": "Download Google Chrome" }, + "downloadNow": { + "message": "Download Now" + }, "downloadSecretBackup": { "message": "Download this Secret Recovery Phrase and keep it stored safely on an external encrypted hard drive or storage medium." }, @@ -1798,9 +1807,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Tutorials)" - }, "knownAddressRecipient": { "message": "Known contract address." }, @@ -3370,10 +3376,10 @@ "message": "Not connected" }, "step1LatticeWallet": { - "message": "Make sure your Lattice1 is ready to connect" + "message": "Connect your Lattice1" }, "step1LatticeWalletMsg": { - "message": "You can connect MetaMask to your Lattice1 device once it is set up and online. Unlock your device and have your Device ID ready. For more on using hardware wallets, $1", + "message": "You can connect MetaMask to your Lattice1 device once it is set up and online. Unlock your device and have your Device ID ready.", "description": "$1 represents the `hardwareWalletSupportLinkConversion` localization key" }, "step1LedgerWallet": { @@ -3384,17 +3390,17 @@ "description": "$1 represents the `ledgerLiveApp` localization value" }, "step1TrezorWallet": { - "message": "Plug in Trezor wallet" + "message": "Connect your Trezor" }, "step1TrezorWalletMsg": { - "message": "Connect your wallet directly to your computer. For more on using your hardware wallet device, $1", + "message": "Plug your Trezor directly into your computer and unlock it. Make sure you use the correct passphrase.", "description": "$1 represents the `hardwareWalletSupportLinkConversion` localization key" }, "step2LedgerWallet": { - "message": "Plug in Ledger wallet" + "message": "Connect your Ledger" }, "step2LedgerWalletMsg": { - "message": "Connect your wallet directly to your computer. Unlock your Ledger and open the Ethereum app. For more on using your hardware wallet device, $1.", + "message": "Plug your Ledger directly into your computer, then unlock it and open the Ethereum app.", "description": "$1 represents the `hardwareWalletSupportLinkConversion` localization key" }, "stillGettingMessage": { @@ -4116,6 +4122,9 @@ "turnOnTokenDetection": { "message": "Turn on enhanced token detection" }, + "tutorial": { + "message": "Tutorial" + }, "twelveHrTitle": { "message": "12hr:" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index b0250932b..c8f10fb99 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "Bóveda AirGap" }, - "airgapVaultTutorial": { - "message": " (Tutoriales)" - }, "alertDisableTooltip": { "message": "Esto se puede modificar en \"Configuración > Alertas\"" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Tutoriales)" - }, "knownAddressRecipient": { "message": "Dirección de contrato conocida." }, diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json index 738d51536..92fd1dcec 100644 --- a/app/_locales/es_419/messages.json +++ b/app/_locales/es_419/messages.json @@ -1392,9 +1392,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Tutoriales)" - }, "knownAddressRecipient": { "message": "Dirección de contrato conocida." }, diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index 101698d35..6c98ad336 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "Coffre-fort AirGap" }, - "airgapVaultTutorial": { - "message": " (Tutoriels)" - }, "alertDisableTooltip": { "message": "Vous pouvez modifier ceci dans « Paramètres > Alertes »" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Tutoriels)" - }, "knownAddressRecipient": { "message": "Adresse contractuelle connue." }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index cb2c66d3c..76664e7fc 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "AirGap का वॉल्ट" }, - "airgapVaultTutorial": { - "message": " (ट्यूटोरियल्स)" - }, "alertDisableTooltip": { "message": "इसे \"सेटिंग > अलर्ट\" में बदला जा सकता है" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (ट्यूटोरियल)" - }, "knownAddressRecipient": { "message": "ज्ञात अनुबंध पता।" }, diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index 4d577cb2a..974073843 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "Brankas AirGap" }, - "airgapVaultTutorial": { - "message": " (Tutorial)" - }, "alertDisableTooltip": { "message": "Ini dapat diubah dalam \"Pengaturan > Peringatan\"" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Tutorial)" - }, "knownAddressRecipient": { "message": "Alamat kontrak yang diketahui." }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 781b55da8..e1023b070 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "AirGap Vault" }, - "airgapVaultTutorial": { - "message": " (チュートリアル)" - }, "alertDisableTooltip": { "message": "これは、[設定 > 警告] で変更できます" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": "(チュートリアル)" - }, "knownAddressRecipient": { "message": "既知のコントラクトアドレスです。" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index 00d49f447..ecfa86120 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "에어갭 볼트" }, - "airgapVaultTutorial": { - "message": " (튜토리얼)" - }, "alertDisableTooltip": { "message": "\"설정 > 경고\"에서 변경할 수 있습니다." }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (튜토리얼)" - }, "knownAddressRecipient": { "message": "알려진 계약 주소입니다." }, diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index 21f8d79a7..eb4fdd630 100644 --- a/app/_locales/pt/messages.json +++ b/app/_locales/pt/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "AirGap Vault" }, - "airgapVaultTutorial": { - "message": " (Tutoriais)" - }, "alertDisableTooltip": { "message": "Isso pode ser alterado em \"Configurações > Alertas\"" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Tutoriais)" - }, "knownAddressRecipient": { "message": "Endereço de contrato conhecido." }, diff --git a/app/_locales/pt_BR/messages.json b/app/_locales/pt_BR/messages.json index 245a0ad7b..2755f4967 100644 --- a/app/_locales/pt_BR/messages.json +++ b/app/_locales/pt_BR/messages.json @@ -1376,9 +1376,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Tutoriais)" - }, "knownAddressRecipient": { "message": "Endereço de contrato conhecido." }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index 82410531b..f4542bd32 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "Хранилище AirGap" }, - "airgapVaultTutorial": { - "message": "(Руководства)" - }, "alertDisableTooltip": { "message": "Это можно изменить в разделе «Настройки» > «Предупреждения»" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Руководства)" - }, "knownAddressRecipient": { "message": "Известный адрес контракта." }, diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index 5ef6c7fbc..a08952f65 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "AirGap Vault" }, - "airgapVaultTutorial": { - "message": " (Mga Tutorial)" - }, "alertDisableTooltip": { "message": "Puwede itong baguhin sa \"Mga Setting > Mga Alerto\"" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Mga Tutorial)" - }, "knownAddressRecipient": { "message": "Kilalang address ng kontrata." }, diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index fd9e1ebe2..c0b7c054a 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "AirGap Kasası" }, - "airgapVaultTutorial": { - "message": "(Öğreticiler)" - }, "alertDisableTooltip": { "message": "\"Ayarlar > Uyarılar\" kısmında değiştirilebilir" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Ana İlke" }, - "keystoneTutorial": { - "message": " (Öğreticiler)" - }, "knownAddressRecipient": { "message": "Bilinen sözleşme adresi." }, diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index ad00eb4b4..e7f5d4cf8 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "AirGap Vault" }, - "airgapVaultTutorial": { - "message": " (Hướng dẫn)" - }, "alertDisableTooltip": { "message": "Bạn có thể thay đổi trong phần \"Cài đặt > Cảnh báo\"" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " (Hướng dẫn)" - }, "knownAddressRecipient": { "message": "Địa chỉ hợp đồng đã biết." }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index eb1e1be9c..981cbcdfe 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -263,9 +263,6 @@ "airgapVault": { "message": "AirGap Vault" }, - "airgapVaultTutorial": { - "message": " （使用教程）" - }, "alertDisableTooltip": { "message": "这可以在“设置 > 提醒”中进行更改" }, @@ -1782,9 +1779,6 @@ "keystone": { "message": "Keystone" }, - "keystoneTutorial": { - "message": " （使用教程）" - }, "knownAddressRecipient": { "message": "已知合约地址。" }, diff --git a/shared/constants/hardware-wallets.js b/shared/constants/hardware-wallets.js index 48bc65d3d..aa4d86d58 100644 --- a/shared/constants/hardware-wallets.js +++ b/shared/constants/hardware-wallets.js @@ -48,3 +48,28 @@ export const TRANSPORT_STATES = { DEVICE_OPEN_FAILURE: 'DEVICE_OPEN_FAILURE', UNKNOWN_FAILURE: 'UNKNOWN_FAILURE', }; + +export const AFFILIATE_LINKS = { + LEDGER: 'https://shop.ledger.com/?r=17c4991a03fa', + GRIDPLUS: 'https://gridplus.io/?afmc=7p', + TREZOR: + 'https://shop.trezor.io/product/trezor-one-black?offer_id=35&aff_id=11009', + KEYSTONE: + 'https://shop.keyst.one/?rfsn=6088257.656b3e9&utm_source=refersion&utm_medium=affiliate&utm_campaign=6088257.656b3e9', + AIRGAP: 'https://airgap.it/', + COOLWALLET: 'https://www.coolwallet.io/', + DCENT: 'https://dcentwallet.com/', +}; + +export const AFFILIATE_TUTORIAL_LINKS = { + LEDGER: + 'https://support.ledger.com/hc/en-us/articles/4404366864657-Set-up-and-use-MetaMask-to-access-your-Ledger-Ethereum-ETH-account?docs=true', + GRIDPLUS: 'https://docs.gridplus.io/setup/metamask', + TREZOR: 'https://wiki.trezor.io/Apps:MetaMask', + KEYSTONE: + 'https://support.keyst.one/3rd-party-wallets/eth-and-web3-wallets-keystone/bind-metamask-with-keystone', + AIRGAP: 'https://support.airgap.it/guides/metamask/', + COOLWALLET: 'https://www.coolwallet.io/metamask-step-by-step-guides/', + DCENT: + 'https://medium.com/dcentwallet/dcent-wallet-now-supports-qr-based-protocol-to-link-with-metamask-57555f02603f', +}; diff --git a/ui/pages/create-account/connect-hardware/index.scss b/ui/pages/create-account/connect-hardware/index.scss index 961844530..5bed01b4d 100644 --- a/ui/pages/create-account/connect-hardware/index.scss +++ b/ui/pages/create-account/connect-hardware/index.scss @@ -25,6 +25,13 @@ } } + &__QR-subtitle { + @include H5; + + margin-top: 10px; + color: var(--color-text-default); + } + &__btn-wrapper { flex: 1; flex-direction: row; @@ -41,6 +48,25 @@ opacity: 0.5; } + &__external-btn-first { + @include H7; + + padding: 5px 10px; + width: auto; + display: inline; + margin-top: 10px; + margin-right: 20px; + } + + &__external-btn { + @include H7; + + padding: 5px 10px; + width: auto; + display: inline; + margin-top: 10px; + } + &__btn { background: var(--color-background-alternative); border: 1px solid var(--color-border-muted); diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js index 392665b69..d91a716c1 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -10,12 +10,16 @@ import LogoLattice from '../../../components/ui/logo/logo-lattice'; import { DEVICE_NAMES, LEDGER_TRANSPORT_TYPES, + AFFILIATE_LINKS, + AFFILIATE_TUTORIAL_LINKS, } from '../../../../shared/constants/hardware-wallets'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; +import { EVENT } from '../../../../shared/constants/metametrics'; export default class SelectHardware extends Component { static contextTypes = { t: PropTypes.func, + trackEvent: PropTypes.func, }; static propTypes = { @@ -214,6 +218,32 @@ export default class SelectHardware extends Component { {steps.map((step, index) => (

{step.title}

+ +

{step.message}

{step.asset && ( (

{step.title}

+ +

{step.message}

{step.asset && ( (

{step.title}

+ +

{step.message}

{step.asset && ( - +

{this.context.t('keystone')} - - + + ), }, { message: ( <> - +

{this.context.t('airgapVault')} - - + + + + ), + }, + { + message: ( + <> +

+ {this.context.t('coolWallet')} +

+ + + + ), + }, + { + message: ( + <> +

{this.context.t('dcent')}

+ + ), },