m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

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

Browse Source 
Co-authored-by: ryanml <ryanlanese@gmail.com>
Co-authored-by: Alex Donesky <adonesky@gmail.com>
This commit is contained in:
Alex Jupiter 2022-10-04 12:16:57 -03:00 committed by seaona
parent 5b042e0a9a
commit efd1c4d806
20 changed files with 278 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/_locales/de/messages.json generated
View File

@ -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."
},

6
app/_locales/el/messages.json generated
View File

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

37
app/_locales/en/messages.json generated
View File

@ -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:"
},

6
app/_locales/es/messages.json generated
View File

@ -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."
},

3
app/_locales/es_419/messages.json generated
View File

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

6
app/_locales/fr/messages.json generated
View File

@ -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."
},

6
app/_locales/hi/messages.json generated
View File

@ -263,9 +263,6 @@
"airgapVault": {
"message": "AirGap का वॉल्ट"
},
"airgapVaultTutorial": {
"message": " (ट्यूटोरियल्स)"
},
"alertDisableTooltip": {
"message": "इसे \"सेटिंग > अलर्ट\" में बदला जा सकता है"
},
@ -1782,9 +1779,6 @@
"keystone": {
"message": "Keystone"
},
"keystoneTutorial": {
"message": " (ट्यूटोरियल)"
},
"knownAddressRecipient": {
"message": "ज्ञात अनुबंध पता।"
},

6
app/_locales/id/messages.json generated
View File

@ -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."
},

6
app/_locales/ja/messages.json generated
View File

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

6
app/_locales/ko/messages.json generated
View File

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

6
app/_locales/pt/messages.json generated
View File

@ -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."
},

3
app/_locales/pt_BR/messages.json generated
View File

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

6
app/_locales/ru/messages.json generated
View File

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

6
app/_locales/tl/messages.json generated
View File

@ -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."
},

6
app/_locales/tr/messages.json generated
View File

@ -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."
},

6
app/_locales/vi/messages.json generated
View File

@ -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."
},

6
app/_locales/zh_CN/messages.json generated
View File

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

25
shared/constants/hardware-wallets.js
View File

@ -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',
};

26
ui/pages/create-account/connect-hardware/index.scss
View File

@ -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);

236
ui/pages/create-account/connect-hardware/select-hardware.js
View File

@ -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) => (
<div className="hw-connect" key={index}>
<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>
{step.asset && (
<img
@ -254,6 +284,32 @@ export default class SelectHardware extends Component {
{steps.map((step, index) => (
<div className="hw-connect" key={index}>
<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>
{step.asset && (
<img
@ -294,6 +350,32 @@ export default class SelectHardware extends Component {
{steps.map((step, index) => (
<div className="hw-connect" key={index}>
<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>
{step.asset && (
<img
@ -319,48 +401,138 @@ export default class SelectHardware extends Component {
{
message: (
<>
<a
className="hw-connect__msg-link"
href="https://keyst.one"
rel="noopener noreferrer"
target="_blank"
key="keystone-support-link"
>
<p className="hw-connect__QR-subtitle">
{this.context.t('keystone')}
</a>
<a
className="hw-connect__msg-link"
href="https://keyst.one/mm"
rel="noopener noreferrer"
target="_blank"
key="keystone-tutorial-link"
</p>
<Button
className="hw-connect__external-btn-first"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked Keystone Buy Now',
});
window.open(AFFILIATE_LINKS.KEYSTONE, '_blank');
}}
>
{this.context.t('keystoneTutorial')}
</a>
{this.context.t('buyNow')}
</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: (
<>
<a
className="hw-connect__msg-link"
href="https://airgap.it/metamask"
rel="noopener noreferrer"
target="_blank"
key="airgap-vault-support-link"
>
<p className="hw-connect__QR-subtitle">
{this.context.t('airgapVault')}
</a>
<a
className="hw-connect__msg-link"
href="https://support.airgap.it/guides/metamask"
rel="noopener noreferrer"
target="_blank"
key="airgap-vault-tutorial-link"
</p>
<Button
className="hw-connect__external-btn-first"
type="secondary"
onClick={() => {
this.context.trackEvent({
category: EVENT.CATEGORIES.NAVIGATION,
event: 'Clicked AirGap Vault Buy Now',
});
window.open(AFFILIATE_LINKS.AIRGAP, '_blank');
}}
>
{this.context.t('airgapVaultTutorial')}
</a>
{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('tutorial')}
</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>
</>
),
},