diff --git a/apps/wallet/src/components/TokenList/Item.tsx b/apps/wallet/src/components/TokenList/Item.tsx index 26935d4fd..3107e164f 100644 --- a/apps/wallet/src/components/TokenList/Item.tsx +++ b/apps/wallet/src/components/TokenList/Item.tsx @@ -15,14 +15,17 @@ interface Props { } export const TokenItem: FC = ({ style, token, onPress, tokenPnL }) => { - const pnl = tokenPnL?.priceChangePercentage24H || 0; + const pnl = tokenPnL?.priceChangePercentage24H ?? 0; const { symbol, image, quotes, balance } = token; const unitQuote = quotes?.usd; const totalQuote = unitQuote && unitQuote * balance; + const iconSource = image ? { uri: image } : assets.misc.unknownToken; + const fixedPnL = Math.round(pnl * 10000) / 10000; const itemName = symbol || 'Unknown'; - const isLost = pnl && pnl < 0; + const isLost = fixedPnL < 0; + const isProfit = fixedPnL > 0; return ( @@ -32,8 +35,7 @@ export const TokenItem: FC = ({ style, token, onPress, tokenPnL }) => { {formatQuote(unitQuote)} - {isLost ? '-' : '+'}{' '} - {Math.abs(Math.round(pnl * 10000) / 10000 ?? 0)}% + {isLost ? `-${-fixedPnL}` : isProfit ? `+${fixedPnL}` : null} diff --git a/apps/wallet/src/components/TotalPnL.tsx b/apps/wallet/src/components/TotalPnL.tsx index 80141b69f..1e0d02a23 100644 --- a/apps/wallet/src/components/TotalPnL.tsx +++ b/apps/wallet/src/components/TotalPnL.tsx @@ -10,47 +10,29 @@ interface Props { const TotalPnL: FC = ({ value, percentage, isDarkTheme = false }) => { const isLost = value < 0; + const isProfit = value > 0; return ( - {isLost ? `-$${-value}` : `+$${value}`} + {isLost ? `≈ -$${-value}` : isProfit ? `≈ +$${value}` : null} - - {!isLost && '+'} - {percentage}% + + {isLost ? `${percentage}%` : isProfit ? `+${percentage}%` : null} @@ -65,49 +47,27 @@ const styles = StyleSheet.create({ alignItems: 'center', gap: 8, }, - lightThemeProfitValue: { - color: '#60C591', - fontSize: 20, - }, - darkThemeProfitValue: { + pnlTextBase: { color: '#ffffff', - fontSize: 20, }, - lightThemeLostValue: { - color: '#AE3939', + pnlValueBase: { fontSize: 20, }, - darkThemeLostValue: { - color: '#ffffff', - fontSize: 20, + darkThemePnLText: { + color: '#babdc0', }, - lightThemeProfitPercentage: { - color: '#60C591', - }, - lightThemeLostPercentage: { - color: '#AE3939', - }, - darkThemeProfitPercentage: { - color: '#ffffff', - }, - darkThemeLostPercentage: { + lightThemePnLText: { color: '#ffffff', }, - percentageContainer: { + percentageContainerBase: { borderRadius: 4, paddingVertical: 4, paddingHorizontal: 8, }, - lightThemeProfitPercentageContainer: { - backgroundColor: '#AE393933', - }, - darkThemeProfitPercentageContainer: { - backgroundColor: '#2A9960', - }, - lightThemeLostPercentageContainer: { - backgroundColor: '#AE393933', + ProfitPercentageContainer: { + backgroundColor: '#29985F', }, - darkThemeLostPercentageContainer: { - backgroundColor: '#941200', + LostPercentageContainer: { + backgroundColor: '#DB1901', }, });