widget store flow

apps/landing/raf.js

@@ -0,0 +1,6 @@
+const raf = require('raf');
+
+const polys = {};
+raf.polyfill(polys);
+
+module.exports = polys.requestAnimationFrame;

apps/widgets/package.json

@@ -20,7 +20,6 @@
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.7",
-    "@types/react-native": "^0.71.2",
-    "valtio": "^1.10.5"
+    "@types/react-native": "^0.71.2"
   }
 }

apps/widgets/raf.js

@@ -0,0 +1,6 @@
+const raf = require('raf');
+
+const polys = {};
+raf.polyfill(polys);
+
+module.exports = polys.requestAnimationFrame;

apps/widgets/src/components/layouts/DashboardLayout.tsx

@@ -0,0 +1,19 @@
+import type { FC, ReactNode } from 'react';
+import { View } from '@walless/gui';
+
+import { Header } from '.';
+
+interface Props {
+	children: ReactNode;
+}
+
+export const DashboardLayout: FC<Props> = ({ children }) => {
+	return (
+		<View>
+			<Header />
+			{children}
+		</View>
+	);
+};
+
+export default DashboardLayout;

apps/widgets/src/components/layouts/Header/index.tsx

@@ -1,9 +1,10 @@
 import { Image, StyleSheet } from 'react-native';
-import { Button, View } from '@walless/gui';
+import { Button, dimensionState, View } from '@walless/gui';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { resources } from 'utils/config';
 import { sharedStyles } from 'utils/style';
+import { useSnapshot } from 'valtio';
 
 import NavigationItem from './Item';
 
@@ -24,6 +25,7 @@ export const navigationItems: NavigationItemProps[] = [
 ];
 
 export const Header = () => {
+	const { responsiveLevel } = useSnapshot(dimensionState);
 	const router = useRouter();
 
 	const isLayoutDetail = router.pathname.includes('/layouts/');
@@ -34,24 +36,23 @@ export const Header = () => {
 				<Image source={resources.walless.horizontalLogo} style={styles.logo} />
 			</Link>
 			<View horizontal style={styles.groupItem}>
-				{navigationItems.map((item) => (
-					<NavigationItem
-						key={item.href}
-						item={item}
-						isActive={
-							router.pathname === item.href ||
-							(isLayoutDetail && item.href === '/')
-						}
-					/>
-				))}
-			</View>
-			<View style={styles.buttonContainer}>
-				<Button
-					style={styles.button}
-					title="Join waitlist"
-					titleStyle={styles.buttonTitle}
-				/>
+				{responsiveLevel < 2 &&
+					navigationItems.map((item) => (
+						<NavigationItem
+							key={item.href}
+							item={item}
+							isActive={
+								router.pathname === item.href ||
+								(isLayoutDetail && item.href === '/')
+							}
+						/>
+					))}
 			</View>
+			<Button
+				style={styles.button}
+				title="Join waitlist"
+				titleStyle={styles.buttonTitle}
+			/>
 		</View>
 	);
 };
@@ -61,9 +62,10 @@ export default Header;
 const styles = StyleSheet.create({
 	container: {
 		...sharedStyles.container,
+		maxWidth: 1200,
 		justifyContent: 'space-between',
 		alignItems: 'center',
-		paddingHorizontal: 40,
+		paddingHorizontal: 16,
 		paddingVertical: 20,
 	},
 	logo: {
@@ -73,10 +75,6 @@ const styles = StyleSheet.create({
 	groupItem: {
 		justifyContent: 'center',
 	},
-	buttonContainer: {
-		width: 256,
-		alignItems: 'flex-end',
-	},
 	button: {
 		paddingHorizontal: 30,
 		paddingVertical: 10,

apps/widgets/src/components/layouts/index.ts

@@ -1,3 +1,4 @@
+export { DashboardLayout } from './DashboardLayout';
 export { Footer } from './Footer';
 export { Header } from './Header';
 export { HomeLayout } from './HomeLayout';

apps/widgets/src/features/WalletCustomizeSection/index.tsx

@@ -2,10 +2,17 @@ import { StyleSheet } from 'react-native';
 import { BulletSeparator } from '@walless/app';
 import { Button, Text, View } from '@walless/gui';
 import Image from 'next/image';
+import { useRouter } from 'next/router';
 
 import { particles } from './components/shared';
 
 const WalletCustomizeSection = () => {
+	const router = useRouter();
+
+	const handlePressNewLayout = () => {
+		router.push('/dashboard/design-tool');
+	};
+
 	return (
 		<View>
 			<View>
@@ -33,6 +40,7 @@ const WalletCustomizeSection = () => {
 						style={styles.button}
 						title="Make your layout"
 						titleStyle={styles.buttonText}
+						onPress={handlePressNewLayout}
 					/>
 				</View>
 

apps/widgets/src/features/dashboard/EditTool/Header.tsx

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import { Text } from '@walless/gui';
+
+const Header = () => {
+	return (
+		<Text style={styles.mainText}>
+			Design tool - Preview
+			{/* - <Text style={styles.highlightedText}>Walless</Text> */}
+		</Text>
+	);
+};
+
+export default Header;
+
+const styles = StyleSheet.create({
+	mainText: {
+		fontSize: 30,
+		maxWidth: 600,
+		color: '#ffffff',
+	},
+	highlightedText: {
+		color: '#0694D3',
+	},
+});

apps/widgets/src/features/dashboard/EditTool/PreviewOutline/index.tsx

@@ -0,0 +1,64 @@
+import type { FC } from 'react';
+import { memo } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { Button, dimensionState, View } from '@walless/gui';
+// import Image from 'next/image';
+import { useSnapshot } from 'valtio';
+
+import type { ToolboxItem } from '../internal';
+
+interface PreviewOutlineProps {
+	tools: ToolboxItem[];
+	activeTool: ToolboxItem;
+	setActiveTool: (tool: ToolboxItem) => void;
+}
+
+const PreviewOutline: FC<PreviewOutlineProps> = ({
+	tools,
+	activeTool,
+	setActiveTool,
+}) => {
+	const { responsiveLevel } = useSnapshot(dimensionState);
+	const activeSize = responsiveLevel < 2 ? 1.2 : 1;
+	const width = [56, 56, 48, 40][responsiveLevel];
+
+	return (
+		<View horizontal={responsiveLevel < 2} style={styles.container}>
+			{tools.map((tool) => {
+				const borderColor = activeTool === tool ? '#19A3E1' : 'white';
+				return (
+					<Button
+						key={tool.name}
+						style={{ ...styles.button, borderColor }}
+						onPress={() => setActiveTool(tool)}
+					>
+						<Image
+							source={{ uri: tool.previewImage }}
+							alt={tool.name}
+							style={{
+								width: width * (activeTool === tool ? activeSize : 1),
+								aspectRatio: 56 / 84,
+							}}
+						/>
+					</Button>
+				);
+			})}
+		</View>
+	);
+};
+
+export default memo(PreviewOutline);
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: 'flex-start',
+		gap: 10,
+	},
+	button: {
+		borderWidth: 2,
+		borderRadius: 5,
+		backgroundColor: 'transparent',
+		paddingHorizontal: 0,
+		paddingVertical: 0,
+	},
+});

apps/widgets/src/features/dashboard/EditTool/PreviewScreen/Detail/CollectibleList/Item.tsx

@@ -0,0 +1,44 @@
+import type { FC } from 'react';
+import { Image } from 'react-native';
+import { Text, View } from '@walless/gui';
+import type { MetadataDocument } from '@walless/store';
+
+interface Props {
+	item: MetadataDocument;
+}
+
+const CollectibleItem: FC<Props> = ({ item }) => {
+	const imgSize = 130;
+	const { name, imageUri } = item;
+	const iconSource = {
+		uri: imageUri || '/img/question.png',
+	};
+	return (
+		<View
+			style={{
+				padding: 12,
+				backgroundColor: '#131C24',
+				alignItems: 'center',
+				gap: 10,
+				borderRadius: 10,
+			}}
+		>
+			<Image
+				style={{
+					width: imgSize,
+					height: imgSize,
+					backgroundColor: '#0B1218',
+					borderRadius: 10,
+				}}
+				source={iconSource}
+			/>
+
+			<View>
+				<Text>{`${name?.slice(0, 10)}...`}</Text>
+				<Text>40</Text>
+			</View>
+		</View>
+	);
+};
+
+export default CollectibleItem;

apps/widgets/src/features/dashboard/EditTool/PreviewScreen/Detail/CollectibleList/index.tsx

@@ -0,0 +1,34 @@
+import type { FC } from 'react';
+import { ScrollView } from 'react-native';
+import { View } from '@walless/gui';
+import type { MetadataDocument } from '@walless/store';
+
+import CollectibleItem from './Item';
+
+interface Props {
+	items: MetadataDocument[];
+}
+
+export const CollectibleList: FC<Props> = ({ items }) => {
+	const leftColumnItems = items.filter((_, index) => index % 2 === 0);
+	const rightColumnItems = items.filter((_, index) => index % 2 !== 0);
+
+	return (
+		<ScrollView contentContainerStyle={{ gap: 15 }}>
+			<View horizontal>
+				<View>
+					{leftColumnItems.map((item) => (
+						<CollectibleItem key={item._id} item={item} />
+					))}
+				</View>
+				<View>
+					{rightColumnItems.map((item) => (
+						<CollectibleItem key={item._id} item={item} />
+					))}
+				</View>
+			</View>
+		</ScrollView>
+	);
+};
+
+export default CollectibleList;

apps/widgets/src/features/dashboard/EditTool/PreviewScreen/Detail/EmptyTab.tsx

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import { Text, View } from '@walless/gui';
+
+export const EmptyTab: FC = () => {
+	return (
+		<View>
+			<Text>Not available yet</Text>
+		</View>
+	);
+};
+
+export default EmptyTab;

apps/widgets/src/features/dashboard/EditTool/PreviewScreen/Detail/MainFeatures.tsx

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+import { Button, Text, View } from '@walless/gui';
+import { ArrowBottomRight, ArrowTopRight } from '@walless/icons';
+
+const MainFeatures = () => {
+	return (
+		<View horizontal style={styles.container}>
+			<View style={styles.buttonContainer}>
+				<Button style={styles.button}>
+					<ArrowTopRight size={18} />
+				</Button>
+				<Text style={styles.text}>Send</Text>
+			</View>
+
+			<View style={styles.buttonContainer}>
+				<Button style={styles.button}>
+					<ArrowBottomRight size={18} />
+				</Button>
+				<Text style={styles.text}>Receive</Text>
+			</View>
+		</View>
+	);
+};
+
+export default MainFeatures;
+
+const styles = StyleSheet.create({
+	container: {
+		justifyContent: 'center',
+		gap: 20,
+	},
+	buttonContainer: {
+		alignItems: 'center',
+		gap: 4,
+	},
+	button: {
+		width: 38,
+		height: 38,
+		borderRadius: 12,
+	},
+	text: {
+		fontSize: 13,
+		color: '#4e5e6b',
+	},
+});