@huma-finance/widgets 0.0.73-beta.939 → 0.0.73-beta.950

package/dist/src/hooks/useLogOnFirstMount.d.ts

@@ -0,0 +1,3 @@
+import { LoggingActions } from '../../../huma-web-shared/src';
+declare const useLogOnFirstMount: (action: LoggingActions, data?: object) => void;
+export default useLogOnFirstMount;

package/dist/src/store/widgets.reducers.d.ts

@@ -1,5 +1,6 @@
 import { Approval } from '../../../huma-shared/src';
 import { PayloadAction } from '@reduxjs/toolkit';
+import { LoggingContext } from '../../../huma-web-shared/src';
 import { MultisendPayload, WIDGET_STEP, WidgetStream } from './widgets.store';
 export declare const widgetSlice: import('@reduxjs/toolkit').Slice<import('./widgets.store').WidgetState, {
     resetState: (state: import('immer/dist/internal').WritableDraft<import('./widgets.store').WidgetState>) => void;
@@ -29,6 +30,7 @@ export declare const widgetSlice: import('@reduxjs/toolkit').Slice<import('./wid
     setSolanaSignature: (state: import('immer/dist/internal').WritableDraft<import('./widgets.store').WidgetState>, { payload }: PayloadAction<string>) => void;
     setTxHash: (state: import('immer/dist/internal').WritableDraft<import('./widgets.store').WidgetState>, { payload }: PayloadAction<string>) => void;
     setPointsAccumulated: (state: import('immer/dist/internal').WritableDraft<import('./widgets.store').WidgetState>, { payload }: PayloadAction<number | undefined>) => void;
+    setLoggingContext: (state: import('immer/dist/internal').WritableDraft<import('./widgets.store').WidgetState>, { payload }: PayloadAction<LoggingContext>) => void;
     setError: (state: import('immer/dist/internal').WritableDraft<import('./widgets.store').WidgetState>, { payload, }: PayloadAction<{
         errorMessage: string;
         errorReason?: string;
@@ -51,6 +53,6 @@ export declare const resetState: import('@reduxjs/toolkit').ActionCreatorWithout
 }, "widget/setPaymentAmount">, setStream: import('@reduxjs/toolkit').ActionCreatorWithPayload<Partial<{
     borrowFlowrate: string;
     durationInSeconds: number;
-}>, "widget/setStream">, setMultisend: import('@reduxjs/toolkit').ActionCreatorWithPayload<MultisendPayload, "widget/setMultisend">, setSupplyAmount: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "widget/setSupplyAmount">, setWithdrawAmount: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "widget/setWithdrawAmount">, setWithdrawShares: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "widget/setWithdrawShares">, setRedeemAmount: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "widget/setRedeemAmount">, setRedeemShares: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "widget/setRedeemShares">, setSolanaSignature: import('@reduxjs/toolkit').ActionCreatorWithPayload<string, "widget/setSolanaSignature">, setTxHash: import('@reduxjs/toolkit').ActionCreatorWithPayload<string, "widget/setTxHash">, setPointsAccumulated: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<number | undefined, "widget/setPointsAccumulated">;
+}>, "widget/setStream">, setMultisend: import('@reduxjs/toolkit').ActionCreatorWithPayload<MultisendPayload, "widget/setMultisend">, setSupplyAmount: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "widget/setSupplyAmount">, setWithdrawAmount: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "widget/setWithdrawAmount">, setWithdrawShares: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "widget/setWithdrawShares">, setRedeemAmount: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "widget/setRedeemAmount">, setRedeemShares: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, "widget/setRedeemShares">, setSolanaSignature: import('@reduxjs/toolkit').ActionCreatorWithPayload<string, "widget/setSolanaSignature">, setTxHash: import('@reduxjs/toolkit').ActionCreatorWithPayload<string, "widget/setTxHash">, setPointsAccumulated: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<number | undefined, "widget/setPointsAccumulated">, setLoggingContext: import('@reduxjs/toolkit').ActionCreatorWithPayload<LoggingContext, "widget/setLoggingContext">;
 declare const _default: import('redux').Reducer<import('./widgets.store').WidgetState>;
 export default _default;

package/dist/src/store/widgets.selectors.d.ts

@@ -1,2 +1,4 @@
+import { LoggingContextHelper } from '../../../huma-web-shared/src';
 import { RootState } from '.';
 export declare const selectWidgetState: (state: RootState) => import('./widgets.store').WidgetState;
+export declare const selectWidgetLoggingContext: (state: RootState) => LoggingContextHelper;

package/dist/src/store/widgets.store.d.ts

@@ -1,4 +1,5 @@
 import { Approval } from '../../../huma-shared/src';
+import { LoggingContext } from '../../../huma-web-shared/src';
 export declare enum WIDGET_TYPE {
     BORROW = "BORROW",
     PAYMENT = "PAYMENT"
@@ -55,5 +56,6 @@ export type WidgetState = {
     solanaSignature?: string;
     pointsAccumulated?: number;
     txHash?: string;
+    loggingContext?: LoggingContext;
 };
 export declare const initialWidgetState: WidgetState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huma-finance/widgets",
-  "version": "0.0.73-beta.939+8b148f9",
+  "version": "0.0.73-beta.950+6da832c",
   "publishConfig": {
     "access": "public"
   },
@@ -22,9 +22,9 @@
     "@ethersproject/contracts": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/units": "^5.6.0",
-    "@huma-finance/sdk": "^0.0.73-beta.939+8b148f9",
-    "@huma-finance/shared": "^0.0.73-beta.939+8b148f9",
-    "@huma-finance/web-shared": "^0.0.73-beta.939+8b148f9",
+    "@huma-finance/sdk": "^0.0.73-beta.950+6da832c",
+    "@huma-finance/shared": "^0.0.73-beta.950+6da832c",
+    "@huma-finance/web-shared": "^0.0.73-beta.950+6da832c",
     "@mui/x-date-pickers": "^5.0.7",
     "@notifi-network/notifi-frontend-client": "^1.1.2",
     "@notifi-network/notifi-react": "^1.1.2",
@@ -188,5 +188,5 @@
   "optionalDependencies": {
     "encoding": "^0.1.13"
   },
-  "gitHead": "8b148f9340a401b544aa2739c82bcf839301a6d0"
+  "gitHead": "6da832ca26191b75c24a62dce5ae7e1b5929fbd0"
 }

package/src/components/Lend/solanaSupply/1-Evaluation.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 
 import { PersonaEvaluation } from '../components/PersonaEvaluation'
 import { Campaign } from '../supplyV2'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 type Props = {
   poolInfo: SolanaPoolInfo
@@ -19,6 +20,8 @@ export function Evaluation({
   documentHash,
   handleClose,
 }: Props): React.ReactElement | null {
+  useLogOnFirstMount('Evaluation')
+
   if (poolInfo.KYC?.Persona) {
     return (
       <PersonaEvaluation

package/src/components/Lend/solanaSupply/2-ApproveLender.tsx

@@ -8,6 +8,7 @@ import {
 import React from 'react'
 
 import { ApproveLenderBase } from '../components/ApproveLenderBase'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 type Props = {
   poolInfo: SolanaPoolInfo
@@ -22,6 +23,8 @@ export function ApproveLender({
   documentHash,
   changeTranche,
 }: Props): React.ReactElement | null {
+  useLogOnFirstMount('ApproveLender')
+
   const solanaChainInfo = SOLANA_CHAIN_INFO[poolInfo.chainId]
 
   return (

package/src/components/Lend/solanaSupply/3-ChooseTranche.tsx

@@ -15,6 +15,7 @@ import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { BottomButton } from '../../BottomButton'
 import { WrapperModal } from '../../WrapperModal'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 type Props = {
   poolUnderlyingToken: UnderlyingTokenInfo
@@ -27,6 +28,7 @@ export function ChooseTranche({
   selectedTranche,
   changeTranche,
 }: Props): React.ReactElement | null {
+  useLogOnFirstMount('ChooseTranche')
   const theme = useTheme()
   const dispatch = useAppDispatch()
 

package/src/components/Lend/solanaSupply/4-ChooseAmount.tsx

@@ -12,6 +12,7 @@ import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep, setSupplyAmount } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { InputAmountModal } from '../../InputAmountModal'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 type Props = {
   poolInfo: SolanaPoolInfo
@@ -28,6 +29,7 @@ export function ChooseAmount({
   selectedTranche,
   isUniTranche,
 }: Props): React.ReactElement | null {
+  useLogOnFirstMount('ChooseAmount')
   const dispatch = useAppDispatch()
   const { symbol, decimals } = poolInfo.underlyingMint
   const [currentAmount, setCurrentAmount] = useState<number | string>(0)

package/src/components/Lend/solanaSupply/5-ApproveAllowance.tsx

@@ -8,12 +8,14 @@ import { WIDGET_STEP } from '../../../store/widgets.store'
 import { setStep } from '../../../store/widgets.reducers'
 import { BottomButton } from '../../BottomButton'
 import { AutoPaybackImg } from '../../images'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 type Props = {
   poolState: SolanaPoolState
 }
 
 export function ApproveAllowance({ poolState }: Props): React.ReactElement {
+  useLogOnFirstMount('ApproveAllowance')
   const theme = useTheme()
   const dispatch = useAppDispatch()
   const handleNext = useCallback(() => {

package/src/components/Lend/solanaSupply/6-Transfer.tsx

@@ -28,6 +28,7 @@ import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { LoadingModal } from '../../LoadingModal'
 import { SolanaTxSendModal } from '../../SolanaTxSendModal'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 type Props = {
   poolInfo: SolanaPoolInfo
@@ -42,6 +43,7 @@ export function Transfer({
   selectedTranche,
   networkType,
 }: Props): React.ReactElement | null {
+  useLogOnFirstMount('Transaction')
   const isDev = checkIsDev()
   const dispatch = useAppDispatch()
   const { publicKey } = useWallet()

package/src/components/Lend/solanaSupply/7-Success.tsx

@@ -14,6 +14,7 @@ import { setStep } from '../../../store/widgets.reducers'
 import { selectWidgetState } from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { SolanaTxDoneModal } from '../../SolanaTxDoneModal'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 type Props = {
   poolInfo: SolanaPoolInfo
@@ -28,6 +29,7 @@ export function Success({
   campaign,
   handleAction,
 }: Props): React.ReactElement {
+  useLogOnFirstMount('Success')
   const dispatch = useDispatch()
   const { supplyAmount, solanaSignature } = useAppSelector(selectWidgetState)
   const { symbol } = poolInfo.underlyingMint

package/src/components/Lend/solanaSupply/8-PointsEarned.tsx

@@ -22,6 +22,7 @@ import { BottomButton } from '../../BottomButton'
 import { CongratulationsIcon, HumaPointsIcon, RibbonIcon } from '../../icons'
 import { LoadingModal } from '../../LoadingModal'
 import { SignIn } from '../../SignIn'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 enum STATE {
   Loading = 'Loading',
@@ -42,6 +43,7 @@ export function PointsEarned({
   networkType,
   handleAction,
 }: Props): React.ReactElement {
+  useLogOnFirstMount('PointsEarned')
   const theme = useTheme()
   const isDev = checkIsDev()
   const dispatch = useDispatch()

package/src/components/Lend/solanaSupply/index.tsx

@@ -5,6 +5,8 @@ import {
   TrancheType,
 } from '@huma-finance/shared'
 import {
+  LoggingContext,
+  LoggingContextHelper,
   SolanaPoolState,
   useLenderAccounts,
   useTokenAccount,
@@ -13,8 +15,11 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 
 import { useAppSelector } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { selectWidgetState } from '../../../store/widgets.selectors'
+import { setLoggingContext, setStep } from '../../../store/widgets.reducers'
+import {
+  selectWidgetLoggingContext,
+  selectWidgetState,
+} from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { PointsEarned } from '../../PointsEarned'
 import { WidgetWrapper } from '../../WidgetWrapper'
@@ -65,33 +70,67 @@ export function SolanaLendSupply({
   } = useLenderAccounts(poolInfo.chainId, poolInfo.poolName)
   const [tokenAccount, isLoadingTokenAccount] = useTokenAccount(poolInfo)
   const { step, errorMessage } = useAppSelector(selectWidgetState)
+  const loggingHelper = useAppSelector(selectWidgetLoggingContext)
   const [selectedTranche, setSelectedTranche] = useState<TrancheType>()
 
+  const handleCloseFlow = () => {
+    loggingHelper.logAction('ExitFlow', {})
+    handleClose()
+  }
+
   useEffect(() => {
     if (!step && !isLoadingLenderAccounts && !isLoadingTokenAccount) {
+      // Set initial logging context
+      const context: LoggingContext = {
+        flow: 'Supply',
+        chainId: poolInfo.chainId,
+        poolName: poolInfo.poolName,
+        poolType: poolInfo.poolType,
+      }
+      const loggingHelperInit = new LoggingContextHelper(context)
+      loggingHelperInit.logAction('StartFlow', {})
+      dispatch(setLoggingContext(context))
+
       if (!juniorLenderApproved && !seniorLenderApproved) {
+        loggingHelperInit.logAction('SetInitialStep', {
+          step: WIDGET_STEP.Evaluation,
+        })
         dispatch(setStep(WIDGET_STEP.Evaluation))
         return
       }
 
       if (!isUniTranche && (!juniorLenderApproved || !seniorLenderApproved)) {
+        loggingHelperInit.logAction('SetInitialStep', {
+          step: WIDGET_STEP.ApproveLender,
+        })
         dispatch(setStep(WIDGET_STEP.ApproveLender))
         return
       }
 
       if (juniorLenderApproved && !seniorLenderApproved) {
+        loggingHelperInit.logAction('SetInitialStep', {
+          step: WIDGET_STEP.ChooseAmount,
+          tranche: 'junior',
+        })
         setSelectedTranche('junior')
         dispatch(setStep(WIDGET_STEP.ChooseAmount))
         return
       }
 
       if (seniorLenderApproved && !juniorLenderApproved) {
+        loggingHelperInit.logAction('SetInitialStep', {
+          step: WIDGET_STEP.ChooseAmount,
+          tranche: 'senior',
+        })
         setSelectedTranche('senior')
         dispatch(setStep(WIDGET_STEP.ChooseAmount))
         return
       }
 
       if (juniorLenderApproved && seniorLenderApproved) {
+        loggingHelperInit.logAction('SetInitialStep', {
+          step: WIDGET_STEP.ChooseTranche,
+        })
         dispatch(setStep(WIDGET_STEP.ChooseTranche))
       }
     }
@@ -113,7 +152,7 @@ export function SolanaLendSupply({
         isOpen
         isLoading
         loadingTitle='Supply'
-        handleClose={handleClose}
+        handleClose={handleCloseFlow}
         handleSuccess={handleSuccess}
       />
     )
@@ -123,7 +162,7 @@ export function SolanaLendSupply({
     <WidgetWrapper
       isOpen
       loadingTitle={`Supply ${poolInfo.underlyingMint.symbol}`}
-      handleClose={handleClose}
+      handleClose={handleCloseFlow}
       handleSuccess={handleSuccess}
     >
       {step === WIDGET_STEP.Evaluation && (
@@ -132,7 +171,7 @@ export function SolanaLendSupply({
           campaign={poolState.campaign}
           documentHash={documentHash}
           networkType={getSolanaNetworkType(poolInfo.chainId)}
-          handleClose={handleClose}
+          handleClose={handleCloseFlow}
         />
       )}
       {step === WIDGET_STEP.ApproveLender && (
@@ -175,11 +214,11 @@ export function SolanaLendSupply({
           poolInfo={poolInfo}
           poolState={poolState}
           campaign={poolState.campaign}
-          handleAction={handleClose}
+          handleAction={handleCloseFlow}
         />
       )}
       {step === WIDGET_STEP.PointsEarned && (
-        <PointsEarned lpConfig={poolState} handleAction={handleClose} />
+        <PointsEarned lpConfig={poolState} handleAction={handleCloseFlow} />
       )}
       {step === WIDGET_STEP.Error && (
         <SolanaErrorModal
@@ -187,7 +226,7 @@ export function SolanaLendSupply({
           title='Supply'
           errorReason='Sorry there was an error'
           errorMessage={errorMessage}
-          handleOk={handleClose}
+          handleOk={handleCloseFlow}
         />
       )}
     </WidgetWrapper>

package/src/components/Lend/solanaWithdraw/1-ConfirmTransfer.tsx

@@ -6,6 +6,7 @@ import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { BottomButton } from '../../BottomButton'
 import { WrapperModal } from '../../WrapperModal'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 type Props = {
   poolUnderlyingToken: UnderlyingTokenInfo
@@ -18,6 +19,7 @@ export function ConfirmTransfer({
   withdrawableAmountFormatted,
   sharePrice,
 }: Props): React.ReactElement {
+  useLogOnFirstMount('ConfirmTransfer')
   const theme = useTheme()
   const dispatch = useDispatch()
   const { symbol } = poolUnderlyingToken

package/src/components/Lend/solanaWithdraw/2-Transfer.tsx

@@ -12,6 +12,7 @@ import { useAppDispatch } from '../../../hooks/useRedux'
 import { setStep } from '../../../store/widgets.reducers'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { SolanaTxSendModal } from '../../SolanaTxSendModal'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 type Props = {
   poolInfo: SolanaPoolInfo
@@ -24,6 +25,7 @@ export function Transfer({
   selectedTranche,
   poolIsClosed,
 }: Props): React.ReactElement | null {
+  useLogOnFirstMount('Transaction')
   const { publicKey } = useWallet()
   const dispatch = useAppDispatch()
   const program = useHumaProgram(poolInfo.chainId)

package/src/components/Lend/solanaWithdraw/3-Done.tsx

@@ -6,6 +6,7 @@ import {
 } from '@huma-finance/shared'
 import React from 'react'
 import { TxDoneModal } from '../../TxDoneModal'
+import useLogOnFirstMount from '../../../hooks/useLogOnFirstMount'
 
 type Props = {
   poolUnderlyingToken: UnderlyingTokenInfo
@@ -18,6 +19,7 @@ export function Done({
   withdrawAmount,
   handleAction,
 }: Props): React.ReactElement {
+  useLogOnFirstMount('Success')
   const { symbol } = poolUnderlyingToken
   const withdrawAmountFormatted = formatMoneyFixed(
     SolanaTokenUtils.formatUnits(withdrawAmount, poolUnderlyingToken.decimals),

package/src/components/Lend/solanaWithdraw/index.tsx

@@ -4,15 +4,23 @@ import {
   SolanaTokenUtils,
   TrancheType,
 } from '@huma-finance/shared'
-import { LenderStateAccount, SolanaPoolState } from '@huma-finance/web-shared'
+import {
+  LenderStateAccount,
+  LoggingContext,
+  LoggingContextHelper,
+  SolanaPoolState,
+} from '@huma-finance/web-shared'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 
 import { BN } from '@coral-xyz/anchor'
 import { Mint } from '@solana/spl-token'
 import { useAppSelector } from '../../../hooks/useRedux'
-import { setStep } from '../../../store/widgets.reducers'
-import { selectWidgetState } from '../../../store/widgets.selectors'
+import { setLoggingContext, setStep } from '../../../store/widgets.reducers'
+import {
+  selectWidgetLoggingContext,
+  selectWidgetState,
+} from '../../../store/widgets.selectors'
 import { WIDGET_STEP } from '../../../store/widgets.store'
 import { ErrorModal } from '../../ErrorModal'
 import { WidgetWrapper } from '../../WidgetWrapper'
@@ -64,6 +72,12 @@ export function SolanaLendWithdraw({
     2,
   )
   const [withdrawnAmount, setWithdrawnAmount] = useState<BN>()
+  const loggingHelper = useAppSelector(selectWidgetLoggingContext)
+
+  const handleCloseFlow = () => {
+    loggingHelper.logAction('ExitFlow', {})
+    handleClose()
+  }
 
   // After withdrawn success, the handleSuccess will refresh
   // the lenderStateAccount which will update the withdrawableAmount to 0
@@ -76,9 +90,20 @@ export function SolanaLendWithdraw({
 
   useEffect(() => {
     if (!step) {
+      // Set initial logging context
+      const context: LoggingContext = {
+        flow: 'Withdraw',
+        chainId: poolInfo.chainId,
+        poolName: poolInfo.poolName,
+        poolType: poolInfo.poolType,
+      }
+      const loggingHelperInit = new LoggingContextHelper(context)
+      loggingHelperInit.logAction('StartFlow', {})
+      dispatch(setLoggingContext(context))
+
       dispatch(setStep(WIDGET_STEP.ConfirmTransfer))
     }
-  }, [dispatch, step])
+  }, [dispatch, poolInfo.chainId, poolInfo.poolName, poolInfo.poolType, step])
 
   useEffect(() => {
     const trancheAssets =
@@ -111,7 +136,7 @@ export function SolanaLendWithdraw({
     <WidgetWrapper
       isOpen
       loadingTitle={title}
-      handleClose={handleClose}
+      handleClose={handleCloseFlow}
       handleSuccess={handleWithdrawSuccess}
     >
       {step === WIDGET_STEP.ConfirmTransfer && (
@@ -132,7 +157,7 @@ export function SolanaLendWithdraw({
         <Done
           poolUnderlyingToken={poolInfo.underlyingMint}
           withdrawAmount={withdrawnAmount}
-          handleAction={handleClose}
+          handleAction={handleCloseFlow}
         />
       )}
       {step === WIDGET_STEP.Error && (
@@ -140,7 +165,7 @@ export function SolanaLendWithdraw({
           title={title}
           errorReason='Sorry there was an error'
           errorMessage={errorMessage}
-          handleOk={handleClose}
+          handleOk={handleCloseFlow}
         />
       )}
     </WidgetWrapper>

package/src/components/SolanaTxSendModal.tsx

@@ -9,11 +9,12 @@ import { useConnection, useWallet } from '@solana/wallet-adapter-react'
 import { Transaction } from '@solana/web3.js'
 import { useForceRefresh } from '@huma-finance/web-shared'
 import { Box, Button, css, Typography, useTheme } from '@mui/material'
-import { useAppDispatch } from '../hooks/useRedux'
+import { useAppDispatch, useAppSelector } from '../hooks/useRedux'
 import { setError, setSolanaSignature } from '../store/widgets.reducers'
 import { LoadingModal } from './LoadingModal'
 import { SolanaViewOnExplorer } from './SolanaViewOnExplorer'
 import { SorryImg } from './images'
+import { selectWidgetLoggingContext } from '../store/widgets.selectors'
 
 type Props = {
   chainId: SolanaChainEnum
@@ -33,6 +34,7 @@ export function SolanaTxSendModal({
   const [signature, setSignature] = useState<string>('')
   const [showRetryScreen, setShowRetryScreen] = useState<boolean>(false)
   const [useHighPriority, setUseHighPriority] = useState<boolean>(true)
+  const loggingHelper = useAppSelector(selectWidgetLoggingContext)
   const [refreshCount, refresh] = useForceRefresh()
 
   const styles = {
@@ -98,7 +100,14 @@ export function SolanaTxSendModal({
           useHighPriority ? 'High' : undefined,
           process.env.REACT_APP_HELIUS_API_KEY,
         )
+        loggingHelper.logAction('SigningTransaction', {
+          priceData: optimizedTx.instructions[0].data,
+          unitsData: optimizedTx.instructions[1].data,
+          recentBlockhash: optimizedTx.recentBlockhash,
+          lastValidBlockHeight: optimizedTx.lastValidBlockHeight,
+        })
         const signedTx = await signTransaction(optimizedTx)
+        loggingHelper.logAction('SendingTransaction', {})
         const signatureResult = await connection.sendRawTransaction(
           signedTx.serialize(),
           {
@@ -123,6 +132,9 @@ export function SolanaTxSendModal({
             result?.value?.confirmationStatus === 'confirmed'
           ) {
             if (result?.value?.err) {
+              loggingHelper.logAction('TransactionError', {
+                signature: signatureResult,
+              })
               dispatch(
                 setError({
                   errorMessage:
@@ -131,6 +143,10 @@ export function SolanaTxSendModal({
               )
               return
             }
+
+            loggingHelper.logAction('TransactionSuccess', {
+              signature: signatureResult,
+            })
             handleSuccess({ signature: signatureResult })
             return
           }
@@ -144,6 +160,9 @@ export function SolanaTxSendModal({
               optimizedTx.lastValidBlockHeight! >
             100
           ) {
+            loggingHelper.logAction('ShowRetryScreenDueToExpiration', {
+              signature: signatureResult,
+            })
             setShowRetryScreen(true)
             return
           }
@@ -155,6 +174,8 @@ export function SolanaTxSendModal({
         console.log(error)
 
         const err = error as Error
+        loggingHelper.logAction('UnknownError', { error: err?.message })
+        loggingHelper.logError(err)
         dispatch(setError({ errorMessage: err?.message || '' }))
       }
     }
@@ -170,6 +191,7 @@ export function SolanaTxSendModal({
     tx,
     refreshCount,
     useHighPriority,
+    loggingHelper,
   ])
 
   const handleRetry = useCallback(

package/src/hooks/useLogOnFirstMount.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react'
+import { LoggingActions } from '@huma-finance/web-shared'
+import { selectWidgetLoggingContext } from '../store/widgets.selectors'
+import { useAppSelector } from './useRedux'
+
+const useLogOnFirstMount = (action: LoggingActions, data: object = {}) => {
+  const loggingHelper = useAppSelector(selectWidgetLoggingContext)
+  const hasLogged = useRef(false)
+
+  useEffect(() => {
+    // Only log the action once
+    if (!hasLogged.current) {
+      loggingHelper.logAction(action, data)
+      hasLogged.current = true
+    }
+  }, [action, data, loggingHelper])
+}
+
+export default useLogOnFirstMount

package/src/store/widgets.reducers.ts

@@ -1,5 +1,6 @@
 import { Approval } from '@huma-finance/shared'
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { LoggingContext } from '@huma-finance/web-shared'
 
 import {
   initialWidgetState,
@@ -34,6 +35,7 @@ export const widgetSlice = createSlice({
       state.redeemShares = undefined
       state.solanaSignature = undefined
       state.txHash = undefined
+      state.loggingContext = undefined
     },
     setStep: (state, { payload }: PayloadAction<WIDGET_STEP>) => {
       state.step = payload
@@ -116,6 +118,9 @@ export const widgetSlice = createSlice({
     ) => {
       state.pointsAccumulated = payload
     },
+    setLoggingContext: (state, { payload }: PayloadAction<LoggingContext>) => {
+      state.loggingContext = payload
+    },
     setError: (
       state,
       {
@@ -147,6 +152,7 @@ export const {
   setSolanaSignature,
   setTxHash,
   setPointsAccumulated,
+  setLoggingContext,
 } = widgetSlice.actions
 
 export default widgetSlice.reducer

package/src/store/widgets.selectors.ts

@@ -1,3 +1,23 @@
+import { LoggingContextHelper } from '@huma-finance/web-shared'
 import { RootState } from '.'
 
 export const selectWidgetState = (state: RootState) => state.widget
+
+let cachedContext: LoggingContextHelper | null = null
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let cachedLoggingContext: any = null
+
+export const selectWidgetLoggingContext = (
+  state: RootState,
+): LoggingContextHelper => {
+  if (state.widget.loggingContext === cachedLoggingContext) {
+    return cachedContext!
+  }
+
+  cachedLoggingContext = state.widget.loggingContext
+  cachedContext = state.widget.loggingContext
+    ? new LoggingContextHelper(state.widget.loggingContext)
+    : new LoggingContextHelper()
+
+  return cachedContext
+}