Hardware wallet copy updates, referral and tutorial buttons (#14738)

Co-authored-by: ryanml <ryanlanese@gmail.com>
Co-authored-by: Alex Donesky <adonesky@gmail.com>
feature/default_network_editable
Alex Jupiter 2 years ago committed by seaona
parent 5b042e0a9a
commit efd1c4d806
  1. 6
      app/_locales/de/messages.json
  2. 6
      app/_locales/el/messages.json
  3. 37
      app/_locales/en/messages.json
  4. 6
      app/_locales/es/messages.json
  5. 3
      app/_locales/es_419/messages.json
  6. 6
      app/_locales/fr/messages.json
  7. 6
      app/_locales/hi/messages.json
  8. 6
      app/_locales/id/messages.json
  9. 6
      app/_locales/ja/messages.json
  10. 6
      app/_locales/ko/messages.json
  11. 6
      app/_locales/pt/messages.json
  12. 3
      app/_locales/pt_BR/messages.json
  13. 6
      app/_locales/ru/messages.json
  14. 6
      app/_locales/tl/messages.json
  15. 6
      app/_locales/tr/messages.json
  16. 6
      app/_locales/vi/messages.json
  17. 6
      app/_locales/zh_CN/messages.json
  18. 25
      shared/constants/hardware-wallets.js
  19. 26
      ui/pages/create-account/connect-hardware/index.scss
  20. 236
      ui/pages/create-account/connect-hardware/select-hardware.js

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "AirGap-Tresor" "message": "AirGap-Tresor"
}, },
"airgapVaultTutorial": {
"message": " (Tutorials)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "Dies kann in \"Einstellungen > Warnungen\" geändert werden" "message": "Dies kann in \"Einstellungen > Warnungen\" geändert werden"
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Tutorials)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Bekannte Vertragsadresse." "message": "Bekannte Vertragsadresse."
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "Θησαυροφυλάκιο AirGap" "message": "Θησαυροφυλάκιο AirGap"
}, },
"airgapVaultTutorial": {
"message": " (Μαθήματα)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "Αυτό μπορεί να αλλάξει στο \"Ρυθμίσεις > Ειδοποιήσεις\"" "message": "Αυτό μπορεί να αλλάξει στο \"Ρυθμίσεις > Ειδοποιήσεις\""
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Εκμάθηση)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Γνωστή διεύθυνση συμβολαίου." "message": "Γνωστή διεύθυνση συμβολαίου."
}, },

@ -36,10 +36,10 @@
"message": "Scan QR code" "message": "Scan QR code"
}, },
"QRHardwareWalletSteps1Description": { "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": { "QRHardwareWalletSteps1Title": {
"message": "QR-based HW wallet" "message": "Connect your QR hardware wallet"
}, },
"QRHardwareWalletSteps2Description": { "QRHardwareWalletSteps2Description": {
"message": "Ngrave (coming soon)" "message": "Ngrave (coming soon)"
@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "AirGap Vault" "message": "AirGap Vault"
}, },
"airgapVaultTutorial": {
"message": " (Tutorials)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "This can be changed in \"Settings > Alerts\"" "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.", "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" "description": "$1 represents the crypto symbol to be purchased"
}, },
"buyNow": {
"message": "Buy Now"
},
"buyWithWyre": { "buyWithWyre": {
"message": "Buy $1 with Wyre" "message": "Buy $1 with Wyre"
}, },
@ -768,6 +768,9 @@
"convertTokenToNFTExistDescription": { "convertTokenToNFTExistDescription": {
"message": "We’ve detected that this asset has been added as an NFT. Would you like to remove it from your token list?" "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": { "copiedExclamation": {
"message": "Copied!" "message": "Copied!"
}, },
@ -897,6 +900,9 @@
"dataHex": { "dataHex": {
"message": "Hex" "message": "Hex"
}, },
"dcent": {
"message": "D'Cent"
},
"decimal": { "decimal": {
"message": "Token decimal" "message": "Token decimal"
}, },
@ -1000,6 +1006,9 @@
"downloadGoogleChrome": { "downloadGoogleChrome": {
"message": "Download Google Chrome" "message": "Download Google Chrome"
}, },
"downloadNow": {
"message": "Download Now"
},
"downloadSecretBackup": { "downloadSecretBackup": {
"message": "Download this Secret Recovery Phrase and keep it stored safely on an external encrypted hard drive or storage medium." "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": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Tutorials)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Known contract address." "message": "Known contract address."
}, },
@ -3370,10 +3376,10 @@
"message": "Not connected" "message": "Not connected"
}, },
"step1LatticeWallet": { "step1LatticeWallet": {
"message": "Make sure your Lattice1 is ready to connect" "message": "Connect your Lattice1"
}, },
"step1LatticeWalletMsg": { "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" "description": "$1 represents the `hardwareWalletSupportLinkConversion` localization key"
}, },
"step1LedgerWallet": { "step1LedgerWallet": {
@ -3384,17 +3390,17 @@
"description": "$1 represents the `ledgerLiveApp` localization value" "description": "$1 represents the `ledgerLiveApp` localization value"
}, },
"step1TrezorWallet": { "step1TrezorWallet": {
"message": "Plug in Trezor wallet" "message": "Connect your Trezor"
}, },
"step1TrezorWalletMsg": { "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" "description": "$1 represents the `hardwareWalletSupportLinkConversion` localization key"
}, },
"step2LedgerWallet": { "step2LedgerWallet": {
"message": "Plug in Ledger wallet" "message": "Connect your Ledger"
}, },
"step2LedgerWalletMsg": { "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" "description": "$1 represents the `hardwareWalletSupportLinkConversion` localization key"
}, },
"stillGettingMessage": { "stillGettingMessage": {
@ -4116,6 +4122,9 @@
"turnOnTokenDetection": { "turnOnTokenDetection": {
"message": "Turn on enhanced token detection" "message": "Turn on enhanced token detection"
}, },
"tutorial": {
"message": "Tutorial"
},
"twelveHrTitle": { "twelveHrTitle": {
"message": "12hr:" "message": "12hr:"
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "Bóveda AirGap" "message": "Bóveda AirGap"
}, },
"airgapVaultTutorial": {
"message": " (Tutoriales)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "Esto se puede modificar en \"Configuración > Alertas\"" "message": "Esto se puede modificar en \"Configuración > Alertas\""
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Tutoriales)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Dirección de contrato conocida." "message": "Dirección de contrato conocida."
}, },

@ -1392,9 +1392,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Tutoriales)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Dirección de contrato conocida." "message": "Dirección de contrato conocida."
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "Coffre-fort AirGap" "message": "Coffre-fort AirGap"
}, },
"airgapVaultTutorial": {
"message": " (Tutoriels)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "Vous pouvez modifier ceci dans «Paramètres > Alertes»" "message": "Vous pouvez modifier ceci dans «Paramètres > Alertes»"
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Tutoriels)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Adresse contractuelle connue." "message": "Adresse contractuelle connue."
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "AirGap कट" "message": "AirGap कट"
}, },
"airgapVaultTutorial": {
"message": " (टियलस)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "इस \"सिग > अलरट\" म बदल सकत" "message": "इस \"सिग > अलरट\" म बदल सकत"
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (टियल)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "जत अनध पत।" "message": "जत अनध पत।"
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "Brankas AirGap" "message": "Brankas AirGap"
}, },
"airgapVaultTutorial": {
"message": " (Tutorial)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "Ini dapat diubah dalam \"Pengaturan > Peringatan\"" "message": "Ini dapat diubah dalam \"Pengaturan > Peringatan\""
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Tutorial)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Alamat kontrak yang diketahui." "message": "Alamat kontrak yang diketahui."
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "AirGap Vault" "message": "AirGap Vault"
}, },
"airgapVaultTutorial": {
"message": " (チュートリアル)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "これは、[設定 > 警告] で変更できます" "message": "これは、[設定 > 警告] で変更できます"
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": "(チュートリアル)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "既知のコントラクトアドレスです。" "message": "既知のコントラクトアドレスです。"
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "에어갭 볼트" "message": "에어갭 볼트"
}, },
"airgapVaultTutorial": {
"message": " (튜토리얼)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "\"설정 > 경고\"에서 변경할 수 있습니다." "message": "\"설정 > 경고\"에서 변경할 수 있습니다."
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (튜토리얼)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "알려진 계약 주소입니다." "message": "알려진 계약 주소입니다."
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "AirGap Vault" "message": "AirGap Vault"
}, },
"airgapVaultTutorial": {
"message": " (Tutoriais)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "Isso pode ser alterado em \"Configurações > Alertas\"" "message": "Isso pode ser alterado em \"Configurações > Alertas\""
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Tutoriais)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Endereço de contrato conhecido." "message": "Endereço de contrato conhecido."
}, },

@ -1376,9 +1376,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Tutoriais)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Endereço de contrato conhecido." "message": "Endereço de contrato conhecido."
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "Хранилище AirGap" "message": "Хранилище AirGap"
}, },
"airgapVaultTutorial": {
"message": "(Руководства)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "Это можно изменить в разделе «Настройки» > «Предупреждения»" "message": "Это можно изменить в разделе «Настройки» > «Предупреждения»"
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Руководства)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Известный адрес контракта." "message": "Известный адрес контракта."
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "AirGap Vault" "message": "AirGap Vault"
}, },
"airgapVaultTutorial": {
"message": " (Mga Tutorial)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "Puwede itong baguhin sa \"Mga Setting > Mga Alerto\"" "message": "Puwede itong baguhin sa \"Mga Setting > Mga Alerto\""
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Mga Tutorial)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Kilalang address ng kontrata." "message": "Kilalang address ng kontrata."
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "AirGap Kasası" "message": "AirGap Kasası"
}, },
"airgapVaultTutorial": {
"message": "(Öğreticiler)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "\"Ayarlar > Uyarılar\" kısmında değiştirilebilir" "message": "\"Ayarlar > Uyarılar\" kısmında değiştirilebilir"
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Ana İlke" "message": "Ana İlke"
}, },
"keystoneTutorial": {
"message": " (Öğreticiler)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Bilinen sözleşme adresi." "message": "Bilinen sözleşme adresi."
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "AirGap Vault" "message": "AirGap Vault"
}, },
"airgapVaultTutorial": {
"message": " (Hướng dẫn)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "Bạn có thể thay đổi trong phần \"Cài đặt > Cảnh báo\"" "message": "Bạn có thể thay đổi trong phần \"Cài đặt > Cảnh báo\""
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (Hướng dẫn)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "Địa chỉ hợp đồng đã biết." "message": "Địa chỉ hợp đồng đã biết."
}, },

@ -263,9 +263,6 @@
"airgapVault": { "airgapVault": {
"message": "AirGap Vault" "message": "AirGap Vault"
}, },
"airgapVaultTutorial": {
"message": " (使用教程)"
},
"alertDisableTooltip": { "alertDisableTooltip": {
"message": "这可以在“设置 > 提醒”中进行更改" "message": "这可以在“设置 > 提醒”中进行更改"
}, },
@ -1782,9 +1779,6 @@
"keystone": { "keystone": {
"message": "Keystone" "message": "Keystone"
}, },
"keystoneTutorial": {
"message": " (使用教程)"
},
"knownAddressRecipient": { "knownAddressRecipient": {
"message": "已知合约地址。" "message": "已知合约地址。"
}, },

@ -48,3 +48,28 @@ export const TRANSPORT_STATES = {
DEVICE_OPEN_FAILURE: 'DEVICE_OPEN_FAILURE', DEVICE_OPEN_FAILURE: 'DEVICE_OPEN_FAILURE',
UNKNOWN_FAILURE: 'UNKNOWN_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',
};

@ -25,6 +25,13 @@
} }
} }
&__QR-subtitle {
@include H5;
margin-top: 10px;
color: var(--color-text-default);
}
&__btn-wrapper { &__btn-wrapper {
flex: 1; flex: 1;
flex-direction: row; flex-direction: row;
@ -41,6 +48,25 @@
opacity: 0.5; 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 { &__btn {
background: var(--color-background-alternative); background: var(--color-background-alternative);
border: 1px solid var(--color-border-muted); border: 1px solid var(--color-border-muted);

@ -10,12 +10,16 @@ import LogoLattice from '../../../components/ui/logo/logo-lattice';
import { import {
DEVICE_NAMES, DEVICE_NAMES,
LEDGER_TRANSPORT_TYPES, LEDGER_TRANSPORT_TYPES,
AFFILIATE_LINKS,
AFFILIATE_TUTORIAL_LINKS,
} from '../../../../shared/constants/hardware-wallets'; } from '../../../../shared/constants/hardware-wallets';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
import { EVENT } from '../../../../shared/constants/metametrics';
export default class SelectHardware extends Component { export default class SelectHardware extends Component {
static contextTypes = { static contextTypes = {
t: PropTypes.func, t: PropTypes.func,
trackEvent: PropTypes.func,
}; };
static propTypes = { static propTypes = {
@ -214,6 +218,32 @@ export default class SelectHardware extends Component {
{steps.map((step, index) => ( {steps.map((step, index) => (
<div className="hw-connect" key={index}> <div className="hw-connect" key={index}>
<h3 className="hw-connect__title">{step.title}</h3> <h3 className="hw-connect__title">{step.title}</h3>
<Button
className="hw-connect__external-btn-first"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked Ledger Buy Now',
});
window.open(AFFILIATE_LINKS.LEDGER, '_blank');
}}
>
{this.context.t('buyNow')}
</Button>
<Button
className="hw-connect__external-btn"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked Ledger Tutorial',
});
window.open(AFFILIATE_TUTORIAL_LINKS.LEDGER, '_blank');
}}
>
{this.context.t('tutorial')}
</Button>
<p className="hw-connect__msg">{step.message}</p> <p className="hw-connect__msg">{step.message}</p>
{step.asset && ( {step.asset && (
<img <img
@ -254,6 +284,32 @@ export default class SelectHardware extends Component {
{steps.map((step, index) => ( {steps.map((step, index) => (
<div className="hw-connect" key={index}> <div className="hw-connect" key={index}>
<h3 className="hw-connect__title">{step.title}</h3> <h3 className="hw-connect__title">{step.title}</h3>
<Button
className="hw-connect__external-btn-first"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked GridPlus Buy Now',
});
window.open(AFFILIATE_LINKS.GRIDPLUS, '_blank');
}}
>
{this.context.t('buyNow')}
</Button>
<Button
className="hw-connect__external-btn"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked GidPlus Tutorial',
});
window.open(AFFILIATE_TUTORIAL_LINKS.GRIDPLUS, '_blank');
}}
>
{this.context.t('tutorial')}
</Button>
<p className="hw-connect__msg">{step.message}</p> <p className="hw-connect__msg">{step.message}</p>
{step.asset && ( {step.asset && (
<img <img
@ -294,6 +350,32 @@ export default class SelectHardware extends Component {
{steps.map((step, index) => ( {steps.map((step, index) => (
<div className="hw-connect" key={index}> <div className="hw-connect" key={index}>
<h3 className="hw-connect__title">{step.title}</h3> <h3 className="hw-connect__title">{step.title}</h3>
<Button
className="hw-connect__external-btn-first"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked Trezor Buy Now',
});
window.open(AFFILIATE_LINKS.TREZOR, '_blank');
}}
>
{this.context.t('buyNow')}
</Button>
<Button
className="hw-connect__external-btn"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked Trezor Tutorial',
});
window.open(AFFILIATE_TUTORIAL_LINKS.TREZOR, '_blank');
}}
>
{this.context.t('tutorial')}
</Button>
<p className="hw-connect__msg">{step.message}</p> <p className="hw-connect__msg">{step.message}</p>
{step.asset && ( {step.asset && (
<img <img
@ -319,48 +401,138 @@ export default class SelectHardware extends Component {
{ {
message: ( message: (
<> <>
<a <p className="hw-connect__QR-subtitle">
className="hw-connect__msg-link"
href="https://keyst.one"
rel="noopener noreferrer"
target="_blank"
key="keystone-support-link"
>
{this.context.t('keystone')} {this.context.t('keystone')}
</a> </p>
<a <Button
className="hw-connect__msg-link" className="hw-connect__external-btn-first"
href="https://keyst.one/mm" type="secondary"
rel="noopener noreferrer" onClick={() => {
target="_blank" this.context.trackEvent({
key="keystone-tutorial-link" category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked Keystone Buy Now',
});
window.open(AFFILIATE_LINKS.KEYSTONE, '_blank');
}}
> >
{this.context.t('keystoneTutorial')} {this.context.t('buyNow')}
</a> </Button>
<Button
className="hw-connect__external-btn"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked Keystone Tutorial',
});
window.open(AFFILIATE_TUTORIAL_LINKS.KEYSTONE, '_blank');
}}
>
{this.context.t('tutorial')}
</Button>
</> </>
), ),
}, },
{ {
message: ( message: (
<> <>
<a <p className="hw-connect__QR-subtitle">
className="hw-connect__msg-link"
href="https://airgap.it/metamask"
rel="noopener noreferrer"
target="_blank"
key="airgap-vault-support-link"
>
{this.context.t('airgapVault')} {this.context.t('airgapVault')}
</a> </p>
<a <Button
className="hw-connect__msg-link" className="hw-connect__external-btn-first"
href="https://support.airgap.it/guides/metamask" type="secondary"
rel="noopener noreferrer" onClick={() => {
target="_blank" this.context.trackEvent({
key="airgap-vault-tutorial-link" category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked AirGap Vault Buy Now',
});
window.open(AFFILIATE_LINKS.AIRGAP, '_blank');
}}
>
{this.context.t('downloadNow')}
</Button>
<Button
className="hw-connect__external-btn"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked AirGap Vault Tutorial',
});
window.open(AFFILIATE_TUTORIAL_LINKS.AIRGAP, '_blank');
}}
> >
{this.context.t('airgapVaultTutorial')} {this.context.t('tutorial')}
</a> </Button>
</>
),
},
{
message: (
<>
<p className="hw-connect__QR-subtitle">
{this.context.t('coolWallet')}
</p>
<Button
className="hw-connect__external-btn-first"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked CoolWallet Buy Now',
});
window.open(AFFILIATE_LINKS.COOLWALLET, '_blank');
}}
>
{this.context.t('buyNow')}
</Button>
<Button
className="hw-connect__external-btn"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked CoolWallet Tutorial',
});
window.open(AFFILIATE_TUTORIAL_LINKS.COOLWALLET, '_blank');
}}
>
{this.context.t('tutorial')}
</Button>
</>
),
},
{
message: (
<>
<p className="hw-connect__QR-subtitle">{this.context.t('dcent')}</p>
<Button
className="hw-connect__external-btn-first"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked DCent Buy Now',
});
window.open(AFFILIATE_LINKS.DCENT, '_blank');
}}
>
{this.context.t('buyNow')}
</Button>
<Button
className="hw-connect__external-btn"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked DCent Tutorial',
});
window.open(AFFILIATE_TUTORIAL_LINKS.DCENT, '_blank');
}}
>
{this.context.t('tutorial')}
</Button>
</> </>
), ),
}, },

Loading…
Cancel
Save