[MS-323][wallet] feat: PnL UI and API integration

.gitignore

@@ -74,4 +74,5 @@ cli/tokens/**/cache.json
 cli/tokens/**/config.json
 cli/tokens/**/sugar.log
 
-playground
+playground
+.nvmrc

apps/wallet/src/components/TokenList/Item.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { Image, StyleSheet } from 'react-native';
+import type { TokenPnL } from '@walless/core';
 import { Hoverable, Text, View } from '@walless/gui';
 import type { TokenDocument } from '@walless/store';
 import assets from 'utils/assets';
@@ -10,22 +11,31 @@ interface Props {
 	style?: StyleProp<ViewStyle>;
 	token: TokenDocument;
 	onPress?: () => void;
+	tokenPnL?: TokenPnL;
 }
 
-export const TokenItem: FC<Props> = ({ style, token, onPress }) => {
+export const TokenItem: FC<Props> = ({ style, token, onPress, tokenPnL }) => {
+	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 itemName = symbol || 'Unknown';
+	const isLost = pnl && pnl < 0;
 
 	return (
 		<Hoverable style={[styles.container, style]} onPress={onPress}>
 			<Image style={styles.iconImg} source={iconSource} resizeMode="cover" />
 			<View style={styles.infoContainer}>
 				<Text style={styles.primaryText}>{itemName}</Text>
-				<Text style={styles.secondaryText}>{formatQuote(unitQuote)}</Text>
+				<View style={styles.unitQuoteContainer}>
+					<Text style={styles.secondaryText}>{formatQuote(unitQuote)}</Text>
+					<Text style={isLost ? styles.lostText : styles.profitText}>
+						{isLost ? '-' : '+'}{' '}
+						{Math.abs(Math.round(pnl * 10000) / 10000 ?? 0)}%
+					</Text>
+				</View>
 			</View>
 			<View style={styles.balanceContainer}>
 				<Text style={styles.primaryText}>{balance}</Text>
@@ -75,4 +85,18 @@ const styles = StyleSheet.create({
 		color: '#566674',
 		fontSize: 13,
 	},
+	unitQuoteContainer: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 8,
+	},
+	profitText: {
+		color: '#60C591',
+		fontSize: 10,
+		alignSelf: 'flex-end',
+	},
+	lostText: {
+		color: '#AE3939',
+		fontSize: 10,
+	},
 });

apps/wallet/src/components/TokenList/index.tsx

@@ -42,6 +42,7 @@ export const TokenList = <T extends Token>({
 					index === tokens.length - 1 && styles.lastItem,
 				]}
 				onPress={handlePressItem}
+				tokenPnL={item.pnl}
 			/>
 		);
 	};

apps/wallet/src/components/TotalPnL.tsx

@@ -0,0 +1,113 @@
+import type { FC } from 'react';
+import { StyleSheet } from 'react-native';
+import { Text, View } from '@walless/gui';
+
+interface Props {
+	value: number;
+	percentage: number;
+	isDarkTheme: boolean;
+}
+
+const TotalPnL: FC<Props> = ({ value, percentage, isDarkTheme = false }) => {
+	const isLost = value < 0;
+
+	return (
+		<View style={styles.container}>
+			<Text
+				style={
+					isDarkTheme
+						? isLost
+							? styles.darkThemeLostValue
+							: styles.darkThemeProfitValue
+						: isLost
+							? styles.lightThemeLostValue
+							: styles.lightThemeProfitValue
+				}
+			>
+				{isLost ? `-$${-value}` : `+$${value}`}
+			</Text>
+			<View
+				style={[
+					styles.percentageContainer,
+					isDarkTheme
+						? isLost
+							? styles.darkThemeLostPercentageContainer
+							: styles.darkThemeProfitPercentageContainer
+						: isLost
+							? styles.lightThemeLostPercentageContainer
+							: styles.lightThemeProfitPercentageContainer,
+				]}
+			>
+				<Text
+					style={
+						isDarkTheme
+							? isLost
+								? styles.darkThemeLostPercentage
+								: styles.darkThemeProfitPercentage
+							: isLost
+								? styles.lightThemeLostPercentage
+								: styles.lightThemeProfitPercentage
+					}
+				>
+					{!isLost && '+'}
+					{percentage}%
+				</Text>
+			</View>
+		</View>
+	);
+};
+
+export default TotalPnL;
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 8,
+	},
+	lightThemeProfitValue: {
+		color: '#60C591',
+		fontSize: 20,
+	},
+	darkThemeProfitValue: {
+		color: '#ffffff',
+		fontSize: 20,
+	},
+	lightThemeLostValue: {
+		color: '#AE3939',
+		fontSize: 20,
+	},
+	darkThemeLostValue: {
+		color: '#ffffff',
+		fontSize: 20,
+	},
+	lightThemeProfitPercentage: {
+		color: '#60C591',
+	},
+	lightThemeLostPercentage: {
+		color: '#AE3939',
+	},
+	darkThemeProfitPercentage: {
+		color: '#ffffff',
+	},
+	darkThemeLostPercentage: {
+		color: '#ffffff',
+	},
+	percentageContainer: {
+		borderRadius: 4,
+		paddingVertical: 4,
+		paddingHorizontal: 8,
+	},
+	lightThemeProfitPercentageContainer: {
+		backgroundColor: '#AE393933',
+	},
+	darkThemeProfitPercentageContainer: {
+		backgroundColor: '#2A9960',
+	},
+	lightThemeLostPercentageContainer: {
+		backgroundColor: '#AE393933',
+	},
+	darkThemeLostPercentageContainer: {
+		backgroundColor: '#941200',
+	},
+});

apps/wallet/src/engine/runners/solana/subscription.ts

@@ -230,6 +230,8 @@ const handleInitAccountOnLogsChange = async (
 			const quotes = await getTokenQuotes([
 				{ address: token.mint, network: token.network },
 			]);
+			token.pnl =
+				quotes[makeHashId({ address: token.mint, network: token.network })].pnl;
 			token.quotes =
 				quotes[
 					makeHashId({ address: token.mint, network: token.network })

apps/wallet/src/engine/runners/solana/tokens.ts

@@ -4,7 +4,7 @@ import { LAMPORTS_PER_SOL } from '@solana/web3.js';
 import type { NetworkCluster, SolanaToken } from '@walless/core';
 import { Networks } from '@walless/core';
 import type { TokenDocument } from '@walless/store';
-import { getTokenQuote } from 'utils/api';
+import { getTokenQuote as getTokenInfo } from 'utils/api';
 import { solMint, wrappedSolMint } from 'utils/constants';
 import { addTokenToStorage } from 'utils/storage';
 
@@ -23,11 +23,12 @@ export const queryTokens = async (
 		cluster,
 		wallet,
 	).then(async (doc) => {
-		const quotes = await getTokenQuote({
+		const tokenInfo = await getTokenInfo({
 			address: wrappedSolMint,
 			network: doc.network,
 		});
-		doc.quotes = quotes?.quotes;
+		doc.quotes = tokenInfo?.quotes;
+		doc.pnl = tokenInfo?.pnl;
 
 		await addTokenToStorage(doc);
 		return doc;
@@ -42,11 +43,12 @@ export const queryTokens = async (
 				account,
 			);
 
-			const quotes = await getTokenQuote({
+			const tokenInfo = await getTokenInfo({
 				address: doc.mint,
 				network: doc.network,
 			});
-			doc.quotes = quotes?.quotes;
+			doc.quotes = tokenInfo?.quotes;
+			doc.pnl = tokenInfo?.pnl;
 
 			await addTokenToStorage(doc);
 			return doc;

apps/wallet/src/features/Home/TokenValue.tsx

@@ -2,37 +2,43 @@ import type { FC } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Hoverable, Text } from '@walless/gui';
 import { Eye, EyeOff } from '@walless/icons';
-import { useSettings } from 'utils/hooks';
+import TotalPnL from 'components/TotalPnL';
+import { useSettings, useTokens } from 'utils/hooks';
 
 interface Props {
 	value: number;
 }
 
 const TokenValue: FC<Props> = ({ value }) => {
 	const { setting, setPrivacy } = useSettings();
-	const balanceTextStyle = [
-		styles.balanceText,
-		setting.hideBalance && styles.protectedBalance,
-	];
+	const { valuation, pnl } = useTokens();
 
 	const handleToggleTokenValue = async () => {
 		setPrivacy(!setting.hideBalance);
 	};
+	const pnlRates = (pnl / (valuation != 0 ? valuation : 1)) * 100;
 
 	return (
 		<View style={styles.container}>
 			<Text style={styles.headingText}>Token value</Text>
-			<View style={styles.balanceContainer}>
-				<Text style={balanceTextStyle}>
-					{setting.hideBalance ? '****' : '$' + value.toFixed(2)}
-				</Text>
-				<Hoverable onPress={handleToggleTokenValue}>
-					{setting.hideBalance ? (
-						<Eye size={20} color="#566674" />
-					) : (
-						<EyeOff size={20} color="#566674" />
-					)}
-				</Hoverable>
+			<View style={styles.balanceAndPercentageContainer}>
+				<View style={styles.balanceContainer}>
+					<Text style={styles.balanceText}>
+						{setting.hideBalance ? '****' : '$' + value.toFixed(2)}
+					</Text>
+					<Hoverable onPress={handleToggleTokenValue}>
+						{setting.hideBalance ? (
+							<Eye size={20} color="#566674" />
+						) : (
+							<EyeOff size={20} color="#566674" />
+						)}
+					</Hoverable>
+				</View>
+				<TotalPnL
+					value={Math.round(pnl * 100) / 100}
+					percentage={Math.round(pnlRates * 100) / 100}
+					isDarkTheme={true}
+				/>
 			</View>
 		</View>
 	);
@@ -53,14 +59,13 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center',
 		gap: 12,
-		minHeight: 84,
 	},
 	balanceText: {
 		color: '#FFFFFF',
 		fontSize: 40,
 		fontWeight: '500',
 	},
-	protectedBalance: {
-		paddingTop: 16,
+	balanceAndPercentageContainer: {
+		alignItems: 'center',
 	},
 });

apps/wallet/src/features/Widget/BuiltInNetwork/WalletCard/Balance.tsx

@@ -2,23 +2,27 @@ import type { FC } from 'react';
 import { StyleSheet } from 'react-native';
 import { Hoverable, Text, View } from '@walless/gui';
 import { Eye, EyeOff } from '@walless/icons';
+import TotalPnL from 'components/TotalPnL';
 import { getValuationDisplay } from 'utils/helper';
 
 interface Props {
 	onHide: (next: boolean) => void;
 	hideBalance: boolean;
 	valuation?: number;
+	pnl?: number;
 }
 
 export const WalletBalance: FC<Props> = ({
 	onHide,
 	hideBalance,
 	valuation = 0,
+	pnl = 0,
 }) => {
 	const balanceTextStyle = [
 		styles.balanceText,
 		hideBalance && styles.protectedBalance,
 	];
+	const pnlRates = (pnl / (valuation != 0 ? valuation : 1)) * 100;
 
 	return (
 		<View style={styles.container}>
@@ -30,6 +34,13 @@ export const WalletBalance: FC<Props> = ({
 					{getValuationDisplay(valuation, hideBalance)}
 				</Text>
 			</View>
+			<View style={styles.pnLContainer}>
+				<TotalPnL
+					value={Math.round(pnl * 100) / 100}
+					percentage={Math.round(pnlRates * 100) / 100}
+					isDarkTheme={false}
+				/>
+			</View>
 		</View>
 	);
 };
@@ -44,7 +55,6 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center',
 		paddingLeft: 5,
-		paddingBottom: 20,
 		gap: 10,
 	},
 	balanceText: {
@@ -60,4 +70,7 @@ const styles = StyleSheet.create({
 		opacity: 0.6,
 		marginLeft: 34,
 	},
+	pnLContainer: {
+		paddingLeft: 10,
+	},
 });

apps/wallet/src/features/Widget/BuiltInNetwork/WalletCard/index.tsx

@@ -15,6 +15,7 @@ interface Props {
 	item: PublicKeyDocument;
 	skin: CardSkin;
 	valuation?: number;
+	pnl?: number;
 	hideBalance: boolean;
 	onCopyAddress?: (value: string) => void;
 	onChangePrivateSetting?: (value: boolean) => void;
@@ -26,6 +27,7 @@ export const WalletCard: FC<Props> = ({
 	item,
 	skin,
 	valuation = 0,
+	pnl = 0,
 	hideBalance,
 	onCopyAddress,
 	onChangePrivateSetting,
@@ -58,6 +60,7 @@ export const WalletCard: FC<Props> = ({
 				hideBalance={hideBalance}
 				valuation={valuation}
 				onHide={handleHide}
+				pnl={pnl}
 			/>
 			{skin.largeIconSrc && (
 				<View pointerEvents="none" style={styles.markContainer}>