[DDW-694] Implement the Tokens screen

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## vNext
 
+### Features
+
+- Implemented the wallet Tokens dedicated screen ([PR 2671](https://github.com/input-output-hk/daedalus/pull/2671))
+
 ### Fixes
 
 - Fixed wallet settings screen - no space at the bottom when scrolled down ([PR 2686](https://github.com/input-output-hk/daedalus/pull/2686))

source/common/config/electron-store.config.js

@@ -29,6 +29,7 @@ export const STORAGE_KEYS: {
   STAKING_INFO_WAS_OPEN: 'ALONZO-INFO-WAS-OPEN',
   TERMS_OF_USE_ACCEPTANCE: 'TERMS-OF-USE-ACCEPTANCE',
   THEME: 'THEME',
+  TOKEN_FAVORITES: 'TOKEN-FAVORITES',
   USER_DATE_FORMAT_ENGLISH: 'USER-DATE-FORMAT-ENGLISH',
   USER_DATE_FORMAT_JAPANESE: 'USER-DATE-FORMAT-JAPANESE',
   USER_LOCALE: 'USER-LOCALE',

source/common/types/electron-store.types.js

@@ -19,6 +19,7 @@ export type StorageKey =
   | 'SMASH-SERVER'
   | 'TERMS-OF-USE-ACCEPTANCE'
   | 'THEME'
+  | 'TOKEN-FAVORITES'
   | 'USER-DATE-FORMAT-ENGLISH'
   | 'USER-DATE-FORMAT-JAPANESE'
   | 'USER-LOCALE'

source/renderer/app/Routes.js

@@ -30,6 +30,7 @@ import WalletSummaryPage from './containers/wallet/WalletSummaryPage';
 import WalletSendPage from './containers/wallet/WalletSendPage';
 import WalletReceivePage from './containers/wallet/WalletReceivePage';
 import WalletTransactionsPage from './containers/wallet/WalletTransactionsPage';
+import WalletTokensPage from './containers/wallet/WalletTokensPage';
 import WalletSettingsPage from './containers/wallet/WalletSettingsPage';
 import WalletUtxoPage from './containers/wallet/WalletUtxoPage';
 import VotingRegistrationPage from './containers/voting/VotingRegistrationPage';
@@ -64,15 +65,16 @@ export const Routes = withRouter(() => (
               path={ROUTES.WALLETS.SUMMARY}
               component={WalletSummaryPage}
             />
-            <Route
-              path={ROUTES.WALLETS.TRANSACTIONS}
-              component={WalletTransactionsPage}
-            />
             <Route path={ROUTES.WALLETS.SEND} component={WalletSendPage} />
             <Route
               path={ROUTES.WALLETS.RECEIVE}
               component={WalletReceivePage}
             />
+            <Route path={ROUTES.WALLETS.TOKENS} component={WalletTokensPage} />
+            <Route
+              path={ROUTES.WALLETS.TRANSACTIONS}
+              component={WalletTransactionsPage}
+            />
             <Route
               path={ROUTES.WALLETS.SETTINGS}
               component={WalletSettingsPage}

source/renderer/app/actions/assets-actions.js

@@ -11,4 +11,14 @@ export default class AssetsActions {
     decimals: number,
   }> = new Action();
   onAssetSettingsCancel: Action<any> = new Action();
+  onOpenAssetSend: Action<{ uniqueId: string }> = new Action();
+  onCopyAssetParam: Action<{ param: string, fullValue: string }> = new Action();
+  onToggleFavorite: Action<{
+    uniqueId: string,
+    isFavorite: boolean,
+  }> = new Action();
+  copyAssetParamNotification: Action<{
+    param: string,
+    shortValue: string,
+  }> = new Action();
 }

source/renderer/app/actions/wallets-actions.js

@@ -82,7 +82,6 @@ export default class WalletsActions {
   copyWalletPublicKey: Action<{ publicKey: string }> = new Action();
   copyICOPublicKey: Action<{ publicKey: string }> = new Action();
   copyAddress: Action<{ address: string }> = new Action();
-  copyAssetItem: Action<{ assetItem: string, value: string }> = new Action();
   updateCertificateStep: Action<any> = new Action();
   closeCertificateGeneration: Action<any> = new Action();
   closeRewardsCsvGeneration: Action<any> = new Action();

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

@@ -77,8 +77,8 @@ export type AssetToken = {
 
 export type AssetMetadata = {
   name: string,
-  ticker: string,
   description: string,
+  ticker?: string,
   decimals?: number, // [0 .. 255]
   url?: string,
   logo?: string,

source/renderer/app/api/utils/localStorage.js

@@ -327,6 +327,31 @@ export default class LocalStorageApi {
   unsetAppUpdateCompleted = (): Promise<void> =>
     LocalStorageApi.unset(keys.APP_UPDATE_COMPLETED);
 
+  getWalletTokenFavorites = (): Promise<{ [key: string]: boolean }> =>
+    LocalStorageApi.get(keys.TOKEN_FAVORITES, {});
+
+  toggleWalletTokenFavorite = async (
+    uniqueId: string,
+    isFavorite: boolean
+  ): Promise<boolean> => {
+    const favorites = await this.getWalletTokenFavorites();
+    const newFavorites = {
+      ...favorites,
+      [uniqueId]: isFavorite,
+    };
+    await LocalStorageApi.set(keys.TOKEN_FAVORITES, newFavorites);
+    return !isFavorite;
+  };
+
+  unsetWalletTokenFavorite = async (uniqueId: string): Promise<void> => {
+    const favorites = await this.getWalletTokenFavorites();
+    delete favorites[uniqueId];
+    await LocalStorageApi.set(keys.TOKEN_FAVORITES, favorites);
+  };
+
+  unsetWalletTokenFavorites = async (): Promise<void> =>
+    LocalStorageApi.unset(keys.TOKEN_FAVORITES);
+
   getAssetsLocalData = (): Promise<AssetLocalData> =>
     LocalStorageApi.get(keys.ASSET_DATA, []);
 

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

@@ -16,37 +16,37 @@ import type { Asset as AssetProps } from '../../api/assets/types';
 
 const messages = defineMessages({
   fingerprintItem: {
-    id: 'assets.assetToken.item.fingerprint',
+    id: 'assets.assetToken.param.fingerprint',
     defaultMessage: '!!!Fingerprint',
     description: '"fingerprint" item.',
   },
   policyIdItem: {
-    id: 'assets.assetToken.item.policyId',
+    id: 'assets.assetToken.param.policyId',
     defaultMessage: '!!!Policy Id',
     description: '"policyId" item.',
   },
   assetNameItem: {
-    id: 'assets.assetToken.item.assetName',
+    id: 'assets.assetToken.param.assetName',
     defaultMessage: '!!!Asset name',
     description: '"assetName" item.',
   },
   nameItem: {
-    id: 'assets.assetToken.item.name',
+    id: 'assets.assetToken.param.name',
     defaultMessage: '!!!Name',
     description: '"name" item.',
   },
   tickerItem: {
-    id: 'assets.assetToken.item.ticker',
+    id: 'assets.assetToken.param.ticker',
     defaultMessage: '!!!Ticker',
     description: '"ticker" item.',
   },
   descriptionItem: {
-    id: 'assets.assetToken.item.description',
+    id: 'assets.assetToken.param.description',
     defaultMessage: '!!!Description',
     description: '"description" item.',
   },
   blank: {
-    id: 'assets.assetToken.item.blank',
+    id: 'assets.assetToken.param.blank',
     defaultMessage: '!!!Blank',
     description: '"Blank" item value.',
   },
@@ -74,7 +74,7 @@ type Props = {
   asset: AssetProps,
   small?: boolean,
   hidePopOver?: boolean,
-  onCopyAssetItem?: Function,
+  onCopyAssetParam?: Function,
   onClickSettings?: Function,
   assetSettingsDialogWasOpened?: ?boolean,
   anyAssetWasHovered?: ?boolean,
@@ -221,15 +221,15 @@ export default class Asset extends Component<Props, State> {
   renderPillPopOverContainer = () => {
     const {
       asset,
-      onCopyAssetItem,
+      onCopyAssetParam,
       assetSettingsDialogWasOpened,
       anyAssetWasHovered,
     } = this.props;
     const pillContent = this.renderPillContent();
     const popOverContent = (
       <AssetContent
         asset={asset}
-        onCopyAssetItem={onCopyAssetItem}
+        onCopyAssetParam={onCopyAssetParam}
         assetSettingsDialogWasOpened={assetSettingsDialogWasOpened}
         anyAssetWasHovered={anyAssetWasHovered}
         className={styles.popOverContent}