lint(fix): ui

ui/src/components/AmountSelectorDialog.tsx

@@ -70,7 +70,7 @@ const AmountSelectorDialog = ({
  <div className="px-2">
  <p className="font-medium italic">Select {selectedBrand} Amount</p>
  {purse && (
- <PurseAmountInput purse={purse} onChange={setSelectedAmount} />
+ <PurseAmountInput purse={purse} onChange={setSelectedAmount} onChangeInput={()=>{}} />
  )}
  </div>
  );

ui/src/components/DisplayAmount.tsx

@@ -33,7 +33,7 @@ export const AmountValue = ({
  displayInfo,
  allowPopup,
 }: {
- amount: Amount;
+ amount: Amount<'set'> | Amount<'nat'> | Amount<'copyBag'> | Amount<'copySet'>;
  displayInfo: DisplayInfoForBrand;
  allowPopup?: boolean;
 }) => {
@@ -65,7 +65,7 @@ export const NonNatValue = ({
  petname,
  allowPopup = true,
 }: {
- value: Amount<'set'>['value'] | Amount<'copyBag'>['value'];
+ value: Amount<'set'>['value'] | Amount<'copyBag'>['value'] | Amount<'nat'>['value'] | Amount<'copySet'>['value'];
  petname: string;
  allowPopup?: boolean;
 }) => {
@@ -86,24 +86,23 @@ export const NonNatValue = ({
 
  const count = isCopyBag
  ? String(
- value.payload.reduce(
- // @ts-expect-error cast
+ (value as Amount<'copyBag'>['value']).payload.reduce(
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  (total, [_, count]) => total + count,
  0n,
  ),
  )
- : value.length;
+ : (value as Amount<'set'>['value']).length;
 
  const items = isCopyBag
- ? value.payload.map((entry: [unknown, bigint]) => (
+ ? (value as Amount<'copyBag'>['value']).payload.map((entry: [unknown, bigint]) => (
  <CopyBagEntry
  key={stringifyData(entry[0])}
  className="mb-4"
  entry={entry}
  />
  ))
- : value.map((entry: unknown) => (
+ : (value as Amount<'set'>['value']).map((entry: unknown) => (
  <SetEntry className="mb-4" key={stringifyData(entry)} entry={entry} />
  ));
 

ui/src/components/PurseAmountInput.tsx

@@ -1,12 +1,13 @@
 import { AmountInput, type PurseJSONState } from '@agoric/react-components';
-import type { Amount, AssetKind } from '@agoric/web-components';
+import type { AssetKind } from '@agoric/web-components';
 import { useState } from 'react';
 import { CopyBagEntry, PurseValue, SetEntry } from './DisplayAmount';
 import { stringifyData } from '../utils/stringify';
-import { makeCopyBag } from '@endo/patterns';
+import { makeCopyBag, Key } from '@endo/patterns';
 
 type Props = {
  purse: PurseJSONState<AssetKind>;
+ onChangeInput: (amount: {brand: globalThis.Brand, value: unknown} | null) => void;
  onChange: (amount: Amount | null) => void;
 };
 
@@ -35,7 +36,7 @@ const PurseAmountInput = (props: Props) => {
  return <></>;
 };
 
-const SetInput = ({ purse, onChange }: Props) => {
+const SetInput = ({ purse, onChangeInput }: Props) => {
  const entries = purse.currentAmount.value;
  const [checkedEntries, setCheckedEntries] = useState(new Set<unknown>());
 
@@ -48,13 +49,13 @@ const SetInput = ({ purse, onChange }: Props) => {
  updated.add(entry);
  }
  if (!updated.size) {
- onChange(null);
+ onChangeInput(null);
  } else {
  const newAmount = {
  brand: purse.brand,
  value: [...updated],
  };
- onChange(newAmount);
+ onChangeInput(newAmount);
  }
  setCheckedEntries(updated);
  };
@@ -85,32 +86,32 @@ const SetInput = ({ purse, onChange }: Props) => {
  });
 };
 
-const CopyBagInput = ({ purse, onChange }: Props) => {
+const CopyBagInput = ({ purse, onChangeInput }: Props) => {
  const entries = purse.currentAmount.value.payload;
  const [entriesMap, setEntriesMap] = useState(
- new Map<string, [unknown, bigint]>(),
+ new Map<string, [Key, bigint]>(),
  );
 
- const updateCount = (entry: [unknown, bigint], count: bigint) => {
+ const updateCount = (entry: [Key, bigint], count: bigint) => {
  const updated = new Map(entriesMap);
  if (count === 0n) {
  updated.delete(stringifyData(entry[0]));
  } else {
  updated.set(stringifyData(entry[0]), [entry[0], count]);
  }
  if (count > entry[1]) {
- onChange(null);
+ onChangeInput(null);
  } else {
  const newAmount = {
  brand: purse.brand,
  value: makeCopyBag(updated.values()),
  };
- onChange(newAmount);
+ onChangeInput(newAmount);
  }
  setEntriesMap(updated);
  };
 
- return entries.map((entry: [unknown, bigint]) => {
+ return entries.map((entry: [Key, bigint]) => {
  const selectedAmount = entriesMap.get(stringifyData(entry[0]))?.[1] ?? null;
 
  const onInput = (count: bigint) => {
@@ -143,16 +144,16 @@ const CopyBagInput = ({ purse, onChange }: Props) => {
  });
 };
 
-const NatAmountInput = ({ purse, onChange }: Props) => {
+const NatAmountInput = ({ purse, onChangeInput }: Props) => {
  const [amount, setAmount] = useState({ brand: purse?.brand, value: 0n });
  const hasError = amount.value > purse.currentAmount.value;
 
  const onInputChange = (value: bigint) => {
  const newAmount = { brand: purse?.brand, value };
  if (value > purse.currentAmount.value || value === 0n) {
- onChange(null);
+ onChangeInput(null);
  } else {
- onChange(newAmount);
+ onChangeInput(newAmount);
  }
  setAmount(newAmount);
  };

ui/src/components/mint/MintTickets.tsx

@@ -26,7 +26,7 @@ const makeOffer = (
  [ticketKind.toLowerCase() + 'Row', ticketValue],
  ];
  const choiceBag = makeCopyBag(choices);
- const ticketAmount = AmountMath.make(brands.Ticket, choiceBag);
+ const ticketAmount = AmountMath.make((brands.Ticket as Brand), choiceBag);
  const want = { Tickets: ticketAmount };
  const give = { Price: { brand: brands.IST, value: giveValue * IST_UNIT } };
 

ui/src/components/swap/IncomingOffers.tsx

@@ -7,10 +7,12 @@ const IncomingOffers = () => {
  const { instances } = useContractStore();
  const swaparooInstance = instances?.['swaparoo'];
  const invitationPurse = usePurse('Invitation');
- const swaparooInvitations = invitationPurse?.currentAmount.value.filter(
+ const swaparooInvitations = Array.isArray(invitationPurse?.currentAmount.value) ?
+ invitationPurse?.currentAmount.value.filter(
+ // @ts-expect-error cast
  ({ instance, description }: { instance: unknown; description: string }) =>
  instance === swaparooInstance && description.startsWith('matchOffer'),
- ) as Array<unknown>[] | undefined;
+ ): []
 
  return (
  <div className="w-80">