diff --git a/packages/react-token-streams/src/components/StreamTicketTokenSelector.tsx b/packages/react-token-streams/src/components/StreamTicketTokenSelector.tsx index e8aa91fc..3d5329eb 100644 --- a/packages/react-token-streams/src/components/StreamTicketTokenSelector.tsx +++ b/packages/react-token-streams/src/components/StreamTicketTokenSelector.tsx @@ -1,17 +1,20 @@ import { BareComponentProps } from '@0xflair/react-common'; +import { NftToken } from '@0xflair/react-data-query'; import { Fragment } from 'react'; -import { useStreamContext } from '../providers/StreamProvider'; +import { useStreamContext } from '../providers'; type Props = BareComponentProps; export const StreamTicketTokenSelector = ({ as, ...attributes }: Props) => { const { data: { + walletAddress, ticketTokens, selectedTicketTokenIds, selectedTicketTokens, ticketTokenSymbol, + ticketTokenAddress, }, setSelectedTicketTokens, } = useStreamContext(); @@ -21,57 +24,90 @@ export const StreamTicketTokenSelector = ({ as, ...attributes }: Props) => { return ( - {ticketTokens?.map((token) => ( -
-
+ {ticketTokens?.length ? ( + ticketTokens.map((token) => ( +
+
+ t.toString() === token.tokenId?.toString(), + ), + )} + onChange={(e) => { + const { checked } = e.target; + if (checked) { + if ( + !selectedTicketTokens?.find( + (t) => + t.tokenId?.toString() === token.tokenId?.toString(), + ) + ) { + setSelectedTicketTokens([ + ...(selectedTicketTokens || []), + token, + ]); + } + } else { + setSelectedTicketTokens( + selectedTicketTokens?.filter( + (t) => + t.tokenId?.toString() !== token.tokenId?.toString(), + ) || [], + ); + } + }} + /> +
+
+ +
+
+ )) + ) : ( +
+

+ Manually enter Token IDs +

+
t.toString() === token.tokenId?.toString(), - ), - )} + id="token-input" + name="token-input" + type="text" + className="focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" + placeholder="123, 456, 789" + defaultValue={selectedTicketTokenIds?.join(', ')} onChange={(e) => { - const { checked } = e.target; - if (checked) { - if ( - !selectedTicketTokens?.find( - (t) => - t.tokenId?.toString() === token.tokenId?.toString(), - ) - ) { - setSelectedTicketTokens([ - ...(selectedTicketTokens || []), - token, - ]); - } - } else { - setSelectedTicketTokens( - selectedTicketTokens?.filter( - (t) => - t.tokenId?.toString() !== token.tokenId?.toString(), - ) || [], - ); - } + const { value } = e.target; + const tokenIds = value + .split(',') + .map((t) => t.trim()) + .filter((t) => t.length); + + const newTokens: NftToken[] = tokenIds.map((tokenId) => ({ + tokenId: tokenId, + contractAddress: ticketTokenAddress?.toString() || '', + ownerAddress: walletAddress?.toString() || '', + })); + + setSelectedTicketTokens(newTokens); }} />
-
- -
- ))} + )} ); };