diff --git a/app/src/lib/queries/balance.ts b/app/src/lib/queries/balance.ts index 65c7f665f0..288968007d 100644 --- a/app/src/lib/queries/balance.ts +++ b/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) diff --git a/app/src/lib/utilities/format.ts b/app/src/lib/utilities/format.ts index 70e10f2a98..fbe616530a 100644 --- a/app/src/lib/utilities/format.ts +++ b/app/src/lib/utilities/format.ts @@ -65,3 +65,15 @@ export function urlSearchParams( ) as Record ) } + +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}`; +} diff --git a/app/src/routes/balance/+page.svelte b/app/src/routes/balance/+page.svelte index 49f0ffd793..ea42b9f72f 100644 --- a/app/src/routes/balance/+page.svelte +++ b/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; $: if($sepoliaStore.address) evmBalances = evmBalancesQuery({ @@ -27,7 +28,11 @@ {:else if $evmBalances.isError} {$evmBalances.error.message} {:else if $evmBalances.isSuccess} -
{JSON.stringify($evmBalances.data, null, 2)}
+
+ {#each $evmBalances.data as asset} +
{summarizeString(asset.symbol, 4)} | {asset.balance}
+ {/each} +
{/if} {:else}

Connect your EVM wallet to continue