diff --git a/packages/react-wallet/src/components/WalletConnectionSteps/HardwareWalletSelector/index.module.css b/packages/react-wallet/src/components/WalletConnectionSteps/HardwareWalletSelector/index.module.css new file mode 100644 index 0000000..9adda4a --- /dev/null +++ b/packages/react-wallet/src/components/WalletConnectionSteps/HardwareWalletSelector/index.module.css @@ -0,0 +1,27 @@ +.item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.title { + color: #ff0000; + font-weight: bold; + margin-bottom: 3px; +} +.subtitle { + color: #ff0000; + margin-bottom: 3px; + font-size: 14px; +} +.link { + color: #ff0000 !important; + text-decoraton: underline; +} + +@media (min-width: 768px) { + .title { + margin-top: -15px; + } +} diff --git a/packages/react-wallet/src/components/WalletConnectionSteps/HardwareWalletSelector/index.tsx b/packages/react-wallet/src/components/WalletConnectionSteps/HardwareWalletSelector/index.tsx index 2c92739..7173901 100644 --- a/packages/react-wallet/src/components/WalletConnectionSteps/HardwareWalletSelector/index.tsx +++ b/packages/react-wallet/src/components/WalletConnectionSteps/HardwareWalletSelector/index.tsx @@ -8,6 +8,8 @@ import { translations } from '../../../locales/i18n'; import { useTranslation } from 'react-i18next'; import { WalletContext } from '../../..'; import { isWalletVisibleForSignTyped } from '../../../helpers'; +import style from './index.module.css'; + interface Props { onWalletSelected: (value: ProviderType) => void; hideInstructionLink?: boolean; @@ -38,15 +40,26 @@ export function HardwareWalletSelector(props: Props) { ProviderType.TREZOR, signTypedRequired, ) && ( - props.onWalletSelected(ProviderType.TREZOR)} - linkHref='https://trezor.io/?offer_id=12&aff_id=7144&source=sovryn' - linkTitle='Buy Now' - dataAttribute='hardwareWallet-trezor' - /> +
+ props.onWalletSelected(ProviderType.TREZOR)} + dataAttribute='hardwareWallet-trezor' + /> +

{t(translations.deprecated)}

+

{t(translations.trezorDescription)}

+ + {t(translations.dialogs.walletConnect.learn)} + +
)} {!props.hideInstructionLink && ( diff --git a/packages/react-wallet/src/locales/en/translation.json b/packages/react-wallet/src/locales/en/translation.json index de0a7c9..831034b 100644 --- a/packages/react-wallet/src/locales/en/translation.json +++ b/packages/react-wallet/src/locales/en/translation.json @@ -16,7 +16,7 @@ }, "instructions": "For instructions on how to connect to SOVRYN visit our Wiki", "ledgerInstructions": "Don't understand Derivation Paths? Read our wiki", - "instructionsMobile":"For instructions on how to connect mobile wallets to SOVRYN visit our Wiki", + "instructionsMobile": "For instructions on how to connect mobile wallets to SOVRYN visit our Wiki", "ledgerAppInstruction": "Make sure you have {{app}} app opened in your Ledger Device." }, "browserSelector": { @@ -36,14 +36,14 @@ "learn": "Learn more" }, "walletConnect": { - "title":"Scan QR code to connect wallet using WalletConnect", + "title": "Scan QR code to connect wallet using WalletConnect", "wallet": "Compatible mobile wallets", "deprecated": "DEPRECATED", "learn": "Learn more" }, "hardwareWallet": { - "title":"Select hardware wallet", - "success":"Copied Successfully" + "title": "Select hardware wallet", + "success": "Copied Successfully" }, "hardwarePath": { "title": "Connect {{name}}", @@ -51,5 +51,6 @@ } }, "deprecated": "DEPRECATED", + "trezorDescription": "Still need to connect with Trezor?", "learn": "Learn more" }