fix(ui): #1714: update default filtering of the balances and fix List…

…Item styles
penumbra-zone · Sep 12, 2024 · 122abf2 · 122abf2
1 parent 4d41815
commit 122abf2
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 5 deletions.
diff --git a/packages/ui/src/AssetSelector/ListItem.tsx b/packages/ui/src/AssetSelector/ListItem.tsx
@@ -15,6 +15,7 @@ import { asTransientProps } from '../utils/asTransientProps.ts';
 import { KeyboardEventHandler, MouseEventHandler } from 'react';
 import { useAssetsSelector } from './shared/Context.tsx';
 import { AssetSelectorValue } from './shared/types.ts';
+import { media } from '../utils/media.ts';
 
 const Root = styled(motion.button)<{
   $isSelected: boolean;
@@ -72,6 +73,26 @@ const AssetInfo = styled.div`
   align-items: center;
 `;
 
+const AssetTitle = styled.div`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  gap: ${props => props.theme.spacing(1)};
+`;
+
+const AssetTitleText = styled(Text)`
+  display: inline-block;
+  max-width: 100px;
+
+  ${media.tablet`
+      max-width: 300px;
+  `}
+
+  ${media.lg`
+      max-width: 400px;
+  `}
+`;
+
 const Balance = styled.div`
   display: flex;
   flex-direction: column;
@@ -133,12 +154,16 @@ export const ListItem = ({ value, disabled, actionType = 'default' }: ListItemPr
         <AssetInfo>
           <AssetIcon size='lg' metadata={metadata} />
           <div>
-            <div>
+            <AssetTitle>
               {balance?.valueView && (
-                <Text body>{getFormattedAmtFromValueView(balance.valueView, true)} </Text>
+                <Text body truncate>
+                  {getFormattedAmtFromValueView(balance.valueView, true)}{' '}
+                </Text>
               )}
-              <Text body>{metadata?.symbol ?? 'Unknown'}</Text>
-            </div>
+              <AssetTitleText body truncate>
+                {metadata?.symbol ?? 'Unknown'}
+              </AssetTitleText>
+            </AssetTitle>
             {metadata?.name && (
               <Text detail color={color => color.text.secondary} as='div'>
                 {metadata.name}

diff --git a/packages/ui/src/AssetSelector/shared/groupAndSort.ts b/packages/ui/src/AssetSelector/shared/groupAndSort.ts
@@ -3,16 +3,43 @@ import {
   getAmount,
   getMetadataFromBalancesResponse,
   getAddressIndex,
+  getValueViewCaseFromBalancesResponse,
 } from '@penumbra-zone/getters/balances-response';
 import { joinLoHiAmount, multiplyAmountByNumber } from '@penumbra-zone/types/amount';
+import { assetPatterns } from '@penumbra-zone/types/assets';
+import { getDisplay } from '@penumbra-zone/getters/metadata';
+
+const nonSwappableAssetPatterns = [
+  assetPatterns.lpNft,
+  assetPatterns.proposalNft,
+  assetPatterns.votingReceipt,
+  assetPatterns.auctionNft,
+  assetPatterns.lpNft,
+
+  // In theory, these asset types are swappable, but we have removed them for now to get a better UX
+  assetPatterns.delegationToken,
+  assetPatterns.unbondingToken,
+];
+
+const isUnswappable = (balance: BalancesResponse): boolean => {
+  const metadata = getMetadataFromBalancesResponse.optional(balance);
+  if (!metadata) {
+    return true;
+  }
+  return nonSwappableAssetPatterns.some(pattern => pattern.matches(getDisplay(metadata)));
+};
+
+const isUnknownBalance = (balance: BalancesResponse): boolean => {
+  return getValueViewCaseFromBalancesResponse.optional(balance) !== 'knownAssetId';
+};
 
 const groupByAccount = (
   acc: Record<number, BalancesResponse[]>,
   curr: BalancesResponse,
 ): Record<number, BalancesResponse[]> => {
   const index = getAddressIndex.optional(curr)?.account;
 
-  if (index === undefined) {
+  if (index === undefined || isUnknownBalance(curr) || isUnswappable(curr)) {
     return acc;
   }