fix: improve display of factory tokens (such as wstETH) (#528)

* fix: display different chain pretty names if they are different

    - it is possible for a factory token to have the same chain_name
      as the native chain, but a different pretty name that describes
      what chain it represents (eg. wstETH is "Lido" on Neutron)

* fix: remove concurrent pagination usage of SWR:

    - it didn't work as expected: the null keys past the end of the
      denom array would cause future keys to be missed if within the
      same page range. eg. 2 items (page 3 key = null) -> 3 items, the
      result will be the cached keys from 2 item array, page 3 key
      will not be computed
    - instead increase the page size 1 at a time so it will compute
      each new key as it should

* perf: prevent unnecessary recomputation of client

* refactor: make SWR paginated request handling consistently:

    - it is important to pass non-null keys and iterate keys in sequence
    - many uncomputed keys occur if setting the page size directly
      or if the resolved key returns null

src/components/cards/PoolsTableCard.tsx

@@ -447,7 +447,7 @@ function TokenPair({
         </div>
         <div className="row">
           <div className="col subtext text-left">
-            {token0.chain.chain_name === token1.chain.chain_name ? (
+            {token0.chain.pretty_name === token1.chain.pretty_name ? (
               <span className="nowrap">{token0.chain.pretty_name}</span>
             ) : (
               <>

src/lib/web3/hooks/useDenomClients.ts

@@ -41,8 +41,6 @@ type AssetByDenom = Map<string, Asset>;
 type AssetClientByDenom = Map<string, ChainRegistryClient>;
 type AssetChainUtilByDenom = Map<string, ChainRegistryChainUtil>;
 
-const concurrentItemCount = 3;
-
 // export hook for getting ChainRegistryClient instances for each denom
 export function useAssetClientByDenom(
   denoms: string[] = []
@@ -60,33 +58,30 @@ export function useAssetClientByDenom(
       [denom: string, trace: DenomTrace | undefined, key: string] | null
     >
   >(
+    // allow hash to be an empty string
     (index: number) => {
       const denom = uniqueDenoms.at(index);
       const trace = denom ? denomTraceByDenom?.get(denom) : undefined;
-      // note: you might expect that because the page size is 3
-      //       that 3 keys will be evaluated to see if they have changed,
-      //       but only 1 key will be evaluated. if the first key has no change
-      //       then no other keys will be evaluated and fetch will not be called.
-      // todo: refactoring with a dynamic list of useQueries may solve this.
-      //       for now, ensure the key is different if more traces are available.
-      const traceKeys = Array.from(denomTraceByDenom?.keys() ?? []);
-      return denom ? [denom, trace, `asset-client-${traceKeys}`] : null;
+      return [denom || '', trace, 'asset-client'];
     },
+    // handle cases of empty hash string
     async ([denom, trace]) => {
-      return [denom, await getAssetClient(denom, trace)];
+      return [denom, denom ? await getAssetClient(denom, trace) : undefined];
     },
     {
       parallel: true,
+      initialSize: 1,
       use: [immutable],
-      initialSize: concurrentItemCount,
+      revalidateFirstPage: false,
+      revalidateAll: false,
     }
   );
 
-  // get all pages, concurrentItemCount at a time
+  // get all pages, resolving one key at a time
   const { size, setSize } = swr2;
   useEffect(() => {
     if (size < uniqueDenoms.length) {
-      setSize((s) => Math.min(uniqueDenoms.length, s + concurrentItemCount));
+      setSize((size) => Math.min(uniqueDenoms.length, size + 1));
     }
   }, [size, setSize, uniqueDenoms]);
 

src/lib/web3/hooks/useDenomsFromChain.ts

@@ -16,8 +16,6 @@ type SWRCommon<Data = unknown, Error = unknown> = {
   data: Data | undefined;
 };
 
-const concurrentItemCount = 3;
-
 export function useDenomTraceByDenom(
   denoms: string[]
 ): SWRCommon<DenomTraceByDenom> {
@@ -62,19 +60,19 @@ export function useDenomTraceByDenom(
     // these endpoint responses never change
     {
       parallel: true,
+      initialSize: 1,
       use: [immutable],
-      initialSize: concurrentItemCount,
       revalidateFirstPage: false,
       revalidateAll: false,
       errorRetryCount: 3,
     }
   );
 
-  // get all pages, concurrentItemCount at a time
+  // get all pages, resolving one key at a time
   const { size, setSize } = swr;
   useEffect(() => {
     if (size < ibcDenoms.length) {
-      setSize((size) => Math.min(ibcDenoms.length, size + concurrentItemCount));
+      setSize((size) => Math.min(ibcDenoms.length, size + 1));
     }
   }, [size, setSize, ibcDenoms]);