fix(ui): #1714: fix selected state of the AssetSelector

penumbra-zone · Sep 9, 2024 · de15c8d · de15c8d
1 parent 88912d5
commit de15c8d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/ui/src/AssetSelector/ListItem.tsx b/packages/ui/src/AssetSelector/ListItem.tsx
@@ -1,10 +1,9 @@
 import { RadioGroupItem } from '@radix-ui/react-radio-group';
-import { uint8ArrayToHex } from '@penumbra-zone/types/hex';
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import { AssetIcon } from '../AssetIcon';
 import { Text } from '../Text';
-import { isBalancesResponse, isEqual, isMetadata, SelectorValue } from './utils/helpers.ts';
+import { getHash, isBalancesResponse, isMetadata, SelectorValue } from './utils/helpers.ts';
 import { getFormattedAmtFromValueView } from '@penumbra-zone/types/value-view';
 import {
   getAddressIndex,
@@ -42,7 +41,8 @@ const Root = styled(motion.button)<{
       ${props => props.theme.color.other.tonalFill5};
   }
 
-  &:focus {
+  &:focus,
+  &[aria-checked='true'] {
     background: linear-gradient(
         0deg,
         ${props => props.theme.color.action.hoverOverlay} 0%,
@@ -88,8 +88,8 @@ export interface ListItemProps {
 export const ListItem = ({ value, disabled, actionType = 'default' }: ListItemProps) => {
   const { onClose, onChange, value: selectedValue } = useAssetsSelector();
 
-  const isSelected = isEqual(value, selectedValue);
-  const hash = uint8ArrayToHex(value.toBinary());
+  const hash = getHash(value);
+  const isSelected = !!selectedValue && getHash(value) === getHash(selectedValue);
 
   const metadata = isMetadata(value) ? value : getMetadataFromBalancesResponse.optional(value);
 

diff --git a/packages/ui/src/AssetSelector/index.tsx b/packages/ui/src/AssetSelector/index.tsx
@@ -73,7 +73,7 @@ export interface AssetSelectorProps {
  * of the selector. It is up to the consumer to sort or group the options however they want.
  *
  * Example usage:
- * 
+ *
  * ```tsx
  * const [value, setValue] = useState<Metadata | BalancesResponse>();
  * const [search, setSearch] = useState('');
@@ -134,7 +134,7 @@ export const AssetSelector = ({
                 <AssetSelectorSearchFilter value={search} onChange={onSearchChange} />
               )}
 
-              <RadioGroup asChild>
+              <RadioGroup value={value ? getHash(value) : undefined} asChild>
                 <OptionsWrapper>
                   {typeof children === 'function'
                     ? children({ onClose, getKeyHash: getHash })