Merge pull request #488 from scaffold-eth/challenge-over-collateralized-lending-new-ui

Over Collateralized Lending New UI

Author: rin-st

README.md

@@ -41,7 +41,7 @@ Deploy your contracts to a testnet then build and upload your app to a public we
 📥 Then download the challenge to your computer and install dependencies by running:
 
 ```sh
-npx create-eth@2.0.20 -e challenge-over-collateralized-lending challenge-over-collateralized-lending
+npx create-eth@2.0.22 -e challenge-over-collateralized-lending challenge-over-collateralized-lending
 cd challenge-over-collateralized-lending
 ```
 
@@ -69,6 +69,8 @@ yarn start
 
 📱 Open http://localhost:3000 to see the app.
 
+> _Note: the UI in screenshots may differ slightly from the current version._
+
 > 👩‍💻 Restart `yarn chain` and then 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.
 
 ---

extension/README.md.args.mjs

@@ -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._
+
 > 👩‍💻 Restart \`yarn chain\` and then 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.
 
 ---

extension/packages/nextjs/app/dashboard/_components/Modals/TokenSwapModal.tsx

@@ -109,7 +109,7 @@ export const TokenSwapModal = ({ tokenBalance, connectedAddress, ETHprice, modal
           {/* dummy input to capture event onclick on modal box */}
           <input className="h-0 w-0 absolute top-0 left-0" />
           <h3 className="text-xl font-bold mb-3">Simple Swap</h3>
-          <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+          <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm btn-square absolute right-3 top-3">
             ✕
           </label>
           <div className="space-y-3">
@@ -150,7 +150,7 @@ export const TokenSwapModal = ({ tokenBalance, connectedAddress, ETHprice, modal
                 </span>
               </div>
               <div className="flex justify-center">
-                <button className="btn btn-circle btn-sm" onClick={handleChangeSellToken}>
+                <button className="btn btn-square btn-sm" onClick={handleChangeSellToken}>
                   <ArrowDownIcon className="h-4 w-4 my-0" />
                 </button>
               </div>
@@ -169,7 +169,7 @@ export const TokenSwapModal = ({ tokenBalance, connectedAddress, ETHprice, modal
                   {sellToken === "CORN" ? "ETH" : "CORN"}
                 </span>
               </div>
-              <button className="h-10 btn btn-primary btn-sm px-2 rounded-full" onClick={handleSwap} disabled={loading}>
+              <button className="h-10 btn btn-primary btn-sm px-2" onClick={handleSwap} disabled={loading}>
                 {!loading ? (
                   <ArrowsRightLeftIcon className="h-6 w-6" />
                 ) : (

extension/packages/nextjs/app/dashboard/_components/Modals/TokenTransferModal.tsx

@@ -44,7 +44,7 @@ export const TokenTransferModal = ({ tokenBalance, connectedAddress, modalId }:
           {/* dummy input to capture event onclick on modal box */}
           <input className="h-0 w-0 absolute top-0 left-0" />
           <h3 className="text-xl font-bold mb-3">Send {tokenName}</h3>
-          <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
+          <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm btn-square absolute right-3 top-3">
             ✕
           </label>
           <div className="space-y-2">
@@ -74,7 +74,7 @@ export const TokenTransferModal = ({ tokenBalance, connectedAddress, modalId }:
                 placeholder="Amount"
                 disableMultiplyBy1e18
               />
-              <button className="h-10 btn btn-primary btn-sm px-2 rounded-full" onClick={handleSend} disabled={loading}>
+              <button className="h-10 btn btn-primary btn-sm px-2" onClick={handleSend} disabled={loading}>
                 {!loading ? (
                   <BanknotesIcon className="h-6 w-6" />
                 ) : (

extension/packages/nextjs/app/dashboard/_components/PriceActions.tsx

@@ -46,7 +46,7 @@ const PriceActions = () => {
   };
 
   return (
-    <div className="absolute mt-10 right-5 bg-base-100 w-fit border-base-300 border shadow-md rounded-xl">
+    <div className="absolute mt-10 right-5 bg-base-100 w-fit border-base-300 border shadow-md">
       <div className="w-[150px] py-5 flex flex-col items-center gap-2 indicator">
         <TooltipInfo top={3} right={3} infoText="Use these controls to simulate price changes" />
         <div className="flex items-center gap-1">
@@ -55,10 +55,10 @@ const PriceActions = () => {
         <span className="flex items-center text-xs">{renderPrice} ETH</span>
         <span className="flex items-center text-xs">{renderETHPrice} CORN/ETH</span>
         <div className="flex gap-2">
-          <button onClick={() => handleClick(false)} className="btn btn-circle btn-xs">
+          <button onClick={() => handleClick(false)} className="btn btn-square btn-xs">
             <MinusIcon className="h-3 w-3" />
           </button>
-          <button onClick={() => handleClick(true)} className="btn btn-circle btn-xs">
+          <button onClick={() => handleClick(true)} className="btn btn-square btn-xs">
             <PlusIcon className="h-3 w-3" />
           </button>
         </div>

extension/packages/nextjs/app/dashboard/_components/TokenActions.tsx

@@ -43,7 +43,7 @@ const TokenActions = () => {
           </label>
           <div className="text-lg font-semibold">
             <span
-              className={`transition bg-transparent ${showAnimation ? "bg-warning rounded-xs animate-pulse-fast" : ""}`}
+              className={`transition bg-transparent ${showAnimation ? "bg-warning animate-pulse-fast" : ""}`}
             >
               {tokenBalance} {tokenName}
             </span>

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",
     "recharts": "^2.15.1"
   }
 }

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