update cartridge controller connector

apps/nextjs/package.json

@@ -16,7 +16,8 @@
   "dependencies": {
     "@ark-project/react": "1.1.2",
     "@avnu/avnu-sdk": "^2.1.1",
-    "@cartridge/connector": "^0.4.0",
+    "@cartridge/connector": "^0.5.1",
+    "@cartridge/controller": "^0.5.1",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@keystatic/core": "^0.5.36",

apps/nextjs/src/app/_components/wallet/StarknetLoginButton.tsx

@@ -1,62 +1,84 @@
 "use client";
 
+import type ControllerConnector from "@cartridge/connector/controller";
+import type { buttonVariants } from "@realms-world/ui/components/ui/button";
 import type { VariantProps } from "class-variance-authority";
 import React from "react";
 import StarknetLogo from "@/icons/starknet.svg";
 import { useUIStore } from "@/providers/UIStoreProvider";
 import { shortenHex } from "@/utils/utils";
-import { useAccount } from "@starknet-react/core";
-
-import type { buttonVariants } from "@realms-world/ui/components/ui/button";
 import { Button } from "@realms-world/ui/components/ui/button";
-import { Loader } from "lucide-react";
+import { useAccount } from "@starknet-react/core";
+import { Loader, User } from "lucide-react";
 
 export const StarknetLoginButton = ({
   openAccount = false,
   variant,
   textClass,
   buttonClass,
   children,
-  newTransactionCount
+  newTransactionCount,
 }: {
   openAccount?: boolean;
   variant?: VariantProps<typeof buttonVariants>["variant"];
   textClass?: string;
   buttonClass?: string;
-  children?: React.ReactNode,
-  newTransactionCount?: number
+  children?: React.ReactNode;
+  newTransactionCount?: number;
 }) => {
-  const { address, isConnected, isConnecting } = useAccount();
+  const { address, isConnected, isConnecting, connector } = useAccount();
   const { toggleAccount, toggleStarknetLogin } = useUIStore((state) => state);
 
   const onConnectClick = () => {
-    return !isConnected
-      ? toggleStarknetLogin()
-      : openAccount && toggleAccount();
+    if (!isConnected) {
+      return toggleStarknetLogin();
+    }
+
+    if (connector?.id === "controller") {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      (connector as unknown as ControllerConnector).controller.openProfile(
+        "inventory",
+      );
+    } else if (openAccount) {
+      toggleAccount();
+    }
   };
 
   return (
-    <Button
-      className={buttonClass}
-      variant={variant ?? "outline"}
-      size="sm"
-      onClick={onConnectClick}
-      disabled={isConnecting}
-    >
-      <span className="flex items-center font-sans normal-case">
-        <StarknetLogo className="h-6 w-6" />
-        <span className={`pl-2 ${textClass ?? "sm:block"}`}>
-          {isConnecting && <Loader className="animate-spin" />}
-          {address ? (
-            <>{shortenHex(address, 8)}</>
-          ) : (<>
-            {children ?? "Starknet"}</>)
-          }
+    <>
+      <Button
+        className={buttonClass}
+        variant={variant ?? "outline"}
+        size="sm"
+        onClick={onConnectClick}
+        disabled={isConnecting}
+      >
+        <span className="flex items-center font-sans normal-case">
+          <StarknetLogo className="h-6 w-6" />
+          <span className={`pl-2 ${textClass ?? "sm:block"}`}>
+            {isConnecting && <Loader className="animate-spin" />}
+            {address ? (
+              <>{shortenHex(address, 8)}</>
+            ) : (
+              <>{children ?? "Starknet"}</>
+            )}
+          </span>
         </span>
-      </span>
-      {(isConnected && newTransactionCount) && newTransactionCount > 0 ? <span
-        className={'bg-green-600 w-[20px] absolute -top-1.5 -right-1.5 rounded-full text-black'}
-      >{newTransactionCount}</span> : null}
-    </Button>
+        {isConnected && newTransactionCount && newTransactionCount > 0 ? (
+          <span
+            className={
+              "absolute -right-1.5 -top-1.5 w-[20px] rounded-full bg-green-600 text-black"
+            }
+          >
+            {newTransactionCount}
+          </span>
+        ) : null}
+      </Button>
+      {connector?.id === "controller" ? (
+        <Button size="sm" onClick={() => openAccount && toggleAccount()}>
+          <User />
+        </Button>
+      ) : null}
+    </>
   );
 };

apps/nextjs/src/providers/Web3Providers.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { ReactElement } from "react";
-import { env } from "env";
+import ControllerConnector from "@cartridge/connector/controller";
 import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { darkTheme, ReservoirKitProvider } from "@reservoir0x/reservoir-kit-ui";
 import {
@@ -16,17 +16,18 @@ import {
   publicProvider as starkPublicProvider,
   //useInjectedConnectors,
 } from "@starknet-react/core";
+import { env } from "env";
+import { constants } from "starknet";
 import {
   ArgentMobileConnector,
   isInArgentMobileAppBrowser,
 } from "starknetkit/argentMobile";
-import CartridgeConnector from "@cartridge/connector";
 import { InjectedConnector } from "starknetkit/injected";
 import { WebWalletConnector } from "starknetkit/webwallet";
 import { http, WagmiProvider } from "wagmi";
 import { mainnet, sepolia } from "wagmi/chains";
+
 import { TransferLogProvider } from "./TransferLogProvider";
-import { constants } from "starknet";
 
 const starkProvider = env.NEXT_PUBLIC_BLAST_API
   ? blastProvider({
@@ -49,9 +50,11 @@ const starkConnectors = isInArgentMobileAppBrowser()
       }),
     ]
   : [
-      /*new CartridgeConnector({
-        rpc: "https://api.cartridge.gg/x/starknet/mainnet",
-      }),*/
+      new ControllerConnector({
+        rpc:
+          "https://api.cartridge.gg/x/starknet/" +
+          (isTestnet ? "sepolia" : "mainnet"),
+      }),
       new InjectedConnector({ options: { id: "braavos", name: "Braavos" } }),
       new InjectedConnector({ options: { id: "argentX", name: "Argent X" } }),
       ArgentMobileConnector.init({