feat(wallet): Token search, settings ve backup iyileştirmeleri

WalletScreen: - Token arama modalı eklendi (isim/sembol ile ara) - Token settings modalı (görünürlük yönetimi) - Backup, token settings'den kaldırıldı (Settings'e taşındı) SettingsScreen: - "Backup Recovery Phrase" Network & Security altına eklendi - NetworkType tüm seçenekleri içerecek şekilde düzeltildi Düzeltmeler: - Image type declarations (png, jpg, svg vb.) - KurdistanColors'a mor, şîn, gewr eklendi - ValidatorSelectionSheet export edildi - @pezkuwi/extension-inject devDependency olarak eklendi
2026-04-21 23:47:56 +00:00 · 2026-01-15 08:09:55 +03:00
parent 18fc21c141
commit b9568489e2
6 changed files with 397 additions and 5 deletions
@@ -88,6 +88,8 @@
    "@pezkuwi/util-crypto": "14.0.11"
  },
  "devDependencies": {
+    "@pezkuwi/extension-dapp": "0.62.14",
+    "@pezkuwi/extension-inject": "0.62.14",
    "@expo/ngrok": "^4.1.0",
    "@testing-library/jest-native": "^5.4.3",
    "@testing-library/react-native": "^13.3.3",
@@ -17,3 +17,4 @@ export { TokenSelector } from './TokenSelector';
 export type { Token } from './TokenSelector';
 export { default as PezkuwiWebView } from './PezkuwiWebView';
 export type { PezkuwiWebViewProps } from './PezkuwiWebView';
+export { ValidatorSelectionSheet } from './ValidatorSelectionSheet';
@@ -16,6 +16,8 @@ import {
  Platform
 } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as SecureStore from 'expo-secure-store';
+import { Clipboard } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { KurdistanColors } from '../theme/colors';
 import { useTheme } from '../contexts/ThemeContext';
@@ -154,7 +156,7 @@ const SettingsScreen: React.FC = () => {
  const { isDarkMode, toggleDarkMode, colors, fontSize, setFontSize } = useTheme();
  const { isBiometricEnabled, enableBiometric, disableBiometric, biometricType, autoLockTimer, setAutoLockTimer } = useBiometricAuth();
  const { signOut, user } = useAuth();
-  const { currentNetwork, switchNetwork } = usePezkuwi();
+  const { currentNetwork, switchNetwork, selectedAccount } = usePezkuwi();

  // Profile State (Supabase)
  const [profile, setProfile] = useState<any>({
@@ -171,6 +173,8 @@ const SettingsScreen: React.FC = () => {
  const [showProfileEdit, setShowProfileEdit] = useState(false);
  const [showFontSizeModal, setShowFontSizeModal] = useState(false);
  const [showAutoLockModal, setShowAutoLockModal] = useState(false);
+  const [showBackupModal, setShowBackupModal] = useState(false);
+  const [backupMnemonic, setBackupMnemonic] = useState('');
  const [editName, setEditName] = useState('');
  const [editBio, setEditBio] = useState('');

@@ -272,7 +276,7 @@ const SettingsScreen: React.FC = () => {
  };

  // 5. Network Switcher
-  const handleNetworkChange = async (network: 'pezkuwi' | 'bizinikiwi') => {
+  const handleNetworkChange = async (network: 'pezkuwi' | 'dicle' | 'zagros' | 'bizinikiwi' | 'zombienet') => {
    await switchNetwork(network);
    setShowNetworkModal(false);

@@ -307,6 +311,36 @@ const SettingsScreen: React.FC = () => {
    return option ? option.label : '5 minutes';
  };

+  // 8. Wallet Backup Handler
+  const handleWalletBackup = async () => {
+    if (!selectedAccount) {
+      showAlert('No Wallet', 'Please create or import a wallet first.');
+      return;
+    }
+
+    try {
+      // Retrieve mnemonic from secure storage
+      const seedKey = `pezkuwi_seed_${selectedAccount.address}`;
+      let storedMnemonic: string | null = null;
+
+      if (Platform.OS === 'web') {
+        storedMnemonic = await AsyncStorage.getItem(seedKey);
+      } else {
+        storedMnemonic = await SecureStore.getItemAsync(seedKey);
+      }
+
+      if (storedMnemonic) {
+        setBackupMnemonic(storedMnemonic);
+        setShowBackupModal(true);
+      } else {
+        showAlert('No Backup', 'Recovery phrase not found. It may have been imported from another device.');
+      }
+    } catch (error) {
+      console.error('Error retrieving mnemonic:', error);
+      showAlert('Error', 'Failed to retrieve recovery phrase.');
+    }
+  };
+
  return (
    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} testID="settings-screen">
      <StatusBar barStyle={isDarkMode ? "light-content" : "dark-content"} />
@@ -409,6 +443,14 @@ const SettingsScreen: React.FC = () => {
            onPress={() => setShowAutoLockModal(true)}
            testID="auto-lock-button"
          />
+
+          <SettingItem
+            icon="🔑"
+            title="Backup Recovery Phrase"
+            subtitle={selectedAccount ? "View your wallet's recovery phrase" : "No wallet connected"}
+            onPress={handleWalletBackup}
+            testID="backup-recovery-button"
+          />
        </View>

        {/* SUPPORT */}
@@ -642,6 +684,44 @@ const SettingsScreen: React.FC = () => {
        </View>
      </Modal>

+      {/* WALLET BACKUP MODAL */}
+      <Modal visible={showBackupModal} transparent animationType="fade" testID="backup-modal">
+        <View style={styles.modalOverlay}>
+          <View style={[styles.modalContent, { backgroundColor: colors.surface }]}>
+            <Text style={[styles.modalTitle, { color: colors.text }]}>🔐 Recovery Phrase</Text>
+            <Text style={[styles.warningText, { color: '#EF4444' }]}>
+              ⚠️ NEVER share this with anyone! Write it down and store safely.
+            </Text>
+
+            <View style={styles.mnemonicContainer}>
+              <Text style={[styles.mnemonicText, { color: colors.text }]}>{backupMnemonic}</Text>
+            </View>
+
+            <View style={styles.backupActions}>
+              <TouchableOpacity
+                style={styles.copyButton}
+                onPress={() => {
+                  Clipboard.setString(backupMnemonic);
+                  showAlert('Copied', 'Recovery phrase copied to clipboard');
+                }}
+              >
+                <Text style={styles.copyButtonText}>📋 Copy</Text>
+              </TouchableOpacity>
+            </View>
+
+            <TouchableOpacity
+              style={[styles.confirmButton, { backgroundColor: KurdistanColors.kesk }]}
+              onPress={() => {
+                setShowBackupModal(false);
+                setBackupMnemonic('');
+              }}
+            >
+              <Text style={styles.confirmButtonText}>Done</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+
    </SafeAreaView>
  );
 };
@@ -799,6 +879,53 @@ const styles = StyleSheet.create({
    padding: 12,
    fontSize: 16,
  },
+  // Backup Modal Styles
+  warningText: {
+    fontSize: 12,
+    textAlign: 'center',
+    marginBottom: 16,
+    fontWeight: '600',
+  },
+  mnemonicContainer: {
+    backgroundColor: '#FEF9E7',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: '#F5D76E',
+  },
+  mnemonicText: {
+    fontSize: 14,
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+  backupActions: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 16,
+  },
+  copyButton: {
+    backgroundColor: '#F5F5F5',
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+  },
+  copyButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+  },
+  confirmButton: {
+    width: '100%',
+    paddingVertical: 16,
+    borderRadius: 12,
+    alignItems: 'center',
+  },
+  confirmButtonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });

 export default SettingsScreen;
@@ -119,6 +119,10 @@ const WalletScreen: React.FC = () => {
  const [networkSelectorVisible, setNetworkSelectorVisible] = useState(false);
  const [walletSelectorVisible, setWalletSelectorVisible] = useState(false);
  const [addTokenModalVisible, setAddTokenModalVisible] = useState(false);
+  const [tokenSearchVisible, setTokenSearchVisible] = useState(false);
+  const [tokenSearchQuery, setTokenSearchQuery] = useState('');
+  const [tokenSettingsVisible, setTokenSettingsVisible] = useState(false);
+  const [hiddenTokens, setHiddenTokens] = useState<string[]>([]);
  const [recipientAddress, setRecipientAddress] = useState('');
  const [sendAmount, setSendAmount] = useState('');
  const [walletName, setWalletName] = useState('');
@@ -701,13 +705,13 @@ const WalletScreen: React.FC = () => {
          <View style={styles.tokensSectionHeader}>
            <Text style={styles.tokensTitle}>Tokens</Text>
            <View style={styles.tokenHeaderIcons}>
-              <TouchableOpacity style={styles.tokenHeaderIcon}>
+              <TouchableOpacity style={styles.tokenHeaderIcon} onPress={() => setTokenSearchVisible(true)}>
                <Text>🔍</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.tokenHeaderIcon} onPress={() => setAddTokenModalVisible(true)}>
                <Text>➕</Text>
              </TouchableOpacity>
-              <TouchableOpacity style={styles.tokenHeaderIcon} onPress={handleBackupMnemonic}>
+              <TouchableOpacity style={styles.tokenHeaderIcon} onPress={() => setTokenSettingsVisible(true)}>
                <Text>⚙️</Text>
              </TouchableOpacity>
            </View>
@@ -1100,6 +1104,116 @@ const WalletScreen: React.FC = () => {
        </View>
      </Modal>

+      {/* Token Search Modal */}
+      <Modal visible={tokenSearchVisible} transparent animationType="slide" onRequestClose={() => setTokenSearchVisible(false)}>
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalCard}>
+            <Text style={styles.modalHeader}>🔍 Search Tokens</Text>
+            <TextInput
+              style={styles.inputField}
+              placeholder="Search by name or symbol..."
+              value={tokenSearchQuery}
+              onChangeText={setTokenSearchQuery}
+              autoCapitalize="none"
+              autoFocus
+            />
+            <ScrollView style={styles.tokenSearchResults}>
+              {tokens
+                .filter(t =>
+                  !hiddenTokens.includes(t.symbol) &&
+                  (t.symbol.toLowerCase().includes(tokenSearchQuery.toLowerCase()) ||
+                   t.name.toLowerCase().includes(tokenSearchQuery.toLowerCase()))
+                )
+                .map((token) => (
+                  <TouchableOpacity
+                    key={token.symbol}
+                    style={styles.tokenSearchItem}
+                    onPress={() => {
+                      setTokenSearchVisible(false);
+                      setTokenSearchQuery('');
+                      handleTokenPress(token);
+                    }}
+                  >
+                    <Image source={token.logo} style={styles.tokenSearchLogo} resizeMode="contain" />
+                    <View style={{flex: 1}}>
+                      <Text style={styles.tokenSearchSymbol}>{token.symbol}</Text>
+                      <Text style={styles.tokenSearchName}>{token.name}</Text>
+                    </View>
+                    <Text style={styles.tokenSearchBalance}>{balances[token.symbol] || '0.00'}</Text>
+                  </TouchableOpacity>
+                ))}
+              {tokens.filter(t =>
+                !hiddenTokens.includes(t.symbol) &&
+                (t.symbol.toLowerCase().includes(tokenSearchQuery.toLowerCase()) ||
+                 t.name.toLowerCase().includes(tokenSearchQuery.toLowerCase()))
+              ).length === 0 && (
+                <Text style={styles.noTokensFound}>No tokens found</Text>
+              )}
+            </ScrollView>
+            <TouchableOpacity style={styles.btnConfirm} onPress={() => {
+              setTokenSearchVisible(false);
+              setTokenSearchQuery('');
+            }}>
+              <Text style={{color:'white'}}>Close</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+
+      {/* Token Settings Modal */}
+      <Modal visible={tokenSettingsVisible} transparent animationType="slide" onRequestClose={() => setTokenSettingsVisible(false)}>
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalCard}>
+            <Text style={styles.modalHeader}>⚙️ Token Settings</Text>
+            <Text style={styles.tokenSettingsSubtitle}>Manage your token visibility</Text>
+
+            <ScrollView style={styles.tokenSettingsList}>
+              {tokens.map((token) => {
+                const isHidden = hiddenTokens.includes(token.symbol);
+                return (
+                  <View key={token.symbol} style={styles.tokenSettingsItem}>
+                    <Image source={token.logo} style={styles.tokenSettingsLogo} resizeMode="contain" />
+                    <View style={{flex: 1}}>
+                      <Text style={styles.tokenSettingsSymbol}>{token.symbol}</Text>
+                      <Text style={styles.tokenSettingsName}>{token.name}</Text>
+                    </View>
+                    <TouchableOpacity
+                      style={[styles.tokenVisibilityToggle, isHidden && styles.tokenVisibilityHidden]}
+                      onPress={() => {
+                        if (isHidden) {
+                          setHiddenTokens(prev => prev.filter(s => s !== token.symbol));
+                        } else {
+                          setHiddenTokens(prev => [...prev, token.symbol]);
+                        }
+                      }}
+                    >
+                      <Text style={styles.tokenVisibilityText}>{isHidden ? '👁️‍🗨️' : '👁️'}</Text>
+                    </TouchableOpacity>
+                  </View>
+                );
+              })}
+            </ScrollView>
+
+            <View style={styles.tokenSettingsActions}>
+              <TouchableOpacity
+                style={styles.tokenSettingsOption}
+                onPress={() => {
+                  setTokenSettingsVisible(false);
+                  setAddTokenModalVisible(true);
+                }}
+              >
+                <Text style={styles.tokenSettingsOptionIcon}>➕</Text>
+                <Text style={styles.tokenSettingsOptionText}>Add Custom Token</Text>
+              </TouchableOpacity>
+            </View>
+
+            <TouchableOpacity style={styles.btnConfirm} onPress={() => setTokenSettingsVisible(false)}>
+              <Text style={{color:'white'}}>Done</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+
    </SafeAreaView>
  );
 };
@@ -1798,6 +1912,116 @@ const styles = StyleSheet.create({
  deleteWalletIcon: {
    fontSize: 18,
  },
+  // Token Search Modal
+  tokenSearchResults: {
+    width: '100%',
+    maxHeight: 300,
+    marginBottom: 16,
+  },
+  tokenSearchItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F8F9FA',
+    padding: 12,
+    borderRadius: 12,
+    marginBottom: 8,
+  },
+  tokenSearchLogo: {
+    width: 40,
+    height: 40,
+    marginRight: 12,
+  },
+  tokenSearchSymbol: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+  },
+  tokenSearchName: {
+    fontSize: 12,
+    color: '#999',
+    marginTop: 2,
+  },
+  tokenSearchBalance: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: KurdistanColors.kesk,
+  },
+  noTokensFound: {
+    textAlign: 'center',
+    color: '#999',
+    paddingVertical: 32,
+  },
+  // Token Settings Modal
+  tokenSettingsSubtitle: {
+    color: '#666',
+    fontSize: 14,
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  tokenSettingsList: {
+    width: '100%',
+    maxHeight: 300,
+    marginBottom: 16,
+  },
+  tokenSettingsItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F8F9FA',
+    padding: 12,
+    borderRadius: 12,
+    marginBottom: 8,
+  },
+  tokenSettingsLogo: {
+    width: 40,
+    height: 40,
+    marginRight: 12,
+  },
+  tokenSettingsSymbol: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+  },
+  tokenSettingsName: {
+    fontSize: 12,
+    color: '#999',
+    marginTop: 2,
+  },
+  tokenVisibilityToggle: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(0, 143, 67, 0.1)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  tokenVisibilityHidden: {
+    backgroundColor: 'rgba(156, 163, 175, 0.2)',
+  },
+  tokenVisibilityText: {
+    fontSize: 20,
+  },
+  tokenSettingsActions: {
+    width: '100%',
+    marginBottom: 16,
+  },
+  tokenSettingsOption: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 143, 67, 0.05)',
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(0, 143, 67, 0.2)',
+  },
+  tokenSettingsOptionIcon: {
+    fontSize: 20,
+    marginRight: 12,
+  },
+  tokenSettingsOptionText: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: KurdistanColors.kesk,
+  },
 });

 export default WalletScreen;
@@ -0,0 +1,34 @@
+/**
+ * Type declarations for image imports
+ */
+
+declare module '*.png' {
+  const content: number;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: number;
+  export default content;
+}
+
+declare module '*.jpeg' {
+  const content: number;
+  export default content;
+}
+
+declare module '*.gif' {
+  const content: number;
+  export default content;
+}
+
+declare module '*.svg' {
+  import { SvgProps } from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}
+
+declare module '*.webp' {
+  const content: number;
+  export default content;
+}
@@ -2,13 +2,17 @@
 * Shared theme colors for all platforms
 */

-// Kurdistan Flag Colors
+// Kurdistan Flag Colors + Extended Palette
 export const KurdistanColors = {
  kesk: '#00A94F',    // Green - Primary
  sor: '#EE2A35',     // Red - Accent
  zer: '#FFD700',     // Gold - Secondary
  spi: '#FFFFFF',     // White - Background
  reş: '#000000',     // Black - Text
+  // Extended colors
+  mor: '#9C27B0',     // Purple - For special actions
+  şîn: '#2196F3',     // Blue - For info/links
+  gewr: '#9E9E9E',    // Gray - For disabled states
 };

 // Light theme color palette