[DDW-694] Implement the Tokens screen (#2671)

* [DDW-694] Initial file structure

* [DDW-694] Improve file structure

* [DDW-694] CHANGELOG

* [DDW-694] Search init

* [DDW-694] Fix Assets search

* [DDW-694] Fix Assets dropdown search

* [DDW-694] Tokens list - progress

* [DDW-694] Storybook stories

* [DDW-694] Storybook stories

* [DDW-694] Tokens List Header - init

* [DDW-694] Tokens List Header - progress

* [DDW-694] Tokens List Header - progress

* [DDW-694] Tokens List Header - progress

* [DDW-694] Remove controls for the MVP scope

* [DDW-694] Remove controls for the MVP scope

* [DDW-694] Favorite - init

* [DDW-694] Favorites localstorage

* [DDW-694] Styling adjustments

* [DDW-694] Styling adjustments

* [DDW-694] Styling adjustments

* [DDW-694] Favorites working

* [DDW-694] Only recent tokens

* [DDW-694] Toggle favorite animation

* [DDW-694] Show Zero Tokens - init

* [DDW-694] Move animation to the specific component using it

* [DDW-694] Move animation to the specific component using it

* [DDW-694] View all tokens button

* [DDW-694] Translation manager

* [DDW-694] Sorting - init

* [DDW-694] Wallet Tokens sorting

* [DDW-694] Fix memoized token dependency

* [DDW-694] Fix memoized token dependency

* [DDW-694] Move sort fn into utils

* [DDW-694] Adjust column title position

* [DDW-694] Sorting and animation tweaks

* [DDW-694] JP translation

* [DDW-694] Preparing for translation

* [DDW-694] JP translation and adjustments

* [DDW-694] Adjustments

* [DDW-694] Adjustments

* [DDW-694] Adjustments

* [DDW-694] Add mistakenly removed flow to Routes

* [DDW-694] Remove unused type

* [DDW-694] Fix variables naming

* [DDW-694] Fix variables naming

* [DDW-694] Styling adjustment

* [DDW-694] Add hooks to Func Component functions

* [DDW-694] Wallet Summary tokens adjustments and fns docs

* [DDW-694] Fix toggle sort direction

* [DDW-694] Restoring state for the Tokens tab

* [DDW-694] Fix search not working

* [DDW-694] Styling adjustments

* [DDW-694] Disable send when token has zero balance

* [DDW-694] No Tokens scenario in the Tokens tab

* [DDW-694] No Tokens scenario in the Tokens tab - fix typo

* [DDW-694] Remove zero tokens from the scope

* [DDW-694] Sort qtd with formatted amount

* [DDW-694] Fix CHANGELOG

* [DDW-694] Proper flow typing

* [DDW-694] useMemo in main content functions

Co-authored-by: Nikola Glumac <[email protected]>

Author: thedanheller

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, []);