diff --git a/ui/src/components/DisplayAmount.tsx b/ui/src/components/DisplayAmount.tsx index fa289e2c..b90a8ca3 100644 --- a/ui/src/components/DisplayAmount.tsx +++ b/ui/src/components/DisplayAmount.tsx @@ -1,6 +1,6 @@ import type { PurseJSONState } from '@agoric/react-components'; import type { DisplayInfoForBrand } from '../store/displayInfo'; -import { stringifyValue, type AssetKind } from '@agoric/web-components'; +import { stringifyValue} from '@agoric/web-components'; import type { Amount } from '@agoric/ertp/src/types'; import { isCopyBagValue } from '@agoric/ertp'; import { useEffect, useRef, useState } from 'react'; @@ -10,7 +10,7 @@ export const PurseValue = ({ purse, allowPopup, }: { - purse: PurseJSONState; + purse: PurseJSONState<'nat' | 'copyBag' | 'set'>; allowPopup?: boolean; }) => { const displayInfoForBrand: DisplayInfoForBrand = { @@ -65,7 +65,7 @@ export const NonNatValue = ({ petname, allowPopup = true, }: { - value: Amount<'set'>['value'] | Amount<'copyBag'>['value']; + value: Amount['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]) => ( )) - : value.map((entry: unknown) => ( + : (value as Amount<'set'>['value']).map((entry: unknown) => ( )); diff --git a/ui/src/components/PurseAmountInput.tsx b/ui/src/components/PurseAmountInput.tsx index dbb1ecc0..31e177f3 100644 --- a/ui/src/components/PurseAmountInput.tsx +++ b/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; + 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()); @@ -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,13 +86,13 @@ 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(), + new Map(), ); - 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])); @@ -99,18 +100,18 @@ const CopyBagInput = ({ purse, onChange }: Props) => { 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); }; diff --git a/ui/src/components/swap/IncomingOffers.tsx b/ui/src/components/swap/IncomingOffers.tsx index bf30eed0..554de632 100644 --- a/ui/src/components/swap/IncomingOffers.tsx +++ b/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[] | undefined; + ): [] return (
diff --git a/ui/src/providers/Contract.tsx b/ui/src/providers/Contract.tsx index 3ceaf8f9..b0864327 100644 --- a/ui/src/providers/Contract.tsx +++ b/ui/src/providers/Contract.tsx @@ -19,7 +19,7 @@ const watchContract = (watcher: ChainStorageWatcher) => { }, ); - watcher.watchLatest>( + watcher.watchLatest>( [Kind.Data, 'published.agoricNames.brand'], brands => { console.log('Got brands', brands); diff --git a/ui/src/store/contract.ts b/ui/src/store/contract.ts index c3e9cc87..3b53bc30 100644 --- a/ui/src/store/contract.ts +++ b/ui/src/store/contract.ts @@ -2,7 +2,7 @@ import { create } from 'zustand'; interface ContractState { instances?: Record; - brands?: Record; + brands?: Record; } export const useContractStore = create(() => ({}));