Preselect mascot choice based on choice query param

frontend/src/pages/HomePage/index.tsx

@@ -9,7 +9,7 @@ import { useWeb3 } from '../../hooks/useWeb3.ts'
 import { Alert } from '../../components/Alert'
 import { StringUtils } from '../../utils/string.utils.ts'
 import { useAppState } from '../../hooks/useAppState.ts'
-import { Navigate } from 'react-router-dom'
+import { Navigate, useSearchParams } from 'react-router-dom'
 import { DateUtils } from '../../utils/date.utils.ts'
 import { MascotChoices } from '../../types'
 import { NumberUtils } from '../../utils/number.utils.ts'
@@ -25,7 +25,14 @@ export const HomePage: FC = () => {
     setPreviousVoteForCurrentWallet,
   } = useAppState()
 
-  const [selectedChoice, setSelectedChoice] = useState<MascotChoices | null>(null)
+  const [searchParams] = useSearchParams()
+  const preselectedMascotChoice = searchParams.get('choice') ?? null
+  const preselectedMascotChoiceNullableInt = NumberUtils.toNullableInt(preselectedMascotChoice)
+  const preselectMascotChoice = NumberUtils.isValidMascotChoiceId(preselectedMascotChoiceNullableInt)
+    ? preselectedMascotChoiceNullableInt
+    : null
+
+  const [selectedChoice, setSelectedChoice] = useState<MascotChoices | null>(preselectMascotChoice)
   const [pageStatus, setPageStatus] = useState<
     'loading' | 'error' | 'success' | 'insufficient-balance' | 'vote'
   >('vote')
@@ -38,7 +45,10 @@ export const HomePage: FC = () => {
   }, [account])
 
   useEffect(() => {
-    setSelectedChoice(previousVote)
+    if (!NumberUtils.isValidMascotChoiceId(selectedChoice)) {
+      setSelectedChoice(previousVote)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousVote])
 
   const actionBtnLabelContent = useMemo(() => {

frontend/src/utils/number.utils.ts

@@ -1,11 +1,23 @@
+import { MascotChoices } from '../types'
+
 export abstract class NumberUtils {
   // Compatible with https://github.com/MetaMask/metamask-extension/blob/v10.7.0/ui/helpers/utils/icon-factory.js#L84-L88
   static jsNumberForAddress(address: string) {
     const addr = address.slice(2, 10)
     return parseInt(addr, 16)
   }
 
-  static isValidMascotChoiceId(choiceId: number | null) {
+  static toNullableInt(from: string | null | undefined): number | null {
+    if (from === null || from === undefined) {
+      return null
+    }
+
+    const int = parseInt(from, 10)
+
+    return Number.isNaN(int) || !Number.isFinite(int) ? null : int
+  }
+
+  static isValidMascotChoiceId(choiceId: number | null): choiceId is MascotChoices {
     if (choiceId === null) return false
 
     return Number.isInteger(choiceId) && choiceId >= 0 && choiceId <= 2