diff --git a/lang/en/pages.php b/lang/en/pages.php
index f9f37b592..e305a13d4 100644
--- a/lang/en/pages.php
+++ b/lang/en/pages.php
@@ -203,6 +203,7 @@
'title_too_long' => 'Gallery name must not exceed :max characters.',
'already_selected_nft' => 'NFT already exists in this gallery',
'nft_missing_image' => 'Only NFTs with images can be added to galleries',
+ 'nft_gallery_limit' => 'You can only add 16 NFTs per gallery',
'gallery_cover' => 'Gallery Cover',
'gallery_cover_description' => 'The cover is used for the card on the gallery list page. While the cover is not a requirement it will allow you to add personality and stand out from the crowd.',
'gallery_cover_information' => 'Image dimensions must be at least 287px x 190px, with a max size of 2 MB (JPG, PNG or GIF)',
diff --git a/resources/js/Components/Galleries/NftCollection/NftCollections.tsx b/resources/js/Components/Galleries/NftCollection/NftCollections.tsx
index 1e8e1f30d..c27990b53 100644
--- a/resources/js/Components/Galleries/NftCollection/NftCollections.tsx
+++ b/resources/js/Components/Galleries/NftCollection/NftCollections.tsx
@@ -80,7 +80,7 @@ export const NftCollections = ({
getLoadingNftsCount,
}: NftCollectionsProperties): JSX.Element => {
const { selected, addToSelection, removeFromSelection } = useNftSelectableContext();
- const { nfts: addedNfts } = useEditableGalleryContext();
+ const { nfts: addedNfts, nftLimit } = useEditableGalleryContext();
const items = Object.entries(
groupBy(nfts, (nft: App.Data.Gallery.GalleryNftData) => `${nft.chainId}-${nft.tokenAddress}`),
@@ -111,6 +111,8 @@ export const NftCollections = ({
onDeselectNft={removeFromSelection}
onSelectNft={addToSelection}
validateImage={true}
+ storedNfts={addedNfts.selected}
+ nftLimit={nftLimit}
/>
{!allNftsLoaded(nfts[0]) && (
diff --git a/resources/js/Components/Galleries/NftGalleryCard.blocks.test.tsx b/resources/js/Components/Galleries/NftGalleryCard.blocks.test.tsx
index f77591e34..4fe319aad 100644
--- a/resources/js/Components/Galleries/NftGalleryCard.blocks.test.tsx
+++ b/resources/js/Components/Galleries/NftGalleryCard.blocks.test.tsx
@@ -286,6 +286,52 @@ describe("NftImageGrid", () => {
expect(screen.getByTestId(`NftImageGrid__container--1--invalid_image`)).toBeInTheDocument();
expect(screen.getByTestId(`NftImageGrid__container--4--invalid_image`)).toBeInTheDocument();
});
+
+ it("should show a limit reached message if the limit is reached", () => {
+ const nftList = [
+ ...nfts,
+ {
+ id: 5,
+ name: "nft_5",
+ images: { thumb: "nft_image_5", small: "nft_image_5", large: "nft_image_5" },
+ tokenNumber: "5",
+ ownedByCurrentUser: true,
+ ...collectionInfo,
+ },
+ ];
+
+ render(
+