Merge branch 'add-minter-and-mint' into dev

z-korp · Nov 10, 2024 · d35a0a1 · d35a0a1
2 parents d46d828 + 0e91c25
commit d35a0a1
Show file tree

Hide file tree

Showing 10 changed files with 8,824 additions and 9,746 deletions.
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
diff --git a/client/public/assets/lords-token.png b/client/public/assets/lords-token.png
diff --git a/client/src/ui/actions/Start.tsx b/client/src/ui/actions/Start.tsx
@@ -104,6 +104,10 @@ export const Start: React.FC<StartProps> = ({ mode, handleGameMode }) => {
           ]);
           const balance = BigInt(ret_erc20.toString());
           if (balance < settings.game_price && erc20Contract) {
+            if (import.meta.env.VITE_PUBLIC_DEPLOY_TYPE === "mainnet") {
+              console.log("No funds to sign tx");
+              return;
+            }
             console.log("Not enough balance, trying to claim faucet");
 
             await createFaucetClaimHandler(account as Account, () => {

diff --git a/client/src/ui/components/Balance.tsx b/client/src/ui/components/Balance.tsx
@@ -4,13 +4,18 @@ import { useReadContract } from "@starknet-react/core";
 import { useState, useEffect, useMemo } from "react";
 import { useMediaQuery } from "react-responsive";
 import { BlockTag } from "starknet";
+import LordsToken from "/assets/lords-token.png";
 
 interface BalanceProps {
   address: string;
   token_address: `0x${string}`;
   symbol?: string;
 }
 
+const symbolImages: { [key: string]: string } = {
+  LORDS: LordsToken,
+};
+
 const FixedWidthDigit: React.FC<{ value: string }> = ({ value }) =>
   value === "." ? (
     <span>.</span>
@@ -20,9 +25,7 @@ const FixedWidthDigit: React.FC<{ value: string }> = ({ value }) =>
 
 const Balance = ({ address, token_address, symbol = "ETH" }: BalanceProps) => {
   const isMdOrLarger = useMediaQuery({ query: "(min-width: 768px)" });
-  const [targetBalance, setTargetBalance] = useState<number | undefined>(
-    undefined,
-  );
+  const [targetBalance, setTargetBalance] = useState<number>(0);
 
   // useBalance doesn't work on Katana, don't know why
   const { data, isError, isLoading, error } = useReadContract({
@@ -34,7 +37,6 @@ const Balance = ({ address, token_address, symbol = "ETH" }: BalanceProps) => {
     blockIdentifier: BlockTag.PENDING,
     refetchInterval: 2000,
   });
-
   useEffect(() => {
     if (data !== undefined) {
       const formattedBalance = parseFloat(
@@ -60,9 +62,21 @@ const Balance = ({ address, token_address, symbol = "ETH" }: BalanceProps) => {
     }
   }, [isError, error]);
 
-  if (isLoading) return <div>Loading ...</div>;
-  if (isError || !data) return <div></div>;
-  if (displayBalance == undefined) return <div></div>;
+  if (isError || !data) {
+    return (
+      <div className="text-xs font-semibold md:font-normal flex items-center bg-secondary">
+        0 {symbol}
+      </div>
+    );
+  }
+
+  if (displayBalance == undefined) {
+    return (
+      <div className="min-w-[100px] min-h-[20px] bg-secondary">
+        Calculating...
+      </div>
+    );
+  }
 
   // Format the balance string
   const balanceString = displayBalance
@@ -77,25 +91,24 @@ const Balance = ({ address, token_address, symbol = "ETH" }: BalanceProps) => {
   // Split the balance string into characters
   const balanceChars = balanceString.split("");
 
+  const symbolImage = symbolImages[symbol];
+
   return (
-    <div className="text-xs font-semibold md:font-normal flex items-center">
+    <div className="text-xs font-semibold md:font-normal flex items-center bg-secondary">
       {balanceChars.map((char, index) => (
         <FixedWidthDigit key={index} value={char} />
       ))}{" "}
-      <span className="ml-1">{symbol}</span>
+      {symbolImage ? (
+        <img src={symbolImage} alt={symbol} className="ml-2 h-8 w-8" />
+      ) : (
+        <span className="ml-1">{symbol}</span>
+      )}
     </div>
   );
 };
 
 export default Balance;
 
-/*
-MIT License
-
-[Include the license text here as needed]
-
-*/
-
 function formatUnits(
   value: bigint,
   decimals: number,

diff --git a/client/src/ui/components/DesktopHeader.tsx b/client/src/ui/components/DesktopHeader.tsx
@@ -45,9 +45,9 @@ const DesktopHeader = () => {
       </div>
       <div className="flex flex-col gap-4 items-center md:flex-row">
         {!!player && (
-          <div className="flex gap-3">
+          <div className="flex gap-4 flex-1 justify-end px-4 w-2/4">
+            {" "}
             <HeaderBalance />
-            <HeaderNftBalance />
             <ProfilePage wfit />
             <Controller />
             <LevelIndicator currentXP={player.points} />

diff --git a/client/src/ui/components/HeaderBalance.tsx b/client/src/ui/components/HeaderBalance.tsx
@@ -8,17 +8,26 @@ const { VITE_PUBLIC_GAME_TOKEN_ADDRESS, VITE_PUBLIC_GAME_TOKEN_SYMBOL } =
 const HeaderBalance = React.memo(() => {
   const { account } = useAccountCustom();
 
-  if (account) {
-    return (
-      <div className="rounded-lg items-center flex gap-1 bg-secondary text-secondary-foreground shadow-sm md:gap-2 px-2 md:px-3 py-1 h-[36px]">
+  if (!account) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-lg items-center flex gap-1 bg-secondary text-secondary-foreground shadow-sm md:gap-2 px-2 md:px-3 py-1 h-[36px]">
+      <Balance
+        address={account?.address}
+        token_address={VITE_PUBLIC_GAME_TOKEN_ADDRESS}
+        symbol={VITE_PUBLIC_GAME_TOKEN_SYMBOL}
+      />
+      <div className="ml-4">
         <Balance
           address={account?.address}
-          token_address={VITE_PUBLIC_GAME_TOKEN_ADDRESS}
-          symbol={VITE_PUBLIC_GAME_TOKEN_SYMBOL}
+          token_address={import.meta.env.VITE_PUBLIC_LORDS_CONTRACT}
+          symbol="Games"
         />
       </div>
-    );
-  }
+    </div>
+  );
 });
 
 HeaderBalance.displayName = "HeaderBalance";

diff --git a/client/src/ui/components/HeaderNftBalance.tsx b/client/src/ui/components/HeaderNftBalance.tsx
@@ -10,7 +10,7 @@ const HeaderNftBalance = React.memo(() => {
   if (account) {
     return (
       <div className="rounded-lg items-center flex gap-1 bg-secondary text-secondary-foreground shadow-sm md:gap-2 px-2 md:px-3 py-1 h-[36px] text-sm">
-        <p>{`${balance} credits`}</p>
+        <p>{`${balance} Credits`}</p>
       </div>
     );
   }

diff --git a/client/src/ui/components/MobileHeader.tsx b/client/src/ui/components/MobileHeader.tsx
@@ -1,4 +1,4 @@
-import { faBars, faWallet } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faCoins, faWallet } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   Drawer,
@@ -7,6 +7,15 @@ import {
   DrawerHeader,
   DrawerTitle,
 } from "../elements/drawer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../elements/dropdown-menu";
+
 import { Leaderboard } from "../modules/Leaderboard";
 import { ProfilePage } from "../modules/ProfilePage";
 import AccountDetails from "./AccountDetails";
@@ -87,8 +96,20 @@ const MobileHeader = () => {
         <div className="flex w-full gap-2 justify-end">
           {!!player && account ? (
             <div className="flex gap-3 items-center">
-              <HeaderBalance />
-              <HeaderNftBalance />
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <Button variant={"outline"}>
+                    <FontAwesomeIcon icon={faCoins} />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuLabel>Assets</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <HeaderBalance />
+                  <DropdownMenuSeparator />
+                  <HeaderNftBalance />
+                </DropdownMenuContent>
+              </DropdownMenu>
               <ProfilePage wfit />
               <Controller />
               <LevelIndicator currentXP={player.points} />