feat(next): CP-12485 account view (#519)

Author: frichards

apps/next/src/components/Header/components/HeaderAccount/HeaderAccount.tsx

@@ -69,10 +69,12 @@ const HeaderAccountContent: FC<Props> = ({ wallet, isTrueWallet, account }) => {
         isContainerHovered={isContainerHovered}
       />
 
-      {/* Navigation Arrow */}
-      <IconWrapper shouldShift={false}>
-        <MdNavigateNext />
-      </IconWrapper>
+      {/* Navigation Arrow: Waiting for account to be visible */}
+      {account && (
+        <IconWrapper shouldShift={false}>
+          <MdNavigateNext />
+        </IconWrapper>
+      )}
 
       {/* Account Name */}
       <AccountSection

apps/next/src/components/Header/components/HeaderAccount/components/TokenSection.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { TruncatedText } from '../../styledComponents';
+import { AccountSectionContainer, Label } from '../styled';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  tokenTextRef: React.RefObject<HTMLSpanElement | null>;
+  isTokenTruncated: boolean;
+  tokenName: string;
+  isContainerHovered: boolean;
+};
+
+export const TokenSection: FC<Props> = ({
+  tokenTextRef,
+  isTokenTruncated,
+  tokenName,
+  isContainerHovered,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <AccountSectionContainer shouldShift={false}>
+      <TruncatedText
+        ref={tokenTextRef}
+        variant="subtitle3"
+        showFade={isTokenTruncated}
+      >
+        {tokenName}
+      </TruncatedText>
+      {isContainerHovered && <Label variant="caption">{t('Token')}</Label>}
+    </AccountSectionContainer>
+  );
+};

apps/next/src/localization/locales/en/translation.json

@@ -93,6 +93,8 @@
   "Ask Core Concierge to swap tokens": "Ask Core Concierge to swap tokens",
   "Ask Core Concierge to transfer for you": "Ask Core Concierge to transfer for you",
   "Assets": "Assets",
+  "Atomic Memory Locked": "Atomic Memory Locked",
+  "Atomic Memory Unlocked": "Atomic Memory Unlocked",
   "Attempted to use an unknown derivation path": "Attempted to use an unknown derivation path",
   "Authenticator": "Authenticator",
   "Authenticator added!": "Authenticator added!",
@@ -140,6 +142,7 @@
   "Chain ID": "Chain ID",
   "Change Authenticator App": "Change Authenticator App",
   "Change password": "Change password",
+  "Check full transaction history on the explorer": "Check full transaction history on the explorer",
   "Chinese - Simplified": "Chinese - Simplified",
   "Chinese - Traditional": "Chinese - Traditional",
   "Choose": "Choose",
@@ -401,6 +404,9 @@
   "Locate the connect button on their site": "Locate the connect button on their site",
   "Lock Core": "Lock Core",
   "Locked": "Locked",
+  "Locked Platform": "Locked Platform",
+  "Locked Stakeable": "Locked Stakeable",
+  "Locked Staked": "Locked Staked",
   "Login": "Login",
   "Logo URL": "Logo URL",
   "Losing this phrase will result in lost funds": "Losing this phrase will result in lost funds",
@@ -463,6 +469,7 @@
   "No matching results": "No matching results",
   "No matching sites found": "No matching sites found",
   "No recent transactions": "No recent transactions",
+  "No recent transctions": "No recent transctions",
   "No recovery methods set up": "No recovery methods set up",
   "No results found": "No results found",
   "No routes found with enough liquidity.": "No routes found with enough liquidity.",
@@ -757,6 +764,7 @@
   "Type": "Type",
   "Type in or paste address": "Type in or paste address",
   "Type in or paste token contract address": "Type in or paste token contract address",
+  "UTXOs across multiple addresses": "UTXOs across multiple addresses",
   "Unable to cancel the export request. Please contact support.": "Unable to cancel the export request. Please contact support.",
   "Unable to connect": "Unable to connect",
   "Unable to connect.": "Unable to connect.",
@@ -782,6 +790,9 @@
   "Unlimited": "Unlimited",
   "Unlimited {{currency}}": "Unlimited {{currency}}",
   "Unlock airdrops": "Unlock airdrops",
+  "Unlocked": "Unlocked",
+  "Unlocked Staked": "Unlocked Staked",
+  "Unlocked Unstaked": "Unlocked Unstaked",
   "Unnamed FIDO Device": "Unnamed FIDO Device",
   "Unsupporetd secret type": "Unsupporetd secret type",
   "Unsupported Version": "Unsupported Version",
@@ -815,7 +826,10 @@
   "Vesting": "Vesting",
   "Videos": "Videos",
   "View All Connected Sites": "View All Connected Sites",
+  "View all of your balances and UTXOs": "View all of your balances and UTXOs",
+  "View full history": "View full history",
   "View in Explorer": "View in Explorer",
+  "View on explorer": "View on explorer",
   "View preference": "View preference",
   "View the troubleshooting guide <troubleshootButton>here</troubleshootButton>": "View the troubleshooting guide <troubleshootButton>here</troubleshootButton>",
   "Waiting for <bold>{{provider}}</bold> authentication to complete": "Waiting for <bold>{{provider}}</bold> authentication to complete",

apps/next/src/pages/Portfolio/Portfolio.tsx

@@ -4,12 +4,14 @@ import { AddCustomToken } from './components/AddCustomToken/AddCustomToken';
 import { ManageTokens } from './components/ManageTokens';
 import { PortfolioHome } from './components/PortfolioHome';
 import { WalletView } from './components/WalletView/WalletView';
+import { TokenDetails } from './components/PortfolioHome/components/PortolioDetails/components/TokenDetails';
 
 export const Portfolio: FC = () => (
   <Switch>
     <Route path="/manage-tokens/add-custom" component={AddCustomToken} />
     <Route path="/manage-tokens" component={ManageTokens} />
     <Route path="/wallet/:walletId" component={WalletView} />
+    <Route path="/asset/:networkId/:tokenAddress" component={TokenDetails} />
     <Route path="/" component={PortfolioHome} />
   </Switch>
 );

apps/next/src/pages/Portfolio/components/PortfolioHome/PortfolioHome.tsx

@@ -1,5 +1,4 @@
 import {
-  alpha,
   CircularProgress,
   Stack,
   styled,
@@ -22,6 +21,7 @@ import { useTranslation } from 'react-i18next';
 import { TESTNET_MODE_BACKGROUND_COLOR } from '@/config/constants';
 import { TestnetModeOverlay } from '@/components/TestnetModeOverlay';
 import { useHistory, useLocation } from 'react-router-dom';
+import { TabsContainer } from './styled';
 
 export type TabName = 'assets' | 'collectibles' | 'defi' | 'activity';
 
@@ -124,18 +124,6 @@ export const PortfolioHome: FC = () => {
   );
 };
 
-const TabsContainer = styled(Stack)(({ theme }) => ({
-  position: 'sticky',
-  bottom: 0,
-  paddingTop: theme.spacing(1),
-  zIndex: theme.zIndex.appBar,
-  background: `linear-gradient(180deg, ${alpha(theme.palette.background.default, 0)} 0%, ${theme.palette.background.default} 16px)`,
-
-  '> div': {
-    background: 'unset',
-  },
-}));
-
 const CenteredSpinner = styled(CircularProgress)({
   margin: 'auto',
 });

apps/next/src/pages/Portfolio/components/PortfolioHome/components/PortolioDetails/components/ActivityTab/components/ActivityFilterSelector.tsx

@@ -1,12 +1,14 @@
 import { DropdownMenu } from '@/components/DropdownMenu';
 import { Box, PopoverItem } from '@avalabs/k2-alpine';
-import { FC } from 'react';
+import { FC, RefObject, useMemo } from 'react';
 import { ActivityFilter } from '../types';
 import { useTranslation } from 'react-i18next';
 
 type Props = {
   selected: ActivityFilter;
   onChange(filter: ActivityFilter): void;
+  ref?: RefObject<HTMLElement>;
+  exclude?: ActivityFilter[];
 };
 
 const ACTIVITY_FILTERS: ActivityFilter[] = [
@@ -19,12 +21,21 @@ const ACTIVITY_FILTERS: ActivityFilter[] = [
   'NFTs',
 ];
 
-export const ActivityFilterSelector: FC<Props> = ({ selected, onChange }) => {
+export const ActivityFilterSelector: FC<Props> = ({
+  selected,
+  onChange,
+  ref,
+  exclude,
+}) => {
   const { t } = useTranslation();
+  const filteredActivityFilters = useMemo(() => {
+    return ACTIVITY_FILTERS.filter((filter) => !exclude?.includes(filter));
+  }, [exclude]);
+
   return (
-    <Box>
+    <Box ref={ref}>
       <DropdownMenu label={t('Filter')}>
-        {ACTIVITY_FILTERS.map((filterName) => (
+        {filteredActivityFilters.map((filterName) => (
           <PopoverItem
             key={filterName}
             onClick={() => onChange(filterName)}

apps/next/src/pages/Portfolio/components/PortfolioHome/components/PortolioDetails/components/ActivityTab/components/TransactionList/TransactionList.tsx

@@ -1,11 +1,9 @@
-import { List, ListItem, Typography } from '@avalabs/k2-alpine';
 import { NetworkWithCaipId } from '@core/types';
-import { FC, Fragment, memo } from 'react';
-import { useAccountHistory, useGroupedHistory } from '../../hooks';
+import { FC, memo } from 'react';
+import { useAccountHistory } from '../../hooks';
 import { ActivityFilter } from '../../types';
-import { EmptyState } from '../EmptyState';
-import * as Styled from './components/Styled';
-import { TransactionItem } from './components/TransactionItem';
+
+import { HistoryList } from './components/HistoryList';
 
 type Props = {
   filter: ActivityFilter;
@@ -15,43 +13,8 @@ type Props = {
 const TransactionList: FC<Props> = ({ filter, network }) => {
   const transactionHistory = useAccountHistory(network);
 
-  const groupedTransactionHistory = useGroupedHistory(
-    transactionHistory,
-    filter,
-  );
-
-  if (transactionHistory.length === 0) {
-    return <EmptyState />;
-  }
-
   return (
-    <List disablePadding>
-      {Object.entries(groupedTransactionHistory).map(
-        ([groupName, transactions]) => (
-          <ListItem key={groupName} disableGutters disablePadding>
-            <Styled.List
-              disablePadding
-              subheader={
-                <Styled.ListSubheader disableGutters>
-                  <Typography variant="h6" color="text.primary">
-                    {groupName}
-                  </Typography>
-                </Styled.ListSubheader>
-              }
-            >
-              {transactions.map((tx, index, self) => (
-                <Fragment key={tx.hash}>
-                  <TransactionItem transaction={tx} />
-                  {index < self.length - 1 && (
-                    <Styled.Divider variant="inset" />
-                  )}
-                </Fragment>
-              ))}
-            </Styled.List>
-          </ListItem>
-        ),
-      )}
-    </List>
+    <HistoryList filter={filter} transactionHistory={transactionHistory} />
   );
 };
 

apps/next/src/pages/Portfolio/components/PortfolioHome/components/PortolioDetails/components/ActivityTab/components/TransactionList/components/HistoryList.tsx

@@ -0,0 +1,55 @@
+import { ActivityFilter } from '../../../types';
+import { TxHistoryItem } from '@core/types';
+import { NetworkVMType } from '@avalabs/vm-module-types';
+import { FC, Fragment } from 'react';
+import { useGroupedHistory } from '../../../hooks';
+import { List, ListItem, Typography } from '@avalabs/k2-alpine';
+import { EmptyState } from '@/pages/Portfolio/components/PortfolioHome/components/EmptyState';
+import * as Styled from './Styled';
+import { TransactionItem } from './TransactionItem';
+
+type Props = {
+  filter: ActivityFilter;
+  transactionHistory: TxHistoryItem<NetworkVMType>[];
+};
+
+export const HistoryList: FC<Props> = ({ filter, transactionHistory }) => {
+  const groupedTransactionHistory = useGroupedHistory(
+    transactionHistory,
+    filter,
+  );
+
+  if (transactionHistory.length === 0) {
+    return <EmptyState />;
+  }
+
+  return (
+    <List disablePadding>
+      {Object.entries(groupedTransactionHistory).map(
+        ([groupName, transactions]) => (
+          <ListItem key={groupName} disableGutters disablePadding>
+            <Styled.List
+              disablePadding
+              subheader={
+                <Styled.ListSubheader disableGutters>
+                  <Typography variant="h6" color="text.primary">
+                    {groupName}
+                  </Typography>
+                </Styled.ListSubheader>
+              }
+            >
+              {transactions.map((tx, index, self) => (
+                <Fragment key={tx.hash}>
+                  <TransactionItem transaction={tx} />
+                  {index < self.length - 1 && (
+                    <Styled.Divider variant="inset" />
+                  )}
+                </Fragment>
+              ))}
+            </Styled.List>
+          </ListItem>
+        ),
+      )}
+    </List>
+  );
+};

apps/next/src/pages/Portfolio/components/PortfolioHome/components/PortolioDetails/components/AssetCard.tsx

@@ -10,14 +10,15 @@ import { ProfitAndLoss } from './ProfitAndLoss';
 import { FungibleTokenBalance } from '@core/types';
 import { TokenAvatar } from '@/components/TokenAvatar';
 import { Card } from '@/components/Card';
+import { useHistory } from 'react-router-dom';
+import { TokenType } from '@avalabs/vm-module-types';
 
 interface AssetCardProps {
   asset: FungibleTokenBalance;
-  onClick?: () => void;
 }
 
-const AVATAR_SIZE = 40;
-const BADGE_SIZE = 18;
+const AVATAR_SIZE = 32;
+const BADGE_SIZE = 16;
 const CHEVRON_SIZE = 20;
 const CARD_BORDER_RADIUS = 2;
 const CARD_GAP = 1.5;
@@ -34,14 +35,14 @@ const formatTokenBalance = (balance: string, symbol: string): string => {
   return `${balance} ${symbol}`;
 };
 
-export const AssetCard = ({ asset, onClick }: AssetCardProps) => {
+export const AssetCard = ({ asset }: AssetCardProps) => {
   const theme = useTheme();
+  const history = useHistory();
 
   const handleClick = () => {
-    onClick?.();
-    // TODO: Navigate to asset details page when route is available
-    // const history = useHistory();
-    // history.push(`/asset/${asset.symbol}`);
+    const tokenAddress =
+      asset.type === TokenType.NATIVE ? asset.symbol : asset.address;
+    history.push(`/asset/${asset.coreChainId}/${tokenAddress}`);
   };
 
   const badgeBorderColor = getBadgeBorderColor(theme);
@@ -51,15 +52,21 @@ export const AssetCard = ({ asset, onClick }: AssetCardProps) => {
   );
 
   return (
-    <Card sx={{ width: '100%', borderRadius: CARD_BORDER_RADIUS }}>
+    <Card
+      sx={{
+        width: '100%',
+        borderRadius: CARD_BORDER_RADIUS,
+        backgroundColor: 'background.paper',
+      }}
+    >
       <Stack
         role="button"
         onClick={handleClick}
         direction="row"
         alignItems="center"
         gap={CARD_GAP}
         sx={{
-          cursor: onClick ? 'pointer' : 'default',
+          cursor: 'pointer',
           px: theme.spacing(CARD_PADDING_X),
           py: theme.spacing(CARD_PADDING_Y),
         }}
@@ -75,7 +82,7 @@ export const AssetCard = ({ asset, onClick }: AssetCardProps) => {
           />
         </Box>
 
-        <Stack flexGrow={1} minWidth={0}>
+        <Stack flexGrow={1} minWidth={0} gap={0}>
           <Typography
             variant="subtitle3"
             noWrap