9686943689

Committed 26 Jun 2024 09:22PM UTC coverage: 14.62%. Remained the same

Build # 9686943689

Build Type

Pull #7954

github

Committed by

web-flow

Commit Message

Merge 3ccbfc027 into 4b0cef8c2

Pull Request Pull Request #7954: added mixpanel analyticst to show pwa use

Run Details

3548 of 23072 branches covered (15.38%)

Branch coverage included in aggregate %.

5 of 60 new or added lines in 46 files covered. (8.33%)

20 existing lines in 20 files now uncovered.

4899 of 34704 relevant lines covered (14.12%)

4.67 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/commonwealth/client/scripts/views/modals/AuthModal/useAuthentication.tsx

import type { Session } from '@canvas-js/interfaces';
import { ChainBase, WalletSsoSource } from '@hicommonwealth/shared';
import axios from 'axios';
import {
  completeClientLogin,
  createUserWithAddress,
  startLoginWithMagicLink,
  updateActiveAddresses,
} from 'controllers/app/login';
import { notifyError, notifyInfo } from 'controllers/app/notifications';
import TerraWalletConnectWebWalletController from 'controllers/app/webWallets/terra_walletconnect_web_wallet';
import WalletConnectWebWalletController from 'controllers/app/webWallets/walletconnect_web_wallet';
import WebWalletController from 'controllers/app/web_wallets';
import type Near from 'controllers/chain/near/adapter';
import type Substrate from 'controllers/chain/substrate/adapter';
import {
  getSessionFromWallet,
  signSessionWithAccount,
} from 'controllers/server/sessions';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { isMobile } from 'react-device-detect';
import { verifySession } from 'shared/canvas/verify';
import app, { initAppState } from 'state';
import { useUpdateProfileByAddressMutation } from 'state/api/profiles';
import { addressSwapper } from 'utils';
import {
  BaseMixpanelPayload,
  MixpanelCommunityInteractionEvent,
  MixpanelLoginEvent,
  MixpanelLoginPayload,
} from '../../../../../shared/analytics/types';
import NewProfilesController from '../../../controllers/server/newProfiles';
import { setDarkMode } from '../../../helpers/darkMode';
import { getAddressFromWallet, loginToNear } from '../../../helpers/wallet';
import useAppStatus from '../../../hooks/useAppStatus';
import { useBrowserAnalyticsTrack } from '../../../hooks/useBrowserAnalyticsTrack';
import { useFlag } from '../../../hooks/useFlag';
import Account from '../../../models/Account';
import IWebWallet from '../../../models/IWebWallet';
import {
  DISCOURAGED_NONREACTIVE_fetchProfilesByAddress,
  fetchProfilesByAddress,
} from '../../../state/api/profiles/fetchProfilesByAddress';
import { authModal } from '../../../state/ui/modals/authModal';

type UseAuthenticationProps = {
  onSuccess?: (
    address?: string | null | undefined,
    isNewlyCreated?: boolean,
  ) => void;
  onModalClose: () => void;
  onUnrecognizedAddressReceived?: () => boolean;
  useSessionKeyLoginFlow?: boolean;
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Wallet = IWebWallet<any>;

const useAuthentication = (props: UseAuthenticationProps) => {
  const userOnboardingEnabled = useFlag('userOnboardingEnabled');
  const [username, setUsername] = useState<string>('Anonymous');
  const [email, setEmail] = useState<string>();
  const [wallets, setWallets] = useState<Array<Wallet>>();
  const [selectedWallet, setSelectedWallet] = useState<Wallet>();
  const [primaryAccount, setPrimaryAccount] = useState<Account>();
  const [isMagicLoading, setIsMagicLoading] = useState<boolean>();
  // @ts-expect-error <StrictNullChecks>
  const [signerAccount, setSignerAccount] = useState<Account>(null);
  const [isNewlyCreated, setIsNewlyCreated] = useState<boolean>(false);
  const [isMobileWalletVerificationStep, setIsMobileWalletVerificationStep] =
    useState(false);

  const { isAddedToHomeScreen } = useAppStatus();

  const isWalletConnectEnabled = _.some(
    wallets,
    (w) =>
      (w instanceof WalletConnectWebWalletController ||
        w instanceof TerraWalletConnectWebWalletController) &&
      w.enabled,
  );

  const { trackAnalytics } = useBrowserAnalyticsTrack<
    MixpanelLoginPayload | BaseMixpanelPayload
  >({
    onAction: true,
  });

  const { mutateAsync: updateProfile } = useUpdateProfileByAddressMutation();

  useEffect(() => {
    if (process.env.ETH_RPC === 'e2e-test') {
      import('../../../helpers/mockMetaMaskUtil')
        .then((f) => {
          window['ethereum'] = new f.MockMetaMaskProvider(
            'https://eth-mainnet.g.alchemy.com/v2/pZsX6R3wGdnwhUJHlVmKg4QqsiS32Qm4',
            '0x09187906d2ff8848c20050df632152b5b27d816ec62acd41d4498feb522ac5c3',
          );
        })
        .catch(console.error);
    }

    // if in a community, display wallets for that community
    if (app.activeChainId()) {
      const chainbase = app.chain?.base;
      setWallets(WebWalletController.Instance.availableWallets(chainbase));
    } else {
      const sortedChainBases = [
        ChainBase.CosmosSDK,
        ChainBase.Ethereum,
        // ChainBase.NEAR,
        ChainBase.Substrate,
        ChainBase.Solana,
      ];
      setWallets(
        _.flatten(
          sortedChainBases.map((base) =>
            WebWalletController.Instance.availableWallets(base),
          ),
        ),
      );
    }
  }, []);

  const trackLoginEvent = (loginOption: string, isSocialLogin: boolean) => {
    trackAnalytics({
      event: MixpanelLoginEvent.LOGIN,
      community: app?.activeChainId(),
      communityType: app?.chain?.meta?.base,
      loginOption: loginOption,
      isSocialLogin: isSocialLogin,
      loginPageLocation: app.activeChainId() ? 'community' : 'homepage',
      isMobile,
      isPWA: isAddedToHomeScreen,
    });
  };

  // Handles Magic Link Login
  const onEmailLogin = async (emailToUse = '') => {
    const tempEmailToUse = emailToUse || email;
    setEmail(tempEmailToUse);

    setIsMagicLoading(true);

    if (!tempEmailToUse) {
      notifyError('Please enter a valid email address.');
      setIsMagicLoading(false);
      return;
    }

    try {
      const isCosmos = app.chain?.base === ChainBase.CosmosSDK;
      const isAttemptingToConnectAddressToCommunity =
        app.isLoggedIn() && app.activeChainId();
      const { address: magicAddress, isAddressNew } =
        await startLoginWithMagicLink({
          email: tempEmailToUse,
          isCosmos,
          redirectTo: document.location.pathname + document.location.search,
          chain: app.chain?.id,
        });
      setIsMagicLoading(false);

      // if SSO account address is not already present in db,
      // and `shouldOpenGuidanceModalAfterMagicSSORedirect` is `true`,
      // and the user isn't trying to link address to community,
      // then open the user auth type guidance modal
      // else clear state of `shouldOpenGuidanceModalAfterMagicSSORedirect`
      if (
        userOnboardingEnabled &&
        isAddressNew &&
        !isAttemptingToConnectAddressToCommunity &&
        !app.isLoggedIn()
      ) {
        authModal
          .getState()
          .validateAndOpenAuthTypeGuidanceModalOnSSORedirectReceived();
        return;
      }

      props?.onSuccess?.(magicAddress, isNewlyCreated);
      props?.onModalClose?.();

      trackLoginEvent('email', true);
    } catch (e) {
      notifyError(`Error authenticating with email`);
      console.error(`Error authenticating with email: ${e}`);
      setIsMagicLoading(false);
    }
  };

  // New callback for handling social login
  const onSocialLogin = async (provider: WalletSsoSource) => {
    setIsMagicLoading(true);

    try {
      const isCosmos = app?.chain?.base === ChainBase.CosmosSDK;
      const { address: magicAddress } = await startLoginWithMagicLink({
        provider,
        isCosmos,
        redirectTo: document.location.pathname + document.location.search,
        chain: app.chain?.id,
      });
      setIsMagicLoading(false);

      props?.onSuccess?.(magicAddress, isNewlyCreated);
      props?.onModalClose?.();

      trackLoginEvent(provider, true);
    } catch (e) {
      notifyError(`Error authenticating with sso account`);
      console.error(`Error authenticating with sso account: ${e}`);
      setIsMagicLoading(false);
    }
  };

  // Performs Login on the client
  const onLogInWithAccount = async (
    account: Account,
    exitOnComplete: boolean,
    newelyCreated = false,
    shouldRedrawApp = true,
  ) => {
    const profile = account.profile;

    // @ts-expect-error <StrictNullChecks>
    if (profile.name && profile.initialized) {
      // @ts-expect-error <StrictNullChecks>
      setUsername(profile.name);
    }

    if (app.isLoggedIn()) {
      await completeClientLogin(account);
    } else {
      // log in as the new user
      await initAppState(false, shouldRedrawApp);
      if (localStorage.getItem('user-dark-mode-state') === 'on') {
        setDarkMode(true);
      }
      if (app.chain) {
        const community =
          app.user.selectedCommunity ||
          app.config.chains.getById(app.activeChainId());
        await updateActiveAddresses({
          chain: community,
          shouldRedraw: shouldRedrawApp,
        });
      }
    }

    if (exitOnComplete) {
      props?.onModalClose?.();
      props?.onSuccess?.(account.address, newelyCreated);
    }
  };

  // Handle branching logic after wallet is selected
  const onAccountVerified = async (
    account: Account,
    newlyCreated: boolean,
    linking: boolean,
    wallet?: Wallet,
  ) => {
    if (props.useSessionKeyLoginFlow) {
      props?.onSuccess?.(account.address, newlyCreated);
      return;
    }

    const walletToUse = wallet || selectedWallet;

    // Handle Logged in and joining community of different chain base
    if (app.activeChainId() && app.isLoggedIn()) {
      // @ts-expect-error StrictNullChecks
      const session = await getSessionFromWallet(walletToUse);
      await account.validate(session);
      await onLogInWithAccount(account, true, newlyCreated);
      return;
    }

    // Handle Linking vs New Account cases
    if (!linking) {
      setPrimaryAccount(account);
    } else {
      if (newlyCreated) {
        notifyError("This account doesn't exist");
        return;
      }
      // @ts-expect-error <StrictNullChecks>
      if (account.address === primaryAccount.address) {
        notifyError("You can't link to the same account");
        return;
      }
    }

    // Handle receiving and caching wallet signature strings
    if (!newlyCreated && !linking) {
      try {
        // @ts-expect-error StrictNullChecks
        const session = await getSessionFromWallet(walletToUse);
        await account.validate(session);
        await onLogInWithAccount(account, true, newlyCreated);
      } catch (e) {
        notifyError(`Error verifying account`);
        console.error(`Error verifying account: ${e}`);
      }
    } else {
      if (linking) return;

      try {
        // @ts-expect-error StrictNullChecks
        const session = await signSessionWithAccount(walletToUse, account);
        // Can't call authSession now, since chain.base is unknown, so we wait till action
        props.onSuccess?.(account.address, newlyCreated);

        // Create the account with default values
        // await onCreateNewAccount(walletToUse, session, account);
        await onCreateNewAccount(walletToUse, session, account);
        await onSaveProfileInfo(account, newlyCreated);
      } catch (e) {
        notifyError(`Error verifying account`);
        console.error(`Error verifying account: ${e}`);
      }
    }
  };

  // Handle Logic for creating a new account, including validating signature
  const onCreateNewAccount = async (
    wallet?: Wallet,
    session?: Session,
    account?: Account,
  ) => {
    const walletToUse = wallet || selectedWallet;

    try {
      // @ts-expect-error <StrictNullChecks>
      if (walletToUse.chain !== 'near') {
        // @ts-expect-error StrictNullChecks
        await account.validate(session, false);
        // @ts-expect-error StrictNullChecks
        await verifySession(session);
      }
      // @ts-expect-error <StrictNullChecks>
      await onLogInWithAccount(account, false, true, false);
      // Important: when we first create an account and verify it, the user id
      // is initially null from api (reloading the page will update it), to correct
      // it we need to get the id from api
      const updatedProfiles =
        await DISCOURAGED_NONREACTIVE_fetchProfilesByAddress(
          // @ts-expect-error <StrictNullChecks>
          account.profile.chain,
          // @ts-expect-error <StrictNullChecks>
          account.profile.address,
        );
      const currentUserUpdatedProfile = updatedProfiles[0];
      if (!currentUserUpdatedProfile) {
        console.log('No profile yet.');
      } else {
        // @ts-expect-error <StrictNullChecks>
        account.profile.initialize(
          currentUserUpdatedProfile?.name,
          currentUserUpdatedProfile.address,
          currentUserUpdatedProfile?.avatarUrl,
          currentUserUpdatedProfile.id,
          // @ts-expect-error <StrictNullChecks>
          account.profile.chain,
          currentUserUpdatedProfile?.lastActive,
        );
      }
    } catch (e) {
      console.log(e);
      notifyError('Failed to create account. Please try again.');
    }
  };

  // Handle saving profile information
  const onSaveProfileInfo = async (
    account?: Account,
    newelyCreated?: boolean,
  ) => {
    try {
      if (username) {
        await updateProfile({
          // @ts-expect-error <StrictNullChecks>
          address: account.profile.address,
          // @ts-expect-error <StrictNullChecks>
          chain: account.profile.chain,
          name: username,
        });
        // we should trigger a redraw emit manually
        NewProfilesController.Instance.isFetched.emit('redraw');
      }
      // @ts-expect-error <StrictNullChecks>
      props?.onSuccess?.(account.profile.address, newelyCreated);
      app.loginStateEmitter.emit('redraw'); // redraw app state when fully onboarded with new account
    } catch (e) {
      notifyError('Failed to save profile info');
      console.error(`Failed to save profile info: ${e}`);
    }
    props?.onModalClose?.();
  };

  const onResetWalletConnect = async () => {
    // @ts-expect-error <StrictNullChecks>
    const wallet = wallets.find(
      (w) =>
        w instanceof WalletConnectWebWalletController ||
        w instanceof TerraWalletConnectWebWalletController,
    );

    // @ts-expect-error <StrictNullChecks>
    await wallet.reset();
  };

  const onWalletSelect = async (wallet: Wallet) => {
    await wallet.enable();
    setSelectedWallet(wallet);

    if (wallet.chain === 'near') {
      await loginToNear(app.chain as Near, app.isCustomDomain());
    } else {
      const selectedAddress = getAddressFromWallet(wallet);

      if (userOnboardingEnabled) {
        // check if address exists
        const profileAddresses = await fetchProfilesByAddress({
          currentChainId: '',
          profileAddresses: [
            wallet.chain === ChainBase.Substrate
              ? addressSwapper({
                  address: selectedAddress,
                  currentPrefix: parseInt(
                    (app.chain as Substrate)?.meta.ss58Prefix,
                    10,
                  ),
                })
              : selectedAddress,
          ],
          profileChainIds: [app.activeChainId() ?? wallet.chain],
          initiateProfilesAfterFetch: false,
        });
        const addressExists = profileAddresses?.length > 0;
        const isAttemptingToConnectAddressToCommunity =
          app.isLoggedIn() && app.activeChainId();
        if (
          !addressExists &&
          !isAttemptingToConnectAddressToCommunity &&
          props.onUnrecognizedAddressReceived
        ) {
          const shouldContinue = props.onUnrecognizedAddressReceived();
          if (!shouldContinue) return;
        }
      }

      if (props.useSessionKeyLoginFlow) {
        await onSessionKeyRevalidation(wallet, selectedAddress);
      } else {
        await onNormalWalletLogin(wallet, selectedAddress);
      }
    }
  };

  const onWalletAddressSelect = async (wallet: Wallet, address: string) => {
    setSelectedWallet(wallet);
    if (props.useSessionKeyLoginFlow) {
      await onSessionKeyRevalidation(wallet, address);
    } else {
      await onNormalWalletLogin(wallet, address);
    }
  };

  const getWalletRecentBlock = async (wallet: Wallet, chain: string) => {
    try {
      if (!wallet.getRecentBlock) return;
      return await wallet?.getRecentBlock?.(chain);
    } catch (err) {
      // if getRecentBlock fails, continue with null blockhash
      console.error(`Error getting recent validation block: ${err}`);
    }
  };

  const onNormalWalletLogin = async (wallet: Wallet, address: string) => {
    setSelectedWallet(wallet);

    if (app.isLoggedIn()) {
      try {
        const res = await axios.post(`${app.serverUrl()}/getAddressStatus`, {
          address:
            wallet.chain === ChainBase.Substrate
              ? addressSwapper({
                  address: address,
                  currentPrefix: parseInt(
                    (app.chain as Substrate)?.meta.ss58Prefix,
                    10,
                  ),
                })
              : address,
          community_id: app.activeChainId() ?? wallet.chain,
          jwt: app.user.jwt,
        });

        if (res.data.result.exists && res.data.result.belongsToUser) {
          notifyInfo('This address is already linked to your current account.');
          return;
        }

        if (res.data.result.exists) {
          notifyInfo(
            'This address is already linked to another account. Signing will transfer ownership to your account.',
          );
        }
      } catch (err) {
        notifyError(`Error getting address status`);
        console.error(`Error getting address status: ${err}`);
      }
    }

    try {
      const session = await getSessionFromWallet(wallet);
      const chainIdentifier = app.chain?.id || wallet.defaultNetwork;

      const validationBlockInfo = await getWalletRecentBlock(
        wallet,
        chainIdentifier,
      );

      const {
        account: signingAccount,
        newlyCreated,
        joinedCommunity,
      } = await createUserWithAddress(
        address,
        wallet.name,
        // @ts-expect-error <StrictNullChecks>
        null, // no sso source
        chainIdentifier,
        session.publicKey,
        validationBlockInfo,
      );

      setIsNewlyCreated(newlyCreated);
      if (isMobile) {
        setSignerAccount(signingAccount);
        setIsMobileWalletVerificationStep(true);
      } else {
        await onAccountVerified(signingAccount, newlyCreated, false, wallet);
      }

      if (joinedCommunity) {
        trackAnalytics({
          event: MixpanelCommunityInteractionEvent.JOIN_COMMUNITY,
          isPWA: isAddedToHomeScreen,
        });
      }

      trackLoginEvent(wallet.name, true);
    } catch (err) {
      notifyError(`Error authenticating with wallet`);
      console.error(`Error authenticating with wallet: ${err}`);
    }
  };

  const onSessionKeyRevalidation = async (wallet: Wallet, address: string) => {
    const session = await getSessionFromWallet(wallet);
    const chainIdentifier = app.chain?.id || wallet.defaultNetwork;
    const validationBlockInfo = await getWalletRecentBlock(
      wallet,
      chainIdentifier,
    );

    // Start the create-user flow, so validationBlockInfo gets saved to the backend
    // This creates a new `Account` object with fields set up to be validated by verifyAddress.
    const { account } = await createUserWithAddress(
      address,
      wallet.name,
      // @ts-expect-error <StrictNullChecks>
      null, // no sso source?
      chainIdentifier,
      // TODO: I don't think we need this field in Account at all
      session.publicKey,
      validationBlockInfo,
    );
    account.setValidationBlockInfo(
      // @ts-expect-error <StrictNullChecks>
      validationBlockInfo ? JSON.stringify(validationBlockInfo) : null,
    );

    await account.validate(session);
    await verifySession(session);
    console.log('Started new session for', wallet.chain, chainIdentifier);

    // ensure false for newlyCreated / linking vars on revalidate
    if (isMobile) {
      setSignerAccount(account);
      setIsNewlyCreated(false);
      setIsMobileWalletVerificationStep(true);
    } else {
      await onAccountVerified(account, false, false);
    }
  };

  const onVerifyMobileWalletSignature = async () => {
    await onAccountVerified(
      signerAccount,
      isNewlyCreated,
      false,
      selectedWallet,
    );
    setIsMobileWalletVerificationStep(false);
    props?.onModalClose?.();
  };

  return {
    wallets,
    isMagicLoading,
    isWalletConnectEnabled,
    isMobileWalletVerificationStep,
    onWalletAddressSelect,
    onWalletSelect,
    onResetWalletConnect,
    onEmailLogin,
    onSocialLogin,
    setEmail,
    onVerifyMobileWalletSignature,
  };
};

export default useAuthentication;

1	import type { Session } from '@canvas-js/interfaces';
2	import { ChainBase, WalletSsoSource } from '@hicommonwealth/shared';
3	import axios from 'axios';
4	import {
5	completeClientLogin,
6	createUserWithAddress,
7	startLoginWithMagicLink,
8	updateActiveAddresses,
9	} from 'controllers/app/login';
10	import { notifyError, notifyInfo } from 'controllers/app/notifications';
11	import TerraWalletConnectWebWalletController from 'controllers/app/webWallets/terra_walletconnect_web_wallet';
12	import WalletConnectWebWalletController from 'controllers/app/webWallets/walletconnect_web_wallet';
13	import WebWalletController from 'controllers/app/web_wallets';
14	import type Near from 'controllers/chain/near/adapter';
15	import type Substrate from 'controllers/chain/substrate/adapter';
16	import {
17	getSessionFromWallet,
18	signSessionWithAccount,
19	} from 'controllers/server/sessions';
20	import _ from 'lodash';
21	import { useEffect, useState } from 'react';
22	import { isMobile } from 'react-device-detect';
23	import { verifySession } from 'shared/canvas/verify';
24	import app, { initAppState } from 'state';
25	import { useUpdateProfileByAddressMutation } from 'state/api/profiles';
26	import { addressSwapper } from 'utils';
27	import {
28	BaseMixpanelPayload,
29	MixpanelCommunityInteractionEvent,
30	MixpanelLoginEvent,
31	MixpanelLoginPayload,
32	} from '../../../../../shared/analytics/types';
33	import NewProfilesController from '../../../controllers/server/newProfiles';
34	import { setDarkMode } from '../../../helpers/darkMode';
35	import { getAddressFromWallet, loginToNear } from '../../../helpers/wallet';
36	import useAppStatus from '../../../hooks/useAppStatus';
37	import { useBrowserAnalyticsTrack } from '../../../hooks/useBrowserAnalyticsTrack';
38	import { useFlag } from '../../../hooks/useFlag';
39	import Account from '../../../models/Account';
40	import IWebWallet from '../../../models/IWebWallet';
41	import {
42	DISCOURAGED_NONREACTIVE_fetchProfilesByAddress,
43	fetchProfilesByAddress,
44	} from '../../../state/api/profiles/fetchProfilesByAddress';
45	import { authModal } from '../../../state/ui/modals/authModal';
46
47	type UseAuthenticationProps = {
48	onSuccess?: (
49	address?: string \| null \| undefined,
50	isNewlyCreated?: boolean,
51	) => void;
52	onModalClose: () => void;
53	onUnrecognizedAddressReceived?: () => boolean;
54	useSessionKeyLoginFlow?: boolean;
55	};
56
57	// eslint-disable-next-line @typescript-eslint/no-explicit-any
58	type Wallet = IWebWallet<any>;
59
60	const useAuthentication = (props: UseAuthenticationProps) => {	×
61	const userOnboardingEnabled = useFlag('userOnboardingEnabled');	×
62	const [username, setUsername] = useState<string>('Anonymous');	×
63	const [email, setEmail] = useState<string>();	×
64	const [wallets, setWallets] = useState<Array<Wallet>>();	×
65	const [selectedWallet, setSelectedWallet] = useState<Wallet>();	×
66	const [primaryAccount, setPrimaryAccount] = useState<Account>();	×
67	const [isMagicLoading, setIsMagicLoading] = useState<boolean>();	×
68	// @ts-expect-error <StrictNullChecks>
69	const [signerAccount, setSignerAccount] = useState<Account>(null);	×
70	const [isNewlyCreated, setIsNewlyCreated] = useState<boolean>(false);	×
71	const [isMobileWalletVerificationStep, setIsMobileWalletVerificationStep] =
72	useState(false);	×
73
NEW 74	const { isAddedToHomeScreen } = useAppStatus();	×
75
UNCOV 76	const isWalletConnectEnabled = _.some(	×
77	wallets,
78	(w) =>	×
79	(w instanceof WalletConnectWebWalletController \|\|
80	w instanceof TerraWalletConnectWebWalletController) &&
81	w.enabled,
82	);
83
84	const { trackAnalytics } = useBrowserAnalyticsTrack<	×
85	MixpanelLoginPayload \| BaseMixpanelPayload
86	>({
87	onAction: true,
88	});
89
90	const { mutateAsync: updateProfile } = useUpdateProfileByAddressMutation();	×
91
92	useEffect(() => {	×
93	if (process.env.ETH_RPC === 'e2e-test') {	×
94	import('../../../helpers/mockMetaMaskUtil')	×
95	.then((f) => {
96	window['ethereum'] = new f.MockMetaMaskProvider(	×
97	'https://eth-mainnet.g.alchemy.com/v2/pZsX6R3wGdnwhUJHlVmKg4QqsiS32Qm4',
98	'0x09187906d2ff8848c20050df632152b5b27d816ec62acd41d4498feb522ac5c3',
99	);
100	})
101	.catch(console.error);
102	}
103
104	// if in a community, display wallets for that community
105	if (app.activeChainId()) {	×
106	const chainbase = app.chain?.base;	×
107	setWallets(WebWalletController.Instance.availableWallets(chainbase));	×
108	} else {
109	const sortedChainBases = [	×
110	ChainBase.CosmosSDK,
111	ChainBase.Ethereum,
112	// ChainBase.NEAR,
113	ChainBase.Substrate,
114	ChainBase.Solana,
115	];
116	setWallets(	×
117	_.flatten(
118	sortedChainBases.map((base) =>
119	WebWalletController.Instance.availableWallets(base),	×
120	),
121	),
122	);
123	}
124	}, []);
125
126	const trackLoginEvent = (loginOption: string, isSocialLogin: boolean) => {	×
127	trackAnalytics({	×
128	event: MixpanelLoginEvent.LOGIN,
129	community: app?.activeChainId(),
130	communityType: app?.chain?.meta?.base,
131	loginOption: loginOption,
132	isSocialLogin: isSocialLogin,
133	loginPageLocation: app.activeChainId() ? 'community' : 'homepage',	×
134	isMobile,
135	isPWA: isAddedToHomeScreen,
136	});
137	};
138
139	// Handles Magic Link Login
140	const onEmailLogin = async (emailToUse = '') => {	×
141	const tempEmailToUse = emailToUse \|\| email;	×
142	setEmail(tempEmailToUse);	×
143
144	setIsMagicLoading(true);	×
145
146	if (!tempEmailToUse) {	×
147	notifyError('Please enter a valid email address.');	×
148	setIsMagicLoading(false);	×
149	return;	×
150	}
151
152	try {	×
153	const isCosmos = app.chain?.base === ChainBase.CosmosSDK;	×
154	const isAttemptingToConnectAddressToCommunity =
155	app.isLoggedIn() && app.activeChainId();	×
156	const { address: magicAddress, isAddressNew } =
157	await startLoginWithMagicLink({	×
158	email: tempEmailToUse,
159	isCosmos,
160	redirectTo: document.location.pathname + document.location.search,
161	chain: app.chain?.id,
162	});
163	setIsMagicLoading(false);	×
164
165	// if SSO account address is not already present in db,
166	// and `shouldOpenGuidanceModalAfterMagicSSORedirect` is `true`,
167	// and the user isn't trying to link address to community,
168	// then open the user auth type guidance modal
169	// else clear state of `shouldOpenGuidanceModalAfterMagicSSORedirect`
170	if (	×
171	userOnboardingEnabled &&	×
172	isAddressNew &&
173	!isAttemptingToConnectAddressToCommunity &&
174	!app.isLoggedIn()
175	) {
176	authModal	×
177	.getState()
178	.validateAndOpenAuthTypeGuidanceModalOnSSORedirectReceived();
179	return;	×
180	}
181
182	props?.onSuccess?.(magicAddress, isNewlyCreated);	×
183	props?.onModalClose?.();	×
184
185	trackLoginEvent('email', true);	×
186	} catch (e) {
187	notifyError(`Error authenticating with email`);	×
188	console.error(`Error authenticating with email: ${e}`);	×
189	setIsMagicLoading(false);	×
190	}
191	};
192
193	// New callback for handling social login
194	const onSocialLogin = async (provider: WalletSsoSource) => {	×
195	setIsMagicLoading(true);	×
196
197	try {	×
198	const isCosmos = app?.chain?.base === ChainBase.CosmosSDK;	×
199	const { address: magicAddress } = await startLoginWithMagicLink({	×
200	provider,
201	isCosmos,
202	redirectTo: document.location.pathname + document.location.search,
203	chain: app.chain?.id,
204	});
205	setIsMagicLoading(false);	×
206
207	props?.onSuccess?.(magicAddress, isNewlyCreated);	×
208	props?.onModalClose?.();	×
209
210	trackLoginEvent(provider, true);	×
211	} catch (e) {
212	notifyError(`Error authenticating with sso account`);	×
213	console.error(`Error authenticating with sso account: ${e}`);	×
214	setIsMagicLoading(false);	×
215	}
216	};
217
218	// Performs Login on the client
219	const onLogInWithAccount = async (	×
220	account: Account,
221	exitOnComplete: boolean,
222	newelyCreated = false,	×
223	shouldRedrawApp = true,	×
224	) => {
225	const profile = account.profile;	×
226
227	// @ts-expect-error <StrictNullChecks>
228	if (profile.name && profile.initialized) {	×
229	// @ts-expect-error <StrictNullChecks>
230	setUsername(profile.name);	×
231	}
232
233	if (app.isLoggedIn()) {	×
234	await completeClientLogin(account);	×
235	} else {
236	// log in as the new user
237	await initAppState(false, shouldRedrawApp);	×
238	if (localStorage.getItem('user-dark-mode-state') === 'on') {	×
239	setDarkMode(true);	×
240	}
241	if (app.chain) {	×
242	const community =
243	app.user.selectedCommunity \|\|	×
244	app.config.chains.getById(app.activeChainId());
245	await updateActiveAddresses({	×
246	chain: community,
247	shouldRedraw: shouldRedrawApp,
248	});
249	}
250	}
251
252	if (exitOnComplete) {	×
253	props?.onModalClose?.();	×
254	props?.onSuccess?.(account.address, newelyCreated);	×
255	}
256	};
257
258	// Handle branching logic after wallet is selected
259	const onAccountVerified = async (	×
260	account: Account,
261	newlyCreated: boolean,
262	linking: boolean,
263	wallet?: Wallet,
264	) => {
265	if (props.useSessionKeyLoginFlow) {	×
266	props?.onSuccess?.(account.address, newlyCreated);	×
267	return;	×
268	}
269
270	const walletToUse = wallet \|\| selectedWallet;	×
271
272	// Handle Logged in and joining community of different chain base
273	if (app.activeChainId() && app.isLoggedIn()) {	×
274	// @ts-expect-error StrictNullChecks
275	const session = await getSessionFromWallet(walletToUse);	×
276	await account.validate(session);	×
277	await onLogInWithAccount(account, true, newlyCreated);	×
278	return;	×
279	}
280
281	// Handle Linking vs New Account cases
282	if (!linking) {	×
283	setPrimaryAccount(account);	×
284	} else {
285	if (newlyCreated) {	×
286	notifyError("This account doesn't exist");	×
287	return;	×
288	}
289	// @ts-expect-error <StrictNullChecks>
290	if (account.address === primaryAccount.address) {	×
291	notifyError("You can't link to the same account");	×
292	return;	×
293	}
294	}
295
296	// Handle receiving and caching wallet signature strings
297	if (!newlyCreated && !linking) {	×
298	try {	×
299	// @ts-expect-error StrictNullChecks
300	const session = await getSessionFromWallet(walletToUse);	×
301	await account.validate(session);	×
302	await onLogInWithAccount(account, true, newlyCreated);	×
303	} catch (e) {
304	notifyError(`Error verifying account`);	×
305	console.error(`Error verifying account: ${e}`);	×
306	}
307	} else {
308	if (linking) return;	×
309
310	try {	×
311	// @ts-expect-error StrictNullChecks
312	const session = await signSessionWithAccount(walletToUse, account);	×
313	// Can't call authSession now, since chain.base is unknown, so we wait till action
314	props.onSuccess?.(account.address, newlyCreated);	×
315
316	// Create the account with default values
317	// await onCreateNewAccount(walletToUse, session, account);
318	await onCreateNewAccount(walletToUse, session, account);	×
319	await onSaveProfileInfo(account, newlyCreated);	×
320	} catch (e) {
321	notifyError(`Error verifying account`);	×
322	console.error(`Error verifying account: ${e}`);	×
323	}
324	}
325	};
326
327	// Handle Logic for creating a new account, including validating signature
328	const onCreateNewAccount = async (	×
329	wallet?: Wallet,
330	session?: Session,
331	account?: Account,
332	) => {
333	const walletToUse = wallet \|\| selectedWallet;	×
334
335	try {	×
336	// @ts-expect-error <StrictNullChecks>
337	if (walletToUse.chain !== 'near') {	×
338	// @ts-expect-error StrictNullChecks
339	await account.validate(session, false);	×
340	// @ts-expect-error StrictNullChecks
341	await verifySession(session);	×
342	}
343	// @ts-expect-error <StrictNullChecks>
344	await onLogInWithAccount(account, false, true, false);	×
345	// Important: when we first create an account and verify it, the user id
346	// is initially null from api (reloading the page will update it), to correct
347	// it we need to get the id from api
348	const updatedProfiles =
349	await DISCOURAGED_NONREACTIVE_fetchProfilesByAddress(	×
350	// @ts-expect-error <StrictNullChecks>
351	account.profile.chain,
352	// @ts-expect-error <StrictNullChecks>
353	account.profile.address,
354	);
355	const currentUserUpdatedProfile = updatedProfiles[0];	×
356	if (!currentUserUpdatedProfile) {	×
357	console.log('No profile yet.');	×
358	} else {
359	// @ts-expect-error <StrictNullChecks>
360	account.profile.initialize(	×
361	currentUserUpdatedProfile?.name,
362	currentUserUpdatedProfile.address,
363	currentUserUpdatedProfile?.avatarUrl,
364	currentUserUpdatedProfile.id,
365	// @ts-expect-error <StrictNullChecks>
366	account.profile.chain,
367	currentUserUpdatedProfile?.lastActive,
368	);
369	}
370	} catch (e) {
371	console.log(e);	×
372	notifyError('Failed to create account. Please try again.');	×
373	}
374	};
375
376	// Handle saving profile information
377	const onSaveProfileInfo = async (	×
378	account?: Account,
379	newelyCreated?: boolean,
380	) => {
381	try {	×
382	if (username) {	×
383	await updateProfile({	×
384	// @ts-expect-error <StrictNullChecks>
385	address: account.profile.address,
386	// @ts-expect-error <StrictNullChecks>
387	chain: account.profile.chain,
388	name: username,
389	});
390	// we should trigger a redraw emit manually
391	NewProfilesController.Instance.isFetched.emit('redraw');	×
392	}
393	// @ts-expect-error <StrictNullChecks>
394	props?.onSuccess?.(account.profile.address, newelyCreated);	×
395	app.loginStateEmitter.emit('redraw'); // redraw app state when fully onboarded with new account	×
396	} catch (e) {
397	notifyError('Failed to save profile info');	×
398	console.error(`Failed to save profile info: ${e}`);	×
399	}
400	props?.onModalClose?.();	×
401	};
402
403	const onResetWalletConnect = async () => {	×
404	// @ts-expect-error <StrictNullChecks>
405	const wallet = wallets.find(	×
406	(w) =>
407	w instanceof WalletConnectWebWalletController \|\|	×
408	w instanceof TerraWalletConnectWebWalletController,
409	);
410
411	// @ts-expect-error <StrictNullChecks>
412	await wallet.reset();	×
413	};
414
415	const onWalletSelect = async (wallet: Wallet) => {	×
416	await wallet.enable();	×
417	setSelectedWallet(wallet);	×
418
419	if (wallet.chain === 'near') {	×
420	await loginToNear(app.chain as Near, app.isCustomDomain());	×
421	} else {
422	const selectedAddress = getAddressFromWallet(wallet);	×
423
424	if (userOnboardingEnabled) {	×
425	// check if address exists
426	const profileAddresses = await fetchProfilesByAddress({	×
427	currentChainId: '',
428	profileAddresses: [
429	wallet.chain === ChainBase.Substrate	×
430	? addressSwapper({
431	address: selectedAddress,
432	currentPrefix: parseInt(
433	(app.chain as Substrate)?.meta.ss58Prefix,
434	10,
435	),
436	})
437	: selectedAddress,
438	],
439	profileChainIds: [app.activeChainId() ?? wallet.chain],	×
440	initiateProfilesAfterFetch: false,
441	});
442	const addressExists = profileAddresses?.length > 0;	×
443	const isAttemptingToConnectAddressToCommunity =
444	app.isLoggedIn() && app.activeChainId();	×
445	if (	×
446	!addressExists &&	×
447	!isAttemptingToConnectAddressToCommunity &&
448	props.onUnrecognizedAddressReceived
449	) {
450	const shouldContinue = props.onUnrecognizedAddressReceived();	×
451	if (!shouldContinue) return;	×
452	}
453	}
454
455	if (props.useSessionKeyLoginFlow) {	×
456	await onSessionKeyRevalidation(wallet, selectedAddress);	×
457	} else {
458	await onNormalWalletLogin(wallet, selectedAddress);	×
459	}
460	}
461	};
462
463	const onWalletAddressSelect = async (wallet: Wallet, address: string) => {	×
464	setSelectedWallet(wallet);	×
465	if (props.useSessionKeyLoginFlow) {	×
466	await onSessionKeyRevalidation(wallet, address);	×
467	} else {
468	await onNormalWalletLogin(wallet, address);	×
469	}
470	};
471
472	const getWalletRecentBlock = async (wallet: Wallet, chain: string) => {	×
473	try {	×
474	if (!wallet.getRecentBlock) return;	×
475	return await wallet?.getRecentBlock?.(chain);	×
476	} catch (err) {
477	// if getRecentBlock fails, continue with null blockhash
478	console.error(`Error getting recent validation block: ${err}`);	×
479	}
480	};
481
482	const onNormalWalletLogin = async (wallet: Wallet, address: string) => {	×
483	setSelectedWallet(wallet);	×
484
485	if (app.isLoggedIn()) {	×
486	try {	×
487	const res = await axios.post(`${app.serverUrl()}/getAddressStatus`, {	×
488	address:
489	wallet.chain === ChainBase.Substrate	×
490	? addressSwapper({
491	address: address,
492	currentPrefix: parseInt(
493	(app.chain as Substrate)?.meta.ss58Prefix,
494	10,
495	),
496	})
497	: address,
498	community_id: app.activeChainId() ?? wallet.chain,	×
499	jwt: app.user.jwt,
500	});
501
502	if (res.data.result.exists && res.data.result.belongsToUser) {	×
503	notifyInfo('This address is already linked to your current account.');	×
504	return;	×
505	}
506
507	if (res.data.result.exists) {	×
508	notifyInfo(	×
509	'This address is already linked to another account. Signing will transfer ownership to your account.',
510	);
511	}
512	} catch (err) {
513	notifyError(`Error getting address status`);	×
514	console.error(`Error getting address status: ${err}`);	×
515	}
516	}
517
518	try {	×
519	const session = await getSessionFromWallet(wallet);	×
520	const chainIdentifier = app.chain?.id \|\| wallet.defaultNetwork;	×
521
522	const validationBlockInfo = await getWalletRecentBlock(	×
523	wallet,
524	chainIdentifier,
525	);
526
527	const {
528	account: signingAccount,
529	newlyCreated,
530	joinedCommunity,
531	} = await createUserWithAddress(	×
532	address,
533	wallet.name,
534	// @ts-expect-error <StrictNullChecks>
535	null, // no sso source
536	chainIdentifier,
537	session.publicKey,
538	validationBlockInfo,
539	);
540
541	setIsNewlyCreated(newlyCreated);	×
542	if (isMobile) {	×
543	setSignerAccount(signingAccount);	×
544	setIsMobileWalletVerificationStep(true);	×
545	} else {
546	await onAccountVerified(signingAccount, newlyCreated, false, wallet);	×
547	}
548
549	if (joinedCommunity) {	×
550	trackAnalytics({	×
551	event: MixpanelCommunityInteractionEvent.JOIN_COMMUNITY,
552	isPWA: isAddedToHomeScreen,
553	});
554	}
555
556	trackLoginEvent(wallet.name, true);	×
557	} catch (err) {
558	notifyError(`Error authenticating with wallet`);	×
559	console.error(`Error authenticating with wallet: ${err}`);	×
560	}
561	};
562
563	const onSessionKeyRevalidation = async (wallet: Wallet, address: string) => {	×
564	const session = await getSessionFromWallet(wallet);	×
565	const chainIdentifier = app.chain?.id \|\| wallet.defaultNetwork;	×
566	const validationBlockInfo = await getWalletRecentBlock(	×
567	wallet,
568	chainIdentifier,
569	);
570
571	// Start the create-user flow, so validationBlockInfo gets saved to the backend
572	// This creates a new `Account` object with fields set up to be validated by verifyAddress.
573	const { account } = await createUserWithAddress(	×
574	address,
575	wallet.name,
576	// @ts-expect-error <StrictNullChecks>
577	null, // no sso source?
578	chainIdentifier,
579	// TODO: I don't think we need this field in Account at all
580	session.publicKey,
581	validationBlockInfo,
582	);
583	account.setValidationBlockInfo(	×
584	// @ts-expect-error <StrictNullChecks>
585	validationBlockInfo ? JSON.stringify(validationBlockInfo) : null,	×
586	);
587
588	await account.validate(session);	×
589	await verifySession(session);	×
590	console.log('Started new session for', wallet.chain, chainIdentifier);	×
591
592	// ensure false for newlyCreated / linking vars on revalidate
593	if (isMobile) {	×
594	setSignerAccount(account);	×
595	setIsNewlyCreated(false);	×
596	setIsMobileWalletVerificationStep(true);	×
597	} else {
598	await onAccountVerified(account, false, false);	×
599	}
600	};
601
602	const onVerifyMobileWalletSignature = async () => {	×
603	await onAccountVerified(	×
604	signerAccount,
605	isNewlyCreated,
606	false,
607	selectedWallet,
608	);
609	setIsMobileWalletVerificationStep(false);	×
610	props?.onModalClose?.();	×
611	};
612
613	return {	×
614	wallets,
615	isMagicLoading,
616	isWalletConnectEnabled,
617	isMobileWalletVerificationStep,
618	onWalletAddressSelect,
619	onWalletSelect,
620	onResetWalletConnect,
621	onEmailLogin,
622	onSocialLogin,
623	setEmail,
624	onVerifyMobileWalletSignature,
625	};
626	};
627
628	export default useAuthentication;

hicommonwealth / commonwealth / 9686943689

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous