10907986209

Committed 17 Sep 2024 05:24PM UTC coverage: 13.511% (-0.2%) from 13.759%

Build # 10907986209

Build Type

Pull #9220

github

Committed by

web-flow

Commit Message

Merge 0e1cd31c0 into e48016d6c

Pull Request Pull Request #9220: Editor link icon open modal

Run Details

3009 of 20603 branches covered (14.6%)

Branch coverage included in aggregate %.

0 of 36 new or added lines in 3 files covered. (0.0%)

1301 existing lines in 58 files now uncovered.

3900 of 30533 relevant lines covered (12.77%)

3.94 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 { 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 { getUniqueUserAddresses } from 'helpers/user';
import { useCommonNavigate } from 'navigation/helpers';
import React, { useCallback, useEffect, useState } from 'react';
import app, { initAppState } from 'state';
import { SERVER_URL } from 'state/api/config';
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 {
  chainBaseToCaip2,
  chainBaseToCanvasChainId,
  getSessionSigners,
} from '@hicommonwealth/shared';

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

import { EXCEPTION_CASE_VANILLA_getCommunityById } from 'state/api/communities/getCommuityById';
import useUserStore from 'state/ui/user';
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(`${SERVER_URL}/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 userData = useUserStore();

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

  const { checkForSessionKeyRevalidationErrors } = useAuthModalStore();

  const uniqueChainAddresses = getUniqueUserAddresses({
    forChain: app?.chain?.base,
  });
  const shouldShowAddressesSwitcherForNonMember =
    stakeEnabled &&
    app.activeChainId() &&
    !userData?.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 user.activeAccount in useUserStore().
    if (!selectedAddress && shouldShowAddressesSwitcherForNonMember) {
      setSelectedAddress(uniqueChainAddresses[0]);
    }

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

  const [canvasSignedAddresses, setCanvasSignedAddresses] = useState<string[]>(
    [],
  );

  const updateCanvasSignedAddresses = useCallback(async () => {
    const signedAddresses: string[] = [];

    await Promise.all(
      userData.accounts.map(async (account) => {
        // making a fresh query to get chain and community info for this address
        // as all the necessary fields don't exist on user.address, these should come
        // from api in the user address response, and the extra api call here removed
        const community = await EXCEPTION_CASE_VANILLA_getCommunityById(
          account.community.id,
          true,
        );
        if (community) {
          const communityCaip2Prefix = chainBaseToCaip2(
            account?.community?.base as ChainBase,
          );
          const communityIdOrPrefix =
            community.base === ChainBase.CosmosSDK
              ? community.ChainNode?.bech32
              : community.ChainNode?.eth_chain_id;
          const communityCanvasChainId = chainBaseToCanvasChainId(
            account?.community?.base as ChainBase,
            // @ts-expect-error StrictNullChecks
            communityIdOrPrefix,
          );
          const did = `did:pkh:${communityCaip2Prefix}:${communityCanvasChainId}:${account.address}`;

          const signed = authenticatedAddresses[did];
          if (signed) signedAddresses.push(account.address);
        }
      }),
    );

    setCanvasSignedAddresses(signedAddresses);
  }, [authenticatedAddresses, userData.accounts]);

  useEffect(() => {
    updateCanvasSignedAddresses().catch(console.error);
  }, [updateCanvasSignedAddresses]);

  const addresses: PopoverMenuItem[] = userData.accounts.map((account) => {
    const signed = canvasSignedAddresses.includes(account.address);
    const isActive = userData.activeAccount?.address === account.address;

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

        onAddressItemClick?.();

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

hicommonwealth / commonwealth / 10907986209

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