From d9f37a42b49b24fba1fbc3e2a56ccaa2890ddda9 Mon Sep 17 00:00:00 2001
From: Starknet Dev <starknetdev@gmail.com>
Date: Wed, 9 Oct 2024 19:41:21 +0100
Subject: [PATCH 1/3] - add beasts fetcher - add withdraw button for eth,
 lords, beasts, GTs and bloberts - add balances of these in the profile dialog
 - add test withdrawal for 1 beast

---
 ui/src/app/api/getBeasts.ts                   | 53 ++++++++++++++++
 .../app/components/profile/ProfileDialog.tsx  | 61 ++++++++++++++++---
 ui/src/app/lib/utils/syscalls.ts              | 48 +++++++++------
 ui/src/app/page.tsx                           | 23 +++++--
 4 files changed, 157 insertions(+), 28 deletions(-)
 create mode 100644 ui/src/app/api/getBeasts.ts

diff --git a/ui/src/app/api/getBeasts.ts b/ui/src/app/api/getBeasts.ts
new file mode 100644
index 000000000..efd1641ff
--- /dev/null
+++ b/ui/src/app/api/getBeasts.ts
@@ -0,0 +1,53 @@
+import { Network } from "@/app/hooks/useUIStore";
+import { networkConfig } from "@/app/lib/networkConfig";
+import { indexAddress } from "@/app/lib/utils";
+
+export const getBeasts = async (
+  owner: string,
+  beastsAddress: string,
+  network: Network
+): Promise<number[]> => {
+  const recursiveFetch: any = async (
+    beasts: any[],
+    nextPageKey: string | null
+  ) => {
+    let url = `${
+      networkConfig[network!].blastUrl
+    }/builder/getWalletNFTs?contractAddress=${beastsAddress}&walletAddress=${indexAddress(
+      owner
+    ).toLowerCase()}&pageSize=100`;
+
+    if (nextPageKey) {
+      url += `&pageKey=${nextPageKey}`;
+    }
+
+    try {
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const data = await response.json();
+      beasts = beasts.concat(
+        data?.nfts?.map((beast: any) => {
+          const tokenId = JSON.parse(beast.tokenId);
+          return Number(tokenId);
+        })
+      );
+
+      if (data.nextPageKey) {
+        return recursiveFetch(beasts, data.nextPageKey);
+      }
+    } catch (ex) {
+      console.log("error fetching beasts", ex);
+    }
+
+    return beasts;
+  };
+
+  let beastsData = await recursiveFetch([], null);
+
+  return beastsData;
+};
diff --git a/ui/src/app/components/profile/ProfileDialog.tsx b/ui/src/app/components/profile/ProfileDialog.tsx
index 8625c3c14..ff9149c78 100644
--- a/ui/src/app/components/profile/ProfileDialog.tsx
+++ b/ui/src/app/components/profile/ProfileDialog.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@/app/components/buttons/Button";
-import { CartridgeIcon } from "@/app/components/icons/Icons";
+import { CartridgeIcon, GiBruteIcon } from "@/app/components/icons/Icons";
 import useAdventurerStore from "@/app/hooks/useAdventurerStore";
 import useNetworkAccount from "@/app/hooks/useNetworkAccount";
 import { useQueriesStore } from "@/app/hooks/useQueryStore";
@@ -9,6 +9,9 @@ import { copyToClipboard, displayAddress, padAddress } from "@/app/lib/utils";
 import { NullAdventurer } from "@/app/types";
 import CartridgeConnector from "@cartridge/connector";
 import { useConnect, useDisconnect } from "@starknet-react/core";
+import Image from "next/image";
+import Eth from "public/icons/eth.svg";
+import Lords from "public/icons/lords.svg";
 import { useState } from "react";
 import { MdClose } from "react-icons/md";
 import { AccountInterface } from "starknet";
@@ -18,12 +21,16 @@ interface ProfileDialogprops {
     adminAccountAddress: string,
     account: AccountInterface,
     ethBalance: bigint,
-    lordsBalance: bigint
+    lordsBalance: bigint,
+    beasts: number[]
   ) => Promise<void>;
   ethBalance: bigint;
   lordsBalance: bigint;
   ethContractAddress: string;
   lordsContractAddress: string;
+  goldenTokens: number[];
+  beasts: number[];
+  blobertsData: any;
 }
 
 export const ProfileDialog = ({
@@ -32,6 +39,9 @@ export const ProfileDialog = ({
   lordsBalance,
   ethContractAddress,
   lordsContractAddress,
+  goldenTokens,
+  beasts,
+  blobertsData,
 }: ProfileDialogprops) => {
   const { setShowProfile, setNetwork } = useUIStore();
   const { disconnect } = useDisconnect();
@@ -57,6 +67,8 @@ export const ProfileDialog = ({
     setTimeout(() => setCopiedDelegate(false), 2000);
   };
 
+  const tournamentEnded = process.env.NEXT_PUBLIC_TOURNAMENT_ENDED === "true";
+
   return (
     <div className="fixed w-full h-full sm:w-3/4 sm:h-3/4 top-0 sm:top-1/8 bg-terminal-black border border-terminal-green flex flex-col items-center p-10 z-30">
       <button
@@ -68,7 +80,7 @@ export const ProfileDialog = ({
         <MdClose size={50} />
       </button>
       <div className="flex flex-col items-center h-full gap-5">
-        <div className="flex flex-col items-center">
+        <div className="flex flex-col gap-2 items-center">
           {checkCartridgeConnector(connector) && (
             <CartridgeIcon className="w-10 h-10 fill-current" />
           )}
@@ -90,10 +102,44 @@ export const ProfileDialog = ({
               {displayAddress(address!)}
             </h3>
           )}
+          <div className="flex flex-row gap-5">
+            <span className="flex flex-row items-center">
+              <Eth className="self-center w-6 h-6 fill-current mr-1" />
+              <p>{(Number(ethBalance) / 10 ** 18).toFixed(4).toString()}</p>
+            </span>
+            <span className="flex flex-row items-center">
+              <Lords className="self-center w-6 h-6 fill-current mr-1" />
+              <p>{(Number(lordsBalance) / 10 ** 18).toFixed(2).toString()}</p>
+            </span>
+            <span className="flex flex-row gap-1 items-center">
+              <Image
+                src={"/golden-token.png"}
+                alt="golden-tokens"
+                width={32}
+                height={32}
+              />
+              <p>{goldenTokens?.length}</p>
+            </span>
+            <span className="flex flex-row items-center">
+              <GiBruteIcon className="self-center w-8 h-8 fill-current mr-1 text-terminal-yellow" />
+              <p>{beasts.length}</p>
+            </span>
+            {tournamentEnded && (
+              <span className="flex flex-row gap-1 items-center">
+                <Image
+                  src={"/blobert.png"}
+                  alt="bloberts"
+                  width={32}
+                  height={32}
+                />
+                <p>{blobertsData?.tokens.length}</p>
+              </span>
+            )}
+          </div>
         </div>
         <div className="flex flex-col sm:flex-row items-center justify-center gap-5 sm:gap-2">
           {checkCartridgeConnector(connector) && (
-            <div className="flex flex-col items-center border border-terminal-green p-2 sm:p-5 text-center sm:gap-10 z-1 h-[200px] sm:h-[400px] sm:w-1/3">
+            <div className="flex flex-col items-center border border-terminal-green p-2 sm:p-5 text-center gap-5 sm:gap-10 z-1 h-[300px] sm:h-[400px] sm:w-1/3">
               <h2 className="text-terminal-green text-2xl sm:text-4xl uppercase m-0">
                 Withdraw
               </h2>
@@ -121,7 +167,7 @@ export const ProfileDialog = ({
                     (connector as unknown as CartridgeConnector).openMenu()
                   }
                 >
-                  Change Settings
+                  Set Delegate
                 </Button>
               </div>
               <Button
@@ -131,7 +177,8 @@ export const ProfileDialog = ({
                     controllerDelegate,
                     account!,
                     ethBalance,
-                    lordsBalance
+                    lordsBalance,
+                    beasts
                   )
                 }
                 disabled={
@@ -143,7 +190,7 @@ export const ProfileDialog = ({
             </div>
           )}
           {checkCartridgeConnector(connector) && (
-            <div className="flex flex-col items-center border border-terminal-green p-5 text-center sm:gap-5 z-1 sm:h-[400px] sm:w-1/3">
+            <div className="hidden sm:flex flex-col items-center border border-terminal-green p-5 text-center sm:gap-5 z-1 sm:h-[400px] sm:w-1/3">
               <h2 className="text-terminal-green text-2xl sm:text-4xl uppercase m-0">
                 Topup
               </h2>
diff --git a/ui/src/app/lib/utils/syscalls.ts b/ui/src/app/lib/utils/syscalls.ts
index e45a0d385..6f7b4bdb9 100644
--- a/ui/src/app/lib/utils/syscalls.ts
+++ b/ui/src/app/lib/utils/syscalls.ts
@@ -1508,7 +1508,8 @@ export function createSyscalls({
     adminAccountAddress: string,
     account: AccountInterface,
     ethBalance: bigint,
-    lordsBalance: bigint
+    lordsBalance: bigint,
+    beasts: number[]
   ) => {
     try {
       setIsWithdrawing(true);
@@ -1525,25 +1526,37 @@ export function createSyscalls({
         calldata: [adminAccountAddress, lordsBalance ?? "0x0", "0x0"],
       };
 
-      // const maxFee = getMaxFee(network!);
+      // Create a transaction for each beast ID
+      const transferBeastTxs = beasts.map((beastId) => ({
+        contractAddress: beastsContract?.address ?? "",
+        entrypoint: "transfer_from",
+        calldata: [
+          account.address,
+          adminAccountAddress,
+          beastId.toString(),
+          "0x0",
+        ],
+      }));
+
+      let calls = [];
+
+      // if (ethBalance > BigInt(0)) {
+      //   calls.push(transferEthTx);
+      // }
 
-      // const transferEthTx = {
-      //   contractAddress: ethContract?.address ?? "",
-      //   entrypoint: "transfer",
-      //   calldata: CallData.compile([
-      //     masterAccountAddress,
-      //     newEthBalance ?? "0x0",
-      //     "0x0",
-      //   ]),
-      // };
+      // if (lordsBalance > BigInt(0)) {
+      //   calls.push(transferLordsTx);
+      // }
 
-      // If they have Lords also withdraw
-      const calls =
-        lordsBalance > BigInt(0)
-          ? [transferEthTx, transferLordsTx]
-          : [transferEthTx];
+      if (beasts.length > 0) {
+        calls.push(...transferBeastTxs);
+      }
+
+      console.log(calls[calls.length - 1]);
 
-      const { transaction_hash } = await account.execute(calls);
+      const { transaction_hash } = await account.execute(
+        calls[calls.length - 1]
+      );
 
       const result = await provider.waitForTransaction(transaction_hash, {
         retryInterval: getWaitRetryInterval(network!),
@@ -1557,6 +1570,7 @@ export function createSyscalls({
       getBalances();
     } catch (error) {
       console.error(error);
+      setIsWithdrawing(false);
       throw error;
     }
   };
diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
index 55e34ac8e..81f6d1d15 100644
--- a/ui/src/app/page.tsx
+++ b/ui/src/app/page.tsx
@@ -4,6 +4,7 @@ import EthBalanceFragment from "@/app/abi/EthBalanceFragment.json";
 import Game from "@/app/abi/Game.json";
 import Lords from "@/app/abi/Lords.json";
 import Pragma from "@/app/abi/Pragma.json";
+import { getBeasts } from "@/app/api/getBeasts";
 import { getGoldenTokens } from "@/app/api/getGoldenTokens";
 import { DeathDialog } from "@/app/components/adventurer/DeathDialog";
 import Player from "@/app/components/adventurer/Player";
@@ -95,6 +96,7 @@ function Home() {
     (state) => state.updateAdventurerStats
   );
   const [goldenTokens, setGoldenTokens] = useState<number[]>([]);
+  const [beasts, setBeasts] = useState<number[]>([]);
   const calls = useTransactionCartStore((state) => state.calls);
   const screen = useUIStore((state) => state.screen);
   const setScreen = useUIStore((state) => state.setScreen);
@@ -275,11 +277,11 @@ function Home() {
 
   useEffect(() => {
     const init = async () => {
-      const username = await (
-        connector as unknown as CartridgeConnector
-      ).username();
+      const cartridgeConnector = connector as unknown as CartridgeConnector;
+      const username = await cartridgeConnector.username();
+      const delegate = await cartridgeConnector.delegateAccount();
       setUsername(username || "");
-      setControllerDelegate("");
+      setControllerDelegate(delegate || "");
     };
     if (connector?.id.includes("controller")) {
       setIsController(true);
@@ -476,8 +478,18 @@ function Home() {
     setGoldenTokens(goldenTokens);
   };
 
+  const handleFetchBeasts = async () => {
+    const beasts = await getBeasts(
+      address ?? "",
+      networkConfig[network!].beastsAddress,
+      network
+    );
+    setBeasts(beasts);
+  };
+
   useEffect(() => {
     handleFetchGoldenTokens();
+    handleFetchBeasts();
   }, [address, network]);
 
   const blobertTokenVariables = useMemo(() => {
@@ -928,6 +940,9 @@ function Home() {
                       lordsBalance={lordsBalance}
                       ethContractAddress={ethContract!.address}
                       lordsContractAddress={lordsContract!.address}
+                      goldenTokens={goldenTokens}
+                      beasts={beasts}
+                      blobertsData={blobertsData}
                     />
                   </div>
                 )}

From e2829c7c152d259b331680c6a8b16f67fdf40d43 Mon Sep 17 00:00:00 2001
From: Starknet Dev <starknetdev@gmail.com>
Date: Wed, 9 Oct 2024 19:44:26 +0100
Subject: [PATCH 2/3] fix build

---
 ui/src/app/lib/utils/syscalls.ts | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/ui/src/app/lib/utils/syscalls.ts b/ui/src/app/lib/utils/syscalls.ts
index 6f7b4bdb9..0ccbf940b 100644
--- a/ui/src/app/lib/utils/syscalls.ts
+++ b/ui/src/app/lib/utils/syscalls.ts
@@ -1514,17 +1514,17 @@ export function createSyscalls({
     try {
       setIsWithdrawing(true);
 
-      const transferEthTx = {
-        contractAddress: ethContract?.address ?? "",
-        entrypoint: "transfer",
-        calldata: [adminAccountAddress, ethBalance ?? "0x0", "0x0"],
-      };
-
-      const transferLordsTx = {
-        contractAddress: lordsContract?.address ?? "",
-        entrypoint: "transfer",
-        calldata: [adminAccountAddress, lordsBalance ?? "0x0", "0x0"],
-      };
+      // const transferEthTx = {
+      //   contractAddress: ethContract?.address ?? "",
+      //   entrypoint: "transfer",
+      //   calldata: [adminAccountAddress, ethBalance ?? "0x0", "0x0"],
+      // };
+
+      // const transferLordsTx = {
+      //   contractAddress: lordsContract?.address ?? "",
+      //   entrypoint: "transfer",
+      //   calldata: [adminAccountAddress, lordsBalance ?? "0x0", "0x0"],
+      // };
 
       // Create a transaction for each beast ID
       const transferBeastTxs = beasts.map((beastId) => ({

From bf9c57670791c335e6a161d8f1c7018950dec403 Mon Sep 17 00:00:00 2001
From: Starknet Dev <starknetdev@gmail.com>
Date: Wed, 9 Oct 2024 21:56:51 +0100
Subject: [PATCH 3/3] add withdrawal of golden tokens, bloberts and beasts

---
 .../app/components/profile/ProfileDialog.tsx  | 19 ++++-
 ui/src/app/lib/utils/syscalls.ts              | 80 ++++++++++++++-----
 2 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/ui/src/app/components/profile/ProfileDialog.tsx b/ui/src/app/components/profile/ProfileDialog.tsx
index ff9149c78..edacc6e27 100644
--- a/ui/src/app/components/profile/ProfileDialog.tsx
+++ b/ui/src/app/components/profile/ProfileDialog.tsx
@@ -5,6 +5,7 @@ import useNetworkAccount from "@/app/hooks/useNetworkAccount";
 import { useQueriesStore } from "@/app/hooks/useQueryStore";
 import useUIStore from "@/app/hooks/useUIStore";
 import { checkCartridgeConnector } from "@/app/lib/connectors";
+import { networkConfig } from "@/app/lib/networkConfig";
 import { copyToClipboard, displayAddress, padAddress } from "@/app/lib/utils";
 import { NullAdventurer } from "@/app/types";
 import CartridgeConnector from "@cartridge/connector";
@@ -22,7 +23,12 @@ interface ProfileDialogprops {
     account: AccountInterface,
     ethBalance: bigint,
     lordsBalance: bigint,
-    beasts: number[]
+    goldenTokenAddress: string,
+    goldenTokens: number[],
+    beasts: number[],
+    blobertsAddress: string,
+    bloberts: any[],
+    tournamentEnded: boolean
   ) => Promise<void>;
   ethBalance: bigint;
   lordsBalance: bigint;
@@ -53,6 +59,7 @@ export const ProfileDialog = ({
   const username = useUIStore((state) => state.username);
   const controllerDelegate = useUIStore((state) => state.controllerDelegate);
   const handleOffboarded = useUIStore((state) => state.handleOffboarded);
+  const network = useUIStore((state) => state.network);
   const { connector } = useConnect();
 
   const handleCopy = () => {
@@ -69,6 +76,9 @@ export const ProfileDialog = ({
 
   const tournamentEnded = process.env.NEXT_PUBLIC_TOURNAMENT_ENDED === "true";
 
+  const goldenTokenAddress = networkConfig[network!].goldenTokenAddress;
+  const blobertsAddress = networkConfig[network!].tournamentWinnerAddress;
+
   return (
     <div className="fixed w-full h-full sm:w-3/4 sm:h-3/4 top-0 sm:top-1/8 bg-terminal-black border border-terminal-green flex flex-col items-center p-10 z-30">
       <button
@@ -178,7 +188,12 @@ export const ProfileDialog = ({
                     account!,
                     ethBalance,
                     lordsBalance,
-                    beasts
+                    goldenTokenAddress,
+                    goldenTokens,
+                    beasts,
+                    blobertsAddress,
+                    blobertsData?.tokens,
+                    tournamentEnded
                   )
                 }
                 disabled={
diff --git a/ui/src/app/lib/utils/syscalls.ts b/ui/src/app/lib/utils/syscalls.ts
index 0ccbf940b..90328f628 100644
--- a/ui/src/app/lib/utils/syscalls.ts
+++ b/ui/src/app/lib/utils/syscalls.ts
@@ -1509,24 +1509,43 @@ export function createSyscalls({
     account: AccountInterface,
     ethBalance: bigint,
     lordsBalance: bigint,
-    beasts: number[]
+    goldenTokenAddress: string,
+    goldenTokens: number[],
+    beasts: number[],
+    blobertsAddress: string,
+    bloberts: any[],
+    tournamentEnded: boolean
   ) => {
     try {
       setIsWithdrawing(true);
 
-      // const transferEthTx = {
-      //   contractAddress: ethContract?.address ?? "",
-      //   entrypoint: "transfer",
-      //   calldata: [adminAccountAddress, ethBalance ?? "0x0", "0x0"],
-      // };
+      const transferEthTx = {
+        contractAddress: ethContract?.address ?? "",
+        entrypoint: "transfer",
+        calldata: [adminAccountAddress, ethBalance.toString() ?? "0x0", "0x0"],
+      };
 
-      // const transferLordsTx = {
-      //   contractAddress: lordsContract?.address ?? "",
-      //   entrypoint: "transfer",
-      //   calldata: [adminAccountAddress, lordsBalance ?? "0x0", "0x0"],
-      // };
+      const transferLordsTx = {
+        contractAddress: lordsContract?.address ?? "",
+        entrypoint: "transfer",
+        calldata: [
+          adminAccountAddress,
+          lordsBalance.toString() ?? "0x0",
+          "0x0",
+        ],
+      };
+
+      const transferGoldenTokenTxs = goldenTokens.map((goldenTokenId) => ({
+        contractAddress: goldenTokenAddress ?? "",
+        entrypoint: "transfer_from",
+        calldata: [
+          account.address,
+          adminAccountAddress,
+          goldenTokenId.toString(),
+          "0x0",
+        ],
+      }));
 
-      // Create a transaction for each beast ID
       const transferBeastTxs = beasts.map((beastId) => ({
         contractAddress: beastsContract?.address ?? "",
         entrypoint: "transfer_from",
@@ -1538,25 +1557,42 @@ export function createSyscalls({
         ],
       }));
 
+      const transferBlobertTxs = bloberts.map((blobert) => ({
+        contractAddress: blobertsAddress ?? "",
+        entrypoint: "transfer_from",
+        calldata: [
+          account.address,
+          adminAccountAddress,
+          blobert.tokenId.toString(),
+          "0x0",
+        ],
+      }));
+
       let calls = [];
 
-      // if (ethBalance > BigInt(0)) {
-      //   calls.push(transferEthTx);
-      // }
+      if (ethBalance > BigInt(0)) {
+        calls.push(transferEthTx);
+      }
+
+      if (lordsBalance > BigInt(0)) {
+        calls.push(transferLordsTx);
+      }
 
-      // if (lordsBalance > BigInt(0)) {
-      //   calls.push(transferLordsTx);
-      // }
+      if (goldenTokens.length > 0) {
+        calls.push(...transferGoldenTokenTxs);
+      }
 
       if (beasts.length > 0) {
         calls.push(...transferBeastTxs);
       }
 
-      console.log(calls[calls.length - 1]);
+      if (bloberts.length > 0 && tournamentEnded) {
+        calls.push(...transferBlobertTxs);
+      }
 
-      const { transaction_hash } = await account.execute(
-        calls[calls.length - 1]
-      );
+      console.log(calls);
+
+      const { transaction_hash } = await account.execute(calls);
 
       const result = await provider.waitForTransaction(transaction_hash, {
         retryInterval: getWaitRetryInterval(network!),