zopassport 0.1.0

package/app/src/components/ZoProgressRing.tsx

@@ -0,0 +1,57 @@
+// src/components/ZoProgressRing.tsx
+// Circular progress ring component
+
+import React from 'react';
+
+export interface ZoProgressRingProps {
+  /** Progress percentage (0-100) */
+  progress: number;
+  /** Size in pixels (default: 140) */
+  size?: number;
+  /** Stroke width in pixels (default: 4) */
+  strokeWidth?: number;
+  /** Primary stroke color (default: #FFFFFF) */
+  primaryColor?: string;
+  /** Secondary/background stroke color (default: rgba(255,255,255,0.2)) */
+  secondaryColor?: string;
+}
+
+export const ZoProgressRing: React.FC<ZoProgressRingProps> = ({
+  progress,
+  size = 140,
+  strokeWidth = 4,
+  primaryColor = '#FFFFFF',
+  secondaryColor = 'rgba(255,255,255,0.2)',
+}) => {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const strokeDashoffset = circumference - (progress / 100) * circumference;
+
+  return (
+    <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
+      {/* Background circle */}
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        strokeWidth={strokeWidth}
+        fill="none"
+        stroke={secondaryColor}
+      />
+      {/* Progress circle */}
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        stroke={primaryColor}
+        strokeWidth={strokeWidth}
+        fill="none"
+        strokeDasharray={circumference}
+        strokeDashoffset={strokeDashoffset}
+        strokeLinecap="round"
+        style={{ transition: 'stroke-dashoffset 0.5s ease-in-out' }}
+      />
+    </svg>
+  );
+};
+

package/app/src/components/index.ts

@@ -0,0 +1,16 @@
+// src/components/index.ts
+// Re-export all components
+
+export { ZoPassportCard, type ZoPassportCardProps } from './ZoPassportCard';
+export { ZoProgressRing, type ZoProgressRingProps } from './ZoProgressRing';
+export { ZoAvatar, type ZoAvatarProps } from './ZoAvatar';
+export { PhoneInput, type PhoneInputProps } from './PhoneInput';
+export { OTPInput, type OTPInputProps } from './OTPInput';
+export { ZoAuth, type ZoAuthProps } from './ZoAuth';
+export { ZoLanding, type ZoLandingProps } from './ZoLanding';
+export { ZoOnboarding, type ZoOnboardingProps } from './ZoOnboarding';
+export { FounderBadge } from './FounderBadge';
+
+// Wallet components
+export * from './wallet';
+

package/app/src/components/wallet/MovingShine.tsx

@@ -0,0 +1,43 @@
+// Moving Shine Effect - Extracted from Zostel app
+import React, { memo, useEffect } from 'react';
+import { View, Image, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { WALLET_ASSETS, ANIMATIONS } from '../../../assets/wallet/constants';
+import { walletStyles } from './styles/walletStyles';
+import type { MovingShineProps } from '../../lib/types/wallet';
+
+export const MovingShine: React.FC<MovingShineProps> = memo(
+  ({ duration = ANIMATIONS.shineDuration }) => {
+    const tx = useSharedValue(-100);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ rotate: '30deg' }, { translateX: tx.value }],
+    }));
+
+    useEffect(() => {
+      tx.value = withRepeat(withTiming(420, { duration }), -1, false);
+    }, [duration]);
+
+    return (
+      <Animated.View style={[styles.shineEffect, animatedStyle]}>
+        <Image
+          source={{ uri: WALLET_ASSETS.shine }}
+          style={StyleSheet.absoluteFillObject}
+          resizeMode="cover"
+        />
+      </Animated.View>
+    );
+  }
+);
+
+MovingShine.displayName = 'MovingShine';
+
+const styles = StyleSheet.create({
+  shineEffect: walletStyles.shineEffect,
+});
+

package/app/src/components/wallet/TransactionItem.tsx

@@ -0,0 +1,84 @@
+// Transaction Item Component - Extracted from Zostel app
+import React, { memo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import moment from 'moment';
+import { ZoToken } from './ZoToken';
+import { walletStyles } from './styles/walletStyles';
+import { formatBalance, getTransactionColor } from '../../lib/utils/wallet';
+import type { TransactionItemProps } from '../../lib/types/wallet';
+
+const StatusIcon: React.FC = memo(() => {
+  return (
+    <View style={styles.iconBgTilted}>
+      <Text style={styles.iconText}>←</Text>
+    </View>
+  );
+});
+
+StatusIcon.displayName = 'StatusIcon';
+
+export const TransactionItem: React.FC<TransactionItemProps> = memo(
+  ({ transaction, showDate = true }) => {
+    const color = getTransactionColor(transaction.action);
+    const formattedAmount = formatBalance(transaction.amount);
+
+    return (
+      <View style={styles.txnRow}>
+        <StatusIcon />
+        
+        <View style={styles.flex}>
+          <Text style={styles.description}>{transaction.description}</Text>
+          {showDate && transaction.claimed_at && (
+            <Text style={styles.date}>
+              {moment(transaction.claimed_at).format('DD MMM hh:mm A')}
+            </Text>
+          )}
+        </View>
+
+        <View style={styles.tokenContainer}>
+          <Text
+            style={[
+              styles.textShadow,
+              {
+                shadowColor: color,
+                color: color,
+                fontWeight: '600',
+                fontSize: 16,
+              },
+            ]}
+          >
+            + {formattedAmount}
+          </Text>
+          <ZoToken size={16} />
+        </View>
+      </View>
+    );
+  }
+);
+
+TransactionItem.displayName = 'TransactionItem';
+
+const styles = StyleSheet.create({
+  txnRow: walletStyles.txnRow,
+  iconBgTilted: walletStyles.iconBgTilted,
+  tokenContainer: walletStyles.tokenContainer,
+  textShadow: walletStyles.textShadow,
+  flex: {
+    flex: 1,
+  },
+  iconText: {
+    color: 'rgba(255, 255, 255, 0.6)',
+    fontSize: 16,
+  },
+  description: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  date: {
+    color: 'rgba(255, 255, 255, 0.44)',
+    fontSize: 12,
+    marginTop: 2,
+  },
+});
+

package/app/src/components/wallet/TransactionList.tsx

@@ -0,0 +1,65 @@
+// Transaction List Component - Extracted from Zostel app
+import React, { memo } from 'react';
+import { View, ScrollView, Text, ActivityIndicator, StyleSheet } from 'react-native';
+import { TransactionItem } from './TransactionItem';
+import { walletStyles } from './styles/walletStyles';
+import type { TransactionListProps } from '../../lib/types/wallet';
+
+export const TransactionList: React.FC<TransactionListProps> = memo(
+  ({ transactions, isLoading, onEndReached }) => {
+    if (isLoading && !transactions?.length) {
+      return (
+        <View style={styles.loader}>
+          <ActivityIndicator size="large" color="#00C853" />
+        </View>
+      );
+    }
+
+    if (!transactions?.length) {
+      return (
+        <View style={styles.emptyState}>
+          <Text style={styles.emptyText}>No transactions yet</Text>
+          <Text style={styles.emptySubtext}>
+            Complete quests to earn $Zo tokens
+          </Text>
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.txnContent}>
+        {transactions.map((transaction, index) => (
+          <TransactionItem key={transaction.id || index} transaction={transaction} />
+        ))}
+      </View>
+    );
+  }
+);
+
+TransactionList.displayName = 'TransactionList';
+
+const styles = StyleSheet.create({
+  txnContent: walletStyles.txnContent,
+  loader: {
+    padding: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyState: {
+    padding: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyText: {
+    color: '#FFFFFF',
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  emptySubtext: {
+    color: 'rgba(255, 255, 255, 0.44)',
+    fontSize: 14,
+    textAlign: 'center',
+  },
+});
+

package/app/src/components/wallet/WalletCard.tsx

@@ -0,0 +1,152 @@
+// Wallet Card Component - Extracted from Zostel app
+import React, { memo, useEffect } from 'react';
+import { View, Text, Image, Pressable, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  FadeIn,
+} from 'react-native-reanimated';
+import { MovingShine } from './MovingShine';
+import { ZoTokenVideo } from './ZoToken';
+import { WALLET_ASSETS, ANIMATIONS } from '../../../assets/wallet/constants';
+import { walletStyles } from './styles/walletStyles';
+import { formatBalance, formatWalletAddress, formatNickname } from '../../lib/utils/wallet';
+import type { WalletCardProps } from '../../lib/types/wallet';
+
+export const WalletCard: React.FC<WalletCardProps> = memo(
+  ({ balance, user, isOpen = false, onToggle, isLoading }) => {
+    const bgY = useSharedValue(0);
+    const cardY = useSharedValue(0);
+
+    const animatedBackgroundStyle = useAnimatedStyle(() => ({
+      transform: [{ translateY: bgY.value }],
+    }));
+
+    const animatedCardStyle = useAnimatedStyle(() => ({
+      transform: [{ translateY: cardY.value }],
+    }));
+
+    useEffect(() => {
+      bgY.value = withTiming(isOpen ? 200 : 0, { duration: ANIMATIONS.cardTransition });
+      cardY.value = withTiming(isOpen ? -150 : 0, { duration: ANIMATIONS.cardTransition });
+    }, [isOpen]);
+
+    const displayName = user.nickname
+      ? formatNickname(user.nickname)
+      : user.first_name || 'You';
+
+    const walletText = `${displayName}'s wallet`;
+
+    return (
+      <Pressable
+        style={styles.cardPressContainer}
+        onPress={onToggle}
+      >
+        <Animated.View style={[styles.card, animatedBackgroundStyle]}>
+          {/* Background Image */}
+          <Image
+            source={{ uri: WALLET_ASSETS.walletBackground }}
+            style={StyleSheet.absoluteFillObject}
+            resizeMode="contain"
+          />
+
+          {/* Shadow */}
+          <Animated.View
+            style={styles.cardShadow}
+            entering={FadeIn.duration(ANIMATIONS.fadeInDuration)}
+          />
+
+          {/* Card Content */}
+          <Animated.View style={[styles.cardContainer, animatedCardStyle]}>
+            <View style={styles.cardContent}>
+              {/* Balance Row */}
+              <View style={styles.balanceRow}>
+                <View style={styles.balanceWrapper}>
+                  <Text style={[styles.whiteText, styles.balanceAmount]}>
+                    {formatBalance(balance)}
+                  </Text>
+                  <Text style={[styles.grayText, styles.currency]}>
+                    $Zo
+                  </Text>
+                </View>
+                <ZoTokenVideo size={24} />
+              </View>
+
+              <View style={styles.flex} />
+
+              {/* User Info */}
+              {user && (
+                <View style={styles.avatarInfo}>
+                  {user.avatar?.image && (
+                    <Image
+                      source={{ uri: user.avatar.image }}
+                      style={styles.avatar}
+                    />
+                  )}
+                  <View style={styles.flex}>
+                    <Text style={[styles.whiteText, styles.userName]}>
+                      {displayName}
+                    </Text>
+                    <Text style={[styles.grayText, styles.walletAddress]}>
+                      {formatWalletAddress(user.wallet_address || '')}
+                    </Text>
+                  </View>
+                </View>
+              )}
+
+              {/* Shine Effect */}
+              <View style={styles.shineContainer}>
+                <MovingShine />
+              </View>
+            </View>
+          </Animated.View>
+
+          {/* Card Cover */}
+          <View style={styles.cardCover}>
+            <Image
+              source={{ uri: WALLET_ASSETS.walletCover }}
+              style={StyleSheet.absoluteFillObject}
+              resizeMode="cover"
+            />
+            <View style={styles.cardCoverTextContainer}>
+              <Text style={[styles.grayText, styles.cardCoverText]}>
+                {walletText}
+              </Text>
+            </View>
+          </View>
+        </Animated.View>
+      </Pressable>
+    );
+  }
+);
+
+WalletCard.displayName = 'WalletCard';
+
+const styles = StyleSheet.create({
+  ...walletStyles,
+  balanceAmount: {
+    fontSize: 24,
+    fontWeight: '700',
+  },
+  currency: {
+    fontSize: 12,
+  },
+  userName: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  walletAddress: {
+    fontSize: 12,
+  },
+  avatar: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+  },
+  cardCoverText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+

package/app/src/components/wallet/WalletScreen.tsx

@@ -0,0 +1,190 @@
+// Wallet Screen Component - Complete wallet screen from Zostel app
+import React, { useState, useCallback, useMemo, memo } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  Pressable,
+  ActivityIndicator,
+  StyleSheet,
+  SafeAreaView,
+} from 'react-native';
+import Animated, { FadeIn, FadeOut, FadeInUp, FadeOutUp, FadeInDown } from 'react-native-reanimated';
+import { WalletCard } from './WalletCard';
+import { TransactionList } from './TransactionList';
+import { walletStyles } from './styles/walletStyles';
+import type { WalletScreenProps } from '../../lib/types/wallet';
+
+// Mock data for demo
+const MOCK_USER = {
+  avatar: {
+    image: 'https://i.pravatar.cc/150?img=12',
+  },
+  first_name: 'John',
+  nickname: '@johndoe',
+  wallet_address: '0x1234567890abcdef1234567890abcdef12345678',
+};
+
+const MOCK_TRANSACTIONS = [
+  {
+    id: '1',
+    created_at: '2025-12-10T10:30:00Z',
+    updated_at: '2025-12-10T10:30:00Z',
+    amount: 100,
+    description: 'Completed profile',
+    claimed_at: '2025-12-10T10:30:00Z',
+    grant: {
+      id: 'g1',
+      name: 'Profile Completion',
+      description: 'Complete your profile',
+    },
+    action: 'deposit' as const,
+  },
+  {
+    id: '2',
+    created_at: '2025-12-09T15:20:00Z',
+    updated_at: '2025-12-09T15:20:00Z',
+    amount: 250,
+    description: 'Quest: Explore 3 locations',
+    claimed_at: '2025-12-09T15:20:00Z',
+    grant: {
+      id: 'g2',
+      name: 'Explorer Quest',
+      description: 'Visit locations',
+    },
+    action: 'deposit' as const,
+  },
+  {
+    id: '3',
+    created_at: '2025-12-08T09:15:00Z',
+    updated_at: '2025-12-08T09:15:00Z',
+    amount: 500,
+    description: 'Booking reward',
+    claimed_at: '2025-12-08T09:15:00Z',
+    grant: {
+      id: 'g3',
+      name: 'Booking Reward',
+      description: 'Book a stay',
+    },
+    action: 'deposit' as const,
+  },
+];
+
+export const WalletScreen: React.FC<WalletScreenProps> = memo(({ onBack }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isTitleVisible, setIsTitleVisible] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // In real implementation, fetch from API
+  const balance = 850;
+  const user = MOCK_USER;
+  const transactions = MOCK_TRANSACTIONS;
+
+  const toggleView = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const handleScroll = useCallback((event: any) => {
+    const scrollY = event.nativeEvent.contentOffset.y;
+    setIsTitleVisible(scrollY > 200);
+  }, []);
+
+  const backdrop = useMemo(
+    () =>
+      isOpen ? (
+        <Pressable onPress={toggleView} style={styles.openBg}>
+          <View />
+        </Pressable>
+      ) : null,
+    [isOpen, toggleView]
+  );
+
+  const description = useMemo(
+    () =>
+      isOpen ? (
+        <Animated.View entering={FadeIn} exiting={FadeOut} style={styles.zoDescriptionContainer}>
+          <Text style={styles.description}>
+            Get Zo World coins as airdrop by completing quests, stay & trips.
+          </Text>
+        </Animated.View>
+      ) : null,
+    [isOpen]
+  );
+
+  const walletText = `${user.nickname || user.first_name}'s wallet`;
+
+  return (
+    <View style={styles.screen}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Pressable onPress={onBack}>
+          <Text style={styles.backButton}>←</Text>
+        </Pressable>
+        <Animated.View pointerEvents="none" style={styles.titleContainer}>
+          {isTitleVisible && (
+            <Animated.View entering={FadeInUp} exiting={FadeOutUp}>
+              <Text style={[styles.whiteText, styles.headerTitle]}>
+                {walletText}
+              </Text>
+            </Animated.View>
+          )}
+        </Animated.View>
+      </View>
+
+      {/* Content */}
+      <ScrollView
+        contentContainerStyle={styles.container}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        showsVerticalScrollIndicator={false}
+      >
+        {isLoading ? (
+          <Animated.View key="loader" entering={FadeIn} exiting={FadeOut} style={styles.loader}>
+            <ActivityIndicator size="large" color="#00C853" />
+          </Animated.View>
+        ) : (
+          <Animated.View entering={FadeInDown} style={styles.container}>
+            <SafeAreaView />
+
+            {/* Transactions */}
+            <TransactionList transactions={transactions} isLoading={false} />
+
+            {/* Backdrop */}
+            {backdrop}
+
+            {/* Wallet Card */}
+            <WalletCard
+              balance={balance}
+              user={user}
+              isOpen={isOpen}
+              onToggle={toggleView}
+              isLoading={isLoading}
+            />
+
+            <View style={styles.bar} />
+            <SafeAreaView />
+          </Animated.View>
+        )}
+      </ScrollView>
+
+      {/* Description */}
+      {description}
+    </View>
+  );
+});
+
+WalletScreen.displayName = 'WalletScreen';
+
+const styles = StyleSheet.create({
+  ...walletStyles,
+  backButton: {
+    color: '#FFFFFF',
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+});
+

package/app/src/components/wallet/ZoToken.tsx

@@ -0,0 +1,69 @@
+// $Zo Token Components - Extracted from Zostel app
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Svg, { Circle, Defs, LinearGradient, Stop, Path } from 'react-native-svg';
+
+interface ZoTokenProps {
+  size?: number;
+  style?: any;
+}
+
+/**
+ * Static $Zo Token Icon
+ */
+export const ZoToken: React.FC<ZoTokenProps> = ({ size = 16, style }) => {
+  return (
+    <View style={[{ width: size, height: size }, style]}>
+      <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+        <Defs>
+          <LinearGradient id="zoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <Stop offset="0%" stopColor="#00E676" stopOpacity="1" />
+            <Stop offset="100%" stopColor="#00C853" stopOpacity="1" />
+          </LinearGradient>
+        </Defs>
+        <Circle cx="16" cy="16" r="16" fill="url(#zoGradient)" />
+        <Path
+          d="M9 11h14l-10 10h10"
+          stroke="white"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </Svg>
+    </View>
+  );
+};
+
+/**
+ * Animated $Zo Token Video Component
+ * Note: In production this uses a video/lottie animation
+ * This is a simplified static version
+ */
+export const ZoTokenVideo: React.FC<ZoTokenProps> = ({ size = 24, style }) => {
+  return (
+    <View
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: size,
+          overflow: 'hidden',
+          backgroundColor: '#00C853',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        style,
+      ]}
+    >
+      <ZoToken size={size * 0.6} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+

package/app/src/components/wallet/index.ts

@@ -0,0 +1,8 @@
+// Export all wallet components
+export { WalletScreen } from './WalletScreen';
+export { WalletCard } from './WalletCard';
+export { TransactionList } from './TransactionList';
+export { TransactionItem } from './TransactionItem';
+export { MovingShine } from './MovingShine';
+export { ZoToken, ZoTokenVideo } from './ZoToken';
+

package/app/src/components/wallet/styles/index.ts

@@ -0,0 +1,4 @@
+// Export all styles
+export { walletStyles } from './walletStyles';
+export { default as styles } from './walletStyles';
+