init commit

Author: dev0614

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/preview.png

@@ -0,0 +1,33 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

.gitignore

@@ -0,0 +1,124 @@
+# 🥔🥔🥔 Super Potato NFT Raffle | Solan | Next.js + Typescript
+
+<p align="center">
+    <img src="./.github/preview.png" alt="Super potato" />
+</p>
+
+## 📖 Requirements
+### 👶 User side
+- Collection register
+- Raffle create <br />
+  They will have to pay about 0.4 SOL per NFT when creating a raffle.
+- Buy tickets
+- Withdraw NFT (after end time & and not sold any tickets)
+- Reveal winner
+- Claim reward
+### 👨‍💻 Admin side
+- User-registered Accept/Deny of collection
+### Like FFF Raffle (famous fox federation)
+[rafffle.famousfoxes.com](https://rafffle.famousfoxes.com/)
+<br />
+
+## Mindfolk Landing Page
+[www.mindfolk.art](https://www.mindfolk.art/)
+
+## 🌐 Deployed
+[superpotato-raffle.herokuapp.com/](https://superpotato-raffle.herokuapp.com/)
+
+
+## 🛠 ※ SET PROJECT ENVIRONMENT
+### Firebase set
+Replace firebase configuration values <br />
+`src/api/firebase.ts` <br/>
+```tsx
+const firebaseConfig = {
+    apiKey: "AIzaSyAI_r1Rs11kIsWJFiCVA4aGt58ffsZrclY",
+    authDomain: "mindfolk-raffle-afb92.firebaseapp.com",
+    projectId: "mindfolk-raffle-afb92",
+    storageBucket: "mindfolk-raffle-afb92.appspot.com",
+    messagingSenderId: "106626330620",
+    appId: "1:106626330620:web:c3343f7736902e58774c79",
+    measurementId: "G-NHD9LYKTVJ"
+};
+```
+### Project config data
+`src/config.tsx` <br />
+```tsx
+export const NETWORK = "mainnet-beta"; //mainnet-beta | devnet
+export const ADMINS = [
+    "7TBRMXkRbVpRWgLkrrTaqFJvXSMkMwnNKEZ4dbRh8Lnf",
+    "FePFmE1CbbTkiKg4K9A41dQcXfhPqLSJrEBcdXwBj3aa",
+    "A8rgsJecHutEamvb7e8p1a14LQH3vGRPr796CDaESMeu" // developer wallet address
+]
+
+// deployed url
+export const LIVE_URL = "https://superpotato-raffle.herokuapp.com/" 
+// treasury wallet address
+export const TREASURY_WALLET = new PublicKey('BEQZXkjg1BzY5349FXGPgvsbySWw5R7zjEC4xQhzmQR5');
+//smart contract program id
+export const PROGRAM_ID = "Geb2fkVJMgNbjPwMkcjfR3n4AiN7DKqKwctFwfErkbn7"; 
+// solana RPC url
+export const RPC_URL = "https://a2-mind-prd-api.azurewebsites.net/rpc";
+
+```
+
+## Install
+
+```bash
+npm run install
+# or
+yarn install
+```
+## Development
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+## 🔥 Database
+Google **Firebase**
+- **collections** <br />
+    When users send a request to register a Collection, it is stored in the database Collection calls **collections**.<br />
+    Admin can **Accept** or **Deny** those collections. <br />
+    All collections are also stored on the blockchain.
+- **raffles** <br />
+    When user create a raffle, it saved also database `raffles` document. <br />
+    Raffle on db is updated, when those actions <br />
+    `buy tickets`, `reveal winner`, `withdraw nft`, `claim reward`
+  
+## Resolved issues
+
+### Transaction confirmation issue
+```
+Seems to me the transaction is taking more than 60.00 seconds…what is already a big issue…but worse than that someone coded a lock that says if its more than 60 seconds it is a fail.
+```
+- Use Solscan API<br>
+  `https://public-api.solscan.io/transaction/[tx]`
+    ```jsx
+    await fetch(`https://public-api.solscan.io/transaction/${txId}`)
+        .then(resp =>
+            resp.json()
+        ).then(async (json) => {
+            if (json.status === "Success" && json.signer.length !== 0) {
+                //update firebase database
+                await updateDoc(collectionById, {
+                    status: 0,
+                    accepted: true,
+                    updateTimeStamp: new Date().getTime()
+                })
+                    .then(() => {
+                        //clear timeout & timeinterval 
+                        clearTimeout(timeout);
+                        clearInterval(timeInterval);
+                        successAlert("Transaction is confirmed..");
+                    })
+            }
+        })
+        .catch((error) => {
+            console.log(error);
+        })
+  ```
+### Page re-render by real-time
+`onSnapshort` function of `firebase` with `useEffect`

README.md

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next-env.d.ts

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

next.config.js

@@ -0,0 +1,45 @@
+{
+  "name": "solarmy-collection-game-frontend",
+  "version": "0.1.0",
+  "author": "sasuke0601",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@metaplex/js": "4.12.0",
+    "@mui/material": "^5.6.2",
+    "@nfteyez/sol-rayz": "^0.10.2",
+    "@project-serum/anchor": "0.24.2",
+    "@solana/wallet-adapter-base": "^0.9.3",
+    "@solana/wallet-adapter-react": "^0.15.3",
+    "@solana/wallet-adapter-react-ui": "^0.9.5",
+    "@solana/wallet-adapter-wallets": "^0.15.4",
+    "@solana/web3.js": "^1.35.0",
+    "copy-to-clipboard": "^3.3.1",
+    "firebase": "^9.8.2",
+    "moment": "^2.29.3",
+    "next": "12.1.0",
+    "next-seo": "^5.4.0",
+    "react": "17.0.2",
+    "react-countdown": "^2.3.2",
+    "react-dom": "17.0.2",
+    "react-dropdown": "^1.10.0",
+    "react-modern-calendar-datepicker": "^3.1.6",
+    "react-spinners": "^0.11.0",
+    "react-toastify": "^8.2.0",
+    "sass": "^1.49.8"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.18",
+    "@types/react": "17.0.39",
+    "eslint": "8.9.0",
+    "eslint-config-next": "12.1.0",
+    "typescript": "4.5.5"
+  }
+}

package.json

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

public/android-chrome-192x192.png

@@ -0,0 +1,25 @@
+const firebaseConfig = {
+    apiKey: "AIzaSyAI_r1Rs11kIsWJFiCVA4aGt58ffsZrclY",
+    authDomain: "mindfolk-raffle-afb92.firebaseapp.com",
+    projectId: "mindfolk-raffle-afb92",
+    storageBucket: "mindfolk-raffle-afb92.appspot.com",
+    messagingSenderId: "106626330620",
+    appId: "1:106626330620:web:c3343f7736902e58774c79",
+    measurementId: "G-NHD9LYKTVJ"
+};
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { collection, getFirestore } from "firebase/firestore"
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+
+// Initialize Firebase
+export const app = initializeApp(firebaseConfig);
+export const database = getFirestore(app);
+export const db = getFirestore();
+
+export const collectionsInstance = collection(database, "collections");
+export const rafflesInstance = collection(database, "raffles");

public/android-chrome-512x512.png

@@ -0,0 +1,27 @@
+import copy from "copy-to-clipboard";
+import { useState } from "react";
+import { PastIcon } from "./svgIcons";
+
+export default function CopyAddress(props: { address: string, length?: number }) {
+    const { address, length } = props;
+    const [isCopied, setIsCopied] = useState(false);
+    const handleCopy = (text: string) => {
+        copy(text);
+        setIsCopied(true);
+        setTimeout(() => {
+            setIsCopied(false);
+        }, 2000);
+    }
+
+    return (
+        <div className="winner-address" onClick={() => handleCopy(address)}>
+            {length ? `${address.slice(0, length)}..${address.slice(0 - length)}` : `${address.slice(0, 8)}..${address.slice(-8)}`}
+            <span className="copy-icon">
+                {!isCopied ?
+                    <PastIcon /> :
+                    <span className="copied">copied!</span>
+                }
+            </span>
+        </div>
+    )
+}

public/apple-touch-icon.png

@@ -0,0 +1,62 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { CardChecked, CardUnChecked } from "./svgIcons";
+
+export default function CreateCard(props: {
+    selected: boolean,
+    description: string,
+    external_url: string,
+    image: string,
+    name: string,
+    mint: string,
+    handleSelect: Function,
+    collectionName: string,
+    collectionId: string
+}) {
+    const cardRef = useRef<HTMLDivElement>(null);
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+    useLayoutEffect(() => {
+        if (cardRef.current) {
+            setDimensions({
+                width: cardRef.current.offsetWidth,
+                height: cardRef.current.offsetHeight
+            });
+        }
+    }, []);
+
+    const [selected, setSelected] = useState(false);
+    const onSelect = () => {
+        setSelected(!selected);
+        props.handleSelect({
+            mint: props.mint,
+            selected: !selected,
+            collectionName: props.collectionName,
+            collectionId: props.collectionId,
+        })
+    }
+    return (
+        <div className="create-card">
+            <div
+                className="card-media"
+                ref={cardRef}
+                style={{ height: dimensions.width }}
+            >
+                {/* eslint-disable-next-line */}
+                <img
+                    src={props.image}
+                    alt=""
+                />
+            </div>
+            {!selected &&
+                <div className="card-overlay"></div>
+            }
+            <span className="card-checked" onClick={() => onSelect()}>
+                {selected ?
+                    <CardChecked />
+                    :
+                    <CardUnChecked />
+                }
+            </span>
+        </div>
+    )
+}

public/favicon-16x16.png

@@ -0,0 +1,20 @@
+import moment from "moment";
+import Countdown from "react-countdown";
+
+export default function EndTimeCountdown({ endTime, endAction, ...props }) {
+    const renderer = ({ days, hours, minutes, seconds, completed }) => {
+        if (completed) {
+            return <span>{moment(endTime).fromNow()}</span>
+        } else {
+            // Render a countdown
+            return (
+                <span>
+                    {days !== 0 ? `${days}d` : ""} {hours}h {minutes}m {seconds}s
+                </span>
+            );
+        }
+    };
+    return (
+        <Countdown date={endTime} renderer={renderer} onComplete={() => endAction()} />
+    )
+}