diff --git a/frontend/src/features/MarketDetail/components/MarketBetting/Buy/form.ts b/frontend/src/features/MarketDetail/components/MarketBetting/Buy/form.ts index a0fb43d..5569eef 100644 --- a/frontend/src/features/MarketDetail/components/MarketBetting/Buy/form.ts +++ b/frontend/src/features/MarketDetail/components/MarketBetting/Buy/form.ts @@ -40,10 +40,14 @@ const useMarketBuyForm = (market: Market) => { ? new USD(betAmount).toCoins(denom, price) : Coins.fromValue(denom, betAmount) - return placeBet.mutateAsync({ - outcomeId: betOutcome, - coinsAmount: coinsAmount, - }) + return placeBet + .mutateAsync({ + outcomeId: betOutcome, + coinsAmount: coinsAmount, + }) + .then(() => { + form.reset() + }) } else { return Promise.reject() } diff --git a/frontend/src/features/MarketDetail/components/MarketBetting/Buy/index.tsx b/frontend/src/features/MarketDetail/components/MarketBetting/Buy/index.tsx index 3dcb06f..0bf0bf8 100644 --- a/frontend/src/features/MarketDetail/components/MarketBetting/Buy/index.tsx +++ b/frontend/src/features/MarketDetail/components/MarketBetting/Buy/index.tsx @@ -1,4 +1,4 @@ -import { Button, Stack } from "@mui/joy" +import { Button, Stack, Typography } from "@mui/joy" import { FormProvider } from "react-hook-form" import { useQuery } from "@tanstack/react-query" @@ -9,14 +9,25 @@ import { coinPricesQuery } from "@api/queries/Prices" import { OutcomeField } from "../OutcomeField" import { CoinsAmountField } from "../CoinsAmountField" import { useMarketBuyForm } from "./form" +import { getSharesPurchased } from "@utils/shares" +import { useLatestFormValues } from "@utils/forms" +import { Coins, USD } from "@utils/coins" const MarketBuyForm = (props: { market: Market }) => { const { market } = props const account = useCurrentAccount() const balances = useQuery(balancesQuery(account.bech32Address)) - const prices = useQuery(coinPricesQuery) + const price = useQuery(coinPricesQuery).data?.get(market.denom) const { form, canSubmit, onSubmit } = useMarketBuyForm(market) + const formValues = useLatestFormValues(form) + + const coinsAmount = + price && formValues.betAmount.value + ? formValues.betAmount.toggled + ? new USD(formValues.betAmount.value).toCoins(market.denom, price) + : Coins.fromValue(market.denom, formValues.betAmount.value) + : undefined return ( @@ -32,7 +43,7 @@ const MarketBuyForm = (props: { market: Market }) => { name="betAmount" denom={market.denom} balance={balances.data?.get(market.denom)} - price={prices.data?.get(market.denom)} + price={price} /> + + + Estimated shares + + {coinsAmount && formValues.betOutcome + ? getSharesPurchased( + market, + formValues.betOutcome, + coinsAmount, + ).toFormat(false) + : "-"} + + ) diff --git a/frontend/src/features/MarketDetail/components/MarketBetting/Claim/form.ts b/frontend/src/features/MarketDetail/components/MarketBetting/Claim/form.ts index dd59f00..8467176 100644 --- a/frontend/src/features/MarketDetail/components/MarketBetting/Claim/form.ts +++ b/frontend/src/features/MarketDetail/components/MarketBetting/Claim/form.ts @@ -22,7 +22,9 @@ const useMarketClaimForm = (market: Market) => { getShares(positions.data, market.winnerOutcome.id).units.gt(0) const onSubmit = () => { - return claimEarnings.mutateAsync() + return claimEarnings.mutateAsync().then(() => { + form.reset() + }) } const canSubmit = diff --git a/frontend/src/features/MarketDetail/components/MarketBetting/Sell/form.ts b/frontend/src/features/MarketDetail/components/MarketBetting/Sell/form.ts index ec15b27..4fb7b2a 100644 --- a/frontend/src/features/MarketDetail/components/MarketBetting/Sell/form.ts +++ b/frontend/src/features/MarketDetail/components/MarketBetting/Sell/form.ts @@ -29,10 +29,14 @@ const useMarketSellForm = (market: Market) => { if (sellAmount && sellOutcome) { const sharesAmount = Shares.fromCollateralValue(market.denom, sellAmount) - return cancelBet.mutateAsync({ - outcomeId: sellOutcome, - sharesAmount: sharesAmount, - }) + return cancelBet + .mutateAsync({ + outcomeId: sellOutcome, + sharesAmount: sharesAmount, + }) + .then(() => { + form.reset() + }) } else { return Promise.reject() } diff --git a/frontend/src/utils/shares.ts b/frontend/src/utils/shares.ts index f6f72d6..ebde45b 100644 --- a/frontend/src/utils/shares.ts +++ b/frontend/src/utils/shares.ts @@ -113,4 +113,40 @@ const getOddsForOutcome = ( return oddsForOutcome } -export { Shares, getShares, getPotentialWinnings, getOddsForOutcome } +const getSharesPurchased = ( + market: Market, + selectedOutcome: OutcomeId, + buyAmount: Coins, +): Shares => { + const selectedPool = + market.possibleOutcomes.find((outcome) => outcome.id === selectedOutcome) + ?.poolShares.units ?? BigNumber(0) + + const invariant = market.possibleOutcomes.reduce( + (prod, outcome) => prod.times(outcome.poolShares.units), + BigNumber(1), + ) + + const newOutcomePools = market.possibleOutcomes + .filter((outcome) => outcome.id !== selectedOutcome) + .map((outcome) => outcome.poolShares.units.plus(buyAmount.units)) + + const newSelectedPool = newOutcomePools.reduce( + (prod, newPool) => prod.div(newPool), + invariant, + ) + + const purchasedShares = selectedPool + .plus(buyAmount.units) + .minus(newSelectedPool) + + return Shares.fromCollateralUnits(market.denom, purchasedShares) +} + +export { + Shares, + getShares, + getPotentialWinnings, + getOddsForOutcome, + getSharesPurchased, +}