diff --git a/packages/yoroi-extension/app/UI/components/BackButton.tsx b/packages/yoroi-extension/app/UI/components/BackButton.tsx new file mode 100644 index 0000000000..7f50212dbb --- /dev/null +++ b/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 ( + }> + + {label} + + + ); +}; diff --git a/packages/yoroi-extension/app/UI/components/Input/SearchInput.tsx b/packages/yoroi-extension/app/UI/components/Input/SearchInput.tsx index 4901b59a8c..9be0e5b39d 100644 --- a/packages/yoroi-extension/app/UI/components/Input/SearchInput.tsx +++ b/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, }, })); diff --git a/packages/yoroi-extension/app/UI/components/icons/Switch.tsx b/packages/yoroi-extension/app/UI/components/icons/Switch.tsx new file mode 100644 index 0000000000..3983cb88e7 --- /dev/null +++ b/packages/yoroi-extension/app/UI/components/icons/Switch.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +export const Switch = () => { + return ( + + + + + ); +}; diff --git a/packages/yoroi-extension/app/UI/components/icons/index.ts b/packages/yoroi-extension/app/UI/components/icons/index.ts index c70a9049fe..c7d598b40b 100644 --- a/packages/yoroi-extension/app/UI/components/icons/index.ts +++ b/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, }; diff --git a/packages/yoroi-extension/app/UI/components/index.ts b/packages/yoroi-extension/app/UI/components/index.ts index dc48700ddb..32e85462b9 100644 --- a/packages/yoroi-extension/app/UI/components/index.ts +++ b/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'; diff --git a/packages/yoroi-extension/app/UI/features/portfolio/common/components/PlnTag.tsx b/packages/yoroi-extension/app/UI/features/portfolio/common/components/PlnTag.tsx index 9d2a580ce9..8ba1598467 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/common/components/PlnTag.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/common/components/PlnTag.tsx @@ -38,6 +38,9 @@ const PnlTag = ({ children, withIcon = false, variant = 'neutral' }: Props) => { {children} + + % + ); }; diff --git a/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx b/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx index c9f59dcb1f..da588c26f3 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/common/components/PortfolioHeader.tsx +++ b/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)} )} - + @@ -154,22 +162,15 @@ const LoadingSkeleton = () => ( ); -const CurrencyDisplay = ({ from, to, handleCurrencyChange }) => ( - - +const CurrencyDisplay = ({ from, handleCurrencyChange }) => ( + + {from} - - /{to} - - + + + + ); const Skeletons = ({ theme }) => ( diff --git a/packages/yoroi-extension/app/UI/features/portfolio/common/components/SortableTableHead.tsx b/packages/yoroi-extension/app/UI/features/portfolio/common/components/SortableTableHead.tsx index ea3cce86b7..ca1bf08cdf 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/common/components/SortableTableHead.tsx +++ b/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 { diff --git a/packages/yoroi-extension/app/UI/features/portfolio/common/components/Table.tsx b/packages/yoroi-extension/app/UI/features/portfolio/common/components/Table.tsx index 105f4681aa..fe9edac014 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/common/components/Table.tsx +++ b/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; diff --git a/packages/yoroi-extension/app/UI/features/portfolio/common/hooks/usePortfolioTokenChart.ts b/packages/yoroi-extension/app/UI/features/portfolio/common/hooks/usePortfolioTokenChart.ts index 0761c14ac3..b4a0ab586c 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/common/hooks/usePortfolioTokenChart.ts +++ b/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 diff --git a/packages/yoroi-extension/app/UI/features/portfolio/common/hooks/useStrings.ts b/packages/yoroi-extension/app/UI/features/portfolio/common/hooks/useStrings.ts index 82622a5c9a..a538de9ed1 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/common/hooks/useStrings.ts +++ b/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', diff --git a/packages/yoroi-extension/app/UI/features/portfolio/common/hooks/useTableSort.ts b/packages/yoroi-extension/app/UI/features/portfolio/common/hooks/useTableSort.ts index 309019b4e7..8c64f1fbde 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/common/hooks/useTableSort.ts +++ b/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,7 +13,6 @@ interface Props { headCells: IHeadCell[]; data: any[]; } - const useTableSort = ({ order, orderBy, setSortState, headCells, data }: Props) => { const handleRequestSort = (property: string) => { let direction: string | null = 'asc'; @@ -21,7 +20,7 @@ const useTableSort = ({ order, orderBy, setSortState, headCells, data }: Props) 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 }; diff --git a/packages/yoroi-extension/app/UI/features/portfolio/module/PortfolioContextProvider.tsx b/packages/yoroi-extension/app/UI/features/portfolio/module/PortfolioContextProvider.tsx index 34772bf9fc..dbd61d0056 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/module/PortfolioContextProvider.tsx +++ b/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] ); diff --git a/packages/yoroi-extension/app/UI/features/portfolio/module/state.ts b/packages/yoroi-extension/app/UI/features/portfolio/module/state.ts index 73a86bd9a8..032b0d1dfa 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/module/state.ts +++ b/packages/yoroi-extension/app/UI/features/portfolio/module/state.ts @@ -43,6 +43,7 @@ export type PortfolioState = { primaryTokenInfo: any; openBuyDialog: () => void; backendServiceZero: string; + explorer: { tokenInfo: { name: string; baseUrl: string } }; }; // Define default state @@ -60,6 +61,7 @@ export const defaultPortfolioState: PortfolioState = { showWelcomeBanner: false, openBuyDialog: () => {}, backendServiceZero: '', + explorer: { tokenInfo: { name: '', baseUrl: '' } }, }; // Define action handlers diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/Dapps/LiquidityTable.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/Dapps/LiquidityTable.tsx index fccc29121d..e9b49d49ea 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/Dapps/LiquidityTable.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/Dapps/LiquidityTable.tsx @@ -1,18 +1,17 @@ -import React from 'react'; -import { useMemo, useState } from 'react'; -import { TableCell, TableRow, Typography, Stack, Box } from '@mui/material'; +import { Box, Stack, TableCell, TableRow, Typography } from '@mui/material'; import { useTheme } from '@mui/material/styles'; -import { usePortfolio } from '../../module/PortfolioContextProvider'; +import React, { useMemo, useState } from 'react'; import adaPng from '../../../../../assets/images/ada.png'; +import { Skeleton } from '../../../../components'; import hoskyPng from '../../common/assets/images/hosky-token.png'; import minswapPng from '../../common/assets/images/minswap-dex.png'; -import { Skeleton } from '../../../../components'; +import Table from '../../common/components/Table'; +import { formatNumber } from '../../common/helpers/formatHelper'; import { useStrings } from '../../common/hooks/useStrings'; import useTableSort, { ISortState } from '../../common/hooks/useTableSort'; -import Table from '../../common/components/Table'; -import { IHeadCell } from '../../common/types/table'; import { LiquidityItemType } from '../../common/types/index'; -import { formatNumber } from '../../common/helpers/formatHelper'; +import { IHeadCell } from '../../common/types/table'; +import { usePortfolio } from '../../module/PortfolioContextProvider'; const TableRowSkeleton = ({ theme, ...props }) => ( { const theme: any = useTheme(); const strings = useStrings(); - const { unitOfAccount } = usePortfolio(); + const { unitOfAccount, primaryTokenInfo } = usePortfolio(); const [{ order, orderBy }, setSortState] = useState({ order: null, orderBy: null, @@ -183,7 +182,7 @@ const LiquidityTable = ({ data, isLoading }: Props): JSX.Element => { {formatNumber(row.firstTokenValue)} {row.firstToken.name} - {row.firstToken.name === 'ADA' && unitOfAccount === 'ADA' ? null : ( + {row.firstToken.name === primaryTokenInfo.name && unitOfAccount === primaryTokenInfo.name ? null : ( {formatNumber(row.firstTokenValueUsd)} {unitOfAccount} @@ -196,7 +195,7 @@ const LiquidityTable = ({ data, isLoading }: Props): JSX.Element => { {formatNumber(row.secondTokenValue)} {row.secondToken.name} - {row.secondToken.name === 'ADA' && unitOfAccount === 'ADA' ? null : ( + {row.secondToken.name === primaryTokenInfo.name && unitOfAccount === primaryTokenInfo.name ? null : ( {formatNumber(row.secondTokenValueUsd)} {unitOfAccount} @@ -213,7 +212,7 @@ const LiquidityTable = ({ data, isLoading }: Props): JSX.Element => { {formatNumber(row.totalValue)} {row.firstToken.name} - {unitOfAccount === 'ADA' && row.firstToken.name === 'ADA' ? null : ( + {unitOfAccount === primaryTokenInfo.name && row.firstToken.name === primaryTokenInfo.name ? null : ( {formatNumber(row.totalValueUsd)} {unitOfAccount} diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/Dapps/OrderTable.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/Dapps/OrderTable.tsx index aab0ad4c2b..c39f015884 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/Dapps/OrderTable.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/Dapps/OrderTable.tsx @@ -1,18 +1,18 @@ -import React, { useMemo, useState } from 'react'; -import { TableCell, TableRow, Typography, Stack, Box } from '@mui/material'; +import { Box, Stack, TableCell, TableRow, Typography } from '@mui/material'; import { useTheme } from '@mui/material/styles'; -import { useStrings } from '../../common/hooks/useStrings'; +import React, { useMemo, useState } from 'react'; import adaPng from '../../../../../assets/images/ada.png'; +import { truncateAddressShort } from '../../../../../utils/formatters'; +import { Skeleton } from '../../../../components'; import hoskyPng from '../../common/assets/images/hosky-token.png'; import minswapPng from '../../common/assets/images/minswap-dex.png'; -import { Skeleton } from '../../../../components'; -import { truncateAddressShort } from '../../../../../utils/formatters'; -import { usePortfolio } from '../../module/PortfolioContextProvider'; -import useTableSort, { ISortState } from '../../common/hooks/useTableSort'; import Table from '../../common/components/Table'; -import { IHeadCell } from '../../common/types/table'; -import { OrderItemType } from '../../common/types/index'; import { formatNumber } from '../../common/helpers/formatHelper'; +import { useStrings } from '../../common/hooks/useStrings'; +import useTableSort, { ISortState } from '../../common/hooks/useTableSort'; +import { OrderItemType } from '../../common/types/index'; +import { IHeadCell } from '../../common/types/table'; +import { usePortfolio } from '../../module/PortfolioContextProvider'; const TableRowSkeleton = ({ theme, ...props }) => ( { const theme = useTheme(); const strings = useStrings(); - const { unitOfAccount } = usePortfolio(); + const { unitOfAccount, primaryTokenInfo } = usePortfolio(); const [{ order, orderBy }, setSortState] = useState({ order: null, orderBy: null, @@ -197,7 +197,7 @@ const OrderTable = ({ data, isLoading }: Props): JSX.Element => { {formatNumber(row.totalValue)} {row.firstToken.name} - {row.firstToken.name === 'ADA' && unitOfAccount === 'ADA' ? null : ( + {row.firstToken.name === primaryTokenInfo.name && unitOfAccount === primaryTokenInfo.name ? null : ( {formatNumber(row.totalValueUsd)} {unitOfAccount} diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/AssetTransactionDetails/TransactionTable.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/AssetTransactionDetails/TransactionTable.tsx index b4e97d4758..295f833169 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/AssetTransactionDetails/TransactionTable.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/AssetTransactionDetails/TransactionTable.tsx @@ -122,6 +122,7 @@ const TransactionTable = ({ history, tokenName }: { history: TransactionItemType const TransactionHistoryItem = ({ index, row, theme, strings, unitOfAccount, headCells, tokenName }) => { const [isExpanded, setIsExpanded] = useState(false); + const { primaryTokenInfo } = usePortfolio(); return ( @@ -177,7 +178,7 @@ const TransactionHistoryItem = ({ index, row, theme, strings, unitOfAccount, hea {row.feeValue ? `${row.feeValue.toFixed(2)} ADA` : '-'} {isExpanded && - (unitOfAccount === 'ADA' ? null : ( + (unitOfAccount === primaryTokenInfo.name ? null : ( {row.feeValueUsd ? `${row.feeValueUsd.toFixed(2)} ${unitOfAccount}` : '-'} @@ -204,7 +205,7 @@ const TransactionHistoryItem = ({ index, row, theme, strings, unitOfAccount, hea {isExpanded ? ( - {unitOfAccount === 'ADA' ? null : ( + {unitOfAccount === primaryTokenInfo.name ? null : ( {(row.type === HistoryItemType.RECEIVED || row.type === HistoryItemType.WITHDRAW || diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/MarketPriceOverview.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/MarketPriceOverview.tsx index 17bdad9564..5601e79fd2 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/MarketPriceOverview.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/MarketPriceOverview.tsx @@ -33,17 +33,25 @@ export const TokenMarketPriceOverview = ({ chartData, detailInfo, tokenInfo, isD tokenActivity: { data24h }, } = usePortfolioTokenActivity(); - const priceChangeProcent = isPrimaryToken - ? detailInfo?.changePercent || changePercent - : !isEmpty(data24h) && data24h[tokenInfo?.info?.id][1].price.change; + const deltaPriceChange = + !isPrimaryToken && + !isEmpty(data24h) && + data24h[tokenInfo?.info?.id][1].price.close - data24h[tokenInfo?.info?.id][1].price.open; + + const priceChangeProcent = isPrimaryToken ? detailInfo?.changePercent || changePercent : !isEmpty(data24h) && deltaPriceChange; const priceChangeValue = isPrimaryToken ? detailInfo?.changeValue || changeValue : !isEmpty(data24h) && data24h[tokenInfo?.info?.id][1].price.close; - return ( - + - {tokenInfo.info.name} {strings.marketPrice} + {strings.marketPrice} diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/TokenChartInterval.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/TokenChartInterval.tsx index c27f098d7d..61854aa483 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/TokenChartInterval.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/TokenChartInterval.tsx @@ -101,7 +101,7 @@ export const TokenChartInterval = ({ tokenInfo }: Props): JSX.Element => { { const theme: any = useTheme(); const strings = useStrings(); - const { unitOfAccount, walletBalance, accountPair } = usePortfolio(); + const { unitOfAccount, walletBalance, accountPair, primaryTokenInfo } = usePortfolio(); const isPrimaryToken: boolean = tokenInfo.id === '-'; const tokenTotalAmount = isPrimaryToken ? walletBalance?.ada : tokenInfo.formatedAmount; if (tokenInfo.quantity === null) { @@ -51,7 +51,7 @@ const HeaderSection = ({ tokenInfo }: Props): JSX.Element => { return ( - {`${tokenInfo.info.name} ${strings.balance}`} + {strings.balance} @@ -72,8 +72,12 @@ const HeaderSection = ({ tokenInfo }: Props): JSX.Element => { - {isPrimaryToken ? (accountPair?.from.name === 'ADA' ? accountPair?.to.value : accountPair?.from.value) : totaPriceCalc}{' '} - {isPrimaryToken && unitOfAccount === 'ADA' ? DEFAULT_FIAT_PAIR : unitOfAccount} + {isPrimaryToken + ? accountPair?.from.name === primaryTokenInfo.name + ? accountPair?.to.value + : accountPair?.from.value + : totaPriceCalc}{' '} + {isPrimaryToken && unitOfAccount === primaryTokenInfo.name ? DEFAULT_FIAT_PAIR : unitOfAccount} diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/OverviewPerformanceDetails/Overview.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/OverviewPerformanceDetails/Overview.tsx index 6e0c4ed7c3..e9d263aae4 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/OverviewPerformanceDetails/Overview.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/OverviewPerformanceDetails/Overview.tsx @@ -2,7 +2,6 @@ import { Box, Link as LinkMui, Stack, Typography } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import React from 'react'; import { CopyButton } from '../../../../../components'; -import { getNetworkUrl } from '../../../../../utils/getNetworkUrl'; import tokenPng from '../../../common/assets/images/token.png'; import { isPrimaryToken } from '../../../common/helpers/isPrimary'; import { useStrings } from '../../../common/hooks/useStrings'; @@ -38,11 +37,11 @@ const Overview = ({ tokenInfo }: Props): JSX.Element => { - {tokenInfo.info.metadata.website && ( - - )} - - {isPrimary && } + {isPrimary ? ( <> @@ -56,7 +55,7 @@ const Overview = ({ tokenInfo }: Props): JSX.Element => { @@ -83,16 +82,15 @@ const TokenOverviewSection = ({ withCopy, isPrimary, }: TokenOverviewSectionTypes) => { - if (!value && !isPrimary) { - return <>; - } + // if (!value && !isPrimary) { + // return <>; + // } - const { networkId } = usePortfolio(); - const networkUrl = networkId !== null ? getNetworkUrl(networkId) : ''; + const { explorer } = usePortfolio(); const theme: any = useTheme(); return ( - + {label} @@ -101,27 +99,25 @@ const TokenOverviewSection = ({ - Cardanoscan - - - Adaex + {explorer.tokenInfo.name} ) : isExternalLink ? ( - {value} + {value || '-'} ) : ( - {value} + {value || '-'} )} {withCopy && } diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/OverviewPerformanceDetails/OverviewPerformance.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/OverviewPerformanceDetails/OverviewPerformance.tsx index 82333bdaa5..65d89f9e05 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/OverviewPerformanceDetails/OverviewPerformance.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/OverviewPerformanceDetails/OverviewPerformance.tsx @@ -1,8 +1,7 @@ -import { Box, Divider } from '@mui/material'; +import { Box, Typography } from '@mui/material'; import { styled, useTheme } from '@mui/material/styles'; import React, { useState } from 'react'; import { Card } from '../../../../../components'; -import Menu from '../../../common/components/Menu'; import { useStrings } from '../../../common/hooks/useStrings'; import { SubMenuOption } from '../../../common/types/index'; import TokenDetailOverview from './Overview'; @@ -33,22 +32,25 @@ const OverviewPerformance = ({ tokenInfo }: Props): JSX.Element => { // }, ]; - const [selectedTab, setSelectedTab] = useState(subMenuOptions[0]?.route); + const [selectedTab, _] = useState(subMenuOptions[0]?.route); - const isActiveItem = (route: string) => { - if (route === selectedTab) { - return true; - } else { - return false; - } - }; + // const isActiveItem = (route: string) => { + // if (route === selectedTab) { + // return true; + // } else { + // return false; + // } + // }; return ( - + + {strings.overview} + + {/* setSelectedTab(route)} isActiveItem={isActiveItem} /> - + */} {selectedTab === subMenuOptions[0]?.route ? ( diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/TokenDetails.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/TokenDetails.tsx index 62d40dc7fb..b5da8d1ba5 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/TokenDetails.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/TokenDetails.tsx @@ -1,8 +1,7 @@ -import { Box, Divider, Stack, Typography } from '@mui/material'; +import { Box, Divider, Stack } from '@mui/material'; import { styled, useTheme } from '@mui/material/styles'; import React from 'react'; -import { ReactComponent as BackIcon } from '../../../../../assets/images/assets-page/back-arrow.inline.svg'; -import { Card } from '../../../../components'; +import { BackButton, Card } from '../../../../components'; import NavigationButton from '../../common/components/NavigationButton'; import { useNavigateTo } from '../../common/hooks/useNavigateTo'; import { useStrings } from '../../common/hooks/useStrings'; @@ -23,14 +22,6 @@ interface Props { tokenInfo: TokenInfoType; } -const IconWrapper = styled(Box)(({ theme }: any) => ({ - '& svg': { - '& path': { - fill: theme.palette.ds.el_gray_medium, - }, - }, -})); - const TokenDetails = ({ tokenInfo }: Props): JSX.Element => { const theme: any = useTheme(); const navigateTo = useNavigateTo(); @@ -40,24 +31,7 @@ const TokenDetails = ({ tokenInfo }: Props): JSX.Element => { return (
- navigateTo.portfolio()} - sx={{ - color: theme.palette.ds.black_static, - display: 'flex', - gap: theme.spacing(2), - alignItems: 'center', - cursor: 'pointer', - }} - > - - - - - {strings.backToPortfolio} - - + navigateTo.portfolio()} /> navigateTo.swapPage(tokenInfo.info.id)} label={strings.swap} /> navigateTo.sendPage()} label={strings.send} /> diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/StatsTable.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/StatsTable.tsx index 73462ba739..f091161656 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/StatsTable.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/StatsTable.tsx @@ -1,4 +1,4 @@ -import { TableCell, TableRow } from '@mui/material'; +import { TableCell, TableRow, styled } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import React, { useMemo, useState } from 'react'; import { useCurrencyPairing } from '../../../../context/CurrencyContext'; @@ -16,6 +16,19 @@ import { usePortfolioTokenActivity } from '../../module/PortfolioTokenActivityPr import { TokenDisplay, TokenPrice, TokenPriceChangeChip, TokenPriceTotal, TokenProcentage } from './TableColumnsChip'; import { useProcessedTokenData } from './useProcentage'; +const STableRow = styled(TableRow)(({ theme }: any) => ({ + cursor: 'pointer', + transition: 'all 0.3s ease-in-out', + borderRadius: `${theme.shape.borderRadius}px`, + '& td': { border: 0 }, + '&:hover': { + backgroundColor: theme.palette.ds.bg_color_min, + }, +})); +const STableCell = styled(TableCell)(() => ({ + width: '15%', +})); + interface Props { data: TokenType[]; isLoading: boolean; @@ -58,7 +71,7 @@ const StatsTable = ({ data }: Props): JSX.Element => { }, ]; - const assetFormatedList = useProcessedTokenData({ data: list, ptActivity, data24h }); + const assetFormatedList = useProcessedTokenData({ data: list, ptActivity, data24h, data30d, data7d }); const { getSortedData, handleRequestSort } = useTableSort({ order, orderBy, setSortState, headCells, data: assetFormatedList }); return ( @@ -73,61 +86,49 @@ const StatsTable = ({ data }: Props): JSX.Element => { TableRowSkeleton={} > {getSortedData(assetFormatedList).map((row: any) => ( - navigateTo.portfolioDetail(row.id)} - sx={{ - cursor: 'pointer', - transition: 'all 0.3s ease-in-out', - borderRadius: `${theme.shape.borderRadius}px`, - '& td': { border: 0 }, - '&:hover': { - backgroundColor: theme.palette.ds.gray_c50, - }, - }} - > - + navigateTo.portfolioDetail(row.id)}> + - + - + - + - + - + - + - + - + - + - + - + - + - - + + ))} ); diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/TableColumnsChip.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/TableColumnsChip.tsx index dacd85ed5f..9e2d645e2d 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/TableColumnsChip.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/TableColumnsChip.tsx @@ -13,6 +13,7 @@ import { usePortfolio } from '../../module/PortfolioContextProvider'; export const TokenDisplay = ({ token }: { token: TokenInfoType }) => { const theme = useTheme(); + return ( { borderRadius: `${theme.shape.borderRadius}px`, }} component="img" - src={token.info.image || tokenPng} + src={token.info.image ?? tokenPng} > @@ -65,14 +66,36 @@ export const TokenPriceChangeChip = ({ const { changePercent, variantPnl } = priceChange(tokenPriceOpen, tokenPriceClose); + // console.log('ptTokenDataInterval?.[50]?.changePercent', ptTokenDataInterval?.[50]?.changePercent); + + const noDataToDisplay = Number.isNaN(changePercent); + + if (noDataToDisplay || changePercent === undefined) { + return ( + + + - + + + % + + + ); + } return ( - {formatPriceChange( - isPrimaryToken && timeInterval !== undefined ? ptTokenDataInterval?.[50]?.changePercent ?? 0 : changePercent ?? 0 - )} - % + {noDataToDisplay + ? '-' + : formatPriceChange( + isPrimaryToken && timeInterval !== undefined ? ptTokenDataInterval?.[167]?.changePercent ?? 0 : changePercent ?? 0 + )} @@ -121,7 +144,7 @@ export const TokenPriceTotal = ({ token, secondaryToken24Activity }) => { const tokenPrice = secondaryToken24Activity && secondaryToken24Activity[1].price?.close; const tokenQuantityAsBigInt = bigNumberToBigInt(token.quantity); - const showingAda = accountPair?.from.name === 'ADA'; + const showingAda = accountPair?.from.name === primaryTokenInfo.name; const currency = accountPair?.from.name; const decimals = isPrimary ? primaryTokenInfo.decimals : token.info.numberOfDecimals; @@ -134,32 +157,20 @@ export const TokenPriceTotal = ({ token, secondaryToken24Activity }) => { .times(showingAda ? 1 : new BigNumber(ptPrice)) .toFormat(decimals); - // if (token.info.name === 'SHIBA') { - // console.log('Token CALC DETAILS', { - // ptPrice, - // tokenQuantityAsBigInt, - // tokenPrice, - // name: token.info.name, - // decimals, - // confff: config.decimals, - // showingAda, - // }); - - // console.log('totaPrice', totaPrice); - // } const totalTicker = isPrimary && showingAda ? accountPair?.to.name : accountPair?.from.name; const totalTokenPrice = isPrimary && showingAda ? '' : `${totaPrice} ${totalTicker || DEFAULT_FIAT_PAIR}`; return ( - - {isPrimary ? walletBalance?.ada : token.formatedAmount} {token.info.name} + + {isPrimary ? walletBalance?.ada : token.formatedAmount} + {token.info.name} {token.name === accountPair?.to.name ? ( - + ) : ( - + {totalTokenPrice} )} @@ -174,10 +185,13 @@ export const TokenPrice = ({ secondaryToken24Activity, ptActivity, token }) => { const tokenPrice = secondaryToken24Activity && secondaryToken24Activity[1].price?.close; const ptPrice = ptActivity?.close; const ptUnitPrice = tokenPrice * ptPrice; + const priceDisplay = parseFloat(isPrimaryToken ? ptPrice : ptUnitPrice).toFixed(4); + + const noDataToDisplay = priceDisplay === 'NaN'; return ( - {parseFloat(isPrimaryToken ? ptPrice : ptUnitPrice).toFixed(4)} {unitOfAccount} + {noDataToDisplay ? '-' : `${priceDisplay} ${unitOfAccount}`} ); }; diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/useProcentage.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/useProcentage.tsx index 6261d5dc0c..37fb040cdf 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/useProcentage.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/useProcentage.tsx @@ -2,70 +2,81 @@ import { atomicBreakdown } from '@yoroi/common'; import BigNumber from 'bignumber.js'; import { useMemo } from 'react'; import { formatValue } from '../../common/components/PortfolioHeader'; +import { priceChange } from '../../common/helpers/priceChange'; import { usePortfolio } from '../../module/PortfolioContextProvider'; import { bigNumberToBigInt } from './TableColumnsChip'; -export const useProcessedTokenData = ({ data, ptActivity, data24h }) => { - const { accountPair, primaryTokenInfo } = usePortfolio(); +export const useProcessedTokenData = ({ data, ptActivity, data24h, data7d, data30d }) => { + const { primaryTokenInfo } = usePortfolio(); - // Helper function to calculate total fiat value for each token + // Helper to calculate fiat value and unit price for a token const calculateTotalFiatForToken = token => { const isPrimaryToken = token.id === '-'; - const secondaryToken24Activity = data24h && data24h[token.info.id]; + const secondaryToken24Activity = data24h?.[token.info.id]; const tokenPrice = - isPrimaryToken && secondaryToken24Activity === undefined - ? ptActivity?.close - : secondaryToken24Activity && secondaryToken24Activity[1].price?.close; - const tokenPriceFiat = tokenPrice ? new BigNumber(tokenPrice) : 1; - const tokenQuantityAsBigInt = bigNumberToBigInt(token.quantity); - const decimals = isPrimaryToken ? primaryTokenInfo.decimals : token.info.numberOfDecimals; + isPrimaryToken && !secondaryToken24Activity ? ptActivity?.close : secondaryToken24Activity?.[1].price?.close || 1; - const totalValue = atomicBreakdown(tokenQuantityAsBigInt, decimals) - .bn.times(tokenPriceFiat) - .times(new BigNumber(ptActivity?.close)) + const tokenQuantity = atomicBreakdown( + bigNumberToBigInt(token.quantity), + isPrimaryToken ? primaryTokenInfo.decimals : token.info.numberOfDecimals + ); + const totalValue = tokenQuantity.bn + .times(new BigNumber(tokenPrice)) + .times(new BigNumber(ptActivity?.close || 1)) .toNumber(); + const unitPrice = parseFloat((tokenPrice * ptActivity?.close || 1).toFixed(4)); const primaryTokenFiatTotalAmount = formatValue(primaryTokenInfo.quantity.multipliedBy(String(ptActivity?.close))); - const totalTokenPrice = isPrimaryToken ? primaryTokenFiatTotalAmount : totalValue; - const unitPrice = accountPair?.from.name === 'ADA' ? tokenPrice : Number(totalTokenPrice) / Number(token.shiftedAmount); + return { totalValue: isPrimaryToken ? primaryTokenFiatTotalAmount : totalValue, unitPrice }; + }; - return { totalValue: totalTokenPrice, unitPrice }; + const getTokenActivityChange = (tokenId, activityData, isPrimaryToken) => { + const activity = activityData?.[tokenId]; + return isPrimaryToken + ? { open: ptActivity?.open, close: ptActivity?.close } + : { open: activity?.[1].price?.open, close: activity?.[1].price?.close }; }; - // Use useMemo to calculate fiat values, percentages, and sort by percentage + // Memoized data processing const processedData = useMemo(() => { - // Calculate total fiat values for all tokens const tokenFiatValues = data.reduce((acc, token) => { - const totalFiat = calculateTotalFiatForToken(token); - - acc[token.info.id] = totalFiat; + acc[token.info.id] = calculateTotalFiatForToken(token); return acc; }, {}); - // Calculate total portfolio value - const totalPortfolioValue: any = Object.values(tokenFiatValues).reduce((sum, value: any) => { - return Number(sum) + Number(value?.totalValue); - }, 0); + const totalPortfolioValue = Object.values(tokenFiatValues).reduce( + (sum: number, { totalValue }: any) => sum + Number(totalValue), + 0 + ); - // Calculate percentages for each token and then sort by percentage - const sortedData = data + return data .map(token => { - const { totalValue, unitPrice } = tokenFiatValues[token.info.id] || 0; - const percentage = totalPortfolioValue > 0 ? (totalValue / totalPortfolioValue) * 100 : 0; + const { totalValue, unitPrice } = tokenFiatValues[token.info.id] || {}; + const percentage = totalPortfolioValue ? (totalValue / Number(totalPortfolioValue)) * 100 : 0; + const isPrimaryToken = token.id === '-'; + + const { open: open24, close: close24 } = getTokenActivityChange(token.info.id, data24h, isPrimaryToken); + const { open: open7d, close: close7d } = getTokenActivityChange(token.info.id, data7d, isPrimaryToken); + const { open: open30d, close: close30d } = getTokenActivityChange(token.info.id, data30d, isPrimaryToken); + + const changePercent24 = priceChange(open24, close24).changePercent; + const changePercent7d = priceChange(open7d, close7d).changePercent; + const changePercent30d = priceChange(open30d, close30d).changePercent; return { ...token, - totalValue, percentage, - unitPrice, + totalAmount: totalValue, + price: unitPrice, + '24h': changePercent24, + '1W': Number(changePercent7d), + '1M': changePercent30d, }; }) - .sort((a, b) => b.percentage - a.percentage); // Sort by percentage in ascending order - - return sortedData; - }, [data, ptActivity, data24h, accountPair, primaryTokenInfo]); + .sort((a, b) => b.percentage - a.percentage); + }, [data, ptActivity, data24h, data7d, data30d, primaryTokenInfo]); return processedData; }; diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/Wallet/PortfolioWallet.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/Wallet/PortfolioWallet.tsx index 6b2f21de7a..eddb007961 100644 --- a/packages/yoroi-extension/app/UI/features/portfolio/useCases/Wallet/PortfolioWallet.tsx +++ b/packages/yoroi-extension/app/UI/features/portfolio/useCases/Wallet/PortfolioWallet.tsx @@ -23,12 +23,11 @@ const PortfolioWallet = (): JSX.Element => { } const lowercaseKeyword = keyword.toLowerCase(); - const temp = ftAssetList.filter(item => { return ( item.info.name.toLowerCase().includes(lowercaseKeyword) || - item.info.id.toLowerCase().includes(lowercaseKeyword) || - item.info.policyId.toLowerCase().includes(lowercaseKeyword) + item.info.policyId.toLowerCase() === lowercaseKeyword || + item.info.fingerprint.toLowerCase() === lowercaseKeyword ); }); if (temp && temp.length > 0) { diff --git a/packages/yoroi-extension/app/UI/pages/portfolio/layout.tsx b/packages/yoroi-extension/app/UI/pages/portfolio/layout.tsx index e66fa6c756..a0090ac8ca 100644 --- a/packages/yoroi-extension/app/UI/pages/portfolio/layout.tsx +++ b/packages/yoroi-extension/app/UI/pages/portfolio/layout.tsx @@ -35,7 +35,7 @@ const PortfolioLayout = ({ stores, actions, children }: Props): JSX.Element => { } + title={} // menu={menu} /> } diff --git a/packages/yoroi-extension/app/UI/types/currrentWallet.ts b/packages/yoroi-extension/app/UI/types/currrentWallet.ts index 04fc518820..100ede892a 100644 --- a/packages/yoroi-extension/app/UI/types/currrentWallet.ts +++ b/packages/yoroi-extension/app/UI/types/currrentWallet.ts @@ -42,4 +42,5 @@ export type CurrentWalletType = { primaryTokenInfo: PrimaryTokenInfo; walletBalance: WalletBalance; ftAssetList: any[]; + explorer: { tokenInfo: { name: string; baseUrl: string } }; }; diff --git a/packages/yoroi-extension/app/UI/utils/createCurrentWalletInfo.ts b/packages/yoroi-extension/app/UI/utils/createCurrentWalletInfo.ts index f619304c7c..a715ae54f2 100644 --- a/packages/yoroi-extension/app/UI/utils/createCurrentWalletInfo.ts +++ b/packages/yoroi-extension/app/UI/utils/createCurrentWalletInfo.ts @@ -141,7 +141,7 @@ const groupTransactionsByDay = transactions => { }; export const createCurrrentWalletInfo = (stores: any): CurrentWalletType | undefined => { - const { wallets, delegation, tokenInfoStore } = stores; + const { wallets, delegation, tokenInfoStore, explorers } = stores; try { const walletCurrentPoolInfo = getStakePoolMeta(stores); @@ -173,11 +173,14 @@ export const createCurrrentWalletInfo = (stores: any): CurrentWalletType | undef const isHardware: boolean = selectedWallet.isHardware; - // Asset List + // FT Asset List const ftAssetList = getAssetWalletAssetList(stores); const groupedTx = groupTransactionsByDay(stores.transactions.recent); + const selectedExplorer = explorers.selectedExplorer.get(networkId); + const explorerTransactionInfo = selectedExplorer.getOrDefault('token'); + return { currentPool: walletCurrentPoolInfo, networkId, @@ -197,6 +200,7 @@ export const createCurrrentWalletInfo = (stores: any): CurrentWalletType | undef ada: `${beforeDecimalRewards}${afterDecimalRewards}`, }, ftAssetList: ftAssetList, + explorer: { tokenInfo: explorerTransactionInfo }, }; } catch (error) { console.warn('ERROR trying to create wallet info', error); diff --git a/packages/yoroi-extension/app/components/layout/TopBarLayout.js b/packages/yoroi-extension/app/components/layout/TopBarLayout.js index f4e254bbc4..01f536b7ed 100644 --- a/packages/yoroi-extension/app/components/layout/TopBarLayout.js +++ b/packages/yoroi-extension/app/components/layout/TopBarLayout.js @@ -74,7 +74,7 @@ function TopBarLayout({ flex: '0 1 auto', height: '100%', }), - overflow: isRevamp ? 'auto' : 'unset', + overflow: 'scroll', }} > {isRevamp ? ( diff --git a/packages/yoroi-extension/app/components/wallet/assets/NFTDetails.js b/packages/yoroi-extension/app/components/wallet/assets/NFTDetails.js index bbc0e9c07f..442e9deadf 100644 --- a/packages/yoroi-extension/app/components/wallet/assets/NFTDetails.js +++ b/packages/yoroi-extension/app/components/wallet/assets/NFTDetails.js @@ -121,7 +121,7 @@ const SImageButton = styled(IconButton)(({ theme }) => ({ })); const STypography = styled(Typography)(({ theme }) => ({ - color: theme.palette.ds.el_gray_medium + color: theme.palette.ds.el_gray_medium, })); function NFTDetails({ nftInfo, network, intl, nextNftId, prevNftId, tab }: Props & Intl): Node { @@ -172,7 +172,9 @@ function NFTDetails({ nftInfo, network, intl, nextNftId, prevNftId, tab }: Props return ( }> - {intl.formatMessage(messages.back)} + + {intl.formatMessage(messages.back)} + { + const colorsByType = { + send: { bg: ds.primary_100, icon: ds.primary_600 }, + receive: { bg: ds.secondary_100, icon: ds.secondary_600 }, + reward: { bg: ds.secondary_100, icon: ds.secondary_600 }, + error: { bg: ds.magenta_100, icon: ds.magenta_500 }, + stake: { bg: ds.secondary_100, icon: ds.secondary_600 }, + }; + + return colorsByType[type] || { bg: ds.primary_100, icon: ds.primary_600 }; +}; + +const IconWrapper = styled(Box)(({ isDark, colors }) => ({ + '& svg': { + '& rect': { + fill: isDark && colors.bg, + }, + '& path': { + fill: isDark && colors.icon, + }, + }, +})); + const TypeIcon = ({ type }) => { const Icon = icons[type]; - return {Icon && }; + const theme = useTheme(); + const colors = getColors(theme.palette.ds, type); + const isDark = theme.name === 'dark-theme'; + + return ( + + + {Icon && } + + + ); }; diff --git a/packages/yoroi-extension/app/i18n/locales/en-US.json b/packages/yoroi-extension/app/i18n/locales/en-US.json index 6d6485a998..85d8c67666 100644 --- a/packages/yoroi-extension/app/i18n/locales/en-US.json +++ b/packages/yoroi-extension/app/i18n/locales/en-US.json @@ -1119,7 +1119,7 @@ "portfolio.button.liquidityPool": "Liquidity pool", "portfolio.button.openOrders": "Open orders", "portfolio.button.lendAndBorrow": "Lend & Borrow", - "portfolio.tokenInfo.balance": "balance", + "portfolio.tokenInfo.balance": "Balance", "portfolio.tokenInfo.marketPrice": "Market price", "portfolio.tokenInfo.menuLabel.overview": "Overview", "portfolio.tokenInfo.menuLabel.performance": "Performance", diff --git a/packages/yoroi-extension/app/stores/stateless/sidebarCategories.js b/packages/yoroi-extension/app/stores/stateless/sidebarCategories.js index 23125e88d5..524bd54c57 100644 --- a/packages/yoroi-extension/app/stores/stateless/sidebarCategories.js +++ b/packages/yoroi-extension/app/stores/stateless/sidebarCategories.js @@ -17,7 +17,6 @@ import environment from '../../environment'; import globalMessages, { connectorMessages } from '../../i18n/global-messages'; import { ROUTES } from '../../routes-config'; import type { WalletState } from '../../../chrome/extension/background/types'; -import { ReactComponent as assetsIcon } from '../../assets/images/sidebar/revamp/assets.inline.svg'; export type SidebarCategory = {| +className: string, @@ -131,13 +130,6 @@ export const allCategoriesRevamp: Array = [ label: globalMessages.sidebarSwap, isVisible: ({ selected }) => !selected?.isTestnet, }, - { - className: 'assets', - route: ROUTES.ASSETS.ROOT, - icon: assetsIcon, - label: globalMessages.sidebarAssets, - isVisible: () => environment.isProduction() || environment.isDev(), - }, { className: 'portfolio', route: ROUTES.PORTFOLIO.ROOT,