refactor: tokenSymbol part of query's data

Author: 0xPearce

apps/main/src/llamalend/features/manage-loan/hooks/useAddCollateralForm.ts

@@ -15,7 +15,7 @@ import { useAddCollateralPrices } from '@/llamalend/queries/add-collateral/add-c
 import { useMarketRates } from '@/llamalend/queries/market-rates'
 import { getUserHealthOptions } from '@/llamalend/queries/user-health.query'
 import { useUserState } from '@/llamalend/queries/user-state.query'
-import { mapQuery, withTokenSymbol } from '@/llamalend/queries/utils'
+import { mapQuery } from '@/llamalend/queries/utils'
 import type { CollateralParams } from '@/llamalend/queries/validation/manage-loan.types'
 import {
   collateralFormValidationSuite,
@@ -126,17 +126,13 @@ export const useAddCollateralForm = <ChainId extends LlamaChainId>({
 
   const expectedCollateral = useMemo(
     () =>
-      withTokenSymbol(
-        {
-          ...mapQuery(userState, (state) => state?.collateral),
-          data: decimal(
-            values.userCollateral != null && userState.data?.collateral != null
-              ? new BigNumber(values.userCollateral).plus(new BigNumber(userState.data?.collateral)).toString()
-              : null,
-          ),
-        },
-        collateralToken?.symbol,
-      ),
+      mapQuery(userState, (state) => {
+        const value =
+          values.userCollateral != null &&
+          state?.collateral != null &&
+          decimal(new BigNumber(values.userCollateral).plus(state.collateral).toString())
+        return value ? { value, tokenSymbol: collateralToken?.symbol } : null
+      }),
     [collateralToken?.symbol, userState, values.userCollateral],
   )
 

apps/main/src/llamalend/queries/utils.ts

@@ -4,16 +4,10 @@ import type { Query } from '@ui-kit/types/util'
  * Maps a Query type to extract partial data from it.
  * Preserves error and loading states while transforming the data.
  */
-export function mapQuery<TSource, TResult>(
-  query: Query<TSource>,
-  selector: (data: TSource) => TResult,
-): Query<TResult> {
-  return {
-    data: query.data === undefined ? undefined : selector(query.data),
-    isLoading: query.isLoading,
-    error: query.error,
-  }
-}
+export const mapQuery = <TSource, TResult>(query: Query<TSource>, selector: (data: TSource) => TResult) => ({
+  ...query,
+  data: query.data && selector(query.data),
+})
 
 export const formatQueryValue = <T>(query: Query<T | null> | undefined, format: (value: NonNullable<T>) => string) =>
   query?.data != null ? format(query.data as NonNullable<T>) : undefined
@@ -22,8 +16,3 @@ export const getQueryState = (current: Query<unknown> | undefined, previous: Que
   error: current?.error ?? previous?.error,
   loading: current?.isLoading || previous?.isLoading,
 })
-
-export const withTokenSymbol = <T>(query: Query<T | null>, tokenSymbol?: string) => ({
-  ...query,
-  tokenSymbol,
-})

apps/main/src/llamalend/widgets/manage-loan/LoanInfoAccordion.tsx

@@ -43,8 +43,8 @@ type LoanInfoAccordionProps = {
   loanToValue: Query<Decimal | null>
   prevLoanToValue?: Query<Decimal | null>
   gas: Query<LoanInfoGasData | null>
-  debt?: Query<Decimal | null> & { tokenSymbol?: string }
-  collateral?: Query<Decimal | null> & { tokenSymbol?: string }
+  debt?: Query<{ value: Decimal; tokenSymbol?: string } | null>
+  collateral?: Query<{ value: Decimal; tokenSymbol?: string } | null>
   // userState values are used as prev values if collateral or debt are available
   userState?: Query<UserState> & { borrowTokenSymbol?: string; collateralTokenSymbol?: string }
   leverage?: LoanLeverageActionInfoProps & { enabled: boolean }
@@ -95,20 +95,20 @@ export const LoanInfoAccordion = ({
             {(debt || prevDebt) && (
               <ActionInfo
                 label={t`Debt`}
-                value={formatQueryValue(debt, (v) => formatNumber(v, { abbreviate: false }))}
+                value={formatQueryValue(debt, (v) => formatNumber(v.value, { abbreviate: false }))}
                 prevValue={prevDebt && formatNumber(prevDebt, { abbreviate: false })}
                 {...getQueryState(debt, userState)}
-                valueRight={debt?.tokenSymbol ?? userState?.borrowTokenSymbol}
+                valueRight={debt?.data?.tokenSymbol ?? userState?.borrowTokenSymbol}
                 testId="borrow-debt"
               />
             )}
             {(collateral || prevCollateral) && (
               <ActionInfo
                 label={t`Collateral`}
-                value={formatQueryValue(collateral, (v) => formatNumber(v, { abbreviate: false }))}
+                value={formatQueryValue(collateral, (v) => formatNumber(v.value, { abbreviate: false }))}
                 prevValue={prevCollateral && formatNumber(prevCollateral, { abbreviate: false })}
                 {...getQueryState(collateral, userState)}
-                valueRight={collateral?.tokenSymbol ?? userState?.collateralTokenSymbol}
+                valueRight={collateral?.data?.tokenSymbol ?? userState?.collateralTokenSymbol}
                 testId="borrow-collateral"
               />
             )}