Merge branch 'main' into update-xo-response

cartridge-gg · Aug 7, 2024 · de81012 · de81012
2 parents d5b1828 + bcc6b17
commit de81012
Show file tree

Hide file tree

Showing 32 changed files with 527 additions and 197 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cartridge/docs",
-  "version": "0.3.37",
+  "version": "0.3.38",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

diff --git a/examples/starknet-react-next/package.json b/examples/starknet-react-next/package.json
@@ -1,7 +1,7 @@
 {
   "name": "starknet-react-next",
   "private": true,
-  "version": "0.3.37",
+  "version": "0.3.38",
   "scripts": {
     "dev": "next dev -p 3002",
     "build": "next build",
@@ -11,9 +11,11 @@
   },
   "dependencies": {
     "@cartridge/connector": "workspace:^",
+    "@cartridge/ui-next": "workspace:^",
     "@starknet-react/chains": "^0.1.3",
     "@starknet-react/core": "^2.1.5",
-    "next": "^13.4.19",
+    "next": "^14.2.5",
+    "next-themes": "^0.3.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -24,8 +26,12 @@
     "@types/node": "^20.6.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
+    "autoprefixer": "^10.4.18",
     "eslint": "^8.23.0",
     "eslint-config-next": "^12.2.5",
+    "postcss": "^8.4.35",
+    "postcss-import": "^16.1.0",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   }
 }
diff --git a/examples/starknet-react-next/postcss.config.js b/examples/starknet-react-next/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/examples/starknet-react-next/src/app/globals.css b/examples/starknet-react-next/src/app/globals.css
@@ -0,0 +1,7 @@
+@import "@cartridge/ui-next/dist/themes/default.css";
+@import "@cartridge/ui-next/dist/themes/dark.css";
+@import "@cartridge/ui-next/dist/themes/fonts.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/examples/starknet-react-next/src/app/layout.tsx b/examples/starknet-react-next/src/app/layout.tsx
@@ -0,0 +1,19 @@
+import { Providers } from "components/providers";
+import { Metadata } from "next";
+import { PropsWithChildren } from "react";
+
+import "./globals.css";
+
+export default function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="bg-background text-foreground">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
+
+export const metadata: Metadata = {
+  title: "StarkNet ❤️ React",
+};
diff --git a/...s/starknet-react-next/src/pages/index.tsx → ...ples/starknet-react-next/src/app/page.tsx b/...s/starknet-react-next/src/pages/index.tsx → ...ples/starknet-react-next/src/app/page.tsx
@@ -1,15 +1,20 @@
-import type { NextPage } from "next";
 import { TransferEth } from "components/TransferEth";
 import { ConnectWallet } from "components/ConnectWallet";
 import { InvalidTxn } from "components/InvalidTxn";
 import { SignMessage } from "components/SignMessage";
 import { DojoSpawnAndMove } from "components/DojoSpawnAndMove";
 import { DelegateAccount } from "components/DelegateAccount";
+import { ColorModeToggle } from "components/ColorModeToggle";
 
-const Home: NextPage = () => {
+export default function Home() {
   return (
-    <div>
-      <h2>Wallet</h2>
+    <div className="flex flex-col p-4 gap-4">
+      <div className="flex justify-between">
+        <h2 className="text-3xl font-bold underline text-primary">
+          Controller Example
+        </h2>
+        <ColorModeToggle />
+      </div>
       <ConnectWallet />
       <DojoSpawnAndMove />
       <TransferEth />
@@ -18,6 +23,4 @@ const Home: NextPage = () => {
       <SignMessage />
     </div>
   );
-};
-
-export default Home;
+}
diff --git a/...s/starknet-react-next/src/pages/token.tsx → ...tarknet-react-next/src/app/token/page.tsx b/...s/starknet-react-next/src/pages/token.tsx → ...tarknet-react-next/src/app/token/page.tsx
@@ -1,15 +1,17 @@
+'use client'
+
 import {
   useAccount,
   useContractRead,
   useContractWrite,
 } from "@starknet-react/core";
-import type { NextPage } from "next";
 import { useCallback, useMemo, useState } from "react";
 import { cairo, 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-next";
 
 function UserBalance() {
   const { account } = useAccount();
@@ -95,14 +97,14 @@ function MintToken() {
       <h2>Mint token</h2>
       <p>
         <span>Amount: </span>
-        <input
+        <Input
           type="number"
           onChange={(evt) => updateAmount(evt.target.value)}
         />
       </p>
-      <button disabled={mintButtonDisabled} onClick={onMint}>
+      <Button disabled={mintButtonDisabled} onClick={onMint}>
         {isPending ? "Submitting" : "Mint"}
-      </button>
+      </Button>
       {error && (
         <p>
           <>Error: {error}</>
@@ -112,7 +114,7 @@ function MintToken() {
   );
 }
 
-const TokenPage: NextPage = () => {
+export default function TokenPage() {
   const { address } = useAccount();
 
   if (!address) {
@@ -130,6 +132,4 @@ const TokenPage: NextPage = () => {
       <MintToken />
     </div>
   );
-};
-
-export default TokenPage;
+}
diff --git a/examples/starknet-react-next/src/components/ColorModeToggle.tsx b/examples/starknet-react-next/src/components/ColorModeToggle.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import { useTheme } from "next-themes";
+
+import {
+  Button,
+  DesktopIcon,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  MoonIcon,
+  SunIcon,
+} from "@cartridge/ui-next";
+
+export function ColorModeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon" className="text-foreground">
+          {theme === "system" ? (
+            <DesktopIcon className="fill-foreground" />
+          ) : theme === "light" ? (
+            <SunIcon variant="line" className="fill-foreground" />
+          ) : (
+            <MoonIcon variant="line" className="fill-foreground" />
+          )}
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/examples/starknet-react-next/src/components/ConnectWallet.tsx b/examples/starknet-react-next/src/components/ConnectWallet.tsx
@@ -1,6 +1,9 @@
+"use client";
+
 import { useAccount, useConnect, useDisconnect } from "@starknet-react/core";
 import CartridgeConnector from "@cartridge/connector";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import { Button } from "@cartridge/ui-next";
 
 export function ConnectWallet() {
   const { connect, connectors } = useConnect();
@@ -16,23 +19,21 @@ export function ConnectWallet() {
   }, [address, connector]);
 
   return (
-    <>
+    <div>
       {address && (
         <>
           <p>Account: {address} </p>
           {username && <p>Username: {username}</p>}
         </>
       )}
 
-      <div style={{ display: "flex", gap: "10px" }}>
-        <button
-          onClick={() => {
-            address ? disconnect() : connect({ connector });
-          }}
-        >
-          {address ? "Disconnect" : "Connect"}
-        </button>
-      </div>
-    </>
+      <Button
+        onClick={() => {
+          address ? disconnect() : connect({ connector });
+        }}
+      >
+        {address ? "Disconnect" : "Connect"}
+      </Button>
+    </div>
   );
 }
diff --git a/examples/starknet-react-next/src/components/DelegateAccount.tsx b/examples/starknet-react-next/src/components/DelegateAccount.tsx
@@ -1,7 +1,10 @@
+"use client";
+
 import { useAccount } from "@starknet-react/core";
 import { useCallback, useEffect, useState } from "react";
 import { constants } from "starknet";
 import CartridgeConnector from "@cartridge/connector";
+import { Button, Input } from "@cartridge/ui-next";
 
 export const DelegateAccount = () => {
   const [chainId] = useState<constants.StarknetChainId>(
@@ -57,28 +60,31 @@ export const DelegateAccount = () => {
   }
 
   return (
-    <>
+    <div className="flex flex-col gap-2">
       <h2>Delegate account</h2>
       {isDelegateSupported ? (
         <>
           <p>
             Address: {delegateAddress}
-            <button onClick={() => load()}>Load</button>
+            <Button onClick={() => load()}>Load</Button>
           </p>
 
-          <input
-            type="text"
-            min-width="420px"
-            value={delegateAddressInput}
-            onChange={(e) => setDelegateAddressInput(e.target.value)}
-          />
-          <button onClick={() => execute()} disabled={submitted}>
-            Set Delegate
-          </button>
+          <div className="flex gap-2">
+            <Input
+              className="max-w-40"
+              type="text"
+              min-width="420px"
+              value={delegateAddressInput}
+              onChange={(e) => setDelegateAddressInput(e.target.value)}
+            />
+            <Button onClick={() => execute()} disabled={submitted}>
+              Set Delegate
+            </Button>
+          </div>
         </>
       ) : (
         <p>Not supported!</p>
       )}
-    </>
+    </div>
   );
 };
diff --git a/examples/starknet-react-next/src/components/DojoSpawnAndMove.tsx b/examples/starknet-react-next/src/components/DojoSpawnAndMove.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { Button } from "@cartridge/ui-next";
 import {
   useAccount,
   useContractWrite,
@@ -38,11 +41,11 @@ export function DojoSpawnAndMove() {
   }
 
   return (
-    <>
+    <div>
       <h2>Spawn And Move (Dojo example)</h2>
       <p>Actions Address: {DOJO_ACTION_ADDRESS}</p>
-      <div style={{ display: "flex", flexDirection: "row", gap: "10px" }}>
-        <button
+      <div className="flex gap-2">
+        <Button
           onClick={async () => {
             setTxnHash(undefined);
             setSubmitted(true);
@@ -54,8 +57,8 @@ export function DojoSpawnAndMove() {
           disabled={submitted}
         >
           Spawn
-        </button>
-        <button
+        </Button>
+        <Button
           onClick={async () => {
             setTxnHash(undefined);
             setSubmitted(true);
@@ -67,7 +70,7 @@ export function DojoSpawnAndMove() {
           disabled={submitted}
         >
           Move Left
-        </button>
+        </Button>
       </div>
       <div>
         {txnHash && (
@@ -83,6 +86,6 @@ export function DojoSpawnAndMove() {
           </p>
         )}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/examples/starknet-react-next/src/components/InvalidTxn.tsx b/examples/starknet-react-next/src/components/InvalidTxn.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { Button } from "@cartridge/ui-next";
 import { useAccount, useContractWrite } from "@starknet-react/core";
 
 export function InvalidTxn() {
@@ -18,11 +21,11 @@ export function InvalidTxn() {
   }
 
   return (
-    <>
+    <div>
       <h2>Invalid Entry Point</h2>
       <div>
-        <button onClick={() => write()}>Invalid Entrypoint</button>
+        <Button onClick={() => write()}>Invalid Entrypoint</Button>
       </div>
-    </>
+    </div>
   );
 }