[DDW-533] Add "Fix connection Issues" link to the hardware wallet pairing dialog (#2336)

* [DDW-533] INIT connection issue link on the hw pairing dialog

* [DDW-533] Apply latest designs and support links update

* [DDW-533] Add Translations

* [DDW-533] Updates CHANGELOG

* [DDW-533] Update to fit latest design proposal

Co-authored-by: Nikola Glumac <niglumac@gmail.com>

Author: Tomislav Horaček

CHANGELOG.md

@@ -14,6 +14,7 @@ Changelog
 
 ### Chores
 
+- Added link to connecting issues support article on the hardware wallet "Pairing" dialog ([PR 2336](https://github.com/input-output-hk/daedalus/pull/2336))
 - Updated recovery phrase entry ([PR 2334](https://github.com/input-output-hk/daedalus/pull/2334))
 - Adjusted sorting of table values on the "Rewards" screen ([PR 2333](https://github.com/input-output-hk/daedalus/pull/2333))
 - Fixed error thrown when closing delegation wizard while transaction fees are being calculated ([PR 2330](https://github.com/input-output-hk/daedalus/pull/2330))

source/renderer/app/components/wallet/WalletConnectDialog.js

@@ -3,8 +3,15 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
+import {
+  defineMessages,
+  intlShape,
+  FormattedHTMLMessage,
+  FormattedMessage,
+} from 'react-intl';
 import SVGInline from 'react-svg-inline';
+import { Link } from 'react-polymorph/lib/components/Link';
+import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
 import { get } from 'lodash';
 import ledgerIcon from '../../assets/images/hardware-wallet/ledger-cropped.inline.svg';
 import ledgerXIcon from '../../assets/images/hardware-wallet/ledger-x-cropped.inline.svg';
@@ -52,6 +59,22 @@ const messages = defineMessages({
       '!!!<p><b>Daedalus currently supports only Trezor Model T hardware wallet devices.</b></p><p>If you are <b>pairing your device with Daedalus for the first time</b>, please follow the instructions below.</p><p>If you have <b>already paired your device with Daedalus</b>, you don’t need to repeat this step. Just connect your device when you need to confirm a transaction.</p>',
     description: 'Follow instructions label',
   },
+  connectingIssueSupportLabel: {
+    id: 'wallet.connect.dialog.connectingIssueSupportLabel',
+    defaultMessage:
+      '!!!If you are experiencing issues pairing your hardware wallet device, please {supportLink}',
+    description: 'Connecting issue support description',
+  },
+  connectingIssueSupportLink: {
+    id: 'wallet.connect.dialog.connectingIssueSupportLink',
+    defaultMessage: '!!!read the instructions.',
+    description: 'Connecting issue support link',
+  },
+  connectingIssueSupportLinkUrl: {
+    id: 'wallet.connect.dialog.connectingIssueSupportLinkUrl',
+    defaultMessage: 'https://support.ledger.com/hc/en-us/articles/115005165269',
+    description: 'Link to support article',
+  },
 });
 
 type Props = {
@@ -133,6 +156,19 @@ export default class WalletConnectDialog extends Component<Props> {
       ? messages.instructions
       : messages.instructionsTrezorOnly;
 
+    const supportLink = (
+      <Link
+        className={styles.externalLink}
+        onClick={() =>
+          onExternalLinkClick(
+            intl.formatMessage(messages.connectingIssueSupportLinkUrl)
+          )
+        }
+        label={intl.formatMessage(messages.connectingIssueSupportLink)}
+        skin={LinkSkin}
+      />
+    );
+
     return (
       <Dialog
         className={dialogClasses}
@@ -174,6 +210,14 @@ export default class WalletConnectDialog extends Component<Props> {
                   isTransactionStatus={false}
                 />
               </div>
+              <div className={styles.hardwareWalletIssueArticleWrapper}>
+                <p>
+                  <FormattedMessage
+                    {...messages.connectingIssueSupportLabel}
+                    values={{ supportLink }}
+                  />
+                </p>
+              </div>
             </div>
           )}
         </div>

source/renderer/app/components/wallet/WalletConnectDialog.scss

@@ -78,6 +78,24 @@
       width: 100%;
     }
 
+    .hardwareWalletIssueArticleWrapper {
+      margin-top: 20px;
+
+      p {
+        color: var(--theme-hardware-wallet-message-color);
+        font-family: var(--font-light);
+        font-size: 16px;
+        line-height: 22px;
+      }
+
+      .externalLink {
+        font-family: var(--font-regular);
+        font-size: 16px;
+        margin-right: 4px;
+        word-break: break-word;
+      }
+    }
+
     .error {
       @include error-message;
       margin-top: 27px;

source/renderer/app/containers/wallet/dialogs/WalletConnectDialogContainer.js

@@ -26,6 +26,7 @@ export default class WalletConnectDialogContainer extends Component<Props> {
     const { hardwareWallets, wallets, app } = stores;
     const { hwDeviceStatus, transportDevice } = hardwareWallets;
     const { createHardwareWalletRequest } = wallets;
+
     return (
       <WalletConnectDialog
         isSubmitting={createHardwareWalletRequest.isExecuting}

source/renderer/app/i18n/locales/defaultMessages.json

@@ -12770,55 +12770,97 @@
         "description": "Title \"Connect a hardware wallet device\" in the connect wallet dialog.",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 44
         },
         "file": "source/renderer/app/components/wallet/WalletConnectDialog.js",
         "id": "wallet.connect.dialog.title",
         "start": {
           "column": 15,
-          "line": 32
+          "line": 39
         }
       },
       {
         "defaultMessage": "!!!Cancel",
         "description": "Label for the \"Cancel\" button in the connect wallet dialog",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 49
         },
         "file": "source/renderer/app/components/wallet/WalletConnectDialog.js",
         "id": "wallet.connect.dialog.button.cancel",
         "start": {
           "column": 16,
-          "line": 38
+          "line": 45
         }
       },
       {
         "defaultMessage": "!!!<p>Daedalus currently supports Ledger Nano S, Ledger Nano X, and Trezor Model T hardware wallet devices.</p><p>If you are <b>pairing your device with Daedalus for the first time</b>, please follow the instructions below.</p><p>If you have <b>already paired your device with Daedalus</b>, you don’t need to repeat this step. Just connect your device when you need to confirm a transaction.</p>",
         "description": "Follow instructions label",
         "end": {
           "column": 3,
-          "line": 48
+          "line": 55
         },
         "file": "source/renderer/app/components/wallet/WalletConnectDialog.js",
         "id": "wallet.connect.dialog.instructions",
         "start": {
           "column": 16,
-          "line": 43
+          "line": 50
         }
       },
       {
         "defaultMessage": "!!!<p><b>Daedalus currently supports only Trezor Model T hardware wallet devices.</b></p><p>If you are <b>pairing your device with Daedalus for the first time</b>, please follow the instructions below.</p><p>If you have <b>already paired your device with Daedalus</b>, you don’t need to repeat this step. Just connect your device when you need to confirm a transaction.</p>",
         "description": "Follow instructions label",
         "end": {
           "column": 3,
-          "line": 54
+          "line": 61
         },
         "file": "source/renderer/app/components/wallet/WalletConnectDialog.js",
         "id": "wallet.connect.dialog.instructionsTrezorOnly",
         "start": {
           "column": 26,
-          "line": 49
+          "line": 56
+        }
+      },
+      {
+        "defaultMessage": "!!!If you are experiencing issues pairing your hardware wallet device, please {supportLink}",
+        "description": "Connecting issue support description",
+        "end": {
+          "column": 3,
+          "line": 67
+        },
+        "file": "source/renderer/app/components/wallet/WalletConnectDialog.js",
+        "id": "wallet.connect.dialog.connectingIssueSupportLabel",
+        "start": {
+          "column": 31,
+          "line": 62
+        }
+      },
+      {
+        "defaultMessage": "!!!read the instructions.",
+        "description": "Connecting issue support link",
+        "end": {
+          "column": 3,
+          "line": 72
+        },
+        "file": "source/renderer/app/components/wallet/WalletConnectDialog.js",
+        "id": "wallet.connect.dialog.connectingIssueSupportLink",
+        "start": {
+          "column": 30,
+          "line": 68
+        }
+      },
+      {
+        "defaultMessage": "https://support.ledger.com/hc/en-us/articles/115005165269",
+        "description": "Link to support article",
+        "end": {
+          "column": 3,
+          "line": 77
+        },
+        "file": "source/renderer/app/components/wallet/WalletConnectDialog.js",
+        "id": "wallet.connect.dialog.connectingIssueSupportLinkUrl",
+        "start": {
+          "column": 33,
+          "line": 73
         }
       }
     ],

source/renderer/app/i18n/locales/en-US.json

@@ -649,6 +649,9 @@
   "wallet.byron.notification.moveFundsDescription.line2.link.label": "brand new wallet",
   "wallet.byron.notification.moveFundsTitle": "Move funds from \"{activeWalletName}\"",
   "wallet.connect.dialog.button.cancel": "Cancel",
+  "wallet.connect.dialog.connectingIssueSupportLabel": "If you are experiencing issues pairing your hardware wallet device, please {supportLink}.",
+  "wallet.connect.dialog.connectingIssueSupportLink": "read the instructions",
+  "wallet.connect.dialog.connectingIssueSupportLinkUrl": "https://iohk.zendesk.com/hc/en-us/articles/900004722083-How-to-use-Ledger-and-Trezor-HW-with-Daedalus",
   "wallet.connect.dialog.instructions": "<p>Daedalus supports Ledger Nano S, Ledger Nano X, and Trezor Model T hardware wallet devices.</p><p>If you are <b>pairing your device with Daedalus for the first time</b>, please follow the instructions below.</p><p>If you have <b>already paired your device with Daedalus</b>, you don’t need to repeat this step. Just connect your device when you need to confirm a transaction.</p>",
   "wallet.connect.dialog.instructionsTrezorOnly": "<p><b>Daedalus currently supports only Trezor Model T hardware wallet devices.</b></p><p>If you are <b>pairing your device with Daedalus for the first time</b>, please follow the instructions below.</p><p>If you have <b>already paired your device with Daedalus</b>, you don’t need to repeat this step. Just connect your device when you need to confirm a transaction.</p>",
   "wallet.connect.dialog.title": "Pair a hardware wallet device",

source/renderer/app/i18n/locales/ja-JP.json

@@ -649,6 +649,9 @@
   "wallet.byron.notification.moveFundsDescription.line2.link.label": "ウォレットを新規作成する",
   "wallet.byron.notification.moveFundsTitle": "「{activeWalletName}」の資金を移してください",
   "wallet.connect.dialog.button.cancel": "キャンセル",
+  "wallet.connect.dialog.connectingIssueSupportLabel": "ハードウェアウォレットデバイスのペアリングで問題が生じた場合は、{supportLink}してください。",
+  "wallet.connect.dialog.connectingIssueSupportLink": "ガイドを参照",
+  "wallet.connect.dialog.connectingIssueSupportLinkUrl": "https://iohk.zendesk.com/hc/ja/articles/900004722083-How-to-use-Ledger-and-Trezor-HW-with-Daedalus",
   "wallet.connect.dialog.instructions": "<p>DaedalusはLedger Nano S、Ledger Nano X、Trezor Model Tハードウェアウォレットデバイスをサポートしています。</p><p><b>デバイスを初めてDaedalusにペアリングする場合</b>は、以下の指示に従ってください。</p><p><b>Daedalusとペアリング済みであるデバイスの場合</b>には、この手順を繰り返す必要はありません。トランザクションを確認する必要があるときに、デバイスを接続してください。</p>",
   "wallet.connect.dialog.instructionsTrezorOnly": "<p><b>Daedalusが現在サポートするハードウェアウォレットデバイスはTrezor Model Tのみです。</b></p><p><b>デバイスを初めてDaedalusにペアリングする場合</b>は、以下の指示に従ってください。</p><p><b>Daedalusとペアリング済みであるデバイスの場合</b>には、この手順を繰り返す必要はありません。トランザクションを確認する必要があるときに、デバイスを接続してください。</p>",
   "wallet.connect.dialog.title": "ハードウェアウォレットを接続する",