WIP : feat: formo so integration

package.json

@@ -11,6 +11,7 @@
     "build:zip": "rm -rf ./dist.zip && cd ./dist && zip -r -FS ../dist.zip ."
   },
   "dependencies": {
+    "@formo/analytics": "^1.25.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",

src/popup/AccountOptions/Bind.tsx

@@ -21,6 +21,7 @@ import Uik from "@reef-chain/ui-kit";
 import strings from "../../i18n/locales";
 import { useTheme } from "../context/ThemeContext";
 import LightText from "../../common/LightText";
+import { useFormo } from "@formo/analytics";
 
 const MIN_BALANCE = BigInt(utils.parseEther("5").toString());
 
@@ -52,6 +53,7 @@ export const Bind = ({ provider }: Props): JSX.Element => {
   const { address: bindAddress } = useParams();
   const { accountsWithSigners } = useContext(AccountsContext);
   const onAction = useContext(ActionContext);
+  const analytics = useFormo();
 
   const [bindFor, setBindFor] = useState<AccountWithSigner>();
   const [availableTxAccounts, setAvailableTxAccounts] = useState<
@@ -103,7 +105,8 @@ export const Bind = ({ provider }: Props): JSX.Element => {
             addresses: [transferBalanceFrom.address, bindFor.address],
           });
         }
-      }
+      },
+      analytics
     );
 
     setTxStatus({
@@ -137,7 +140,8 @@ export const Bind = ({ provider }: Props): JSX.Element => {
             addresses: [bindFor.address],
           });
         }
-      }
+      },
+      analytics
     );
 
     if (txIdent) {

src/popup/index.tsx

@@ -5,6 +5,7 @@ import "../assets/tailwind.css";
 import Popup from "./popup";
 import { ThemeProvider } from "./context/ThemeContext";
 import { HideBalanceProvider } from "./context/HideBalance";
+import { FormoAnalyticsProvider } from '@formo/analytics';
 
 function init() {
   const appContainer = document.createElement("div");
@@ -17,13 +18,15 @@ function init() {
   const root = createRoot(appContainer);
   console.log(appContainer);
   root.render(
-    <HideBalanceProvider>
-      <ThemeProvider>
-        <HashRouter>
-          <Popup />
-        </HashRouter>
-      </ThemeProvider>
-    </HideBalanceProvider>
+    <FormoAnalyticsProvider writeKey="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJvcmlnaW4iOiJodHRwczovL3JlZWYuaW8iLCJwcm9qZWN0X2lkIjoid2lsMGJMR1NrUURucWx4TDc4bHgyIiwiaWF0IjoxNzY1OTgyNDI5fQ.aPap3ykS2g1QFg1roeTWrSv7XO47tnh6fl7-xo1NyVQ">
+      <HideBalanceProvider>
+        <ThemeProvider>
+          <HashRouter>
+            <Popup />
+          </HashRouter>
+        </ThemeProvider>
+      </HideBalanceProvider>
+    </FormoAnalyticsProvider>
   );
 }
 

src/popup/popup.tsx

@@ -4,6 +4,7 @@ import { Provider, Signer } from "@reef-chain/evm-provider";
 import { extension as extLib, reefState } from "@reef-chain/util-lib";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { hooks } from "@reef-chain/react-lib";
+import { useFormo } from "@formo/analytics";
 import {
   faCirclePlus,
   faArrowUpRightFromSquare,
@@ -75,6 +76,8 @@ import Tokens from "./Tokens/Tokens";
 import VDA from "./VDA/VDA";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+
 const accountToReefSigner = async (
   account: extLib.InjectedAccount,
   provider: Provider
@@ -102,6 +105,7 @@ const accountToReefSigner = async (
 
 const Popup = () => {
   const { isDarkMode, toggleTheme } = useTheme();
+  const analytics = useFormo();
   const [accountCtx, setAccountCtx] = useState<AccountsCtx>({
     accounts: [],
     selectedAccount: null,
@@ -123,6 +127,13 @@ const Popup = () => {
   const [isSettingsOpen, setIsSettingsOpen] = useState<boolean>(false);
   const [selectedLanguage, setSelectedLanguage] = useState<string>('en');
 
+  useEffect(() => {
+    if (selectedAccount && analytics) {
+      console.log("[FORMO] emitting address change event")
+      analytics.identify({ address: selectedAccount.evmAddress ?? ZERO_ADDRESS, userId: selectedAccount.address, providerName: 'Reef Extension' });
+    }
+  }, [selectedAccount, analytics]);
+
   useEffect(() => {
     const handleMutations = (mutations) => {
       mutations.forEach(() => {

src/popup/util/bindUtil.ts

@@ -2,11 +2,13 @@ import { Provider } from "@reef-chain/evm-provider";
 
 import { AccountWithSigner, TxStatusHandler, TxStatusUpdate } from "../types";
 import { handleErr } from "./transactionUtil";
+import { IFormoAnalytics } from "@formo/analytics";
 
 export const bindEvmAddress = (
   signer: AccountWithSigner,
   provider: Provider,
-  onTxChange?: TxStatusHandler
+  onTxChange?: TxStatusHandler,
+  analytics?: IFormoAnalytics,
 ): string => {
   if (!provider || !signer || signer?.isEvmClaimed) {
     return "";
@@ -34,5 +36,10 @@ export const bindEvmAddress = (
         ((txStat: TxStatusUpdate) => alert(txStat.error?.message));
       handleErr(err, txIdent, "", errHandler, signer);
     });
+  analytics?.track("bind_evm", {
+    method: 'bindEvmAddress',
+    account: signer.address,
+    evmAddressClaimed: signer.evmAddress,
+  })
   return txIdent;
 };

src/popup/util/transactionUtil.ts

@@ -5,6 +5,7 @@ import {
   TX_STATUS_ERROR_CODE,
   TxStatusHandler,
 } from "../types";
+import { IFormoAnalytics, TransactionStatus } from "@formo/analytics";
 
 export const handleErr = (
   e: { message: string } | string,
@@ -49,7 +50,8 @@ export const sendToNativeAddress = (
   sender: AccountWithSigner,
   toAmt: bigint,
   to: string,
-  txHandler: TxStatusHandler
+  txHandler: TxStatusHandler,
+  analytics?: IFormoAnalytics
 ): string => {
   const txIdent = Math.random().toString(10);
   const transfer = provider.api.tx.balances.transfer(to, toAmt.toString());
@@ -60,6 +62,12 @@ export const sendToNativeAddress = (
         { signer: sender.signer.signingKey },
         (res) => {
           const txHash = transfer.hash.toHex();
+          analytics?.transaction({
+            status: res.isInBlock ? TransactionStatus.BROADCASTED : res.isFinalized ? TransactionStatus.CONFIRMED : TransactionStatus.STARTED,
+            address: sender.evmAddress ?? "0x0000000000000000000000000000000000000000",
+            chainId: 13939,
+            transactionHash: txHash,
+          })
           txHandler({
             txIdent,
             txHash,
@@ -70,6 +78,11 @@ export const sendToNativeAddress = (
         }
       )
       .catch((e) => {
+        analytics?.transaction({
+          status: TransactionStatus.REVERTED,
+          address: sender.evmAddress ?? "0x0000000000000000000000000000000000000000",
+          chainId: 13939,
+        })
         console.log("sendToNativeAddress err=", e);
         handleErr(e, txIdent, "", txHandler, sender);
       });