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",