Add multi token display functionality

locales/en.json

@@ -397,6 +397,10 @@
   "TextVerification": {
     "noteInvalid": "You cannot write special symbols like {}<br>^ or more than 100 characters."
   },
+  "Tokens": {
+    "headingTokens": "Your Circles",
+    "descriptionTokens": "All circles you hold was originally issued as someone's basic income. These users are the original issuers of the circles you hold. Each of these circles can be sent directly to other wallets that trust these users."
+  },
   "TransferInfoBalanceCard": {
     "bodyTotalBalance": "Your total balance: {balance}",
     "tooltipTotalBalance": "This is the current balance of all Circles you have on your account"

src/components/BalanceDisplay.js

@@ -3,6 +3,9 @@ import { Box, Tooltip, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+import { TOKENS_PATH } from '~/routes';
 
 import { useUpdateLoop } from '~/hooks/update';
 import translate from '~/services/locale';
@@ -56,8 +59,10 @@ const BalanceDisplay = () => {
           <CircularProgress />
         ) : (
           <Typography variant="balance1">
-            <IconCircles className={classes.balanceIcon} />
-            {tokenBalance}
+            <Link to={TOKENS_PATH}>
+              <IconCircles className={classes.balanceIcon} />
+              {tokenBalance}
+            </Link>
           </Typography>
         )}
       </Box>

src/components/Finder.js

@@ -62,7 +62,6 @@ function filterToQuery(filterName) {
 const useStyles = makeStyles((theme) => ({
   searchItem: {
     cursor: 'pointer',
-    boxShadow: theme.custom.shadows.gray,
   },
   noSearchResultContainer: {
     marginTop: '80px',

src/components/ProfileMini.js

@@ -7,6 +7,7 @@ import {
   Typography,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React, { Fragment, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -28,6 +29,16 @@ import { addSafeOwner } from '~/store/safe/actions';
 import { IconFriends, IconSend, IconTrust } from '~/styles/icons';
 
 const useStyles = makeStyles((theme) => ({
+  cardContainer: {
+    boxShadow: theme.custom.shadows.navigationFloating,
+    '&:hover': {
+      background: theme.custom.colors.blackSqueeze,
+
+      '& .MuiCardHeader-root': {
+        background: theme.custom.colors.blackSqueeze,
+      },
+    },
+  },
   cardHeader: {
     padding: theme.spacing(1),
   },
@@ -64,6 +75,7 @@ const ProfileMini = ({
   className,
   hasActions = false,
   isSharedWalletCreation,
+  value,
   ...props
 }) => {
   const classes = useStyles();
@@ -160,18 +172,27 @@ const ProfileMini = ({
           onConfirm={handleClose}
         />
       )}
-      <Card {...props} className={className}>
+      <Card {...props} className={clsx(className, classes.cardContainer)}>
         <CardHeader
           action={
-            hasActions && (
+            (hasActions && (
               <ProfileMiniActions
                 address={address}
                 connection={connection}
                 isSharedWalletCreation={isSharedWalletCreation}
                 onSend={handleSend}
                 onTrust={handleTrust}
               />
-            )
+            )) ||
+            (value && (
+              <Typography
+                classes={{ root: 'h1_blue' }}
+                component="span"
+                variant="h1"
+              >
+                {value}
+              </Typography>
+            ))
           }
           avatar={<Avatar address={address} />}
           classes={{
@@ -258,6 +279,7 @@ ProfileMini.propTypes = {
   className: PropTypes.string,
   hasActions: PropTypes.bool,
   isSharedWalletCreation: PropTypes.bool,
+  value: PropTypes.string,
 };
 
 ProfileMiniActions.propTypes = {

src/routes.js

@@ -23,6 +23,7 @@ import Send from '~/views/Send';
 import SendConfirm from '~/views/SendConfirm';
 import Settings from '~/views/Settings';
 import Share from '~/views/Share';
+import Tokens from '~/views/Tokens';
 import TutorialOnboarding from '~/views/TutorialOnboarding';
 import Validation from '~/views/Validation';
 import ValidationLock from '~/views/ValidationLock';
@@ -43,6 +44,7 @@ export const ORGANIZATION_PATH = '/organization';
 export const PROFILE_PATH = '/profile/:address';
 export const QR_GENERATOR_PATH = '/sharedwallet/qr';
 export const SEARCH_PATH = '/search';
+export const TOKENS_PATH = '/tokens';
 export const SEED_PHRASE_PATH = '/seedphrase';
 export const SEND_CONFIRM_PATH = '/send/:address(0x[0-9a-fA-f]{40})';
 export const SEND_PATH = '/send';
@@ -265,6 +267,7 @@ const Routes = () => {
       <TrustedRoute component={EditProfile} exact path={EDIT_PROFILE_PATH} />
       <TrustedRoute component={QRGenerator} exact path={QR_GENERATOR_PATH} />
       <TrustedRoute component={Search} exact path={SEARCH_PATH} />
+      <TrustedRoute component={Tokens} exact path={TOKENS_PATH} />
       <OrganizationRoute
         component={OrganizationMembersAdd}
         exact

src/store/token/actions.js

@@ -1,5 +1,7 @@
 import { tcToCrc } from '@circles/timecircles';
+import { Typography } from '@mui/material';
 import { DateTime } from 'luxon';
+import React from 'react';
 
 import core from '~/services/core';
 import translate from '~/services/locale';
@@ -9,7 +11,7 @@ import { addPendingActivity } from '~/store/activity/actions';
 import notify, { NotificationsTypes } from '~/store/notifications/actions';
 import ActionTypes from '~/store/token/types';
 import { PATHFINDER_HOPS_DEFAULT, ZERO_ADDRESS } from '~/utils/constants';
-import logError from '~/utils/debug';
+import logError, { translateErrorForUser } from '~/utils/debug';
 import { isTokenDeployed, waitAndRetryOnFail } from '~/utils/stateChecks';
 
 const { ActivityTypes } = core.activity;
@@ -139,7 +141,7 @@ export function checkTokenState() {
 
 export function checkCurrentBalance() {
   return async (dispatch, getState) => {
-    const { safe, token } = getState();
+    const { token, safe } = getState();
 
     // No token address given yet
     if (!token.address && !safe.isOrganization) {
@@ -167,6 +169,64 @@ export function checkCurrentBalance() {
   };
 }
 
+export function checkOtherTokens() {
+  return async (dispatch, getState) => {
+    const { safe } = getState();
+
+    try {
+      const otherTokens = await core.token.listAllTokens(safe.currentAccount);
+
+      const filterOrderedOtherTokens = otherTokens
+        .filter((item) => item.amount > tcToCrc(Date.now(), Number(0.005)))
+        .reverse();
+      dispatch({
+        type: ActionTypes.TOKEN_UPDATE_OTHER_TOKENS,
+        meta: {
+          otherTokens: filterOrderedOtherTokens,
+        },
+      });
+      dispatch({
+        type: ActionTypes.TOKEN_UPDATE_OTHER_TOKENS_SUCCESS,
+      });
+    } catch (error) {
+      dispatch({
+        type: ActionTypes.TOKEN_UPDATE_OTHER_TOKENS_LOADING,
+        meta: {
+          isLoading: false,
+        },
+      });
+      dispatch({
+        type: ActionTypes.TOKEN_UPDATE_OTHER_TOKENS_ERROR,
+        meta: {
+          isError: true,
+        },
+      });
+      logError(error);
+      dispatch(
+        notify({
+          text: (
+            <Typography classes={{ root: 'body4_white' }} variant="body4">
+              {translateErrorForUser(error)}
+            </Typography>
+          ),
+          type: NotificationsTypes.ERROR,
+        }),
+      );
+    }
+  };
+}
+
+export function checkOtherTokensLoading(isLoading) {
+  return async (dispatch) => {
+    dispatch({
+      type: ActionTypes.TOKEN_UPDATE_OTHER_TOKENS_LOADING,
+      meta: {
+        isLoading,
+      },
+    });
+  };
+}
+
 export function requestUBIPayout(payout) {
   return async (dispatch, getState) => {
     const { safe, token } = getState();

src/store/token/reducers.js

@@ -10,6 +10,11 @@ const initialState = {
   isLoading: false,
   lastPayoutAt: null,
   lastUpdateAt: null,
+  otherTokens: {
+    isLoading: true,
+    isError: false,
+    otherTokens: [],
+  },
 };
 
 const tokenReducer = (state = initialState, action) => {
@@ -23,6 +28,24 @@ const tokenReducer = (state = initialState, action) => {
         address: { $set: action.meta.address },
         lastPayoutAt: { $set: action.meta.lastPayoutAt },
       });
+    case ActionTypes.TOKEN_UPDATE_OTHER_TOKENS:
+      return update(state, {
+        otherTokens: {
+          otherTokens: { $set: action.meta.otherTokens },
+        },
+      });
+    case ActionTypes.TOKEN_UPDATE_OTHER_TOKENS_LOADING:
+      return update(state, {
+        otherTokens: {
+          isLoading: { $set: action.meta.isLoading },
+        },
+      });
+    case ActionTypes.TOKEN_UPDATE_OTHER_TOKENS_ERROR:
+      return update(state, {
+        otherTokens: {
+          isError: { $set: action.meta.isError },
+        },
+      });
     case ActionTypes.TOKEN_BALANCE_UPDATE:
       return update(state, {
         isLoading: { $set: true },

src/store/token/types.js

@@ -18,4 +18,8 @@ export default createTypes(
   'TOKEN_UPDATE',
   'TOKEN_UPDATE_ERROR',
   'TOKEN_UPDATE_SUCCESS',
+  'TOKEN_UPDATE_OTHER_TOKENS',
+  'TOKEN_UPDATE_OTHER_TOKENS_LOADING',
+  'TOKEN_UPDATE_OTHER_TOKENS_ERROR',
+  'TOKEN_UPDATE_OTHER_TOKENS_SUCCESS',
 );

src/styles/theme.js

@@ -321,6 +321,12 @@ export default createTheme({
       background: gradients.violetCurved,
       backgroundClip: 'text',
       textFillColor: 'transparent',
+      '& svg': {
+        fill: colors.violet,
+      },
+      '& a': {
+        textDecoration: 'none',
+      },
     },
     poster: {
       fontSize: '4rem',