Add more efficient method of adding multiple tokens to the map at once

src/components/token/SelectTokensButton.js

@@ -5,7 +5,7 @@ import SelectTokensIcon from "../../icons/SelectTokensIcon";
 
 import SelectTokensModal from "../../modals/SelectTokensModal";
 
-function SelectTokensButton({ onMapTokenStateCreate }) {
+function SelectTokensButton({ onMapTokensStateCreate }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   function openModal() {
     setIsModalOpen(true);
@@ -30,7 +30,7 @@ function SelectTokensButton({ onMapTokenStateCreate }) {
         isOpen={isModalOpen}
         onRequestClose={closeModal}
         onDone={handleDone}
-        onMapTokenStateCreate={onMapTokenStateCreate}
+        onMapTokensStateCreate={onMapTokensStateCreate}
       />
     </>
   );

src/components/token/TokenBar.js

@@ -21,7 +21,7 @@ import {
   clientPositionToMapPosition,
 } from "../../helpers/token";
 
-function TokenBar({ onMapTokenStateCreate }) {
+function TokenBar({ onMapTokensStateCreate }) {
   const { userId } = useAuth();
   const { tokensById, tokenGroups } = useTokenData();
   const [fullScreen] = useSetting("map.fullScreen");
@@ -53,7 +53,7 @@ function TokenBar({ onMapTokenStateCreate }) {
       const token = tokensById[active.id];
       if (token && mapPosition) {
         const tokenState = createTokenState(token, mapPosition, userId);
-        onMapTokenStateCreate(tokenState);
+        onMapTokensStateCreate([tokenState]);
       }
     }
   }
@@ -123,7 +123,7 @@ function TokenBar({ onMapTokenStateCreate }) {
             alignItems: "center",
           }}
         >
-          <SelectTokensButton onMapTokenStateCreate={onMapTokenStateCreate} />
+          <SelectTokensButton onMapTokensStateCreate={onMapTokensStateCreate} />
         </Flex>
         {createPortal(
           <DragOverlay