feat: modify tx-indexer response data (#541)

Author: jinoosss

packages/adena-extension/src/common/provider/adena/adena-provider.tsx

@@ -51,7 +51,7 @@ export const AdenaProvider: React.FC<React.PropsWithChildren<unknown>> = ({ chil
     return new GnoProvider(currentNetwork.rpcUrl, currentNetwork.chainId);
   }, [currentNetwork]);
 
-  const axiosInstance = axios.create({ timeout: 5000 });
+  const axiosInstance = axios.create({ timeout: 20_000 });
 
   const localStorage = AdenaStorage.local();
 

packages/adena-extension/src/common/provider/wallet/wallet-provider.tsx

@@ -95,7 +95,7 @@ export const WalletProvider: React.FC<React.PropsWithChildren<unknown>> = ({ chi
     if (currentAccount) {
       setCurrentAccount(currentAccount);
       await accountService.changeCurrentAccount(currentAccount);
-      initTokenMetainfos(currentAccount.id);
+      await initTokenMetainfos(currentAccount.id);
     }
     return true;
   }

packages/adena-extension/src/common/utils/fetch-utils.ts

@@ -1,5 +1,13 @@
 import axios from 'axios';
 import fetchAdapter from '@vespaiach/axios-fetch-adapter';
+import { v1 } from 'uuid';
+
+export interface RPCRequest {
+  id: string;
+  jsonrpc: string;
+  method: string;
+  params: any[];
+}
 
 export async function fetchHealth(url: string): Promise<{ url: string; healthy: boolean }> {
   const healthy = await axios
@@ -11,3 +19,20 @@ export async function fetchHealth(url: string): Promise<{ url: string; healthy:
     healthy,
   };
 }
+
+export function makeRPCRequest({
+  id,
+  method,
+  params,
+}: {
+  id?: string;
+  method: string;
+  params?: any[];
+}): RPCRequest {
+  return {
+    id: id || v1().toString(),
+    jsonrpc: '2.0',
+    method: method,
+    params: params || [],
+  };
+}

packages/adena-extension/src/common/utils/string-utils.ts

@@ -1,3 +1,6 @@
+import { fromBech32 } from 'adena-module';
+import { formatAddress } from './client-utils';
+
 export const convertTextToAmount = (text: string): { value: string; denom: string } | null => {
   try {
     const balance = text
@@ -17,8 +20,23 @@ export const convertTextToAmount = (text: string): { value: string; denom: strin
     return null;
   }
 };
+
 export const makeQueryString = (parameters: { [key in string]: string }): string => {
   return Object.entries(parameters)
     .map((entry) => `${entry[0]}=${entry[1]}`)
     .join('&');
 };
+
+export const makeDisplayPackagePath = (packagePath: string): string => {
+  const items = packagePath.split('/');
+  return items.map((item) => (isBech32Address(item) ? formatAddress(item, 4) : item)).join('/');
+};
+
+const isBech32Address = (str: string): boolean => {
+  try {
+    const { prefix } = fromBech32(str);
+    return !!prefix;
+  } catch {
+    return false;
+  }
+};

packages/adena-extension/src/components/pages/additional-token/additional-token-search-list/additional-token-search-list.tsx

@@ -4,6 +4,7 @@ import {
   AdditionalTokenSearchListWrapper,
 } from './additional-token-search-list.styles';
 import { TokenInfo } from '@types';
+import { makeDisplayPackagePath } from '@common/utils/string-utils';
 
 export interface AdditionalTokenSearchListProps {
   tokenInfos: TokenInfo[];
@@ -33,13 +34,17 @@ const AdditionalTokenSearchListItem: React.FC<AdditionalTokenSearchListItem> = (
     return symbol;
   }, [symbol]);
 
+  const formattedPath = useMemo(() => {
+    return makeDisplayPackagePath(path || '');
+  }, [path]);
+
   return (
     <AdditionalTokenSearchListItemWrapper onClick={(): void => onClickListItem(tokenId)}>
       <span className='title'>
         <span className='name'>{name}</span>
         <span className='symbol'>{`(${formattedSymbol})`}</span>
       </span>
-      <span className='path'>{path}</span>
+      <span className='path'>{formattedPath}</span>
     </AdditionalTokenSearchListItemWrapper>
   );
 };

packages/adena-extension/src/components/pages/additional-token/additional-token/index.tsx

@@ -5,6 +5,7 @@ import AdditionalTokenInfo from '@components/pages/additional-token/additional-t
 import { SubHeader } from '@components/atoms';
 import LeftArrowIcon from '@assets/arrowL-left.svg';
 import { AdditionalTokenProps } from '@types';
+import { makeDisplayPackagePath } from '@common/utils/string-utils';
 
 const AdditionalToken: React.FC<AdditionalTokenProps> = ({
   opened,
@@ -46,7 +47,7 @@ const AdditionalToken: React.FC<AdditionalTokenProps> = ({
       <div className='info-wrapper'>
         <AdditionalTokenInfo
           symbol={selectedTokenInfo?.symbol || ''}
-          path={selectedTokenInfo?.pathInfo || ''}
+          path={makeDisplayPackagePath(selectedTokenInfo?.pathInfo || '')}
           decimals={selectedTokenInfo ? `${selectedTokenInfo.decimals}` : ''}
         />
       </div>

packages/adena-extension/src/hooks/use-token-metainfo.tsx

@@ -199,7 +199,13 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
     };
 
     const tokenMetainfos = await tokenService.getTokenMetainfosByAccountId(currentAccount.id);
-    if (tokenMetainfos.find((item) => item.tokenId === changedTokenMetainfo.tokenId)) {
+    if (
+      tokenMetainfos.find(
+        (item) =>
+          item.tokenId === changedTokenMetainfo.tokenId &&
+          item.networkId === changedTokenMetainfo.networkId,
+      )
+    ) {
       return false;
     }
 

packages/adena-extension/src/hooks/wallet/token-details/use-token-transactions-page.ts

@@ -0,0 +1,99 @@
+import { useMemo } from 'react';
+
+import { useAdenaContext } from '@hooks/use-context';
+import { useCurrentAccount } from '@hooks/use-current-account';
+import { useMakeTransactionsWithTime } from '@hooks/use-make-transactions-with-time';
+import { useNetwork } from '@hooks/use-network';
+import { useTokenMetainfo } from '@hooks/use-token-metainfo';
+import { RefetchOptions, useInfiniteQuery } from '@tanstack/react-query';
+import { TransactionInfo } from '@types';
+
+export const useTokenTransactionsPage = (
+  isNative: boolean | undefined,
+  tokenPath: string,
+  { enabled }: { enabled: boolean },
+): {
+  data: TransactionInfo[] | null;
+  isFetched: boolean;
+  status: 'loading' | 'error' | 'success';
+  isLoading: boolean;
+  isFetching: boolean;
+  isSupported: boolean;
+  hasNextPage: boolean;
+  fetchNextPage: () => Promise<boolean>;
+  refetch: (options?: RefetchOptions) => void;
+} => {
+  const { currentNetwork } = useNetwork();
+  const { currentAddress } = useCurrentAccount();
+  const { transactionHistoryService } = useAdenaContext();
+  const { tokenMetainfos } = useTokenMetainfo();
+
+  const {
+    data: allTransactions,
+    refetch,
+    hasNextPage,
+    fetchNextPage,
+  } = useInfiniteQuery(
+    [
+      'token-details/page/history',
+      currentNetwork.networkId,
+      `${isNative}`,
+      currentAddress,
+      tokenPath,
+    ],
+    (context: any) => {
+      if (isNative === undefined) {
+        return null;
+      }
+
+      const cursor = context.pageParam || null;
+
+      return isNative
+        ? transactionHistoryService.fetchNativeTransactionHistoryPage(currentAddress || '', cursor)
+        : transactionHistoryService.fetchGRC20TransactionHistoryPage(
+            currentAddress || '',
+            tokenPath,
+            cursor,
+          );
+    },
+    {
+      enabled:
+        !!currentAddress &&
+        transactionHistoryService.supported &&
+        tokenMetainfos.length > 0 &&
+        enabled,
+    },
+  );
+
+  const transactions = useMemo(() => {
+    if (!allTransactions) {
+      return null;
+    }
+
+    return allTransactions.pages.flatMap((page) => page?.transactions || []);
+  }, [allTransactions]);
+
+  const { data, isFetched, status, isLoading, isFetching } = useMakeTransactionsWithTime(
+    `token-details/page/history/${currentNetwork.chainId}/${transactions?.length}/${tokenPath}`,
+    transactions,
+  );
+
+  const refetchTransactions = (options?: RefetchOptions): void => {
+    refetch(options);
+  };
+
+  return {
+    data: data || null,
+    isSupported: transactionHistoryService.supported && enabled,
+    isFetched: isFetched,
+    status,
+    isLoading,
+    isFetching,
+    fetchNextPage: () =>
+      fetchNextPage()
+        .then(() => true)
+        .catch(() => false),
+    hasNextPage: hasNextPage !== false,
+    refetch: refetchTransactions,
+  };
+};

packages/adena-extension/src/hooks/wallet/token-details/use-token-transactions.ts

@@ -11,13 +11,15 @@ import { TransactionInfo } from '@types';
 export const useTokenTransactions = (
   isNative: boolean | undefined,
   tokenPath: string,
+  { enabled }: { enabled: boolean },
 ): {
   data: TransactionInfo[] | null;
   isFetched: boolean;
   status: 'loading' | 'error' | 'success';
   isLoading: boolean;
   isFetching: boolean;
   isSupported: boolean;
+  hasNextPage: boolean;
   fetchNextPage: () => Promise<boolean>;
   refetch: (options?: RefetchOptions) => void;
 } => {
@@ -39,7 +41,11 @@ export const useTokenTransactions = (
         : transactionHistoryService.fetchGRC20TransactionHistory(currentAddress || '', tokenPath);
     },
     {
-      enabled: !!currentAddress && transactionHistoryService.supported && tokenMetainfos.length > 0,
+      enabled:
+        !!currentAddress &&
+        transactionHistoryService.supported &&
+        tokenMetainfos.length > 0 &&
+        enabled,
     },
   );
 
@@ -85,11 +91,12 @@ export const useTokenTransactions = (
 
   return {
     data: data || null,
-    isSupported: transactionHistoryService.supported,
+    isSupported: transactionHistoryService.supported && enabled,
     isFetched: isFetched,
     status,
     isLoading,
     isFetching,
+    hasNextPage: allTransactions?.length !== blockIndex,
     fetchNextPage,
     refetch: refetchTransactions,
   };

packages/adena-extension/src/hooks/wallet/transaction-history/use-transaction-history-page.ts

@@ -0,0 +1,101 @@
+import { useMemo } from 'react';
+import { RefetchOptions, useInfiniteQuery } from '@tanstack/react-query';
+
+import { useAdenaContext } from '@hooks/use-context';
+import { useCurrentAccount } from '@hooks/use-current-account';
+import { useMakeTransactionsWithTime } from '@hooks/use-make-transactions-with-time';
+import { useNetwork } from '@hooks/use-network';
+import { useTokenMetainfo } from '@hooks/use-token-metainfo';
+import { TransactionInfo, TransactionWithPageInfo } from '@types';
+
+export const useTransactionHistoryPage = ({
+  enabled,
+}: {
+  enabled: boolean;
+}): {
+  data: TransactionInfo[] | null;
+  isFetched: boolean;
+  status: 'loading' | 'error' | 'success';
+  isLoading: boolean;
+  isFetching: boolean;
+  isSupported: boolean;
+  hasNextPage: boolean;
+  fetchNextPage: () => Promise<boolean>;
+  refetch: (options?: RefetchOptions) => void;
+} => {
+  const { currentNetwork } = useNetwork();
+  const { currentAddress } = useCurrentAccount();
+  const { transactionHistoryService } = useAdenaContext();
+  const { tokenMetainfos } = useTokenMetainfo();
+
+  const {
+    data: allTransactions,
+    hasNextPage,
+    refetch,
+    fetchNextPage,
+  } = useInfiniteQuery<TransactionWithPageInfo, Error, unknown, any>(
+    {
+      queryKey: ['history/page/all', currentNetwork.networkId, currentAddress || ''],
+      getNextPageParam: (lastPage?: TransactionWithPageInfo): string | boolean | null => {
+        return lastPage?.cursor || null;
+      },
+      queryFn: (context: any) => {
+        if (context?.pageParam === false) {
+          return {
+            hasNext: false,
+            cursor: null,
+            transactions: [],
+          };
+        }
+
+        const cursor = context?.pageParam || null;
+        return transactionHistoryService.fetchAllTransactionHistoryPage(
+          currentAddress || '',
+          cursor,
+        );
+      },
+    },
+    {
+      enabled:
+        !!currentAddress &&
+        tokenMetainfos.length > 0 &&
+        transactionHistoryService.supported &&
+        enabled,
+    },
+  );
+
+  const transactions = useMemo(() => {
+    if (!allTransactions) {
+      return null;
+    }
+
+    return allTransactions.pages.flatMap(
+      (page: unknown) => (page as TransactionWithPageInfo).transactions,
+    );
+  }, [allTransactions]);
+
+  const { data, isFetched, status, isLoading, isFetching } = useMakeTransactionsWithTime(
+    `history/page/all/${currentNetwork.chainId}/${transactions?.length}`,
+    transactions,
+  );
+
+  const refetchTransactions = (options?: RefetchOptions): void => {
+    refetch(options);
+  };
+
+  return {
+    data: data || null,
+    isSupported: transactionHistoryService.supported && enabled,
+    isFetched: isFetched,
+    status,
+    isLoading,
+    isFetching,
+    hasNextPage: hasNextPage !== false,
+    fetchNextPage: (): Promise<boolean> => {
+      return fetchNextPage()
+        .then((result) => !result.error)
+        .catch(() => false);
+    },
+    refetch: refetchTransactions,
+  };
+};