Add world-class mobile components and Staking/Governance screens

PHASE 1 & 2 of mobile app transformation completed. New Modern Component Library: - Card: Elevated, outlined, filled variants with press states - Button: 5 variants (primary, secondary, outline, ghost, danger) with Kurdistan colors - Input: Floating labels, validation, icons, focus states - BottomSheet: Swipe-to-dismiss modal with smooth animations - LoadingSkeleton: Shimmer loading states (Skeleton, CardSkeleton, ListItemSkeleton) - Badge: Status indicators and labels for Tiki roles New Screens: 1. StakingScreen (504 lines): - View staked amount and rewards - Live staking data from blockchain - Stake/Unstake with bottom sheets - Tiki score breakdown - Monthly PEZ rewards calculation - APY estimation - Unbonding status - Inspired by Polkadot.js and Argent 2. GovernanceScreen (447 lines): - Active proposals list - Vote FOR/AGAINST proposals - Real-time voting statistics - Vote progress visualization - Proposal details bottom sheet - Democratic participation interface - Inspired by modern DAO platforms Design Principles: ✅ Kurdistan colors (Kesk, Sor, Zer) throughout ✅ Material Design 3 inspired ✅ Smooth animations and transitions ✅ Clean, modern UI ✅ Accessibility-first ✅ RTL support ready All components use: - Shared theme from @pezkuwi/theme - Shared blockchain logic from @pezkuwi/lib - TypeScript with full type safety - React Native best practices Next: DEX/Swap, NFT Gallery, Transaction History
2026-04-22 21:47:56 +00:00 · 2025-11-15 01:10:55 +00:00
parent 8c905183fd
commit 3d84b618cf
9 changed files with 1827 additions and 0 deletions
@@ -0,0 +1,185 @@
+import React from 'react';
+import {
+  Pressable,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { AppColors, KurdistanColors } from '../theme/colors';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+  size?: 'small' | 'medium' | 'large';
+  loading?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+  icon?: React.ReactNode;
+}
+
+/**
+ * Modern Button Component
+ * Uses Kurdistan colors for primary branding
+ */
+export const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  variant = 'primary',
+  size = 'medium',
+  loading = false,
+  disabled = false,
+  fullWidth = false,
+  style,
+  textStyle,
+  icon,
+}) => {
+  const isDisabled = disabled || loading;
+
+  const buttonStyle = [
+    styles.base,
+    styles[variant],
+    styles[`${size}Size`],
+    fullWidth && styles.fullWidth,
+    isDisabled && styles.disabled,
+    style,
+  ];
+
+  const textStyles = [
+    styles.text,
+    styles[`${variant}Text`],
+    styles[`${size}Text`],
+    isDisabled && styles.disabledText,
+    textStyle,
+  ];
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={isDisabled}
+      style={({ pressed }) => [
+        ...buttonStyle,
+        pressed && !isDisabled && styles.pressed,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator
+          color={variant === 'primary' || variant === 'danger' ? '#FFFFFF' : AppColors.primary}
+        />
+      ) : (
+        <>
+          {icon}
+          <Text style={textStyles}>{title}</Text>
+        </>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+  },
+  // Variants
+  primary: {
+    backgroundColor: KurdistanColors.kesk,
+    shadowColor: KurdistanColors.kesk,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  secondary: {
+    backgroundColor: KurdistanColors.zer,
+    shadowColor: KurdistanColors.zer,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+    elevation: 3,
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: KurdistanColors.kesk,
+  },
+  ghost: {
+    backgroundColor: 'transparent',
+  },
+  danger: {
+    backgroundColor: KurdistanColors.sor,
+    shadowColor: KurdistanColors.sor,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  // Sizes
+  smallSize: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+  },
+  mediumSize: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 12,
+  },
+  largeSize: {
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 16,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  disabled: {
+    opacity: 0.5,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  pressed: {
+    opacity: 0.8,
+    transform: [{ scale: 0.97 }],
+  },
+  // Text styles
+  text: {
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  primaryText: {
+    color: '#FFFFFF',
+  },
+  secondaryText: {
+    color: '#000000',
+  },
+  outlineText: {
+    color: KurdistanColors.kesk,
+  },
+  ghostText: {
+    color: KurdistanColors.kesk,
+  },
+  dangerText: {
+    color: '#FFFFFF',
+  },
+  smallText: {
+    fontSize: 14,
+  },
+  mediumText: {
+    fontSize: 16,
+  },
+  largeText: {
+    fontSize: 18,
+  },
+  disabledText: {
+    opacity: 0.7,
+  },
+});