🚁🐊 ↣ Adding contract info for #6 to frontend, allow contract interact…

…ivity in #16

.gitignore

@@ -41,4 +41,4 @@ venv
 cache
 /cache
 ./cache
-.cache
+.cache.gitsigners

contracts/Contract.sol

@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: Apache-2.0
+pragma solidity ^0.8.0;
+
+import "@thirdweb-dev/contracts/base/ERC1155LazyMint.sol";
+
+contract SpaceshipContract is ERC1155LazyMint {
+    constructor(
+        string memory _name,
+        string memory _symbol
+    ) ERC1155LazyMint(_name, _symbol, msg.sender, 0) {}
+
+    function burn ( address _owner, uint256 _tokenId, uint256 _amount ) external override {
+        address caller = msg.sender;
+
+        require(caller == _owner || isApprovedForAll[_owner][caller], "Unapproved caller");
+        require(balanceOf[_owner][_tokenId] >= _amount, "Not enough tokens owned");
+
+        _burn(_owner, _tokenId, _amount);
+        if (_tokenId == 0) {
+            _mint(_owner, 1, _amount, "");
+        }
+    }
+}

hardhat.config.js

@@ -0,0 +1,12 @@
+/** @type import('hardhat/config').HardhatUserConfig */
+module.exports = {
+  solidity: {
+    version: '0.8.9',
+    settings: {
+      optimizer: {
+        enabled: true,
+        runs: 200,
+      },
+    },
+  },
+};

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.8.0",
     "@everipedia/wagmi-magic-connector": "^0.7.1",
     "@magic-ext/oauth": "^4.0.0",
     "@magiclabs/ui": "^0.24.2",
@@ -14,15 +15,16 @@
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
     "@thirdweb-dev/contracts": "^3.1.11",
-    "@thirdweb-dev/react": "^3",
-    "@thirdweb-dev/sdk": "^3",
+    "@thirdweb-dev/react": "^3.6.0",
+    "@thirdweb-dev/sdk": "^3.6.0",
+    "antd": "^4.24.3",
     "axios": "^1.1.3",
     "bootstrap": "^5.2.2",
     "dotenv": "^16.0.3",
     "ethers": "^5.7.2",
     "framer-motion": "4.1.17",
     "magic-sdk": "^10.0.0",
-    "moralis": "^2.7.0",
+    "moralis": "^2.7.4",
     "next": "^13.0.0",
     "next-auth": "^4.15.0",
     "next-router": "^1.3.6",
@@ -38,7 +40,7 @@
     "semantic-ui-react": "^2.1.3",
     "stripe": "^10.15.0",
     "styled-components": "^5.3.6",
-    "wagmi": "^0.7.8",
+    "wagmi": "^0.8.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

server/app.py

@@ -2,6 +2,7 @@
 import time
 import requests
 import psycopg2
+#from .contactContract import contract
 
 # App & Data configuration =====>
 app = Flask(__name__)
@@ -72,4 +73,14 @@ def add_planet():
     with connection:
         with connection.cursor() as cursor:
             cursor.execute(CREATE_PLANETSDEMO_TABLE)
-            cursor.execute(INSERT_PLANETSDEMO, (name, moons))
+            cursor.execute(INSERT_PLANETSDEMO, (name, moons))
+
+# Get the user's Moralis profile ID (through Magic)
+@app.post('/add-user-id')
+def add_user_id():
+    data = request.get_json()
+    profileId = data['profileId']
+
+    with connection:
+        with connection.cursor() as cursor:
+            pass # Send this to the user's profile on Supabase

server/contactContract.py

@@ -0,0 +1,19 @@
+from thirdweb import ThirdwebSDK
+import requests
+from flask import Blueprint
+
+# Talking to Moralis
+def requestEVM():
+    url = "https://authapi.moralis.io/challenge/request/evm"
+    payload = {"timeout": 15}
+    headers = {
+        "accept": "application/json",
+        "content-type": "application/json",
+        "X-API-KEY": "kJfYYpmMmfKhvaWMdD3f3xMMb24B4MHBDDVrfjslkKgTilvMgdwr1bwKUr8vWdHH"
+    }
+
+    response = requests.post(url, json=payload, headers=headers)
+
+sdk = ThirdwebSDK("mumbai") # Connect to the mumbai testnet on EVM
+contract = sdk.get_contract("0xed6e837Fda815FBf78E8E7266482c5Be80bC4bF9")
+data = contract.call("claim", _receiver, _tokenId, _quantity)

src/App.js

@@ -6,7 +6,11 @@ import { supabase } from './supabaseClient'
 import Auth from './components/Auth';
 import Account from './components/Account';
 
-function App() {
+// Thirdweb/EVM connector
+import { ChainId, ThirdwebProvider } from '@thirdweb-dev/react';
+const activeChainId = ChainId.Mumbai;
+
+function App({ Component, pageProps }) {
 
   const [session, setSession] = useState(null)
 
@@ -18,9 +22,11 @@ function App() {
   }, [])
 
   return (
-    <div className="container mx-auto">
-      {!session ? <Auth /> : <Account key={session.user.id} session={session} />}
-    </div>
+    <ThirdwebProvider desiredChainId={activeChainId}>
+      <div className="container mx-auto">
+        {!session ? <Auth /> : <Account key={session.user.id} session={session} />}
+      </div>
+    </ThirdwebProvider>
   );
 }
 

src/components/Account.js

@@ -9,6 +9,12 @@ import { Container } from "semantic-ui-react";
 import { Planets } from "./api/Planets";
 import { PlanetForm } from "./api/PlanetForm";
 
+// Unity Views =====>
+import { Unitydb } from "../controller/unity";
+
+// Thirdweb && EVM components ======>
+import { ConnectWallet, ThirdwebNftMedia, useContract, useNFTs, useOwnedNFTs, useAddress, Web3Button } from "@thirdweb-dev/react";
+
 const Account = ( { session } ) => {
     // Authentication settings
     const [loading, setLoading] = useState(true)
@@ -20,15 +26,40 @@ const Account = ( { session } ) => {
         getProfile()
     }, [session]) // Update whenever session (from Supabase) changes
 
-    // Call second flask app
-    const [planets, setPlanets] = useState([]);
 
+    // Planet/Other data states
+    const [planetName, setPlanetName] = useState(null);
+    const [planetId, setPlanetId] = useState(null);
+    const [planetMoons, setPlanetMoons] = useState(0);
+    const [planets, setPlanets] = useState([]);
+    const [userId, setUserId] = useState(null);
     useEffect(() => {
         fetch('/planets').then(response => response.json().then(data => {
             setPlanets(data.planets);
         }));
     }, []); // Also pass in the authentication settings to Flask via POST
 
+    /* Get planet information from Supabase
+    const getPlanets = async () => {
+        try {
+            setLoading(true);
+            let { data, error, status } = await supabase
+            .from('planetsdemo') // From the planetsdemo table on Supabase
+            .select(`planetid, name, moons`) // Select these values from the table
+            .single()
+
+            if (data) {
+                setPlanetId(data.planetid);
+                setPlanetName(data.name);
+                setPlanetMoons(data.moons);
+            }
+        } catch (error) {
+            alert(error.message);
+        } finally {
+            setLoading(false);
+        }
+    }*/
+
     // Get profile information from Supabase postgres
     const getProfile = async () => {
         try {
@@ -39,12 +70,14 @@ const Account = ( { session } ) => {
             .select(`username, website, avatar_url`)
             .eq('id', user.id)
             .single()
+            setUserId(user.id)
 
-            if(data){
-                setUsername(data.username)
-                setWebsite(data.website)
-                setAvatarUrl(data.avatar_url)
+            if(data) {
+                setUsername(data.username);
+                setWebsite(data.website);
+                setAvatarUrl(data.avatar_url);
             }
+            console.log(user.id);
         } catch (error) {
             alert(error.message)
         }finally{
@@ -79,6 +112,16 @@ const Account = ( { session } ) => {
         }
     }
 
+    // Ethereum / Contract hooks ====>
+    const { contract } = useContract("0xed6e837Fda815FBf78E8E7266482c5Be80bC4bF9"); // Add contract of collection as hook
+    const address = useAddress(); // get the address of connected user
+    const { data: nfts } = useOwnedNFTs(contract, address); // Array of nfts
+
+    /* Game event hooks
+    const { data: events } = useAllContractEvents(contract, {
+      subscribe: true,
+    });*/
+
     return (
         <div aria-live="polite" className='container mx-auto'>
       {loading ? (
@@ -126,8 +169,27 @@ const Account = ( { session } ) => {
         </form>
       )}
       <Container>
+        <ConnectWallet />
+        <hr />
+        <Web3Button
+            contractAddress={"0xed6e837Fda815FBf78E8E7266482c5Be80bC4bF9"}
+            action={(contract) => contract.call("claim", address, 0, 1)} // Call claim function | 1 of token id 0
+        >
+            Claim a spaceship!
+        </Web3Button>
+        {nfts?.map((nft) => (<div>
+            <ThirdwebNftMedia
+                key={nft.metadata.id.toString()}
+                metadata={nft.metadata}
+            />
+            <h2>{nft.metadata.name}</h2>
+        </div>
+        ))}
+
         <Planets planets={planets} />
         <PlanetForm />
+        <p>The planet is {planetName} </p>
+        <Unitydb />
       </Container>
     </div>
     )

src/controller/unity.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const Unitydb = () => {
+    return (
+        <div>
+            <p>Hello</p>
+        </div>
+    )
+}