Signal-K · Gizmotronn · Apr 20, 2023 · Apr 15, 2023 · Apr 16, 2023 · Apr 20, 2023
diff --git a/components/Core/Footer.tsx b/components/Core/Footer.tsx
@@ -3,10 +3,10 @@ import Link from "next/link"
 export default function Footer () {
     return (
         <div className="btm-nav">
-            <button>
+            <button className="active">
                 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
             </button>
-            <button className="active">
+            <button>
                 <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
             </button>
             <Link href='https://skinetics.tech'><button>

diff --git a/components/Gameplay/Stake/GameplayAnimation.tsx b/components/Gameplay/Stake/GameplayAnimation.tsx
@@ -2,7 +2,8 @@ import React from "react";
 import styles from '../../../styles/Staking-P2E/Gameplay.module.css';
 import { NFT } from "@thirdweb-dev/sdk";
 
-const Minerals = ( <div className={styles.slide}><img src='.stake/mineral.png' height='48' width='48' alt='mineral' /></div>) // This should be changed to the collection picture (via Thirdweb)
+//const Minerals = ( <div className={styles.slide}><img src='.stake/mineral.png' height='48' width='48' alt='mineral' /></div>) // This should be changed to the collection picture (via Thirdweb)
+const Minerals = ( <div className={styles.slide}><img src='https://gateway.ipfscdn.io/ipfs/QmNsxvqgWqZfRsT1JprA3wZFoxPxg43jVw5YDxUnqtnC6L/9f19e842-cd67-45fe-9ef7-dd67bfabe772-removebg-preview.png' height='48' width='48' alt='mineral' /></div>) 
 type Props = { multitool: NFT | undefined; };
 
 export default function GameplayAnimation ({ multitool }: Props ) {

diff --git a/pages/generator/account.tsx b/pages/generator/account.tsx
@@ -19,10 +19,11 @@ export default function OffchainAccount({ session }: { session: Session}) {
     const supabase = useSupabaseClient<Database>();
     const user = useUser();
     const [loading, setLoading] = useState(true);
-    const [username, setUsername] = useState(''); //useState<Profiles['username']>(null);
-    const [website, setWebsite] = useState(''); //useState<Profiles['website']>(null); // I believe this is the email field
-    const [avatar_url, setAvatarUrl] = useState(''); //useState<Profiles['avatar_url']>(null);
-    const [address, setAddress] = useState(''); //useState<Profiles['address']>(null); // This should be set by the handler eventually (connected address).
+    const [username, setUsername] = useState<Profiles['username']>(null);
+    const [website, setWebsite] = useState<Profiles['website']>(null); // I believe this is the email field
+    const [avatar_url, setAvatarUrl] = useState<Profiles['avatar_url']>(null);
+    const [address2, setAddress2] = useState<Profiles['address2']>(null);
+    const [address, setAddress] = useState<Profiles['address']>(null); // This should be set by the handler eventually (connected address).
     const [images, setImages] = useState([]);
     const [address2, setAddress2] = useState('');
 
@@ -92,6 +93,7 @@ export default function OffchainAccount({ session }: { session: Session}) {
                 avatar_url,
                 address,
                 address2,
+                updated_at: new Date().toISOString()
             }
             let { error } = await supabase.from('profiles').upsert(updates);
             if (error) throw error;

diff --git a/pages/governance/vote.jsx b/pages/governance/vote.jsx
@@ -3,7 +3,9 @@ import { ethers } from "ethers";
 import { useAddress, useNetwork, useContract, ConnectWallet, useNFTBalance, Web3Button, useContractWrite } from "@thirdweb-dev/react";
 import { ChainId } from '@thirdweb-dev/sdk';
 import { AddressZero } from '@ethersproject/constants';
-//import styles from '../../styles/Proposals/proposalsIndex.module.css';
+import styles from '../../styles/Proposals/proposalsIndex.module.css';
+import StakePlay from '../stake/play';
+// import styles from '../../styles/governance/governance.module.css';
 
 // For testing -> using contracts from pages/stake
 import { PLANETS_ADDRESS } from "../../constants/contractAddresses";
@@ -181,7 +183,7 @@ const VotingEntrance = () => {
 
     if (address && network?.[0].data.chain.id !== ChainId.Goerli) {
         return (
-            <div className="unsupported-network">
+            <div className={styles.unsupported-network}>
                 <h2>Please connect to Goerli</h2>
                 <p>
                     This dapp only works on the Goerli network, please switch networks in your connected wallet.
@@ -193,9 +195,9 @@ const VotingEntrance = () => {
     // If the user hasn't connected their wallet yet
     if (!address) {
         return (
-            <div className="landing">
+            <div className={styles.landing}>
                 <h1>Welcome to the voting area</h1>
-                <div className="btn-hero">
+                <div className={styles.btnhero}>
                     <ConnectWallet />
                 </div>
             </div>
@@ -206,14 +208,14 @@ const VotingEntrance = () => {
     if (hasClaimedNFT) {
         return (
             <CoreLayout>
-                <div className="member-page">
+                <div className={styles.memberpage}>
                     <h1>🦔 Planet Voting page</h1>
                     <div>
                         <div>
                             <h2>Member list</h2>
                             <ConnectWallet />
                             {address}
-                            <table className="card">
+                            <table className={styles.card}>
                                 <thead>
                                     <tr>
                                         <th>Address</th>
@@ -231,6 +233,27 @@ const VotingEntrance = () => {
                                     })}
                                 </tbody>
                             </table>
+                            <h2>Contribution tokens</h2>
+                            {/*<table className="card">
+                                <thead>
+                                    <tr>
+                                        <th>Token address</th>
+                                        <th>Token embed</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>Goerli/0xdf35Bb26d9AAD05EeC5183c6288f13c0136A7b43</td>
+                                        <td><iframe
+    src="https://ipfs.thirdwebcdn.com/ipfs/QmfK9mw9eQKE9vCbtZht9kygpkNWffdwibsJPnCo7MBN4M/erc1155.html?contract=0xdf35Bb26d9AAD05EeC5183c6288f13c0136A7b43&chain=%7B%22name%22%3A%22Goerli%22%2C%22chain%22%3A%22ETH%22%2C%22rpc%22%3A%5B%22https%3A%2F%2Fgoerli.rpc.thirdweb.com%2F5a9bc94b87f7cbbbfbbc234bf1e07f0adf5f3cf3012c9f26f9fc9820d64df93a%22%5D%2C%22nativeCurrency%22%3A%7B%22name%22%3A%22Goerli+Ether%22%2C%22symbol%22%3A%22ETH%22%2C%22decimals%22%3A18%7D%2C%22shortName%22%3A%22gor%22%2C%22chainId%22%3A5%2C%22testnet%22%3Atrue%2C%22slug%22%3A%22goerli%22%7D&tokenId=0"
+    width="600px"
+    height="600px"
+    style="max-width:100%;"
+    frameborder="0"
+    ></iframe></td>
+                                    </tr>
+                                </tbody>
+                            </table>*/}
                         </div>
                         <div>
                             <h2>Active Proposals</h2>
@@ -303,7 +326,7 @@ const VotingEntrance = () => {
                                 }}
                             >
                                 {proposals.map((proposal) => (
-                                    <div key={proposal.proposalId} className="card">
+                                    <div key={proposal.proposalId} className={styles.card}>
                                         <h5>{proposal.description}</h5>
                                         <div>
                                         {proposal.votes.map(({ type, label }) => (
@@ -329,16 +352,17 @@ const VotingEntrance = () => {
                         </div>
                     </div>
                 </div>
+                <StakePlay />
             </CoreLayout>
         );
     };
 
     // Render mint nft screen
     return (
         <CoreLayout>
-            <div className="mint-nft">
+            <div className={styles.mintnft}>
                 <h1>Mint your free 🍪DAO Membership NFT</h1>
-                <div className="btn-hero">
+                <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); }}

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -12,6 +12,34 @@ export default function Home() {
     return (
         <>
             <CoreLayout>      
+    {/*<div className="max-w-2xl mx-auto py-8">
+      <div className="flex items-center mb-8">
+        <img src="https://via.placeholder.com/150" alt="Profile" className="rounded-full h-24 w-24 mr-4" />
+        <div>
+          <h1 className="text-2xl font-bold">John Doe</h1>
+          <p className="text-lg text-gray-500">johndoe@example.com</p>
+        </div>
+      </div>
+      <div className="mb-8">
+        <h2 className="text-lg font-bold mb-4">Address</h2>
+        <p className="text-lg">123 Main St.</p>
+        <p className="text-lg">Anytown, USA 12345</p>
+      </div>
+    </div>*/}
+
+
+            <div className="max-w-md mx-auto py-5">
+      <h1 className="text-4xl font-bold mb-8">Welcome to Star Sailors!</h1>
+      <p className="text-lg mb-4">
+      Our game is a unique and engaging experience that allows you to contribute to real-world scientific research projects by collecting and classifying objects based on real-world data. Currently, we're working on a planets mini-game where you can help identify potential new planets discovered by the TESS telescope.
+      </p>
+      <p className="text-lg mb-4">
+      To get started, simply log in to the Star Sailors website and navigate to the <Link href="/planets">planets</Link> page. You'll be presented with different objects that may or may not be planets, along with relevant information to help you make an informed decision. Once you've made your decision, you can create a post about it and invite other users to vote on whether they agree with your assessment.
+      </p><br />
+      <p className="text-lg mb-4">
+      As you participate in the game and contribute your expertise, you'll earn points that can be redeemed for rewards and recognition within the Star Sailors community. 
+      </p>
+    </div>
                 <SocialGraphHomeNoSidebar /> 
                 <UserOnboarding />         
             </CoreLayout>

diff --git a/pages/login/index.tsx b/pages/login/index.tsx
@@ -10,7 +10,8 @@ const Login = () => {
     return (
         <div className='container' style={{ padding: '50px 0 100px 0' }}>
             {!session ? (
-                <Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa}} theme='dark' />
+                // <><SocialGraphHome />
+                <Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa}} theme='dark' />//</>
             ) : (
                 <SocialGraphHome />
             )}

diff --git a/pages/planets/index.tsx b/pages/planets/index.tsx
@@ -44,7 +44,7 @@ export default function PlanetGalleryIndex () {
                 ))}</div>
                 <div className="mx-10">
                     {/*<img src="http://127.0.0.1:5000/get_image" />*/}
-                    <PlanetFormCard onCreate={getPlanets} />
+                    {/*<PlanetFormCard onCreate={getPlanets} />*/}
                 </div> {/* Maybe show user's planets or metadata here... */}
             </div>
         </GameplayLayout>

diff --git a/pages/posts/post.tsx b/pages/posts/post.tsx
@@ -1,3 +1,5 @@
+import React from "react";
+
 export default function PostPage () {
     return (
         <div>Post page stub</div>

diff --git a/pages/posts/post/[id].tsx b/pages/posts/post/[id].tsx
@@ -2,8 +2,8 @@ import React from "react";
 import PostPage from "../post";
 
 export default function Post () {
-    //return <PostPage />;
     return (
-        <div>Stub, PostPage</div>
+        <div>Stub</div>
     )
+    //return <PostPage />;
 }
diff --git a/styles/Proposals/proposalsIndex.module.css b/styles/Proposals/proposalsIndex.module.css
@@ -1,5 +1,6 @@
-/*html,
-body {
+/*
+.html,
+.body {
   margin: 0;
   font-family: Inter, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -13,14 +14,15 @@ body {
   display: flex;
 }
 
-h1 {
+.h1 {
   font-size: 5rem;
 }
 @media screen and (max-width: 768px) {
   h1 {
     font-size: 3rem;
   }
 }
+*/
 
 .unsupported-network {
   width: 340px;
@@ -42,10 +44,15 @@ h1 {
   background-color: #f00;
 }
 
+.btnhero {
+  margin: auto;
+  width: 250px;
+}
+
 .landing,
-.connect-wallet,
-.mint-nft,
-.member-page {
+.connectwallet,
+.mintnft,
+.memberpage {
   flex-direction: column;
   width: 960px;
   max-width: calc(100% - 1rem);
@@ -57,52 +64,52 @@ h1 {
   text-align: center;
 }
 
-.member-page > div {
+.memberpage > div {
   display: flex;
   flex-direction: row;
   width: 100%;
   text-align: left;
   gap: 2rem;
 }
-.member-page > div > div {
+.memberpage > div > div {
   display: flex;
   flex-direction: column;
   width: 50%;
   gap: 1rem;
 }
 @media screen and (max-width: 768px) {
-  .member-page > div {
+  .memberpage > div {
     flex-direction: column;
   }
-  .member-page > div > div {
+  .memberpage > div > div {
     width: 100%;
   }
 }
 
-.member-page form {
+.memberpage form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
-.member-page form > div {
+.memberpage form > div {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
-.member-page form h5 {
+.memberpage form h5 {
   margin-top: 0;
   color: #7700ee;
 }
 
-.member-page form .card > div {
+.memberpage form .card > div {
   display: flex;
   gap: 1rem;
   justify-content: space-between;
 }
 
-.member-page form small {
+.memberpage form small {
   text-align: center;
 }
 
@@ -119,7 +126,7 @@ h1 {
   width: 250px;
 }
 
-button {
+.button {
   cursor: pointer;
   background-color: #000;
   color: #fff;
@@ -132,15 +139,15 @@ button {
   font-size: 1.2rem;
 }
 
-button:hover {
+.button:hover {
   background-color: #121212;
 }
 
-button:focus {
+.button:focus {
   background-color: #222;
 }
 
-button:disabled {
+.button:disabled {
   opacity: 0.8;
   pointer-events: none;
-}*/
+}