add mixpanel

package.json

@@ -12,13 +12,13 @@
     "@cosmjs/tendermint-rpc": "^0.31.0",
     "@duckdb/duckdb-wasm": "1.28.0",
     "@injectivelabs/sdk-ts": "1.12.1",
+    "@leapwallet/cosmos-snap-provider": "0.1.25",
     "@oraichain/common-contracts-sdk": "^1.0.31",
     "@oraichain/ethereum-multicall": "^1.0.2",
     "@oraichain/kawaiiverse-txs": "^0.0.3",
     "@oraichain/oraidex-common-ui": "^1.0.4",
     "@oraichain/oraidex-contracts-sdk": "^1.0.26",
     "@oraichain/oraidex-universal-swap": "^1.0.49",
-    "@leapwallet/cosmos-snap-provider": "0.1.25",
     "@reduxjs/toolkit": "^1.9.3",
     "@sentry/react": "^7.47.0",
     "@tanstack/react-query": "^4.32.6",
@@ -33,6 +33,7 @@
     "ethers": "^5.0.15",
     "idb-keyval": "^6.2.1",
     "lottie-react": "^2.4.0",
+    "mixpanel-browser": "^2.49.0",
     "qrcode": "^1.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/index.tsx

@@ -11,6 +11,7 @@ import { Bounce, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { PersistGate } from 'redux-persist/integration/react';
 import { persistor, store } from 'store/configure';
+import mixpanel from 'mixpanel-browser';
 import './index.scss';
 import App from './layouts/App';
 import ScrollToTop from './layouts/ScrollToTop';
@@ -35,6 +36,9 @@ if (process.env.REACT_APP_SENTRY_ENVIRONMENT === 'production') {
     // We recommend adjusting this value in production
     tracesSampleRate: 1
   });
+
+  // init mixpanel track event
+  mixpanel.init(process.env.REACT_APP_SENTRY_ENVIRONMENT);
 }
 
 const initApp = async () => {

src/pages/UniversalSwap/SwapV3/index.tsx

@@ -55,6 +55,7 @@ import InputSwap from './InputSwapV3';
 import { useGetTransHistory, useSimulate, useTaxRate } from './hooks';
 import { useGetPriceByUSD } from './hooks/useGetPriceByUSD';
 import styles from './index.module.scss';
+import mixpanel from 'mixpanel-browser';
 
 const cx = cn.bind(styles);
 // TODO: hardcode decimal relayerFee
@@ -238,12 +239,12 @@ const SwapComponent: React.FC<{
   const isSimulateDataDisplay = simulateData && simulateData.displayAmount;
   const minimumReceive = isAverageRatio
     ? calculateMinReceive(
-        // @ts-ignore
-        Math.trunc(new BigDecimal(averageRatio.amount) / INIT_AMOUNT).toString(),
-        fromAmountTokenBalance.toString(),
-        userSlippage,
-        originalFromToken.decimals
-      )
+      // @ts-ignore
+      Math.trunc(new BigDecimal(averageRatio.amount) / INIT_AMOUNT).toString(),
+      fromAmountTokenBalance.toString(),
+      userSlippage,
+      originalFromToken.decimals
+    )
     : '0';
   const isWarningSlippage = +minimumReceive > +simulateData?.amount;
   const simulateDisplayAmount = simulateData && simulateData.displayAmount ? simulateData.displayAmount : 0;
@@ -254,8 +255,8 @@ const SwapComponent: React.FC<{
 
   const minimumReceiveDisplay = isSimulateDataDisplay
     ? new BigDecimal(
-        simulateDisplayAmount - (simulateDisplayAmount * userSlippage) / 100 - relayerFee - bridgeTokenFee
-      ).toNumber()
+      simulateDisplayAmount - (simulateDisplayAmount * userSlippage) / 100 - relayerFee - bridgeTokenFee
+    ).toNumber()
     : 0;
 
   const expectOutputDisplay = isSimulateDataDisplay
@@ -338,6 +339,20 @@ const SwapComponent: React.FC<{
       });
     } finally {
       setSwapLoading(false);
+      let address = '';
+      if (oraiAddress) address += oraiAddress + " ";
+      if (metamaskAddress) address += metamaskAddress + " ";
+      if (tronAddress) address += tronAddress + " ";
+      const logEvent = {
+        address,
+        fromToken: `${originalFromToken.name} - ${originalFromToken.chainId}`,
+        fromAmount: `${fromAmountToken}`,
+        toToken: `${originalToToken.name} - ${originalToToken.chainId}`,
+        toAmount: `${toAmountToken}`,
+        fromNetwork: originalFromToken.chainId,
+        toNetwork: originalToToken.chainId
+      };
+      mixpanel.track("Universal Swap Oraidex", logEvent);
     }
   };
 
@@ -446,9 +461,8 @@ const SwapComponent: React.FC<{
               />
 
               <div className={cx('ratio')}>
-                {`1 ${originalFromToken.name} ≈ ${
-                  averageRatio ? Number((averageRatio.displayAmount / INIT_AMOUNT).toFixed(6)) : '0'
-                } ${originalToToken.name}`}
+                {`1 ${originalFromToken.name} ≈ ${averageRatio ? Number((averageRatio.displayAmount / INIT_AMOUNT).toFixed(6)) : '0'
+                  } ${originalToToken.name}`}
               </div>
             </div>
           </div>

yarn.lock

@@ -11744,6 +11744,11 @@ minizlib@^2.1.1, minizlib@^2.1.2:
     minipass "^3.0.0"
     yallist "^4.0.0"
 
+mixpanel-browser@^2.49.0:
+  version "2.49.0"
+  resolved "https://registry.yarnpkg.com/mixpanel-browser/-/mixpanel-browser-2.49.0.tgz#de3f4f2d0f3a32b4babf6d827ef983a9fd48a711"
+  integrity sha512-RZJCO7XXuuHBAWG5fd9Mavz994M7v7W3Qiaq8NzmN631pa4BQ0vNZQtRFqKcCCOBn4xqOZbX2GkuC7ZkQoL4cQ==
+
 "mkdirp@>=0.5 0", mkdirp@^0.5.6, mkdirp@~0.5.1:
   version "0.5.6"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz"