Configure @cartridge/ui-next in next example (#538)

* Setup tailwind to example project * Use cartridge tailwind preset * Apply ui next component * Expose tailwind preset as separated submodule for node * Replace style with tailwind and ui next components
cartridge-gg · Aug 7, 2024 · 9ffa7a2 · 9ffa7a2
1 parent 0d6dd00
commit 9ffa7a2
Show file tree

Hide file tree

Showing 19 changed files with 179 additions and 93 deletions.
diff --git a/examples/starknet-react-next/package.json b/examples/starknet-react-next/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@cartridge/connector": "workspace:^",
+    "@cartridge/ui-next": "workspace:^",
     "@starknet-react/chains": "^0.1.3",
     "@starknet-react/core": "^2.1.5",
     "next": "^13.4.19",
@@ -24,8 +25,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/components/ConnectWallet.tsx b/examples/starknet-react-next/src/components/ConnectWallet.tsx
@@ -1,6 +1,7 @@
 import { useAccount, useConnect, useDisconnect } from "@starknet-react/core";
 import CartridgeConnector from "@cartridge/connector";
 import { useEffect, useState } from "react";
+import { Button } from "@cartridge/ui-next";
 
 export function ConnectWallet() {
   const { connect, connectors } = useConnect();
@@ -16,23 +17,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
@@ -2,6 +2,7 @@ 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 +58,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,4 @@
+import { Button } from "@cartridge/ui-next";
 import {
   useAccount,
   useContractWrite,
@@ -38,11 +39,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 +55,8 @@ export function DojoSpawnAndMove() {
           disabled={submitted}
         >
           Spawn
-        </button>
-        <button
+        </Button>
+        <Button
           onClick={async () => {
             setTxnHash(undefined);
             setSubmitted(true);
@@ -67,7 +68,7 @@ export function DojoSpawnAndMove() {
           disabled={submitted}
         >
           Move Left
-        </button>
+        </Button>
       </div>
       <div>
         {txnHash && (
@@ -83,6 +84,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,4 @@
+import { Button } from "@cartridge/ui-next";
 import { useAccount, useContractWrite } from "@starknet-react/core";
 
 export function InvalidTxn() {
@@ -18,11 +19,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>
   );
 }
diff --git a/examples/starknet-react-next/src/components/SignMessage.tsx b/examples/starknet-react-next/src/components/SignMessage.tsx
@@ -1,3 +1,4 @@
+import { Button, Textarea } from "@cartridge/ui-next";
 import { useAccount, useSignTypedData } from "@starknet-react/core";
 import { useCallback, useState } from "react";
 import {
@@ -76,27 +77,25 @@ export function SignMessage() {
   if (!account || !address) return <></>;
 
   return (
-    <div style={{ marginTop: "10px" }}>
+    <div className="flex flex-col gap-2">
       <h2>Sign Message</h2>
-      <textarea
-        style={{ height: "200px", width: "500px" }}
+      <Textarea
+        className="h-96"
         value={JSON.stringify(message, null, 2)}
         onChange={(e) => setMessage(JSON.parse(e.target.value))}
       />
-      <div style={{ display: "flex", flexDirection: "row", gap: "10px" }}>
-        <button
+      <div className="flex gap-2">
+        <Button
           onClick={() => {
             setIsValid(null);
             signTypedData(message);
           }}
         >
           Sign Message
-        </button>
+        </Button>
 
         {signature && (
-          <button style={{ paddingLeft: "8px" }} onClick={onValidateSig}>
-            Validate Signature
-          </button>
+          <Button onClick={onValidateSig}>Validate Signature</Button>
         )}
       </div>
 

diff --git a/examples/starknet-react-next/src/components/TransferEth.tsx b/examples/starknet-react-next/src/components/TransferEth.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@cartridge/ui-next";
 import { useAccount, useExplorer } from "@starknet-react/core";
 import { useCallback, useState } from "react";
 
@@ -40,13 +41,13 @@ export const TransferEth = () => {
   }
 
   return (
-    <>
+    <div>
       <h2>Transfer Eth</h2>
       <p>Address: {ETH_CONTRACT}</p>
 
-      <button onClick={() => execute()} disabled={submitted}>
+      <Button onClick={() => execute()} disabled={submitted}>
         Transfer 0.005 ETH to self
-      </button>
+      </Button>
       {txnHash && (
         <p>
           Transaction hash:{" "}
@@ -59,6 +60,6 @@ export const TransferEth = () => {
           </a>
         </p>
       )}
-    </>
+    </div>
   );
 };
diff --git a/examples/starknet-react-next/src/globals.css b/examples/starknet-react-next/src/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/pages/_app.tsx b/examples/starknet-react-next/src/pages/_app.tsx
@@ -2,6 +2,8 @@ import type { AppProps } from "next/app";
 import NextHead from "next/head";
 import { StarknetProvider } from "components/StarknetProvider";
 
+import "../globals.css";
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <StarknetProvider>

diff --git a/examples/starknet-react-next/src/pages/index.tsx b/examples/starknet-react-next/src/pages/index.tsx
@@ -1,15 +1,16 @@
-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";
 
-const Home: NextPage = () => {
+export default function Home() {
   return (
-    <div>
-      <h2>Wallet</h2>
+    <div className="flex flex-col p-4 gap-4">
+      <h2 className="text-3xl font-bold underline text-primary">
+        Controller Example
+      </h2>
       <ConnectWallet />
       <DojoSpawnAndMove />
       <TransferEth />
@@ -18,6 +19,4 @@ const Home: NextPage = () => {
       <SignMessage />
     </div>
   );
-};
-
-export default Home;
+}
diff --git a/examples/starknet-react-next/src/pages/token.tsx b/examples/starknet-react-next/src/pages/token.tsx
@@ -3,13 +3,13 @@ import {
   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 +95,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 +112,7 @@ function MintToken() {
   );
 }
 
-const TokenPage: NextPage = () => {
+export default function TokenPage() {
   const { address } = useAccount();
 
   if (!address) {
@@ -130,6 +130,4 @@ const TokenPage: NextPage = () => {
       <MintToken />
     </div>
   );
-};
-
-export default TokenPage;
+}
diff --git a/examples/starknet-react-next/tailwind.config.ts b/examples/starknet-react-next/tailwind.config.ts
@@ -0,0 +1,12 @@
+import { cartridgeTWPreset } from "@cartridge/ui-next/preset";
+import { Config } from "tailwindcss";
+
+const config = {
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@cartridge/ui-next/**/*.{js,jsx}",
+  ],
+  presets: [cartridgeTWPreset],
+} satisfies Config;
+
+export default config;