feat: fetch app info

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/EcosystemAppsModal.tsx

@@ -3,13 +3,15 @@
 import {
     Button,
     HStack,
+    Image,
     Modal,
     ModalBody,
     ModalCloseButton,
     ModalContent,
     ModalContentProps,
     ModalHeader,
     ModalOverlay,
+    Text,
     VStack,
     useColorMode,
     useMediaQuery,
@@ -19,6 +21,7 @@ import { useWallet } from '../../hooks';
 import { useEffect, useState } from 'react';
 import { useDAppKitPrivyConfig } from '../../DAppKitPrivyProvider';
 import { AppsLogo } from '../../assets';
+import { useFetchAppInfo } from '../../hooks/useFetchAppInfo';
 
 type Props = {
     isOpen: boolean;
@@ -42,9 +45,12 @@ export const EcosystemAppsModal = ({ isOpen, onClose }: Props) => {
     const { colorMode } = useColorMode();
     const isDark = colorMode === 'dark';
 
-    const { authenticated } = usePrivy();
     const { privyConfig } = useDAppKitPrivyConfig();
-    const ecosystemAppsID = privyConfig?.ecosystemAppsID;
+    const { data: appsInfo, isLoading } = useFetchAppInfo(
+        privyConfig?.ecosystemAppsID || [],
+    );
+
+    const { authenticated } = usePrivy();
 
     const { loginWithCrossAppAccount, linkCrossAppAccount } =
         useCrossAppAccounts();
@@ -86,16 +92,16 @@ export const EcosystemAppsModal = ({ isOpen, onClose }: Props) => {
                     justifyContent={'center'}
                     alignItems={'center'}
                 >
-                    Select VeChain App
+                    Select a VeChain App
                 </ModalHeader>
                 <HStack justify={'center'} my={10}>
                     <AppsLogo boxSize={'100px'} />
                 </HStack>
                 <ModalCloseButton />
                 <ModalBody>
                     <VStack spacing={4} w={'full'} pb={6}>
-                        {ecosystemAppsID &&
-                            ecosystemAppsID.map((appId) => (
+                        {appsInfo &&
+                            Object.entries(appsInfo).map(([appId, appInfo]) => (
                                 <Button
                                     key={appId}
                                     fontSize={'14px'}
@@ -114,8 +120,15 @@ export const EcosystemAppsModal = ({ isOpen, onClose }: Props) => {
                                         connectWithVebetterDaoApps(appId);
                                         onClose();
                                     }}
+                                    isDisabled={isLoading}
+                                    isLoading={isLoading}
                                 >
-                                    {appId}
+                                    <Image
+                                        src={appInfo.logo_url}
+                                        alt={appInfo.name}
+                                        w={'30px'}
+                                    />
+                                    <Text ml={2}>{appInfo.name}</Text>
                                 </Button>
                             ))}
                     </VStack>

packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/hooks/useFetchAppInfo.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+
+interface PrivyAppInfo {
+    id: string;
+    name: string;
+    logo_url: string;
+    icon_url: string | null;
+    terms_and_conditions_url: string;
+    privacy_policy_url: string;
+    theme: string;
+    accent_color: string;
+    wallet_auth: boolean;
+    email_auth: boolean;
+    google_oauth: boolean;
+    twitter_oauth: boolean;
+    // Add other fields as needed
+}
+
+const fetchPrivyAppInfo = async (appId: string): Promise<PrivyAppInfo> => {
+    const response = await fetch(`https://auth.privy.io/api/v1/apps/${appId}`, {
+        headers: {
+            'privy-app-id': appId,
+        },
+    });
+
+    if (!response.ok) {
+        throw new Error('Failed to fetch Privy app info');
+    }
+
+    return response.json();
+};
+
+export function useFetchAppInfo(appIds: string | string[]) {
+    const [data, setData] = useState<Record<string, PrivyAppInfo> | null>(null);
+    const [error, setError] = useState<Error | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        if (!appIds) return;
+
+        const fetchData = async () => {
+            setIsLoading(true);
+            try {
+                const ids = Array.isArray(appIds) ? appIds : [appIds];
+                const results = await Promise.all(
+                    ids.map((id) => fetchPrivyAppInfo(id)),
+                );
+
+                const appInfoMap = Object.fromEntries(
+                    results.map((result, index) => [ids[index], result]),
+                );
+
+                setData(appInfoMap);
+                setError(null);
+            } catch (err) {
+                setError(
+                    err instanceof Error ? err : new Error('Unknown error'),
+                );
+                setData(null);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchData();
+    }, [appIds]);
+
+    return { data, error, isLoading };
+}