nameservice fix

apps/mobile/src/components/NameCard/nameCard.tsx

@@ -0,0 +1,37 @@
+import { useStyles } from "../../hooks";
+import { View, Text } from "react-native";
+import stylesheet from "./styles";
+
+interface NameCardProps {
+    name: string;
+    owner: string;
+    expiryTime: Date;
+  }
+
+  export const NameCard: React.FC<NameCardProps> = ({ name, owner, expiryTime }) => {
+    const styles = useStyles(stylesheet);
+
+    return (
+      <View style={styles.card}>
+        <View style={styles.innerContainer}>
+          <Text style={styles.nameText}>{name}</Text>
+
+          <View style={styles.detailsContainer}>
+            <View style={styles.ownerContainer}>
+              <Text style={styles.label}>Owner:</Text>
+              <Text style={styles.value}>
+                {owner.slice(0, 6)}...{owner.slice(-4)}
+              </Text>
+            </View>
+
+            <View style={styles.expiryContainer}>
+              <Text style={styles.label}>Expires:</Text>
+              <Text style={styles.value}>
+                {new Date(expiryTime).toLocaleDateString()}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  };

apps/mobile/src/components/NameCard/styles.ts

@@ -0,0 +1,68 @@
+import { ThemedStyleSheet, Spacing } from '../../styles';
+
+export default ThemedStyleSheet((theme) => ({
+  card: {
+    backgroundColor: theme.colors.surface,
+    borderRadius: 20,
+    padding: Spacing.xlarge,
+    marginVertical: Spacing.medium,
+    borderWidth: 1,
+    borderColor: `${theme.colors.primary}20`,
+    shadowColor: theme.colors.primary,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.15,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+
+  innerContainer: {
+    backgroundColor: `${theme.colors.background}80`,
+    borderRadius: 16,
+    padding: Spacing.large,
+    borderWidth: 1,
+    borderColor: `${theme.colors.primary}10`,
+  },
+
+  nameText: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: theme.colors.primary,
+    marginBottom: Spacing.medium,
+    letterSpacing: 0.5,
+  },
+
+  detailsContainer: {
+    marginTop: Spacing.medium,
+    gap: Spacing.small,
+  },
+
+  ownerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: Spacing.small,
+  },
+
+  label: {
+    fontSize: 14,
+    color: theme.colors.white,
+    fontWeight: '600',
+  },
+
+  value: {
+    fontSize: 14,
+    color: theme.colors.white,
+    opacity: 0.8,
+  },
+
+  expiryContainer: {
+    marginTop: Spacing.medium,
+    backgroundColor: `${theme.colors.primary}10`,
+    paddingHorizontal: Spacing.medium,
+    paddingVertical: Spacing.small,
+    borderRadius: 12,
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: Spacing.small,
+  }
+})); 

apps/mobile/src/components/NamesList/index.tsx

@@ -0,0 +1,44 @@
+import { View, FlatList, ActivityIndicator } from 'react-native';
+import { NameCard } from '../NameCard/nameCard';
+import { useStyles } from '../../hooks';
+import stylesheet from './styles';
+
+interface Name {
+  name: string;
+  owner: string;
+  expiryTime: Date;
+}
+
+interface NamesListProps {
+  names: Name[];
+  isLoading?: boolean;
+}
+
+export const NamesList: React.FC<NamesListProps> = ({ names, isLoading }) => {
+  const styles = useStyles(stylesheet);
+
+  if (isLoading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={names}
+        renderItem={({ item }) => (
+          <NameCard
+            name={item.name}
+            owner={item.owner}
+            expiryTime={item.expiryTime}
+          />
+        )}
+        keyExtractor={item => item.name}
+        contentContainerStyle={styles.list}
+      />
+    </View>
+  );
+}; 

apps/mobile/src/components/NamesList/styles.ts

@@ -0,0 +1,29 @@
+import { ThemedStyleSheet, Spacing } from '../../styles';
+
+export default ThemedStyleSheet((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.background,
+  },
+  list: {
+    padding: Spacing.medium,
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: Spacing.large,
+  },
+  emptyText: {
+    color: theme.colors.secondary,
+    fontSize: 16,
+    textAlign: 'center',
+    marginTop: Spacing.medium,
+  },
+})); 

apps/mobile/src/hooks/modals/useTransaction.ts

@@ -73,4 +73,4 @@ export const useTransaction = ({callsProps=[]}: UseTransactionInterface) => {
     sendTransaction,
     txUrl,
   };
-};
+};

apps/mobile/src/hooks/nameservice/useNamesList.ts

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+import { useAccount } from '@starknet-react/core';
+import { decodeUsername, formatExpiry } from '../../utils/format';
+
+interface RawName {
+  owner_address: string;
+  username: string;
+  time_stamp: string | null;
+  paid: string;
+  quote_address: string | null;
+  expiry: string;
+}
+
+interface FormattedName {
+  name: string;
+  owner: string;
+  expiryTime: Date;
+  paid: string;
+}
+
+export const useNamesList = () => {
+  const [names, setNames] = useState<FormattedName[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { account } = useAccount();
+
+  useEffect(() => {
+    const fetchNames = async () => {
+      try {
+        console.log('Fetching names from API...');
+        const response = await fetch('https://afk-monorepo.onrender.com/username-claimed');
+        console.log('Response status:', response.status);
+
+        const rawData = await response.json();
+        console.log('Raw API Response:', {
+          data: rawData.data,
+          hasData: !!rawData.data,
+          dataLength: rawData.data?.length,
+          fullResponse: rawData
+        });
+
+        if (!rawData.data || !Array.isArray(rawData.data)) {
+          console.error('Invalid data format received:', rawData);
+          return;
+        }
+
+        const formattedNames = (rawData.data as RawName[]).map(name => {
+          console.log('Processing name entry:', name);
+          return {
+            name: decodeUsername(name.username),
+            owner: name.owner_address,
+            expiryTime: formatExpiry(name.expiry),
+            paid: name.paid
+          };
+        });
+
+        console.log('Final formatted names:', formattedNames);
+        setNames(formattedNames);
+      } catch (error) {
+        console.error('Error fetching names:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchNames();
+  }, [account?.address]);
+
+  return { names, isLoading };
+};