[DDW-500] Fix tooltip Blank item styling

input-output-hk · Feb 26, 2021 · 49a3bb6 · 49a3bb6
2 parents 8b2bc5e + 460d893
commit 49a3bb6
Show file tree

Hide file tree

Showing 9 changed files with 284 additions and 23 deletions.
diff --git a/source/renderer/app/api/api.js b/source/renderer/app/api/api.js
@@ -2682,7 +2682,7 @@ const _createAssetFromServerData = action(
       metadata,
     } = data;
 
-    // TODO: remove once testing is done
+    // @TOKEN TODO: remove once testing is done
     const DUMMY_TOKEN_METADATA = {
       '6e8dc8b1f3591e8febcc47c51e9f2667c413a497aebd54cf38979086736164636f696e': {
         policyId: '6e8dc8b1f3591e8febcc47c51e9f2667c413a497aebd54cf38979086',
@@ -2714,14 +2714,16 @@ const _createAssetFromServerData = action(
     const hasDummyTokenMetadata = has(DUMMY_TOKEN_METADATA, [
       policyId + assetName,
     ]);
-
+    window.useDummyTokenMetadata =
+      window.useDummyTokenMetadata === undefined
+        ? environment.isDev
+        : window.useDummyTokenMetadata;
     return new Asset({
       policyId,
       assetName,
       fingerprint,
       metadata:
-        (environment.isDev || window.useDummyTokenMetadata) &&
-        hasDummyTokenMetadata
+        window.useDummyTokenMetadata && hasDummyTokenMetadata
           ? DUMMY_TOKEN_METADATA[policyId + assetName].metadata
           : metadata,
     });

diff --git a/source/renderer/app/components/wallet/WalletAssetsSendConfirmationDialog.js b/source/renderer/app/components/wallet/WalletAssetsSendConfirmationDialog.js
@@ -27,6 +27,7 @@ import AssetToken from '../widgets/AssetToken';
 import {
   formattedWalletAmount,
   formattedTokenWalletAmount,
+  getMultiplierFromDecimalPlaces,
 } from '../../utils/formatters';
 
 export const messages = defineMessages({
@@ -277,8 +278,10 @@ export default class WalletAssetsSendConfirmationDialog extends Component<
 
   getAssetFormattedAmount = (asset: WalletSummaryAsset, index: number) => {
     const strAmount = this.getAssetAmount(index);
-    const assetAmount = new BigNumber(strAmount);
     const { metadata } = asset;
+    const decimals = get(metadata, 'unit.decimals');
+    const assetMultiplier = getMultiplierFromDecimalPlaces(decimals);
+    const assetAmount = new BigNumber(strAmount).multipliedBy(assetMultiplier);
     return formattedTokenWalletAmount(assetAmount, metadata);
   };
 

diff --git a/source/renderer/app/components/wallet/transactions/Transaction.js b/source/renderer/app/components/wallet/transactions/Transaction.js
@@ -406,14 +406,18 @@ export default class Transaction extends Component<Props, State> {
   };
 
   get hasAssets(): boolean {
-    const { data, hasAssetsEnabled } = this.props;
-    return hasAssetsEnabled && data.assets.length > 0;
+    return !!this.assetsList.length;
   }
 
   get assetsList(): Array<WalletTransactionAsset> {
-    const { assetsDetails, data, isInternalAddress } = this.props;
+    const {
+      assetsDetails,
+      data,
+      isInternalAddress,
+      hasAssetsEnabled,
+    } = this.props;
 
-    if (!this.hasAssets) {
+    if (!hasAssetsEnabled) {
       return [];
     }
 

diff --git a/source/renderer/app/components/widgets/AssetToken.scss b/source/renderer/app/components/widgets/AssetToken.scss
@@ -114,6 +114,8 @@
     }
 
     .blankValue {
+      font-size: 12px;
+      line-height: 16px;
       opacity: 0.4;
     }
 

diff --git a/source/renderer/app/utils/formatters.js b/source/renderer/app/utils/formatters.js
@@ -47,7 +47,8 @@ export const formattedTokenWalletAmount = (
 ): string => {
   const { acronym, unit } = metadata || {};
   const { decimals } = unit || {};
-  let formattedAmount = amount.toFormat(decimals);
+  const divider = parseInt(getMultiplierFromDecimalPlaces(decimals), 10);
+  let formattedAmount = amount.dividedBy(divider).toFormat(decimals);
   if (acronym) {
     formattedAmount += ` ${acronym}`;
   }
@@ -228,3 +229,6 @@ export const formattedSize = (size: string): string => {
 
   return formattedResult;
 };
+
+export const getMultiplierFromDecimalPlaces = (decimalPlaces: number) =>
+  '1'.padEnd(decimalPlaces + 1, '0');
diff --git a/storybook/stories/wallets/index.js b/storybook/stories/wallets/index.js
@@ -4,8 +4,10 @@
 import './summary/WalletSummary.stories';
 import './send/WalletSend.stories';
 import './receive/WalletReceive.stories';
-import './transactions/WalletTransactions.stories';
+import './transactions/TransactionsList.stories';
+import './transactions/Transaction.stories';
 import './transactions/TransactionMetadata.stories';
+import './transactions/Utxo.stories';
 import './settings/WalletSettings.stories';
 import './addWallet/AddWallet.stories';
 import './import/WalletImportFile.stories';

diff --git a/storybook/stories/wallets/send/WalletSend.stories.js b/storybook/stories/wallets/send/WalletSend.stories.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, number } from '@storybook/addon-knobs';
 import BigNumber from 'bignumber.js';
 import {
   generateHash,
@@ -19,7 +19,7 @@ import { HwDeviceStatuses } from '../../../../source/renderer/app/domains/Wallet
 // Screens
 import WalletAssetsSendForm from '../../../../source/renderer/app/components/wallet/WalletAssetsSendForm';
 import WalletAssetsSendConfirmationDialog from '../../../../source/renderer/app/components/wallet/WalletAssetsSendConfirmationDialog';
-import { DECIMAL_PLACES_IN_ADA } from '../../../../source/renderer/app/config/numbersConfig';
+import WalletSendConfirmationDialog from '../../../../source/renderer/app/components/wallet/WalletSendConfirmationDialog';
 import { formattedAmountToNaturalUnits } from '../../../../source/renderer/app/utils/formatters';
 
 const allAssets = [
@@ -162,6 +162,10 @@ const confirmationAssets = assets.total.map((assetTotal) => {
   };
 });
 
+const confirmationAssetsAmounts = confirmationAssets.map(
+  (asset) => `${asset.quantity}`
+);
+
 const sendFormAssetData = assets.total.map((assetTotal) => {
   const assetData = allAssets.find(
     (item) => item.policyId === assetTotal.policyId
@@ -203,7 +207,7 @@ storiesOf('Wallets|Send', module)
       calculateTransactionFee={promise(true)}
       walletAmount={new BigNumber(123)}
       assets={sendFormAssetData}
-      addressValidator={action('addressValidator')}
+      addressValidator={() => true}
       openDialogAction={action('openDialogAction')}
       isDialogOpen={() => boolean('isDialogOpen', false)}
       isRestoreActive={boolean('isRestoreActive', false)}
@@ -225,7 +229,7 @@ storiesOf('Wallets|Send', module)
       validateAmount={promise(true)}
       calculateTransactionFee={promise(true)}
       assets={sendFormAssetData}
-      addressValidator={action('addressValidator')}
+      addressValidator={() => true}
       openDialogAction={action('openDialogAction')}
       isDialogOpen={() => boolean('isDialogOpen', false)}
       isRestoreActive={boolean('isRestoreActive', false)}
@@ -248,7 +252,7 @@ storiesOf('Wallets|Send', module)
       validateAmount={promise(true)}
       calculateTransactionFee={promise(true)}
       assets={sendFormAssetData}
-      addressValidator={action('addressValidator')}
+      addressValidator={() => true}
       openDialogAction={action('openDialogAction')}
       isDialogOpen={() => boolean('isDialogOpen', false)}
       isRestoreActive={boolean('isRestoreActive', false)}
@@ -271,7 +275,7 @@ storiesOf('Wallets|Send', module)
       validateAmount={promise(true)}
       calculateTransactionFee={promise(true)}
       assets={sendFormAssetData}
-      addressValidator={action('addressValidator')}
+      addressValidator={() => true}
       openDialogAction={action('openDialogAction')}
       isDialogOpen={() => boolean('isDialogOpen', false)}
       isRestoreActive={boolean('isRestoreActive', false)}
@@ -292,8 +296,11 @@ storiesOf('Wallets|Send', module)
       currencyMaxIntegerDigits={11}
       currentNumberFormat={NUMBER_OPTIONS[0].value}
       validateAmount={promise(true)}
-      calculateTransactionFee={promise(true)}
-      addressValidator={action('addressValidator')}
+      calculateTransactionFee={promise({
+        fee: new BigNumber(number('fee', 1)),
+        minimumAda: new BigNumber(number('minimumAda', 1)),
+      })}
+      addressValidator={() => true}
       openDialogAction={action('openDialogAction')}
       isDialogOpen={() => boolean('isDialogOpen', false)}
       isRestoreActive={boolean('isRestoreActive', false)}
@@ -312,11 +319,13 @@ storiesOf('Wallets|Send', module)
     <div>
       <WalletAssetsSendConfirmationDialog
         currencyUnit="Ada"
-        amount={new BigNumber(100100).toFormat(DECIMAL_PLACES_IN_ADA)}
+        amount="20.000000"
+        totalAmount="21.000000"
         sender={generateWallet('Wallet name', '45119903750165', assets).id}
         receiver={generateHash()}
         assets={confirmationAssets}
-        transactionFee={new BigNumber(1).toFormat(DECIMAL_PLACES_IN_ADA)}
+        assetsAmounts={confirmationAssetsAmounts}
+        transactionFee="1.000000"
         amountToNaturalUnits={formattedAmountToNaturalUnits}
         onSubmit={() => null}
         isSubmitting={false}
@@ -331,4 +340,27 @@ storiesOf('Wallets|Send', module)
         onCopyAssetItem={() => {}}
       />
     </div>
+  ))
+  .add('Wallet Send Confirmation Dialog With No Assets', () => (
+    <div>
+      <WalletSendConfirmationDialog
+        amount="20.000000"
+        totalAmount="21.000000"
+        currencyUnit="ADA"
+        sender={generateWallet('Wallet name', '45119903750165', assets).id}
+        receiver={generateHash()}
+        transactionFee="1.000000"
+        amountToNaturalUnits={formattedAmountToNaturalUnits}
+        onSubmit={() => null}
+        isSubmitting={false}
+        error={null}
+        isFlight={false}
+        onCancel={() => null}
+        onExternalLinkClick={() => null}
+        hwDeviceStatus={HwDeviceStatuses.CONNECTING}
+        isHardwareWallet={false}
+        onInitiateTransaction={() => null}
+        walletName={generateWallet('TrueUSD', '15119903750165', assets).name}
+      />
+    </div>
   ));