Tell firefox users to tick box

web/components/gidx/location-monitor.tsx

@@ -5,6 +5,7 @@ import { Col } from '../layout/col'
 import { Contract } from 'common/contract'
 import { TRADE_TERM } from 'common/envs/constants'
 import { useState, useEffect } from 'react'
+import Image from 'next/image'
 
 export const LocationMonitor = (props: {
  contract: Contract
@@ -36,11 +37,12 @@ export const LocationMonitor = (props: {
  return null
  }
  return (
- <Col className="py-2">
+ <Col className="gap-2 py-2">
  <span className="text-xl font-semibold">
  Location required to participate in sweepstakes
  </span>
- <div className="mt-2 flex">
+ <FirefoxWarning />
+ <div className="flex">
  <Button
  size="xl"
  loading={loading}
@@ -55,12 +57,30 @@ export const LocationMonitor = (props: {
  </span>
  )}
  {monitorStatus !== 'success' && (
- <span className="mt-2 text-red-500">{monitorStatusMessage}</span>
+ <span className=" text-red-500">{monitorStatusMessage}</span>
  )}
  </Col>
  )
 }
 
+export const FirefoxWarning = () => {
+ const isFirefox =
+ typeof window !== 'undefined' &&
+ navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+
+ if (isFirefox) {
+ return (
+ <Image
+ src="/firefox-remember.png"
+ alt="Firefox Remember Location"
+ width={500}
+ height={200}
+ />
+ )
+ }
+ return null
+}
+
 export const useShowAfterLoadingTime = (
  loading: boolean,
  thresholdMS: number

web/components/gidx/location-panel.tsx

@@ -6,7 +6,7 @@ import { useLocation } from 'web/hooks/use-location'
 import { LoadingIndicator } from '../widgets/loading-indicator'
 import { useEffect } from 'react'
 import { useNativeInfo } from '../native-message-provider'
-import { useShowAfterLoadingTime } from './location-monitor'
+import { FirefoxWarning, useShowAfterLoadingTime } from './location-monitor'
 import { Col } from '../layout/col'
 
 export const LocationPanel = (props: {
@@ -47,6 +47,7 @@ export const LocationPanel = (props: {
  return (
  <Col>
  <LoadingIndicator />
+ <FirefoxWarning />
  {showLoadingNote && (
  <span className="text-warning mt-2">
  Loading location may take a while, hold on!
@@ -64,6 +65,7 @@ export const LocationPanel = (props: {
  You must allow location sharing to verify that you're in a participating
  municipality.
  </span>
+ <FirefoxWarning />
  <BottomRow>
  <Button color={'gray-white'} onClick={back}>
  Back