chore: Merge branch 'dev' into check_old_pnl-1

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/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,7 +39,7 @@ 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}
@@ -53,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/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,
+	},
+});

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

@@ -0,0 +1,40 @@
+import type { FC } from 'react';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { View } from '@walless/gui';
+
+import type { WidgetButtonProps } from './ButtonItem';
+import { ButtonItem } from './ButtonItem';
+
+interface Props {
+	style?: ViewStyle;
+	buttons: WidgetButtonProps[];
+}
+
+const WidgetButtons: FC<Props> = ({ style, buttons }) => {
+	return (
+		<View style={[styles.container, style]}>
+			{buttons.map((item, idx) => (
+				<ButtonItem
+					key={idx}
+					Icon={item.Icon}
+					iconColor={item.iconColor}
+					iconSize={item.iconSize}
+					onPress={item.onPress}
+					style={item.style}
+					title={item.title}
+					titleStyle={item.titleStyle}
+				/>
+			))}
+		</View>
+	);
+};
+
+export default WidgetButtons;
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		gap: 18,
+	},
+});

apps/wallet/src/features/Explorer/Header.tsx

@@ -2,12 +2,11 @@ import type { FC } from 'react';
 import type { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { Hoverable, Text, View } from '@walless/gui';
-import { Eye, EyeOff, Settings } from '@walless/icons';
+import { Eye, EyeOff } from '@walless/icons';
 import { appState } from 'state/app';
 import { setPrivacy } from 'state/runtime/config';
 import { getValuationDisplay } from 'utils/helper';
 import { useTokens } from 'utils/hooks';
-import { navigate } from 'utils/navigation';
 import { useSnapshot } from 'valtio';
 
 interface Props {
@@ -18,20 +17,13 @@ const Header: FC<Props> = ({ style }) => {
 	const { config } = useSnapshot(appState);
 	const { valuation } = useTokens();
 
-	const handleNavigateToSettings = () => {
-		navigate('Dashboard', {
-			screen: 'Explore',
-			params: { screen: 'Profile', params: { screen: 'Setting' } },
-		});
-	};
-
 	return (
 		<View style={[styles.container, style]}>
 			<View style={styles.balanceContainer}>
 				<View style={styles.totalBalanceTextAndIconContainer}>
 					<Text style={styles.totalBalanceText}>Total balance</Text>
 					<Hoverable
-						style={!config.hideBalance && styles.eyeOffIcon}
+						style={[!config.hideBalance && styles.eyeOffIcon]}
 						onPress={() => {
 							setPrivacy(!config.hideBalance);
 						}}
@@ -55,10 +47,6 @@ const Header: FC<Props> = ({ style }) => {
 			</View>
 
 			<View style={styles.buttonContainer}>
-				<Hoverable onPress={handleNavigateToSettings} style={styles.button}>
-					<Settings size={20} color="#566674" />
-				</Hoverable>
-
 				{/* This button will be implemented in the next task, so I keep it here
 				for now in the comment */}
 				{/* <Hoverable style={styles.button}>

apps/wallet/src/features/Explorer/Highlights/CardCarousel.tsx

@@ -60,8 +60,16 @@ const CardCarousel: FC<Props> = ({
 			gestureStateManager.current = stateManager;
 		});
 
+	const hover = Gesture.Hover()
+		.onStart(() => {
+			pressed.current = true;
+		})
+		.onFinalize(() => {
+			pressed.current = false;
+		});
+
 	useEffect(() => {
-		const timer = setTimeout(() => {
+		const timer = setInterval(() => {
 			if (pressed.current) return;
 			if (currentIndex == widgets.length - 1) {
 				autoSwipeDirection.current = -1;
@@ -70,10 +78,10 @@ const CardCarousel: FC<Props> = ({
 			}
 
 			onChangeCurrentIndex(currentIndex + autoSwipeDirection.current);
-		}, 2000);
+		}, 4000);
 
-		return () => clearTimeout(timer);
-	}, [currentIndex, pressed]);
+		return () => clearInterval(timer);
+	}, [currentIndex]);
 
 	// manually end gesture when having any mouse up on web
 	useEffect(() => {
@@ -92,20 +100,22 @@ const CardCarousel: FC<Props> = ({
 
 	return (
 		<GestureDetector gesture={pan}>
-			<View style={styles.container}>
-				{widgets.map((card, index) => {
-					return (
-						<Card
-							key={card._id}
-							widget={card}
-							index={index}
-							currentIndex={currentIndex}
-							dataLength={widgets.length}
-							dragXOffset={xOffset}
-						/>
-					);
-				})}
-			</View>
+			<GestureDetector gesture={hover}>
+				<View style={styles.container}>
+					{widgets.map((card, index) => {
+						return (
+							<Card
+								key={card._id}
+								widget={card}
+								index={index}
+								currentIndex={currentIndex}
+								dataLength={widgets.length}
+								dragXOffset={xOffset}
+							/>
+						);
+					})}
+				</View>
+			</GestureDetector>
 		</GestureDetector>
 	);
 };