fix: track stx swaps and call execute order on bitflow (#777)

* fix: track stx swaps and call execute order on bitflow

* fix: need btcusdrate to convert stx amounts

src/app/components/transactionsRequests/ContractCallRequest.tsx

@@ -93,6 +93,7 @@ type Props = {
   requestToken: string;
   attachment: Buffer | undefined;
   broadcastAfterSigning: boolean;
+  onSignTransaction?: () => void;
 };
 
 export default function ContractCallRequest({
@@ -106,6 +107,7 @@ export default function ContractCallRequest({
   messageId,
   rpcMethod,
   broadcastAfterSigning,
+  onSignTransaction,
 }: Props) {
   const selectedNetwork = useNetworkSelector();
   const [hasTabClosed, setHasTabClosed] = useState(false);
@@ -115,7 +117,8 @@ export default function ContractCallRequest({
   );
   const { executeStxOrder } = useExecuteOrder();
   const [isLoading, setIsLoading] = useState(false);
-  const isStxSwap = messageId === 'velar' || messageId === 'alex';
+  // TODO fix this to be less hacky
+  const isStxSwap = messageId === 'velar' || messageId === 'alex' || messageId === 'bitflow';
 
   // SignTransaction Params
   const isMultiSigTx = isMultiSig(unsignedTx);
@@ -279,6 +282,7 @@ export default function ContractCallRequest({
       setIsLoading(false);
 
       if (response) {
+        if (onSignTransaction) onSignTransaction();
         navigate('/tx-status', {
           state: {
             txid: response.txid,

src/app/hooks/useTrackMixPanelPageViewed.ts

@@ -4,6 +4,8 @@ import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import useSelectedAccount from './useSelectedAccount';
 
+declare const VERSION: string;
+
 const useTrackMixPanelPageViewed = (properties?: any, deps: any[] = []) => {
   const selectedAccount = useSelectedAccount();
   const location = useLocation();
@@ -12,6 +14,7 @@ const useTrackMixPanelPageViewed = (properties?: any, deps: any[] = []) => {
     getMixpanelInstance('web-extension').track_pageview({
       path: location.pathname,
       wallet_type: isLedgerAccount(selectedAccount) ? 'ledger' : 'software',
+      client_version: VERSION,
       ...properties,
     });
   }, deps); // eslint-disable-line react-hooks/exhaustive-deps

src/app/screens/swap/components/psbtConfirmation/useExecuteOrder.tsx

@@ -35,7 +35,6 @@ const useExecuteOrder = () => {
     try {
       const response = await xverseApiClient.swaps.executeStxOrder(request);
       setOrder(response);
-
       return response;
     } catch (err: any) {
       setError(err?.response?.data?.message ?? 'Failed to execute order');

src/app/screens/swap/index.tsx

@@ -2,7 +2,6 @@ import ArrowSwap from '@assets/img/icons/ArrowSwap.svg';
 import RequestsRoutes from '@common/utils/route-urls';
 import BottomBar from '@components/tabBar';
 import TopRow from '@components/topRow';
-import useRuneFloorPriceQuery from '@hooks/queries/runes/useRuneFloorPriceQuery';
 import useGetSip10TokenInfo from '@hooks/queries/stx/useGetSip10TokenInfo';
 import useGetQuotes from '@hooks/queries/swaps/useGetQuotes';
 import useBtcWalletData from '@hooks/queries/useBtcWalletData';
@@ -137,7 +136,6 @@ export default function SwapScreen() {
   const params = new URLSearchParams(location.search);
   const defaultFrom = params.get('from');
   const { quotes, loading: quotesLoading, error: quotesError, fetchQuotes } = useGetQuotes();
-  const { data: runeFloorPrice } = useRuneFloorPriceQuery(toToken?.name ?? '');
   const coinsMasterList = useVisibleMasterCoinsList();
   const { tokenInfo: sip10FromTokenInfoUSD } = useGetSip10TokenInfo({
     principal: toToken?.ticker,
@@ -184,7 +182,6 @@ export default function SwapScreen() {
       amount: amountForQuote,
       quote,
       btcUsdRate,
-      runeFloorPrice,
       stxBtcRate,
       fromTokenInfo: sip10FromTokenInfoUSD,
     });
@@ -399,7 +396,6 @@ export default function SwapScreen() {
       amount: amountForQuote,
       quote,
       btcUsdRate,
-      runeFloorPrice,
       stxBtcRate,
       fromTokenInfo: sip10FromTokenInfoUSD,
     });
@@ -458,6 +454,16 @@ export default function SwapScreen() {
     navigate(RequestsRoutes.TransactionRequest, {
       state: {
         dataStxSignTransactionOverride,
+        mixpanelMetadata: {
+          provider: quote.provider,
+          fromToken,
+          toToken,
+          amount: amountForQuote,
+          quote,
+          btcUsdRate,
+          stxBtcRate,
+          fromTokenInfo: sip10FromTokenInfoUSD,
+        },
       },
     });
   }

src/app/screens/swap/mixpanel.ts

@@ -12,6 +12,7 @@ import { trackMixPanel } from '@utils/mixpanel';
 import BigNumber from 'bignumber.js';
 import { getTrackingIdentifier, isRunesTx } from './utils';
 
+// TODO add typing to this. the properties actually sent to mixpanel no longer match what's defined in xverse-core
 function trackSwapMixPanel(
   eventName,
   {
@@ -21,7 +22,6 @@ function trackSwapMixPanel(
     amount,
     quote,
     btcUsdRate,
-    runeFloorPrice,
     stxBtcRate,
     fromTokenInfo,
   }: {
@@ -31,7 +31,6 @@ function trackSwapMixPanel(
     amount: string;
     quote?: Quote;
     btcUsdRate: string;
-    runeFloorPrice?: number;
     stxBtcRate?: string;
     fromTokenInfo?: Coin;
   },

src/app/screens/swap/quoteSummary/index.tsx

@@ -268,7 +268,6 @@ export default function QuoteSummary({
       amount,
       quote,
       btcUsdRate,
-      runeFloorPrice,
       stxBtcRate,
       fromTokenInfo: sip10FromTokenInfoUSD,
     });

src/app/screens/swap/quotesModal/index.tsx

@@ -175,7 +175,7 @@ function QuotesModal({
             provider={stx.provider.name}
             price={stx.receiveAmount}
             image={{ ft: { image: stx.provider.logo } as FungibleToken }}
-            onClick={() => ammProviderClicked && ammProviderClicked(stx)}
+            onClick={() => ammProviderClicked?.(stx)}
             subtitle={getReceiveAmountSubtitle(stx, stxProviders)}
             unit={stx.to.protocol === 'stx' ? 'STX' : toToken?.name || ''}
             fiatValue={

src/app/screens/transactionRequest/index.tsx

@@ -6,7 +6,9 @@ import useSelectedAccount from '@hooks/useSelectedAccount';
 import useTrackMixPanelPageViewed from '@hooks/useTrackMixPanelPageViewed';
 import useWalletReducer from '@hooks/useWalletReducer';
 import useWalletSelector from '@hooks/useWalletSelector';
+import trackSwapMixPanel from '@screens/swap/mixpanel';
 import {
+  AnalyticsEvents,
   createDeployContractRequest,
   extractFromPayload,
   fetchStxPendingTxData,
@@ -33,15 +35,16 @@ const LoaderContainer = styled.div((props) => ({
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
-  marginTop: props.theme.spacing(12),
+  marginTop: props.theme.space.s,
 }));
 
 function TransactionRequest() {
   const selectedAccount = useSelectedAccount();
   const { network, feeMultipliers, accountsList } = useWalletSelector();
   const location = useLocation();
-  const { dataStxSignTransactionOverride } = (location.state || {}) as {
+  const { dataStxSignTransactionOverride, mixpanelMetadata } = (location.state || {}) as {
     dataStxSignTransactionOverride?: DataStxSignTransaction;
+    mixpanelMetadata: any;
   };
   const txReq = useStxTransactionRequest(dataStxSignTransactionOverride);
   const navigate = useNavigate();
@@ -71,6 +74,10 @@ function TransactionRequest() {
     action,
   });
 
+  const onSignTransaction = () => {
+    trackSwapMixPanel(AnalyticsEvents.SignSwap, mixpanelMetadata);
+  };
+
   const handleTokenTransferRequest = async (tokenTransferPayload: any, requestAccount: Account) => {
     const stxPendingTxData = await fetchStxPendingTxData(
       requestAccount.stxAddress,
@@ -267,6 +274,7 @@ function TransactionRequest() {
           requestToken={requestToken}
           messageId={messageId}
           rpcMethod={rpcMethod}
+          onSignTransaction={onSignTransaction}
         />
       ) : null}
       {payload && payload.txType === 'smart_contract' && unsignedTx ? (

src/app/utils/mixpanel.ts

@@ -4,6 +4,8 @@ import { AnalyticsEvents, type AnalyticsEventProperties } from '@secretkeylabs/x
 import type { Callback, RequestOptions } from 'mixpanel-browser';
 import { getMixpanelInstance, mixpanelInstances } from '../mixpanelSetup';
 
+declare const VERSION: string;
+
 // Overload definitions
 export function trackMixPanel<E extends keyof AnalyticsEventProperties>(
   event: E,
@@ -28,7 +30,15 @@ export function trackMixPanel(
   callback?: Callback,
   instanceKey: keyof typeof mixpanelInstances = 'web-extension',
 ) {
-  getMixpanelInstance(instanceKey).track(event, properties, options, callback);
+  getMixpanelInstance(instanceKey).track(
+    event,
+    {
+      client_version: VERSION,
+      ...properties,
+    },
+    options,
+    callback,
+  );
 }
 
 export const optOutMixPanel = () => {