Implementing design

web/pages/_document.tsx

@@ -11,7 +11,14 @@ export default function Document() {
         />
         <link href="https://fonts.googleapis.com/css?family=Space Grotesk" rel="stylesheet" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter&family=Lora&display=swap"
+          rel="stylesheet"
+          media="screen"
+          href="https://fontlibrary.org//face/segment7"
+          type="text/css"
+        />
+
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
           rel="stylesheet"
         />
         <link href="https://fonts.cdnfonts.com/css/cascadia-code" rel="stylesheet" />

web/src/components/SecondStep.tsx → web/src/components/ConnectingView.tsx

@@ -1,13 +1,13 @@
-import styles from "./SecondStep.module.css";
-import globalStyles from "./OwnedTokens.module.css";
+import styles from "./ConnectingView.module.css";
+import globalStyles from "./tokens/OwnedTokens.module.css";
 import { Flex, Text } from "@chakra-ui/react";
 import { useContext, useEffect } from "react";
 import Web3Context from "../contexts/Web3Context/context";
 import { supportedChains } from "../types";
 import { useGameContext } from "../contexts/GameContext";
 import { chainByChainId } from "../contexts/Web3Context";
 
-const SecondStep = ({ nextStep }: { nextStep: () => void }) => {
+const ConnectingView = ({ nextStep }: { nextStep: () => void }) => {
   const web3Provider = useContext(Web3Context);
   const { chainId } = useGameContext();
   useEffect(() => {
@@ -42,4 +42,4 @@ const SecondStep = ({ nextStep }: { nextStep: () => void }) => {
   );
 };
 
-export default SecondStep;
+export default ConnectingView;

web/src/components/GlobalStyles.module.css

@@ -29,6 +29,7 @@
     font-style: normal;
     font-weight: 500;
     line-height: normal;
+    height: 31px;
 }
 
 .commitButton:disabled {
@@ -37,4 +38,17 @@
     background: #00A341;
 }
 
+.gradientText {
+    background: -webkit-linear-gradient(180deg, #F1E3BF, #D9DFB3, #00B94A);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: #FFF;
+    text-align: center;
+    font-family: Inter;
+    font-size: 24px;
+    font-style: italic;
+    font-weight: 700;
+    line-height: normal;
+}
+
 

web/src/components/Playing.tsx

@@ -1,9 +1,9 @@
 import styles from "./Playing.module.css";
 import { Flex, Text } from "@chakra-ui/react";
 import { useGameContext } from "../contexts/GameContext";
-import SessionsView from "./SessionsView";
+import SessionsView from "./sessions/SessionsView";
 import { useEffect } from "react";
-import PlayView from "./PlayView";
+import PlayView from "./playing/PlayView";
 
 const Playing = () => {
   const { selectedSession, updateContext, selectedToken } = useGameContext();

web/src/components/Signing.ts

@@ -1,3 +1,12 @@
+import { CHAIN_ID, GAME_CONTRACT } from "../constants";
+
+const domain = {
+  name: "Fullcount",
+  version: "0.0.2",
+  chainId: String(CHAIN_ID),
+  verifyingContract: String(GAME_CONTRACT),
+};
+
 export async function signPitch(
   account: string,
   provider: any,
@@ -10,12 +19,7 @@ export async function signPitch(
   if (!account) throw new Error("signAccessToken: account must be defined");
 
   const msgParams = JSON.stringify({
-    domain: {
-      name: "Fullcount",
-      version: "0.0.2",
-      chainId: "80001",
-      verifyingContract: "0x83930B5AaB9Fd82022De284F016f5C53e4749C9F",
-    },
+    domain,
     message: {
       nonce,
       speed,
@@ -72,12 +76,7 @@ export async function signSwing(
   if (!account) throw new Error("signAccessToken: account must be defined");
 
   const msgParams = JSON.stringify({
-    domain: {
-      name: "Fullcount",
-      version: "0.0.2",
-      chainId: "80001",
-      verifyingContract: "0x83930B5AaB9Fd82022De284F016f5C53e4749C9F",
-    },
+    domain,
     message: {
       nonce,
       kind,