Move location monitor to trade panel

manifoldmarkets · Sep 20, 2024 · 9ea4c59 · 9ea4c59
1 parent 1e76a81
commit 9ea4c59
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 74 deletions.
diff --git a/web/components/bet/bet-panel.tsx b/web/components/bet/bet-panel.tsx
@@ -65,6 +65,7 @@ import { YesNoSelector } from './yes-no-selector'
 import { blockFromSweepstakes, identityPending } from 'common/user'
 import { CashoutLimitWarning } from './cashout-limit-warning'
 import { InBeta, VerifyButton } from '../twomba/toggle-verify-callout'
+import { LocationMonitor } from '../gidx/location-monitor'
 
 export type BinaryOutcomes = 'YES' | 'NO' | undefined
 
@@ -393,11 +394,14 @@ export const BuyPanelBody = (props: {
       setIsSubmitting(false)
     }
   }
+  const [showLocationMonitor, setShowLocationMonitor] = useState(false)
+
   const betDisabled =
     isSubmitting ||
     !betAmount ||
     outcome === undefined ||
-    error === 'Insufficient balance'
+    error === 'Insufficient balance' ||
+    showLocationMonitor
 
   const limits =
     contract.outcomeType === 'STONK'
@@ -703,55 +707,63 @@ export const BuyPanelBody = (props: {
         {betType !== 'Limit' && (
           <Col className="gap-2">
             {user ? (
-              <WarningConfirmationButton
-                marketType="binary"
-                amount={betAmount}
-                warning={warning}
-                userOptedOutOfWarning={user.optOutBetWarnings}
-                onSubmit={submitBet}
-                ButtonClassName={clsx('flex-grow')}
-                actionLabelClassName={'line-clamp-1'}
-                isSubmitting={isSubmitting}
-                disabled={betDisabled}
-                size="xl"
-                color={
-                  pseudonymColor ??
-                  binaryMCColors?.[outcome == 'YES' ? 0 : 1] ??
-                  (outcome === 'NO' ? 'red' : 'green')
-                }
-                actionLabel={
-                  betDisabled ? (
-                    `Select ${formatOutcomeLabel(
-                      contract,
-                      'YES'
-                    )} or ${formatOutcomeLabel(contract, 'NO')}`
-                  ) : isStonk ? (
-                    <span>
-                      {formatOutcomeLabel(contract, outcome, pseudonymName)}{' '}
-                      <MoneyDisplay
-                        amount={betAmount}
-                        isCashContract={isCashContract}
-                      />
-                    </span>
-                  ) : (
-                    <span>
-                      {capitalize(TRADE_TERM)}{' '}
-                      {binaryMCOutcomeLabel ??
-                        formatOutcomeLabel(
-                          contract,
-                          outcome,
-                          pseudonymName
-                        )}{' '}
-                      to win{' '}
-                      <MoneyDisplay
-                        amount={currentPayout}
-                        isCashContract={isCashContract}
-                      />
-                    </span>
-                  )
-                }
-                inModal={!!onClose}
-              />
+              <>
+                <LocationMonitor
+                  contract={contract}
+                  user={user}
+                  setShowPanel={setShowLocationMonitor}
+                  showPanel={showLocationMonitor}
+                />
+                <WarningConfirmationButton
+                  marketType="binary"
+                  amount={betAmount}
+                  warning={warning}
+                  userOptedOutOfWarning={user.optOutBetWarnings}
+                  onSubmit={submitBet}
+                  ButtonClassName={clsx('flex-grow')}
+                  actionLabelClassName={'line-clamp-1'}
+                  isSubmitting={isSubmitting}
+                  disabled={betDisabled}
+                  size="xl"
+                  color={
+                    pseudonymColor ??
+                    binaryMCColors?.[outcome == 'YES' ? 0 : 1] ??
+                    (outcome === 'NO' ? 'red' : 'green')
+                  }
+                  actionLabel={
+                    betDisabled && !outcome ? (
+                      `Select ${formatOutcomeLabel(
+                        contract,
+                        'YES'
+                      )} or ${formatOutcomeLabel(contract, 'NO')}`
+                    ) : isStonk ? (
+                      <span>
+                        {formatOutcomeLabel(contract, outcome, pseudonymName)}{' '}
+                        <MoneyDisplay
+                          amount={betAmount ?? 0}
+                          isCashContract={isCashContract}
+                        />
+                      </span>
+                    ) : (
+                      <span>
+                        {capitalize(TRADE_TERM)}{' '}
+                        {binaryMCOutcomeLabel ??
+                          formatOutcomeLabel(
+                            contract,
+                            outcome,
+                            pseudonymName
+                          )}{' '}
+                        to win{' '}
+                        <MoneyDisplay
+                          amount={currentPayout}
+                          isCashContract={isCashContract}
+                        />
+                      </span>
+                    )
+                  }
+                  inModal={!!onClose}
+                />
+              </>
             ) : (
               <Button
                 color={outcome === 'NO' ? 'red' : 'green'}

diff --git a/web/components/bet/limit-order-panel.tsx b/web/components/bet/limit-order-panel.tsx
@@ -45,6 +45,7 @@ import { FeeDisplay } from './fees'
 import { MoneyDisplay } from './money-display'
 import { TRADE_TERM } from 'common/envs/constants'
 import { capitalize } from 'lodash'
+import { LocationMonitor } from '../gidx/location-monitor'
 
 export default function LimitOrderPanel(props: {
   contract:
@@ -140,6 +141,7 @@ export default function LimitOrderPanel(props: {
   const [limitProbInt, setLimitProbInt] = useState<number | undefined>(
     Math.round(initialProb * 100)
   )
+  const [showLocationMonitor, setShowLocationMonitor] = useState(false)
 
   const hasLimitBet = !!limitProbInt && !!betAmount
 
@@ -148,7 +150,8 @@ export default function LimitOrderPanel(props: {
     !outcome ||
     !betAmount ||
     !hasLimitBet ||
-    error === 'Insufficient balance'
+    error === 'Insufficient balance' ||
+    showLocationMonitor
 
   const preLimitProb =
     limitProbInt === undefined
@@ -281,7 +284,6 @@ export default function LimitOrderPanel(props: {
   }
   const returnPercent = formatPercent(currentReturn)
   const totalFees = getFeeTotal(fees)
-
   const hideYesNo = isBinaryMC || !!pseudonym
 
   return (
@@ -468,6 +470,12 @@ export default function LimitOrderPanel(props: {
           />
         </Row>
 
+        <LocationMonitor
+          contract={contract}
+          user={user}
+          setShowPanel={setShowLocationMonitor}
+          showPanel={showLocationMonitor}
+        />
         <Row className="items-center justify-between gap-2">
           {user && (
             <Button

diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
@@ -74,7 +74,6 @@ import {
 import { useLiveContractWithAnswers } from 'web/hooks/use-contract'
 import { VerifyButton } from '../twomba/toggle-verify-callout'
 import { InBeta } from '../twomba/toggle-verify-callout'
-import { LocationMonitor } from '../gidx/location-monitor'
 
 export const ContractOverview = memo(
   (props: {
@@ -174,7 +173,6 @@ export const BinaryOverview = (props: {
   chartAnnotations: ChartAnnotation[]
 }) => {
   const { contract, resolutionRating } = props
-  const [showLocationPane, setShowLocationPane] = useState(false)
   const user = useUser()
 
   const [showZoomer, setShowZoomer] = useState(false)
@@ -233,13 +231,7 @@ export const BinaryOverview = (props: {
         pointerMode={pointerMode}
         chartAnnotations={chartAnnotations}
       />
-      <LocationMonitor
-        contract={contract}
-        user={user}
-        setShowPanel={setShowLocationPane}
-        showPanel={showLocationPane}
-      />
-      {tradingAllowed(contract) && !showLocationPane && (
+      {tradingAllowed(contract) && (
         <BinaryBetPanel contract={contract} user={user} />
       )}
     </>

diff --git a/web/components/gidx/location-monitor.tsx b/web/components/gidx/location-monitor.tsx
@@ -3,6 +3,7 @@ import { useMonitorStatus } from 'web/hooks/use-monitor-status'
 import { User } from 'common/user'
 import { Col } from '../layout/col'
 import { Contract } from 'common/contract'
+import { TRADE_TERM } from 'common/envs/constants'
 
 export const LocationMonitor = (props: {
   contract: Contract
@@ -33,19 +34,13 @@ export const LocationMonitor = (props: {
     return null
   }
   return (
-    <Col className="gap-2 p-2">
-      <span className="text-xl font-semibold">Location Required</span>
-      <p>
-        You must share your location to participate in sweepstakes. Please allow
-        location sharing.
-      </p>
-      <div className="mt-2 flex justify-end">
-        <Button
-          loading={loading}
-          onClick={() => requestLocation()}
-          className="ml-2"
-        >
-          Share Location
+    <Col className=" p-2">
+      <span className="text-xl font-semibold">
+        Location required to participate in sweepstakes
+      </span>
+      <div className="mt-2 flex">
+        <Button size="xl" loading={loading} onClick={() => requestLocation()}>
+          Share location to {TRADE_TERM}
         </Button>
       </div>
       {monitorStatus === 'error' && (