feat: track events from analytics formo.so

package.json

@@ -27,6 +27,7 @@
     "test:watch": "react-scripts test --env=jsdom"
   },
   "dependencies": {
+    "@formo/analytics": "^1.25.0",
     "@fortawesome/free-regular-svg-icons": "^6.1.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.0",
     "@fortawesome/react-fontawesome": "^0.2.0",

src/components/Overlays/OverlayNFT.tsx

@@ -5,6 +5,7 @@ import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import {OverlaySendNFT} from './OverlaySendNft';
 import { shortAddress } from '../../utils';
 import { OverlayAction } from '../OverlayAction';
+import { IFormoAnalytics } from '@formo/analytics';
 
 interface OverlayNFT {
   nftName?: string;
@@ -20,6 +21,7 @@ interface OverlayNFT {
   selectedSigner:any;
   provider:any; 
   isDarkMode?:boolean;
+  analytics_formo?: IFormoAnalytics;
 }
 
 export const OverlayNFT = ({
@@ -36,6 +38,7 @@ export const OverlayNFT = ({
   selectedSigner,
   provider,
   isDarkMode,
+  analytics_formo,
 }: OverlayNFT): JSX.Element => {
   const [sendNFT, setSendNFT] = useState(false);
   const [isNFTLoaded, setIsNFTLoaded] = useState<boolean>(false);
@@ -118,6 +121,7 @@ export const OverlayNFT = ({
         selectedSigner={selectedSigner}
         provider={provider}
         isDarkMode={isDarkMode}
+        analytics_formo={analytics_formo}
       />
     </OverlayAction>
   );

src/components/Overlays/OverlaySend.tsx

@@ -5,6 +5,7 @@ import { OverlayAction } from '../OverlayAction';
 import './overlay.css';
 import { Notify, ReefSigner, Token } from '../../state';
 import { Provider } from '@reef-chain/evm-provider';
+import { IFormoAnalytics } from '@formo/analytics';
 
 interface OverlaySend {
   tokenAddress?: string;
@@ -18,6 +19,7 @@ interface OverlaySend {
   isDarkMode?:boolean;
   isWalletConnect?:boolean;
   handleWalletConnectModal?:(val:boolean)=>void;
+  analytics_formo?: IFormoAnalytics
 }
 
 export const OverlaySend:React.FC<OverlaySend> = ({
@@ -32,6 +34,7 @@ export const OverlaySend:React.FC<OverlaySend> = ({
   isDarkMode,
   isWalletConnect,
   handleWalletConnectModal,
+  analytics_formo,
 }: OverlaySend): JSX.Element => {
   return (
     <OverlayAction
@@ -54,6 +57,7 @@ export const OverlaySend:React.FC<OverlaySend> = ({
             isWalletConnect={isWalletConnect}
             handleWalletConnectModal={handleWalletConnectModal}
             isDarkMode={isDarkMode}
+            analytics_formo={analytics_formo}
           />
           )}
       </div>

src/components/Overlays/OverlaySendNft.tsx

@@ -8,6 +8,7 @@ import { Provider, Signer } from '@reef-chain/evm-provider';
 import { shortAddress } from '../../utils';
 import { OverlayAction } from '../OverlayAction';
 import { ReefSigner } from '../../state';
+import { IFormoAnalytics } from '@formo/analytics';
 
 interface OverlaySendNFT {
   nftName?: string;
@@ -22,6 +23,7 @@ interface OverlaySendNFT {
   selectedSigner:any;
   provider:any; 
   isDarkMode?:boolean;
+  analytics_formo?:IFormoAnalytics,
 }
 
 const nftTxAbi = [
@@ -142,7 +144,8 @@ export const OverlaySendNFT = ({
   accounts,
   selectedSigner,
   provider,
-  isDarkMode
+  isDarkMode,
+  analytics_formo,
 }: OverlaySendNFT): JSX.Element => {
   const [isAccountListOpen, setAccountsListOpen] = useState(false);
   const [destinationAddress, setDestinationAddress] = useState<string>('');
@@ -168,6 +171,16 @@ export const OverlaySendNFT = ({
   };
 
   const transferNFT = async (from: string, to: string, _amount: number, nftContract: string, _signer: Signer, _provider: Provider, _nftId: string): Promise<void> => {
+    if(analytics_formo){
+      analytics_formo.track("nft_transfer", {
+        nft_contract: nftContract,
+        nft_id: _nftId,
+        from_address: from,
+        to_address: to,
+        amount: _amount,
+        status:"initiated"
+      })
+    }
     if (!isFormValid || transactionInProgress) {
       return;
     }
@@ -181,6 +194,16 @@ export const OverlaySendNFT = ({
           storageLimit: 2000,
         },
       });
+      if(analytics_formo){
+        analytics_formo.track("nft_transfer", {
+          nft_contract: nftContract,
+          nft_id: _nftId,
+          from_address: from,
+          to_address: toAddress,
+          amount: _amount,
+          status:"successful"
+        })
+      }
       Uik.notify.success('Transaction Successful!');
       clearStates();
       onClose();
@@ -193,6 +216,17 @@ export const OverlaySendNFT = ({
       } else {
         Uik.notify.danger('Unknown error occurred, please try again');
       }
+      if(analytics_formo){
+        analytics_formo.track("nft_transfer", {
+          nft_contract: nftContract,
+          nft_id: _nftId,
+          from_address: from,
+          to_address: toAddress,
+          amount: _amount,
+          error:error.toString(),
+          status:"failed"
+        })
+      }
     } finally {
       setTransactionInProgress(false);
     }

src/components/Overlays/OverlaySwap.tsx

@@ -11,6 +11,7 @@ import * as store from '../../store';
 import { onSwap as hooksOnswap, useSwapState } from '../../hooks';
 import { OverlayAction } from '../OverlayAction';
 import { Finalizing, Trade } from '../PoolActions';
+import { IFormoAnalytics } from '@formo/analytics';
 
 const REEF_ADDRESS = '0x0000000000000000000000000000000001000000';
 const MAX_SLIPPAGE = 20;
@@ -28,6 +29,7 @@ interface OverlaySwap {
     network:libNet.DexProtocolv2 |undefined;
     notify:(message: string, type?: Notify) => void;
     isDarkMode?:boolean;
+    analytics_formo?: IFormoAnalytics;
 }
 
 const poolWithReservesToPool = (p: PoolWithReserves): Pool => ({
@@ -67,7 +69,8 @@ export const OverlaySwap = ({
   pools,
   network,
   notify,
-  isDarkMode=false
+  isDarkMode=false,
+  analytics_formo,
 }: OverlaySwap): JSX.Element => {
   const [address1, setAddress1] = useState(tokenAddress);
   const [address2, setAddress2] = useState('0x');
@@ -162,6 +165,7 @@ export const OverlaySwap = ({
       setFinalized(true);
       if (onClose) onClose();
     },
+    analytics_formo,
   });
   const onSwitch = (): void => {
     tradeDispatch(store.switchTokensAction());

src/components/Transfer/Send.tsx

@@ -36,6 +36,7 @@ import SendPopup from "../PoolActions/ConfirmPopups/Send";
 import { DownIcon } from "../common/Icons";
 import { retrieveReefCoingeckoPrice } from "../../api";
 import UsdAmountField from "../PoolActions/UsdAmountField";
+import { IFormoAnalytics, TransactionStatus } from "@formo/analytics";
 
 interface Send {
   tokens: Token[];
@@ -47,6 +48,7 @@ interface Send {
   isDarkMode?:boolean;
   isWalletConnect?:boolean;
   handleWalletConnectModal?:(val:boolean)=>void;
+  analytics_formo?: IFormoAnalytics;
 }
 
 const getSignerEvmAddress = async (
@@ -194,7 +196,8 @@ export const Send = ({
   tokenAddress,
   isWalletConnect,
   isDarkMode,
-  handleWalletConnectModal
+  handleWalletConnectModal,
+  analytics_formo
 }: Send): JSX.Element => {
   const [to, setTo] = useState("");
   const [status, setStatus] = useState("Send");
@@ -266,6 +269,11 @@ export const Send = ({
 
   const onSend = async (): Promise<void> => {
     try {
+      if(analytics_formo){analytics_formo.transaction({
+        address:signer.address,
+        chainId:13939,
+        status:TransactionStatus.STARTED
+      })}
       setLoading(true);
       if(isWalletConnect && handleWalletConnectModal)handleWalletConnectModal(true);
       ensureTokenAmount(token);
@@ -275,14 +283,23 @@ export const Send = ({
       if (isNativeTransfer(token)) {
         setStatus("Transfering native REEF");
         const nativeAddr = await getSignerNativeAddress(to, provider);
-        await nativeTransfer(amount, nativeAddr, provider, signer);
+        await nativeTransfer(amount, nativeAddr, provider, signer,analytics_formo!);
       } else {
         setStatus("Extracting evm address");
         const toAddress = isNativeAddress(to)
           ? await getSignerEvmAddress(to, provider)
           : to;
         setStatus(`Transfering ${token.symbol}`);
         await tokenContract.transfer(toAddress, amount);
+        if(analytics_formo){
+          analytics_formo.transaction({
+            status:TransactionStatus.CONFIRMED,
+            address:signer.evmAddress!,
+            chainId:13939,
+            to:toAddress,
+            value:amount,
+          })
+        }
       }
 
       Uik.notify.success({

src/components/Transfer/TransferComponent.tsx

@@ -44,6 +44,7 @@ import { AccountListModal } from '../AccountSelector/AccountListModal';
 import { ConfirmLabel } from '../common/Label';
 import { Button } from '../common/Button';
 import { TxStatusHandler, TxStatusUpdate } from '../../utils/transactionUtil';
+import { IFormoAnalytics, TransactionStatus } from '@formo/analytics';
 
 interface TransferComponent {
   tokens: Token[];
@@ -53,6 +54,7 @@ interface TransferComponent {
   onTxUpdate?: TxStatusHandler;
   accounts: ReefSigner[];
   currentAccount: ReefSigner;
+  analytics_formo?: IFormoAnalytics;
 }
 
 const TX_IDENT_ANY = 'TX_HASH_ANY';
@@ -145,6 +147,7 @@ export const TransferComponent = ({
   onTxUpdate,
   currentAccount,
   accounts,
+  analytics_formo
 }: TransferComponent): JSX.Element => {
   const [availableTxAccounts, setAvailableTxAccounts] = useState<ReefSigner[]>(
     [],
@@ -273,6 +276,13 @@ export const TransferComponent = ({
       return;
     }
     try {
+      if(analytics_formo){
+        analytics_formo.track('transfer_initiated', {
+          token_address: txToken.address,
+          token_symbol: txToken.symbol,
+          amount: txToken.amount,
+        });
+      }
       setIsLoading(true);
       ensureTokenAmount(txToken);
       if (utils.isAddress(to)) {
@@ -284,6 +294,20 @@ export const TransferComponent = ({
         );
         setLastTxIdentInProgress(txIdent);
         getUpdateTxCallback([onTxUpdate, setTxUpdateData])({ txIdent });
+        if(analytics_formo){
+          analytics_formo.track('transfer_sent_to_evm', {
+            token_address: txToken.address,
+            token_symbol: txToken.symbol,
+            amount: txToken.amount,
+            tx_ident: txIdent,
+          });
+          analytics_formo.transaction({
+            status:TransactionStatus.CONFIRMED,
+            address:from.evmAddress!,
+            chainId:13939,
+            to:to,
+          })
+        }
       } else if (isSubstrateAddress(to)) {
         const txIdent = sendToNativeAddress(
           provider,
@@ -294,6 +318,14 @@ export const TransferComponent = ({
         );
         setLastTxIdentInProgress(txIdent);
         getUpdateTxCallback([onTxUpdate, setTxUpdateData])({ txIdent });
+        if(analytics_formo){
+          analytics_formo.track('transfer_sent_to_substrate', {
+            token_address: txToken.address,
+            token_symbol: txToken.symbol,
+            amount: txToken.amount,
+            tx_ident: txIdent,
+          });
+        }
       }
     } catch (err) {
       console.log('onSendTxConfirmed error =', err);
@@ -306,6 +338,14 @@ export const TransferComponent = ({
         },
         addresses: [from.address],
       });
+      if(analytics_formo){
+        analytics_formo.track('transfer_error', {
+          token_address: txToken?.address,
+          token_symbol: txToken?.symbol,
+          amount: txToken?.amount,
+          error_message: err.message || err,
+        });
+      }
     }
     setIsLoading(false);
   };