From de15c8dd5a60f3dbd9fb6573bac2cfcc9c7c16f8 Mon Sep 17 00:00:00 2001
From: Max Korsunov <maxkors2014@gmail.com>
Date: Mon, 9 Sep 2024 12:55:14 +0500
Subject: [PATCH] fix(ui): #1714: fix selected state of the AssetSelector

---
 packages/ui/src/AssetSelector/ListItem.tsx | 10 +++++-----
 packages/ui/src/AssetSelector/index.tsx    |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/AssetSelector/ListItem.tsx b/packages/ui/src/AssetSelector/ListItem.tsx
index 1518897e12..5d21418b3e 100644
--- 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
index fad9db94af..a30538dd04 100644
--- 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 })