fix(app): select entries

app/src/app/(drawer)/[account]/policies/[key]/spending/[token].tsx

@@ -37,12 +37,12 @@ const DEFAULT_DURATION = Duration.fromObject({ day: 1 });
 const DEFAULT_LIMIT: TransferLimit = { amount: 0n, duration: DEFAULT_DURATION.as('seconds') };
 
 export const SPENDING_LIMIT_DURATIONS = [
- ['Hour', Duration.fromObject({ hours: 1 })],
- ['Day', DEFAULT_DURATION],
- ['Week', Duration.fromObject({ weeks: 1 })],
- ['Month (4 weeks)', Duration.fromObject({ weeks: 4 })],
- ['Quarter (12 weeks)', Duration.fromObject({ weeks: 12 })],
- ['Year (52 weeks)', Duration.fromObject({ days: 364 })],
+ { title: 'Hour', value: Duration.fromObject({ hours: 1 }) },
+ { title: 'Day', value: DEFAULT_DURATION },
+ { title: 'Week', value: Duration.fromObject({ weeks: 1 }) },
+ { title: 'Month (4 weeks)', value: Duration.fromObject({ weeks: 4 }) },
+ { title: 'Quarter (12 weeks)', value: Duration.fromObject({ weeks: 12 }) },
+ { title: 'Year (52 weeks)', value: Duration.fromObject({ days: 364 }) },
 ] as const;
 
 export const TokenLimitScreenParams = PolicyScreenParams.extend({ token: zAddress() });

app/src/components/QrModal.tsx

@@ -1,7 +1,7 @@
 import QRCode from 'react-native-qrcode-svg';
 import { Address, UAddress, asAddress, asChain, isUAddress } from 'lib';
 import { IconButton, Surface, Text } from 'react-native-paper';
-import { CloseIcon, DownArrowIcon, ShareIcon } from '@theme/icons';
+import { CloseIcon, DownArrowIcon, ShareIcon, materialCommunityIcon } from '@theme/icons';
 import { Actions } from '#/layout/Actions';
 import { ScaledSize, View, useWindowDimensions } from 'react-native';
 import { AddressLabel } from '#/address/AddressLabel';
@@ -14,6 +14,9 @@ import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ReactNode, useState } from 'react';
 import { SelectChip } from './fields/SelectChip';
 import { CHAINS } from 'chains';
+import { ChainIcon } from './Identicon/ChainIcon';
+
+const UniqueAddressIcon = materialCommunityIcon('web');
 
 export interface QrModalProps {
  address: Address | UAddress;
@@ -25,6 +28,7 @@ export function QrModal({ address, actions }: QrModalProps) {
 
  const [mode, setMode] = useState<'address' | 'uaddress'>('address');
  const displayed = mode === 'address' ? asAddress(address) : address;
+ const chain = isUAddress(address) && asChain(address);
 
  return (
  <Blur>
@@ -42,13 +46,21 @@ export function QrModal({ address, actions }: QrModalProps) {
  </View>
 
  <View style={styles.contentContainer}>
- {isUAddress(address) && (
+ {chain && (
  <View style={styles.modeContainer}>
  <View style={styles.modeSelectorContainer}>
  <SelectChip
  entries={[
- [`${CHAINS[asChain(address)].name} address`, 'address' as const],
- ['Unique address', 'uaddress' as const],
+ {
+ icon: (props) => <ChainIcon chain={chain} {...props} />,
+ title: `${CHAINS[chain].name} address`,
+ value: 'address' as const,
+ },
+ {
+ icon: UniqueAddressIcon,
+ title: 'Unique address',
+ value: 'uaddress' as const,
+ },
  ]}
  value={mode}
  chipProps={{ elevated: true, closeIcon: DownArrowIcon }}

app/src/components/fields/SelectChip.tsx

@@ -46,8 +46,6 @@ export function SelectChip<T>({
  onClose={() => {}}
  {...chipProps}
  onPress={toggle}
- style={[styles.chip, chipProps?.style]}
- textStyle={[styles.chipText, chipProps?.textStyle]}
  >
  {entry?.title ?? 'Select...'}
  </Chip>
@@ -71,12 +69,6 @@ export function SelectChip<T>({
 }
 
 const stylesheet = createStyles(({ colors }) => ({
- chip: {
- backgroundColor: colors.secondaryContainer,
- },
- chipText: {
- color: colors.onSecondaryContainer,
- },
  selected: {
  color: colors.primary,
  },

app/src/components/policy/ThresholdChip.tsx

@@ -8,18 +8,21 @@ import { POLICY_DRAFT_ATOM } from '~/lib/policy/draft';
 import { createStyles, useStyles } from '@theme/styles';
 import { useMemoApply } from '~/hooks/useMemoized';
 
-const getLabel = (threshold: number) =>
- match(threshold)
- .with(0, () => 'No approvals required')
- .with(1, () => '1 approval required')
- .otherwise((n) => `${n} approvals required`);
-
 export function ThresholdChip() {
  const [{ threshold, approvers }, updateDraft] = useImmerAtom(POLICY_DRAFT_ATOM);
  const { styles } = useStyles(useMemoApply(getStylesheet, { threshold }));
 
  const validThresholds = _.range(Math.min(approvers.size, 1), approvers.size + 1);
- const entries = validThresholds.map((n) => [getLabel(n), n] as const);
+ const entries = validThresholds.map(
+ (n) =>
+ ({
+ title: match(n)
+ .with(0, () => 'No approvals required')
+ .with(1, () => '1 approval required')
+ .otherwise((n) => `${n} approvals required`),
+ value: n,
+ }) as const,
+ );
 
  useEffect(() => {
  if (!validThresholds.includes(threshold)) {