initial commit

.eslintrc.json

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

.gitignore

@@ -0,0 +1,35 @@
+# 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*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/CreateCM/Form.tsx

@@ -0,0 +1,110 @@
+import { FC,  useState, useEffect } from "react";
+import { useWallet } from "@solana/wallet-adapter-react";
+
+const Form: FC = () => {
+  const { publicKey } = useWallet();
+
+  const [dateTime, setDateTime] = useState("");
+  const [time, setTime] = useState("");
+
+  function UTCify(dateTime: string, time: string): string {
+    // TODO
+    return "";
+  }
+
+  useEffect(() => {
+    console.log(UTCify(dateTime, time));
+  }, [dateTime, time]);
+
+  return (
+    <form className="flex flex-col items-center h-auto justify-center mt-8">
+      <div className="flex flex-col p-4 xxl-shadow rounded-2xl scale-90 bg-gray-200 min-w-full">
+        <FormInput id="price" text="Price of each NFT" type="number" />
+        <FormInput id="number-of-nfts" text="Number of NFTs" type="number" />
+        <FormInput
+          id="treasury-account"
+          text="Treasury Account"
+          type="text"
+          defaultValue={publicKey?.toBase58()}
+        />
+        <FormInput id="captcha" text="Captcha?" type="checkbox" />
+        <FormInput id="mutable" text="Mutable?" type="checkbox" />
+        <FormInput
+          id="date-mint"
+          text="Date for mint"
+          type="date"
+          value={dateTime}
+          setValue={setDateTime}
+        />
+        <FormInput
+          id="time-mint"
+          text="Time for mint"
+          type="time"
+          value={time}
+          setValue={setTime}
+        />
+
+        <input type="submit" value="Create CandyMachine" />
+      </div>
+    </form>
+  );
+};
+
+interface Props {
+  id: string;
+  text: string;
+  type: string;
+  defaultValue?: string;
+  value?: string;
+  setValue?: (value: string) => void;
+}
+
+const FormInput: FC<Props> = ({
+  id,
+  text,
+  type,
+  defaultValue,
+  value,
+  setValue,
+}) => {
+  return (
+    <>
+      <label htmlFor={id}>{text}</label>
+      <input
+        id={id}
+        type={type}
+        name={id}
+        defaultValue={defaultValue}
+        value={value}
+        onChange={(e) => {
+          if (setValue) setValue(e.target.value);
+        }}
+      />
+    </>
+  );
+};
+
+export default Form;
+
+/** 
+"price": 0.01,
+"number": 4,
+"gatekeeper": {
+  "gatekeeperNetwork": "ignREusXmGrscGNUesoU9mxfds9AiYTezUKex2PsZV6",
+  "expireOnUse": true
+},
+"solTreasuryAccount": "BoX451MZzydoVdZE4NFfmMT3J5Ztqo7YgUNbwwMfjPFu",
+"splTokenAccount": null,
+"splToken": null,
+"goLiveDate": "3 May 2021 08:00:00 GMT",
+"endSettings": null,
+"whitelistMintSettings": null,
+"hiddenSettings": null,
+"storage": "arweave",
+"ipfsInfuraProjectId": null,
+"ipfsInfuraSecret": null,
+"nftStorageKey": null,
+"awsS3Bucket": null,
+"noRetainAuthority": false,
+"noMutable": false
+**/

components/Layout/Navbar.tsx

@@ -0,0 +1,41 @@
+import { PropsWithChildren, FC } from "react";
+
+import Link from "next/link";
+
+const Navbar: FC = ({}: PropsWithChildren<any>) => {
+  return (
+    <div className="fixed top-0 left-0 z-10 flex flex-col w-28 h-screen m-0 text-white shadow-lg bg-slate-400">
+      <SideBarIcon tooltip="Home" href="/" text="Home" />
+      <SideBarIcon tooltip="List of Candy machines" href="/list-candy-machines" text="List CM" />
+      <SideBarIcon tooltip="Create candy machine" href="/create-candy-machine" text="Create CM" />
+    </div>
+  );
+};
+
+const SideBarIcon = ({
+  text,
+  tooltip,
+  href,
+}: {
+  text: string;
+  tooltip: string;
+  href: string;
+}) => (
+  <Link href={href} >
+    <div
+      className="relative flex items-center justify-center w-24 h-12 mx-auto mt-4 text-black 
+      transition-all duration-300 ease-linear sidebar-icon-bg shadow-lg cursor-pointer hover:bg-indigo-500
+       hover:text-white rounded-xl hover:rounded-xl hover:scale-105 group"
+    >
+      {text}
+      <span
+        className="absolute w-auto p-2 m-2 text-xs font-bold text-red transition-all duration-100
+     origin-left scale-0 bg-gray-800 rounded-md shadow-md min-w-max left-24 group-hover:scale-100"
+      >
+        {tooltip}
+      </span>
+    </div>
+  </Link>
+);
+
+export default Navbar;

components/Layout/Wallet.tsx

@@ -0,0 +1,14 @@
+import {
+  WalletMultiButton,
+} from "@solana/wallet-adapter-react-ui";
+import {  FC } from "react";
+
+ const Wallet: FC = () =>  {
+  return (
+    <div className="absolute right-0 scale-75 flex flex-row gap-3 z-10">
+      <WalletMultiButton />
+    </div>
+  );
+}
+
+export default Wallet;

components/Layout/index.ts

@@ -0,0 +1,2 @@
+export {default as Navbar} from './Navbar';
+export {default as Wallet} from './Wallet';

next-env.d.ts

@@ -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.config.js

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

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "candy-machine-dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@solana/wallet-adapter-base": "^0.9.5",
+    "@solana/wallet-adapter-react": "^0.15.4",
+    "@solana/wallet-adapter-react-ui": "^0.9.6",
+    "@solana/wallet-adapter-wallets": "^0.16.0",
+    "@solana/web3.js": "^1.41.3",
+    "add": "^2.0.6",
+    "autoprefixer": "^10.4.7",
+    "next": "12.1.6",
+    "postcss": "^8.4.13",
+    "react": "^18.1.0",
+    "react-dom": "18.1.0",
+    "tailwindcss": "^3.0.24",
+    "yarn": "^1.22.18"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.31",
+    "@types/react": "18.0.8",
+    "@types/react-dom": "18.0.3",
+    "eslint": "8.14.0",
+    "eslint-config-next": "12.1.6",
+    "typescript": "4.6.4"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,38 @@
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import React, { useMemo } from "react";
+import {
+  ConnectionProvider,
+  WalletProvider,
+} from "@solana/wallet-adapter-react";
+import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
+import { PhantomWalletAdapter } from "@solana/wallet-adapter-wallets";
+import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
+import {Wallet,Navbar} from "components/Layout";
+import { clusterApiUrl } from "@solana/web3.js";
+
+// Default styles that can be overridden by your app
+require("@solana/wallet-adapter-react-ui/styles.css");
+function MyApp({ Component, pageProps }: AppProps) {
+  const network = WalletAdapterNetwork.Devnet;
+
+  const endpoint = useMemo(() => clusterApiUrl(network), [network]);
+
+  const wallets = useMemo(() => [new PhantomWalletAdapter()], [network]);
+
+  return (
+    <ConnectionProvider endpoint={endpoint}>
+      <WalletProvider wallets={wallets} autoConnect>
+        <Navbar />
+        <WalletModalProvider>
+          <Wallet />
+          <div style={{ marginLeft: "10rem" }}>
+            <Component {...pageProps} />
+          </div>
+        </WalletModalProvider>
+      </WalletProvider>
+    </ConnectionProvider>
+  );
+}
+
+export default MyApp;

pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

pages/create-candy-machine.tsx

@@ -0,0 +1,18 @@
+import type { NextPage } from "next";
+import Head from "next/head";
+import Form from "components/CreateCM/Form";
+const CreateCandyMachine: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <title>Create Candy Machine</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      Create Candy Machine
+      <Form />
+    </>
+  );
+};
+
+export default CreateCandyMachine;

pages/index.tsx

@@ -0,0 +1,17 @@
+import type { NextPage } from "next";
+import Head from "next/head";
+
+const Home: NextPage = () => {
+  return (
+    <>
+      <Head>
+        <title>Dashboard</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      Welcome to the dashboard
+    </>
+  );
+};
+
+export default Home;