[wallet] release: wallet 1.2.2 with custom wallet, pnl, bugs fixing, pixeverse popup

.gitignore

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

apps/landing/components/layouts/Home/Navigation/LaunchingModal.tsx

@@ -46,7 +46,7 @@ const styles = StyleSheet.create({
 	},
 	button: {
 		marginHorizontal: 8,
-		alignSelf: 'flex-start',
+		alignSelf: 'flex-end',
 	},
 	line: {
 		backgroundColor: '#ffffff',

apps/landing/components/layouts/Home/Navigation/index.tsx

@@ -23,12 +23,13 @@ export const HomeNavigation: FC = () => {
 	const modalRef = useRef(null);
 
 	const temporarilyDisabled = false;
+
 	const handleShowLaunchingModal = () => {
 		modalActions.show({
 			id: 'launching',
 			fullWidth: false,
 			bindingRef: modalRef,
-			bindingDirection: BindDirections.InnerTopLeft,
+			bindingDirection: BindDirections.InnerTopRight,
 			animateDirection: AnimateDirections.Inner,
 			component: LaunchingModal,
 		});

apps/wallet/src/components/CollectibleList.tsx

@@ -0,0 +1,116 @@
+import type { FC } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { Text, View } from '@walless/gui';
+import type { NftDocument } from '@walless/store';
+import CollectionCard from 'components/CollectionCard';
+import type { WrappedCollection } from 'utils/hooks';
+import { useLazyGridLayout } from 'utils/hooks';
+import { navigate } from 'utils/navigation';
+
+interface Props {
+	collections?: WrappedCollection[];
+	nfts?: NftDocument[];
+}
+
+export const CollectibleList: FC<Props> = ({ collections = [], nfts = [] }) => {
+	const { onGridContainerLayout, width } = useLazyGridLayout({
+		referenceWidth: 150,
+		gap: gridGap,
+	});
+
+	const handlePressCollection = (ele: WrappedCollection) => {
+		const collectionId = ele._id.split('/')[2];
+
+		navigate('Dashboard', {
+			screen: 'Explore',
+			params: {
+				screen: 'Collection',
+				params: {
+					screen: 'Default',
+					params: { id: collectionId },
+				},
+			},
+		});
+	};
+
+	const handlePressCollectible = (ele: NftDocument) => {
+		const collectibleId = ele._id.split('/')[2];
+
+		navigate('Dashboard', {
+			screen: 'Explore',
+			params: {
+				screen: 'Collection',
+				params: { screen: 'NFT', params: { id: collectibleId } },
+			},
+		});
+	};
+
+	return (
+		<ScrollView
+			style={styles.container}
+			showsVerticalScrollIndicator={false}
+			onLayout={(e) => onGridContainerLayout(e.nativeEvent.layout)}
+		>
+			{collections.length === 0 && nfts.length === 0 && (
+				<View horizontal style={styles.emptyContainer}>
+					<Text style={styles.emptyText}>You do not have any NFT yet</Text>
+				</View>
+			)}
+			<View style={styles.contentContainer}>
+				{width > 0 &&
+					collections.map((ele, index) => {
+						return (
+							<CollectionCard
+								key={index}
+								item={ele}
+								collectibleCount={ele.count}
+								onPress={() => handlePressCollection(ele)}
+								size={width}
+							/>
+						);
+					})}
+			</View>
+
+			<View style={styles.contentContainer}>
+				{width > 0 &&
+					nfts.map((ele, index) => {
+						return (
+							<CollectionCard
+								key={index}
+								item={ele}
+								onPress={() => handlePressCollectible(ele)}
+								size={width}
+							/>
+						);
+					})}
+			</View>
+		</ScrollView>
+	);
+};
+
+export default CollectibleList;
+
+const gridGap = 18;
+const styles = StyleSheet.create({
+	container: {
+		marginTop: 16,
+		marginBottom: 32,
+		borderRadius: 12,
+		overflow: 'hidden',
+	},
+	contentContainer: {
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: gridGap,
+		overflow: 'hidden',
+	},
+	emptyContainer: {
+		flex: 1,
+		justifyContent: 'center',
+	},
+	emptyText: {
+		marginTop: 120,
+		fontSize: 13,
+		color: '#566674',
+	},
+});

apps/wallet/src/features/Widget/BuiltInNetwork/TokenList/Item.tsx → 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,33 @@ 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 fixedPnL = Math.round(pnl * 10000) / 10000;
 
 	const itemName = symbol || 'Unknown';
+	const isLost = fixedPnL < 0;
+	const isProfit = fixedPnL > 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 ? `-${-fixedPnL}` : isProfit ? `+${fixedPnL}` : null}
+					</Text>
+				</View>
 			</View>
 			<View style={styles.balanceContainer}>
 				<Text style={styles.primaryText}>{balance}</Text>
@@ -75,4 +87,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/features/Widget/BuiltInNetwork/TokenList/index.tsx → apps/wallet/src/components/TokenList/index.tsx

@@ -13,7 +13,7 @@ interface Props<T extends Token> {
 	itemStyle?: StyleProp<ViewStyle>;
 	separateStyle?: StyleProp<ViewStyle>;
 	contentContainerStyle?: StyleProp<ViewStyle>;
-	items: TokenDocument<T>[];
+	tokens: TokenDocument<T>[];
 	ListHeaderComponent?: ComponentType<TokenDocument<T>> | ReactElement;
 	onPressItem?: (item: TokenDocument<T>) => void;
 }
@@ -23,7 +23,7 @@ export const TokenList = <T extends Token>({
 	itemStyle,
 	separateStyle,
 	contentContainerStyle,
-	items,
+	tokens,
 	ListHeaderComponent,
 	onPressItem,
 }: Props<T>) => {
@@ -39,9 +39,10 @@ export const TokenList = <T extends Token>({
 				style={[
 					itemStyle,
 					index === 0 && styles.firstItem,
-					index === items.length - 1 && styles.lastItem,
+					index === tokens.length - 1 && styles.lastItem,
 				]}
 				onPress={handlePressItem}
+				tokenPnL={item.pnl}
 			/>
 		);
 	};
@@ -52,7 +53,7 @@ export const TokenList = <T extends Token>({
 			showsVerticalScrollIndicator={false}
 			style={style}
 			contentContainerStyle={contentContainerStyle}
-			data={items}
+			data={tokens}
 			renderItem={renderItem}
 			keyExtractor={(item) => item._id}
 			ItemSeparatorComponent={() => <Separator style={separateStyle} />}

apps/wallet/src/components/TotalPnL.tsx

@@ -0,0 +1,73 @@
+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;
+	const isProfit = value > 0;
+
+	return (
+		<View style={styles.container}>
+			<Text
+				style={[
+					styles.pnlTextBase,
+					styles.pnlValueBase,
+					isDarkTheme ? styles.darkThemePnLText : styles.lightThemePnLText,
+				]}
+			>
+				{isLost ? `≈ -$${-value}` : isProfit ? `≈ +$${value}` : null}
+			</Text>
+			<View
+				style={[
+					styles.percentageContainerBase,
+					isLost
+						? styles.LostPercentageContainer
+						: styles.ProfitPercentageContainer,
+				]}
+			>
+				<Text style={[styles.pnlTextBase]}>
+					{isLost ? `${percentage}%` : isProfit ? `+${percentage}%` : null}
+				</Text>
+			</View>
+		</View>
+	);
+};
+
+export default TotalPnL;
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 8,
+	},
+	pnlTextBase: {
+		color: '#ffffff',
+	},
+	pnlValueBase: {
+		fontSize: 20,
+	},
+	darkThemePnLText: {
+		color: '#babdc0',
+	},
+	lightThemePnLText: {
+		color: '#ffffff',
+	},
+	percentageContainerBase: {
+		borderRadius: 4,
+		paddingVertical: 4,
+		paddingHorizontal: 8,
+	},
+	ProfitPercentageContainer: {
+		backgroundColor: '#29985F',
+	},
+	LostPercentageContainer: {
+		backgroundColor: '#DB1901',
+	},
+});

apps/wallet/src/components/WidgetButtons/ButtonItem.tsx

@@ -0,0 +1,62 @@
+import type { FC } from 'react';
+import type { TextStyle, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Hoverable, Text, View } from '@walless/gui';
+import type { IconProps } from '@walless/icons';
+
+export interface WidgetButtonProps {
+	style?: ViewStyle;
+	title?: string;
+	titleStyle?: TextStyle;
+	Icon: FC<IconProps>;
+	iconColor?: string;
+	iconSize?: number;
+	onPress?: () => void;
+}
+
+export const ButtonItem: FC<WidgetButtonProps> = ({
+	Icon,
+	iconColor,
+	iconSize,
+	onPress,
+	style,
+	title,
+	titleStyle,
+}) => {
+	const innerStyle: ViewStyle = {
+		width: 38,
+		height: 38,
+		borderRadius: 12,
+		gap: 8,
+		backgroundColor: onPress ? '#0694D3' : '#43525F',
+		alignItems: 'center',
+		justifyContent: 'center',
+	};
+
+	return (
+		<View noSelect style={styles.container}>
+			<Hoverable
+				style={[innerStyle, style]}
+				onPress={onPress}
+				disabled={!onPress}
+			>
+				{<Icon color={iconColor} size={iconSize || 24} />}
+			</Hoverable>
+			{title && <Text style={[styles.title, titleStyle]}>{title}</Text>}
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: 'center',
+	},
+	innerContainer: {
+		borderRadius: 12,
+	},
+	title: {
+		color: '#4e5e6b',
+		fontSize: 13,
+		marginTop: 8,
+	},
+});