refactor: update to internal segment event client

package.json

@@ -145,6 +145,7 @@
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
     "@hookform/resolvers": "3.9.1",
+    "@leather.io/analytics": "2.0.0",
     "@leather.io/bitcoin": "0.16.0",
     "@leather.io/constants": "0.13.0",
     "@leather.io/crypto": "1.6.7",

src/app/common/app-analytics.ts

@@ -77,14 +77,14 @@
 export function useHandleQueuedBackgroundAnalytics() {
   useOnMount(() => {
     async function handleQueuedAnalytics() {
       const queuedEventsStore = await chrome.storage.local.get(analyticsEventKey);
 
       try {
         const events = analyicsQueueSchema.parse(queuedEventsStore[analyticsEventKey] ?? []);
         if (!events.length) return;
         await chrome.storage.local.remove(analyticsEventKey);
         await Promise.all(
-          events.map(({ eventName, properties }) => analytics.track(eventName, properties))
+          events.map(({ eventName, properties }) => analytics.untypedTrack(eventName, properties))
         );
       } catch (e) {
         void analytics.track('background_analytics_schema_fail');

src/app/common/hooks/use-submit-stx-transaction.ts

@@ -47,7 +47,9 @@ export function useSubmitTransactionCallback({ loadingKey }: UseSubmitTransactio
 
             await delay(500);
 
-            void analytics.track('broadcast_transaction', { symbol: 'stx' });
+            void analytics.track('broadcast_transaction', {
+              symbol: 'stx',
+            });
             onSuccess(safelyFormatHexTxid(response.txid));
             setIsIdle();
             await refreshAccountData(timeForApiToUpdate);

src/app/common/persistence.ts

@@ -12,10 +12,10 @@
 
 const storage = {
   getItem: async (key: string) => {
     const storageVal = await chrome.storage.local.get(key);
     return storageVal[key];
   },
   setItem: (key: string, value: string) => chrome.storage.local.set({ [key]: value }),
   removeItem: (key: string) => chrome.storage.local.remove([key]),
 };
 
@@ -36,7 +36,7 @@
           hash: query.queryHash,
           error: error.toJSON(),
         };
-        void analytics.track('api_error', errorReport);
+        void analytics.untypedTrack('api_error', errorReport);
       }
 
       if (isZodError(error)) {

src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx

@@ -25,7 +25,7 @@ export function StacksCryptoAssets({ address }: StacksCryptoAssetsProps) {
       void analytics.track('view_collectibles', {
         stacks_nfts_count: stacksNftsMetadataResp.length,
       });
-      void analytics.identify({ stacks_nfts_count: stacksNftsMetadataResp.length });
+      void analytics.client.identify({ stacks_nfts_count: stacksNftsMetadataResp.length });
     }
   }, [stacksNftsMetadataResp.length]);
 

src/app/features/ledger/hooks/use-ledger-analytics.hook.ts

@@ -6,7 +6,7 @@ export function useLedgerAnalytics() {
   return useMemo(
     () => ({
       trackDeviceVersionInfo(info: object) {
-        void analytics.track('ledger_app_version_info', info);
+        void analytics.track('ledger_app_version_info', { info });
       },
       transactionSignedOnLedgerSuccessfully() {
         void analytics.track('ledger_transaction_signed_approved');

src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx

@@ -27,7 +27,7 @@ function InsufficientFundsActionButtons({ eventName }: InsufficientFundsActionBu
   const [isShowingSwitchAccount, setIsShowingSwitchAccount] = useState(false);
 
   const onGetStx = () => {
-    void analytics.track(eventName);
+    void analytics.untypedTrack(eventName);
     closeWindow();
     void chrome.tabs.create({ url: 'index.html#/fund' });
   };

src/app/pages/receive/receive-btc.tsx

@@ -32,7 +32,7 @@ export function ReceiveBtcModal({ type = 'btc' }: ReceiveBtcModalType) {
     <ReceiveTokensLayout
       address={btcAddress}
       onCopyAddressToClipboard={async () => {
-        void analytics.track('copy_btc_address_to_clipboard');
+        void analytics.track('copy_btc_address_to_clipboard', { type });
         await copyToClipboard(btcAddress);
         toast.success('Copied to clipboard!');
       }}

src/app/pages/rpc-send-transfer/rpc-send-transfer-confirmation.tsx

@@ -3,7 +3,6 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { HStack, Stack, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
-import { decodeBitcoinTx } from '@leather.io/bitcoin';
 import type { CryptoCurrency } from '@leather.io/models';
 import {
   useBitcoinBroadcastTransaction,
@@ -56,7 +55,6 @@ export function RpcSendTransferConfirmation() {
   const { filteredUtxosQuery } = useCurrentNativeSegwitUtxos();
   const btcMarketData = useCryptoCurrencyMarketDataMeanAverage('BTC');
 
-  const psbt = decodeBitcoinTx(tx);
   const transferAmount = sumMoney(recipients.map(r => r.amount));
   const txFiatValue = i18nFormatCurrency(baseCurrencyAmountInQuote(transferAmount, btcMarketData));
   const txFiatValueSymbol = btcMarketData.price.symbol;
@@ -96,10 +94,7 @@ export function RpcSendTransferConfirmation() {
       async onSuccess(txid) {
         void analytics.track('broadcast_transaction', {
           symbol: 'btc',
-          amount: transferAmount,
-          fee,
-          inputs: psbt.inputs.length,
-          outputs: psbt.inputs.length,
+          amount: transferAmount.amount.toNumber(),
         });
         await filteredUtxosQuery.refetch();
 

src/app/pages/rpc-sign-psbt/use-rpc-sign-psbt.tsx

@@ -53,7 +53,9 @@ export function useRpcSignPsbt() {
     fee,
     tx,
   }: BroadcastSignedPsbtTxArgs) {
-    void analytics.track('user_approved_sign_and_broadcast_psbt', { origin });
+    void analytics.track('user_approved_sign_and_broadcast_psbt', {
+      origin: origin || 'no_origin',
+    });
 
     const transferTotalAsMoney = sumMoney([addressNativeSegwitTotal, addressTaprootTotal]);
 

src/app/pages/send/ordinal-inscription/components/send-inscription-container.tsx

@@ -54,12 +54,12 @@ export function SendInscriptionContainer() {
       iterationLimit: 100,
     })(routeState.inscription.address);
 
-    void analytics.track('recurse_addresses_to_find_derivation_path', {
+    void analytics.untypedTrack('recurse_addresses_to_find_derivation_path', {
       duration: result.duration,
     });
 
     if (result.status !== 'success') {
-      void analytics.track('error_did_not_find_owner_path_of_inscription', {
+      void analytics.untypedTrack('error_did_not_find_owner_path_of_inscription', {
         inscription: routeState.inscription.id,
       });
       throw new Error('Unable to find key of owner inscription address');

src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx

@@ -87,7 +87,7 @@ export function BtcSendFormConfirmation() {
       async onSuccess(txid) {
         void analytics.track('broadcast_transaction', {
           symbol: 'btc',
-          amount: transferAmount,
+          amount: Number(transferAmount),
           fee,
           inputs: decodedTx.inputs.length,
           outputs: decodedTx.inputs.length,

src/app/pages/transaction-request/transaction-request.tsx

@@ -75,7 +75,7 @@ function TransactionRequestBase() {
     await stacksBroadcastTransaction(unsignedTx);
 
     void analytics.track('submit_fee_for_transaction', {
-      calculation: stxFees?.calculation,
+      calculation: stxFees?.calculation || 'unknown',
       fee: values.fee,
       type: values.feeType,
     });

src/app/query/common/compliance-checker/compliance-checker.query.ts

@@ -84,7 +84,7 @@ export function useBreakOnNonCompliantEntity(address: string | string[]) {
   ]);
 
   if (complianceReports.some(report => report.data?.isOnSanctionsList)) {
-    void analytics.track('non_compliant_entity_detected');
+    void analytics.track('non_compliant_entity_detected', { address });
     throw new Error(compliantErrorBody);
   }
 }

src/app/store/accounts/blockchain/bitcoin/bitcoin.hooks.ts

@@ -184,9 +184,9 @@ export function useSignLedgerBitcoinTx() {
       // exist, and we want the user to proceed, despite the warning.
       try {
         await addNativeSegwitUtxoHexLedgerProps(psbt, nativeSegwitInputsToSign);
-        void analytics.track('successfully_added_native_segwit_tx_hex_to_ledger_tx');
+        void analytics.track('native_segwit_tx_hex_to_ledger_tx', { success: true });
       } catch (e) {
-        void analytics.track('failed_to_add_native_segwit_tx_hex_to_ledger_tx');
+        void analytics.track('native_segwit_tx_hex_to_ledger_tx', { success: false });
       }
 
       await addNativeSegwitBip32Derivation(psbt, fingerprint, nativeSegwitInputsToSign);

src/app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks.ts

@@ -157,9 +157,13 @@ export function useUpdateLedgerSpecificNativeSegwitUtxoHexForAdddressIndexZero()
         tx.updateInput(index, {
           nonWitnessUtxo: Buffer.from(inputsTxHex[index], 'hex'),
         });
-        void analytics.track('ledger_nativesegwit_add_nonwitnessutxo');
+        void analytics.track('ledger_nativesegwit_add_nonwitnessutxo', {
+          action: 'add_nonwitness_utxo',
+        });
       } else {
-        void analytics.track('ledger_nativesegwit_skip_add_nonwitnessutxo');
+        void analytics.track('ledger_nativesegwit_add_nonwitnessutxo', {
+          action: 'skip_add_nonwitness_utxo',
+        });
       }
     });
   };

src/shared/utils/analytics.ts

@@ -14,21 +14,30 @@ import { feedbackIntegration } from '@sentry/browser';
 import * as Sentry from '@sentry/react';
 import { token } from 'leather-styles/tokens';
 
+import { configureAnalyticsClient } from '@leather.io/analytics';
+
 import {
   IS_TEST_ENV,
   SEGMENT_WRITE_KEY,
   SENTRY_DSN,
   WALLET_ENVIRONMENT,
 } from '@shared/environment';
 
-export const analytics = new AnalyticsBrowser();
+const segmentClient = new AnalyticsBrowser();
+
+export const analytics = configureAnalyticsClient<AnalyticsBrowser>({
+  client: segmentClient,
+  defaultProperties: {
+    platform: 'mobile',
+  },
+});
 
 export function decorateAnalyticsEventsWithContext(
   getEventContextProperties: () => Record<string, unknown>
 ) {
-  void analytics.ready(
+  void analytics.client.ready(
     () =>
-      void analytics.addSourceMiddleware(({ payload, next }) => {
+      void analytics.client.addSourceMiddleware(({ payload, next }) => {
         Object.entries(getEventContextProperties()).forEach(([key, value]) => {
           payload.obj.context = payload.obj.context || {};
           payload.obj.context.ip = '0.0.0.0';
@@ -41,7 +50,7 @@ export function decorateAnalyticsEventsWithContext(
 }
 
 export function initAnalytics() {
-  return analytics.load(
+  return analytics.client.load(
     { writeKey: SEGMENT_WRITE_KEY },
     {
       integrations: {

src/shared/workers/index.ts

@@ -7,7 +7,7 @@ export enum WorkerScript {
 export function createWorker(scriptName: WorkerScript) {
   const worker = new Worker(scriptName);
   worker.addEventListener('error', error => {
-    void analytics?.track(`worker_error_thrown_${scriptName}`, { error });
+    void analytics?.untypedTrack(`worker_error_thrown_${scriptName}`, { error });
   });
 
   return worker;