chore: add impersonation option

Author: creed-victor

apps/frontend/src/app/3_organisms/Header/Header.tsx

@@ -9,6 +9,7 @@ import {
   Header as UIHeader,
   Icon,
   IconNames,
+  Tooltip,
 } from '@sovryn/ui';
 
 import { ConnectWalletButton } from '../../2_molecules';
@@ -23,6 +24,7 @@ import { menuItemsMapping } from './Header.constants';
 import { BridgeMenuItem } from './components/BridgeMenuItem/BridgeMenuItem';
 import { NavItem } from './components/NavItem/NavItem';
 import { ProductLinks } from './components/ProductLinks/ProductLinks';
+import { IS_IMPERSONATING } from '../../../utils/account-debug';
 
 export const Header: FC = () => {
   const chainId = useCurrentChain();
@@ -108,6 +110,18 @@ export const Header: FC = () => {
               pending={pending}
               dataAttribute="dapp-header-connect"
             />
+            {IS_IMPERSONATING && (
+              <button
+                className={
+                  'fixed bottom-3 right-3 bg-sovryn-black text-trade-short-25 text-xs px-2 py-1 rounded'
+                }
+                onClick={() => (window as any).stopImpersonatingAccount()}
+              >
+                <Tooltip content="You are in DEBUG MODE. All RPC requests will be called from the impersonated account. Click to disable.">
+                  <span>DEBUG MODE</span>
+                </Tooltip>
+              </button>
+            )}
           </div>
         }
         extraContent={

apps/frontend/src/app/5_pages/LandingPage/components/ProtocolData/hooks/useGetBOBVolume.ts

@@ -15,7 +15,6 @@ import { decimalic } from '../../../../../../utils/math';
 import { useGetTokens } from './useGetTokens';
 
 const indexer = getIndexerUrl();
-console.log(indexer + 'sdex/volume');
 
 export const useGetBOBVolume = () => {
   const { currentChainId } = useChainStore();

apps/frontend/src/hooks/useAccount.ts

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { ethers } from 'ethers';
 
 import { useWalletConnect } from './useWalletConnect';
+import { maybeDebugAccount } from '../utils/account-debug';
 
 export const useAccount = () => {
   const { wallets } = useWalletConnect();
@@ -17,7 +18,7 @@ export const useAccount = () => {
   const signer = useMemo(() => web3provider?.getSigner(), [web3provider]);
 
   return {
-    account: wallets[0]?.accounts[0]?.address.toLowerCase() || '',
+    account: maybeDebugAccount(wallets[0]?.accounts[0]?.address),
     type: wallets[0]?.label,
     eip1193Provider: wallets[0]?.provider,
     provider: web3provider,

apps/frontend/src/hooks/useWalletConnect.ts

@@ -7,6 +7,7 @@ import { WalletState } from '@sovryn/onboard-core';
 import { connectWallet$ } from '@sovryn/onboard-core/dist/streams';
 
 import { onboard } from '../lib/connector';
+import { maybeDebugAccount } from '../utils/account-debug';
 
 export const useWalletConnect = () => {
   const [pending, setPending] = useState(false);
@@ -44,7 +45,10 @@ export const useWalletConnect = () => {
     return () => sub.unsubscribe();
   }, []);
 
-  const account = useMemo(() => wallets[0]?.accounts[0]?.address, [wallets]);
+  const account = useMemo(
+    () => maybeDebugAccount(wallets[0]?.accounts[0]?.address),
+    [wallets],
+  );
 
   const getWallet = useCallback((index: number) => wallets[index], [wallets]);
 

apps/frontend/src/utils/account-debug.ts

@@ -0,0 +1,48 @@
+import { ethers } from 'ethers';
+
+const DEBUG_WALLET =
+  typeof localStorage !== 'undefined'
+    ? localStorage.getItem('impersonate')
+    : null;
+
+export const IS_IMPERSONATING = !!DEBUG_WALLET;
+
+export function maybeDebugAccount(address?: string): string {
+  // to enable debug mode, actual user wallet must be also connected
+  if (DEBUG_WALLET && address) {
+    return DEBUG_WALLET.toLowerCase();
+  }
+  return address?.toLowerCase() ?? '';
+}
+
+function impersonateAccount(address: string) {
+  if (!ethers.utils.isAddress(address?.toLowerCase())) {
+    throw new Error("It's not a valid Ethereum address.");
+  }
+
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem('impersonate', address.toLowerCase());
+    window.location.reload();
+  }
+}
+
+function stopImpersonatingAccount() {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.removeItem('impersonate');
+    window.location.reload();
+  }
+}
+
+(() => {
+  if (typeof window !== 'undefined') {
+    (window as any).impersonateAccount = impersonateAccount;
+    (window as any).stopImpersonatingAccount = stopImpersonatingAccount;
+  }
+
+  if (IS_IMPERSONATING) {
+    console.warn(
+      '%cYou are in DEBUG MODE. All RPC requests will be called from the impersonated account. However transactions still will be signed with your connected wallet.\nTo stop impersonation, run stopImpersonatingAccount().',
+      'background: red; color: white; font-size: 16px; padding: 4px;',
+    );
+  }
+})();