9617515325

Committed 21 Jun 2024 05:30PM UTC coverage: 14.85% (-0.1%) from 14.957%

Build # 9617515325

Build Type

Pull #8088

github

Committed by

web-flow

Commit Message

Merge 7c953ecce into f4b42bfb9

Pull Request Pull Request #8088: Dissolved `<SessionKeyRevalidationModal/>` into `<AuthModal/>` + updated auth options for session key revalidation modal variant

Run Details

3722 of 26776 branches covered (13.9%)

Branch coverage included in aggregate %.

1 of 31 new or added lines in 12 files covered. (3.23%)

216 existing lines in 26 files now uncovered.

5153 of 32988 relevant lines covered (15.62%)

5.0 hits per line

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

0.0

/packages/commonwealth/client/scripts/views/components/SublayoutHeader/useUserMenuItems.tsx

import { ChainBase, WalletId } from '@hicommonwealth/shared';
import axios from 'axios';
import { getUniqueUserAddresses } from 'client/scripts/helpers/user';
import { setActiveAccount } from 'controllers/app/login';
import { notifyError, notifySuccess } from 'controllers/app/notifications';
import WebWalletController from 'controllers/app/web_wallets';
import { SessionKeyError } from 'controllers/server/sessions';
import { setDarkMode } from 'helpers/darkMode';
import { useCommonNavigate } from 'navigation/helpers';
import React, { useEffect, useState } from 'react';
import app, { initAppState } from 'state';
import useAdminOnboardingSliderMutationStore from 'state/ui/adminOnboardingCards';
import useGroupMutationBannerStore from 'state/ui/group';
import {
  useAuthModalStore,
  useManageCommunityStakeModalStore,
} from 'state/ui/modals';
import { PopoverMenuItem } from 'views/components/component_kit/CWPopoverMenu';
import {
  CWToggle,
  toggleDarkMode,
} from 'views/components/component_kit/cw_toggle';
// import { useSessionRevalidationModal } from 'views/modals/SessionRevalidationModal';

import {
  chainBaseToCaip2,
  chainBaseToCanvasChainId,
} from 'shared/canvas/chainMappings';
import { getSessionSigners } from 'shared/canvas/verify';

import { useCommunityStake } from '../CommunityStake';

import UserMenuItem from './UserMenuItem';
import useCheckAuthenticatedAddresses from './useCheckAuthenticatedAddresses';

const resetWalletConnectSession = async () => {
  /**
   * Imp to reset wc session on logout as otherwise, subsequent login attempts will fail
   */
  const walletConnectWallet = WebWalletController.Instance.getByName(
    WalletId.WalletConnect,
  );
  // @ts-expect-error <StrictNullChecks/>
  await walletConnectWallet.reset();
};

export const handleLogout = async () => {
  try {
    await axios.get(`${app.serverUrl()}/logout`);
    await initAppState();
    await resetWalletConnectSession();
    for (const signer of getSessionSigners()) {
      signer.target.clear();
    }
    notifySuccess('Signed out');
    setDarkMode(false);
  } catch (err) {
    notifyError('Something went wrong during logging out.');
    window.location.reload();
  }
};

interface UseUserMenuItemsProps {
  onAuthModalOpen: () => void;
  isMenuOpen: boolean;
  onAddressItemClick?: () => void;
}

const useUserMenuItems = ({
  onAuthModalOpen,
  isMenuOpen,
  onAddressItemClick,
}: UseUserMenuItemsProps) => {
  const [isDarkModeOn, setIsDarkModeOn] = useState<boolean>(
    localStorage.getItem('dark-mode-state') === 'on',
  );
  const { clearSetGatingGroupBannerForCommunities } =
    useGroupMutationBannerStore();
  const { clearSetAdminOnboardingCardVisibilityForCommunities } =
    useAdminOnboardingSliderMutationStore();
  const { authenticatedAddresses } = useCheckAuthenticatedAddresses({
    recheck: isMenuOpen,
  });

  const navigate = useCommonNavigate();
  const { stakeEnabled } = useCommunityStake();
  const { selectedAddress, setSelectedAddress } =
    useManageCommunityStakeModalStore();

  const { checkForSessionKeyRevalidationErrors } = useAuthModalStore();

  const user = app.user?.addresses?.[0];
  // @ts-expect-error <StrictNullChecks/>
  const profileId = user?.profileId || user?.profile.id;

  const uniqueChainAddresses = getUniqueUserAddresses({
    forChain: app?.chain?.base,
  });
  const shouldShowAddressesSwitcherForNonMember =
    stakeEnabled &&
    app.activeChainId() &&
    !app?.user?.activeAccount &&
    uniqueChainAddresses?.length > 0;

  useEffect(() => {
    // if a user is in a stake enabled community without membership, set first user address as active that
    // matches active chain base. This address should show be set to app.user.activeAccount.
    if (!selectedAddress && shouldShowAddressesSwitcherForNonMember) {
      setSelectedAddress(uniqueChainAddresses[0]);
    }

    if (selectedAddress && !shouldShowAddressesSwitcherForNonMember) {
      setSelectedAddress('');
    }
  }, [
    shouldShowAddressesSwitcherForNonMember,
    uniqueChainAddresses,
    selectedAddress,
    setSelectedAddress,
  ]);

  const addresses: PopoverMenuItem[] = app.user?.activeAccounts?.map(
    (account) => {
      const communityCaip2Prefix = chainBaseToCaip2(account.community.base);
      const communityIdOrPrefix =
        account.community.base === ChainBase.CosmosSDK
          ? account.community.ChainNode?.bech32
          : account.community.ChainNode?.ethChainId;
      const communityCanvasChainId = chainBaseToCanvasChainId(
        account.community.base,
        // @ts-expect-error StrictNullChecks
        communityIdOrPrefix,
      );
      const caip2Address = `${communityCaip2Prefix}:${communityCanvasChainId}:${account.address}`;

      const signed = authenticatedAddresses[caip2Address];
      const isActive = app.user.activeAccount?.address === account.address;
      const walletSsoSource = app.user.addresses.find(
        (address) => address.address === account.address,
      )?.walletSsoSource;

      return {
        type: 'default',
        label: (
          <UserMenuItem
            isSignedIn={signed}
            hasJoinedCommunity={isActive}
            address={account.address}
          />
        ),
        onClick: async () => {
          if (!app.config.enforceSessionKeys || signed) {
            onAddressItemClick?.();
            return await setActiveAccount(account);
          }

          onAddressItemClick?.();

          checkForSessionKeyRevalidationErrors(
            new SessionKeyError({
              name: 'SessionKeyError',
              message: 'Session Key Expired',
              ssoSource: walletSsoSource,
              address: account.address,
            }),
          );
        },
      };
    },
  );

  const uniqueChainAddressOptions: PopoverMenuItem[] = uniqueChainAddresses.map(
    (address) => {
      const signed = true;
      const isActive = selectedAddress === address;

      return {
        type: 'default',
        label: (
          <UserMenuItem
            isSignedIn={signed}
            hasJoinedCommunity={isActive}
            address={address}
          />
        ),
        onClick: () => setSelectedAddress(address),
      };
    },
  );

  return {
    userMenuItems: [
      // if a user is in a stake enabled community without membership, show user addresses that
      // match active chain base in the dropdown. This address should show be set to app.user.activeAccount.
      ...(shouldShowAddressesSwitcherForNonMember
        ? ([
            {
              type: 'header',
              label: 'Addresses',
            },
            ...uniqueChainAddressOptions,
            { type: 'divider' },
          ] as PopoverMenuItem[])
        : []),
      ...(app.user.activeAccounts.length > 0
        ? ([
            {
              type: 'header',
              label: 'Addresses',
            },
            ...addresses,
            {
              type: 'default',
              label: 'Connect a new address',
              onClick: () => {
                onAuthModalOpen();
                onAddressItemClick?.();
              },
            },
            { type: 'divider' },
          ] as PopoverMenuItem[])
        : []),
      {
        type: 'header',
        label: 'Settings',
      },
      {
        type: 'default',
        label: 'View profile',
        onClick: () => navigate(`/profile/id/${profileId}`, {}, null),
      },
      {
        type: 'default',
        label: 'Edit profile',
        onClick: () => navigate(`/profile/edit`, {}, null),
      },
      {
        type: 'default',
        label: 'My community stake',
        onClick: () => navigate(`/myCommunityStake`, {}, null),
      },
      {
        type: 'default',
        label: 'Notifications',
        onClick: () => navigate('/notification-settings', {}, null),
      },
      {
        type: 'default',
        label: (
          <div className="UserMenuItem">
            <div>Dark mode</div>
            <CWToggle readOnly checked={isDarkModeOn} />
          </div>
        ),
        preventClosing: true,
        onClick: () => toggleDarkMode(!isDarkModeOn, setIsDarkModeOn),
      },
      {
        type: 'default',
        label: 'Sign out',
        // eslint-disable-next-line @typescript-eslint/no-misused-promises
        onClick: async () => {
          clearSetGatingGroupBannerForCommunities();
          clearSetAdminOnboardingCardVisibilityForCommunities();
          await handleLogout();
        },
      },
    ] as PopoverMenuItem[],
  };
};

export default useUserMenuItems;

1	import { ChainBase, WalletId } from '@hicommonwealth/shared';
2	import axios from 'axios';
3	import { getUniqueUserAddresses } from 'client/scripts/helpers/user';
4	import { setActiveAccount } from 'controllers/app/login';
5	import { notifyError, notifySuccess } from 'controllers/app/notifications';
6	import WebWalletController from 'controllers/app/web_wallets';
7	import { SessionKeyError } from 'controllers/server/sessions';
8	import { setDarkMode } from 'helpers/darkMode';
9	import { useCommonNavigate } from 'navigation/helpers';
10	import React, { useEffect, useState } from 'react';
11	import app, { initAppState } from 'state';
12	import useAdminOnboardingSliderMutationStore from 'state/ui/adminOnboardingCards';
13	import useGroupMutationBannerStore from 'state/ui/group';
14	import {
15	useAuthModalStore,
16	useManageCommunityStakeModalStore,
17	} from 'state/ui/modals';
18	import { PopoverMenuItem } from 'views/components/component_kit/CWPopoverMenu';
19	import {
20	CWToggle,
21	toggleDarkMode,
22	} from 'views/components/component_kit/cw_toggle';
23	// import { useSessionRevalidationModal } from 'views/modals/SessionRevalidationModal';
24
25	import {
26	chainBaseToCaip2,
27	chainBaseToCanvasChainId,
28	} from 'shared/canvas/chainMappings';
29	import { getSessionSigners } from 'shared/canvas/verify';
30
31	import { useCommunityStake } from '../CommunityStake';
32
33	import UserMenuItem from './UserMenuItem';
34	import useCheckAuthenticatedAddresses from './useCheckAuthenticatedAddresses';
35
UNCOV 36	const resetWalletConnectSession = async () => {	×
37	/**
38	* Imp to reset wc session on logout as otherwise, subsequent login attempts will fail
39	*/
40	const walletConnectWallet = WebWalletController.Instance.getByName(	×
41	WalletId.WalletConnect,
42	);
43	// @ts-expect-error <StrictNullChecks/>
UNCOV 44	await walletConnectWallet.reset();	×
45	};
46
47	export const handleLogout = async () => {
48	try {
49	await axios.get(`${app.serverUrl()}/logout`);
50	await initAppState();
51	await resetWalletConnectSession();
52	for (const signer of getSessionSigners()) {
53	signer.target.clear();
54	}
55	notifySuccess('Signed out');
56	setDarkMode(false);
57	} catch (err) {
58	notifyError('Something went wrong during logging out.');
59	window.location.reload();
60	}
61	};
62
63	interface UseUserMenuItemsProps {
64	onAuthModalOpen: () => void;
65	isMenuOpen: boolean;
66	onAddressItemClick?: () => void;
67	}
68
69	const useUserMenuItems = ({
70	onAuthModalOpen,
71	isMenuOpen,
72	onAddressItemClick,
73	}: UseUserMenuItemsProps) => {
UNCOV 74	const [isDarkModeOn, setIsDarkModeOn] = useState<boolean>(	×
75	localStorage.getItem('dark-mode-state') === 'on',
76	);
77	const { clearSetGatingGroupBannerForCommunities } =
UNCOV 78	useGroupMutationBannerStore();	×
79	const { clearSetAdminOnboardingCardVisibilityForCommunities } =
80	useAdminOnboardingSliderMutationStore();
81	const { authenticatedAddresses } = useCheckAuthenticatedAddresses({	×
82	recheck: isMenuOpen,
83	});
84
85	const navigate = useCommonNavigate();	×
86	const { stakeEnabled } = useCommunityStake();
87	const { selectedAddress, setSelectedAddress } =
88	useManageCommunityStakeModalStore();
89
90	const { checkForSessionKeyRevalidationErrors } = useAuthModalStore();
91		×
92	const user = app.user?.addresses?.[0];
93	// @ts-expect-error <StrictNullChecks/>
94	const profileId = user?.profileId \|\| user?.profile.id;	×
95
UNCOV 96	const uniqueChainAddresses = getUniqueUserAddresses({	×
97	forChain: app?.chain?.base,
98	});
99	const shouldShowAddressesSwitcherForNonMember =	×
UNCOV 100	stakeEnabled &&	×
101	app.activeChainId() &&
102	!app?.user?.activeAccount &&
103	uniqueChainAddresses?.length > 0;	×
104
105	useEffect(() => {
106	// if a user is in a stake enabled community without membership, set first user address as active that
107	// matches active chain base. This address should show be set to app.user.activeAccount.
108	if (!selectedAddress && shouldShowAddressesSwitcherForNonMember) {	×
109	setSelectedAddress(uniqueChainAddresses[0]);
110	}
111
112	if (selectedAddress && !shouldShowAddressesSwitcherForNonMember) {	×
UNCOV 113	setSelectedAddress('');	×
114	}
115	}, [
116	shouldShowAddressesSwitcherForNonMember,
117	uniqueChainAddresses,
118	selectedAddress,
119	setSelectedAddress,
120	]);
121
122	const addresses: PopoverMenuItem[] = app.user?.activeAccounts?.map(
123	(account) => {
124	const communityCaip2Prefix = chainBaseToCaip2(account.community.base);
125	const communityIdOrPrefix =
126	account.community.base === ChainBase.CosmosSDK	×
127	? account.community.ChainNode?.bech32
128	: account.community.ChainNode?.ethChainId;
129	const communityCanvasChainId = chainBaseToCanvasChainId(
130	account.community.base,
131	// @ts-expect-error StrictNullChecks	×
132	communityIdOrPrefix,
133	);
134	const caip2Address = `${communityCaip2Prefix}:${communityCanvasChainId}:${account.address}`;
135
136	const signed = authenticatedAddresses[caip2Address];	×
137	const isActive = app.user.activeAccount?.address === account.address;
138	const walletSsoSource = app.user.addresses.find(	×
139	(address) => address.address === account.address,
140	)?.walletSsoSource;
141
142	return {
143	type: 'default',
144	label: (
145	<UserMenuItem
146	isSignedIn={signed}
147	hasJoinedCommunity={isActive}
148	address={account.address}
149	/>
150	),
151	onClick: async () => {
152	if (!app.config.enforceSessionKeys \|\| signed) {	×
UNCOV 153	onAddressItemClick?.();	×
154	return await setActiveAccount(account);
155	}
156
157	onAddressItemClick?.();
158
159	checkForSessionKeyRevalidationErrors(
160	new SessionKeyError({
161	name: 'SessionKeyError',
162	message: 'Session Key Expired',
163	ssoSource: walletSsoSource,
164	address: account.address,
165	}),
166	);
167	},
168	};
169	},
170	);	×
171
172	const uniqueChainAddressOptions: PopoverMenuItem[] = uniqueChainAddresses.map(
173	(address) => {
174	const signed = true;
175	const isActive = selectedAddress === address;
176
177	return {
178	type: 'default',
179	label: (
180	<UserMenuItem	×
181	isSignedIn={signed}
182	hasJoinedCommunity={isActive}
183	address={address}
184	/>
185	),
186	onClick: () => setSelectedAddress(address),
187	};
188	},
189	);
190
UNCOV 191	return {	×
192	userMenuItems: [
193	// if a user is in a stake enabled community without membership, show user addresses that
194	// match active chain base in the dropdown. This address should show be set to app.user.activeAccount.
195	...(shouldShowAddressesSwitcherForNonMember	×
196	? ([
197	{
198	type: 'header',
199	label: 'Addresses',
200	},
201	...uniqueChainAddressOptions,
202	{ type: 'divider' },
203	] as PopoverMenuItem[])
204	: []),
205	...(app.user.activeAccounts.length > 0	×
206	? ([
207	{
208	type: 'header',
209	label: 'Addresses',
210	},
211	...addresses,
212	{
213	type: 'default',
214	label: 'Connect a new address',
215	onClick: () => {
216	onAuthModalOpen();
217	onAddressItemClick?.();
218	},
219	},
220	{ type: 'divider' },
221	] as PopoverMenuItem[])
222	: []),
223	{
224	type: 'header',
225	label: 'Settings',
226	},
227	{
228	type: 'default',
229	label: 'View profile',
230	onClick: () => navigate(`/profile/id/${profileId}`, {}, null),
231	},
232	{
233	type: 'default',
234	label: 'Edit profile',
235	onClick: () => navigate(`/profile/edit`, {}, null),
236	},
237	{
238	type: 'default',
239	label: 'My community stake',
UNCOV 240	onClick: () => navigate(`/myCommunityStake`, {}, null),	×
241	},
242	{
243	type: 'default',
244	label: 'Notifications',
245	onClick: () => navigate('/notification-settings', {}, null),
246	},
247	{
248	type: 'default',
249	label: (
250	<div className="UserMenuItem">
251	<div>Dark mode</div>
252	<CWToggle readOnly checked={isDarkModeOn} />
253	</div>
254	),
255	preventClosing: true,
256	onClick: () => toggleDarkMode(!isDarkModeOn, setIsDarkModeOn),
257	},
258	{
259	type: 'default',
260	label: 'Sign out',
261	// eslint-disable-next-line @typescript-eslint/no-misused-promises
262	onClick: async () => {
263	clearSetGatingGroupBannerForCommunities();
264	clearSetAdminOnboardingCardVisibilityForCommunities();
265	await handleLogout();
266	},
267	},
268	] as PopoverMenuItem[],
269	};
270	};
271
272	export default useUserMenuItems;

hicommonwealth / commonwealth / 9617515325

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