get list

pages/api/account/api-keys/index.ts

+import type { ApiKeys } from 'pages/api/types/account';
+
+import handler from 'pages/api/utils/handler';
+
+const apiKeysHandler = handler<ApiKeys>(() => '/account/v1/user/api_keys', [ 'GET', 'POST' ]);
+
+export default apiKeysHandler;

ui/pages/ApiKeys.tsx

 import { Box, Button, HStack, Link, Text, useDisclosure } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { TApiKeyItem } from 'data/apiKey';
@@ -19,6 +20,14 @@ const ApiKeys: React.FC = () => {
   const [ apiKeyModalData, setApiKeyModalData ] = useState<TApiKeyItem>();
   const [ deleteModalData, setDeleteModalData ] = useState<string>();
 
+  useQuery([ 'api-keys' ], async() => {
+    const response = await fetch('/api/account/api-keys');
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  });
+
   const onEditClick = useCallback((data: TApiKeyItem) => {
     setApiKeyModalData(data);
     apiKeyModalProps.onOpen();