Max NFT limit

client/src/App.tsx

@@ -7,7 +7,8 @@ import { AppTheme } from './theme';
 import { Welcome } from './components/Welcome';
 import Instructions from './components/Instructions';
 import Success from './components/Success';
-import { checkUser } from './apiClient';
+import { checkMax, checkUser } from './apiClient';
+import Maxed from './components/Maxed';
 
 export const ActiveAccountContext = createContext(null);
 
@@ -33,6 +34,7 @@ const App = () => {
 	const [themeMode, setThemeMode] = useState<ThemeModeType>(ThemeModeType.light);
 	const [activeAccount, setActiveAccount] = useState<any>(null);
 	const [claimed, setClaimed] = useState<boolean>(false);
+	const [maxedOut, setMaxedOut] = useState<boolean>(false);
 
 	useEffect(() => {
 		clickRef?.on('csprclick:signed_in', (evt: any) => {
@@ -49,22 +51,38 @@ const App = () => {
 		});
 	}, [clickRef?.on]);
 
+	function userCheck() {
+		checkUser(activeAccount.public_key)
+			.then(hasClaimed => {
+				setClaimed(hasClaimed);
+			})
+			.catch(error => {
+				console.error(error.message);
+			});
+	}
+
+	useEffect(() => {
+		checkMax()
+			.then(maxedOut => {
+				setMaxedOut(maxedOut);
+			})
+			.catch(error => {
+				console.error(error.message);
+			});
+	});
+
 	useEffect(() => {
 		if (activeAccount !== null) {
-			checkUser(activeAccount.public_key)
-				.then(hasClaimed => {
-					setClaimed(hasClaimed);
-				})
-				.catch(error => {
-					console.error(error.message);
-				});
+			userCheck();
 		} else {
 			setClaimed(false);
 		}
 	}, [activeAccount]);
 
 	let contentElement = <Instructions setClaimed={setClaimed} />;
-	if (claimed) {
+	if (maxedOut) {
+		contentElement = <Maxed />;
+	} else if (claimed) {
 		contentElement = <Success />;
 	}
 

client/src/apiClient.ts

@@ -18,6 +18,16 @@ export async function checkUser(publicKey: string): Promise<boolean> {
         params: { publicKey: publicKey },
     });
 
+    if (response.status == 200) {
+        return response.data as boolean;
+    } else {
+        throw new Error('User not found');
+    }
+}
+
+export async function checkMax(): Promise<boolean> {
+    const response = await axios.get('http://localhost:3001/max');
+
     if (response.status == 200) {
         return response.data as boolean;
     } else {

client/src/components/Maxed.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { StyledContentContainer } from '../App';
+
+export default function Maxed() {
+	const MaxedContainer = styled(StyledContentContainer)`
+		padding-block: 100px;
+	`;
+
+	return (
+		<>
+			<MaxedContainer>
+				<hr></hr>
+				<h1>All NFTs Already Claimed</h1>
+				<p>All 500 Code of Creation NFTs have already been claimed.</p>
+				<hr></hr>
+			</MaxedContainer>
+		</>
+	);
+}

client/src/components/Welcome.tsx

@@ -23,6 +23,9 @@ const HeadingContainer = styled.div(({ theme }) =>
 		margin: 'auto',
 		marginTop: ['80px', '50px', 0],
 		textAlign: 'center',
+		h2: {
+			color: 'white',
+		},
 	})
 );
 
@@ -31,7 +34,6 @@ const StyledLogo = styled.img(({ theme }) =>
 		position: 'relative',
 		top: 30,
 		left: 30,
-		//transform: 'translateX(-50%)',
 		width: '200px',
 		objectFit: 'contain',
 	})

server/src/controller/UserController.ts

@@ -40,6 +40,21 @@ export class UserController {
         }
     }
 
+    async max(request: Request, response: Response, next: NextFunction) {
+        try {
+            const userCount = await this.userRepository.count();
+
+            if (userCount >= 500) {
+                response.send("true");
+            } else {
+                response.send("false");
+            }
+        } catch (error) {
+            console.error(error);
+        response.sendStatus(500);
+        }
+    }
+
     async destroy(request: Request, response: Response, next: NextFunction) {
         await this.userRepository.clear()
         response.sendStatus(200);

server/src/routes.ts

@@ -15,6 +15,11 @@ export const Routes = [{
     route: "/user",
     controller: UserController,
     action: "check"
+}, {
+    method: "get",
+    route: "/max",
+    controller: UserController,
+    action: "max"
 }, {
     method: "get",
     route: "/destroy",