Merge pull request #557 from cocrafts/dev

sync dev to staging

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

@@ -0,0 +1,86 @@
+import type { FC, ReactNode } from 'react';
+import { useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { Anchor, Text } from '@walless/gui';
+
+interface LauchingOptionProps {
+	icon: ReactNode;
+	title: string;
+	activeIcon: ReactNode;
+	onPress?: () => void;
+	url?: string;
+	isDisabled?: boolean;
+}
+
+const LaunchingOption: FC<LauchingOptionProps> = ({
+	icon,
+	activeIcon,
+	title,
+	onPress,
+	url,
+	isDisabled = false,
+}) => {
+	const [isHovered, setIsHovered] = useState(false);
+
+	const handleHoverIn = () => {
+		setIsHovered(true);
+	};
+
+	const handleHoverOut = () => {
+		setIsHovered(false);
+	};
+
+	return (
+		<Anchor
+			onHoverIn={handleHoverIn}
+			onHoverOut={handleHoverOut}
+			href={url as string}
+			hoverOpacity={1}
+			disabled={isDisabled}
+		>
+			<TouchableOpacity
+				style={[
+					styles.container,
+					isHovered && !isDisabled && styles.hoveredContainerStyle,
+				]}
+				onPress={onPress}
+				disabled={isDisabled}
+			>
+				{isHovered && !isDisabled ? activeIcon : icon}
+				<Text
+					style={[
+						styles.title,
+						isHovered && !isDisabled && styles.hoveredTextStyle,
+					]}
+				>
+					{title}
+				</Text>
+			</TouchableOpacity>
+		</Anchor>
+	);
+};
+
+export default LaunchingOption;
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		padding: 8,
+		borderRadius: 8,
+		gap: 8,
+		width: 186,
+		paddingVertical: 8,
+		paddingHorizontal: 8,
+		borderWidth: 1,
+		borderColor: 'transparent',
+	},
+	title: {
+		color: '#ffffff',
+	},
+	hoveredContainerStyle: {
+		backgroundColor: '#202D38',
+		borderColor: '#000000',
+	},
+	hoveredTextStyle: { fontWeight: '500' },
+});

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

@@ -0,0 +1,56 @@
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Button } from '@walless/gui';
+import { Phone, PlainWalless, Puzzle, Walless } from '@walless/icons';
+
+import LaunchingOption from './LauchingOption';
+
+const LaunchingModal = () => {
+	return (
+		<View>
+			<Button title="Access Walless" style={styles.button} />
+			<View style={styles.container}>
+				<LaunchingOption
+					icon={<PlainWalless color="#A4B3C1" />}
+					title="Launch web app"
+					activeIcon={<Walless />}
+					url="https://app.walless.io/auth/invitation"
+				/>
+				<View style={styles.line} />
+				<LaunchingOption
+					icon={<Puzzle color="#A4B3C1" />}
+					title="Add extension"
+					activeIcon={<Puzzle color="#19A3E1" />}
+					url="https://chromewebstore.google.com/detail/walless/jfmajkmgjpjognffefopllhaijknhnmm"
+				/>
+				<LaunchingOption
+					icon={<Phone color="#A4B3C1" />}
+					title="Mobile (coming soon)"
+					isDisabled={true}
+					activeIcon={<Phone color="#19A3E1" />}
+				/>
+			</View>
+		</View>
+	);
+};
+
+export default LaunchingModal;
+
+const styles = StyleSheet.create({
+	container: {
+		backgroundColor: '#19232C',
+		borderRadius: 16,
+		paddingVertical: 12,
+		paddingHorizontal: 16,
+		gap: 8,
+	},
+	button: {
+		marginHorizontal: 8,
+		alignSelf: 'flex-start',
+	},
+	line: {
+		backgroundColor: '#ffffff',
+		height: 1,
+		opacity: 0.1,
+	},
+});

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

@@ -1,20 +1,39 @@
 import type { FC } from 'react';
+import { useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { useMedia } from '@tamagui/core';
-import { Anchor, View } from '@walless/gui';
+import {
+	AnimateDirections,
+	BindDirections,
+	modalActions,
+	View,
+} from '@walless/gui';
+import { View } from '@walless/gui';
 import { Button } from '@walless/ui';
 import { ContainerStack } from 'components/styled';
 import { useRouter } from 'next/router';
 
 import HomeButton from './HomeButton';
+import LaunchingModal from './LaunchingModal';
 import { NavigationItem } from './NavigationItem';
 import { navigationHeight, navigationItems } from './shared';
 
 export const HomeNavigation: FC = () => {
 	const router = useRouter();
 	const media = useMedia();
+	const modalRef = useRef(null);
 
 	const temporarilyDisabled = false;
+	const handleShowLaunchingModal = () => {
+		modalActions.show({
+			id: 'launching',
+			fullWidth: false,
+			bindingRef: modalRef,
+			bindingDirection: BindDirections.InnerTopLeft,
+			animateDirection: AnimateDirections.Inner,
+			component: LaunchingModal,
+		});
+	};
 
 	return (
 		<View style={styles.container}>
@@ -34,9 +53,13 @@ export const HomeNavigation: FC = () => {
 						})}
 				</View>
 
-				<Anchor href="https://app.walless.io" target="_blank">
-					<Button title="Launch Walless" marginHorizontal={8} />
-				</Anchor>
+				<View ref={modalRef}>
+					<Button
+						title="Access Walless"
+						marginHorizontal={8}
+						onPress={handleShowLaunchingModal}
+					/>
+				</View>
 			</ContainerStack>
 		</View>
 	);

apps/wallet/metacraft.config.js

@@ -32,6 +32,7 @@ module.exports = {
 			'react-native-webview': 'vendor/web-webview',
 			'react-native-keychain': 'vendor/web-keychain',
 			'react-native-haptic-feedback': 'vendor/web-haptic',
+			'react-native-linear-gradient': 'react-native-web-linear-gradient',
 		},
 	},
 };

apps/wallet/package.json

@@ -105,13 +105,15 @@
     "react-native-svg": "13.10.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-vision-camera": "^3.9.0",
+    "react-native-web-linear-gradient": "^1.1.2",
     "react-native-webview": "13.6.3",
     "use-debounce": "^10.0.0"
   },
   "devDependencies": {
     "@types/jest": "^29.2.1",
     "@types/pouchdb-adapter-memory": "^6.1.6",
     "@types/react": "^18.2.25",
+    "@types/react-native-linear-gradient": "^2.4.0",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.2.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",

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

@@ -0,0 +1,100 @@
+import { StyleSheet, Text } from 'react-native';
+import { Hoverable, View } from '@walless/gui';
+import { Eye, EyeOff, Settings } 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';
+
+const Header = () => {
+	const { config } = useSnapshot(appState);
+	const { valuation } = useTokens();
+
+	const handleNavigateToSettings = () => {
+		navigate('Dashboard', {
+			screen: 'Explore',
+			params: {
+				screen: 'Widget',
+				params: {
+					screen: 'Setting',
+				},
+			},
+		});
+	};
+
+	return (
+		<View style={styles.container}>
+			<View style={styles.balanceContainer}>
+				<Text style={styles.helloText}>Hi👋, your balance today:</Text>
+				<View style={styles.tokenValuationContainer}>
+					<Hoverable
+						onPress={() => {
+							setPrivacy(!config.hideBalance);
+						}}
+					>
+						{config.hideBalance ? (
+							<Eye color="#19A3E1" size={16} />
+						) : (
+							<EyeOff color="#19A3E1" size={16} />
+						)}
+					</Hoverable>
+					<Text style={styles.tokenValuation}>
+						{getValuationDisplay(valuation, config.hideBalance)}
+					</Text>
+				</View>
+			</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}>
+					<Search size={20} color="#566674" />
+				</Hoverable> */}
+			</View>
+		</View>
+	);
+};
+
+export default Header;
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		paddingVertical: 10,
+		paddingHorizontal: 16,
+	},
+	helloText: {
+		color: '#ffffff',
+	},
+	balanceContainer: {
+		gap: 4,
+	},
+	tokenValuationContainer: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 4,
+	},
+	tokenValuation: {
+		fontSize: 18,
+		color: '#ffffff',
+	},
+	buttonContainer: {
+		flexDirection: 'row',
+		alignSelf: 'flex-end',
+		gap: 8,
+	},
+	button: {
+		justifyContent: 'center',
+		alignItems: 'center',
+		backgroundColor: '#23303C',
+		borderRadius: 6,
+		padding: 8,
+	},
+});

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

@@ -0,0 +1,45 @@
+import type { FC } from 'react';
+import { StyleSheet } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import { View } from '@walless/gui';
+
+import IndicatorDot from './IndicatorDot';
+
+interface HighlightIndicatorProps {
+	dataLength: number;
+	onSelectItem: (index: number) => void;
+	currentIndex: SharedValue<number>;
+	animatedValue: SharedValue<number>;
+}
+
+const HighlightIndicator: FC<HighlightIndicatorProps> = ({
+	dataLength,
+	onSelectItem,
+	animatedValue,
+}) => {
+	const data = Array.from({ length: dataLength }, (_, i) => i);
+
+	return (
+		<View style={styles.container}>
+			{data.map((item) => {
+				return (
+					<IndicatorDot
+						key={item}
+						index={item}
+						data={data}
+						onPress={onSelectItem}
+						animatedValue={animatedValue}
+					/>
+				);
+			})}
+		</View>
+	);
+};
+
+export default HighlightIndicator;
+
+const styles = StyleSheet.create({
+	container: {
+		alignSelf: 'center',
+	},
+});