Track amount and asset of successful txs

src/analytics.ts

@@ -0,0 +1,10 @@
+import va from "@vercel/analytics";
+import { Route } from "./components/TransactionDialog";
+
+export function trackRoute(route: Route) {
+ va.track("transaction", {
+ type: route.actionType,
+ amount: parseFloat(route.amountIn),
+ asset: route.sourceAsset.symbol,
+ });
+}

src/components/TransactionDialog/TransactionDialogContent.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment, useState } from "react";
+import { FC, Fragment, useEffect, useRef, useState } from "react";
 import { useChain, useManager } from "@cosmos-kit/react";
 import { ArrowLeftIcon, CheckCircleIcon } from "@heroicons/react/20/solid";
 import Toast from "@/elements/Toast";
@@ -27,6 +27,16 @@ const TransactionDialogContent: FC<Props> = ({
 
  const [warningOpen, setWarningOpen] = useState(false);
 
+ const warningEl = useRef<HTMLDivElement>(null);
+
+ useEffect(() => {
+ if (warningOpen) {
+ warningEl.current?.scrollIntoView({
+ behavior: "instant",
+ });
+ }
+ }, [warningOpen]);
+
  const chain = useChain(route.sourceChain.record?.name ?? "");
 
  const { chainRecords } = useManager();
@@ -274,6 +284,7 @@ const TransactionDialogContent: FC<Props> = ({
  receive fees or payment of any kind today and subsidize gas
  for users cross-chain)
  </p>
+ <div ref={warningEl}></div>
  </div>
  )}
  </div>

src/solve/form.ts

@@ -26,6 +26,7 @@ import { MsgTransfer } from "@injectivelabs/sdk-ts";
 import { WalletClient } from "@cosmos-kit/core";
 import { useSkipClient } from "./hooks";
 import { SkipClient, MsgsRequest } from "./client";
+import { trackRoute } from "@/analytics";
 
 const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -330,6 +331,8 @@ export async function executeRoute(
  onTxSuccess: (tx: any, index: number) => void,
  onError: (error: any) => void
 ) {
+ trackRoute(route);
+
  await enableChains(walletClient, route.rawRoute.chain_ids);
 
  const userAddresses: Record<string, string> = {};