diff --git a/apps/minifront/src/components/dashboard/assets-table/index.tsx b/apps/minifront/src/components/dashboard/assets-table/index.tsx index 0e2c0f70ef..b96e26d74f 100644 --- a/apps/minifront/src/components/dashboard/assets-table/index.tsx +++ b/apps/minifront/src/components/dashboard/assets-table/index.tsx @@ -20,7 +20,6 @@ import { BalancesByAccount, groupByAccount, useBalancesResponses } from '../../. import { AbridgedZQueryState } from '@penumbra-zone/zquery/src/types'; import { shouldDisplay } from '../../../fetchers/balances/should-display'; import { sortByPriorityScore } from '../../../fetchers/balances/by-priority-score'; -import { Oval } from 'react-loader-spinner'; const getTradeLink = (balance: BalancesResponse): string => { const metadata = getMetadataFromBalancesResponseOptional(balance); @@ -41,18 +40,7 @@ export default function AssetsTable() { shouldReselect: (before, after) => before?.data !== after.data, }); - /** Are assets still loading */ - const isLoading = balancesByAccount === undefined; - - if (isLoading) { - return ( -
- -
- ); - } - - if (balancesByAccount.length === 0) { + if (balancesByAccount?.length === 0) { return (

@@ -69,7 +57,7 @@ export default function AssetsTable() { return (

- {balancesByAccount.map(account => ( + {balancesByAccount?.map(account => ( diff --git a/apps/minifront/src/fetchers/balances/index.ts b/apps/minifront/src/fetchers/balances/index.ts index e1e1ffff9b..c35fbfd0ec 100644 --- a/apps/minifront/src/fetchers/balances/index.ts +++ b/apps/minifront/src/fetchers/balances/index.ts @@ -6,15 +6,14 @@ import { AssetId } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/a import { AddressIndex } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb.js'; import { viewClient } from '../../clients'; -export interface BalancesProps { +interface BalancesProps { accountFilter?: AddressIndex; assetIdFilter?: AssetId; } -export const getBalancesStream = ({ - accountFilter, - assetIdFilter, -}: BalancesProps = {}): AsyncIterable => { +export const getBalances = ({ accountFilter, assetIdFilter }: BalancesProps = {}): Promise< + BalancesResponse[] +> => { const req = new BalancesRequest(); if (accountFilter) { req.accountFilter = accountFilter; @@ -23,5 +22,6 @@ export const getBalancesStream = ({ req.assetIdFilter = assetIdFilter; } - return viewClient.balances(req); + const iterable = viewClient.balances(req); + return Array.fromAsync(iterable); }; diff --git a/apps/minifront/src/state/shared.ts b/apps/minifront/src/state/shared.ts index 5dd35959a6..276e2403fd 100644 --- a/apps/minifront/src/state/shared.ts +++ b/apps/minifront/src/state/shared.ts @@ -2,13 +2,12 @@ import { ZQueryState, createZQuery } from '@penumbra-zone/zquery'; import { SliceCreator, useStore } from '.'; import { getStakingTokenMetadata } from '../fetchers/registry'; import { Metadata } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb.js'; -import { getBalancesStream } from '../fetchers/balances'; +import { getBalances } from '../fetchers/balances'; import { BalancesResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb.js'; import { getAllAssets } from '../fetchers/assets'; import { Address } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/keys/v1/keys_pb.js'; import { getAddress, getAddressIndex } from '@penumbra-zone/getters/address-view'; import { AbridgedZQueryState } from '@penumbra-zone/zquery/src/types'; -import { uint8ArrayToHex } from '@penumbra-zone/types/hex'; export const { stakingTokenMetadata, useStakingTokenMetadata } = createZQuery({ name: 'stakingTokenMetadata', @@ -23,37 +22,9 @@ export const { stakingTokenMetadata, useStakingTokenMetadata } = createZQuery({ }, }); -const getHash = (bal: BalancesResponse) => uint8ArrayToHex(bal.toBinary()); - export const { balancesResponses, useBalancesResponses } = createZQuery({ name: 'balancesResponses', - fetch: getBalancesStream, - stream: () => { - const balanceResponseIdsToKeep = new Set(); - - return { - onValue: ( - prevState: BalancesResponse[] | undefined = [], - balanceResponse: BalancesResponse, - ) => { - balanceResponseIdsToKeep.add(getHash(balanceResponse)); - - const existingIndex = prevState.findIndex(bal => getHash(bal) === getHash(balanceResponse)); - - // Update any existing items in place, rather than appending - // duplicates. - if (existingIndex >= 0) { - return prevState.toSpliced(existingIndex, 1, balanceResponse); - } else { - return [...prevState, balanceResponse]; - } - }, - - onEnd: (prevState = []) => - // Discard any balances from a previous stream. - prevState.filter(balanceResponse => balanceResponseIdsToKeep.has(getHash(balanceResponse))), - }; - }, + fetch: getBalances, getUseStore: () => useStore, get: state => state.shared.balancesResponses, set: setter => { @@ -79,7 +50,7 @@ export const { assets, useAssets } = createZQuery({ export interface SharedSlice { assets: ZQueryState; - balancesResponses: ZQueryState>; + balancesResponses: ZQueryState; stakingTokenMetadata: ZQueryState; } diff --git a/apps/minifront/src/state/staking/index.test.ts b/apps/minifront/src/state/staking/index.test.ts index 7f1b98620a..d9fdb42325 100644 --- a/apps/minifront/src/state/staking/index.test.ts +++ b/apps/minifront/src/state/staking/index.test.ts @@ -72,10 +72,9 @@ vi.mock('../../fetchers/registry', async () => ({ })); vi.mock('../../fetchers/balances', () => ({ - getBalancesStream: vi.fn(() => ({ - [Symbol.asyncIterator]: async function* () { - await new Promise(resolve => setTimeout(resolve, 0)); - yield { + getBalances: vi.fn(async () => + Promise.resolve([ + { balanceView: new ValueView({ valueView: { case: 'knownAssetId', @@ -102,8 +101,8 @@ vi.mock('../../fetchers/balances', () => ({ }, }, }), - }; - yield { + }, + { balanceView: new ValueView({ valueView: { case: 'knownAssetId', @@ -130,8 +129,8 @@ vi.mock('../../fetchers/balances', () => ({ }, }, }), - }; - yield { + }, + { balanceView: new ValueView({ valueView: { case: 'knownAssetId', @@ -154,9 +153,9 @@ vi.mock('../../fetchers/balances', () => ({ }, }, }), - }; - }, - })), + }, + ]), + ), })); const mockViewClient = vi.hoisted(() => ({