Invite codes

web/src/components/playing/InviteLink.tsx

@@ -1,11 +1,16 @@
 import { Flex, Text, useClipboard } from "@chakra-ui/react";
 import { Session, Token } from "../../types";
 import { LinkIcon } from "@chakra-ui/icons";
+import { useGameContext } from "../../contexts/GameContext";
+import { getLocalStorageInviteCodeKey, getLocalStorageItem } from "../../utils/localStorage";
 
 const InviteLink = ({ session, token }: { session: Session; token: Token }) => {
+  const { contractAddress } = useGameContext();
+  const inviteCodeKey = getLocalStorageInviteCodeKey(contractAddress, String(session.sessionID));
+  const inviteCode = getLocalStorageItem(inviteCodeKey);
   const path = `${window.location.href}?session=${session.sessionID}&invitedBy=${encodeURIComponent(
     token.name,
-  )}`;
+  )}${inviteCode ? "&inviteCode=" : ""}${inviteCode ? inviteCode : ""}`;
   const { onCopy, hasCopied } = useClipboard(path);
   return (
     <Flex direction={"column"} gap={"30px"} alignItems={"center"} mx={"10px"}>

web/src/components/sessions/SessionView3.tsx

@@ -43,9 +43,10 @@ const SessionView3 = ({ session }: { session: Session }) => {
           reject(new Error(`Account address isn't set`));
         });
       }
+      const signature = "0x";
       return sendTransactionWithEstimate(
         web3ctx.account,
-        gameContract.methods.joinSession(sessionID, tokenAddress, token.id),
+        gameContract.methods.joinSession(sessionID, tokenAddress, token.id, signature),
       );
     },
     {
@@ -161,7 +162,7 @@ const SessionView3 = ({ session }: { session: Session }) => {
           </Flex>
         ) : (
           <>
-            {session.progress === 2 && (
+            {session.progress === 2 && !session.requiresSignature && (
               <button className={globalStyles.joinButton} onClick={handleClick}>
                 {joinSession.isLoading ? <Spinner /> : "join as pitcher"}
               </button>
@@ -180,7 +181,7 @@ const SessionView3 = ({ session }: { session: Session }) => {
           </Flex>
         ) : (
           <>
-            {session.progress === 2 && (
+            {session.progress === 2 && !session.requiresSignature && (
               <button className={globalStyles.joinButton} onClick={handleClick}>
                 {joinSession.isLoading ? <Spinner /> : "join as batter"}
               </button>

web/src/components/sessions/SessionsView.tsx

@@ -58,10 +58,13 @@ const SessionsView = () => {
       const invitedBy = Array.isArray(router.query.invitedBy)
         ? router.query.invitedBy[0]
         : router.query.invitedBy;
+      const inviteCode = Array.isArray(router.query.inviteCode)
+        ? router.query.inviteCode[0]
+        : router.query.inviteCode;
       const invitedTo = Number(
         Array.isArray(router.query.session) ? router.query.session[0] : router.query.session,
       );
-      updateContext({ invitedBy, invitedTo });
+      updateContext({ invitedBy, invitedTo, inviteCode });
       router.push("/", undefined, { shallow: true });
       onOpen();
     }
@@ -81,6 +84,7 @@ const SessionsView = () => {
       for (let i = oldestSessionNumber; i <= numSessions; i += 1) {
         callData.push(gameContract.methods.sessionProgress(i).encodeABI());
         callData.push(gameContract.methods.getSession(i).encodeABI());
+        callData.push(gameContract.methods.SessionRequiresSignature(i).encodeABI());
       }
       const queries = callData.map((callData) => {
         return {
@@ -90,10 +94,13 @@ const SessionsView = () => {
       });
 
       const multicallRes = await multicallContract.methods.tryAggregate(false, queries).call();
-
-      const res: { progress: string; session: string }[] = [];
-      for (let i = 0; i < multicallRes.length; i += 2) {
-        res.push({ progress: multicallRes[i][1], session: multicallRes[i + 1][1] });
+      const res: { progress: string; session: string; requiresSignature: boolean }[] = [];
+      for (let i = 0; i < multicallRes.length; i += 3) {
+        res.push({
+          progress: multicallRes[i][1],
+          session: multicallRes[i + 1][1],
+          requiresSignature: !!Number(multicallRes[i + 2][1]),
+        });
       }
       const decodedRes = res.map((data) => {
         const sessionRaw = web3ctx.web3.eth.abi.decodeParameters(
@@ -106,6 +113,7 @@ const SessionsView = () => {
           pitcherTokenID: sessionRaw.pitcherNFT.tokenID,
           batterAddress: sessionRaw.batterNFT.nftAddress,
           batterTokenID: sessionRaw.batterNFT.tokenID,
+          requiresSignature: data.requiresSignature,
         };
         return {
           progress: Number(data.progress),
@@ -199,6 +207,7 @@ const SessionsView = () => {
           didBatterCommit: session.session.didBatterCommit,
           didBatterReveal: session.session.didBatterReveal,
           outcome: Number(session.session.outcome),
+          requiresSignature: session.session.requiresSignature,
         };
       });
 

web/src/components/tokens/OwnedTokens.module.css

@@ -155,4 +155,28 @@
     line-height: normal;
     height: 26px;
     min-width: 144px;
-}
+}
+
+.createSessionButton {
+    display: flex;
+    width: 100%;
+    height: 40px;
+    padding: 6px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border: 1px solid #00A341;
+    background: #1B1B1B;
+    color: #00A341;
+    text-align: center;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+.createSessionButton:hover {
+    font-weight: 700;
+}
+