Merge pull request #563 from curvefi/fix/console

fix: console logging not showing arguments
curvefi · Jan 17, 2025 · 3e4c497 · 3e4c497
2 parents 7331e49 + 50246a5
commit 3e4c497
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 30 deletions.
diff --git a/apps/main/src/lib/curvejs.ts b/apps/main/src/lib/curvejs.ts
@@ -105,7 +105,7 @@ const helpers = {
 // curve
 const network = {
   fetchAllPoolsList: async (curve: CurveApi, network: NetworkConfig) => {
-    log('fetchAllPoolsList', curve.chainId, network)
+    log('fetchAllPoolsList', curve.chainId)
     // must call api in this order, must use api to get non-cached version of gaugeStatus
     const useApi = network.useApi
     await Promise.allSettled([

diff --git a/packages/curve-ui-kit/src/lib/logging.ts b/packages/curve-ui-kit/src/lib/logging.ts
@@ -90,35 +90,20 @@ export function log(
   const logger = logMethod(status)
 
   const hasDefinedStatus = status && Object.values(LogStatus).includes(status as LogStatus)
-
-  if (hasDefinedStatus) {
-    const [formattedKeyString, keyStyles] = formatKeyArray(keyArray)
-    logger(
-      `%cDApp%c @ %c${timestamp}%c -> %c${status}%c\n${formattedKeyString}${args.length > 0 ? '%c: ' : ''}%c`,
-      'background: #1e63e9; color: white; padding: 2px 4px; border-radius: 3px;',
-      'color: #666; font-weight: bold;',
-      'color: #2196F3;',
-      'color: #666;',
-      getStatusStyle(status),
-      'color: #4CAF50; font-weight: bold;',
-      ...keyStyles,
-      ...(args.length > 0 ? ['color: 666;'] : []),
-      'color: inherit;',
-      ...args,
-    )
-  } else {
-    const [formattedKeyString, keyStyles] = formatKeyArray(keyArray)
-    logger(
-      `%cDApp%c @ %c${timestamp}%c ->\n${formattedKeyString}${args.length > 0 ? '%c: ' : ''}%c`,
-      'background: #1e63e9; color: white; padding: 2px 4px; border-radius: 3px;',
-      'color: #666; font-weight: bold;',
-      'color: #2196F3;',
-      'color: #666;',
-      ...keyStyles,
-      'color: inherit;',
-      ...args,
-    )
-  }
+  const [formattedKeyString, keyStyles] = formatKeyArray(keyArray)
+  const restArgs = hasDefinedStatus ? args : [status, ...args]
+  const argsFormat = restArgs.length && `%c (%c${restArgs.map((i) => JSON.stringify(i)).join(', ')}%c)`
+  const format = `%cDApp%c @ %c${timestamp}%c -> ${hasDefinedStatus ? `%c${status} ` : ''}${formattedKeyString}${argsFormat ?? ''}`
+  logger(
+    format,
+    'background: #1e63e9; color: white; padding: 2px 4px; border-radius: 3px;', // DApp
+    'color: #666; font-weight: bold;', // @
+    'color: #2196F3;', // timestamp
+    'color: #666;', // ->
+    ...(hasDefinedStatus ? [getStatusStyle(status), 'color: #4CAF50; font-weight: bold;'] : []), // status
+    ...keyStyles, // key
+    ...(restArgs.length ? ['color: #fff;', 'color: #666;', 'color: #fff;'] : []), // args
+  )
 }
 
 export const logQuery = (key: QueryKey, ...args: unknown[]) => log(key, LogStatus.QUERY, ...args)