change useAddressMetadataInfoQuery accordint to new version of the API

lib/address/parseMetaPayload.ts

+import type { AddressMetadataTag } from 'types/api/addressMetadata';
+import type { AddressMetadataTagFormatted } from 'types/client/addressMetadata';
+
+export default function parseMetaPayload(meta: AddressMetadataTag['meta']): AddressMetadataTagFormatted['meta'] {
+  try {
+    const parsedMeta = JSON.parse(meta || '');
+
+    if (typeof parsedMeta !== 'object' || parsedMeta === null || Array.isArray(parsedMeta)) {
+      throw new Error('Invalid JSON');
+    }
+
+    const result: AddressMetadataTagFormatted['meta'] = {};
+
+    if ('textColor' in parsedMeta && typeof parsedMeta.textColor === 'string') {
+      result.textColor = parsedMeta.textColor;
+    }
+
+    if ('bgColor' in parsedMeta && typeof parsedMeta.bgColor === 'string') {
+      result.bgColor = parsedMeta.bgColor;
+    }
+
+    if ('actionURL' in parsedMeta && typeof parsedMeta.actionURL === 'string') {
+      result.actionURL = parsedMeta.actionURL;
+    }
+
+    return result;
+  } catch (error) {
+    return null;
+  }
+}

lib/address/useAddressMetadataInfoQuery.ts

-import _mapKeys from 'lodash/mapKeys';
+import { useQuery } from '@tanstack/react-query';
+
+import type { AddressMetadataInfo } from 'types/api/addressMetadata';
+import type { AddressMetadataInfoFormatted, AddressMetadataTagFormatted } from 'types/client/addressMetadata';
 
 import config from 'configs/app';
-import useApiQuery from 'lib/api/useApiQuery';
+import useApiFetch from 'lib/api/useApiFetch';
+import { getResourceKey } from 'lib/api/useApiQuery';
+
+import parseMetaPayload from './parseMetaPayload';
 
 export default function useAddressMetadataInfoQuery(addresses: Array<string>) {
-  return useApiQuery('address_metadata_info', {
-    fetchParams: {
-      method: 'POST',
-      body: {
-        addresses,
-        chainId: config.chain.id,
-        tags: { limit: '20' },
-      },
+
+  const apiFetch = useApiFetch();
+
+  const queryParams = {
+    addresses,
+    chainId: config.chain.id,
+    tagsLimit: '20',
+  };
+  const resource = 'address_metadata_info';
+
+  // TODO @tom2drum: Improve the typing here
+  // since we are formatting the API data in the select function here
+  // we cannot use the useApiQuery hook because of its current typing
+  // enhance useApiQuery so it can accept an API data and the formatted data types
+  return useQuery<AddressMetadataInfo, unknown, AddressMetadataInfoFormatted>({
+    queryKey: getResourceKey(resource, { queryParams }),
+    queryFn: async() => {
+      return apiFetch(resource, { queryParams }) as Promise<AddressMetadataInfo>;
     },
-    queryOptions: {
-      enabled: addresses.length > 0 && config.features.addressMetadata.isEnabled,
-      select: (data) => {
-        const addresses = _mapKeys(data.addresses, (_, address) => address.toLowerCase());
+    enabled: addresses.length > 0 && config.features.addressMetadata.isEnabled,
+    select: (data) => {
+      const addresses = Object.entries(data.addresses)
+        .map(([ address, { tags, reputation } ]) => {
+          const formattedTags: Array<AddressMetadataTagFormatted> = tags.map((tag) => ({ ...tag, meta: parseMetaPayload(tag.meta) }));
+          return [ address.toLowerCase(), { tags: formattedTags, reputation } ] as const;
+        })
+        .reduce((result, item) => {
+          result[item[0]] = item[1];
+          return result;
+        }, {} as AddressMetadataInfoFormatted['addresses']);
 
-        return { addresses };
-      },
+      return { addresses };
     },
   });
 }

lib/api/resources.ts

@@ -32,6 +32,7 @@ import type {
   AddressCoinBalanceHistoryChartOld,
 } from 'types/api/address';
 import type { AddressesResponse } from 'types/api/addresses';
+import type { AddressMetadataInfo } from 'types/api/addressMetadata';
 import type { TxBlobs, Blob } from 'types/api/blobs';
 import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters, BlockWithdrawalsResponse } from 'types/api/block';
 import type { ChartMarketResponse, ChartSecondaryCoinPriceResponse, ChartTransactionResponse } from 'types/api/charts';
@@ -57,7 +58,6 @@ import type {
 import type { IndexingStatus } from 'types/api/indexingStatus';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { LogsResponseTx, LogsResponseAddress } from 'types/api/log';
-import type { AddressMetadataInfo } from 'types/api/metadata';
 import type { NovesAccountHistoryResponse, NovesDescribeTxsResponse, NovesResponseData } from 'types/api/noves';
 import type {
   OptimisticL2DepositsResponse,

mocks/metadata/address.ts

-import type { AddressMetadataInfo, AddressMetadataTag } from 'types/api/metadata';
+import type { AddressMetadataInfo, AddressMetadataTag } from 'types/api/addressMetadata';
 
 import { hash } from '../address/address';
 
@@ -7,7 +7,7 @@ export const nameTag1: AddressMetadataTag = {
   name: 'Ethermine.ru',
   tagType: 'name',
   ordinal: 0,
-  meta: {},
+  meta: null,
 };
 
 export const genericTag1: AddressMetadataTag = {
@@ -15,7 +15,7 @@ export const genericTag1: AddressMetadataTag = {
   name: 'Ethermine.ru',
   tagType: 'generic',
   ordinal: 0,
-  meta: {},
+  meta: null,
 };
 
 export const protocolTag1: AddressMetadataTag = {
@@ -23,7 +23,7 @@ export const protocolTag1: AddressMetadataTag = {
   name: 'Aerodrome',
   tagType: 'protocol',
   ordinal: 0,
-  meta: {},
+  meta: null,
 };
 
 export const baseInfo: AddressMetadataInfo = {

types/api/metadata.ts → types/api/addressMetadata.ts

@@ -12,5 +12,5 @@ export interface AddressMetadataTag {
   name: string;
   tagType: AddressMetadataTagType;
   ordinal: number;
-  meta: Record<string, unknown>;
+  meta: string | null;
 }

types/client/addressMetadata.ts

+import type { AddressMetadataTagType } from 'types/api/addressMetadata';
+
+export interface AddressMetadataInfoFormatted {
+  addresses: Record<string, {
+    tags: Array<AddressMetadataTagFormatted>;
+    reputation: number | null;
+  }>;
+}
+
+export interface AddressMetadataTagFormatted {
+  slug: string;
+  name: string;
+  tagType: AddressMetadataTagType;
+  ordinal: number;
+  meta: {
+    textColor?: string;
+    bgColor?: string;
+    actionURL?: string;
+  } | null;
+}