[wallet] refactor: loyalty v2 (but hidden for now)

apps/wallet/package.json

@@ -49,6 +49,7 @@
     "@react-navigation/stack": "^6.3.16",
     "@solana/spl-token": "0.3.7",
     "@solana/web3.js": "1.92.3",
+    "@tanstack/react-query": "^5.51.21",
     "@taquito/signer": "^17.5.2",
     "@taquito/taquito": "^17.5.2",
     "@taquito/tzip12": "^16.2.0",
@@ -111,6 +112,7 @@
     "use-debounce": "^10.0.0"
   },
   "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.51.15",
     "@types/color": "^3.0.6",
     "@types/jest": "^29.2.1",
     "@types/pouchdb-adapter-memory": "^6.1.6",

apps/wallet/src/components/StreakIndicator.tsx

@@ -0,0 +1,48 @@
+import type { FC } from 'react';
+import { StyleSheet } from 'react-native';
+import { View } from 'react-native';
+
+interface Props {
+	currentStreak: number;
+	streak: number;
+}
+
+const StreakIndicator: FC<Props> = ({ currentStreak, streak }) => {
+	return (
+		<View style={styles.container}>
+			{Array.from({ length: streak }, (_, i) => i + 1).map((streakIndex) => (
+				<View
+					key={streakIndex}
+					style={[
+						styles.streakCircle,
+						streakIndex <= currentStreak
+							? styles.activeCircle
+							: styles.inactiveCircle,
+					]}
+				/>
+			))}
+		</View>
+	);
+};
+
+export default StreakIndicator;
+
+const styles = StyleSheet.create({
+	container: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 6,
+	},
+	streakCircle: {
+		width: 10,
+		height: 10,
+		borderRadius: 5,
+	},
+	inactiveCircle: {
+		borderWidth: 1,
+		borderColor: '#798896',
+	},
+	activeCircle: {
+		backgroundColor: '#17A3E1',
+	},
+});

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

@@ -16,6 +16,9 @@ const LoyaltyBar: FC<Props> = ({ style }) => {
 			screen: 'Explore',
 			params: {
 				screen: 'Loyalty',
+				params: {
+					screen: 'Default',
+				},
 			},
 		});
 	};

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

@@ -9,7 +9,6 @@ import { filterMap } from 'utils/widget';
 
 import Header from './Header';
 import Highlights from './Highlights';
-import LoyaltyBar from './LoyaltyBar';
 import Missions from './Missions';
 import Widgets from './Widgets';
 
@@ -42,7 +41,6 @@ export const ExplorerFeature: FC<Props> = ({ style }) => {
 		<View style={[styles.container, style]}>
 			<Header style={styles.headerContainer} />
 			<ScrollView showsVerticalScrollIndicator={false}>
-				<LoyaltyBar style={styles.loyaltyContainer} />
 				<Missions style={styles.missionContainer} />
 				<Highlights widgets={filteredWidgets} />
 				<Widgets widgets={filteredWidgets} />

apps/wallet/src/features/Explorer/internal.ts

@@ -1,19 +1,22 @@
 import { navigate } from 'utils/navigation';
 
 export const missions = [
-	{
-		title: 'Earn Walless Points',
-		point: 100,
-		buttonText: 'Earn',
-		onPress: () => {
-			navigate('Dashboard', {
-				screen: 'Explore',
-				params: {
-					screen: 'Loyalty',
-				},
-			});
-		},
-	},
+	// {
+	// 	title: 'Earn Walless Points',
+	// 	point: 100,
+	// 	buttonText: 'Earn',
+	// 	onPress: () => {
+	// 		navigate('Dashboard', {
+	// 			screen: 'Explore',
+	// 			params: {
+	// 				screen: 'Loyalty',
+	// 				params: {
+	// 					screen: 'Default',
+	// 				},
+	// 			},
+	// 		});
+	// 	},
+	// },
 	{
 		title: 'Refer your friends',
 		point: 100,