Merge pull request #15391 from chukegogo/feature/#15360_add_prediction_markets

add prediction market page to use cases [Fixes #15360]

Author: corwintines

public/content/prediction-markets/index.md

@@ -0,0 +1,81 @@
+---
+title: Prediction markets
+lang: en
+template: use-cases
+image: /images/use-cases/prediction-markets.png
+sidebarDepth: 2
+summaryPoint1: Receive financial incentives to generate accurate forecasts 
+summaryPoint2: High quality predictions about future events
+buttons: 
+  - content: Learn more
+    toId: how-prediction-markets-work
+  - content: Explore apps
+    toId: find-a-prediction-market
+    isSecondary: false
+---
+
+Prediction markets use crowd wisdom and financial incentives to forecast events. They offer diverse, high-quality data and gained traction during the 2024 U.S. elections.
+
+## How prediction markets work {#how-prediction-markets-work}
+
+Unlike traditional forecasting methods that rely on expert opinions, limited survey samples or historical data, prediction markets leverage **real-time financial incentives** and **crowd wisdom** to generate insights relating to a particular event—elections, crypto prices, sports outcomes—anything. 
+
+This allows anyone to signal support for a specific outcome with a financial commitment.
+ 
+By enabling betting on real-world events and adjusting the prices as new information arises, informed opinions are valued higher, and accuracy can be rewarded. 
+
+In theory, because bettors stand to profit from being correct, prediction markets can forecast outcomes with great precision. Blockchain-based prediction markets are even more exciting, as virtually anyone can take part in the forecasting and earn stablecoin or cryptocurrency rewards.
+
+## Why does this matter? {#why-does-this-matter}
+
+Unlike traditional forecasting, blockchain-based prediction markets are:
+
+<CardGrid className="grid grid-cols-[repeat(auto-fill,_minmax(min(100%,_280px),_1fr))] gap-8">
+  <Card title="Incentivized" emoji=":money_with_wings:" description="Participants stake real funds, which infers high-quality predictions."/>
+  <Card title="Decentralization" emoji="🌎" description="Using blockchain and smart contracts ensures transparent and automated payouts." />
+  <Card title="Market driven odds" emoji="🤝" description="Prices are set by traders buying and selling outcome shares, rather than preset by a centralized bookmaker." />
+</CardGrid>
+
+Even as an observer of the market, you can assess valuable data that would be otherwise unavailable. Think of it like this:
+
+1. Predictions are tied to a specific event (e.g. Will Beam Chain deploy by 2030?).
+2. Market participants buy and sell shares based on their confidence in any outcome.
+3. Prices adjust as more participants stake their beliefs, reflecting real-time insights.
+4. Anyone betting correctly earns proportionately to the amount staked. 
+5. Market observers can leverage the open data to inform research or discussion.
+
+## Find a prediction market {#find-a-prediction-market}
+
+There are several Ethereum-based prediction markets available. These are some of the most well-known prediction markets today:
+
+<PredictionMarketLists />
+
+<InfoBanner isWarning emoji="💡">
+  <p className="mt-0"><strong>Stay mindful of the risks</strong></p>
+  <p className="mt-2">Only bet what you can afford, and be aware of potential addictive behaviors.</p>
+</InfoBanner>
+
+## Challenges & Risks {#challenges-and-risks}
+
+Prediction markets on the blockchain face few challenges that can impact fairness, legality, and accuracy.
+
+⚠️ **Market Manipulation** – Wealthy players can distort outcomes through wash trading.  
+💧 **Liquidity Issues** – Low participation ([thin liquidity](https://www.investopedia.com/terms/t/thinmarket.asp)) can reduce market reliability.  
+🏛 **Regulatory Uncertainty** – Governments have imposed restrictions on some platforms.
+
+To mitigate these issues, Ethereum developers are experimenting with solutions like futarchy (governance by prediction markets) and decentralized identity verification.
+
+## Experimenting with prediction markets {#experimenting-with-prediction-markets}
+
+Prediction markets are reshaping decision-making in the digital age. By leveraging Ethereum, they offer **fair, open, and rewarding ways to predict the future.**
+
+There are many ways to use forecasting tools outside of financial gain. For example, in a [DevCon Improvement Proposal](https://forum.devcon.org/t/futarchy-decision-markets-for-deciding-next-devcon/5305) (DIP) it was suggested that the organizers of DevCon use prediction markets to anticipate attendance for future events. 
+
+This would help the organizers determine which location would lead to the largest event, compared to which location would lead to the most internationally accessible. The benefits of this mean the organizers of DevCon can expedite the amount of time required to screen multiple
+visa policies, airport access, and cost of living in the area while also gathering data on where prospective attendees would be excited to go.
+
+## Further reading {#further-reading}
+
+[From prediction markets to info finance](https://vitalik.eth.limo/general/2024/11/09/infofinance.html) - Vitalik Buterin  
+[Decentralized Prediction Market Development on Ethereum](https://blockchain.oodles.io/dev-blog/decentralized-prediction-market-development-ethereum/)  
+[The Augur Project Whitepaper](https://github.com/AugurProject/whitepaper)  

public/images/dapps/auger.png

@@ -0,0 +1,77 @@
+import ProductListComponent from "@/components/ProductList"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+
+import auger from "@/public/images/dapps/auger.png"
+import kalshi from "@/public/images/dapps/kalshi.png"
+import polymarket from "@/public/images/dapps/polymarket.png"
+
+const PredictionMarketLists = () => {
+  const productListSets = [
+    {
+      title: "Polymarket",
+      description: "",
+      image: polymarket,
+      alt: "Polymarket logo",
+      contentItems: [
+        <p key="polymarket-description">
+          A popular forecasting market with real-time trading.
+        </p>,
+        <div key="polymarket-button">
+          <ButtonLink
+            href="https://polymarket.com/"
+            target="_blank"
+            variant="outline"
+          >
+            Explore Polymarket
+          </ButtonLink>
+        </div>,
+      ],
+    },
+    {
+      title: "Augur",
+      description: "",
+      image: auger,
+      alt: "Augur logo",
+      contentItems: [
+        <p key="auger-description">
+          A fully decentralized prediction market protocol used for predicting
+          price trends. Disclaimer: you will need some technical expertise to
+          start using Augur.
+        </p>,
+        <div key="auger-button">
+          <ButtonLink
+            href="https://github.com/AugurProject"
+            target="_blank"
+            variant="outline"
+          >
+            Dive into Augur
+          </ButtonLink>
+        </div>,
+      ],
+    },
+    {
+      title: "Kalshi",
+      description: "",
+      image: kalshi,
+      alt: "Kalshi logo",
+      contentItems: [
+        <p key="kalshi-description">
+          a CFTC-compliant platform using Ethereum for USDC deposits. (USA only)
+        </p>,
+        <div key="kalshi-button">
+          <ButtonLink
+            href="https://kalshi.com/"
+            target="_blank"
+            variant="outline"
+          >
+            Try Kalshi
+          </ButtonLink>
+        </div>,
+      ],
+    },
+  ]
+
+  return <ProductListComponent content={productListSets} actionLabel="Go" />
+}
+
+export default PredictionMarketLists

public/images/dapps/kalshi.png

@@ -229,6 +229,11 @@ export const useNav = () => {
                   description: t("nav-ai-agents-description"),
                   href: "/ai-agents/",
                 },
+                {
+                  label: t("prediction-markets"),
+                  description: t("nav-prediction-markets-description"),
+                  href: "/prediction-markets/",
+                },
               ],
             },
           ],

public/images/use-cases/prediction-markets.png

@@ -295,6 +295,7 @@
   "nav-overview-label": "Overview",
   "nav-participate-overview-description": "Overview on how to participate",
   "nav-payments-description": "Ethereum payments are changing the way we send and receive money",
+  "nav-prediction-markets-description": "Prediction markets are a way to bet on the future",
   "nav-primary": "Primary",
   "nav-quizzes-description": "Find out how well you understand Ethereum and cryptocurrencies",
   "nav-quizzes-label": "Test your knowledge",
@@ -371,6 +372,7 @@
   "payments-page": "Payments",
   "pbs": "Proposer-builder separation",
   "pools": "Pooled staking",
+  "prediction-markets": "Prediction markets",
   "privacy-policy": "Privacy policy",
   "private-ethereum": "Private Ethereum",
   "product-disclaimer": "Products and services are listed as a convenience for the Ethereum community. Inclusion of a product or service <strong>does not represent an endorsement</strong> from the ethereum.org website team, or the Ethereum Foundation.",

src/components/Content/prediction-markets/PredictionMarketLists.tsx

@@ -4,6 +4,7 @@
   "template-usecase-dropdown-nft": "Non-fungible tokens (NFTs)",
   "template-usecase-dropdown-dao": "Decentralized autonomous organisations (DAOs)",
   "template-usecase-dropdown-payments": "Ethereum Payments",
+  "template-usecase-dropdown-prediction-markets": "Prediction Markets",
   "template-usecase-dropdown-social-networks": "Decentralized social networks",
   "template-usecase-dropdown-identity": "Decentralized identity",
   "template-usecase-dropdown-desci": "Decentralized science (DeSci)",
@@ -12,4 +13,4 @@
   "template-usecase-banner": "Uses of Ethereum are always developing and evolving. Add any info you think will make things clearer or more up to date.",
   "template-usecase-edit-link": "Edit page",
   "template-usecase-dropdown-aria": "Use case dropdown menu"
-}
+}

src/components/Nav/useNav.ts

@@ -5,6 +5,7 @@ import BannerNotification from "@/components/Banners/BannerNotification"
 import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
 import AiAgentProductLists from "@/components/Content/ai-agents/AiAgentProductLists"
 import BuildYourOwnAIAgent from "@/components/Content/ai-agents/BuildYourOwnAIAgent"
+import PredictionMarketLists from "@/components/Content/prediction-markets/PredictionMarketLists"
 import Emoji from "@/components/Emoji"
 import { ContentHero } from "@/components/Hero"
 import InlineLink from "@/components/ui/Link"
@@ -21,6 +22,7 @@ import { useTranslation } from "@/hooks/useTranslation"
 export const useCasesComponents = {
   AiAgentProductLists,
   BuildYourOwnAIAgent,
+  PredictionMarketLists,
 }
 
 type UseCasesLayoutProps = ChildOnlyProp &
@@ -125,6 +127,17 @@ export const UseCasesLayout = ({
           eventName: "ai-agents",
         },
       },
+      {
+        text: t(
+          "template-usecase:template-usecase-dropdown-prediction-markets"
+        ),
+        href: "/prediction-markets/",
+        matomo: {
+          eventCategory: "use cases menu",
+          eventAction: "click",
+          eventName: "prediction-markets",
+        },
+      },
     ],
   }