feat(ui): add RadioGroup and RadioItem to the Dialog component

.changeset/real-tigers-act.md

@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': minor
+---
+
+Add `Dialog.RadioGroup` and `Dialog.RadioItem` components

packages/ui/src/AssetSelector/Custom.tsx

@@ -1,6 +1,5 @@
 import { ReactNode, useId, useState } from 'react';
 import { styled } from 'styled-components';
-import { RadioGroup } from '@radix-ui/react-radio-group';
 import { Dialog } from '../Dialog';
 import { IsAnimatingProvider } from '../IsAnimatingProvider';
 import { getHash } from './shared/helpers.ts';
@@ -125,13 +124,13 @@ export const AssetSelectorCustom = ({
                 )
               }
             >
-              <RadioGroup value={value ? getHash(value) : undefined} asChild>
+              <Dialog.RadioGroup value={value ? getHash(value) : undefined}>
                 <OptionsWrapper>
                   {typeof children === 'function'
                     ? children({ onClose, getKeyHash: getHash })
                     : children}
                 </OptionsWrapper>
-              </RadioGroup>
+              </Dialog.RadioGroup>
             </Dialog.Content>
           )}
         </IsAnimatingProvider>

packages/ui/src/AssetSelector/SelectItem.tsx

@@ -0,0 +1,103 @@
+import { styled } from 'styled-components';
+import { AssetIcon } from '../AssetIcon';
+import { Text } from '../Text';
+import { getFormattedAmtFromValueView } from '@penumbra-zone/types/value-view';
+import {
+  getAddressIndex,
+  getBalanceView,
+  getMetadataFromBalancesResponse,
+} from '@penumbra-zone/getters/balances-response';
+import { ActionType } from '../utils/ActionType';
+import { AssetSelectorValue } from './shared/types';
+import { media } from '../utils/media';
+import { getHash, isBalancesResponse } from './shared/helpers';
+import { RadioItem } from '../Dialog/RadioItem';
+import { useAssetsSelector } from './shared/Context';
+
+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;
+  align-items: flex-end;
+`;
+
+export interface AssetSelectorItemProps {
+  /**
+   * A `BalancesResponse` or `Metadata` protobuf message type. Renders the asset
+   * icon name and, depending on the type, the value of the asset in the account.
+   * */
+  value: AssetSelectorValue;
+  disabled?: boolean;
+  actionType?: ActionType;
+}
+
+/** A radio button that selects an asset or a balance from the `AssetSelector` */
+export const Item = ({ value, disabled, actionType = 'default' }: AssetSelectorItemProps) => {
+  const { onClose, onChange } = useAssetsSelector();
+
+  const hash = getHash(value);
+
+  const metadata = isBalancesResponse(value)
+    ? getMetadataFromBalancesResponse.optional(value)
+    : value;
+
+  const balance = isBalancesResponse(value)
+    ? {
+        addressIndexAccount: getAddressIndex.optional(value)?.account,
+        valueView: getBalanceView.optional(value),
+      }
+    : undefined;
+
+  // click is triggered by radix-ui on focus, click, arrow selection, etc. – basically always
+  const onSelect = () => {
+    onChange?.(value);
+  };
+
+  return (
+    <RadioItem
+      value={hash}
+      description={metadata?.name}
+      actionType={actionType}
+      disabled={disabled}
+      onClose={onClose}
+      onSelect={onSelect}
+      startAdornment={<AssetIcon size='lg' metadata={metadata} />}
+      title={
+        <>
+          {balance?.valueView && (
+            <Text body truncate>
+              {getFormattedAmtFromValueView(balance.valueView, true)}{' '}
+            </Text>
+          )}
+          <AssetTitleText body truncate>
+            {metadata?.symbol ?? 'Unknown'}
+          </AssetTitleText>
+        </>
+      }
+      endAdornment={
+        balance?.addressIndexAccount !== undefined && (
+          <Balance>
+            <Text technical color={color => color.text.secondary}>
+              #{balance.addressIndexAccount}
+            </Text>
+            <Text detailTechnical color={color => color.text.secondary}>
+              Account
+            </Text>
+          </Balance>
+        )
+      }
+    />
+  );
+};

packages/ui/src/AssetSelector/index.tsx

@@ -7,7 +7,7 @@ import { isBalancesResponse, isMetadata } from './shared/helpers.ts';
 import { filterMetadataOrBalancesResponseByText } from './shared/filterMetadataOrBalancesResponseByText.ts';
 import { AssetSelectorBaseProps, AssetSelectorValue } from './shared/types.ts';
 import { AssetSelectorCustom, AssetSelectorCustomProps } from './Custom.tsx';
-import { ListItem, ListItemProps } from './ListItem.tsx';
+import { Item, AssetSelectorItemProps } from './SelectItem.tsx';
 import { Text } from '../Text';
 import { filterAssets, groupAndSortBalances } from './shared/groupAndSort.ts';
 
@@ -35,7 +35,6 @@ export interface AssetSelectorProps extends AssetSelectorBaseProps {
    */
   balances?: BalancesResponse[];
 }
-
 /**
  * Allows users to choose an asset for e.g., the swap and send forms. Note that
  * it can render an array of just `Metadata`s, or a mixed array of
@@ -85,7 +84,7 @@ export interface AssetSelectorProps extends AssetSelectorBaseProps {
  *   >
  *     {({ getKeyHash }) =>
  *       filteredOptions.map(option => (
- *         <AssetSelector.ListItem key={getKeyHash(option)} value={option} />
+ *         <AssetSelector.Item key={getKeyHash(option)} value={option} />
  *       ))
  *     }
  *   </AssetSelector>
@@ -134,7 +133,7 @@ export const AssetSelector = ({
           {filteredBalances.map(([account, balances]) => (
             <ListItemGroup key={account}>
               {balances.map(balance => (
-                <ListItem key={getKeyHash(balance)} value={balance} />
+                <Item key={getKeyHash(balance)} value={balance} />
               ))}
             </ListItemGroup>
           ))}
@@ -146,7 +145,7 @@ export const AssetSelector = ({
           )}
 
           {filteredAssets.map(asset => (
-            <ListItem key={getKeyHash(asset)} value={asset} />
+            <Item key={getKeyHash(asset)} value={asset} />
           ))}
         </SelectorList>
       )}
@@ -155,8 +154,8 @@ export const AssetSelector = ({
 };
 
 AssetSelector.Custom = AssetSelectorCustom;
-AssetSelector.ListItem = ListItem;
+AssetSelector.Item = Item;
 
 export { isBalancesResponse, isMetadata, groupAndSortBalances, filterAssets };
 
-export type { AssetSelectorValue, AssetSelectorCustomProps, ListItemProps };
+export type { AssetSelectorValue, AssetSelectorCustomProps, AssetSelectorItemProps };