Merge pull request #483 from scaffold-eth/challenge-crowdfunding-new-ui

Crowdfunding New UI

Author: rin-st

README.md

@@ -22,7 +22,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-crowdfunding challenge-crowdfunding
+npx create-eth@2.0.22 -e challenge-crowdfunding challenge-crowdfunding
 ```
 
 > When prompted, choose your preferred Solidity framework: **Hardhat** or **Foundry**.
@@ -53,6 +53,8 @@ yarn start
 
 📱 Open http://localhost:3000 to see the app.
 
+> _Note: the UI in screenshots may differ slightly from the current version._
+
 > 👩‍💻 Rerun `yarn deploy` whenever you want to deploy contract changes to the frontend. Run `yarn deploy --reset` for a completely fresh deploy, even when contracts are unchanged.
 
 🔏 Now you are ready to edit your smart contract `CrowdFund.sol` in your contracts directory

extension/README.md.args.mjs

@@ -34,6 +34,8 @@ yarn start
 
 📱 Open http://localhost:3000 to see the app.
 
+> _Note: the UI in screenshots may differ slightly from the current version._
+
 > 👩‍💻 Rerun \`yarn deploy\` whenever you want to deploy contract changes to the frontend. Run \`yarn deploy --reset\` for a completely fresh deploy, even when contracts are unchanged.
 
 🔏 Now you are ready to edit your smart contract \`CrowdFund.sol\` in \`packages/${solidityFramework}/contracts\`

extension/packages/nextjs/app/crowdfund/_components/ContributeContractInteraction.tsx

@@ -50,7 +50,7 @@ export const ContributeContractInteraction = ({ address }: { address?: string })
   return (
     <div className="flex items-center flex-col flex-grow w-full px-4 gap-12">
       {isFundingCompleted && (
-        <div className="flex flex-col items-center gap-2 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary rounded-xl p-6 mt-12 w-full max-w-lg">
+        <div className="flex flex-col items-center gap-2 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary p-6 mt-12 w-full max-w-lg">
           <p className="block m-0 font-semibold">🎉 Crowdfunding contract triggered FundingRecipient 🎉</p>
           <div className="flex items-center">
             <ETHToPrice
@@ -63,7 +63,7 @@ export const ContributeContractInteraction = ({ address }: { address?: string })
       )}
 
       <div
-        className={`flex flex-col items-center space-y-8 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary rounded-xl p-6 w-full max-w-lg ${
+        className={`flex flex-col items-center space-y-8 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary p-6 w-full max-w-lg ${
           !isFundingCompleted ? "mt-24" : ""
         }`}
       >

extension/packages/nextjs/app/crowdfund/_components/EthToPrice.tsx

@@ -25,7 +25,7 @@ export const ETHToPrice = ({ value, className = "" }: TBalanceProps) => {
     return (
       <div className="animate-pulse flex space-x-4">
         <div className="flex items-center space-y-6">
-          <div className="h-5 w-12 bg-slate-300 rounded"></div>
+          <div className="h-5 w-12 bg-slate-300"></div>
         </div>
       </div>
     );

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

@@ -13,7 +13,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",
     "humanize-duration": "^3.28.0"
   },
   "devDependencies": {

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 */