feat(wallet): add open beta warning

apps/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@palladxyz/extension",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

packages/features/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@palladxyz/features",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "",
   "type": "module",
   "module": "dist/index.js",

packages/features/src/address-book/views/address-book.tsx

@@ -46,7 +46,7 @@ export const AddressBookView = ({
               <div
                 // biome-ignore lint/suspicious/noArrayIndexKey: won't update
                 key={index}
-                className="relative px-6 flex justify-between btn text-base font-medium overflow-x-auto group"
+                className="relative px-6 flex justify-between btn text-base font-medium overflow-hidden group"
                 data-testid="addressBook/contact"
               >
                 <Link to="/send" state={{ address: contact.address }}>

packages/features/src/common/store/app.ts

@@ -1,50 +1,40 @@
 import { getLocalPersistence } from "@palladxyz/persistence"
-import { DEFAULT_NETWORK } from "@palladxyz/vault"
 import { create } from "zustand"
 import { createJSONStorage, persist } from "zustand/middleware"
 
 import { VaultState } from "../lib/const"
 
 // TODO: Make network a generic type that can support networks other than just Mina
 type AppState = {
-  network: string
   vaultState: VaultState
   shareData: boolean
+  betaBannerVisible: boolean
 }
 
 type AppQueries = {
   isInitialized: () => boolean
 }
 
 type AppMutators = {
-  setNetwork: (network: string) => void
   setVaultState: (vaultState: VaultState) => void
   setVaultStateInitialized: () => void
   setVaultStateUninitialized: () => void
   setShareData: (shareData: boolean) => void
+  setBetaBannerVisible: (betaBannerVisible: boolean) => void
 }
 
 type AppStore = AppState & AppMutators & AppQueries
 
-// TODO: this should be with vite
-// const VITE_APP_DEFAULT_NETWORK = import.meta.env.VITE_APP_DEFAULT_NETWORK || 'Mainnet'
-const defaultNetwork = DEFAULT_NETWORK
-
 export const useAppStore = create<AppStore>()(
   persist(
     (set, get) => ({
-      network: defaultNetwork,
+      betaBannerVisible: true,
       vaultState: VaultState[VaultState.UNINITIALIZED],
       shareData: true,
       isInitialized: () => {
         const { vaultState } = get()
         return vaultState === VaultState[VaultState.INITIALIZED]
       },
-      setNetwork(network) {
-        return set({
-          network,
-        })
-      },
       setShareData(shareData) {
         return set({ shareData })
       },
@@ -59,6 +49,9 @@ export const useAppStore = create<AppStore>()(
         const { setVaultState } = get()
         return setVaultState(VaultState.UNINITIALIZED)
       },
+      setBetaBannerVisible(betaBannerVisible) {
+        return set({ betaBannerVisible })
+      },
     }),
     {
       name: "PalladApp",

packages/features/src/router.tsx

@@ -7,6 +7,7 @@ import { Toaster } from "sonner"
 
 import { AddressBookRoute } from "./address-book/routes/address-book"
 import { NewAddressRoute } from "./address-book/routes/new-address"
+import { useAppStore } from "./common/store/app"
 import { ErrorView } from "./error-renderer/views/error"
 import { UnlockWalletRoute } from "./lock/routes/unlock-wallet"
 import { NotFoundRoute } from "./not-found/routes/not-found"
@@ -42,11 +43,12 @@ import { OverviewRoute } from "./wallet/routes/overview"
 
 dayjs.extend(relativeTime)
 
-const mixpanelConfig = {
-  track_pageview: true,
-}
-
 export const Router = () => {
+  const shareData = useAppStore((state) => state.shareData)
+  const mixpanelConfig = {
+    track_pageview: true,
+    opt_out_tracking_by_default: shareData ?? false,
+  }
   return (
     <MixpanelProvider
       config={mixpanelConfig}

packages/features/src/settings/routes/privacy.tsx

@@ -1,7 +1,16 @@
+import { useAppStore } from "@/common/store/app"
 import { useNavigate } from "react-router-dom"
 import { PrivacyView } from "../views/privacy"
 
 export const PrivacyRoute = () => {
   const navigate = useNavigate()
-  return <PrivacyView onCloseClicked={() => navigate(-1)} />
+  const shareData = useAppStore((state) => state.shareData)
+  const setShareData = useAppStore((state) => state.setShareData)
+  return (
+    <PrivacyView
+      onCloseClicked={() => navigate(-1)}
+      shareData={shareData}
+      setShareData={setShareData}
+    />
+  )
 }

packages/features/src/settings/views/privacy.tsx

@@ -1,11 +1,18 @@
 import { AppLayout } from "@/components/app-layout"
 import { SettingsPageLayout } from "@/components/settings-page-layout"
+import clsx from "clsx"
 
 type PrivacyViewProps = {
   onCloseClicked: () => void
+  shareData: boolean
+  setShareData: (shareData: boolean) => void
 }
 
-export const PrivacyView = ({ onCloseClicked }: PrivacyViewProps) => {
+export const PrivacyView = ({
+  onCloseClicked,
+  shareData,
+  setShareData,
+}: PrivacyViewProps) => {
   return (
     <AppLayout>
       <SettingsPageLayout title="Privacy" onCloseClicked={onCloseClicked}>
@@ -16,7 +23,12 @@ export const PrivacyView = ({ onCloseClicked }: PrivacyViewProps) => {
           </div>
           <input
             type="checkbox"
-            className="toggle [--tglbg:#F6C177] bg-white hover:bg-white border-[#F6C177]"
+            className={clsx(
+              "toggle bg-white hover:bg-white border-[#F6C177]",
+              shareData && "[--tglbg:#F6C177]",
+            )}
+            checked={shareData}
+            onChange={(event) => setShareData(event.target.checked)}
           />
         </div>
       </SettingsPageLayout>

packages/features/src/wallet/components/info-bar.tsx

@@ -0,0 +1,26 @@
+import { InfoIcon, XIcon } from "lucide-react"
+
+type InfoBarProps = {
+  onClose: () => void
+}
+
+export const InfoBar = ({ onClose }: InfoBarProps) => {
+  return (
+    <div className="px-8">
+      <div className="flex gap-2 items-center w-full bg-secondary p-4 rounded-xl">
+        <div className="p-2 bg-neutral rounded-full">
+          <InfoIcon className="text-primary" />
+        </div>
+        <div className="flex flex-col">
+          <h2>Open Beta version</h2>
+          <p className="text-gray-400 text-sm">
+            Only works for Berkeley before Mainnet launch
+          </p>
+        </div>
+        <button type="button" onClick={onClose}>
+          <XIcon size={20} className="text-gray-400" />
+        </button>
+      </div>
+    </div>
+  )
+}

packages/features/src/wallet/routes/overview.tsx

@@ -3,6 +3,7 @@ import { useFiatPrice } from "@palladxyz/offchain-data"
 import { useAccount } from "@/common/hooks/use-account"
 import { useTransactions } from "@/common/hooks/use-transactions"
 
+import { useAppStore } from "@/common/store/app"
 import { format } from "date-fns"
 import { take, takeLast } from "rambda"
 import { useState } from "react"
@@ -15,6 +16,10 @@ export const OverviewRoute = () => {
   >()
   const navigate = useNavigate()
   const account = useAccount()
+  const betaBannerVisible = useAppStore((state) => state.betaBannerVisible)
+  const setBetaBannerVisible = useAppStore(
+    (state) => state.setBetaBannerVisible,
+  )
   const { data: transactions, isLoading: transactionsLoading } =
     useTransactions()
   const latestTwoTransactions = take(2, transactions ?? [])
@@ -50,6 +55,8 @@ export const OverviewRoute = () => {
       setCurrentPriceIndex={setCurrentPriceIndex}
       transactions={latestTwoTransactions}
       publicAddress={account.data?.publicKey ?? ""}
+      betaBannerVisible={betaBannerVisible}
+      setBetaBannerVisible={setBetaBannerVisible}
       onSend={() => navigate("/send")}
       onReceive={() => navigate("/receive")}
     />

packages/features/src/wallet/views/overview.tsx

@@ -5,6 +5,7 @@ import { Skeleton } from "@/components/skeleton"
 import type { Tx } from "@palladxyz/pallad-core"
 import { Link } from "react-router-dom"
 import SlotCounter from "react-slot-counter"
+import { InfoBar } from "../components/info-bar"
 import { PortfolioValueChart } from "../components/portfolio-value-chart"
 import { TxTile } from "../components/tx-tile"
 
@@ -17,6 +18,8 @@ type OverviewViewProps = {
   setCurrentPriceIndex: (currentPriceIndex: number | undefined) => void
   transactions: Tx[]
   publicAddress: string
+  betaBannerVisible: boolean
+  setBetaBannerVisible: (betaBannerVisible: boolean) => void
   onSend: () => void
   onReceive: () => void
 }
@@ -30,13 +33,18 @@ export const OverviewView = ({
   setCurrentPriceIndex,
   transactions,
   publicAddress,
+  betaBannerVisible,
+  setBetaBannerVisible,
   onSend,
   onReceive,
 }: OverviewViewProps) => {
   const [bucks, cents] = balance.toFixed(2).toString().split(".")
   return (
     <AppLayout>
       <MenuBar variant="dashboard" publicAddress={publicAddress} />
+      {betaBannerVisible ? (
+        <InfoBar onClose={() => setBetaBannerVisible(false)} />
+      ) : null}
       <Skeleton loading={loading} h="62px">
         <PortfolioValueChart
           lastMonthPrices={lastMonthPrices}