add menu page (#438)

* add menu page

* setDelegate page

* rebase

examples/starknet-react-next/src/app/page.tsx

@@ -5,6 +5,7 @@ import { SignMessage } from "components/SignMessage";
 import { DojoSpawnAndMove } from "components/DojoSpawnAndMove";
 import { DelegateAccount } from "components/DelegateAccount";
 import { ColorModeToggle } from "components/ColorModeToggle";
+import { Menu } from "components/Menu";
 
 export default function Home() {
   return (
@@ -16,6 +17,7 @@ export default function Home() {
         <ColorModeToggle />
       </div>
       <ConnectWallet />
+      <Menu />
       <DojoSpawnAndMove />
       <TransferEth />
       <DelegateAccount />

examples/starknet-react-next/src/components/DelegateAccount.tsx

@@ -29,9 +29,10 @@ export const DelegateAccount = () => {
       setDelegateAddress(delegate?.toString() || "");
       setIsDelegateSupported(true);
     } catch (e: any) {
+      console.log(e)
       // controller doesnt support delegateAccount, ignore
     }
-  }, [account, cartridgeConnector]);
+  }, [account, chainId, cartridgeConnector]);
 
   const execute = useCallback(async () => {
     if (!account) {
@@ -75,7 +76,7 @@ export const DelegateAccount = () => {
               type="text"
               min-width="420px"
               value={delegateAddressInput}
-              onChange={(e) => setDelegateAddressInput(e.target.value)}
+              onChange={(e:any ) => setDelegateAddressInput(e.target.value)}
             />
             <Button onClick={() => execute()} disabled={submitted}>
               Set Delegate

examples/starknet-react-next/src/components/Menu.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useAccount, useDisconnect } from "@starknet-react/core";
+import CartridgeConnector from "@cartridge/connector";
+import { Button } from "@cartridge/ui-next";
+
+export function Menu() {
+  const { account, connector } = useAccount();
+  const { disconnect } = useDisconnect();
+  const cartridgeConnector = connector as unknown as CartridgeConnector;
+
+  const onOpenMenu = async () => {
+    if (!account) return;
+    const isConnected = await cartridgeConnector.openMenu();
+    if (!isConnected) {
+      disconnect()
+    }
+  };
+
+  if (!account) {
+    return null;
+  }
+
+  return (
+    <div style={{ marginTop: "10px" }}>
+      <h2>Open Menu</h2>
+      <Button onClick={onOpenMenu}>Open Menu</Button>
+    </div>
+  );
+}