fix(ui): asset selector fixes (#1818)

* fix(ui): fix asset selector filtering and display * fix: lint * chore: changeset * fix: lint
penumbra-zone · Oct 3, 2024 · 4885420 · 4885420
1 parent 15fe29b
commit 4885420
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 11 deletions.
diff --git a/.changeset/cold-mails-sleep.md b/.changeset/cold-mails-sleep.md
@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': patch
+---
+
+Fix AssetSelector filtering and display
diff --git a/packages/ui/src/AssetSelector/ListItem.tsx b/packages/ui/src/AssetSelector/ListItem.tsx
@@ -3,7 +3,7 @@ import { styled } from 'styled-components';
 import { motion } from 'framer-motion';
 import { AssetIcon } from '../AssetIcon';
 import { Text } from '../Text';
-import { getHash, isBalancesResponse, isMetadata } from './shared/helpers.ts';
+import { getHash, isBalancesResponse } from './shared/helpers.ts';
 import { getFormattedAmtFromValueView } from '@penumbra-zone/types/value-view';
 import {
   getAddressIndex,
@@ -116,7 +116,9 @@ export const ListItem = ({ value, disabled, actionType = 'default' }: ListItemPr
   const hash = getHash(value);
   const isSelected = !!selectedValue && getHash(value) === getHash(selectedValue);
 
-  const metadata = isMetadata(value) ? value : getMetadataFromBalancesResponse.optional(value);
+  const metadata = isBalancesResponse(value)
+    ? getMetadataFromBalancesResponse.optional(value)
+    : value;
 
   const balance = isBalancesResponse(value)
     ? {

diff --git a/packages/ui/src/AssetSelector/index.tsx b/packages/ui/src/AssetSelector/index.tsx
@@ -9,7 +9,7 @@ import { AssetSelectorBaseProps, AssetSelectorValue } from './shared/types.ts';
 import { AssetSelectorCustom, AssetSelectorCustomProps } from './Custom.tsx';
 import { ListItem, ListItemProps } from './ListItem.tsx';
 import { Text } from '../Text';
-import { groupAndSort } from './shared/groupAndSort.ts';
+import { filterAssets, groupAndSortBalances } from './shared/groupAndSort.ts';
 
 const ListItemGroup = styled.div`
   display: flex;
@@ -105,8 +105,8 @@ export const AssetSelector = ({
 
   const { filteredAssets, filteredBalances } = useMemo(
     () => ({
-      filteredAssets: assets.filter(filterMetadataOrBalancesResponseByText(search)),
-      filteredBalances: groupAndSort(
+      filteredAssets: filterAssets(assets).filter(filterMetadataOrBalancesResponseByText(search)),
+      filteredBalances: groupAndSortBalances(
         balances.filter(filterMetadataOrBalancesResponseByText(search)),
       ),
     }),
@@ -157,6 +157,6 @@ export const AssetSelector = ({
 AssetSelector.Custom = AssetSelectorCustom;
 AssetSelector.ListItem = ListItem;
 
-export { isBalancesResponse, isMetadata };
+export { isBalancesResponse, isMetadata, groupAndSortBalances, filterAssets };
 
 export type { AssetSelectorValue, AssetSelectorCustomProps, ListItemProps };
diff --git a/packages/ui/src/AssetSelector/shared/groupAndSort.ts b/packages/ui/src/AssetSelector/shared/groupAndSort.ts
@@ -1,4 +1,5 @@
 import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb';
+import { Metadata } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 import {
   getAmount,
   getMetadataFromBalancesResponse,
@@ -21,7 +22,11 @@ const nonSwappableAssetPatterns = [
   assetPatterns.unbondingToken,
 ];
 
-const isUnswappable = (balance: BalancesResponse): boolean => {
+const isSwappableMetadata = (metadata: Metadata): boolean => {
+  return !nonSwappableAssetPatterns.some(pattern => pattern.matches(getDisplay(metadata)));
+};
+
+const isUnswappableBalance = (balance: BalancesResponse): boolean => {
   const metadata = getMetadataFromBalancesResponse.optional(balance);
   if (!metadata) {
     return true;
@@ -39,7 +44,7 @@ const groupByAccount = (
 ): Record<number, BalancesResponse[]> => {
   const index = getAddressIndex.optional(curr)?.account;
 
-  if (index === undefined || isUnknownBalance(curr) || isUnswappable(curr)) {
+  if (index === undefined || isUnknownBalance(curr) || isUnswappableBalance(curr)) {
     return acc;
   }
 
@@ -73,9 +78,15 @@ const sortbyPriorityScore = (a: BalancesResponse, b: BalancesResponse) => {
   return Number(bPriority - aPriority);
 };
 
-export const groupAndSort = (balances: BalancesResponse[]): [string, BalancesResponse[]][] => {
+export const groupAndSortBalances = (
+  balances: BalancesResponse[],
+): [string, BalancesResponse[]][] => {
   const grouped = balances.reduce(groupByAccount, {});
   return Object.entries(grouped)
     .sort(sortByAccountIndex)
     .map(([index, balances]) => [index, balances.sort(sortbyPriorityScore)]);
 };
+
+export const filterAssets = (assets: Metadata[]): Metadata[] => {
+  return assets.filter(isSwappableMetadata);
+};
diff --git a/packages/ui/src/AssetSelector/shared/helpers.ts b/packages/ui/src/AssetSelector/shared/helpers.ts
@@ -5,11 +5,11 @@ import { AssetSelectorValue } from './types.ts';
 
 /** Type predicate to check if a value is a `Metadata`. */
 export const isMetadata = (value?: AssetSelectorValue): value is Metadata =>
-  value?.getType() === Metadata;
+  value?.getType().typeName === Metadata.typeName;
 
 /** Type predicate to check if a value is a `BalancesResponse`. */
 export const isBalancesResponse = (value?: AssetSelectorValue): value is BalancesResponse =>
-  value?.getType() === BalancesResponse;
+  value?.getType().typeName === BalancesResponse.typeName;
 
 /** returns a unique id of a specific Metadata or BalancesResponse */
 export const getHash = (value: AssetSelectorValue) => {