Merge pull request #482 from scaffold-eth/challenge-tokenization-new-ui

Tokenization New UI

Author: rin-st

README.md

@@ -56,7 +56,7 @@ Before you begin, you need to install the following tools:
 Then download the challenge to your computer and install dependencies by running:
 
 ```sh
-npx create-eth@2.0.20 -e challenge-tokenization challenge-tokenization
+npx create-eth@2.0.22 -e challenge-tokenization challenge-tokenization
 ```
 
 > When prompted, choose your preferred Solidity framework: **Hardhat** or **Foundry**.
@@ -106,6 +106,8 @@ yarn start
 
 📱 Open [http://localhost:3000](http://localhost:3000) to see the app.
 
+> _Note: the UI in screenshots may differ slightly from the current version._
+
 ---
 
 ⚠️ We've disabled Cursor auto-suggestions (Tab completions and predictions) via `.vscode/settings.json` to reduce distractions while you code. AI chat and agent features are still enabled, and we've included `AGENTS.md` and `CLAUDE.md` files with project context to help AI assistants understand the codebase.

extension/README.md.args.mjs

@@ -89,6 +89,8 @@ yarn start
 
 📱 Open [http://localhost:3000](http://localhost:3000) to see the app.
 
+> _Note: the UI in screenshots may differ slightly from the current version._
+
 ---
 
 ⚠️ We've disabled Cursor auto-suggestions (Tab completions and predictions) via \`.vscode/settings.json\` to reduce distractions while you code. AI chat and agent features are still enabled, and we've included \`AGENTS.md\` and \`CLAUDE.md\` files with project context to help AI assistants understand the codebase.

extension/packages/nextjs/app/ipfsDownload/page.tsx

@@ -40,7 +40,7 @@ const IpfsDownload: NextPage = () => {
         <h1 className="text-center mb-4">
           <span className="block text-4xl font-bold">Download from IPFS</span>
         </h1>
-        <div className={`flex border-2 border-accent/95 bg-base-200 rounded-full text-accent w-96`}>
+        <div className={`flex border-2 border-accent/95 bg-base-200 text-accent w-96`}>
           <input
             className="input input-ghost focus:outline-none focus:bg-transparent focus:text-secondary-content h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/50 text-secondary-content/75"
             placeholder="IPFS CID"
@@ -59,7 +59,7 @@ const IpfsDownload: NextPage = () => {
 
         {mounted && (
           <LazyReactJson
-            style={{ padding: "1rem", borderRadius: "0.75rem" }}
+            style={{ padding: "1rem" }}
             src={yourJSON}
             theme="solarized"
             enableClipboard={false}

extension/packages/nextjs/app/ipfsUpload/page.tsx

@@ -44,7 +44,7 @@ const IpfsUpload: NextPage = () => {
 
         {mounted && (
           <LazyReactJson
-            style={{ padding: "1rem", borderRadius: "0.75rem" }}
+            style={{ padding: "1rem" }}
             src={yourJSON}
             theme="solarized"
             enableClipboard={false}

extension/packages/nextjs/app/myNFTs/_components/NFTCard.tsx

@@ -14,7 +14,7 @@ export const NFTCard = ({ nft }: { nft: Collectible }) => {
       <figure className="relative">
         {/* eslint-disable-next-line  */}
         <img src={nft.image} alt="NFT Image" className="h-60 min-w-full" />
-        <figcaption className="glass absolute bottom-4 left-4 p-4 rounded-xl">
+        <figcaption className="glass absolute bottom-4 left-4 p-4">
           <span className="text-white "># {nft.id}</span>
         </figcaption>
       </figure>

extension/packages/nextjs/app/page.tsx.args.mjs

@@ -12,7 +12,7 @@ export const description = `
           width="727"
           height="231"
           alt="challenge banner"
-          className="rounded-xl border-4 border-primary"
+          className="border-4 border-primary"
         />
         <div className="max-w-3xl">
           <p className="text-center text-lg mt-8">

extension/packages/nextjs/package.json

@@ -1,8 +1,5 @@
 {
   "dependencies": {
-    "@scaffold-ui/components": "0.1.11",
-    "@scaffold-ui/debug-contracts": "0.1.10",
-    "@scaffold-ui/hooks": "0.1.8",
     "ipfs-utils": "^9.0.14",
     "kubo-rpc-client": "^3.0.1",
     "react-json-view": "^1.21.3"

extension/packages/nextjs/styles/globals.css.args.mjs

@@ -19,9 +19,9 @@ export const postContent = `
   --color-warning: #ffcf72;
   --color-error: #ff8863;
 
-  /* radius / button rounding */
-  --radius-field: 9999rem;
-  --radius-box: 1rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --radius-selector: 0rem;
 
   /* tooltip tail width */
   --tt-tailw: 6px;
@@ -48,8 +48,9 @@ export const postContent = `
   --color-warning: #ffcf72;
   --color-error: #ff8863;
 
-  --radius-field: 9999rem;
-  --radius-box: 1rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --radius-selector: 0rem;
 
   --tt-tailw: 6px;
   --tt-bg: var(--color-primary); /* if you need a tooltip bg override */