Merge pull request #17 from realm-of-ra/develop

Merge develop into master

client/package.json

@@ -42,7 +42,8 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1",
     "rxjs": "^7.8.1",
-    "starknet": "^6.1.5",
+    "starknet": "^6.8.0",
+    "starknetid.js": "^3.2.0",
     "starknetkit": "^1.1.9",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",

client/src/App.tsx

@@ -1,19 +1,37 @@
-import React from "react"
-
 import { BrowserRouter, Routes, Route } from "react-router-dom"
 import Home from "./pages/Home"
 import Leaderboard from "./pages/Leaderboard"
 import { Provider as JotaiProvider } from "jotai";
+import { InjectedConnector } from "starknetkit/injected";
+import { ArgentMobileConnector } from "starknetkit/argentMobile";
+import { WebWalletConnector } from "starknetkit/webwallet";
+import { mainnet } from "@starknet-react/chains";
+import { StarknetConfig, publicProvider } from "@starknet-react/core";
 
 export default function App() {
+  const chains = [
+    mainnet
+  ]
+  const connectors = [
+    new InjectedConnector({ options: { id: "braavos", name: "Braavos" } }),
+    new InjectedConnector({ options: { id: "argentX", name: "Argent X" } }),
+    new WebWalletConnector({ url: "https://web.argent.xyz" }),
+    new ArgentMobileConnector(),
+  ]
   return (
-    <JotaiProvider>
-      <BrowserRouter>
-        <Routes>
-          <Route index element={<Home />} />
-          <Route path="/leaderboard" element={<Leaderboard />} />
-        </Routes>
-      </BrowserRouter>
-    </JotaiProvider>
+    <StarknetConfig
+      chains={chains}
+      provider={publicProvider()}
+      connectors={connectors}
+    >
+      <JotaiProvider>
+        <BrowserRouter>
+          <Routes>
+            <Route index element={<Home />} />
+            <Route path="/leaderboard" element={<Leaderboard />} />
+          </Routes>
+        </BrowserRouter>
+      </JotaiProvider>
+    </StarknetConfig>
   )
 }

client/src/atom/atoms.ts

@@ -1,3 +1,5 @@
 import { atom } from 'jotai'
 
 export const isPlaying = atom(false)
+export const profileData = atom({})
+export const address = atom('')

client/src/lib/utils.ts

@@ -5,6 +5,9 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-export function truncateString(str: string): string {
-  return str.length > 6 ? str.slice(0, 6) + "..." + str.slice(-6) : str;
+export function truncateString(str?: string) {
+  if (str) {
+    return str.length > 6 ? str.slice(0, 6) + "..." + str.slice(-6) : str;
+
+  }
 }

client/src/pages/Leaderboard.tsx

@@ -1,5 +1,4 @@
-
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 
 import { Button } from "@material-tailwind/react";
 import eniola from "../assets/eniola.png";
@@ -12,24 +11,42 @@ import { Card, Typography } from "@material-tailwind/react";
 import clsx from "clsx";
 import { stats, table_head } from "@/lib/constants";
 import { useAtom } from "jotai";
-import { isPlaying as isPlayingAtom } from "../atom/atoms";
+import { isPlaying as isPlayingAtom, profileData as profileDataAtom, address as addressAtom } from "../atom/atoms";
 import audio from "../music/audio_1.mp3";
+import { useProvider } from "@starknet-react/core";
+import { StarknetIdNavigator } from "starknetid.js";
+import { constants, type StarkProfile } from "starknet";
 
 export default function Leaderboard() {
     const [connection, setConnection] = useState<ConnectedStarknetWindowObject>();
-    const [address, setAddress] = useState<string>();
+    const [address, setAddress] = useAtom(addressAtom);
+    const [profileData, setProfileData] = useAtom<StarkProfile>(profileDataAtom)
+
+    const { provider } = useProvider();
+    const starknetIdNavigator = new StarknetIdNavigator(
+        provider,
+        constants.StarknetChainId.SN_MAIN
+    );
+
     const connectWallet = async () => {
-        await connect({ modalMode: "neverAsk" })
-        const { wallet } = await connect({ modalMode: "canAsk" })
-        if (wallet && wallet.isConnected) {
-            setConnection(wallet);
-            setAddress(wallet.selectedAddress);
+        if (connection?.isConnected) {
+            disconnectWallet();
+        }
+        else {
+            const { wallet } = await connect({ modalMode: "canAsk" })
+            if (wallet && wallet.isConnected) {
+                setConnection(wallet);
+                setAddress(wallet.selectedAddress);
+                const starkProfile = await starknetIdNavigator.getProfileData(wallet.selectedAddress);
+                setProfileData(starkProfile)
+            }
         }
     }
     const disconnectWallet = async () => {
         await disconnect();
         setConnection(undefined);
         setAddress('');
+        setProfileData({});
     }
     const [isPlaying, setPlaying] = useAtom(isPlayingAtom);
     const audioRef = useRef(new Audio(audio));
@@ -44,6 +61,9 @@ export default function Leaderboard() {
         } else {
             audioRef.current.pause();
         }
+        if (!connection?.isConnected) {
+            connectWallet();
+        }
         return () => {
             audioRef.current.pause();
         };
@@ -55,18 +75,22 @@ export default function Leaderboard() {
         <div className="bg-[#0F1116] min-h-screen h-full w-full flex flex-col items-center">
             <nav className="flex flex-row items-center justify-between w-full">
                 <div className="flex-1 w-full -mr-10">
-                    <div className="flex flex-row space-x-2.5 items-center justify-end">
-                        <div>
-                            <h3 className="text-2xl text-right text-white">Eniola</h3>
-                            <h4 className="text-sm text-[#F58229] text-right">Level 6</h4>
-                        </div>
-                        <div className="p-1 rounded-full bg-gradient-to-r bg-[#15181E] from-[#2E323A] via-[#4B505C] to-[#1D2026] relative">
-                            <img src={eniola} width={60} height={60} alt="Eniola" className="rounded-full" />
-                            <div className="absolute bottom-0 right-0 h-6 w-6 bg-[#15171E] rounded-full flex flex-col items-center justify-center">
-                                <div className="h-4 w-4 bg-[#00FF57] rounded-full"></div>
+                    {
+                        profileData.name != undefined && (
+                            <div className="flex flex-row space-x-2.5 items-center justify-end">
+                                <div>
+                                    <h3 className="text-2xl text-right text-white">{profileData.name ? profileData.name : truncateString(address)}</h3>
+                                    <h4 className="text-sm text-[#F58229] text-right">Level 6</h4>
+                                </div>
+                                <div className="p-1 rounded-full bg-gradient-to-r bg-[#15181E] from-[#2E323A] via-[#4B505C] to-[#1D2026] relative">
+                                    <img src={profileData.profilePicture ? profileData.profilePicture : eniola} width={60} height={60} alt="Eniola" className="rounded-full" />
+                                    <div className="absolute bottom-0 right-0 h-6 w-6 bg-[#15171E] rounded-full flex flex-col items-center justify-center">
+                                        <div className="h-4 w-4 bg-[#00FF57] rounded-full" />
+                                    </div>
+                                </div>
                             </div>
-                        </div>
-                    </div>
+                        )
+                    }
                 </div>
                 <div className="h-[100px] w-[800px]">
                     <div className="bg-[url('./assets/leaderboard-top.png')] w-[800px] h-[100px] bg-contain bg-no-repeat" />
@@ -82,7 +106,7 @@ export default function Leaderboard() {
                                     <div className="px-3.5 py-4 bg-[#272A32] rounded-tl-lg rounded-bl-lg">
                                         <img src={connection.icon} className="w-6 h-6" />
                                     </div>
-                                    <div className="px-3.5 py-5 bg-[#171922] rounded-tr-lg rounded-br-lg"><p className="text-white">{truncateString(address || '')}</p></div>
+                                    <div className="px-3.5 py-5 bg-[#171922] rounded-tr-lg rounded-br-lg"><p className="text-white">{truncateString(address)}</p></div>
                                 </div>
                             </Button> : <Button className='w-40 bg-[#F58229] rounded-md' onClick={connectWallet}>
                                 Connect Wallet

client/tsconfig.json

@@ -3,9 +3,9 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
+    "module": "ES2015",
     "skipLibCheck": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,

client/yarn.lock

@@ -6509,15 +6509,15 @@ sponge-case@^1.0.1:
   dependencies:
     tslib "^2.0.3"
 
-starknet-types@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/starknet-types/-/starknet-types-0.0.4.tgz#1f92cdde4b2989e1da743c24827960b50057914b"
-  integrity sha512-PklqFeSp9gMqbzW5IbO8l1s3xsNZYkNG/x/gsytgYCIl6H/cqiwCZolVTneyTibvrdHOQ8kP3PXwfdsypudYqw==
+"starknet-types-07@npm:starknet-types@^0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/starknet-types/-/starknet-types-0.7.2.tgz#2a1be2392e6e568484afabdc1e83411b5105713b"
+  integrity sha512-r3JJ0rrK0g3FnVRGcFiLY+9YT5WZgxB4TKBfR44wYGevHtKEM6BM5B+Gn1eou1zV7xEAwz3GpmvLSQTUAzDhsw==
 
-starknet@^6.1.5:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/starknet/-/starknet-6.7.0.tgz#004111004d93efd4a5a9da79bd8a97f8d7d50409"
-  integrity sha512-8NMedKBfkg/oZUgTYNw9lKeNoNYakL/Roah2HwKzrVyvDxBs0arrNrR8No8+tTq0wQg0HGu1w+JIObynjHAK3w==
+starknet@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/starknet/-/starknet-6.8.0.tgz#d7bb1dc1470035f31fe1bfd68e3aee5cbb190c10"
+  integrity sha512-HNGgTomnEYbx8UiHNX9vTpa7tg7a1+BHW3vmqfnoejc0L/XjZ6N6h56S18nf8ZGDbe//yfaqk50eGqTaw2oR0g==
   dependencies:
     "@noble/curves" "~1.4.0"
     "@scure/base" "~1.1.3"
@@ -6527,10 +6527,15 @@ starknet@^6.1.5:
     isomorphic-fetch "^3.0.0"
     lossless-json "^4.0.1"
     pako "^2.0.4"
-    starknet-types "^0.0.4"
+    starknet-types-07 "npm:starknet-types@^0.7.2"
     ts-mixer "^6.0.3"
     url-join "^4.0.1"
 
+starknetid.js@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/starknetid.js/-/starknetid.js-3.2.0.tgz#4b39af681402abc967ab3aa8c40d2d5056e00ff2"
+  integrity sha512-I0gJlNegP+DO3JPjSSfUdflqPah6oUoIUBMl33h1JMwrWSfVA+cPajze7fwRg2xNuJOadI2eeMWI7Q+OdLa+rg==
+
 starknetkit@^1.1.9:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/starknetkit/-/starknetkit-1.1.9.tgz#92ff7536b2bdc36017e4b16067f4c5ba264b4981"

contracts/manifests/dev/abis/base/contracts/mancala_systems_actions_actions.json

@@ -81,6 +81,46 @@
           }
         ],
         "state_mutability": "view"
+      },
+      {
+        "type": "function",
+        "name": "play_turn",
+        "inputs": [
+          {
+            "name": "game_id",
+            "type": "core::integer::u32"
+          },
+          {
+            "name": "player",
+            "type": "core::starknet::contract_address::ContractAddress"
+          },
+          {
+            "name": "pit",
+            "type": "core::integer::u8"
+          }
+        ],
+        "outputs": [],
+        "state_mutability": "view"
+      },
+      {
+        "type": "function",
+        "name": "capture",
+        "inputs": [
+          {
+            "name": "game_id",
+            "type": "core::integer::u32"
+          },
+          {
+            "name": "player",
+            "type": "core::starknet::contract_address::ContractAddress"
+          },
+          {
+            "name": "pit",
+            "type": "core::integer::u8"
+          }
+        ],
+        "outputs": [],
+        "state_mutability": "view"
       }
     ]
   },

contracts/manifests/dev/base/contracts/mancala_systems_actions_actions.toml

@@ -1,6 +1,6 @@
 kind = "DojoContract"
-class_hash = "0x442d645452a318879e124c7d77b1218fd99cac6bff44b2980c142d18088e6bd"
-original_class_hash = "0x442d645452a318879e124c7d77b1218fd99cac6bff44b2980c142d18088e6bd"
+class_hash = "0x489a375c071fe3806ea0abb19acb6d0266c333ce4487a2811dab123ad3d2cdd"
+original_class_hash = "0x489a375c071fe3806ea0abb19acb6d0266c333ce4487a2811dab123ad3d2cdd"
 base_class_hash = "0x0"
 abi = "manifests/dev/abis/base/contracts/mancala_systems_actions_actions.json"
 reads = []

contracts/src/models.cairo

@@ -1,4 +1,4 @@
-mod board;
+// mod board;
 mod game;
 mod moves;
 mod player;

contracts/src/models/game.cairo

@@ -30,3 +30,31 @@ impl GameTurnImpl of GameTurnTrait {
         }
     }
 }
+
+
+// todo this is just the game model base. Something that must be refined
+#[derive(Model, Copy, Drop, Serde)]
+struct MancalaGame {
+    #[key]
+    game_id: u128,
+    player_one: ContractAddress,
+    player_two: ContractAddress,
+    current_player: ContractAddress,
+    winner: ContractAddress,
+    score: u8,
+    is_finished: bool,
+    p1_pit1: u8,
+    p1_pit2: u8,
+    p1_pit3: u8,
+    p1_pit4: u8,
+    p1_pit5: u8,
+    p1_pit6: u8,
+    p2_pit1: u8,
+    p2_pit2: u8,
+    p2_pit3: u8,
+    p2_pit4: u8,
+    p2_pit5: u8,
+    p2_pit6: u8,
+    p1_store: u256,
+    p2_store: u256
+}

contracts/src/models/utils.cairo

@@ -0,0 +1,12 @@
+#[derive(Copy, Drop, Print, Serde, PartialEq)]
+enum Winner {
+    A,
+    B,
+    Draw
+}
+
+#[derive(Copy, Drop, Print, Serde, PartialEq)]
+enum Status {
+    Running,
+    Finished: Winner
+}

contracts/src/systems/actions.cairo

@@ -3,6 +3,8 @@ use starknet::ContractAddress;
 #[dojo::interface]
 trait IActions {
     fn spawn(player_one: ContractAddress, player_two: ContractAddress) -> u32;
+    fn play_turn(game_id: u32, player: ContractAddress, pit: u8);
+    fn capture(game_id: u32, player: ContractAddress, pit: u8);
 }
 
 #[dojo::contract]
@@ -37,5 +39,8 @@ mod actions {
 
             game_id
         }
+
+        fn play_turn(game_id: u32, player: ContractAddress, pit: u8){}
+        fn capture(game_id: u32, player: ContractAddress, pit: u8){}
     }
 }

contracts/src/tests/units.cairo

@@ -4,7 +4,7 @@ mod tests {
   use dojo::test_utils::{spawn_test_world, deploy_contract};
   use dojo::world::{IWorldDispatcher, IWorldDispatcherTrait};
   use mancala::systems::actions::{actions, IActionsDispatcher, IActionsDispatcherTrait};
-  use mancala::models::player::{Player, PlayerSide};
+  use mancala::models::player::{Player, PlayerSide, player};
 
   fn setup_world() -> (IWorldDispatcher, IActionsDispatcher) {
     let mut models = array![