Merge pull request #53 from Levana-Protocol/perp-4192/keep-forms-mounted

PERP-4192 | Keep forms mounted when switching tabs
Levana-Protocol · Oct 18, 2024 · dd0bb34 · dd0bb34
2 parents b24b924 + beb4d1e
commit dd0bb34
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 97 deletions.
diff --git a/frontend/src/features/MarketDetail/components/MarketBetting/Buy/index.tsx b/frontend/src/features/MarketDetail/components/MarketBetting/Buy/index.tsx
@@ -15,8 +15,13 @@ import { useMarketBuyForm } from "./form"
 import { OutcomeField } from "../OutcomeField"
 import { CoinsAmountField } from "../CoinsAmountField"
 
-const MarketBuyForm = (props: { market: Market }) => {
-  const { market } = props
+interface MarketBuyFormProps {
+  market: Market
+  isActive: boolean
+}
+
+const MarketBuyForm = (props: MarketBuyFormProps) => {
+  const { market, isActive } = props
   const account = useCurrentAccount()
   const balances = useQuery(balancesQuery(account.bech32Address))
   const price = useQuery(coinPricesQuery).data?.get(market.denom)
@@ -32,39 +37,41 @@ const MarketBuyForm = (props: { market: Market }) => {
       : undefined
 
   return (
-    <FormProvider {...form}>
-      <Stack
-        component="form"
-        onSubmit={form.handleSubmit(onSubmit)}
-        direction="column"
-        rowGap={1.5}
-      >
-        <OutcomeField name="betOutcome" market={market} />
-
-        <CoinsAmountField
-          name="betAmount"
-          denom={market.denom}
-          balance={balances.data?.get(market.denom)}
-          price={price}
-        />
-
-        <Button
-          aria-label="Place bet"
-          type="submit"
-          size="lg"
-          disabled={!canSubmit}
-          fullWidth
+    isActive && (
+      <FormProvider {...form}>
+        <Stack
+          component="form"
+          onSubmit={form.handleSubmit(onSubmit)}
+          direction="column"
+          rowGap={1.5}
         >
-          {form.formState.isSubmitting ? "Placing bet..." : "Place bet"}
-        </Button>
-
-        <ShowSharesPurchased
-          market={market}
-          betOutcome={formValues.betOutcome ?? undefined}
-          coinsAmount={coinsAmount}
-        />
-      </Stack>
-    </FormProvider>
+          <OutcomeField name="betOutcome" market={market} />
+
+          <CoinsAmountField
+            name="betAmount"
+            denom={market.denom}
+            balance={balances.data?.get(market.denom)}
+            price={price}
+          />
+
+          <Button
+            aria-label="Place bet"
+            type="submit"
+            size="lg"
+            disabled={!canSubmit}
+            fullWidth
+          >
+            {form.formState.isSubmitting ? "Placing bet..." : "Place bet"}
+          </Button>
+
+          <ShowSharesPurchased
+            market={market}
+            betOutcome={formValues.betOutcome ?? undefined}
+            coinsAmount={coinsAmount}
+          />
+        </Stack>
+      </FormProvider>
+    )
   )
 }
 

diff --git a/frontend/src/features/MarketDetail/components/MarketBetting/ProvideLiquidity/index.tsx b/frontend/src/features/MarketDetail/components/MarketBetting/ProvideLiquidity/index.tsx
@@ -9,42 +9,49 @@ import { coinPricesQuery } from "@api/queries/Prices"
 import { useProvideLiquidityForm } from "./form"
 import { CoinsAmountField } from "../CoinsAmountField"
 
-const MarketProvideLiquidityForm = (props: { market: Market }) => {
-  const { market } = props
+interface MarketProvideLiquidityFormProps {
+  market: Market
+  isActive: boolean
+}
+
+const MarketProvideLiquidityForm = (props: MarketProvideLiquidityFormProps) => {
+  const { market, isActive } = props
   const account = useCurrentAccount()
   const balances = useQuery(balancesQuery(account.bech32Address))
   const price = useQuery(coinPricesQuery).data?.get(market.denom)
 
   const { form, canSubmit, onSubmit } = useProvideLiquidityForm(market)
 
   return (
-    <FormProvider {...form}>
-      <Stack
-        component="form"
-        onSubmit={form.handleSubmit(onSubmit)}
-        direction="column"
-        rowGap={1.5}
-      >
-        <CoinsAmountField
-          name="liquidityAmount"
-          denom={market.denom}
-          balance={balances.data?.get(market.denom)}
-          price={price}
-        />
-
-        <Button
-          aria-label="Provide liquidity"
-          type="submit"
-          size="lg"
-          disabled={!canSubmit}
-          fullWidth
+    isActive && (
+      <FormProvider {...form}>
+        <Stack
+          component="form"
+          onSubmit={form.handleSubmit(onSubmit)}
+          direction="column"
+          rowGap={1.5}
         >
-          {form.formState.isSubmitting
-            ? "Providing liquidity..."
-            : "Provide liquidity"}
-        </Button>
-      </Stack>
-    </FormProvider>
+          <CoinsAmountField
+            name="liquidityAmount"
+            denom={market.denom}
+            balance={balances.data?.get(market.denom)}
+            price={price}
+          />
+
+          <Button
+            aria-label="Provide liquidity"
+            type="submit"
+            size="lg"
+            disabled={!canSubmit}
+            fullWidth
+          >
+            {form.formState.isSubmitting
+              ? "Providing liquidity..."
+              : "Provide liquidity"}
+          </Button>
+        </Stack>
+      </FormProvider>
+    )
   )
 }
 

diff --git a/frontend/src/features/MarketDetail/components/MarketBetting/Sell/index.tsx b/frontend/src/features/MarketDetail/components/MarketBetting/Sell/index.tsx
@@ -13,8 +13,13 @@ import { useMarketSellForm } from "./form"
 import { OutcomeField } from "../OutcomeField"
 import { SharesAmountField } from "../SharesAmountField"
 
-const MarketSellForm = (props: { market: Market }) => {
-  const { market } = props
+interface MarketSellFormProps {
+  market: Market
+  isActive: boolean
+}
+
+const MarketSellForm = (props: MarketSellFormProps) => {
+  const { market, isActive } = props
   const account = useCurrentAccount()
   const positions = useQuery(positionsQuery(account.bech32Address, market))
 
@@ -30,34 +35,36 @@ const MarketSellForm = (props: { market: Market }) => {
     : undefined
 
   return (
-    <FormProvider {...form}>
-      <Stack
-        component="form"
-        onSubmit={form.handleSubmit(onSubmit)}
-        direction="column"
-        rowGap={1.5}
-      >
-        <OutcomeField name="sellOutcome" market={market} />
-
-        <SharesAmountField name="sellAmount" balance={sharesBalance} />
-
-        <Button
-          aria-label="Cancel bet"
-          type="submit"
-          size="lg"
-          disabled={!canSubmit}
-          fullWidth
+    isActive && (
+      <FormProvider {...form}>
+        <Stack
+          component="form"
+          onSubmit={form.handleSubmit(onSubmit)}
+          direction="column"
+          rowGap={1.5}
         >
-          {form.formState.isSubmitting ? "Cancelling bet..." : "Cancel bet"}
-        </Button>
-
-        <ShowSharesSold
-          market={market}
-          sellOutcome={formValues.sellOutcome ?? undefined}
-          sharesAmount={sharesAmount}
-        />
-      </Stack>
-    </FormProvider>
+          <OutcomeField name="sellOutcome" market={market} />
+
+          <SharesAmountField name="sellAmount" balance={sharesBalance} />
+
+          <Button
+            aria-label="Cancel bet"
+            type="submit"
+            size="lg"
+            disabled={!canSubmit}
+            fullWidth
+          >
+            {form.formState.isSubmitting ? "Cancelling bet..." : "Cancel bet"}
+          </Button>
+
+          <ShowSharesSold
+            market={market}
+            sellOutcome={formValues.sellOutcome ?? undefined}
+            sharesAmount={sharesAmount}
+          />
+        </Stack>
+      </FormProvider>
+    )
   )
 }
 

diff --git a/frontend/src/features/MarketDetail/components/MarketBetting/index.tsx b/frontend/src/features/MarketDetail/components/MarketBetting/index.tsx
@@ -98,7 +98,8 @@ const MarketBettingForm = (props: { market: Market; status: MarketStatus }) => {
             py: 1,
             width: "max-content",
             borderRadius: 0,
-            borderBottom: action === "sell" ? "2px solid white" : undefined,
+            borderBottom:
+              action === "liquidity" ? "2px solid white" : undefined,
           }}
           onClick={() => {
             setAction("liquidity")
@@ -108,11 +109,12 @@ const MarketBettingForm = (props: { market: Market; status: MarketStatus }) => {
         </Button>
       </Stack>
 
-      {match(action)
-        .with("buy", () => <MarketBuyForm market={market} />)
-        .with("sell", () => <MarketSellForm market={market} />)
-        .with("liquidity", () => <MarketProvideLiquidityForm market={market} />)
-        .exhaustive()}
+      <MarketBuyForm market={market} isActive={action === "buy"} />
+      <MarketSellForm market={market} isActive={action === "sell"} />
+      <MarketProvideLiquidityForm
+        market={market}
+        isActive={action === "liquidity"}
+      />
     </>
   )
 }