fix(minifront): #1120: sort the balances by priority score, fix styles (

#1761) * fix(minifront): #1120: sort the balances by priority score, fix styles * chore: changeset * fix: lint * fix(minifront): #1120: sort by account index and priority score
penumbra-zone · Sep 4, 2024 · 0b85eca · 0b85eca
1 parent 1954cea
commit 0b85eca
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 37 deletions.
diff --git a/.changeset/young-mice-drive.md b/.changeset/young-mice-drive.md
@@ -0,0 +1,5 @@
+---
+'minifront': patch
+---
+
+Sort the balances by priority in the swap and send pages
diff --git a/apps/minifront/src/components/shared/selectors/asset-selector.tsx b/apps/minifront/src/components/shared/selectors/asset-selector.tsx
@@ -142,16 +142,18 @@ export const AssetSelector = ({ assets, loading, onChange, value, filter }: Asse
           <div className='flex max-h-[90dvh] flex-col'>
             <DialogHeader>Select asset</DialogHeader>
 
-            <div className='flex flex-col gap-2 overflow-auto p-4'>
-              <Box spacing='compact'>
-                <IconInput
-                  icon={<MagnifyingGlassIcon className='size-5 text-muted-foreground' />}
-                  value={search}
-                  onChange={setSearch}
-                  autoFocus
-                  placeholder='Search assets...'
-                />
-              </Box>
+            <div className='flex flex-col gap-2 overflow-auto'>
+              <div className='px-4 pt-4'>
+                <Box spacing='compact'>
+                  <IconInput
+                    icon={<MagnifyingGlassIcon className='size-5 text-muted-foreground' />}
+                    value={search}
+                    onChange={setSearch}
+                    autoFocus
+                    placeholder='Search assets...'
+                  />
+                </Box>
+              </div>
 
               <Table>
                 <TableBody>
@@ -165,7 +167,7 @@ export const AssetSelector = ({ assets, loading, onChange, value, filter }: Asse
                         <TableCell className='p-0'>
                           <div
                             className={cn(
-                              '-mx-4 flex h-full gap-[6px] p-4 hover:bg-light-brown',
+                              'flex h-full gap-[6px] p-4 hover:bg-light-brown',
                               isSelected(metadata) && 'bg-light-brown',
                             )}
                           >

diff --git a/apps/minifront/src/components/shared/selectors/balance-item.tsx b/apps/minifront/src/components/shared/selectors/balance-item.tsx
@@ -46,7 +46,7 @@ export const BalanceItem = ({ asset, value, onSelect }: BalanceItemProps) => {
           isSelected && 'bg-light-brown',
         )}
       >
-        <TableCell>{account}</TableCell>
+        <TableCell className='pl-4'>{account}</TableCell>
 
         <TableCell>
           <div className='col-span-2 flex items-center justify-start gap-1'>
@@ -60,7 +60,7 @@ export const BalanceItem = ({ asset, value, onSelect }: BalanceItemProps) => {
           </div>
         </TableCell>
 
-        <TableCell>
+        <TableCell className='pr-4'>
           <div className='col-span-2 flex justify-end'>
             {isBalance(asset) && (
               <ValueViewComponent showIcon={false} showDenom={false} view={asset.balanceView} />

diff --git a/apps/minifront/src/components/shared/selectors/balance-selector.tsx b/apps/minifront/src/components/shared/selectors/balance-selector.tsx
@@ -98,22 +98,24 @@ export default function BalanceSelector({
         <DialogContent layoutId={layoutId}>
           <div className='flex max-h-[90dvh] flex-col'>
             <DialogHeader>Select asset</DialogHeader>
-            <div className='flex shrink flex-col gap-4 overflow-auto p-4'>
-              <Box spacing='compact'>
-                <IconInput
-                  icon={<MagnifyingGlassIcon className='size-5 text-muted-foreground' />}
-                  value={search}
-                  onChange={setSearch}
-                  autoFocus
-                  placeholder='Search assets...'
-                />
-              </Box>
+            <div className='flex shrink flex-col gap-4 overflow-auto'>
+              <div className='px-4 pt-4'>
+                <Box spacing='compact'>
+                  <IconInput
+                    icon={<MagnifyingGlassIcon className='size-5 text-muted-foreground' />}
+                    value={search}
+                    onChange={setSearch}
+                    autoFocus
+                    placeholder='Search assets...'
+                  />
+                </Box>
+              </div>
               <Table>
                 <TableHeader>
                   <TableRow>
-                    <TableHead>Account</TableHead>
+                    <TableHead className='pl-4'>Account</TableHead>
                     <TableHead>Asset</TableHead>
-                    <TableHead className='text-right'>Balance</TableHead>
+                    <TableHead className='pr-4 text-right'>Balance</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>

diff --git a/apps/minifront/src/fetchers/balances/by-priority-score.ts b/apps/minifront/src/fetchers/balances/by-priority-score.ts
@@ -2,6 +2,7 @@ import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_
 import {
   getMetadataFromBalancesResponseOptional,
   getAmount,
+  getAddressIndex,
 } from '@penumbra-zone/getters/balances-response';
 import { multiplyAmountByNumber, joinLoHiAmount } from '@penumbra-zone/types/amount';
 
@@ -21,3 +22,14 @@ export const sortByPriorityScore = (a: BalancesResponse, b: BalancesResponse) =>
 
   return Number(bPriority - aPriority);
 };
+
+export const sortByPriorityScoreAndAccountIndex = (a: BalancesResponse, b: BalancesResponse) => {
+  const aIndex = getAddressIndex.optional()(a)?.account ?? Infinity;
+  const bIndex = getAddressIndex.optional()(b)?.account ?? Infinity;
+
+  if (aIndex === bIndex) {
+    return sortByPriorityScore(a, b);
+  }
+
+  return aIndex - bIndex;
+};
diff --git a/apps/minifront/src/state/swap/helpers.ts b/apps/minifront/src/state/swap/helpers.ts
@@ -9,19 +9,18 @@ import { getAssetId, getDisplay } from '@penumbra-zone/getters/metadata';
 import {
   getAssetIdFromValueView,
   getDisplayDenomExponentFromValueView,
-  getAmount,
   getMetadata,
 } from '@penumbra-zone/getters/value-view';
 import { toBaseUnit } from '@penumbra-zone/types/lo-hi';
 import { BigNumber } from 'bignumber.js';
 import { SwapSlice } from '.';
 import { assetPatterns } from '@penumbra-zone/types/assets';
-import { fromBaseUnitAmount } from '@penumbra-zone/types/amount';
 import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb';
 import { isKnown } from '../helpers';
 import { AbridgedZQueryState } from '@penumbra-zone/zquery/src/types';
 import { penumbra } from '../../prax';
 import { DexService, SimulationService } from '@penumbra-zone/protobuf';
+import { sortByPriorityScoreAndAccountIndex } from '../../fetchers/balances/by-priority-score.ts';
 
 export const sendSimulateTradeRequest = ({
   assetIn,
@@ -151,15 +150,6 @@ export const combinedCandlestickDataSelector = (
   }
 };
 
-const byBalanceDescending = (a: BalancesResponse, b: BalancesResponse) => {
-  const aExponent = getDisplayDenomExponentFromValueView(a.balanceView);
-  const bExponent = getDisplayDenomExponentFromValueView(b.balanceView);
-  const aAmount = fromBaseUnitAmount(getAmount(a.balanceView), aExponent);
-  const bAmount = fromBaseUnitAmount(getAmount(b.balanceView), bExponent);
-
-  return bAmount.comparedTo(aAmount);
-};
-
 const nonSwappableAssetPatterns = [
   assetPatterns.lpNft,
   assetPatterns.proposalNft,
@@ -183,7 +173,7 @@ export const swappableBalancesResponsesSelector = (
   data: zQueryState.data
     ?.filter(isKnown)
     .filter(balance => isSwappable(getMetadata(balance.balanceView)))
-    .sort(byBalanceDescending),
+    .sort(sortByPriorityScoreAndAccountIndex),
 });
 
 export const swappableAssetsSelector = (zQueryState: AbridgedZQueryState<Metadata[]>) => ({