fix: drawer's related problems

apps/mobile/src/stacks/Dashboard/TabBar.tsx

@@ -1,51 +1,75 @@
 import type { FC } from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import type { ImageSourcePropType, ViewStyle } from 'react-native';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import {
+	useAnimatedStyle,
+	useSharedValue,
+	withTiming,
+} from 'react-native-reanimated';
 import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import type { Route } from '@react-navigation/native';
 import { useSnapshot } from '@walless/app';
-import { mockWidgets } from '@walless/engine';
-import { appState } from '@walless/engine';
+import { appState, mockWidgets } from '@walless/engine';
+import { AnimatedView } from '@walless/gui';
 import { modules } from '@walless/ioc';
 
 import NavigationItem from './TabBarItem';
 
 const getIconImage = (routeName: string): ImageSourcePropType => {
+	const backupUri: ImageSourcePropType = {
+		uri: '/assets/img/icon.png',
+	};
+
 	switch (routeName) {
 		case 'Profile':
 			return { uri: appState.profile.profileImage };
 		case 'Explore':
-			return modules.asset.tabBar.explore;
+			return modules.asset.tabBar?.explore || backupUri;
 		case 'Home':
-			return modules.asset.tabBar.walless;
+			return modules.asset.tabBar?.walless || backupUri;
 		default:
-			return modules.asset.tabBar.walless;
+			return modules.asset.tabBar?.walless || backupUri;
 	}
 };
 
-export const BottomNavigationTabBar: FC<BottomTabBarProps> = ({
-	insets,
-	state,
-	navigation,
+const timingConfig: WithTimingConfig = {
+	duration: 50,
+};
+
+interface Props {
+	tabProps: BottomTabBarProps;
+	setSceneMarginBottom: (marginBottom: number) => void;
+}
+
+export const BottomNavigationTabBar: FC<Props> = ({
+	tabProps,
+	setSceneMarginBottom,
 }) => {
 	const { activeWidgetId, isDrawerOpen } = useSnapshot(appState);
-	const [showBottomTab, setShowBottomTab] = useState(true);
+	const offset = useSharedValue(0);
+	const animatedStyles = useAnimatedStyle(() => ({
+		transform: [{ translateY: withTiming(offset.value) }],
+	}));
 
 	useEffect(() => {
 		if (
 			!isDrawerOpen &&
 			mockWidgets.some((widget) => widget._id === activeWidgetId)
 		) {
-			setShowBottomTab(false);
+			offset.value = withTiming(tabBarHeight, timingConfig);
+			setSceneMarginBottom(0);
 		} else {
-			setShowBottomTab(true);
+			offset.value = withTiming(0, timingConfig);
+			setSceneMarginBottom(tabBarHeight);
 		}
 	}, [isDrawerOpen]);
 
+	const { insets, state, navigation } = tabProps;
+
 	const containerStyle: ViewStyle = {
 		paddingBottom: insets.bottom,
-		display: showBottomTab ? 'flex' : 'none',
 	};
 
 	const handleNavigate = (route: Route<string, never>, focused: boolean) => {
@@ -61,7 +85,7 @@ export const BottomNavigationTabBar: FC<BottomTabBarProps> = ({
 	};
 
 	return (
-		<View style={[styles.container, containerStyle]}>
+		<AnimatedView style={[styles.container, containerStyle, animatedStyles]}>
 			{state.routes.map((route, index) => {
 				const isFocused = state.index === index;
 
@@ -75,7 +99,7 @@ export const BottomNavigationTabBar: FC<BottomTabBarProps> = ({
 					/>
 				);
 			})}
-		</View>
+		</AnimatedView>
 	);
 };
 

apps/mobile/src/stacks/Dashboard/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import ExploreScreen from 'screens/Dashboard/Explore';
@@ -11,14 +12,19 @@ import TabBar from './TabBar';
 const Tab = createBottomTabNavigator<DashboardParamList>();
 
 export const DashboardStack = () => {
+	const [sceneMarginBottom, setSceneMarginBottom] = useState(0);
+
 	const screenOptions: BottomTabNavigationOptions = {
 		headerShown: false,
 	};
 
 	return (
 		<Tab.Navigator
 			screenOptions={screenOptions}
-			tabBar={(props) => <TabBar {...props} />}
+			tabBar={(props) => (
+				<TabBar tabProps={props} setSceneMarginBottom={setSceneMarginBottom} />
+			)}
+			sceneContainerStyle={{ marginBottom: sceneMarginBottom }}
 		>
 			<Tab.Screen name="Home" component={DrawerStack} />
 			<Tab.Screen name="Explore" component={ExploreScreen} />

apps/mobile/src/stacks/Drawer/index.tsx

@@ -20,7 +20,6 @@ export const DrawerStack = () => {
 				backgroundColor: '#131C24',
 			},
 		],
-		overlayColor: 'transparent',
 	};
 
 	const options = {

apps/mobile/src/utils/config.ts

@@ -75,6 +75,9 @@ export const nativeAsset: UniversalAsset = {
 		explore: require('assets/img/explore.png'),
 		walless: require('assets/img/icon-white.png'),
 	},
+	misc: {
+		unknownToken: require('assets/img/send-token/unknown-token.jpeg'),
+	},
 };
 
 export const resources = {

apps/web/src/utils/config.ts

@@ -64,6 +64,9 @@ export const webAsset: UniversalAsset = {
 		tezos: { icon: { uri: '/img/send-token/icon-tezos.png' } },
 		aptos: { icon: { uri: '/img/send-token/icon-aptos.png' } },
 	},
+	misc: {
+		unknownToken: { uri: '/img/send-token/unknown-token.jpeg' },
+	},
 };
 
 export const resources = {

packages/app/components/TokenList/Item.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { Image, StyleSheet } from 'react-native';
 import { Hoverable, Text, View } from '@walless/gui';
+import { modules } from '@walless/ioc';
 import type { TokenDocument } from '@walless/store';
 
 import { formatQuote, parseTokenAccount } from '../../utils/format';
@@ -18,9 +19,9 @@ export const TokenItem: FC<Props> = ({ style, item }) => {
 	const amount = parseTokenAccount(account);
 	const unitQuote = account.quotes?.usd;
 	const totalQuote = unitQuote && unitQuote * amount;
-	const iconSource = {
-		uri: imageUri || '/img/send-token/unknown-token.jpeg',
-	};
+	const iconSource = imageUri
+		? { uri: imageUri }
+		: modules.asset.misc.unknownToken;
 
 	const itemName = symbol || 'Unknown';
 

packages/app/features/Profile/index.tsx

@@ -57,7 +57,7 @@ const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		paddingHorizontal: 14,
-		paddingVertical: 16,
+		marginVertical: 16,
 		alignItems: 'center',
 		gap: 36,
 	},

packages/engine/crawlers/aptos/coins.ts

@@ -22,7 +22,7 @@ export const getCoins = async (provider: Provider, pubkey: HexString) => {
 			metadata: {
 				name: coin.metadata?.name ?? 'Unknown',
 				symbol: coin.metadata?.symbol ?? 'Unknown',
-				imageUri: coin.metadata?.icon_uri ?? '/img/explore/logo-aptos.svg',
+				imageUri: coin.metadata?.icon_uri ?? '',
 			},
 		});
 	});

packages/ioc/index.ts

@@ -101,6 +101,9 @@ export interface UniversalAsset {
 		explore: ImageSourcePropType;
 		walless: ImageSourcePropType;
 	};
+	misc: {
+		unknownToken: ImageSourcePropType;
+	};
 }
 
 export interface DynamicModules {