SOV-3376: Mark Trezor as discontinued

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;
+  }
+}

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,
         ) && (
-          <Item
-            options={options}
-            image={images.trezorWallet}
-            title='Trezor'
-            onClick={() => props.onWalletSelected(ProviderType.TREZOR)}
-            linkHref='https://trezor.io/?offer_id=12&aff_id=7144&source=sovryn'
-            linkTitle='Buy Now'
-            dataAttribute='hardwareWallet-trezor'
-          />
+          <div className={style.item}>
+            <Item
+              options={options}
+              image={images.trezorWallet}
+              title='Trezor'
+              disabled
+              onClick={() => props.onWalletSelected(ProviderType.TREZOR)}
+              dataAttribute='hardwareWallet-trezor'
+            />
+            <p className={style.title}>{t(translations.deprecated)}</p>
+            <p className={style.subtitle}>{t(translations.trezorDescription)}</p>
+            <a
+              className={style.link}
+              href='https://wiki.sovryn.com/en/getting-started/trezor-deprecation'
+              target='_blank'
+              rel='noreferrer nofollow'
+            >
+              {t(translations.dialogs.walletConnect.learn)}
+            </a>
+          </div>
         )}
       </ItemList>
       {!props.hideInstructionLink && (

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,20 +36,21 @@
       "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}}",
       "disable": "Connect your ledger device via USB and open {{networkName}} app."
     }
   },
   "deprecated": "DEPRECATED",
+  "trezorDescription": "Still need to connect with Trezor?",
   "learn": "Learn more"
 }