gol2 new version

.env.example

@@ -4,8 +4,10 @@ BASE_URL=/
 
 # Goerli
 CONTRACT_ADDRESS=0x06dc4bd1212e67fd05b456a34b24a060c45aad08ab95843c42af31f86c7bd093
+INFURA_API_KEY=
 USE_MAINNET=false
 
 # Mainnet
 CONTRACT_ADDRESS=0x06a05844a03bb9e744479e3298f54705a35966ab04140d3d8dd797c1f6dc49d0
+INFURA_API_KEY=
 USE_MAINNET=true

.eslintrc.js

@@ -21,6 +21,9 @@ module.exports = {
     '@typescript-eslint/no-non-null-assertion': ['off'],
     '@typescript-eslint/no-invalid-void-type': ['off'],
     '@typescript-eslint/no-unsafe-member-access': ['off'],
+    "@typescript-eslint/no-unsafe-assignment": ["off"],
+    "@typescript-eslint/no-unsafe-call": ["off"],
+    "@typescript-eslint/no-unsafe-argument": ["off"],
   },
   // We're using vitest which has a very similar API to jest
   // (so the linting plugins work nicely), but we have to

.github/workflows/miigration.yml

@@ -0,0 +1,29 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - 'update-starknet'
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      -
+        name: Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      -
+        name: Build and push
+        uses: docker/build-push-action@v3
+        with:
+          push: true
+          tags: yukilabs/gol2-app:update-starknet

.gitignore

@@ -20,3 +20,6 @@
 *.pem
 .DS_Store
 .idea
+
+# certificate files
+*.crt

.vscode/settings.json

@@ -28,5 +28,6 @@
     "activityBar.background": "#332B35",
     "titleBar.activeBackground": "#473C4B",
     "titleBar.activeForeground": "#FBFAFB"
-  }
+  },
+  "editor.formatOnSave": true
 }

app/components/Button.tsx

@@ -17,6 +17,8 @@ interface Props {
   readonly to?: LinkProps['to']
   readonly full?: boolean
   readonly tertiaryColor?: string
+  readonly color?: string
+  readonly disableCursor?: boolean
 }
 
 const StyledButton = styled.button<Props>`
@@ -83,7 +85,13 @@ const StyledButton = styled.button<Props>`
 
           ${p.disabled &&
           css`
-            pointer-events: none;
+            ${p.disableCursor
+              ? css`
+                  cursor: not-allowed;
+                `
+              : css`
+                  pointer-events: none;
+                `}
             background: ${p.theme.colors.buttonSecondary.disabledBackground};
             color: ${p.theme.colors.buttonSecondary.disabledColor};
             border: 1px solid transparent;
@@ -136,7 +144,13 @@ const StyledButton = styled.button<Props>`
           }
           ${p.disabled &&
           css`
-            pointer-events: none;
+            ${p.disableCursor
+              ? css`
+                  cursor: not-allowed;
+                `
+              : css`
+                  pointer-events: none;
+                `}
             background: ${p.theme.colors.buttonTertiary.disabledBackground};
             color: ${p.theme.colors.buttonTertiary.disabledColor};
           `}
@@ -185,6 +199,13 @@ const StyledButton = styled.button<Props>`
           ${p.disabled &&
           css`
             pointer-events: none;
+            ${p.disableCursor
+              ? css`
+                  cursor: not-allowed;
+                `
+              : css`
+                  pointer-events: none;
+                `}
             background: ${p.theme.colors.buttonPrimary.disabledBackground};
             color: ${p.theme.colors.buttonPrimary.disabledColor};
           `}
@@ -213,6 +234,8 @@ export default function Button({
   to,
   full,
   tertiaryColor,
+  color,
+  disableCursor,
 }: Props) {
   const Component = to != null ? StyledLink : StyledButton
 
@@ -235,9 +258,10 @@ export default function Button({
       to={to!}
       onClick={onClick}
       tertiaryColor={tertiaryColor}
+      disableCursor={disableCursor}
     >
       {renderIconSpinner()}
-      <T.Button>{label}</T.Button>
+      <T.Button color={color}>{label}</T.Button>
     </Component>
   )
 }

app/components/Dialogs.tsx

@@ -1,17 +1,15 @@
 import { useDialog } from '~/hooks/Dialog'
 
-import { useStarknet } from '@starknet-react/core'
-import { StarknetChainId } from 'starknet/dist/constants'
 import { useRootLoaderData } from '~/hooks/useRootLoaderData'
 
 import { HiOutlineX } from 'react-icons/hi'
 import Dialog from './Dialog/Dialog'
-import { getLibraryChainId } from '~/helpers/getLibraryChainId'
+import { useNetwork } from '@starknet-react/core'
 
 export default function Dialogs() {
   const [dialog, setDialog] = useDialog()
-  const { library } = useStarknet()
   const { env } = useRootLoaderData()
+  const { chain } = useNetwork()
 
   return (
     <>
@@ -21,8 +19,7 @@ export default function Dialogs() {
         description={
           <span>
             You are using GoL2 on {env.USE_MAINNET ? 'Mainnet' : 'Testnet'}. Please switch your wallet network from{' '}
-            {getLibraryChainId(library) === StarknetChainId.MAINNET ? 'Mainnet' : 'Testnet'} to{' '}
-            {env.USE_MAINNET ? 'Mainnet' : 'Testnet'}
+            {!chain.testnet ? 'Mainnet' : 'Testnet'} to {env.USE_MAINNET ? 'Mainnet' : 'Testnet'}
             <br /> <br /> Try refreshing the app if network used is not correctly detected by Gol2.
           </span>
         }

app/components/GameMode/Creator/GameHeader.tsx

@@ -1,20 +1,18 @@
-import { useStarknet, useStarknetInvoke } from '@starknet-react/core'
+import { useContractWrite } from '@starknet-react/core'
 import { useEffect, useState } from 'react'
 import { HiOutlineLightningBolt, HiOutlineX } from 'react-icons/hi'
 import { useLocalStorage } from 'react-use'
-import { StarknetChainId } from 'starknet4/dist/constants'
+
 import Button from '~/components/Button'
 import Dialog from '~/components/Dialog/Dialog'
 import Highlight from '~/components/Highlight'
 import Loader from '~/components/Loader'
 import { useDialog } from '~/hooks/Dialog'
 import { useHelpMessage } from '~/hooks/HelpMessage'
 import { useGameContract } from '~/hooks/useGameContract'
-import { useRootLoaderData } from '~/hooks/useRootLoaderData'
 import { useUser } from '~/hooks/useUser'
 import Header from '../Shared/Game/Header'
-import { getLibraryChainId } from '~/helpers/getLibraryChainId'
-
+import { useCheckNetwork } from '~/helpers/useCheckNetwork'
 interface Props {
   readonly isGameOver: boolean
   readonly gameId: string
@@ -26,15 +24,18 @@ export default function GameHeader({ gameId, isGameOver }: Props) {
   const [userCancelledDialogOpen, setUserCancelledDialogOpen] = useState(false)
   const { contract } = useGameContract()
   const user = useUser()
-  const { library } = useStarknet()
   const [, setDialog] = useDialog()
   const [helpMessage, setHelpMessage] = useHelpMessage()
-  const { env } = useRootLoaderData()
-  const currentStarknetChainId = env.USE_MAINNET ? StarknetChainId.MAINNET : StarknetChainId.TESTNET
-
-  const { data, loading, error, reset, invoke } = useStarknetInvoke({
-    contract,
-    method: 'evolve',
+  const { isCorrectNetwork } = useCheckNetwork()
+
+  const {
+    write,
+    data,
+    isLoading: loading,
+    isError: error,
+    reset,
+  } = useContractWrite({
+    calls: contract ? [contract.populateTransaction.evolve!(gameId)] : [],
   })
 
   useEffect(() => {
@@ -71,7 +72,7 @@ export default function GameHeader({ gameId, isGameOver }: Props) {
 
     const formData = new FormData()
 
-    formData.append('hash', data)
+    formData.append('hash', data.transaction_hash)
     formData.append('status', 'RECEIVED')
     formData.append('functionName', 'evolve')
     formData.append('functionCaller', user!.userId)
@@ -128,16 +129,14 @@ export default function GameHeader({ gameId, isGameOver }: Props) {
             onClick={() => {
               setHasClickedEvolveCreator(true)
 
-              if (getLibraryChainId(library) != currentStarknetChainId) {
+              if (!isCorrectNetwork) {
                 setDialog('WrongNetworkDialog')
                 return
               }
 
               if (user != null) {
                 // TODO test this
-                void invoke({
-                  args: [gameId],
-                })
+                write()
                 return
               }
               setHelpMessage('connectWalletMessage')

app/components/GameMode/Infinite/GameHeader.tsx

@@ -1,8 +1,7 @@
-import { useStarknet, useStarknetInvoke } from '@starknet-react/core'
+import { useContractWrite } from '@starknet-react/core'
 import { useEffect, useState } from 'react'
 import { HiOutlineLightningBolt, HiOutlineX } from 'react-icons/hi'
 import { useLocalStorage } from 'react-use'
-import { StarknetChainId } from 'starknet4/dist/constants'
 import Dialog from '~/components/Dialog/Dialog'
 import Highlight from '~/components/Highlight'
 import Loader from '~/components/Loader'
@@ -11,12 +10,11 @@ import { useDialog } from '~/hooks/Dialog'
 import { useHelpMessage } from '~/hooks/HelpMessage'
 import { useSelectedCell } from '~/hooks/SelectedCell'
 import { useGameContract } from '~/hooks/useGameContract'
-import { useRootLoaderData } from '~/hooks/useRootLoaderData'
 import { useUser } from '~/hooks/useUser'
 import Button from '../../Button'
 import TempOverlay from '../../TempOverlay'
 import Header from '../Shared/Game/Header'
-import { getLibraryChainId } from '~/helpers/getLibraryChainId'
+import { useCheckNetwork } from '~/helpers/useCheckNetwork'
 
 export default function GameHeader() {
   const [hasClickedEvolveInfinite, setHasClickedEvolveInfinite] = useLocalStorage('has-clicked-evolve-infinite', false)
@@ -26,15 +24,18 @@ export default function GameHeader() {
   const { contract } = useGameContract()
   const user = useUser()
   const [helpMessage, setHelpMessage] = useHelpMessage()
-  const { library } = useStarknet()
   const [, setDialog] = useDialog()
-  const { env } = useRootLoaderData()
-  const currentStarknetChainId = env.USE_MAINNET ? StarknetChainId.MAINNET : StarknetChainId.TESTNET
 
-  const { data, loading, error, reset, invoke } = useStarknetInvoke({
-    contract,
-    method: 'evolve',
+  const {
+    write,
+    data,
+    isLoading: loading,
+    error,
+    reset,
+  } = useContractWrite({
+    calls: contract ? [contract.populateTransaction.evolve!(INFINITE_GAME_GENESIS)] : [],
   })
+  const { isCorrectNetwork } = useCheckNetwork()
 
   useEffect(() => {
     if (hasClickedEvolveInfinite) return
@@ -69,7 +70,7 @@ export default function GameHeader() {
 
     const formData = new FormData()
 
-    formData.append('hash', data)
+    formData.append('hash', data.transaction_hash)
     formData.append('status', 'RECEIVED')
     formData.append('functionName', 'evolve')
     formData.append('functionCaller', user!.userId)
@@ -127,15 +128,13 @@ export default function GameHeader() {
             onClick={() => {
               setHasClickedEvolveInfinite(true)
 
-              if (getLibraryChainId(library) != currentStarknetChainId) {
+              if (!isCorrectNetwork) {
                 setDialog('WrongNetworkDialog')
                 return
               }
 
               if (user != null) {
-                void invoke({
-                  args: [INFINITE_GAME_GENESIS],
-                })
+                write()
                 return
               }
 

app/components/GameMode/Infinite/MintSnapshot.tsx

@@ -0,0 +1,64 @@
+import { HiOutlineX } from 'react-icons/hi'
+import Snapshot from '~/components/Snapshot/Snapshot'
+import * as SnapshotDialog from '~/components/Snapshot/SnapshotDialog'
+import { twitter } from '~/helpers/twitter'
+import { useRootLoaderData } from '~/hooks/useRootLoaderData'
+import { useUser } from '~/hooks/useUser'
+
+interface MintSnapshotProps {
+  snapshot: {
+    gameGeneration: string
+    gameState: string
+  }
+  onClose: () => void
+  onSnapshotMintCreated: () => void
+}
+export default function MintSnapshot({ snapshot, onClose, onSnapshotMintCreated }: MintSnapshotProps) {
+  const currentUser = useUser()
+  const { env } = useRootLoaderData()
+
+  return (
+    <SnapshotDialog.Dialog
+      open={!!snapshot.gameGeneration}
+      onOpenChange={(openState) => {
+        if (!openState) {
+          onClose()
+        }
+      }}
+    >
+      <SnapshotDialog.DialogContent>
+        <div style={{ position: 'absolute', top: 10, right: 5, zIndex: 100 }}>
+          <SnapshotDialog.DialogClose>
+            <HiOutlineX size={24} />
+          </SnapshotDialog.DialogClose>
+        </div>
+        <Snapshot
+          large
+          gameGeneration={snapshot.gameGeneration}
+          gameState={snapshot.gameState}
+          user={currentUser?.userId}
+          refreshPage={onSnapshotMintCreated}
+          initial={{
+            opacity: 0,
+            y: 10,
+          }}
+          animate={{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 0,
+            },
+          }}
+          onClickTwitter={() => {
+            open(
+              twitter(
+                `I own generation ${snapshot.gameGeneration} in @GoL2io 💪 #GoL2 #Starknet`,
+                `${env.BASE_URL!}/infinite/${snapshot.gameGeneration}`
+              )
+            )
+          }}
+        />
+      </SnapshotDialog.DialogContent>
+    </SnapshotDialog.Dialog>
+  )
+}