Merge pull request #490 from scaffold-eth/challenge-prediction-markets-new-ui

Prediction Markets New UI

Author: rin-st

README.md

@@ -80,7 +80,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-prediction-markets challenge-prediction-markets
+npx create-eth@2.0.22 -e challenge-prediction-markets challenge-prediction-markets
 cd challenge-prediction-markets
 ```
 
@@ -108,6 +108,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._
+
 > 👩‍💻 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.
 
 Head to the **`Debug Contracts`** tab and you should find a smart contract named **`PredictionMarket`**. This is our main contract and the one we'll be working on throughout the challenge. Since we haven't implemented any functions yet, they all shouldn't work, nor will you see all the necessary state variables.

extension/README.md.args.mjs

@@ -96,6 +96,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._
+
 > 👩‍💻 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.
 
 Head to the **\`Debug Contracts\`** tab and you should find a smart contract named **\`PredictionMarket\`**. This is our main contract and the one we'll be working on throughout the challenge. Since we haven't implemented any functions yet, they all shouldn't work, nor will you see all the necessary state variables.

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/components/liquidity-provider/LPAddress.tsx

@@ -18,7 +18,7 @@ export function LPAddress() {
 
   if (!owner)
     return (
-      <div className="flex flex-col bg-base-100 p-4 rounded-xl">
+      <div className="flex flex-col bg-base-100 p-4">
         <h3 className="text-xl font-medium">Prediction Market Info</h3>
         <p className="text-base-content">No prediction market found</p>
       </div>

extension/packages/nextjs/components/liquidity-provider/PredictionMarketInfoLP.tsx

@@ -112,7 +112,7 @@ export function PredictionMarketInfoLP() {
           {!isReported ? (
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               {/* Yes Token */}
-              <div className="bg-base-200 p-4 rounded-lg border-4 border-green-500">
+              <div className="bg-base-200 p-4 border-4 border-green-500">
                 <h2 className="text-2xl font-semibold mb-2">&quot;{yesOutcome}&quot; Token</h2>
                 <h3 className="text-lg mb-2">
                   Total Supply:
@@ -162,7 +162,7 @@ export function PredictionMarketInfoLP() {
               </div>
 
               {/* No Token */}
-              <div className="bg-base-200 p-4 rounded-lg border-4 border-red-500">
+              <div className="bg-base-200 p-4 border-4 border-red-500">
                 <h2 className="text-2xl font-semibold mb-2">&quot;{noOutcome}&quot; Token</h2>
                 <h3 className="text-lg mb-2">
                   Total Supply:
@@ -208,7 +208,7 @@ export function PredictionMarketInfoLP() {
               </div>
             </div>
           ) : (
-            <div className="bg-base-200 p-4 rounded-lg">
+            <div className="bg-base-200 p-4">
               <h2 className="text-2xl font-semibold mb-2">Oracle reported: {winningOption}</h2>
               <h3 className="text-lg mb-2">
                 Value of {winningOption} tokens held by prediction market:{" "}

extension/packages/nextjs/components/liquidity-provider/ResolveMarketAndWithdraw.tsx

@@ -62,7 +62,7 @@ export function ResolveMarketAndWithdraw() {
     <div className="card bg-base-100 w-full shadow-xl indicator">
       <div className="card-body">
         {!isLiquidityProvider ? (
-          <div className="max-w-6xl mx-auto bg-base-100 rounded-xl">
+          <div className="max-w-6xl mx-auto bg-base-100">
             <p className="text-xl font-bold text-center">❗️ Only the liquidity provider can resolve the market</p>
           </div>
         ) : (

extension/packages/nextjs/components/race/Race.tsx

@@ -244,7 +244,7 @@ const RaceTrack: React.FC = () => {
             </div>
           </div>
 
-          <div className="rounded-lg overflow-hidden">
+          <div className="overflow-hidden">
             <Image
               src={resolvedTheme === "dark" ? BackgroundImageDark : BackgroundImage}
               alt="Mountain Background"

extension/packages/nextjs/components/race/RaceEffects.tsx

@@ -34,7 +34,7 @@ const RaceEffects: React.FC<RaceEffectsProps> = ({ isRacing }) => {
         {Array.from({ length: 15 }).map((_, index) => (
           <div
             key={index}
-            className="absolute rounded-full bg-gray-300 opacity-40"
+            className="absolute bg-gray-300 opacity-40"
             style={{
               top: `${50 + (Math.random() * 40 - 20)}%`,
               left: `${Math.random() * 100}%`,

extension/packages/nextjs/components/user/OverviewBuySellShares.tsx

@@ -60,12 +60,12 @@ export function OverviewBuySellShares() {
             type="radio"
             name="token_tabs"
             role="tab"
-            className="tab font-lexend font-semibold text-green-500 min-w-40 rounded-tl-md rounded-tr-md bg-base-300 checked:bg-green-500 checked:text-white"
+            className="tab font-lexend font-semibold text-green-500 min-w-40 bg-base-300 checked:bg-green-500 checked:text-white"
             aria-label={`"${yesOutcome}" Token`}
             defaultChecked
           />
           <div role="tabpanel" className="tab-content border-l-0">
-            <div className="rounded-bl-lg rounded-br-lg p-4 border-4 border-green-500">
+            <div className="p-4 border-4 border-green-500">
               <PredictionBuySellShare optionIndex={0} colorScheme="green" />
             </div>
           </div>
@@ -74,11 +74,11 @@ export function OverviewBuySellShares() {
             type="radio"
             name="token_tabs"
             role="tab"
-            className="tab font-lexend font-semibold text-red-500 min-w-40 rounded-md bg-base-300 checked:bg-red-500 checked:text-white ml-4"
+            className="tab font-lexend font-semibold text-red-500 min-w-40 bg-base-300 checked:bg-red-500 checked:text-white ml-4"
             aria-label={`"${noOutcome}" Token`}
           />
           <div role="tabpanel" className="tab-content border-l-0">
-            <div className="rounded-bl-lg rounded-br-lg p-4 border-4 border-red-500">
+            <div className="p-4 border-4 border-red-500">
               <PredictionBuySellShare optionIndex={1} colorScheme="red" />
             </div>
           </div>

extension/packages/nextjs/components/user/PredictionBuySellShare.tsx

@@ -63,7 +63,7 @@ export function PredictionBuySellShare({ optionIndex, colorScheme }: { optionInd
 
   if (!owner)
     return (
-      <div className="max-w-lg mx-auto p-4 bg-white rounded-xl shadow-lg space-y-4">
+      <div className="max-w-lg mx-auto p-4 bg-white shadow-lg space-y-4">
         <h2 className="text-lg font-semibold text-center">No prediction market found</h2>
       </div>
     );
@@ -117,12 +117,12 @@ export function PredictionBuySellShare({ optionIndex, colorScheme }: { optionInd
               defaultChecked
             />
             <div role="tabpanel" className="tab-content pt-4">
-              <div className={`bg-${colorScheme}-50 rounded-lg`}>
+              <div className={`bg-${colorScheme}-50`}>
                 <div className="space-y-4">
                   <input
                     type="number"
                     placeholder="Amount to buy"
-                    className={`input input-bordered input-sm w-full rounded-md placeholder-${colorScheme}-500 dark:placeholder-white dark:placeholder-opacity-70`}
+                    className={`input input-bordered input-sm w-full placeholder-${colorScheme}-500 dark:placeholder-white dark:placeholder-opacity-70`}
                     onChange={e => setInputBuyAmount(BigInt(e.target.value))}
                   />
 
@@ -185,7 +185,7 @@ export function PredictionBuySellShare({ optionIndex, colorScheme }: { optionInd
                   <input
                     type="number"
                     placeholder="Amount to sell"
-                    className={`input input-bordered input-sm w-full rounded-md placeholder-${colorScheme}-500 dark:placeholder-white dark:placeholder-opacity-70`}
+                    className={`input input-bordered input-sm w-full placeholder-${colorScheme}-500 dark:placeholder-white dark:placeholder-opacity-70`}
                     onChange={e => setInputSellAmount(BigInt(e.target.value))}
                   />