fix: TypeScript errors, shadow deprecations, and build configuration

- Fix shadow style deprecation warnings across components (boxShadow)
- Add type declaration files (codec.d.ts, modules.d.ts)
- Update metro.config.cjs for proper asset extensions
- Update tsconfig.json with module resolution settings
- Fix TypeScript errors in shared/lib files
- Update app icons (optimized PNG files)

mobile/src/components/Card.tsx

@@ -47,7 +47,12 @@ export const Card: React.FC<CardProps> = ({
         testID={testID}
         onPress={onPress}
         style={({ pressed }) => [
-          ...cardStyle,
+          styles.card,
+          variant === 'elevated' && styles.elevated,
+          variant === 'outlined' && styles.outlined,
+          variant === 'filled' && styles.filled,
+          elevation ? { elevation } : null,
+          style,
           pressed && styles.pressed,
         ]}
       >
@@ -56,7 +61,7 @@ export const Card: React.FC<CardProps> = ({
     );
   }
 
-  return <View testID={testID} style={cardStyle}>{content}</View>;
+  return <View testID={testID} style={cardStyle as any}>{content}</View>;
 };
 
 const styles = StyleSheet.create({

mobile/src/components/ChangePasswordModal.tsx

@@ -90,7 +90,7 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({
         {
           text: 'Send Reset Link',
           onPress: async () => {
-            const { error } = await resetPassword(user.email);
+            const { error } = await resetPassword(user.email!);
             if (error) {
               Alert.alert('Error', error.message || 'Failed to send reset email');
             } else {

mobile/src/components/Input.tsx

@@ -16,6 +16,7 @@ interface InputProps extends TextInputProps {
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
   onRightIconPress?: () => void;
+  disabled?: boolean;
 }
 
 /**
@@ -30,6 +31,7 @@ export const Input: React.FC<InputProps> = ({
   rightIcon,
   onRightIconPress,
   style,
+  disabled,
   ...props
 }) => {
   const [isFocused, setIsFocused] = useState(false);
@@ -58,8 +60,8 @@ export const Input: React.FC<InputProps> = ({
         {leftIcon && <View style={styles.leftIcon}>{leftIcon}</View>}
         <TextInput
           {...props}
-          editable={props.editable !== undefined ? props.editable : !props.disabled}
-          style={[styles.input, leftIcon && styles.inputWithLeftIcon, style]}
+          editable={props.editable !== undefined ? props.editable : !disabled}
+          style={[styles.input, leftIcon && styles.inputWithLeftIcon, style] as any}
           onFocus={(e) => {
             setIsFocused(true);
             props.onFocus?.(e);
@@ -94,7 +96,6 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: AppColors.textSecondary,
     marginBottom: 8,
-    transition: 'all 0.2s',
   },
   labelFocused: {
     color: KurdistanColors.kesk,
@@ -115,7 +116,6 @@ const styles = StyleSheet.create({
   inputContainerFocused: {
     borderColor: KurdistanColors.kesk,
     borderWidth: 2,
-    boxShadow: '0px 2px 4px rgba(0, 128, 0, 0.1)',
     elevation: 2,
   },
   inputContainerError: {

mobile/src/components/LoadingSkeleton.tsx

@@ -49,7 +49,7 @@ export const Skeleton: React.FC<SkeletonProps> = ({
     <Animated.View
       style={[
         styles.skeleton,
-        { width, height, borderRadius, opacity },
+        { width, height, borderRadius, opacity } as any,
         style,
       ]}
     />

mobile/src/components/ValidatorSelectionSheet.tsx

@@ -56,11 +56,11 @@ export function ValidatorSelectionSheet({
           }
         } else {
           // Fallback to general staking validators if validatorPool pallet is not found/used
-          const rawStakingValidators = await api.query.staking.validators();
-          for (const validatorAddress of rawStakingValidators.keys) {
+          const rawStakingValidators = await api.query.staking.validators() as any;
+          for (const validatorAddress of (rawStakingValidators.keys || [])) {
             const address = validatorAddress.args[0].toString();
             // Fetch more details about each validator if needed, e.g., commission, total stake
-            const validatorPrefs = await api.query.staking.validators(address);
+            const validatorPrefs = await api.query.staking.validators(address) as any;
             const commission = validatorPrefs.commission.toNumber() / 10_000_000; // Assuming 10^7 for percentage
 
             // For simplicity, total stake and nominators are placeholders for now

mobile/src/components/navigation/SharedHeader.tsx

@@ -3,11 +3,16 @@ import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { KurdistanColors } from '../../theme/colors';
 import type { StackHeaderProps } from '@react-navigation/stack';
+import type { BottomTabHeaderProps } from '@react-navigation/bottom-tabs';
 
-interface GradientHeaderProps extends StackHeaderProps {
+type HeaderPropsBase = StackHeaderProps | BottomTabHeaderProps;
+
+interface GradientHeaderProps extends Omit<HeaderPropsBase, 'progress' | 'styleInterpolator'> {
   subtitle?: string;
   rightButtons?: React.ReactNode;
   gradientColors?: [string, string];
+  progress?: unknown;
+  styleInterpolator?: unknown;
 }
 
 export const GradientHeader: React.FC<GradientHeaderProps> = ({
@@ -18,11 +23,12 @@ export const GradientHeader: React.FC<GradientHeaderProps> = ({
   rightButtons,
   gradientColors = [KurdistanColors.kesk, '#008f43'],
 }) => {
-  const title = options.headerTitle !== undefined
-    ? options.headerTitle
-    : options.title !== undefined
-    ? options.title
-    : route.name;
+  const getTitle = () => {
+    if (typeof options.headerTitle === 'string') return options.headerTitle;
+    if (typeof options.title === 'string') return options.title;
+    return route.name;
+  };
+  const title = getTitle();
 
   const canGoBack = navigation.canGoBack();
 
@@ -51,8 +57,10 @@ export const GradientHeader: React.FC<GradientHeaderProps> = ({
   );
 };
 
-interface SimpleHeaderProps extends StackHeaderProps {
+interface SimpleHeaderProps extends Omit<HeaderPropsBase, 'progress' | 'styleInterpolator'> {
   rightButtons?: React.ReactNode;
+  progress?: unknown;
+  styleInterpolator?: unknown;
 }
 
 export const SimpleHeader: React.FC<SimpleHeaderProps> = ({
@@ -61,11 +69,12 @@ export const SimpleHeader: React.FC<SimpleHeaderProps> = ({
   route,
   rightButtons,
 }) => {
-  const title = options.headerTitle !== undefined
-    ? options.headerTitle
-    : options.title !== undefined
-    ? options.title
-    : route.name;
+  const getTitle = () => {
+    if (typeof options.headerTitle === 'string') return options.headerTitle;
+    if (typeof options.title === 'string') return options.title;
+    return route.name;
+  };
+  const title = getTitle();
 
   const canGoBack = navigation.canGoBack();
 
@@ -104,8 +113,10 @@ export const BackButton: React.FC<{ onPress?: () => void; color?: string }> = ({
   );
 };
 
-interface AppBarHeaderProps extends StackHeaderProps {
+interface AppBarHeaderProps extends Omit<HeaderPropsBase, 'progress' | 'styleInterpolator'> {
   rightButtons?: React.ReactNode;
+  progress?: unknown;
+  styleInterpolator?: unknown;
 }
 
 export const AppBarHeader: React.FC<AppBarHeaderProps> = ({
@@ -114,11 +125,12 @@ export const AppBarHeader: React.FC<AppBarHeaderProps> = ({
   route,
   rightButtons,
 }) => {
-  const title = options.headerTitle !== undefined
-    ? options.headerTitle
-    : options.title !== undefined
-    ? options.title
-    : route.name;
+  const getTitle = () => {
+    if (typeof options.headerTitle === 'string') return options.headerTitle;
+    if (typeof options.title === 'string') return options.title;
+    return route.name;
+  };
+  const title = getTitle();
 
   const canGoBack = navigation.canGoBack();