🔐🍭 ↣ Adding new frontend components for DAO in #18

.gitignore

@@ -13,6 +13,9 @@ node_modules
 ./.vscode
 .vercel
 
+.next
+/.next
+
 # misc
 .DS_Store
 .env.local

README.md

@@ -1,34 +1,21 @@
-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).
+# sytizen-unity
+[![.github/workflows/moralis.yml](https://github.com/Signal-K/sytizen/actions/workflows/moralis.yml/badge.svg?branch=ansible)](https://github.com/Signal-K/sytizen/actions/workflows/moralis.yml) <br />
+Citizen Science (Sci-tizen) visualisation in the Unity.com engine 
 
-## Getting Started
 
-First, run the development server:
+Check out our compass [here](http://ar.skinetics.tech/stellarios/compass) for more information about this product
 
-```bash
-npm run dev
-# or
-yarn dev
-```
+<!--
+Move `/server` into a separate submodule (or `styizen` into a submodule in another repo)
+Add react config (for frontend framework) to react, then move it into `signal-k/polygon`
+-->
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Trader branch
+This branch contains a connection between Supabase (our current hosting platform for this backend) and the rest our our Notebooks & API. Everything else has been stripped out of this branch.
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+Run `python3 -m venv .venv` to get started.
 
-[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`.
+Note: Start integrating in API from signal-k/polygon
 
-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.
+### Planti branch
+Stripping everything out (e.g. `Ansible`/`Generator`) and just leaving the initial dashboard/game frontend. We'll merge it back with `Trader` later

Scripts/1-initialize-sdk.mjs

@@ -0,0 +1,33 @@
+import { ThirdwebSDK } from "@thirdweb-dev/sdk";
+
+import dotenv from "dotenv";
+dotenv.config();
+
+if (!process.env.PRIVATE_KEY || process.env.PRIVATE_KEY === "") {
+    console.log("🛑 Private key not found");
+}
+
+if (!process.env.QUICKNODE_API_URL || process.env.QUICKNODE_API_URL === "") {
+    console.log("🛑 QuickNode API URL not found.");
+}
+
+if (!process.env.WALLET_ADDRESS || process.env.WALLET_ADDRESS === "") {
+    console.log("🛑 Wallet Address not found.");
+}
+
+const sdk = ThirdwebSDK.fromPrivateKey(
+    process.env.PRIVATE_KEY,
+    process.env.QUICKNODE_API_URL,
+);
+
+(async () => {
+    try {
+        const address = await sdk.getSigner().getAddress();
+        console.log("👋 -> SDK Initialised by address: ", address);
+    } catch (err) {
+        console.error("🛑: Failed to get apps from the sdk -> ", err);
+        process.exit(1);
+    }
+})();
+
+export default sdk;

Scripts/2-deploy-drop.mjs

@@ -0,0 +1,36 @@
+import { AddressZero } from "@ethersproject/constants"
+import sdk from './1-initialize-sdk.mjs'
+import { readFileSync } from 'fs';
+
+(async () => {
+    try {
+        const editionDropAddress = await sdk.deployer.deployEditionDrop({
+            name: "Star Sailors Contributor Membership",
+            description: "A Dao for early contributors to the game Star Sailors, being developed by Signal Kinetics",
+            image: readFileSync("assets/ContributorCard.png"),
+            primary_sale_recipient: AddressZero,
+        });
+
+        const editionDrop = await sdk.getContract(editionDropAddress, "edition-drop"); // Initialise contract through thirdweb
+        const metadata = await editionDrop.metadata.get(); // Get metadata of the contract
+        console.log("✅ Successfully deployed editionDrop contract, address:",
+        editionDropAddress,);
+        console.log("✅ editionDrop metadata:", metadata);
+    } catch (error) {
+        console.log("Failed to deploy editionDrop contract: ", error);
+    }
+})();
+
+/* Output: 
+👋 -> SDK Initialised by address:  0x15A4C3b42f3386Cd1A642908525469684Cac7C6d
+✅ Successfully deployed editionDrop contract, address: 0x93FC4ba29c41c059fB9f4727F3903df776771Af8
+✅ editionDrop metadata: {
+  name: 'Star Sailors Contributor Membership',
+  description: 'A Dao for early contributors to the game Star Sailors, being developed by Signal Kinetics',
+  image: 'https://gateway.ipfscdn.io/ipfs/QmWumgB3dtWbfZmLQ2qWJkEk6nh5yXhYd4kHGt7kYtvriY/0',
+  seller_fee_basis_points: 0,
+  fee_recipient: '0x0000000000000000000000000000000000000000',
+  merkle: {},
+  symbol: ''
+}
+*/

Scripts/3-config-nft.mjs

@@ -0,0 +1,18 @@
+import sdk from "./1-initialize-sdk.mjs";
+import { readFileSync } from 'fs';
+
+(async () => {
+    try { // Update `editionDrop` variable with address received when running `2-deploy-drop.mjs`
+        const editionDrop = await sdk.getContract("0x93FC4ba29c41c059fB9f4727F3903df776771Af8", 'edition-drop');
+        await editionDrop.createBatch([
+            {
+                name: "Spiritful Photoreceptor Patch",
+                description: 'This NFT gives you access to our community DAO, AND a special eyepatch',
+                image: readFileSync("assets/ContributorCard.png"),
+            },
+        ]);
+        console.log("✅ Successfully created a new NFT in the drop!");
+    } catch (error) {
+        console.error("failed to create the new NFT", error);
+    }
+})();

Scripts/4-set-claim-condition.mjs

@@ -0,0 +1,20 @@
+import sdk from './1-initialize-sdk.mjs';
+import { MaxUint256 } from "@ethersproject/constants";
+
+(async () => {
+    try {
+        const editionDrop = await sdk.getContract("0x93FC4ba29c41c059fB9f4727F3903df776771Af8", 'edition-drop');
+        const claimConditions = [{
+            startTime: new Date(),
+            maxClaimable: 50_000,
+            price: 0,
+            maxClaimablePerWallet: 1,
+            waitInSeconds: MaxUint256,
+        }]
+
+        await editionDrop.claimConditions.set("0", claimConditions);
+        console.log("✅ ↣ Successfully set claim conditions.");
+    } catch (error) {
+        console.error("Failed to get claim condition. Error: ", error);
+    }
+})();

components/ApproxRewards.tsx → components/Ansible/ApproxRewards.tsx

@@ -2,7 +2,7 @@ import { useAddress } from "@thirdweb-dev/react";
 import { SmartContract } from "@thirdweb-dev/sdk";
 import { ethers } from "ethers";
 import React, { useEffect, useState } from "react";
-import ContractMappingResponse from "../types/ContractMappingResponse";
+import ContractMappingResponse from "../../types/ContractMappingResponse";
 
 type Props = {
   miningContract: SmartContract<any>;

components/CurrentGear.tsx → components/Ansible/CurrentGear.tsx

@@ -1,9 +1,9 @@
 import { ThirdwebNftMedia, useAddress, useNFT } from "@thirdweb-dev/react";
 import { EditionDrop, NFT, SmartContract } from "@thirdweb-dev/sdk";
 import React, { useEffect, useState } from "react";
-import ContractMappingResponse from "../types/ContractMappingResponse";
+import ContractMappingResponse from "../../lib/ContractMappingResponse";
 import GameplayAnimation from "./GameplayAnimation";
-import styles from "../styles/Home.module.css";
+import styles from "../../styles/Home.module.css";
 
 type Props = {
   miningContract: SmartContract<any>;

components/GameplayAnimation.tsx → components/Ansible/GameplayAnimation.tsx

@@ -1,6 +1,6 @@
 import { NFT } from "@thirdweb-dev/sdk";
 import React from "react";
-import styles from "../styles/Gameplay.module.css";
+import styles from "../../styles/Gameplay.module.css";
 
 const GoldGem = (
   <div className={styles.slide}>

components/LoadingSection.tsx → components/Ansible/LoadingSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "../styles/Home.module.css";
+import styles from "../../styles/Home.module.css";
 
 export default function LoadingSection() {
   return <div className={styles.container}>Loading...</div>;

components/OwnedGear.tsx → components/Ansible/OwnedGear.tsx

@@ -7,8 +7,8 @@ import {
 import { EditionDrop, SmartContract } from "@thirdweb-dev/sdk";
 import React from "react";
 import LoadingSection from "./LoadingSection";
-import styles from "../styles/Home.module.css";
-import { MINING_CONTRACT_ADDRESS } from "../const/contractAddresses";
+import styles from "../../styles/Home.module.css";
+import { MINING_CONTRACT_ADDRESS } from "../../lib/contractAddresses";
 
 type Props = {
   pickaxeContract: EditionDrop;

components/Rewards.tsx → components/Ansible/Rewards.tsx

@@ -10,9 +10,9 @@ import {
 import { SmartContract, Token } from "@thirdweb-dev/sdk";
 import { ethers } from "ethers";
 
-import styles from "../styles/Home.module.css";
+import styles from "../../styles/Home.module.css";
 import ApproxRewards from "./ApproxRewards";
-import { MINING_CONTRACT_ADDRESS } from "../const/contractAddresses";
+import { MINING_CONTRACT_ADDRESS } from "../../lib/contractAddresses";
 
 type Props = {
   miningContract: SmartContract<any>;

components/Shop.tsx → components/Ansible/Shop.tsx

@@ -1,7 +1,7 @@
 import { useNFTs } from "@thirdweb-dev/react";
 import { EditionDrop } from "@thirdweb-dev/sdk";
 import React from "react";
-import styles from "../styles/Home.module.css";
+import styles from "../../styles/Home.module.css";
 import ShopItem from "./ShopItem";
 
 type Props = {

components/ShopItem.tsx → components/Ansible/ShopItem.tsx

@@ -6,8 +6,8 @@ import {
 import { EditionDrop, NFT } from "@thirdweb-dev/sdk";
 import { ethers } from "ethers";
 import React from "react";
-import { PICKAXE_EDITION_ADDRESS } from "../const/contractAddresses";
-import styles from "../styles/Home.module.css";
+import { PICKAXE_EDITION_ADDRESS } from "../../lib/contractAddresses";
+import styles from "../../styles/Home.module.css";
 
 type Props = {
   pickaxeContract: EditionDrop;

env-variables.txt

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+PRIVATE_KEY=
+WALLET_ADDRESS=
+QUICKNODE_API_URL=

package.json

@@ -9,9 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@thirdweb-dev/react": "^3",
-    "@thirdweb-dev/sdk": "^3",
-    "ethers": "^5.6.9",
+    "@ethersproject/constants": "^5.7.0",
+    "@thirdweb-dev/react": "^3.6.2",
+    "@thirdweb-dev/sdk": "^3.6.2",
+    "dotenv": "^16.0.3",
+    "ethers": "^5.7.2",
+    "fs": "^0.0.1-security",
     "next": "12.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0"

pages/dao.js

@@ -0,0 +1,50 @@
+import { useAddress, ConnectWallet, Web3Button, useContract, useNFTBalance } from '@thirdweb-dev/react';
+import { useState, useEffect, useMemo } from 'react';
+import styles from '../styles/Dao.module.css';
+
+const Dao = () => {
+    const address = useAddress();
+    console.log("🤝 User address: ", address);
+
+    if (!address) {
+        return (
+            <div className={styles.landing}>
+                <h1>Welcome to Star Sailors DAO</h1>
+                <div className={styles.btnhero}>
+                    <ConnectWallet />
+                </div>
+            </div>
+        );
+    }
+
+    const editionDropAddress = '0x93FC4ba29c41c059fB9f4727F3903df776771Af8';
+    const { contract: editionDrop } = useContract(editionDropAddress, "edition-drop");
+    const { data: nftBalance } = useNFTBalance(editionDrop, address, "0"); // Hook to check if authenticated user has membership nft
+    const hasClaimedNFT = useMemo(() => {
+        return nftBalance && nftBalance.gt(0);
+    }, [nftBalance]);
+
+    return (
+        <div className={styles.landing}>
+            <h1>👀 Mint your DAO membership</h1>
+            <div className={styles.btnhero}>
+                <Web3Button
+                    contractAddress={editionDropAddress}
+                    action={contract => {
+                        contract.erc1155.claim(0, 1)
+                    }}
+                    onSuccess={() => {
+                        console.log(`🌊 Successfully Minted! Check it out on OpenSea: https://testnets.opensea.io/assets/${editionDrop.getAddress()}/0`);
+                    }}
+                    onError={error => {
+                        console.error("Failed to mint NFT, ", error);
+                    }}
+                >
+                    Mint your membership NFT (FREE)
+                </Web3Button>
+            </div>
+        </div>
+    );
+}
+
+export default Dao;

pages/play.tsx

@@ -5,17 +5,17 @@ import {
   useMetamask,
 } from "@thirdweb-dev/react";
 import React from "react";
-import CurrentGear from "../components/CurrentGear";
-import LoadingSection from "../components/LoadingSection";
-import OwnedGear from "../components/OwnedGear";
-import Rewards from "../components/Rewards";
-import Shop from "../components/Shop";
+import CurrentGear from "../components/Ansible/CurrentGear";
+import LoadingSection from "../components/Ansible/LoadingSection";
+import OwnedGear from "../components/Ansible/OwnedGear";
+import Rewards from "../components/Ansible/Rewards";
+import Shop from "../components/Ansible/Shop";
 import {
   CHARACTER_EDITION_ADDRESS,
   GOLD_GEMS_ADDRESS,
   MINING_CONTRACT_ADDRESS,
   PICKAXE_EDITION_ADDRESS,
-} from "../const/contractAddresses";
+} from "../lib/contractAddresses";
 import styles from "../styles/Home.module.css";
 
 export default function Play() {