Rename @cartridge/ui-next to @cartridge/ui

Author: JunichiSugiura

examples/next/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@cartridge/connector": "workspace:*",
     "@cartridge/controller": "workspace:*",
-    "@cartridge/ui-next": "workspace:*",
+    "@cartridge/ui": "workspace:*",
     "@starknet-react/chains": "catalog:",
     "@starknet-react/core": "catalog:",
     "next": "^15.1.5",

examples/next/src/app/globals.css

@@ -1,6 +1,6 @@
-@import "@cartridge/ui-next/dist/themes/default.css";
-@import "@cartridge/ui-next/dist/themes/dark.css";
-@import "@cartridge/ui-next/dist/themes/fonts.css";
+@import "@cartridge/ui/dist/themes/default.css";
+@import "@cartridge/ui/dist/themes/dark.css";
+@import "@cartridge/ui/dist/themes/fonts.css";
 
 @tailwind base;
 @tailwind components;

examples/next/src/app/token/page.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import {
+  useAccount,
+  useReadContract,
+  useSendTransaction,
+} from "@starknet-react/core";
+import { useCallback, useMemo, useState } from "react";
+import { cairo, Call, CallData, uint256 } from "starknet";
+import { ConnectWallet } from "components/ConnectWallet";
+import { useTokenContract } from "hooks/token";
+import { Abi } from "starknet";
+import Erc20Abi from "abi/erc20.json";
+import { Button, Input } from "@cartridge/ui";
+
+function UserBalance() {
+  const { account } = useAccount();
+
+  const { data, isLoading, error } = useReadContract({
+    abi: Erc20Abi as Abi,
+    address:
+      "0x07394cbe418daa16e42b87ba67372d4ab4a5df0b05c6e554d158458ce245bc10",
+    functionName: "balanceOf",
+    args: account ? [account] : undefined,
+  });
+
+  const content = useMemo(() => {
+    if (isLoading || !(data as [])?.length) {
+      return <div>Loading balance</div>;
+    }
+
+    if (error) {
+      console.error(error);
+      return <div>Error!</div>;
+    }
+
+    const balance = uint256.uint256ToBN(cairo.uint256(data[0]));
+    return <div>{balance.toString(10)}</div>;
+  }, [data, isLoading, error]);
+
+  return (
+    <div>
+      <h2>User balance</h2>
+      {content}
+    </div>
+  );
+}
+
+function MintToken() {
+  const { account, address } = useAccount();
+  const [amount, setAmount] = useState("");
+  const [amountError, setAmountError] = useState<string | undefined>();
+
+  const { contract } = useTokenContract();
+
+  const calls: Call[] = useMemo(() => {
+    if (!address || !contract) return [];
+
+    const amountBn = cairo.uint256(amount);
+    return [
+      {
+        contractAddress: contract.address,
+        entrypoint: "mint",
+        calldata: CallData.compile([address, amountBn]),
+      },
+    ];
+  }, [address, contract, amount]);
+
+  const { sendAsync, isPending, error, reset } = useSendTransaction({
+    calls: calls,
+  });
+
+  const updateAmount = useCallback(
+    (newAmount: string) => {
+      // soft-validate amount
+      setAmount(newAmount);
+      try {
+        BigInt(newAmount);
+        setAmountError(undefined);
+      } catch (err) {
+        console.error(err);
+        setAmountError("Please input a valid number");
+      }
+    },
+    [setAmount],
+  );
+
+  const onMint = useCallback(() => {
+    reset();
+    if (account && !amountError) {
+      sendAsync();
+    }
+  }, [account, amountError, reset, sendAsync]);
+
+  const mintButtonDisabled = useMemo(() => {
+    if (isPending) return true;
+    return !account || !!amountError;
+  }, [isPending, account, amountError]);
+
+  return (
+    <div>
+      <h2>Mint token</h2>
+      <p>
+        <span>Amount: </span>
+        <Input
+          type="number"
+          onChange={(evt) => updateAmount(evt.target.value)}
+        />
+      </p>
+      <Button disabled={mintButtonDisabled} onClick={onMint}>
+        {isPending ? "Submitting" : "Mint"}
+      </Button>
+      {error && (
+        <p>
+          <>Error: {error}</>
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default function TokenPage() {
+  const { address } = useAccount();
+
+  if (!address) {
+    return (
+      <div>
+        <p>Connect Wallet</p>
+        <ConnectWallet />
+      </div>
+    );
+  }
+  return (
+    <div>
+      <p>Connected: {address}</p>
+      <UserBalance />
+      <MintToken />
+    </div>
+  );
+}

examples/next/src/components/ColorModeToggle.tsx

@@ -10,7 +10,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@cartridge/ui-next";
+} from "@cartridge/ui";
 
 export function ColorModeToggle() {
   const { setTheme } = useTheme();

examples/next/src/components/ConnectWallet.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useAccount, useConnect, useDisconnect } from "@starknet-react/core";
+import ControllerConnector from "@cartridge/connector/controller";
+import React, { useEffect, useState, useRef } from "react";
+import { Button } from "@cartridge/ui";
+
+export function ConnectWallet() {
+  const { connect, connectors } = useConnect();
+  const { disconnect } = useDisconnect();
+  const { address } = useAccount();
+
+  const controller = connectors[0] as ControllerConnector;
+  const [isDragging, setIsDragging] = useState(false);
+  const [position, setPosition] = useState({ x: -1000, y: -1000 });
+  const dragRef = useRef<{ startX: number; startY: number }>(undefined);
+
+  useEffect(() => {
+    setPosition({
+      x: window.innerWidth - 220,
+      y: window.innerHeight - 220,
+    });
+  }, []);
+
+  const [username, setUsername] = useState<string>();
+  useEffect(() => {
+    if (!address) return;
+    controller.username()?.then((n) => setUsername(n));
+  }, [address, controller]);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    setIsDragging(true);
+    dragRef.current = {
+      startX: e.pageX - position.x,
+      startY: e.pageY - position.y,
+    };
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!isDragging || !dragRef.current) return;
+
+    setPosition({
+      x: e.pageX - dragRef.current.startX,
+      y: e.pageY - dragRef.current.startY,
+    });
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+    dragRef.current = undefined;
+  };
+
+  const registerSessionUrl =
+    "http://localhost:3001/session?public_key=0x2cb057c18198ae4555a144bfdace051433b9a545dc88224de58fa04e323f269&redirect_uri=http://localhost:3002&policies=%5B%7B%22target%22:%220x03661Ea5946211b312e8eC71B94550928e8Fd3D3806e43c6d60F41a6c5203645%22,%22method%22:%22attack%22,%22description%22:%22Attack%20the%20beast%22%7D,%7B%22target%22:%220x03661Ea5946211b312e8eC71B94550928e8Fd3D3806e43c6d60F41a6c5203645%22,%22method%22:%22claim%22,%22description%22:%22Claim%20your%20tokens%22%7D%5D&rpc_url=http://localhost:8001/x/starknet/sepolia";
+
+  const openRegisterSessionUrl = () => {
+    window.open(registerSessionUrl, "_blank", "noopener,noreferrer");
+  };
+
+  return (
+    <div
+      style={{ position: "relative" }}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      {address && (
+        <>
+          <p>Account: {address} </p>
+          {username && <p>Username: {username}</p>}
+        </>
+      )}
+      {address ? (
+        <Button onClick={() => disconnect()}>Disconnect</Button>
+      ) : (
+        <div className="flex gap-1">
+          <Button onClick={() => connect({ connector: controller })}>
+            Connect
+          </Button>
+          {/* <Button onClick={() => connect({ connector: session })}>
+            Create Session
+          </Button> */}
+          <Button onClick={openRegisterSessionUrl}>Register Session</Button>
+        </div>
+      )}
+
+      {/* Draggable test overlay */}
+      <div
+        onMouseDown={handleMouseDown}
+        style={{
+          position: "fixed",
+          top: position.y,
+          left: position.x,
+          width: 200,
+          height: 200,
+          backgroundColor: "rgba(255, 0, 0, 0.3)",
+          border: "2px solid red",
+          cursor: isDragging ? "grabbing" : "grab",
+          zIndex: 10001,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          userSelect: "none",
+        }}
+      >
+        <div
+          style={{
+            color: "white",
+            textAlign: "center",
+            textShadow: "1px 1px 2px rgba(0,0,0,0.8)",
+            pointerEvents: "none",
+          }}
+        >
+          Drag me around
+          <br />
+          (Clickjacking Test)
+        </div>
+      </div>
+    </div>
+  );
+}

examples/next/src/components/DelegateAccount.tsx

@@ -4,7 +4,7 @@ import { useAccount } from "@starknet-react/core";
 import { useCallback, useEffect, useState } from "react";
 import { constants } from "starknet";
 import ControllerConnector from "@cartridge/connector/controller";
-import { Button, Input } from "@cartridge/ui-next";
+import { Button, Input } from "@cartridge/ui";
 
 export const DelegateAccount = () => {
   const [chainId] = useState<constants.StarknetChainId>(

examples/next/src/components/Header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@cartridge/ui-next";
+import { Button } from "@cartridge/ui";
 import ControllerConnector from "@cartridge/connector/controller";
 import {
   useAccount,

examples/next/src/components/InvalidTxn.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@cartridge/ui-next";
+import { Button } from "@cartridge/ui";
 import { useAccount, useSendTransaction } from "@starknet-react/core";
 
 const ETH_CONTRACT =

examples/next/src/components/LookupControllers.tsx

@@ -4,7 +4,7 @@ import { useAccount } from "@starknet-react/core";
 import { useCallback, useState } from "react";
 import ControllerConnector from "@cartridge/connector/controller";
 import { lookupAddresses, lookupUsernames } from "@cartridge/controller";
-import { Button } from "@cartridge/ui-next";
+import { Button } from "@cartridge/ui";
 
 export function LookupControllers() {
   const { address, connector } = useAccount();

examples/next/src/components/ManualTransferEth.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@cartridge/ui-next";
+import { Button } from "@cartridge/ui";
 import { useAccount, useNetwork } from "@starknet-react/core";
 import { useCallback, useState } from "react";
 import { ETH_CONTRACT_ADDRESS } from "./providers/StarknetProvider";