From 3f8261f9648def4bb8891d04cdfdd2d0b2ef48ee Mon Sep 17 00:00:00 2001
From: Alduin <alduin@levana.exchange>
Date: Fri, 20 Sep 2024 13:11:50 -0300
Subject: [PATCH 1/2] Tweaks to frontend

---
 .../components/MarketBetting/Buy/index.tsx    | 55 +++++++++----------
 frontend/src/pages/Market/index.tsx           |  8 +--
 frontend/src/utils/shares.ts                  | 16 +++---
 3 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/frontend/src/features/MarketDetail/components/MarketBetting/Buy/index.tsx b/frontend/src/features/MarketDetail/components/MarketBetting/Buy/index.tsx
index 3edd070..7f1cab2 100644
--- a/frontend/src/features/MarketDetail/components/MarketBetting/Buy/index.tsx
+++ b/frontend/src/features/MarketDetail/components/MarketBetting/Buy/index.tsx
@@ -6,12 +6,12 @@ import { useCurrentAccount } from "@config/chain"
 import type { Market, OutcomeId } from "@api/queries/Market"
 import { balancesQuery } from "@api/queries/Balances"
 import { coinPricesQuery } from "@api/queries/Prices"
-import { OutcomeField } from "../OutcomeField"
-import { CoinsAmountField } from "../CoinsAmountField"
-import { useMarketBuyForm } from "./form"
-import { getSharesPurchased } from "@utils/shares"
+import { getPurchaseResult } from "@utils/shares"
 import { useLatestFormValues } from "@utils/forms"
 import { Coins, USD } from "@utils/coins"
+import { useMarketBuyForm } from "./form"
+import { OutcomeField } from "../OutcomeField"
+import { CoinsAmountField } from "../CoinsAmountField"
 
 const MarketBuyForm = (props: { market: Market }) => {
   const { market } = props
@@ -56,13 +56,11 @@ const MarketBuyForm = (props: { market: Market }) => {
           {form.formState.isSubmitting ? "Placing bet..." : "Place bet"}
         </Button>
 
-        {coinsAmount && formValues.betOutcome && (
-          <ShowSharesPurchased
-            market={market}
-            betOutcome={formValues.betOutcome}
-            coinsAmount={coinsAmount}
-          />
-        )}
+        <ShowSharesPurchased
+          market={market}
+          betOutcome={formValues.betOutcome ?? undefined}
+          coinsAmount={coinsAmount}
+        />
       </Stack>
     </FormProvider>
   )
@@ -70,39 +68,36 @@ const MarketBuyForm = (props: { market: Market }) => {
 
 interface ShowSharesPurchasedProps {
   market: Market
-  betOutcome: OutcomeId
-  coinsAmount: Coins
+  betOutcome: OutcomeId | undefined
+  coinsAmount: Coins | undefined
 }
 
 const ShowSharesPurchased = (props: ShowSharesPurchasedProps) => {
-  const { outcome, fees, liquidity } = props.betOutcome
-    ? (() => {
-        const { outcome, fees, liquidity } = getSharesPurchased(
-          props.market,
-          props.betOutcome,
-          props.coinsAmount,
-        )
-        return {
-          outcome: outcome.toFormat(false),
-          fees: fees.toFormat(true),
-          liquidity: liquidity.toFormat(true),
-        }
-      })()
-    : { outcome: "-", fees: "-", liquidity: "-" }
+  const { market, betOutcome, coinsAmount } = props
+  const purchaseResult =
+    betOutcome !== undefined && coinsAmount !== undefined
+      ? getPurchaseResult(market, betOutcome, coinsAmount)
+      : undefined
 
   return (
     <>
       <Stack direction="row" justifyContent="space-between">
         <Typography level="body-sm">Estimated shares</Typography>
-        <Typography level="body-sm">{outcome}</Typography>
+        <Typography level="body-sm">
+          {purchaseResult?.shares.toFormat(false) ?? "-"}
+        </Typography>
       </Stack>
       <Stack direction="row" justifyContent="space-between">
         <Typography level="body-sm">Liquidity deposit</Typography>
-        <Typography level="body-sm">{liquidity}</Typography>
+        <Typography level="body-sm">
+          {purchaseResult?.liquidity.toFormat(true) ?? "-"}
+        </Typography>
       </Stack>
       <Stack direction="row" justifyContent="space-between">
         <Typography level="body-sm">Fees</Typography>
-        <Typography level="body-sm">{fees}</Typography>
+        <Typography level="body-sm">
+          {purchaseResult?.liquidity.toFormat(true) ?? "-"}
+        </Typography>
       </Stack>
     </>
   )
diff --git a/frontend/src/pages/Market/index.tsx b/frontend/src/pages/Market/index.tsx
index ab76eb3..d8e1c75 100644
--- a/frontend/src/pages/Market/index.tsx
+++ b/frontend/src/pages/Market/index.tsx
@@ -26,16 +26,16 @@ const MarketPage = () => {
             xs: buildGridAreas([
               "title",
               "outcomes",
-              "positions",
-              "liquidity",
+              ...(account.isConnected ? ["positions", "liquidity"] : []),
               "description",
               "betting",
             ]),
             md: buildGridAreas([
               "title betting",
               "outcomes betting",
-              "positions betting",
-              "liquidity betting",
+              ...(account.isConnected
+                ? ["positions betting", "liquidity betting"]
+                : []),
               "description betting",
               "rest betting",
             ]),
diff --git a/frontend/src/utils/shares.ts b/frontend/src/utils/shares.ts
index e604f5f..95ac586 100644
--- a/frontend/src/utils/shares.ts
+++ b/frontend/src/utils/shares.ts
@@ -2,6 +2,7 @@ import BigNumber from "bignumber.js"
 
 import type { Market, OutcomeId } from "@api/queries/Market"
 import type { Positions } from "@api/queries/Positions"
+import { LIQUDITY_PORTION } from "@api/mutations/PlaceBet"
 import {
   Asset,
   Coins,
@@ -10,7 +11,6 @@ import {
   type Denom,
 } from "./coins"
 import { formatToSignificantDigits, unitsToValue, valueToUnits } from "./number"
-import { LIQUDITY_PORTION } from "@api/mutations/PlaceBet"
 
 class Shares extends Asset {
   static symbol = "shares"
@@ -119,8 +119,8 @@ interface PoolSize {
   returned: BigNumber[]
 }
 
-interface SharesPurchased {
-  outcome: Shares
+interface PurchaseResult {
+  shares: Shares
   liquidity: Coins
   fees: Coins
 }
@@ -144,11 +144,11 @@ const addToPool = (poolInit: BigNumber[], amount: BigNumber): PoolSize => {
   return { pool, returned }
 }
 
-const getSharesPurchased = (
+const getPurchaseResult = (
   market: Market,
   selectedOutcomeString: OutcomeId,
   buyAmountTotalCoins: Coins,
-): SharesPurchased => {
+): PurchaseResult => {
   // To calculate the shares properly, we need to follow the same steps as
   // are taken by the contract, namely:
   //
@@ -203,7 +203,7 @@ const getSharesPurchased = (
   const purchasedShares = pool[selectedOutcome].minus(selectedPool)
 
   return {
-    outcome: Shares.fromCollateralUnits(market.denom, purchasedShares),
+    shares: Shares.fromCollateralUnits(market.denom, purchasedShares),
     liquidity: Coins.fromUnits(buyAmountTotalCoins.denom, liquidity),
     fees: Coins.fromUnits(buyAmountTotalCoins.denom, fees),
   }
@@ -211,9 +211,9 @@ const getSharesPurchased = (
 
 export {
   Shares,
+  type PurchaseResult,
   getShares,
   getPotentialWinnings,
   getOddsForOutcome,
-  getSharesPurchased,
+  getPurchaseResult,
 }
-export type { SharesPurchased }

From e273b3b53b99c25786b4c21fbbb2372579b109c4 Mon Sep 17 00:00:00 2001
From: Alduin <alduin@levana.exchange>
Date: Fri, 20 Sep 2024 14:19:21 -0300
Subject: [PATCH 2/2] Disclaimer modal

---
 frontend/src/app.tsx                          |   3 +
 .../common/TermsDisclaimer/index.tsx          | 138 ++++++++++++++++++
 frontend/src/config/theme.tsx                 |   6 +-
 3 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/common/TermsDisclaimer/index.tsx

diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
index 503dd67..1345bfe 100644
--- a/frontend/src/app.tsx
+++ b/frontend/src/app.tsx
@@ -4,6 +4,7 @@ import { Outlet, ScrollRestoration } from "react-router-dom"
 import { Navbar } from "@common/Navbar"
 import { Footer } from "@common/Footer"
 import { Geoblock } from "@common/Geoblock"
+import { TermsDisclaimer } from "@common/TermsDisclaimer"
 
 const App = () => {
   return (
@@ -13,6 +14,8 @@ const App = () => {
         <Outlet />
       </Geoblock>
       <Footer />
+
+      <TermsDisclaimer />
       <ScrollRestoration />
     </Stack>
   )
diff --git a/frontend/src/components/common/TermsDisclaimer/index.tsx b/frontend/src/components/common/TermsDisclaimer/index.tsx
new file mode 100644
index 0000000..cd0f509
--- /dev/null
+++ b/frontend/src/components/common/TermsDisclaimer/index.tsx
@@ -0,0 +1,138 @@
+import { useState } from "react"
+import {
+  Button,
+  Checkbox,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  Link,
+  Modal,
+  ModalDialog,
+} from "@mui/joy"
+import { Link as RouterLink } from "react-router-dom"
+import { Controller, useForm } from "react-hook-form"
+
+import { stylesOnlyAt } from "@utils/styles"
+
+const DISCLAIMER_URL = "https://static.levana.finance/legal/disclaimer.pdf"
+const TERMS_ACCEPTED_KEY = "terms_accepted"
+const TERMS_ACCEPTED_VALUE = "true"
+
+interface DisclaimerFormValues {
+  readTerms: boolean
+  agreeTerms: boolean
+}
+
+const TermsDisclaimer = () => {
+  const [accepted, setAccepted] = useState(
+    localStorage.getItem(TERMS_ACCEPTED_KEY) === TERMS_ACCEPTED_VALUE,
+  )
+
+  const form = useForm<DisclaimerFormValues>({
+    defaultValues: {
+      readTerms: false,
+      agreeTerms: false,
+    },
+  })
+
+  const onSubmit = (formValues: DisclaimerFormValues) => {
+    const readTerms = formValues.readTerms
+    const agreeTerms = formValues.agreeTerms
+
+    if (readTerms && agreeTerms) {
+      localStorage.setItem(TERMS_ACCEPTED_KEY, TERMS_ACCEPTED_VALUE)
+      setAccepted(true)
+    } else {
+      return Promise.reject()
+    }
+  }
+
+  const canSubmit = form.formState.isValid
+
+  return (
+    <Modal open={!accepted}>
+      <ModalDialog component="form" onSubmit={form.handleSubmit(onSubmit)}>
+        <DialogTitle sx={stylesOnlyAt("xs", { mb: 4 })}>
+          Terms of Service
+        </DialogTitle>
+
+        <DialogContent>
+          <Controller
+            name="readTerms"
+            control={form.control}
+            rules={{
+              required: "This field is required",
+            }}
+            render={({ field, fieldState }) => (
+              <FormControl error={!!fieldState.error} sx={{ mb: 1 }}>
+                <Checkbox
+                  value={`${field.value}`}
+                  onChange={(e) => {
+                    field.onChange(e.currentTarget.checked)
+                  }}
+                  label={
+                    <>
+                      I have read the complete disclaimer in the terms of
+                      service.
+                    </>
+                  }
+                  variant="solid"
+                />
+                <Link
+                  component={RouterLink}
+                  to={DISCLAIMER_URL}
+                  title="Disclaimer document"
+                  aria-label="Open disclaimer document"
+                  target="_blank"
+                  rel="noreferrer"
+                  sx={{ ml: 3.75 }}
+                >
+                  Read disclaimer
+                </Link>
+              </FormControl>
+            )}
+          />
+          <Controller
+            name="agreeTerms"
+            control={form.control}
+            rules={{
+              required: "This field is required",
+            }}
+            render={({ field, fieldState }) => (
+              <FormControl error={!!fieldState.error}>
+                <Checkbox
+                  value={`${field.value}`}
+                  onChange={(e) => {
+                    field.onChange(e.currentTarget.checked)
+                  }}
+                  label={
+                    <>
+                      I agree to the terms of service and I live in a country
+                      where I'm allowed to participate in Prediction markets.
+                    </>
+                  }
+                  variant="solid"
+                />
+              </FormControl>
+            )}
+          />
+        </DialogContent>
+
+        <DialogActions>
+          <Button
+            type="submit"
+            color="primary"
+            size="lg"
+            aria-label="Agree to the terms stated"
+            disabled={!canSubmit}
+          >
+            Accept
+          </Button>
+        </DialogActions>
+      </ModalDialog>
+    </Modal>
+  )
+}
+
+export { TermsDisclaimer }
diff --git a/frontend/src/config/theme.tsx b/frontend/src/config/theme.tsx
index 7c2dc8d..f13b2e6 100644
--- a/frontend/src/config/theme.tsx
+++ b/frontend/src/config/theme.tsx
@@ -237,6 +237,10 @@ const theme = extendTheme({
     lg: ".75rem",
     xl: "1.5rem",
   },
+  zIndex: {
+    modal: 1000000,
+    tooltip: 1000300,
+  },
   components: {
     JoyAlert: {
       defaultProps: {
@@ -702,7 +706,7 @@ const ThemeProvider = (props: PropsWithChildren) => {
           },
 
           ".notistack-SnackbarContainer": {
-            zIndex: 1000000,
+            zIndex: 1000600,
           },
 
           ".notistack-Snackbar": {