[wallet][MS-336] Custom wallet for coins/nft

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}
 			/>
@@ -52,7 +52,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/Highlights/index.tsx

@@ -1,12 +1,17 @@
+import type { FC } from 'react';
 import { useState } from 'react';
 import { StyleSheet } from 'react-native';
 import { Text, View } from '@walless/gui';
-import { mockWidgets } from 'state/widget';
+import type { WidgetDocument } from '@walless/store';
 
 import CardCarousel from './CardCarousel';
 import HighlightIndicator from './HighlightIndicator';
 
-const Highlights = () => {
+interface Props {
+	widgets: WidgetDocument[];
+}
+
+const Highlights: FC<Props> = ({ widgets }) => {
 	const [currentIndex, setCurrentIndex] = useState(0);
 
 	return (
@@ -18,14 +23,14 @@ const Highlights = () => {
 
 			<View style={styles.highlightList}>
 				<CardCarousel
-					widgets={mockWidgets}
+					widgets={widgets}
 					currentIndex={currentIndex}
 					onChangeCurrentIndex={setCurrentIndex}
 				/>
 
 				<HighlightIndicator
 					currentIndex={currentIndex}
-					dataLength={mockWidgets.length}
+					dataLength={widgets.length}
 				/>
 			</View>
 		</View>

apps/wallet/src/features/Explorer/Widgets/CategoryButton.tsx

@@ -5,14 +5,14 @@ import Animated, {
 	interpolateColor,
 	useAnimatedStyle,
 } from 'react-native-reanimated';
-import type { WidgetType } from '@walless/core';
+import type { WidgetCategories } from '@walless/core';
 
 const AnimatedHoverable = Animated.createAnimatedComponent(TouchableOpacity);
 
 interface CategoryButtonProps {
 	index: number;
-	title: WidgetType;
-	onPress: (index: number, category: WidgetType) => void;
+	title: WidgetCategories;
+	onPress: (index: number, category: WidgetCategories) => void;
 	animatedValue: SharedValue<number>;
 	data: number[];
 }

apps/wallet/src/features/Explorer/Widgets/CategoryButtons.tsx

@@ -1,28 +1,32 @@
 import type { FC } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { useSharedValue, withTiming } from 'react-native-reanimated';
-import { WidgetType } from '@walless/core';
+import { SubcategoryToCategoryMapping, WidgetCategories } from '@walless/core';
 import type { WidgetDocument } from '@walless/store';
-import { mockWidgets } from 'state/widget';
 
 import CategoryButton from './CategoryButton';
 
 interface CategoryButtonsProps {
+	widgets: WidgetDocument[];
 	setWidgets: (widgets: WidgetDocument[]) => void;
 }
 
-const CategoryButtons: FC<CategoryButtonsProps> = ({ setWidgets }) => {
+const CategoryButtons: FC<CategoryButtonsProps> = ({ widgets, setWidgets }) => {
 	const currentIndex = useSharedValue(0);
 	const animatedValue = useSharedValue(0);
-	const categories = Object.values(WidgetType);
+	const categories = Object.values(WidgetCategories);
 
 	const inputRange = categories.map((_, index) => index);
 
-	const handleCategoryPress = (activeIndex: number, category: WidgetType) => {
+	const handleCategoryPress = (
+		activeIndex: number,
+		category: WidgetCategories,
+	) => {
 		currentIndex.value = activeIndex;
 		animatedValue.value = withTiming(activeIndex);
-		const filteredLayoutCards = mockWidgets.filter(
-			(item) => item.widgetType === category,
+
+		const filteredLayoutCards = widgets.filter(
+			(widget) => SubcategoryToCategoryMapping[widget.category] === category,
 		);
 		setWidgets(filteredLayoutCards);
 	};