Allow passing referral in the URL for dApp

dapp/.env

@@ -7,8 +7,7 @@ VITE_SENTRY_DSN=""
 
 # TODO: Use a more general source
 VITE_ETH_HOSTNAME_HTTP="https://sepolia.infura.io/v3/c80e8ccdcc4c4a809bce4fc165310617"
-# TODO: Set the correct referral
-VITE_REFERRAL=123
+VITE_REFERRAL=0
 
 # TODO: Set this env variable in CI.
 VITE_TBTC_API_ENDPOINT=""

dapp/package.json

@@ -23,6 +23,7 @@
     "@orangekit/react": "1.0.0-beta.29",
     "@orangekit/sign-in-with-wallet": "1.0.0-beta.6",
     "@reduxjs/toolkit": "^2.2.0",
+    "@rehooks/local-storage": "^2.4.5",
     "@safe-global/safe-core-sdk-types": "^5.0.1",
     "@sentry/react": "^7.98.0",
     "@sentry/types": "^7.102.0",

dapp/src/constants/index.ts

@@ -12,3 +12,4 @@ export * from "./staking"
 export { default as tbtc } from "./tbtc"
 export * from "./time"
 export { default as wallets } from "./wallets"
+export { default as referrals } from "./referrals"

dapp/src/constants/referrals.ts

@@ -0,0 +1,6 @@
+import env from "#/constants/env"
+
+export default {
+  DEFAULT: env.REFERRAL,
+  STAKING_REWARDS: 48450,
+}

dapp/src/contexts/StakeFlowContext.tsx

@@ -4,8 +4,8 @@ import {
   useAcreContext,
   useStakeFlow,
 } from "#/acre-react/hooks"
-import { env } from "#/constants"
 import useBitcoinRecoveryAddress from "#/hooks/useBitcoinRecoveryAddress"
+import useReferral from "#/hooks/useReferral"
 
 type StakeFlowContextValue = Omit<UseStakeFlowReturn, "initStake"> & {
   initStake: () => Promise<void>
@@ -25,12 +25,13 @@ export function StakeFlowProvider({ children }: { children: React.ReactNode }) {
     stake,
   } = useStakeFlow()
   const bitcoinRecoveryAddress = useBitcoinRecoveryAddress()
+  const { referral } = useReferral()
 
   const initStake = useCallback(async () => {
     if (!acre) throw new Error("Acre SDK not defined")
 
-    await acreInitStake(env.REFERRAL, bitcoinRecoveryAddress)
-  }, [acre, acreInitStake, bitcoinRecoveryAddress])
+    await acreInitStake(referral, bitcoinRecoveryAddress)
+  }, [acre, acreInitStake, bitcoinRecoveryAddress, referral])
 
   const context = useMemo(
     () => ({

dapp/src/hooks/index.ts

@@ -29,3 +29,6 @@ export { default as useTriggerConnectWalletModal } from "./useTriggerConnectWall
 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"

dapp/src/hooks/useDetectReferral.ts

@@ -0,0 +1,10 @@
+import { useEffect } from "react"
+import useReferral from "./useReferral"
+
+export default function useDetectReferral() {
+  const { detectReferral } = useReferral()
+
+  useEffect(() => {
+    detectReferral()
+  }, [detectReferral])
+}

dapp/src/hooks/useInitApp.ts

@@ -3,13 +3,15 @@ import { useAccountsChangedUnisat } from "./orangeKit/useAccountsChangedUnisat"
 import { useDisconnectOKX } from "./orangeKit/useDisconnectOKX"
 import { useInitDataFromSdk, useInitializeAcreSdk } from "./sdk"
 import { useSentry } from "./sentry"
+import useDetectReferral from "./useDetectReferral"
 import { useDisconnectWallet } from "./useDisconnectWallet"
 import { useFetchBTCPriceUSD } from "./useFetchBTCPriceUSD"
 
 export function useInitApp() {
   // TODO: Let's uncomment when dark mode is ready
   // useDetectThemeMode()
   useSentry()
+  useDetectReferral()
   useInitializeAcreSdk()
   useInitDataFromSdk()
   useFetchBTCPriceUSD()

dapp/src/hooks/useLocalStorage.ts

@@ -0,0 +1,5 @@
+import { useLocalStorage as useRehooksLocalStorage } from "@rehooks/local-storage"
+
+export default function useLocalStorage<T>(key: string, defaultValue: T) {
+  return useRehooksLocalStorage(key, defaultValue)
+}

dapp/src/hooks/useReferral.ts

@@ -0,0 +1,48 @@
+import { referrals } from "#/constants"
+import { useCallback, useMemo } from "react"
+import useLocalStorage from "./useLocalStorage"
+
+const PARAM_NAME = "ref"
+
+function isExistingReferral(detectedReferral: number) {
+  const referral = Object.values(referrals)
+  return referral.includes(detectedReferral)
+}
+
+type UseReferralReturn = {
+  referral: number
+  detectReferral: () => void
+  resetReferral: () => void
+}
+
+export default function useReferral(): UseReferralReturn {
+  const [referral, setReferral] = useLocalStorage<number>(
+    "referral",
+    referrals.DEFAULT,
+  )
+
+  const detectReferral = useCallback(() => {
+    const params = new URLSearchParams(window.location.search)
+    const param = params.get(PARAM_NAME)
+    const detectedReferral = param ? parseInt(param, 10) : null
+
+    if (detectedReferral && isExistingReferral(detectedReferral)) {
+      setReferral(detectedReferral)
+    } else {
+      setReferral(referrals.DEFAULT)
+    }
+  }, [setReferral])
+
+  const resetReferral = useCallback(() => {
+    setReferral(referrals.DEFAULT)
+  }, [setReferral])
+
+  return useMemo(
+    () => ({
+      detectReferral,
+      resetReferral,
+      referral,
+    }),
+    [detectReferral, resetReferral, referral],
+  )
+}