[DDW-861] Implement new token picker (#2787)

Co-authored-by: Renan Ferreira <renan.ferreira@iohk.io>
Co-authored-by: Daniel Main <daniel.main.cernhoff@icloud.com>

Author: 3 people

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 ### Features
 
+- Implemented new token picker ([PR 2787](https://github.com/input-output-hk/daedalus/pull/2787))
+
+## 4.8.0-FC1
+
 - Added dynamic RTS flags setting ([PR 2758](https://github.com/input-output-hk/daedalus/pull/2758/files))
 - Updated messages about Cardano node sync on the initial screen ([PR 2827](https://github.com/input-output-hk/daedalus/pull/2827)) ([PR 2831](https://github.com/input-output-hk/daedalus/pull/2831))
 

source/renderer/app/api/api.js

@@ -94,6 +94,7 @@ import { cardanoFaultInjectionChannel } from '../ipc/cardano.ipc';
 import patchAdaApi from './utils/patchAdaApi';
 import { getLegacyWalletId, utcStringToDate } from './utils';
 import { logger } from '../utils/logging';
+import { hexToString } from '../utils/strings';
 import {
   unscrambleMnemonics,
   scrambleMnemonics,
@@ -2739,6 +2740,7 @@ const _createWalletFromServerData = action(
           uniqueId,
           policyId,
           assetName,
+          assetNameASCII: hexToString(assetName),
           quantity: new BigNumber(quantity.toString()),
         };
       }),
@@ -2749,6 +2751,7 @@ const _createWalletFromServerData = action(
           uniqueId,
           policyId,
           assetName,
+          assetNameASCII: hexToString(assetName),
           quantity: new BigNumber(quantity.toString()),
         };
       }),

source/renderer/app/api/assets/types.js

@@ -51,6 +51,7 @@ export type ApiTokens = Array<ApiToken>;
 export type Token = {
   policyId: string,
   assetName: string,
+  assetNameASCII?: string,
   quantity: BigNumber,
   address?: ?string,
   uniqueId: string,

source/renderer/app/assets/images/remove.inline.svg

@@ -173,7 +173,7 @@ export default class Asset extends Component<Props, State> {
     const {
       asset,
       metadataNameChars,
-      small,
+      small = true,
       fullFingerprint,
       hasWarning,
       hasError,
@@ -182,9 +182,9 @@ export default class Asset extends Component<Props, State> {
     const { name } = metadata || {};
     const contentStyles = classnames([
       styles.pill,
-      small ? styles.small : null,
       hasError ? styles.error : null,
     ]);
+    const [startCharAmount, endCharAmoout] = small ? [9, 4] : [12, 12];
     let warningPopOverMessage;
     if (hasWarning) {
       warningPopOverMessage =
@@ -195,7 +195,9 @@ export default class Asset extends Component<Props, State> {
     return (
       <div className={contentStyles}>
         <div className={styles.fingerprint}>
-          {fullFingerprint ? fingerprint : ellipsis(fingerprint || '', 9, 4)}
+          {fullFingerprint
+            ? fingerprint
+            : ellipsis(fingerprint || '', startCharAmount, endCharAmoout)}
         </div>
         {name && (
           <div className={styles.metadataName}>
@@ -223,15 +225,13 @@ export default class Asset extends Component<Props, State> {
       asset,
       onCopyAssetParam,
       assetSettingsDialogWasOpened,
-      anyAssetWasHovered,
     } = this.props;
     const pillContent = this.renderPillContent();
     const popOverContent = (
       <AssetContent
         asset={asset}
         onCopyAssetParam={onCopyAssetParam}
         assetSettingsDialogWasOpened={assetSettingsDialogWasOpened}
-        anyAssetWasHovered={anyAssetWasHovered}
         className={styles.popOverContent}
         highlightFingerprint
       />

source/renderer/app/assets/images/search.inline.svg

@@ -30,7 +30,7 @@
     margin-left: 10px;
     max-height: 48px;
     overflow-y: auto;
-    width: calc(100% - 140px);
+    width: calc(100% - 100px);
 
     &:not(:first-of-type) {
       margin-top: 10px;

source/renderer/app/components/assets/Asset.js

@@ -166,7 +166,9 @@ export default class AssetSettingsDialog extends Component<Props, State> {
       <Dialog
         className={styles.component}
         title={intl.formatMessage(messages.title)}
-        subtitle={<Asset asset={asset} className={styles.assetToken} />}
+        subtitle={
+          <Asset asset={asset} small={false} className={styles.assetToken} />
+        }
         actions={actions}
         closeOnOverlayClick
         onClose={onCancel}

source/renderer/app/components/assets/AssetContent.scss

@@ -12,15 +12,14 @@
 
 .searchIcon {
   bottom: 12.5px;
+  color: var(--theme-staking-stake-pools-search-icon-color);
   left: 20px;
+  opacity: 0.3;
   position: absolute;
   z-index: 1;
 
   svg {
     width: 15px;
-    g > g {
-      fill: var(--theme-staking-stake-pools-search-icon-color);
-    }
   }
 }
 

source/renderer/app/components/assets/AssetSettingsDialog.js

@@ -38,6 +38,7 @@ import Asset from '../../domains/Asset';
 import type { HwDeviceStatus } from '../../domains/Wallet';
 import type { AssetToken, ApiTokens } from '../../api/assets/types';
 import { DiscreetWalletAmount } from '../../features/discreet-mode';
+import WalletTokenPicker from './tokens/wallet-token-picker/WalletTokenPicker';
 
 messages.fieldIsRequired = globalMessages.fieldIsRequired;
 
@@ -62,6 +63,8 @@ type Props = {
   onUnsetActiveAsset: Function,
   onExternalLinkClick: Function,
   isAddressFromSameWallet: boolean,
+  tokenFavorites: { [key: string]: boolean },
+  walletName: string,
 };
 
 type State = {
@@ -81,11 +84,11 @@ type State = {
   feeCalculationRequestQue: number,
   transactionFee: BigNumber,
   transactionFeeError: ?string | ?Node,
-  showRemoveAssetButton: { [uniqueId: string]: boolean },
   selectedAssetUniqueIds: Array<string>,
   isResetButtonDisabled: boolean,
   isReceiverAddressValid: boolean,
   isTransactionFeeCalculated: boolean,
+  isTokenPickerOpen: boolean,
 };
 
 @observer
@@ -100,11 +103,11 @@ export default class WalletSendForm extends Component<Props, State> {
     feeCalculationRequestQue: 0,
     transactionFee: new BigNumber(0),
     transactionFeeError: null,
-    showRemoveAssetButton: {},
     selectedAssetUniqueIds: [],
     isResetButtonDisabled: true,
     isReceiverAddressValid: false,
     isTransactionFeeCalculated: false,
+    isTokenPickerOpen: false,
   };
 
   // We need to track the fee calculation state in order to disable
@@ -226,7 +229,6 @@ export default class WalletSendForm extends Component<Props, State> {
 
     this.setState({
       minimumAda: new BigNumber(0),
-      showRemoveAssetButton: {},
       isResetButtonDisabled: true,
     });
   };
@@ -535,22 +537,6 @@ export default class WalletSendForm extends Component<Props, State> {
     }
   }
 
-  showRemoveAssetButton = (uniqueId: string) => {
-    const { showRemoveAssetButton } = this.state;
-    showRemoveAssetButton[uniqueId] = true;
-    this.setState({
-      showRemoveAssetButton,
-    });
-  };
-
-  hideRemoveAssetButton = (uniqueId: string) => {
-    const { showRemoveAssetButton } = this.state;
-    showRemoveAssetButton[uniqueId] = false;
-    this.setState({
-      showRemoveAssetButton,
-    });
-  };
-
   addAssetRow = (uniqueId: string) => {
     this.addAssetFields(uniqueId);
     this.updateFormFields(false, uniqueId);
@@ -686,7 +672,6 @@ export default class WalletSendForm extends Component<Props, State> {
       adaAmount: adaAmountField,
       receiver: receiverField,
       assetFields,
-      assetsDropdown,
     } = formFields.receiver;
 
     const assetsSeparatorBasicHeight = 140;
@@ -836,22 +821,12 @@ export default class WalletSendForm extends Component<Props, State> {
                       uniqueId={uniqueId}
                       index={index}
                       getAssetByUniqueId={this.getAssetByUniqueId}
-                      availableAssets={this.availableAssets}
                       assetFields={assetFields}
-                      assetsDropdown={assetsDropdown}
                       addFocusableField={this.addFocusableField}
-                      removeAssetButtonVisible={
-                        this.state.showRemoveAssetButton
-                      }
-                      showRemoveAssetButton={this.showRemoveAssetButton}
-                      hideRemoveAssetButton={this.hideRemoveAssetButton}
                       currentNumberFormat={this.getCurrentNumberFormat()}
                       removeAssetRow={this.removeAssetRow}
                       handleSubmitOnEnter={this.handleSubmitOnEnter}
                       clearAssetFieldValue={this.clearAssetFieldValue}
-                      onChangeAsset={(newUniqueId) =>
-                        this.onChangeAsset(uniqueId, newUniqueId)
-                      }
                       autoFocus={this._isAutoFocusEnabled}
                     />
                   )
@@ -862,7 +837,7 @@ export default class WalletSendForm extends Component<Props, State> {
                 label={intl.formatMessage(messages.addAssetButtonLabel)}
                 disabled={!this.hasAvailableAssets}
                 onClick={() => {
-                  this.addAssetRow(this.availableAssets[0].uniqueId);
+                  this.setState({ isTokenPickerOpen: true });
                 }}
               />
             </div>
@@ -881,14 +856,19 @@ export default class WalletSendForm extends Component<Props, State> {
       transactionFeeError,
       isResetButtonDisabled,
       isTransactionFeeCalculated,
+      isTokenPickerOpen,
+      selectedAssetUniqueIds,
     } = this.state;
     const {
+      assets,
       currencyMaxFractionalDigits,
       hwDeviceStatus,
       isHardwareWallet,
       isDialogOpen,
       isRestoreActive,
       onExternalLinkClick,
+      tokenFavorites,
+      walletName,
     } = this.props;
 
     const receiverField = form.$('receiver');
@@ -981,6 +961,22 @@ export default class WalletSendForm extends Component<Props, State> {
             formattedTotalAmount={total.toFormat(currencyMaxFractionalDigits)}
           />
         ) : null}
+
+        {isTokenPickerOpen && (
+          <WalletTokenPicker
+            assets={assets}
+            previouslyCheckedIds={selectedAssetUniqueIds}
+            tokenFavorites={tokenFavorites}
+            walletName={walletName}
+            onCancel={() => {
+              this.setState({ isTokenPickerOpen: false });
+            }}
+            onAdd={(checked) => {
+              this.setState({ isTokenPickerOpen: false });
+              checked.forEach(this.addAssetRow);
+            }}
+          />
+        )}
       </div>
     );
   }