Display estimated shares amount to be bought

Levana-Protocol · Sep 19, 2024 · 836a52b · 836a52b
1 parent 82d1a10
commit 836a52b
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 13 deletions.
diff --git 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
@@ -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 (
     <FormProvider {...form}>
@@ -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}
         />
 
         <Button
@@ -44,6 +55,19 @@ const MarketBuyForm = (props: { market: Market }) => {
         >
           {form.formState.isSubmitting ? "Placing bet..." : "Place bet"}
         </Button>
+
+        <Stack direction="row" justifyContent="space-between">
+          <Typography level="body-sm">Estimated shares</Typography>
+          <Typography level="body-sm">
+            {coinsAmount && formValues.betOutcome
+              ? getSharesPurchased(
+                  market,
+                  formValues.betOutcome,
+                  coinsAmount,
+                ).toFormat(false)
+              : "-"}
+          </Typography>
+        </Stack>
       </Stack>
     </FormProvider>
   )

diff --git 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
@@ -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
@@ -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,
+}