Merge branch 'main' into improve-liq-price

components/DepositForm.tsx

@@ -33,6 +33,7 @@ import Decimal from 'decimal.js'
 import useIpAddress from 'hooks/useIpAddress'
 import { walletBalanceForToken } from './StakeForm'
 import { ClientContextKeys } from 'utils/constants'
+import { usePlausible } from 'next-plausible'
 
 const set = mangoStore.getState().set
 
@@ -63,6 +64,7 @@ function DespositForm({ token: selectedToken, clientContext }: StakeFormProps) {
   const submitting = mangoStore((s) => s.submittingBoost)
   const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false)
   const { maxSolDeposit } = useSolBalance()
+  const plausible = usePlausible()
   const { usedTokens, totalTokens } = useMangoAccountAccounts()
   const { jlpGroup } = useMangoGroup()
   const groupLoaded = mangoStore((s) => s.groupLoaded)
@@ -113,6 +115,7 @@ function DespositForm({ token: selectedToken, clientContext }: StakeFormProps) {
 
     if (!group || !depositBank || !publicKey) return
 
+    plausible('PositionEntryStart')
     set((state) => {
       state.submittingBoost = true
     })
@@ -139,6 +142,14 @@ function DespositForm({ token: selectedToken, clientContext }: StakeFormProps) {
       })
       setInputAmount('')
       setSizePercentage('')
+      plausible('PositionEntrySuccess', {
+        props: {
+          description: `${publicKey.toString()} ${inputAmount} ${
+            depositBank.name
+          }`,
+          wallet: publicKey.toString(),
+        },
+      })
       await sleep(500)
       if (!mangoAccount) {
         await actions.fetchMangoAccounts(publicKey)
@@ -150,6 +161,12 @@ function DespositForm({ token: selectedToken, clientContext }: StakeFormProps) {
       set((state) => {
         state.submittingBoost = false
       })
+      plausible('PositionEntryError', {
+        props: {
+          error: `${e}`,
+          wallet: publicKey.toString(),
+        },
+      })
       if (!isMangoError(e)) return
       notify({
         title: 'Transaction failed',

components/StakeForm.tsx

@@ -60,6 +60,7 @@ import { YIELD_BUTTON_CLASSES } from './Stake'
 import { useTheme } from 'next-themes'
 import usePositions from 'hooks/usePositions'
 import { WRAPPED_SOL_MINT } from '@project-serum/serum/lib/token-instructions'
+import { usePlausible } from 'next-plausible'
 
 export const MIN_SOL_BALANCE_FOR_ACCOUNT = 0.045
 
@@ -111,6 +112,7 @@ export const walletBalanceForToken = (
 function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
   const { theme } = useTheme()
   const { positions } = usePositions()
+  const plausible = usePlausible()
   const { t } = useTranslation(['common', 'account'])
   const [depositToken, setDepositToken] = useState(selectedToken)
   const [inputAmount, setInputAmount] = useState('')
@@ -323,6 +325,7 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
     set((state) => {
       state.submittingBoost = true
     })
+    plausible('PositionEntryStart')
     try {
       // const newAccountfNum = getNextAccountNumber(mangoAccounts)
       let stakeAmount = parseFloat(inputAmount)
@@ -371,6 +374,14 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
       })
       setInputAmount('')
       setSizePercentage('')
+      plausible('PositionEntrySuccess', {
+        props: {
+          description: `${publicKey.toString()} ${inputAmount} ${
+            stakeBank.name
+          } ${leverage}x`,
+          wallet: publicKey.toString(),
+        },
+      })
       await sleep(500)
       if (!mangoAccount) {
         await actions.fetchMangoAccounts(publicKey)
@@ -382,6 +393,12 @@ function StakeForm({ token: selectedToken, clientContext }: StakeFormProps) {
       set((state) => {
         state.submittingBoost = false
       })
+      plausible('PositionEntryError', {
+        props: {
+          error: `${e}`,
+          wallet: publicKey.toString(),
+        },
+      })
       if (!isMangoError(e)) return
       notify({
         title: 'Transaction failed',

components/wallet/ConnectWalletButton.tsx

@@ -7,9 +7,11 @@ import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { Popover, Transition } from '@headlessui/react'
 import mangoStore from '@store/mangoStore'
 import { WalletName, WalletReadyState } from '@solana/wallet-adapter-base'
+import { usePlausible } from 'next-plausible'
 
 export default function ConnectWalletButton() {
   const { t } = useTranslation('common')
+  const plausible = usePlausible()
   const { wallet, wallets, select, connected, connect } = useWallet()
   const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
   const [lastWalletName] = useLocalStorageState<WalletName | null>(
@@ -30,16 +32,31 @@ export default function ConnectWalletButton() {
     return wallet?.adapter.icon || wallets[0]?.adapter.icon
   }, [wallets, lastWalletName])
 
+  const handleConnect = () => {
+    if (wallet) {
+      connect()
+    } else {
+      if (lastWalletName) {
+        select(lastWalletName)
+      } else {
+        select(detectedWallets?.[0]?.adapter.name)
+      }
+    }
+    plausible('ConnectWallet', {
+      props: {
+        walletConnected: wallet?.adapter?.publicKey?.toString(),
+        walletProvider:
+          wallet?.adapter?.name ||
+          lastWalletName ||
+          detectedWallets?.[0]?.adapter.name,
+      },
+    })
+  }
+
   return (
     <div className="relative">
       <button
-        onClick={() => {
-          if (wallet) {
-            connect()
-          } else {
-            select(lastWalletName || detectedWallets[0].adapter.name)
-          }
-        }}
+        onClick={handleConnect}
         className="raised-button-neutral group flex h-12 w-48 items-center after:rounded-full sm:w-40 lg:w-44"
       >
         <div className="relative z-10 flex h-full items-center justify-center space-x-2 px-2.5 group-hover:mt-1 group-active:mt-2 md:px-4">

pages/_app.tsx

@@ -2,7 +2,7 @@ import '../styles/globals.css'
 import 'react-range-slider-input/dist/style.css'
 
 import type { AppProps } from 'next/app'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import {
   Adapter,
   WalletAdapterNetwork,
@@ -132,9 +132,10 @@ function MyApp({ Component, pageProps }: AppProps) {
           >
             <MangoProvider />
             <ThemeProvider defaultTheme="Light" storageKey={THEME_KEY}>
-              <Telemetry />
               <Layout>
-                <Component {...pageProps} />
+                <Telemetry>
+                  <Component {...pageProps} />
+                </Telemetry>
               </Layout>
               <TransactionNotification />
             </ThemeProvider>
@@ -152,7 +153,7 @@ type TelemetryProps = {
   walletConnected: string
 }
 
-const Telemetry = () => {
+const Telemetry = ({ children }: { children: ReactNode }) => {
   const { wallet } = useWallet()
   const [telemetryProps, setTelemetryProps] = useState<
     TelemetryProps | undefined
@@ -183,6 +184,8 @@ const Telemetry = () => {
       scriptProps={{ id: 'plausible' }}
       pageviewProps={telemetryProps}
       trackOutboundLinks={true}
-    />
+    >
+      {children}
+    </PlausibleProvider>
   )
 }