Display user bets

frontend/src/api/mutations/PlaceBet.ts

@@ -10,6 +10,7 @@ import { MarketId, OutcomeId } from '@api/queries/Market'
 import { POSITIONS_KEYS } from '@api/queries/Positions'
 import { NTRN } from '@utils/tokens'
 import { AppError, errorsMiddleware } from '@utils/errors'
+import { BALANCE_KEYS } from '@api/queries/NtrnBalance'
 
 interface PlaceBetRequest {
   deposit: {
@@ -67,6 +68,7 @@ const usePlaceBet = (marketId: MarketId) => {
 
       return querierAwaitCacheAnd(
         () => queryClient.invalidateQueries({ queryKey: POSITIONS_KEYS.market(account.bech32Address, marketId)}),
+        () => queryClient.invalidateQueries({ queryKey: BALANCE_KEYS.address(account.bech32Address)}),
       )
     },
     onError: (err, args) => {

frontend/src/api/queries/NtrnBalance.ts

@@ -32,4 +32,4 @@ const ntrnBalanceQuery = (address: string) => queryOptions({
   queryFn: () => fetchNtrnBalance(address),
 })
 
-export { ntrnBalanceQuery }
+export { ntrnBalanceQuery, BALANCE_KEYS }

frontend/src/features/MarketDetail/components/MarketDetails/index.tsx

@@ -0,0 +1,92 @@
+import { Box, Stack, Typography } from '@mui/joy'
+
+import { Market } from '@api/queries/Market'
+import { StyleProps } from '@utils/styles'
+import { LoadableWidget } from '@lib/Loadable/Widget'
+import { useSuspenseCurrentMarket } from '@features/MarketDetail/utils'
+import { getPercentage } from '@utils/number'
+import BigNumber from 'bignumber.js'
+
+const MarketDetails = (props: StyleProps) => {
+  return (
+    <LoadableWidget
+      useDeps={useSuspenseCurrentMarket}
+      renderContent={(market) => <MarketDetailsContent market={market} />}
+      placeholderContent={<MarketDetailsPlaceholder />}
+      sx={props.sx}
+    />
+  )
+}
+
+const MarketDetailsContent = (props: { market: Market }) => {
+  const { market } = props
+  const marketSum = market.possibleOutcomes.reduce((sum, outcome) => sum.plus(outcome.totalTokens), BigNumber(0))
+
+  return (
+    <>
+      <Typography level="h3">
+        {market.title}
+      </Typography>
+      <Typography level="body-lg">
+        {market.description}
+      </Typography>
+
+      <Stack
+        direction="row"
+        alignItems="center"
+        gap={4}
+        sx={{ mt: 2 }}
+      >
+        {market.possibleOutcomes.map(outcome =>
+          <Box key={outcome.id}>
+            <Typography
+              level="title-lg"
+              fontWeight={600}
+              color={outcome.label === "Yes" ? "success" : outcome.label === "No" ? "danger" : "neutral"}
+            >
+              {getPercentage(outcome.totalTokens, marketSum)}% {outcome.label}
+            </Typography>
+            <Typography level="title-md" textColor="text.secondary" fontWeight={500}>
+              {outcome.totalTokens.toFixed(3)} Tokens
+            </Typography>
+          </Box>
+        )}
+      </Stack>
+    </>
+  )
+}
+
+const MarketDetailsPlaceholder = () => {
+  return (
+    <>
+      <Typography level="h3">
+        Loading this market's title...
+      </Typography>
+      <Typography level="body-lg">
+        Loading this market's description...
+      </Typography>
+      <Stack
+        direction="row"
+        alignItems="center"
+        gap={4}
+        sx={{ mt: 2 }}
+      >
+        {["Yes", "No"].map(outcome =>
+          <Box key={outcome}>
+            <Typography
+              level="title-lg"
+              fontWeight={600}
+            >
+              0.00% {outcome}
+            </Typography>
+            <Typography level="title-md" textColor="text.secondary" fontWeight={500}>
+              0.000000 Tokens
+            </Typography>
+          </Box>
+        )}
+      </Stack>
+    </>
+  )
+}
+
+export { MarketDetails }

frontend/src/features/MarketDetail/components/MyPositions/index.tsx

@@ -0,0 +1,87 @@
+import { Box, Stack, Typography } from '@mui/joy'
+import { useSuspenseQuery } from '@tanstack/react-query'
+
+import { useCurrentAccount } from '@config/chain'
+import { Market } from '@api/queries/Market'
+import { Positions, positionsQuery } from '@api/queries/Positions'
+import { StyleProps } from '@utils/styles'
+import { LoadableWidget } from '@lib/Loadable/Widget'
+import { useSuspenseCurrentMarket } from '@features/MarketDetail/utils'
+
+const MyPositions = (props: StyleProps) => {
+  return (
+    <LoadableWidget
+      useDeps={useDeps}
+      renderContent={({ market, positions }) => <MyPositionsContent market={market} positions={positions} />}
+      placeholderContent={<MyPositionsPlaceholder />}
+      sx={props.sx}
+    />
+  )
+}
+
+const useDeps = () => {
+  const account = useCurrentAccount()
+  const market = useSuspenseCurrentMarket()
+  const positions = useSuspenseQuery(positionsQuery(account.bech32Address, market.id)).data
+
+  return { market, positions }
+}
+
+const MyPositionsContent = (props: { market: Market, positions: Positions }) => {
+  const { market, positions } = props
+
+  return (
+    <>
+      <Typography level="title-md" fontWeight={600} sx={{ mb: 2 }}>My positions</Typography>
+      <Stack
+        direction="row"
+        alignItems="center"
+        gap={4}
+      >
+        {market.possibleOutcomes
+          .filter(outcome => positions.get(outcome.id)?.gt(0))
+          .map(outcome =>
+            <Box key={outcome.id}>
+              <Typography
+                level="title-lg"
+                fontWeight={600}
+                color={outcome.label === "Yes" ? "success" : outcome.label === "No" ? "danger" : "neutral"}
+              >
+                {outcome.label}
+              </Typography>
+              <Typography level="title-md" textColor="text.secondary" fontWeight={500}>
+                {positions.get(outcome.id)?.toFixed(3)} Tokens
+              </Typography>
+            </Box>
+          )
+        }
+      </Stack>
+    </>
+  )
+}
+
+const MyPositionsPlaceholder = () => {
+  return (
+    <>
+      <Typography level="title-md" fontWeight={600} sx={{ mb: 2 }}>My positions</Typography>
+      <Stack
+        direction="row"
+        alignItems="center"
+        gap={4}
+      >
+        {[0, 1, 2].map(index =>
+          <Box key={index}>
+            <Typography level="body-md" fontWeight={600}>
+              0.00% Yes
+            </Typography>
+            <Typography level="body-sm" fontWeight={500}>
+              10000 TOKENS
+            </Typography>
+          </Box>
+        )}
+      </Stack>
+    </>
+  )
+}
+
+export { MyPositions }

frontend/src/pages/Market/index.tsx

@@ -1,14 +1,16 @@
+import { useAccount } from 'graz'
 import { Box } from '@mui/joy'
 
 import { buildGridAreas } from '@utils/styles'
 import { BasePage } from '@common/BasePage'
 import { useSuspenseCurrentMarket } from '@features/MarketDetail/utils'
-import { MarketTitle } from '@features/MarketDetail/components/MarketTitle'
-import { MarketOutcomes } from '@features/MarketDetail/components/MarketOutcomes'
+import { MarketDetails } from '@features/MarketDetail/components/MarketDetails'
+import { MyPositions } from '@features/MarketDetail/components/MyPositions'
 import { MarketBetting } from '@features/MarketDetail/components/MarketBetting'
 
 const MarketPage = () => {
   useSuspenseCurrentMarket()
+  const account = useAccount()
 
   return (
     <BasePage>
@@ -22,19 +24,21 @@ const MarketPage = () => {
           gridTemplateAreas: {
             xs: buildGridAreas([
               "title",
-              "outcomes",
+              "positions",
               "betting",
             ]),
             md: buildGridAreas([
               "title betting",
-              "outcomes betting",
+              "positions betting",
               "rest betting",
             ]),
           },
         }}
       >
-        <MarketTitle sx={{ gridArea: "title" }} />
-        <MarketOutcomes sx={{ gridArea: "outcomes" }} />
+        <MarketDetails sx={{ gridArea: "title" }} />
+        {account.isConnected &&
+          <MyPositions sx={{ gridArea: "positions" }} />
+        }
         <MarketBetting sx={{ gridArea: "betting", maxWidth: { md: 400 }, height: "max-content" }} />
       </Box>
     </BasePage>