diff --git a/frontend/src/api/mutations/PlaceBet.ts b/frontend/src/api/mutations/PlaceBet.ts index 8a1e8b4..b51541a 100644 --- a/frontend/src/api/mutations/PlaceBet.ts +++ b/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) => { diff --git a/frontend/src/api/queries/NtrnBalance.ts b/frontend/src/api/queries/NtrnBalance.ts index 0e798c8..174d8e8 100644 --- a/frontend/src/api/queries/NtrnBalance.ts +++ b/frontend/src/api/queries/NtrnBalance.ts @@ -32,4 +32,4 @@ const ntrnBalanceQuery = (address: string) => queryOptions({ queryFn: () => fetchNtrnBalance(address), }) -export { ntrnBalanceQuery } +export { ntrnBalanceQuery, BALANCE_KEYS } diff --git a/frontend/src/features/MarketDetail/components/MarketDetails/index.tsx b/frontend/src/features/MarketDetail/components/MarketDetails/index.tsx new file mode 100644 index 0000000..a6ae246 --- /dev/null +++ b/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 ( + } + placeholderContent={} + 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 ( + <> + + {market.title} + + + {market.description} + + + + {market.possibleOutcomes.map(outcome => + + + {getPercentage(outcome.totalTokens, marketSum)}% {outcome.label} + + + {outcome.totalTokens.toFixed(3)} Tokens + + + )} + + + ) +} + +const MarketDetailsPlaceholder = () => { + return ( + <> + + Loading this market's title... + + + Loading this market's description... + + + {["Yes", "No"].map(outcome => + + + 0.00% {outcome} + + + 0.000000 Tokens + + + )} + + + ) +} + +export { MarketDetails } diff --git a/frontend/src/features/MarketDetail/components/MarketOutcomes/index.tsx b/frontend/src/features/MarketDetail/components/MarketOutcomes/index.tsx deleted file mode 100644 index 943a507..0000000 --- a/frontend/src/features/MarketDetail/components/MarketOutcomes/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Box, Stack, Typography } from '@mui/joy' - -import { Market } from '@api/queries/Market' -import { getPercentage } from '@utils/number' -import { StyleProps } from '@utils/styles' -import { LoadableWidget } from '@lib/Loadable/Widget' -import { useSuspenseCurrentMarket } from '@features/MarketDetail/utils' - -const MarketOutcomes = (props: StyleProps) => { - return ( - } - placeholderContent={} - sx={props.sx} - /> - ) -} - -const MarketOutcomesContent = (props: { market: Market }) => { - const { market } = props - - return ( - - {market.possibleOutcomes.map(outcome => - - - {getPercentage(outcome.wallets, market.totalWallets)}% {outcome.label} - - - {outcome.totalTokens.toFixed(0)} {market.denom} - - - )} - - ) -} - -const MarketOutcomesPlaceholder = () => { - return ( - - {[0, 1, 2].map(index => - - - 0.00% Yes - - - 10000 untrn - - - )} - - ) -} - -export { MarketOutcomes } diff --git a/frontend/src/features/MarketDetail/components/MarketTitle/index.tsx b/frontend/src/features/MarketDetail/components/MarketTitle/index.tsx deleted file mode 100644 index 6ceeb49..0000000 --- a/frontend/src/features/MarketDetail/components/MarketTitle/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { 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' - -const MarketTitle = (props: StyleProps) => { - return ( - } - placeholderContent={} - sx={props.sx} - /> - ) -} - -const MarketTitleContent = (props: { market: Market }) => { - const { market } = props - - return ( - <> - - {market.title} - - - {market.description} - - - ) -} - -const MarketTitlePlaceholder = () => { - return ( - <> - - Loading this market's title... - - - Loading this market's description... - - - ) -} - -export { MarketTitle } diff --git a/frontend/src/features/MarketDetail/components/MyPositions/index.tsx b/frontend/src/features/MarketDetail/components/MyPositions/index.tsx new file mode 100644 index 0000000..c7ad31c --- /dev/null +++ b/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 ( + } + placeholderContent={} + 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 ( + <> + My positions + + {market.possibleOutcomes + .filter(outcome => positions.get(outcome.id)?.gt(0)) + .map(outcome => + + + {outcome.label} + + + {positions.get(outcome.id)?.toFixed(3)} Tokens + + + ) + } + + + ) +} + +const MyPositionsPlaceholder = () => { + return ( + <> + My positions + + {[0, 1, 2].map(index => + + + 0.00% Yes + + + 10000 TOKENS + + + )} + + + ) +} + +export { MyPositions } diff --git a/frontend/src/pages/Market/index.tsx b/frontend/src/pages/Market/index.tsx index 969b6cd..83c81ae 100644 --- a/frontend/src/pages/Market/index.tsx +++ b/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 ( @@ -22,19 +24,21 @@ const MarketPage = () => { gridTemplateAreas: { xs: buildGridAreas([ "title", - "outcomes", + "positions", "betting", ]), md: buildGridAreas([ "title betting", - "outcomes betting", + "positions betting", "rest betting", ]), }, }} > - - + + {account.isConnected && + + }