feat(app): summarize long strings

app/src/lib/queries/balance.ts

@@ -86,7 +86,7 @@ export function evmBalancesQuery({
         })
       })
       const result = v.safeParse(evmBalancesResponseSchema, await response.json())
-      if (!result.success) return new Error(`Error parsing result ${JSON.stringify(result.issues)}`);
+      if (!result.success) throw new Error(`Error parsing result ${JSON.stringify(result.issues)}`);
 
       const tokensInfo = await getEvmTokensInfo(
         result.output.result.tokenBalances.map(({ contractAddress }) => contractAddress)

app/src/lib/utilities/format.ts

@@ -65,3 +65,15 @@ export function urlSearchParams(
     ) as Record<string, string>
   )
 }
+
+export function summarizeString(str: string, show: number): string {
+  // Don't summarize short strings
+  if (str.length < show*2+2)  return str;
+
+  // Extract the first 6 characters and the last 6 characters
+  const firstPart: string = str.slice(0, show);
+  const lastPart: string = str.slice(-show);
+
+  // Return the summarized string with the ellipsis character in-between
+  return `${firstPart}\u2026${lastPart}`;
+}

app/src/routes/balance/+page.svelte

@@ -2,6 +2,7 @@
   import { cosmosBalancesQuery, evmBalancesQuery } from '$lib/queries/balance'
   import { sepoliaStore } from "$lib/wallet/evm/config.ts"
   import { cosmosStore } from "$lib/wallet/cosmos"
+  import { summarizeString } from '$lib/utilities/format'; 
 
   let evmBalances: null | ReturnType<typeof evmBalancesQuery>;
   $: if($sepoliaStore.address) evmBalances = evmBalancesQuery({
@@ -27,7 +28,11 @@
     {:else if $evmBalances.isError}
       {$evmBalances.error.message}
     {:else if $evmBalances.isSuccess}
-      <pre>{JSON.stringify($evmBalances.data, null, 2)}</pre>
+      <div>
+        {#each $evmBalances.data as asset}
+          <div>{summarizeString(asset.symbol, 4)} | {asset.balance}</div>
+        {/each}
+      </div>
     {/if}
   {:else}
     <p>Connect your EVM wallet to continue</p>