Revert "feat: loading spinner and streaming for assets table (#1625)" (…

…#1631) This reverts commit 2293007.
penumbra-zone · Aug 2, 2024 · 69b0837 · 69b0837
1 parent 2293007
commit 69b0837
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 63 deletions.
diff --git 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 (
-      <div className='mt-5 flex w-full flex-col items-center justify-center'>
-        <Oval width={32} height={32} color='white' secondaryColor='white' />
-      </div>
-    );
-  }
-
-  if (balancesByAccount.length === 0) {
+  if (balancesByAccount?.length === 0) {
     return (
       <div className='mt-5 flex flex-col items-center gap-6'>
         <p>
@@ -69,7 +57,7 @@ export default function AssetsTable() {
   return (
     <div className='w-full overflow-x-auto'>
       <Table>
-        {balancesByAccount.map(account => (
+        {balancesByAccount?.map(account => (
           <Fragment key={account.account}>
             <TableHeader className='group'>
               <TableRow>

diff --git 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<BalancesResponse> => {
+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
@@ -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<string>();
-
-    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<Metadata[]>;
-  balancesResponses: ZQueryState<BalancesResponse[], Parameters<typeof getBalancesStream>>;
+  balancesResponses: ZQueryState<BalancesResponse[]>;
   stakingTokenMetadata: ZQueryState<Metadata>;
 }
 

diff --git 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(() => ({