feat: migrate addressable over to hypelabs

.env

@@ -269,9 +269,9 @@ VITE_FEATURE_RFOX_FOX_ECOSYSTEM_PAGE=true
 
 VITE_FEATURE_LEDGER_READ_ONLY=true
 
-# Addressable
-VITE_ADDRESSABLE_TID=de008d61a08d42559c3c09a539728156
-VITE_ENABLE_ADDRESSABLE=false
+# HypeLab
+VITE_HYPELAB_PROPERTY_SLUG=4793fe16ca
+VITE_ENABLE_HYPELAB=false
 
 ## tenderly
 VITE_TENDERLY_API_KEY=WTkd0q0mmq2yfSoO-o8bOLlWB9i9gOyg

.env.production

@@ -1,6 +1,7 @@
 # feature flags
 VITE_FEATURE_MIXPANEL=true
-VITE_ENABLE_ADDRESSABLE=true
+VITE_ENABLE_HYPELAB=true
+VITE_FEATURE_ADDRESS_BOOK=true
 VITE_FEATURE_THORCHAIN_TCY_ACTIVITY=false
 
 # mixpanel

headers/csps/addressable.ts → headers/csps/hypelab.ts

@@ -5,12 +5,11 @@ import type { Csp } from '../types'
 const mode = process.env.MODE ?? process.env.NODE_ENV ?? 'development'
 const env = loadEnv(mode, process.cwd(), '')
 
-const isEnabled = env.VITE_ENABLE_ADDRESSABLE === 'true'
+const isEnabled = env.VITE_ENABLE_HYPELAB === 'true'
 
 export const csp: Csp = isEnabled
   ? {
-      'script-src': ['https://tag.adrsbl.io'],
-      'connect-src': ['https://tag.adrsbl.io'],
-      'img-src': ['https://tag.adrsbl.io'],
+      'script-src': ['https://api.hypelab.com'],
+      'connect-src': ['https://api.hypelab.com'],
     }
   : {}

headers/csps/index.ts

@@ -1,4 +1,3 @@
-import { csp as addressable } from './addressable'
 import { csp as alchemy } from './alchemy'
 import { csp as trustwallet } from './assetService/trustwallet'
 import { csp as base } from './base'
@@ -44,6 +43,7 @@ import { csp as thor } from './defi/swappers/Thor'
 import { csp as discord } from './discord'
 import { csp as banxa } from './fiatRamps/banxa'
 import { csp as onRamper } from './fiatRamps/onRamper'
+import { csp as hypelab } from './hypelab'
 import { csp as interFont } from './InterFont'
 import { csp as jupiter } from './jupiter'
 import { csp as ledger } from './ledger'
@@ -72,7 +72,7 @@ import { csp as webflow } from './webflow'
 
 export const csps = [
   base,
-  addressable,
+  hypelab,
   alchemy,
   moralis,
   chainflip,

src/components/MultiHopTrade/components/TradeConfirm/hooks/useTradeExecution.tsx

@@ -29,6 +29,7 @@ import { TradeRoutePaths } from '@/components/MultiHopTrade/types'
 import { useErrorToast } from '@/hooks/useErrorToast/useErrorToast'
 import { useNotificationToast } from '@/hooks/useNotificationToast'
 import { useWallet } from '@/hooks/useWallet/useWallet'
+import { HypeLabEvent, trackHypeLabEvent } from '@/lib/hypelab/hypelabSingleton'
 import { MixPanelEvent } from '@/lib/mixpanel/types'
 import { TradeExecution } from '@/lib/tradeExecution'
 import { assertUnreachable } from '@/lib/utils'
@@ -169,6 +170,9 @@ export const useTradeExecution = (
         const event =
           hopIndex === 0 ? MixPanelEvent.TradeConfirm : MixPanelEvent.TradeConfirmSecondHop
         trackMixpanelEvent(event, eventDataSnapshot)
+        if (hopIndex === 0) {
+          trackHypeLabEvent(HypeLabEvent.TradeConfirm)
+        }
       }
 
       const execution = new TradeExecution()
@@ -311,6 +315,7 @@ export const useTradeExecution = (
         const isLastHop = hopIndex === tradeQuote.steps.length - 1
         if (isLastHop && !hasMixpanelSuccessOrFailFiredRef.current) {
           trackMixpanelEvent(MixPanelEvent.TradeSuccess, eventDataSnapshot)
+          trackHypeLabEvent(HypeLabEvent.TradeSuccess)
           hasMixpanelSuccessOrFailFiredRef.current = true
         }
 

src/config.ts

@@ -140,8 +140,8 @@ const validators = {
   VITE_MIXPANEL_TOKEN: str({ default: '' }),
   VITE_SNAPSHOT_BASE_URL: url({ default: 'https://snapshot.org/#/shapeshiftdao.eth' }),
   VITE_FEATURE_MIXPANEL: bool({ default: false }),
-  VITE_ENABLE_ADDRESSABLE: bool({ default: false }),
-  VITE_ADDRESSABLE_TID: str({ default: '' }),
+  VITE_ENABLE_HYPELAB: bool({ default: false }),
+  VITE_HYPELAB_PROPERTY_SLUG: str({ default: '' }),
   VITE_FEATURE_DYNAMIC_LP_ASSETS: bool({ default: false }),
   VITE_FEATURE_READ_ONLY_ASSETS: bool({ default: false }),
   VITE_FEATURE_ARBITRUM_BRIDGE: bool({ default: false }),

src/index.tsx

@@ -1,5 +1,5 @@
 import '@/lib/polyfills'
-import '@/pixels/addressable'
+import '@/pixels/hypelab'
 
 import {
   breadcrumbsIntegration,

src/lib/hypelab/hypelabSingleton.ts

@@ -0,0 +1,23 @@
+export enum HypeLabEvent {
+  WalletConnected = 'wallet_connected',
+  TradeConfirm = 'trade_confirm',
+  TradeSuccess = 'trade_success',
+}
+
+export const getHypeLab = (): { logEvent: (event: string) => void } | undefined => {
+  const hypeLabEnabled = import.meta.env.VITE_ENABLE_HYPELAB === 'true'
+
+  if (!hypeLabEnabled) return undefined
+
+  const hypeLab = window.HypeLabAnalytics
+  if (!hypeLab || typeof hypeLab.logEvent !== 'function') return undefined
+
+  return hypeLab
+}
+
+export const trackHypeLabEvent = (event: HypeLabEvent): void => {
+  const hypeLab = getHypeLab()
+  if (hypeLab) {
+    hypeLab.logEvent(event)
+  }
+}

src/pixels/hypelab.ts

@@ -0,0 +1,47 @@
+const initHypeLabPixel = (): void => {
+  const enabledRaw = import.meta.env.VITE_ENABLE_HYPELAB
+  const propertySlug = import.meta.env.VITE_HYPELAB_PROPERTY_SLUG
+
+  const enabled = String(enabledRaw).toLowerCase() === 'true'
+  if (!enabled || !propertySlug) return
+
+  // Initialize global HypeLab objects
+  window.__hype_analytics = []
+  window.__hype_wids = []
+  window.HypeLabAnalytics = {
+    logEvent: (...args: unknown[]) => {
+      window.__hype_analytics?.push(args)
+    },
+    setWalletAddresses: (w: string[]) => {
+      window.__hype_wids = w
+    },
+  }
+
+  const script = document.createElement('script')
+  script.async = true
+  script.src = 'https://api.hypelab.com/v1/scripts/ha-sdk.js?v=0'
+  script.onload = () => {
+    const config = {
+      environment: 'production',
+      propertySlug,
+      privacy: { trackAllSessions: true },
+    }
+    if (window.HypeLabAnalytics?.Client) {
+      window.HypeLabAnalytics.setClient?.(new window.HypeLabAnalytics.Client(config))
+    }
+  }
+  script.onerror = () => {
+    console.error('Failed to load HypeLab analytics script')
+  }
+
+  const firstScript = document.getElementsByTagName('script')[0]
+  if (firstScript && firstScript.parentNode) {
+    firstScript.parentNode.insertBefore(script, firstScript)
+  } else if (document.head) {
+    document.head.appendChild(script)
+  } else {
+    document.documentElement.appendChild(script)
+  }
+}
+
+initHypeLabPixel()

src/state/slices/portfolioSlice/portfolioSlice.ts

@@ -16,6 +16,7 @@ import { accountToPortfolio, haveSameElements, makeAssets } from './utils'
 import { getChainAdapterManager } from '@/context/PluginProvider/chainAdapterSingleton'
 import { queryClient } from '@/context/QueryClientProvider/queryClient'
 import { fetchIsSmartContractAddressQuery } from '@/hooks/useIsSmartContractAddress/useIsSmartContractAddress'
+import { HypeLabEvent, trackHypeLabEvent } from '@/lib/hypelab/hypelabSingleton'
 import { getMixPanel } from '@/lib/mixpanel/mixPanelSingleton'
 import { MixPanelEvent } from '@/lib/mixpanel/types'
 import { accountManagement } from '@/react-queries/queries/accountManagement'
@@ -54,10 +55,14 @@ export const portfolio = createSlice({
 
           const data = { 'Wallet Id': walletId, 'Wallet Name': walletName }
           // if we already have state.walletId, we're switching wallets, otherwise connecting
+          const isNewConnect = !state.connectedWallet?.id
           getMixPanel()?.track(
-            state.connectedWallet?.id ? MixPanelEvent.SwitchWallet : MixPanelEvent.ConnectWallet,
+            isNewConnect ? MixPanelEvent.ConnectWallet : MixPanelEvent.SwitchWallet,
             data,
           )
+          if (isNewConnect) {
+            trackHypeLabEvent(HypeLabEvent.WalletConnected)
+          }
           state.connectedWallet = {
             id: walletId,
             name: walletName,

src/vite-env.d.ts

@@ -12,7 +12,7 @@ interface ImportMetaEnv {
   readonly VITE_FEATURE_OPTIMISM: string
   readonly VITE_FEATURE_ZCASH: string
   readonly VITE_FEATURE_MIXPANEL: string
-  readonly VITE_ENABLE_ADDRESSABLE: string
+  readonly VITE_ENABLE_HYPELAB: string
   readonly VITE_FEATURE_SAVERS_VAULTS: string
   readonly VITE_FEATURE_SAVERS_VAULTS_DEPOSIT: string
   readonly VITE_FEATURE_SAVERS_VAULTS_WITHDRAW: string
@@ -97,7 +97,7 @@ interface ImportMetaEnv {
   readonly VITE_ONRAMPER_WIDGET_URL: string
   readonly VITE_ONRAMPER_API_URL: string
   readonly VITE_ONRAMPER_API_KEY: string
-  readonly VITE_ADDRESSABLE_TID: string
+  readonly VITE_HYPELAB_PROPERTY_SLUG: string
   readonly VITE_YAT_NODE_URL: string
   readonly VITE_KEEPKEY_UPDATER_RELEASE_PAGE: string
   readonly VITE_KEEPKEY_DESKTOP_URL: string

src/window.d.ts

@@ -6,9 +6,13 @@ import type { ReduxState } from './state/reducer'
 declare global {
   interface Window {
     store: Store<ReduxState>
-    __adrsbl?: {
-      queue: unknown[]
-      run: (...args: unknown[]) => void
+    HypeLabAnalytics?: {
+      logEvent: (...args: unknown[]) => void
+      setWalletAddresses: (w: string[]) => void
+      setClient?: (client: unknown) => void
+      Client?: new (config: unknown) => unknown
     }
+    __hype_analytics?: unknown[]
+    __hype_wids?: string[]
   }
 }