Portfolio UAT fixes

packages/yoroi-extension/app/UI/components/BackButton.tsx

@@ -0,0 +1,26 @@
+import { Button, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+import { ReactComponent as BackIcon } from '../../assets/images/assets-page/back-arrow.inline.svg';
+
+const SButton = styled(Button)(({ theme }: any) => ({
+  color: theme.palette.ds.el_gray_medium,
+  '&.MuiButton-sizeMedium': {
+    padding: '13px 16px',
+  },
+  '& svg': {
+    '& path': {
+      fill: theme.palette.ds.el_gray_medium,
+    },
+  },
+}));
+
+export const BackButton = ({ label, onAction }: { label: string; onAction: () => void }) => {
+  return (
+    <SButton onClick={onAction} startIcon={<BackIcon />}>
+      <Typography fontWeight="500" fontSize="14px">
+        {label}
+      </Typography>
+    </SButton>
+  );
+};

packages/yoroi-extension/app/UI/components/Input/SearchInput.tsx

@@ -1,17 +1,19 @@
-import React from 'react';
-import { Input, InputAdornment, InputProps, styled, useTheme } from '@mui/material';
-import { useRef } from 'react';
+import { InputAdornment, InputProps, OutlinedInput, styled, useTheme } from '@mui/material';
+import React, { useRef } from 'react';
 import { Icon } from './../icons/index';
 
-const StyledInput = styled(Input)(({ theme }: any) => ({
-  borderRadius: `${theme.shape.borderRadius}px`,
+const StyledInput = styled(OutlinedInput)(({ theme }: any) => ({
   width: '320px',
   height: '40px',
-  padding: `${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(1)} ${theme.spacing(1)}`,
-  border: '1px solid',
-  borderColor: theme.palette.ds.gray_400,
-  'input::placeholder': {
-    color: theme.palette.ds.gray_600,
+  padding: '8px',
+  '& svg': {
+    '& path': {
+      fill: theme.palette.ds.el_gray_low,
+    },
+  },
+  '& input::placeholder': {
+    color: theme.palette.ds.el_gray_low,
+    opacity: 1,
   },
 }));
 

packages/yoroi-extension/app/UI/components/icons/Switch.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const Switch = () => {
+  return (
+    <svg width="20" height="14" viewBox="0 0 20 14" fill="none">
+      <path
+        d="M4.70711 0.292893C4.31658 -0.0976311 3.68342 -0.0976311 3.29289 0.292893L0.292893 3.29289C-0.0976311 3.68342 -0.0976311 4.31658 0.292893 4.70711C0.683418 5.09763 1.31658 5.09763 1.70711 4.70711L3 3.41421V11C3 11.7956 3.31607 12.5587 3.87868 13.1213C4.44129 13.6839 5.20435 14 6 14H10C10.5523 14 11 13.5523 11 13C11 12.4477 10.5523 12 10 12H6C5.73478 12 5.48043 11.8946 5.29289 11.7071C5.10536 11.5196 5 11.2652 5 11V3.41421L6.29289 4.70711C6.68342 5.09763 7.31658 5.09763 7.70711 4.70711C8.09763 4.31658 8.09763 3.68342 7.70711 3.29289L4.70711 0.292893Z"
+        fill="black"
+      />
+      <path
+        d="M12.2929 9.29289C12.6834 8.90237 13.3166 8.90237 13.7071 9.29289L15 10.5858V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H10C9.44771 2 9 1.55228 9 1C9 0.447715 9.44771 1.49012e-08 10 1.49012e-08H14C14.7956 1.49012e-08 15.5587 0.31607 16.1213 0.87868C16.6839 1.44129 17 2.20435 17 3V10.5858L18.2929 9.29289C18.6834 8.90237 19.3166 8.90237 19.7071 9.29289C20.0976 9.68342 20.0976 10.3166 19.7071 10.7071L16.7071 13.7071C16.3166 14.0976 15.6834 14.0976 15.2929 13.7071L12.2929 10.7071C11.9024 10.3166 11.9024 9.68342 12.2929 9.29289Z"
+        fill="black"
+      />
+    </svg>
+  );
+};

packages/yoroi-extension/app/UI/components/icons/index.ts

@@ -1,17 +1,18 @@
+import { Cancel } from './Cancel';
+import { ChevronDown } from './ChevronDown';
+import { ChevronUp } from './ChevronUp';
+import { ChipArrowDown } from './ChipArrowDown';
+import { ChipArrowUp } from './ChipArrowUp';
 import { CloseIcon } from './CloseIcon';
-import { VisibilityOff } from './VisibilityOff';
-import { VisibilityOn } from './VisibilityOn';
-import { Copy } from './Copy';
 import { Copied } from './Copied';
-import { ChipArrowUp } from './ChipArrowUp';
-import { ChipArrowDown } from './ChipArrowDown';
-import { Send } from './Send';
-import { Cancel } from './Cancel';
-import { Staking } from './Staking';
+import { Copy } from './Copy';
 import { Expand } from './Expand';
-import { ChevronUp } from './ChevronUp';
-import { ChevronDown } from './ChevronDown';
 import { Search } from './Search';
+import { Send } from './Send';
+import { Staking } from './Staking';
+import { Switch } from './Switch';
+import { VisibilityOff } from './VisibilityOff';
+import { VisibilityOn } from './VisibilityOn';
 
 export const Icon = {
   CloseIcon,
@@ -28,4 +29,5 @@ export const Icon = {
   ChevronDown,
   ChevronUp,
   Search,
+  Switch,
 };

packages/yoroi-extension/app/UI/components/index.ts

@@ -1,3 +1,4 @@
+export * from './BackButton';
 export * from './buttons/CopyButton';
 export * from './Card';
 export * from './Chip';
@@ -10,5 +11,5 @@ export * from './Skeleton';
 export * from './Tooltip';
 export * from './TransactionFailed/TransactionFailed';
 export * from './TransactionSubmitted/TransactionSubmitted';
-export * from './wrappers/IconButtonWrapper';
 export * from './wrappers/GradientBgBox';
+export * from './wrappers/IconButtonWrapper';

packages/yoroi-extension/app/UI/features/portfolio/common/components/PlnTag.tsx

@@ -38,6 +38,9 @@ const PnlTag = ({ children, withIcon = false, variant = 'neutral' }: Props) => {
       <StyledTypography mode={variant} fontSize="12px">
         {children}
       </StyledTypography>
+      <StyledTypography mx="2px" mode={variant}>
+        %
+      </StyledTypography>
     </TagContainer>
   );
 };

packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx

@@ -1,8 +1,9 @@
-import { Box, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import { Box, IconButton, Skeleton, Stack, styled, Typography, useTheme } from '@mui/material';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 import LocalStorageApi from '../../../../../api/localStorage/index';
 import { SearchInput, Tooltip } from '../../../../components';
+import { Switch } from '../../../../components/icons/Switch';
 import { useCurrencyPairing } from '../../../../context/CurrencyContext';
 import { WalletBalance } from '../../../../types/currrentWallet';
 import { usePortfolio } from '../../module/PortfolioContextProvider';
@@ -13,6 +14,14 @@ import { useStrings } from '../hooks/useStrings';
 import { HeaderPrice } from './HeaderPrice';
 import PnlTag from './PlnTag';
 
+const IconWrapper: any = styled(IconButton)(({ theme }: any) => ({
+  '& svg': {
+    '& path': {
+      fill: theme.palette.ds.el_gray_medium,
+    },
+  },
+}));
+
 export function formatValue(value: BigNumber): string {
   if (value.isZero()) {
     return '0';
@@ -45,10 +54,10 @@ const PortfolioHeader = ({ walletBalance, setKeyword, isLoading, tooltipTitle }:
 
   const { changeValue, changePercent, variantPnl } = priceChange(open, ptPrice);
 
-  const showADA = accountPair?.from.name === 'ADA';
+  const showADA = accountPair?.from.name === primaryTokenInfo.name;
 
   const totalTokenPrice = React.useMemo(() => {
-    const showingAda = accountPair?.from.name !== 'ADA';
+    const showingAda = accountPair?.from.name !== primaryTokenInfo.name;
     const currency = showingAda ? primaryTokenInfo.ticker : unitOfAccount;
 
     if (ptPrice == null) return `... ${currency}`;
@@ -61,10 +70,13 @@ const PortfolioHeader = ({ walletBalance, setKeyword, isLoading, tooltipTitle }:
   const handleCurrencyChange = async () => {
     const pair = {
       from: {
-        name: showADA ? unitOfAccount ?? DEFAULT_FIAT_PAIR : 'ADA',
+        name: showADA ? unitOfAccount ?? DEFAULT_FIAT_PAIR : primaryTokenInfo.name,
         value: showADA ? totalTokenPrice ?? '0' : walletBalance.ada,
       },
-      to: { name: showADA ? 'ADA' : unitOfAccount ?? DEFAULT_FIAT_PAIR, value: showADA ? walletBalance.ada : totalTokenPrice },
+      to: {
+        name: showADA ? primaryTokenInfo.name : unitOfAccount ?? DEFAULT_FIAT_PAIR,
+        value: showADA ? walletBalance.ada : totalTokenPrice,
+      },
     };
     localStorageApi.setSetPortfolioFiatPair(pair);
     changeUnitOfAccountPair(pair);
@@ -77,7 +89,7 @@ const PortfolioHeader = ({ walletBalance, setKeyword, isLoading, tooltipTitle }:
       const portfolioStoragePairObj = portfolioStoragePair && JSON.parse(portfolioStoragePair);
 
       const pair = {
-        from: { name: 'ADA', value: walletBalance?.ada || '0' },
+        from: { name: primaryTokenInfo.name, value: walletBalance?.ada || '0' },
         to: { name: unitOfAccount || DEFAULT_FIAT_PAIR, value: !showADA ? walletBalance.ada : totalTokenPrice || '0' },
       };
 
@@ -111,11 +123,7 @@ const PortfolioHeader = ({ walletBalance, setKeyword, isLoading, tooltipTitle }:
               {String(accountPair?.from.value)}
             </Typography>
           )}
-          <CurrencyDisplay
-            from={accountPair?.from?.name}
-            to={accountPair?.to?.name}
-            handleCurrencyChange={handleCurrencyChange}
-          />
+          <CurrencyDisplay from={accountPair?.from?.name} handleCurrencyChange={handleCurrencyChange} />
         </Stack>
 
         <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ marginTop: theme.spacing(1) }}>
@@ -154,22 +162,15 @@ const LoadingSkeleton = () => (
   </Stack>
 );
 
-const CurrencyDisplay = ({ from, to, handleCurrencyChange }) => (
-  <Typography variant="body2" fontWeight="500" color="ds.black_static" textAlign="center">
-    <Typography component="span" variant="body2" fontWeight="500" color="ds.text_gray_medium">
+const CurrencyDisplay = ({ from, handleCurrencyChange }) => (
+  <Stack direction="row" alignItems="flex-end" gap="4px" ml="2px">
+    <Typography component="span" variant="body1" fontWeight="500" color="ds.text_gray_medium">
       {from}
     </Typography>
-    <Typography
-      component="span"
-      variant="body2"
-      fontWeight="500"
-      color="ds.text_gray_low"
-      onClick={handleCurrencyChange}
-      sx={{ cursor: 'pointer', display: 'inline' }}
-    >
-      /{to}
-    </Typography>
-  </Typography>
+    <IconWrapper onClick={handleCurrencyChange}>
+      <Switch />
+    </IconWrapper>
+  </Stack>
 );
 
 const Skeletons = ({ theme }) => (

packages/yoroi-extension/app/UI/features/portfolio/common/components/SortableTableHead.tsx

@@ -1,7 +1,7 @@
+import { Stack, TableCell, TableHead, TableRow, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import React from 'react';
-import { TableHead, TableRow, TableCell, Stack, Typography } from '@mui/material';
 import { Sort as SortIcon } from '../../../../components/icons/Sort';
-import { useTheme } from '@mui/material/styles';
 import { IHeadCell } from '../types/table';
 
 interface Props {

packages/yoroi-extension/app/UI/features/portfolio/common/components/Table.tsx

@@ -1,10 +1,10 @@
-import React, { ReactElement, ReactNode, cloneElement } from 'react';
-import { Table as MuiTable, TableBody, Stack, Box, Typography } from '@mui/material';
+import { Box, Table as MuiTable, Stack, TableBody, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { useStrings } from '../hooks/useStrings';
+import React, { ReactElement, ReactNode, cloneElement } from 'react';
 import noResultsPng from '../assets/illustrations/no-results.png';
-import SortableTableHead from './SortableTableHead';
+import { useStrings } from '../hooks/useStrings';
 import { IHeadCell } from '../types/table';
+import SortableTableHead from './SortableTableHead';
 
 interface Props {
   name: string;

packages/yoroi-extension/app/UI/features/portfolio/common/hooks/usePortfolioTokenChart.ts

@@ -72,8 +72,6 @@ type TokenChartData = {
 //   return chartData;
 // }
 
-const ptTicker = 'ADA';
-
 export const useGetPortfolioTokenChart = (
   timeInterval = TOKEN_CHART_INTERVAL.DAY as TokenChartInterval,
   tokenInfo,
@@ -85,7 +83,7 @@ export const useGetPortfolioTokenChart = (
   > = {}
 ) => {
   // const { currency } = useCurrencyPairing();
-  const { unitOfAccount } = usePortfolio();
+  const { unitOfAccount, primaryTokenInfo } = usePortfolio();
 
   const currency = unitOfAccount;
 
@@ -94,7 +92,7 @@ export const useGetPortfolioTokenChart = (
     cacheTime: time.oneHour,
     retryDelay: time.oneSecond,
     optimisticResults: true,
-    refetchInterval: time.halfHour,
+    refetchInterval: time.oneMinute,
     useErrorBoundary: true,
     refetchOnMount: false,
     enabled: tokenInfo && tokenInfo.info?.id.length === 0,
@@ -109,7 +107,7 @@ export const useGetPortfolioTokenChart = (
 
         const tickers = response.value.data.tickers;
         // @ts-ignore
-        const validCurrency = currency === ptTicker ? supportedCurrencies.USD : currency ?? supportedCurrencies.USD;
+        const validCurrency = currency === primaryTokenInfo.name ? supportedCurrencies.USD : currency ?? supportedCurrencies.USD;
 
         const initialPrice = tickers[0]?.prices[validCurrency];
         const records = tickers

packages/yoroi-extension/app/UI/features/portfolio/common/hooks/useStrings.ts

@@ -70,8 +70,8 @@ export const messages = Object.freeze(
       defaultMessage: '!!!in 24 hours',
     },
     backToPortfolio: {
-      id: 'portfolio.button.backToPortfolio',
-      defaultMessage: '!!!Back to portfolio',
+      id: 'global.labels.back',
+      defaultMessage: '!!!Back',
     },
     swap: {
       id: 'portfolio.button.swap',

packages/yoroi-extension/app/UI/features/portfolio/common/hooks/useTableSort.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import React from 'react';
 import { IHeadCell, TableSortType } from '../types/table';
 
 export interface ISortState {
@@ -13,15 +13,14 @@ interface Props {
   headCells: IHeadCell[];
   data: any[];
 }
-
 const useTableSort = ({ order, orderBy, setSortState, headCells, data }: Props) => {
   const handleRequestSort = (property: string) => {
     let direction: string | null = 'asc';
     if (property === orderBy) {
       if (order === 'asc') {
         direction = 'desc';
       } else if (order === 'desc') {
-        direction = null;
+        direction = 'asc';
       }
     }
     setSortState({
@@ -34,32 +33,26 @@ const useTableSort = ({ order, orderBy, setSortState, headCells, data }: Props)
     if (!orderBy || !order) return 0;
     switch (sortType) {
       case 'numeric':
-        if (parseFloat(b[orderBy]) < parseFloat(a[orderBy])) {
-          return -1;
-        } else {
-          return 1;
-        }
+        const aValue = Number(a[orderBy]);
+        const bValue = Number(b[orderBy]);
+        return bValue === aValue ? 0 : bValue < aValue ? -1 : 1;
       case 'character':
-        return String(a[orderBy]).localeCompare(b[orderBy]);
+        return String(b.info[orderBy]).localeCompare(a.info[orderBy]);
       default:
-        if (b[orderBy] < a[orderBy]) {
-          return -1;
-        } else {
-          return 1;
-        }
+        return b[orderBy] === a[orderBy] ? 0 : b[orderBy] < a[orderBy] ? -1 : 1;
     }
   };
 
-  const getSortedData = useCallback(
+  const getSortedData = React.useCallback(
     (arr: any[]) => {
       if (!orderBy || !order) return data;
       const sortColumn = headCells.find(cell => cell.id === orderBy);
       const sortType = sortColumn?.sortType ?? 'character';
-      return arr.sort((a, b) => {
+      return [...arr].sort((a, b) => {
         return order === 'desc' ? descendingComparator(a, b, sortType) : -descendingComparator(a, b, sortType);
       });
     },
-    [order, orderBy, headCells]
+    [order, orderBy, headCells, data]
   );
 
   return { getSortedData, handleRequestSort };

packages/yoroi-extension/app/UI/features/portfolio/module/PortfolioContextProvider.tsx

@@ -43,7 +43,7 @@ export const PortfolioContextProvider = ({
   currentWallet,
   openDialogWrapper,
 }: PortfolioProviderProps) => {
-  const { walletBalance, ftAssetList, selectedWallet, networkId, primaryTokenInfo, backendServiceZero } = currentWallet;
+  const { walletBalance, ftAssetList, selectedWallet, networkId, primaryTokenInfo, backendServiceZero, explorer } = currentWallet;
   if (selectedWallet === undefined) {
     return <></>;
   }
@@ -83,6 +83,7 @@ export const PortfolioContextProvider = ({
       openBuyDialog: () => openDialogWrapper(BuySellDialog),
       showWelcomeBanner: ftAssetList.length === 1,
       backendServiceZero: backendServiceZero,
+      explorer,
     }),
     [state, actions, ftAssetList]
   );