Update the referral mechanism

dapp/src/hooks/index.ts

@@ -27,7 +27,6 @@ export { default as useMobileMode } from "./useMobileMode"
 export { default as useBitcoinRecoveryAddress } from "./useBitcoinRecoveryAddress"
 export { default as useIsFetchedWalletData } from "./useIsFetchedWalletData"
 export { default as useLocalStorage } from "./useLocalStorage"
-export { default as useDetectReferral } from "./useDetectReferral"
 export { default as useReferral } from "./useReferral"
 export { default as useMats } from "./useMats"
 export { default as useIsEmbed } from "./useIsEmbed"

dapp/src/hooks/useInitApp.ts

@@ -4,7 +4,6 @@ import { useAccountsChangedOKX } from "./orangeKit/useAccountsChangedOKX"
 import { useInitDataFromSdk, useInitializeAcreSdk } from "./sdk"
 import { useSentry } from "./sentry"
 import useDetectEmbed from "./useDetectEmbed"
-import useDetectReferral from "./useDetectReferral"
 import { useDisconnectWallet } from "./useDisconnectWallet"
 import { useFetchBTCPriceUSD } from "./useFetchBTCPriceUSD"
 
@@ -13,7 +12,6 @@ export function useInitApp() {
   // useDetectThemeMode()
   useSentry()
   useDetectEmbed()
-  useDetectReferral()
   useInitializeAcreSdk()
   useInitDataFromSdk()
   useFetchBTCPriceUSD()

dapp/src/hooks/useLocalStorage.ts

@@ -1,4 +1,7 @@
-import { useLocalStorage as useRehooksLocalStorage } from "@rehooks/local-storage"
+import {
+  useLocalStorage as useRehooksLocalStorage,
+  writeStorage,
+} from "@rehooks/local-storage"
 
 export const parseLocalStorageValue = (value: string | null | undefined) => {
   if (
@@ -12,6 +15,8 @@ export const parseLocalStorageValue = (value: string | null | undefined) => {
   return value
 }
 
+export { writeStorage }
+
 export const getLocalStorageItem = (key: string): string | undefined => {
   const value = localStorage.getItem(key)
   return parseLocalStorageValue(value)

dapp/src/hooks/useReferral.ts

@@ -1,63 +1,33 @@
 import { env } from "#/constants"
-import { referralProgram } from "#/utils"
-
 import { useCallback, useMemo } from "react"
-import { MODAL_TYPES } from "#/types"
-import useIsEmbed from "./useIsEmbed"
-import useLocalStorage from "./useLocalStorage"
-import { useModal } from "./useModal"
+import useLocalStorage, { writeStorage } from "./useLocalStorage"
 
 type UseReferralReturn = {
   referral: number | null
-  detectReferral: () => void
   resetReferral: () => void
 }
 
+const LOCAL_STORAGE_KEY = "acre.referral"
+
+export const writeReferral = (value: string) => {
+  writeStorage(LOCAL_STORAGE_KEY, value)
+}
+
 export default function useReferral(): UseReferralReturn {
   const [referral, setReferral] = useLocalStorage<number>(
-    "acre.referral",
+    LOCAL_STORAGE_KEY,
     env.REFERRAL,
   )
-  const { openModal } = useModal()
-  const { isEmbed, embeddedApp } = useIsEmbed()
-
-  const detectReferral = useCallback(() => {
-    const param = referralProgram.getReferralFromURL()
-
-    if (isEmbed && embeddedApp) {
-      setReferral(referralProgram.getReferralByEmbeddedApp(embeddedApp))
-      return
-    }
-
-    if (param === null) {
-      setReferral(env.REFERRAL)
-      return
-    }
-
-    const convertedReferral = Number(param)
-
-    if (referralProgram.isValidReferral(convertedReferral)) {
-      setReferral(convertedReferral)
-    } else {
-      console.error("Incorrect referral")
-      setReferral(null)
-      openModal(MODAL_TYPES.UNEXPECTED_ERROR, {
-        withCloseButton: false,
-        closeOnEsc: false,
-      })
-    }
-  }, [isEmbed, embeddedApp, openModal, setReferral])
 
   const resetReferral = useCallback(() => {
     setReferral(env.REFERRAL)
   }, [setReferral])
 
   return useMemo(
     () => ({
-      detectReferral,
       resetReferral,
       referral,
     }),
-    [detectReferral, resetReferral, referral],
+    [resetReferral, referral],
   )
 }

dapp/src/router/index.tsx

@@ -12,6 +12,7 @@ import AccessPage from "#/pages/AccessPage"
 import WelcomePage from "#/pages/WelcomePage"
 import welcomePageLoader from "#/pages/WelcomePage/loader"
 import accessPageLoader from "#/pages/AccessPage/loader"
+import { writeReferral } from "#/hooks/useReferral"
 import { routerPath } from "./path"
 
 const mainLayoutLoader: LoaderFunction = ({ request }) => {
@@ -32,6 +33,24 @@ export const router = createBrowserRouter([
   {
     path: "/",
     element: <Layout />,
+    loader: ({ request }) => {
+      // TODO: display the error page/modal when the referral is invalid.
+      const referralCode = referralProgram.getReferralFromURL()
+      if (
+        referralCode &&
+        referralProgram.isValidReferral(Number(referralCode))
+      ) {
+        writeReferral(referralCode)
+      }
+
+      const embedApp = referralProgram.getEmbeddedApp(request.url)
+      if (referralProgram.isEmbedApp(embedApp)) {
+        writeReferral(
+          referralProgram.getReferralByEmbeddedApp(embedApp).toString(),
+        )
+      }
+      return null
+    },
     children: [
       {
         index: true,