Merge pull request #484 from scaffold-eth/challenge-token-vendor-new-ui

Token Vendor New UI

Author: rin-st

README.md

@@ -28,7 +28,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-token-vendor challenge-token-vendor
+npx create-eth@2.0.22 -e challenge-token-vendor challenge-token-vendor
 ```
 
 > When prompted, choose your preferred Solidity framework: **Hardhat** or **Foundry**.
@@ -76,6 +76,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.
 
 ---

extension/README.md.args.mjs

@@ -40,6 +40,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.
 
 ---

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/app/token-vendor/page.tsx

@@ -49,7 +49,7 @@ const TokenVendor: NextPage = () => {
   return (
     <>
       <div className="flex items-center flex-col flex-grow pt-10">
-        <div className="flex flex-col items-center bg-base-100 shadow-lg shadow-secondary border-8 border-secondary rounded-xl p-6 mt-24 w-full max-w-lg">
+        <div className="flex flex-col items-center bg-base-100 shadow-lg shadow-secondary border-8 border-secondary p-6 mt-24 w-full max-w-lg">
           <div className="text-xl">
             Your token balance:{" "}
             <div className="inline-flex items-center justify-center">
@@ -73,7 +73,7 @@ const TokenVendor: NextPage = () => {
         </div>
 
         {/* Buy Tokens */}
-        {/* <div className="flex flex-col items-center space-y-4 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary rounded-xl p-6 mt-8 w-full max-w-lg">
+        {/* <div className="flex flex-col items-center space-y-4 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary p-6 mt-8 w-full max-w-lg">
           <div className="text-xl">Buy tokens</div>
           <div>{tokensPerEth?.toString() || 0} tokens per ETH</div>
 
@@ -101,7 +101,7 @@ const TokenVendor: NextPage = () => {
         </div> */}
 
         {!!yourTokenBalance && (
-          <div className="flex flex-col items-center space-y-4 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary rounded-xl p-6 mt-8 w-full max-w-lg">
+          <div className="flex flex-col items-center space-y-4 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary p-6 mt-8 w-full max-w-lg">
             <div className="text-xl">Transfer tokens</div>
             <div className="w-full flex flex-col space-y-2">
               <AddressInput placeholder="to address" value={toAddress} onChange={value => setToAddress(value)} />
@@ -133,7 +133,7 @@ const TokenVendor: NextPage = () => {
 
         {/* Sell Tokens */}
         {/* {!!yourTokenBalance && (
-          <div className="flex flex-col items-center space-y-4 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary rounded-xl p-6 mt-8 w-full max-w-lg">
+          <div className="flex flex-col items-center space-y-4 bg-base-100 shadow-lg shadow-secondary border-8 border-secondary p-6 mt-8 w-full max-w-lg">
             <div className="text-xl">Sell tokens</div>
             <div>{tokensPerEth?.toString() || 0} tokens per ETH</div>
 

extension/packages/nextjs/package.json

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