🐧⌚️ ↝ Adding stake params/types as per the flow plan described in htt…

…ps://skinetics.notion.site/February-Flow-Planets-8c864b66147c447f82136772336e9bc6

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
     "jira-plugin.workingProject": "",
     "liveServer.settings.port": 5501,
-    "solidity.defaultCompiler": "localNodeModule",
-    "solidity.compileUsingRemoteVersion": "v0.8.17+commit.8df45f5f"
+    "solidity.defaultCompiler": "localFile",
+    "solidity.compileUsingRemoteVersion": "v0.8.11+commit.d7f03943"
 }

components/PostCard.tsx

@@ -9,10 +9,10 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { UserContext } from "../context/UserContext";
 import UtterancesComments from "./Lens/Utterances";
 
-//import en from 'javascript-time-ago/locale/en.json';
-//import TimeAgo from "javascript-time-ago";
-//TimeAgo.addDefaultLocale(en);
-//import ReactTimeAgo from "react-time-ago";
+import en from 'javascript-time-ago/locale/en.json';
+import TimeAgo from "javascript-time-ago";
+TimeAgo.addDefaultLocale(en);
+import ReactTimeAgo from "react-time-ago";
 
 type Profiles = Database['public']['Tables']['profiles']['Row'];
 
@@ -56,7 +56,7 @@ export default function PostCard ( { content, created_at, media, profiles:author
             </Link>
             shared a <a className="text-socialBlue">post</a> {/* Add link to ORCHID publication ID/Lens ID */}
           </p>
-          <p className="text-gray-500 text-sm">{/*<ReactTimeAgo date={created_at} />*/} Undefined hours ago</p>
+          <p className="text-gray-500 text-sm"><ReactTimeAgo date={ ( new Date(created_at)).getTime() } /></p>{/* <ReactTimeAgo date={ ( created_at instanceof Date ? created_at.getTime() : created_at ) } /> */}
         </div>
         <div className="relative">
           <button className="text-gray-400" onClick={openDropdown}>
@@ -108,7 +108,7 @@ export default function PostCard ( { content, created_at, media, profiles:author
         {media?.length > 0 && (
           <div className="flex gap-4">
             {media?.length > 0 && media.map(media => (
-              <div className="rounded-md overflow-hidden"><img src={media} /></div>
+              <div key={media} className="rounded-md overflow-hidden"><img src={media} /></div>
             ))}
           </div>
         )}

components/Posts/ProfileCard.jsx

@@ -3,28 +3,38 @@ import UtterancesComments from "../Lens/Utterances"
 import Card from "../Card"
 import FriendInfo from "../FriendInfo"
 import PostCard from "../PostCard"
-import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"
+import { useSupabaseClient } from "@supabase/auth-helpers-react"
 
 export function ProfileContent ({ activeTab, userId }) {
     const supabase = useSupabaseClient();
-    const session = useSession();
 
     const [posts, setPosts] = useState([]);
+    const [profile, setProfile] = useState(null);
 
-    useEffect(() => {
+    useEffect (() => {
         if (!userId) { return; };
-        userPosts();
+        if (activeTab === 'posts') {
+            loadProfile().then(() => {});
+        }
     }, [userId]);
 
-    async function userPosts(userId) {
+    async function loadProfile () {
+        const posts = await userPosts(userId);
+        const profile = await userProfile(userId);
+        setPosts(posts)
+        setProfile(profile);
+        return { posts, profile };
+    }
+
+    async function userPosts (userId) {
         const { data } = await supabase.from('posts')
             .select('id, content, created_at, media, author') // profiles(id, avatar_url, username)')
+            .order('created_at', { ascending: false })
             .eq('author', userId) // session?.user?.id)
-            .then(result => { console.log(result); } );
         return data;
     };
 
-    async function userProfile(userId) {
+    async function userProfile (userId) {
         const { data } = await supabase.from('profiles')
             .select()
             .eq('id', userId);
@@ -35,8 +45,11 @@ export function ProfileContent ({ activeTab, userId }) {
         <div>
             {activeTab === 'posts' && (
                 <div>
-                <PostCard />
+                { posts.length > 0 && posts.map(post => (
+                    <PostCard key={post.created_at} {...post} profiles={profile} /*media={media}*/ />
+                ))}
                 {/*<PostCard key = { postMessage.id } { ..post } />*/}
+                {/* Create a post card to tag the user */}
                 </div>
             )}
             {activeTab === 'about' && (

components/Stake/CurrentGear.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from "react";
+import styles from '../../styles/Staking-P2E/planetInteraction.module.css';
+
+import { ThirdwebNftMedia, useAddress, useNFT } from "@thirdweb-dev/react"; // https://www.notion.so/skinetics/February-Flow-Planets-8c864b66147c447f82136772336e9bc6?pvs=4#3f8fd072ce514882a1a05e89a6cf63db
+import { EditionDrop, NFT, SmartContract } from "@thirdweb-dev/sdk";
+import ContractMappingResponse from "../../constants/contractMappingResponse";
+import GameplayAnimation from "./GameplayAnimation";
+import { PLANETS_ADDRESS } from "../../constants/contractAddresses";
+
+type Props = {
+    helperContract: SmartContract<any>;
+    planetContract: EditionDrop;
+    multitoolContract: EditionDrop;
+};
+
+export default function CurrentGear ({ // Shows the currently equipped planet character & currently equipped multitool
+    helperContract,
+    planetContract,
+    multitoolContract,
+}: Props) {
+    const address = useAddress();
+    const { data: planetNft } = useNFT(planetContract, 0); // Maps the data to the first planet nft (as for this version of the demo, we're only interacting with WASP-48b aka token id 1)
+    const [multitool, setMultitool] = useState<NFT>(); // If user has any multitools staked onto the helper contract. Previously <EditionDropMetadata>()
+    useEffect(() => {
+        (async () => {
+            if (!address) return;
+            const p = ( await helperContract.call( // Connect to the helper contract
+                'playerHelper', // Referred on contract as `playerHelper`, in terms of the frontend/ux it's essentially the `playerMultitool` from `multitoolContract`
+                address,
+            )) as ContractMappingResponse;
+            if (p.isData) { // If there is an equipped (staked) multitool, fetch its metadata
+                const multitoolMetadata = await multitoolContract.get(p.value);
+                setMultitool(multitoolMetadata);
+            }
+        })();
+    }, [address, helperContract, multitoolContract]); // Refresh this function if any of these values change. This component is reusable across multiple contracts (the contract addresses are defined in the page, not the component)
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <h2 className={`${styles.noGapTop}`}>Equipped items</h2>
+            <div
+                style={{
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'row',
+                justifyContent: 'center',
+                }}
+            >
+                <div style={{ outline: '1px solid grey', borderRadius: 16}}> {/* Currently equipped player */}
+                    {planetNft && (
+                        <ThirdwebNftMedia metadata={planetNft?.metadata} height={"64"} />
+                    )}
+                </div>
+                <div style={{ outline: '1px solid grey', borderRadius: 16, marginLeft: 8 }}> {/* Currently equipped multitool */}
+                    {multitool && (
+                    // @ts-ignore
+                    <ThirdwebNftMedia metadata={multitool.metadata} height={'64'} />
+                    )}
+                </div>
+            </div>
+            <div // Gameplay animation
+                style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginTop: 24
+                }}
+            >
+                <img src='./mine.gif' height={64} alt='planet-mining' />
+                <GameplayAnimation multitool={multitool} />
+            </div>
+        </div>
+    );
+};

components/Stake/GameplayAnimation.tsx

@@ -0,0 +1,29 @@
+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)
+type Props = { multitool: NFT | undefined; };
+
+export default function GameplayAnimation ({ multitool }: Props ) {
+    if (!multitool) { return <div style={{ marginLeft: 8 }}>I need a multitool!</div>; };
+    return (
+        <div className={styles.slider}>
+            <div className={styles.slideTrack}>
+                {Minerals}
+                {Minerals}
+                {Minerals}
+                {Minerals}
+                {Minerals}
+                {Minerals}
+                {Minerals}
+                {Minerals}
+                {Minerals}
+                {Minerals}
+                {Minerals}
+                {Minerals}
+                {Minerals}
+            </div>
+        </div>
+    );
+};

components/Stake/index.ts

@@ -0,0 +1,8 @@
+export { default as ApproxRewards } from './ApproxRewards';
+export { default as CurrentGear } from './CurrentGear';
+export { default as GameplayAnimation } from './GameplayAnimation';
+export { default as LoadingSection } from './LoadingSection';
+export { default as OwnedGear } from './OwnedGear';
+export { default as Rewards } from './Rewards';
+export { default as Shop } from './Shop';
+export { default as ShopItem } from './ShopItem';

constants/contractAddresses.ts

@@ -0,0 +1,7 @@
+export const HELPER_ADDRESS = '0xcf05AB21cAa609c81D6DfF435F0F8808A05EA264'; // custom contract
+// 0xcf05AB21cAa609c81D6DfF435F0F8808A05EA264 is deployed from the correct wallet, but has a problem - it points to the Planets contract as the multitools contract (i.e. the planets are both the required nft and the nft that is being staked. This could be implemented in future...but for now we need to fix this. So I've redeployed it on a new address (see above line) with the correct pointer). See https://skinetics.notion.site/Planet-Mining-multitool-8310fa1cd188440688bbcc19692b3b67. Derived from https://thirdweb.com/0xCdc5929e1158F7f0B320e3B942528E6998D8b25c/PlanetHelper/1.0.1?via=/goerli/0xcf05AB21cAa609c81D6DfF435F0F8808A05EA264
+export const MULTITOOLS_ADDRESS = '0xF846D262EeBAFbfA79017b43aBb0251F740a0619';
+export const PLANETS_ADDRESS = '0xdf35Bb26d9AAD05EeC5183c6288f13c0136A7b43'; // edition drop (erc1155)
+export const MINERALS_ADDRESS = '0xE938775F4ee4913470905885c9744C7FAD482991';
+
+// Note that this is on the Goerli test net

constants/contractMappingResponse.ts

@@ -0,0 +1,8 @@
+import { BigNumber } from "ethers";
+
+type ContractMappingResponse = {
+    isData: boolean;
+    value: BigNumber;
+};
+
+export default ContractMappingResponse;