Merge pull request #1317 from input-output-hk/feature/ddw-581-check-i…

…f-we-can-replace-ada-symbol-images-with-unicode-character

[DDW-581] Replace ada symbol images with unicode character

CHANGELOG.md

@@ -1,6 +1,12 @@
 Changelog
 =========
 
+## vNext
+
+### Features
+
+- Replaced ada symbol images with unicode character ([PR 1317](https://github.com/input-output-hk/daedalus/pull/1317))
+
 ## 0.13.0
 
 ### Features

features/step_definitions/wallets-steps.js

@@ -434,14 +434,14 @@ Then(/^the latest transaction should show:$/, async function (table) {
   await this.client.waitForVisible('.Transaction_title');
   let transactionTitles = await this.client.getText('.Transaction_title');
   transactionTitles = [].concat(transactionTitles);
-  const expectedTransactionTitle = await this.intl(expectedData.title, { currency: 'ADA' });
+  const expectedTransactionTitle = await this.intl(expectedData.title, { currency: 'Ada' });
   expect(expectedTransactionTitle).to.equal(transactionTitles[0]);
   let transactionAmounts = await this.client.getText('.Transaction_amount');
   transactionAmounts = [].concat(transactionAmounts);
   // Transaction amount includes transaction fees so we need to
   // substract them in order to get a match with expectedData.amountWithoutFees.
   // NOTE: we use "add()" as this is outgoing transaction and amount is a negative value!
-  const transactionAmount = new BigNumber(transactionAmounts[0]);
+  const transactionAmount = new BigNumber(transactionAmounts[0].split(' ').shift());
   const transactionAmountWithoutFees = transactionAmount.add(this.fees).toFormat(DECIMAL_PLACES_IN_ADA);
   expect(expectedData.amountWithoutFees).to.equal(transactionAmountWithoutFees);
 });
@@ -453,7 +453,7 @@ Then(/^the balance of "([^"]*)" wallet should be:$/, { timeout: 60000 }, async f
   const receiverWallet = getWalletByName.call(this, walletName);
   return this.client.waitUntil(async () => {
     const receiverWalletBalance = await this.client.getText(`.SidebarWalletsMenu_wallets .Wallet_${receiverWallet.id} .SidebarWalletMenuItem_info`);
-    return receiverWalletBalance === `${expectedData.balance} ADA`;
+    return receiverWalletBalance === `${expectedData.balance} ₳`;
   }, 60000);
 });
 

source/renderer/app/components/wallet/ada-redemption/AdaRedemptionSuccessOverlay.js

@@ -44,7 +44,7 @@ export default class AdaRedemptionSuccessOverlay extends Component<Props> {
         <SVGInline svg={successIcon} className={styles.icon} />
         <div className={styles.text}>
           <h1 className={styles.headline}>{intl.formatMessage(messages.headline)}</h1>
-          <div className={styles.amount}>{amount} ADA</div>
+          <div className={styles.amount}>{amount} <span>&#8371;</span></div>
           <Button
             className={styles.confirmButton}
             label={intl.formatMessage(messages.confirmButton)}

source/renderer/app/components/wallet/ada-redemption/AdaRedemptionSuccessOverlay.scss

@@ -38,6 +38,10 @@
   .amount {
     font-family: var(--font-medium);
     font-size: 28px;
+
+    span {
+      font-family: var(--font-light);
+    }
   }
 
   .confirmButton {

source/renderer/app/components/wallet/summary/WalletSummary.js

@@ -5,7 +5,6 @@ import { defineMessages, intlShape } from 'react-intl';
 import SVGInline from 'react-svg-inline';
 import classnames from 'classnames';
 import adaSymbolBig from '../../../assets/images/ada-symbol-big-dark.inline.svg';
-import adaSymbolSmallest from '../../../assets/images/ada-symbol-smallest-dark.inline.svg';
 import BorderedBox from '../../widgets/BorderedBox';
 import { DECIMAL_PLACES_IN_ADA } from '../../../config/numbersConfig';
 import type { UnconfirmedAmount } from '../../../types/unconfirmedAmountType';
@@ -77,16 +76,17 @@ export default class WalletSummary extends Component<Props> {
                 <div className={styles.pendingConfirmation}>
                   {`${intl.formatMessage(messages.pendingIncomingConfirmationLabel)}`}
                   : {pendingAmount.incoming.toFormat(DECIMAL_PLACES_IN_ADA)}
-                  <SVGInline svg={adaSymbolSmallest} className={styles.currencySymbolSmallest} />
+                  &nbsp;&#8371;
                 </div>
               )}
               {pendingAmount.outgoing.greaterThan(0) && (
                 <div className={styles.pendingConfirmation}>
                   {`${intl.formatMessage(messages.pendingOutgoingConfirmationLabel)}`}
                   : {pendingAmount.outgoing.toFormat(DECIMAL_PLACES_IN_ADA)}
-                  <SVGInline svg={adaSymbolSmallest} className={styles.currencySymbolSmallest} />
+                  &nbsp;&#8371;
                 </div>
               )}
+
             </div>
           ) : null}
 

source/renderer/app/components/wallet/summary/WalletSummary.scss

@@ -52,17 +52,6 @@
 
 .pendingConfirmation {
   @extend %smallText;
-  & > .currencySymbolSmallest {
-    display: inline-block;
-    margin-left: 1px;
-    & > svg {
-      height: 10px;
-      width: 9px;
-      & > g > g {
-        stroke: var(--theme-icon-ada-summary-wallet-pending-confirmation-symbol-color);
-      }
-    }
-  }
 }
 
 .numberOfTransactions {

source/renderer/app/components/wallet/transactions/Transaction.js

@@ -6,7 +6,6 @@ import SVGInline from 'react-svg-inline';
 import classNames from 'classnames';
 import styles from './Transaction.scss';
 import TransactionTypeIcon from './TransactionTypeIcon.js';
-import adaSymbol from '../../../assets/images/ada-symbol.inline.svg';
 import arrow from '../../../assets/images/collapse-arrow.inline.svg';
 import {
   transactionStates,
@@ -211,7 +210,6 @@ export default class Transaction extends Component<Props> {
 
     const status = intl.formatMessage(assuranceLevelTranslations[assuranceLevel]);
     const currency = intl.formatMessage(globalMessages.currency);
-    const symbol = adaSymbol;
 
     const transactionStateTag = () => {
       if (isRestoreActive) return;
@@ -253,7 +251,7 @@ export default class Transaction extends Component<Props> {
                   // hide currency (we are showing symbol instead)
                   formattedWalletAmount(data.amount, false)
                 }
-                <SVGInline svg={symbol} className={styles.currencySymbol} />
+                <span>&nbsp;&#8371;</span>
               </div>
             </div>
 

source/renderer/app/components/wallet/transactions/Transaction.scss

@@ -84,6 +84,10 @@
   letter-spacing: 1px;
   margin-left: auto;
   user-select: text;
+
+  span {
+    font-family: var(--font-light);
+  }
 }
 
 .pendingLabel, .failedLabel, .low, .medium, .high {

source/renderer/app/i18n/global-messages.js

@@ -118,7 +118,7 @@ export default defineMessages({
   },
   unitAda: {
     id: 'global.unit.ada',
-    defaultMessage: '!!!ADA',
+    defaultMessage: '!!!\u20B3',
     description: 'Name for "ADA" unit.'
   },
   recoveryPhraseDialogTitle: {
@@ -148,7 +148,7 @@ export default defineMessages({
   },
   currency: {
     id: 'environment.currency.ada',
-    defaultMessage: '!!!Ada',
+    defaultMessage: '!!!ADA',
     description: 'Name for "Ada" unit.'
   },
   apiName: {

source/renderer/app/i18n/locales/de-DE.json

@@ -38,7 +38,7 @@
   "cardano.node.update.notification.titleWithVersion": "!!!Cardano-Core update v{version} is available",
   "cardano.node.update.notification.titleWithoutVersion": "!!!Cardano-Core update is available",
   "environment.apiName.cardano": "!!!Cardano",
-  "environment.currency.ada": "!!!Ada",
+  "environment.currency.ada": "Ada",
   "global.assuranceLevel.normal": "!!!Normal",
   "global.assuranceLevel.strict": "!!!Strict",
   "global.dialog.button.continue": "!!!Continue",