Merge branch 'staging' into 298-freeze-quotation-after-clicking-in-co…

…nfirm
pendulum-chain · Feb 6, 2025 · c8bb04c · c8bb04c
2 parents 34a70d0 + c32367a
commit c8bb04c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 37 deletions.
diff --git a/src/components/buttons/EVMWalletButton/index.tsx b/src/components/buttons/EVMWalletButton/index.tsx
@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 import { PlayCircleIcon } from '@heroicons/react/20/solid';
 import { useAppKit, useAppKitAccount, useAppKitNetwork } from '@reown/appkit/react';
 
-import { useEventsContext } from '../../../contexts/events';
 import accountBalanceWalletIcon from '../../../assets/account-balance-wallet.svg';
 import accountBalanceWalletIconPink from '../../../assets/account-balance-wallet-pink.svg';
 import { wagmiConfig } from '../../../wagmiConfig';
@@ -47,7 +46,6 @@ const WalletButton = ({
 );
 
 export function EVMWalletButton({ customStyles, hideIcon }: { customStyles?: string; hideIcon?: boolean }) {
-  const { handleUserClickWallet } = useEventsContext();
   const { address, chainId: walletChainId } = useVortexAccount();
   const { isConnected } = useAppKitAccount();
   const { caipNetwork: appkitNetwork, switchNetwork } = useAppKitNetwork();
@@ -59,7 +57,6 @@ export function EVMWalletButton({ customStyles, hideIcon }: { customStyles?: str
     return (
       <WalletButton
         onClick={() => {
-          handleUserClickWallet();
           open({ view: 'Connect' });
         }}
         customStyles={customStyles}
@@ -80,7 +77,6 @@ export function EVMWalletButton({ customStyles, hideIcon }: { customStyles?: str
           if (appkitNetwork) {
             switchNetwork(appkitNetwork);
           }
-          handleUserClickWallet();
         }}
         hideIcon={hideIcon}
         showPlayIcon
@@ -94,7 +90,6 @@ export function EVMWalletButton({ customStyles, hideIcon }: { customStyles?: str
     <WalletButton
       onClick={() => {
         open({ view: 'Account' });
-        handleUserClickWallet();
       }}
       showWalletIcons
       address={address}

diff --git a/src/components/buttons/PolkadotWalletButton/PolkadotConnectWallet/index.tsx b/src/components/buttons/PolkadotWalletButton/PolkadotConnectWallet/index.tsx
@@ -1,17 +1,14 @@
 import { useState } from 'react';
 import { PlayCircleIcon } from '@heroicons/react/20/solid';
 import { PolkadotWalletSelectorDialog } from '../../../PolkadotWalletSelectorDialog';
-import { useEventsContext } from '../../../../contexts/events';
 
 export const PolkadotConnectWallet = ({ customStyles, hideIcon }: { customStyles?: string; hideIcon?: boolean }) => {
   const [showPolkadotDialog, setShowPolkadotDialog] = useState(false);
-  const { handleUserClickWallet } = useEventsContext();
 
   return (
     <>
       <button
         onClick={() => {
-          handleUserClickWallet();
           setShowPolkadotDialog(true);
         }}
         type="button"

diff --git a/src/contexts/events.tsx b/src/contexts/events.tsx
@@ -7,9 +7,10 @@ import { OfframpingState } from '../services/offrampingFlow';
 import { calculateTotalReceive } from '../components/FeeCollapse';
 import { QuoteService } from '../services/quotes';
 import { useVortexAccount } from '../hooks/useVortexAccount';
-import { Networks } from '../helpers/networks';
-import { storageService } from '../services/storage/local';
+import { getNetworkId, isNetworkEVM, Networks } from '../helpers/networks';
 import { LocalStorageKeys } from '../hooks/useLocalStorage';
+import { storageService } from '../services/storage/local';
+import { useNetwork } from './network';
 
 declare global {
   interface Window {
@@ -144,10 +145,10 @@ type EventType = TrackableEvent['event'];
 type UseEventsContext = ReturnType<typeof useEvents>;
 
 const useEvents = () => {
-  const { address, chainId } = useVortexAccount();
-  const previousAddress = useRef<string | undefined>(undefined);
+  const { address } = useVortexAccount();
   const previousChainId = useRef<number | undefined>(undefined);
-  const userClickedState = useRef<boolean>(false);
+  const firstRender = useRef(true);
+  const { selectedNetwork } = useNetwork();
 
   const scheduledQuotes = useRef<
     | {
@@ -237,6 +238,7 @@ const useEvents = () => {
   );
 
   useEffect(() => {
+    const chainId = getNetworkId(selectedNetwork);
     if (!chainId) return;
 
     if (previousChainId.current === undefined) {
@@ -252,50 +254,48 @@ const useEvents = () => {
     });
 
     previousChainId.current = chainId;
-  }, [chainId, trackEvent]);
+  }, [selectedNetwork, trackEvent]);
 
   useEffect(() => {
-    const wasConnected = previousAddress.current !== undefined;
-    const isConnected = address !== undefined;
-
-    // set sentry user as wallet address
-    if (address) {
-      Sentry.setUser({ id: address });
-
-      previousAddress.current = address;
-    }
-
-    if (!userClickedState.current) {
+    // Ignore first update. Address is set to undefined independently of the wallet connection.
+    // It immediately refreshes to a value, if connected.
+    if (firstRender.current) {
+      firstRender.current = false;
       return;
     }
+    const isEvm = isNetworkEVM(selectedNetwork);
+    const storageKey = isEvm ? LocalStorageKeys.TRIGGER_ACCOUNT_EVM : LocalStorageKeys.TRIGGER_ACCOUNT_POLKADOT;
+
+    const previous = storageService.get(storageKey);
 
-    if (!isConnected) {
+    const wasConnected = previous !== undefined;
+    const wasChanged = previous !== address;
+    const isConnected = address !== undefined;
+
+    if (!isConnected && wasConnected) {
       trackEvent({
         event: 'wallet_connect',
         wallet_action: 'disconnect',
-        account_address: previousAddress.current,
+        account_address: previous,
       });
-    } else {
+    } else if (wasChanged) {
       trackEvent({
         event: 'wallet_connect',
         wallet_action: wasConnected ? 'change' : 'connect',
         account_address: address,
       });
     }
 
-    previousAddress.current = address;
-    userClickedState.current = false;
-    // Important NOT to add userClicked to the dependencies array, otherwise logic will not work.
-  }, [address, trackEvent, userClickedState]);
-
-  const handleUserClickWallet = () => {
-    userClickedState.current = true;
-  };
+    if (address) {
+      storageService.set(storageKey, address);
+    } else {
+      storageService.remove(storageKey);
+    }
+  }, [selectedNetwork, address, trackEvent]);
 
   return {
     trackEvent,
     resetUniqueEvents,
-    handleUserClickWallet,
     scheduleQuote,
   };
 };

diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
@@ -116,6 +116,8 @@ export const useLocalStorage = <T>({
 export enum LocalStorageKeys {
   RATING = 'RATING',
   SELECTED_NETWORK = 'SELECTED_NETWORK',
+  TRIGGER_ACCOUNT_EVM = 'TRIGGER_ACCOUNT_EVM',
+  TRIGGER_ACCOUNT_POLKADOT = 'TRIGGER_ACCOUNT_POLKADOT',
   SELECTED_POLKADOT_WALLET = 'SELECTED_POLKADOT_WALLET',
   SELECTED_POLKADOT_ACCOUNT = 'SELECTED_POLKADOT_ACCOUNT',
   FIRED_INITIALIZATION_EVENTS = 'FIRED_INITIALIZATION_EVENTS',