feat: allow manually putting token ids

0xflair · Oct 20, 2022 · ec96b01 · ec96b01
1 parent 4c606ae
commit ec96b01
Showing 1 changed file with 82 additions and 46 deletions.
diff --git 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 (
     <Component {...attributes}>
-      {ticketTokens?.map((token) => (
-        <div
-          key={token.tokenId}
-          className="ticket-token relative flex gap-2 items-start py-4"
-        >
-          <div className="token-checkbox flex items-center h-5">
+      {ticketTokens?.length ? (
+        ticketTokens.map((token) => (
+          <div
+            key={token.tokenId}
+            className="ticket-token relative flex gap-2 items-start py-4"
+          >
+            <div className="token-checkbox flex items-center h-5">
+              <input
+                id={`token-${token.tokenId}`}
+                name={`token-${token.tokenId}`}
+                type="checkbox"
+                className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                checked={Boolean(
+                  selectedTicketTokenIds?.find(
+                    (t) => 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(),
+                      ) || [],
+                    );
+                  }
+                }}
+              />
+            </div>
+            <div className="token-label text-sm">
+              <label
+                htmlFor={`token-${token.tokenId}`}
+                className="font-medium text-gray-700 select-none"
+              >
+                {ticketTokenSymbol?.toString()} # {token.tokenId?.toString()}
+              </label>
+            </div>
+          </div>
+        ))
+      ) : (
+        <div className="ticket-token-input col-span-2 relative flex flex-col gap-4 items-start py-4">
+          <h3 className="text-sm font-medium text-gray-700">
+            Manually enter Token IDs
+          </h3>
+          <div className="token-input flex items-center w-full">
             <input
-              id={`token-${token.tokenId}`}
-              name={`token-${token.tokenId}`}
-              type="checkbox"
-              className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-              checked={Boolean(
-                selectedTicketTokenIds?.find(
-                  (t) => 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);
               }}
             />
           </div>
-          <div className="token-label text-sm">
-            <label
-              htmlFor={`token-${token.tokenId}`}
-              className="font-medium text-gray-700 select-none"
-            >
-              {ticketTokenSymbol?.toString()} # {token.tokenId?.toString()}
-            </label>
-          </div>
         </div>
-      ))}
+      )}
     </Component>
   );
 };