change types according new model

data/apiKey.ts

-export const apiKey = [
-  {
-    token: '6fd12fe0-841c-4abf-ac2a-8c1b08dadf8e',
-    name: 'zapper.fi',
-  },
-  {
-    token: '057085a1-d2eb-4d8d-8b89-1dd9fba32071',
-    name: 'TenderlyBlaBlaName',
-  },
-  {
-    token: '057085a1-d2eb-4d8d-8b89-1dd9fba32071',
-    name: 'Application name',
-  },
-];
-
-export type TApiKey = Array<TApiKeyItem>
-
-export type TApiKeyItem = {
-  token: string;
-  name: string;
-}

pages/api/types/account.ts

@@ -10,8 +10,8 @@ export interface AddressTag {
 export type AddressTags = Array<AddressTag>
 
 export interface ApiKey {
-  apiKey: string;
-  apiKeyName: string;
+  api_key: string;
+  name: string;
 }
 
 export type ApiKeys = Array<ApiKey>

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -9,10 +9,10 @@ import React, { useCallback, useEffect } from 'react';
 import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
-import type { TApiKeyItem } from 'data/apiKey';
+import type { ApiKey } from 'pages/api/types/account';
 
 type Props = {
-  data?: TApiKeyItem;
+  data?: ApiKey;
 }
 
 type Inputs = {
@@ -27,7 +27,7 @@ const ApiKeyForm: React.FC<Props> = ({ data }) => {
   const { control, handleSubmit, formState: { errors }, setValue } = useForm<Inputs>();
 
   useEffect(() => {
-    setValue('token', data?.token || '');
+    setValue('token', data?.api_key || '');
     setValue('name', data?.name || '');
   }, [ setValue, data ]);
 

ui/apiKey/ApiKeyModal/ApiKeyModal.tsx

 import React, { useCallback } from 'react';
 
-import type { TApiKeyItem } from 'data/apiKey';
+import type { ApiKey } from 'pages/api/types/account';
+
 import FormModal from 'ui/shared/FormModal';
 
 import ApiKeyForm from './ApiKeyForm';
@@ -8,7 +9,7 @@ import ApiKeyForm from './ApiKeyForm';
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  data?: TApiKeyItem;
+  data?: ApiKey;
 }
 
 const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
@@ -19,7 +20,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
     return <ApiKeyForm data={ data }/>;
   }, [ data ]);
   return (
-    <FormModal<TApiKeyItem>
+    <FormModal<ApiKey>
       isOpen={ isOpen }
       onClose={ onClose }
       title={ title }

ui/apiKey/ApiKeyTable/ApiKeyTable.tsx

@@ -8,14 +8,14 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
-import type { TApiKey, TApiKeyItem } from 'data/apiKey';
+import type { ApiKeys, ApiKey } from 'pages/api/types/account';
 
 import ApiKeyTableItem from './ApiKeyTableItem';
 
 interface Props {
-  data: TApiKey;
-  onEditClick: (data: TApiKeyItem) => void;
-  onDeleteClick: (data: TApiKeyItem) => void;
+  data: ApiKeys;
+  onEditClick: (item: ApiKey) => void;
+  onDeleteClick: (item: ApiKey) => void;
   limit: number;
 }
 
@@ -33,7 +33,7 @@ const ApiKeyTable = ({ data, onDeleteClick, onEditClick, limit }: Props) => {
           { data.map((item) => (
             <ApiKeyTableItem
               item={ item }
-              key={ item.token }
+              key={ item.api_key }
               onDeleteClick={ onDeleteClick }
               onEditClick={ onEditClick }
             />

ui/apiKey/ApiKeyTable/ApiKeyTableItem.tsx

@@ -6,15 +6,16 @@ import {
 } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
-import type { TApiKeyItem } from 'data/apiKey';
+import type { ApiKey } from 'pages/api/types/account';
+
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DeleteButton from 'ui/shared/DeleteButton';
 import EditButton from 'ui/shared/EditButton';
 
 interface Props {
-  item: TApiKeyItem;
-  onEditClick: (data: TApiKeyItem) => void;
-  onDeleteClick: (data: TApiKeyItem) => void;
+  item: ApiKey;
+  onEditClick: (item: ApiKey) => void;
+  onDeleteClick: (item: ApiKey) => void;
 }
 
 const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
@@ -28,11 +29,11 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   }, [ item, onDeleteClick ]);
 
   return (
-    <Tr alignItems="top" key={ item.token }>
+    <Tr alignItems="top" key={ item.api_key }>
       <Td>
         <HStack>
-          <Text fontSize="md" fontWeight={ 600 }>{ item.token }</Text>
-          <CopyToClipboard text={ item.token }/>
+          <Text fontSize="md" fontWeight={ 600 }>{ item.api_key }</Text>
+          <CopyToClipboard text={ item.api_key }/>
         </HStack>
         <Text fontSize="sm" marginTop={ 0.5 } variant="secondary">{ item.name }</Text>
       </Td>

ui/pages/ApiKeys.tsx

-import { Box, Button, HStack, Link, Text, useDisclosure } from '@chakra-ui/react';
+import { Box, Button, HStack, Link, Text, Spinner, useDisclosure } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
-import type { TApiKeyItem } from 'data/apiKey';
-import { apiKey } from 'data/apiKey';
+import type { ApiKey, ApiKeys } from 'pages/api/types/account';
+
 import { space } from 'lib/html-entities';
 import ApiKeyModal from 'ui/apiKey/ApiKeyModal/ApiKeyModal';
 import ApiKeyTable from 'ui/apiKey/ApiKeyTable/ApiKeyTable';
@@ -13,14 +13,14 @@ import Page from 'ui/shared/Page/Page';
 
 const DATA_LIMIT = 3;
 
-const ApiKeys: React.FC = () => {
+const ApiKeysPage: React.FC = () => {
   const apiKeyModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();
 
-  const [ apiKeyModalData, setApiKeyModalData ] = useState<TApiKeyItem>();
+  const [ apiKeyModalData, setApiKeyModalData ] = useState<ApiKey>();
   const [ deleteModalData, setDeleteModalData ] = useState<string>();
 
-  useQuery([ 'api-keys' ], async() => {
+  const { data, isLoading, isError } = useQuery<unknown, unknown, ApiKeys>([ 'api-keys' ], async() => {
     const response = await fetch('/api/account/api-keys');
     if (!response.ok) {
       throw new Error('Network response was not ok');
@@ -28,7 +28,7 @@ const ApiKeys: React.FC = () => {
     return response.json();
   });
 
-  const onEditClick = useCallback((data: TApiKeyItem) => {
+  const onEditClick = useCallback((data: ApiKey) => {
     setApiKeyModalData(data);
     apiKeyModalProps.onOpen();
   }, [ apiKeyModalProps ]);
@@ -38,7 +38,7 @@ const ApiKeys: React.FC = () => {
     apiKeyModalProps.onClose();
   }, [ apiKeyModalProps ]);
 
-  const onDeleteClick = useCallback((data: TApiKeyItem) => {
+  const onDeleteClick = useCallback((data: ApiKey) => {
     setDeleteModalData(data.name);
     deleteModalProps.onOpen();
   }, [ deleteModalProps ]);
@@ -48,19 +48,17 @@ const ApiKeys: React.FC = () => {
     deleteModalProps.onClose();
   }, [ deleteModalProps ]);
 
-  const canAdd = apiKey.length < DATA_LIMIT;
+  const content = (() => {
+    if (isLoading || isError) {
+      return <Spinner/>;
+    }
 
+    const canAdd = data.length < DATA_LIMIT;
     return (
-    <Page>
-      <Box h="100%">
-        <AccountPageHeader text="API keys"/>
-        <Text marginBottom={ 12 }>
-          Create API keys to use for your RPC and EthRPC API requests. For more information, see { space }
-          <Link href="#">“How to use a Blockscout API key”</Link>.
-        </Text>
-        { Boolean(apiKey.length) && (
+      <>
+        { data.length > 0 && (
           <ApiKeyTable
-            data={ apiKey }
+            data={ data }
             onDeleteClick={ onDeleteClick }
             onEditClick={ onEditClick }
             limit={ DATA_LIMIT }
@@ -81,6 +79,19 @@ const ApiKeys: React.FC = () => {
             </Text>
           ) }
         </HStack>
+      </>
+    );
+  })();
+
+  return (
+    <Page>
+      <Box h="100%">
+        <AccountPageHeader text="API keys"/>
+        <Text marginBottom={ 12 }>
+          Create API keys to use for your RPC and EthRPC API requests. For more information, see { space }
+          <Link href="#">“How to use a Blockscout API key”</Link>.
+        </Text>
+        { content }
       </Box>
       <ApiKeyModal { ...apiKeyModalProps } onClose={ onApiKeyModalClose } data={ apiKeyModalData }/>
       <DeleteApiKeyModal { ...deleteModalProps } onClose={ onDeleteModalClose } name={ deleteModalData }/>
@@ -88,4 +99,4 @@ const ApiKeys: React.FC = () => {
   );
 };
 
-export default ApiKeys;
+export default ApiKeysPage;