[DDW-178] Translation copy

input-output-hk · Jul 3, 2020 · 35dfc2d · 35dfc2d
1 parent 4277819
commit 35dfc2d
Show file tree

Hide file tree

Showing 10 changed files with 697 additions and 29 deletions.
diff --git a/source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.js b/source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.js
@@ -8,12 +8,13 @@ import { Autocomplete } from 'react-polymorph/lib/components/Autocomplete';
 import { AutocompleteSkin } from 'react-polymorph/lib/skins/simple/AutocompleteSkin';
 import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
 import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
-import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-polymorph/lib/components/Link';
+import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
+import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
 import Wallet from '../../../domains/Wallet';
 import DialogCloseButton from '../../widgets/DialogCloseButton';
 import WalletsDropdown from '../../widgets/forms/WalletsDropdown';
 import Dialog from '../../widgets/Dialog';
-// @REDEEM TODO - color variable
 import styles from './Step1ConfigurationDialog.scss';
 import redeemDialogOverride from './RedeemDialogOverride.scss';
 import ReactToolboxMobxForm, {
@@ -33,9 +34,21 @@ const messages = defineMessages({
   description: {
     id: 'staking.redeemItnRewards.step1.description',
     defaultMessage:
-      '!!!If you participated in the Incentivized Testnet and earned rewards by running a stake pool or delegating your stake, you can use this feature to redeem your rewards as ada on the Cardano mainnet. You will need the wallet recovery phrase for the Incentivized Testnet wallet used to earn rewards and an existing mainnet wallet in Daedalus to which the rewards will be transferred. This wallet will also be used to pay any applicable transaction fees.',
+      '!!!If you participated in the { itnLink } and earned rewards by running a stake pool or delegating your stake, you can use this feature to redeem your rewards as ada on the Cardano mainnet. You will need the wallet recovery phrase for the Incentivized Testnet wallet used to earn rewards and an existing mainnet wallet in Daedalus to which the rewards will be transferred. This wallet will also be used to pay any applicable transaction fees.',
     description: 'description for Redeem Incentivized Testnet - Step 1',
   },
+  descriptionItnLinkLabel: {
+    id: 'staking.redeemItnRewards.step1.descriptionItnLinkLabel',
+    defaultMessage: '!!!Incentivized Testnet',
+    description:
+      'descriptionItnLinkLabel for Redeem Incentivized Testnet - Step 1',
+  },
+  descriptionItnLinkUrl: {
+    id: 'staking.redeemItnRewards.step1.descriptionItnLinkUrl',
+    defaultMessage: '!!!https://staking.cardano.org/',
+    description:
+      'descriptionItnLinkUrl for Redeem Incentivized Testnet - Step 1',
+  },
   recoveryPhraseLabel: {
     id: 'staking.redeemItnRewards.step1.recoveryPhraseLabel',
     defaultMessage:
@@ -116,7 +129,7 @@ type Props = {
   onClose: Function,
   onContinue: Function,
   onSelectWallet: Function,
-  onLearnMoreClick: Function,
+  openExternalLink: Function,
   wallet: ?Wallet,
   suggestedMnemonics: Array<string>,
   wallets: Array<Wallet>,
@@ -248,7 +261,7 @@ export default class Step1ConfigurationDialog extends Component<Props> {
       onSelectWallet,
       wallet,
       suggestedMnemonics,
-      onLearnMoreClick,
+      openExternalLink,
       wallets,
       error,
     } = this.props;
@@ -275,7 +288,7 @@ export default class Step1ConfigurationDialog extends Component<Props> {
         },
         {
           onClick: (event: MouseEvent) =>
-            onLearnMoreClick(
+            openExternalLink(
               intl.formatMessage(messages.learnMoreLinkUrl, event)
             ),
           label: intl.formatMessage(messages.learnMoreLinkLabel),
@@ -284,6 +297,19 @@ export default class Step1ConfigurationDialog extends Component<Props> {
       ],
     };
 
+    const itnLink = (
+      <Link
+        className={styles.itnLink}
+        onClick={(event: MouseEvent) =>
+          openExternalLink(
+            intl.formatMessage(messages.descriptionItnLinkUrl, event)
+          )
+        }
+        label={intl.formatMessage(messages.descriptionItnLinkLabel)}
+        skin={LinkSkin}
+      />
+    );
+
     return (
       <>
         <DialogCloseButton
@@ -300,7 +326,12 @@ export default class Step1ConfigurationDialog extends Component<Props> {
         >
           <div className={styles.component}>
             <p className={styles.description}>
-              {intl.formatMessage(messages.description)}
+              <FormattedMessage
+                {...messages.description}
+                values={{
+                  itnLink,
+                }}
+              />
             </p>
             <Autocomplete
               {...recoveryPhraseField.bind()}

diff --git a/source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.scss b/source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.scss
@@ -9,6 +9,13 @@
     margin-bottom: 20px;
     text-align: center;
     width: 620px;
+    .itnLink {
+      @extend .description;
+      border-bottom: 1px solid var(--theme-staking-redeemItnRewards-text-color);
+      &:after {
+        background: var(--theme-staking-redeemItnRewards-text-color);
+      }
+    }
   }
   .recoveryPhrase {
     margin-bottom: 20px;

diff --git a/source/renderer/app/components/staking/redeem-itn-rewards/Step3FailureDialog.js b/source/renderer/app/components/staking/redeem-itn-rewards/Step3FailureDialog.js
@@ -10,12 +10,24 @@ import redeemDialogOverride from './RedeemDialogOverride.scss';
 import sadWalletImage from '../../../assets/images/sad-wallet.inline.svg';
 
 const messages = defineMessages({
-  description: {
-    id: 'staking.redeemItnRewards.step3.failure.description',
+  description1NoRewards: {
+    id: 'staking.redeemItnRewards.step3.failure.description1NoRewards',
     defaultMessage:
       '!!!No rewards were found in your Incentivized Testnet Rewards wallet. Please make sure that you have entered the correct wallet recovery phrase.',
     description: 'description for Redeem Incentivized Testnet - Step 3',
   },
+  description2InvalidWallet: {
+    id: 'staking.redeemItnRewards.step3.failure.description2InvalidWallet',
+    defaultMessage:
+      '!!!Rewards from the wallet corresponding to the recovery phrase you have provided have already been redeemed.',
+    description: 'description for Redeem Incentivized Testnet - Step 3',
+  },
+  description3Generic: {
+    id: 'staking.redeemItnRewards.step3.failure.description3Generic',
+    defaultMessage:
+      '!!!No rewards were found in your Incentivized Testnet Rewards wallet. Please make sure that you have entered the correct wallet recovery phrase and that rewards have not already been redeemed.',
+    description: 'description for Redeem Incentivized Testnet - Step 3',
+  },
   backButtonLabel: {
     id: 'staking.redeemItnRewards.step3.failure.backButtonLabel',
     defaultMessage: '!!!Back',
@@ -32,6 +44,8 @@ const messages = defineMessages({
 type Props = {
   onClose: Function,
   onBack: Function,
+  // @REDEEM TODO: Remove when the API endpoint is implemented
+  stakingFailure: number,
 };
 
 @observer
@@ -42,7 +56,7 @@ export default class Step3FailureDialog extends Component<Props> {
 
   render() {
     const { intl } = this.context;
-    const { onClose, onBack } = this.props;
+    const { onClose, onBack, stakingFailure } = this.props;
 
     const actions = {
       direction: 'column',
@@ -61,6 +75,11 @@ export default class Step3FailureDialog extends Component<Props> {
       ],
     };
 
+    // #REDEEM TODO: remove when the API is ready
+    let description = messages.description1NoRewards;
+    if (stakingFailure === 2) description = messages.description2InvalidWallet;
+    if (stakingFailure === 3) description = messages.description3Generic;
+
     return (
       <>
         <DialogCloseButton
@@ -75,7 +94,7 @@ export default class Step3FailureDialog extends Component<Props> {
         >
           <SVGInline svg={sadWalletImage} className={styles.sadWalletImage} />
           <div className={styles.description}>
-            {intl.formatMessage(messages.description)}
+            {intl.formatMessage(description)}
           </div>
         </Dialog>
       </>

diff --git a/...renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step1ConfigurationContainer.js b/...renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step1ConfigurationContainer.js
@@ -34,7 +34,7 @@ export default class Step1ConfigurationContainer extends Component<Props> {
         suggestedMnemonics={validWords}
         wallet={redeemWallet}
         wallets={allWallets}
-        onLearnMoreClick={openExternalLink}
+        openExternalLink={openExternalLink}
       />
     );
   }

diff --git a/source/renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step3ResultContainer.js b/source/renderer/app/containers/staking/dialogs/redeem-itn-rewards/Step3ResultContainer.js
@@ -22,6 +22,7 @@ export default class Step3ResultContainer extends Component<Props> {
       transactionFees,
       finalTotal,
       stakingSuccess,
+      stakingFailure,
     } = stores.staking;
     const { onResultContinue } = actions.staking;
     if (!redeemWallet) throw new Error('Redeem wallet required');
@@ -39,6 +40,12 @@ export default class Step3ResultContainer extends Component<Props> {
         />
       );
     }
-    return <Step3FailureDialog onClose={onClose} onBack={onBack} />;
+    return (
+      <Step3FailureDialog
+        onClose={onClose}
+        onBack={onBack}
+        stakingFailure={stakingFailure}
+      />
+    );
   }
 }