added requested changes

hicommonwealth · Dec 3, 2024 · db1dc98 · db1dc98
1 parent 84a5a72
commit db1dc98
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 52 deletions.
diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/useUserMenuItems.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/useUserMenuItems.tsx
@@ -12,7 +12,6 @@ import WebWalletController from 'controllers/app/web_wallets';
 import { SessionKeyError } from 'controllers/server/sessions';
 import { setDarkMode } from 'helpers/darkMode';
 import { getUniqueUserAddresses } from 'helpers/user';
-import { Magic } from 'magic-sdk';
 import { useCommonNavigate } from 'navigation/helpers';
 import React, { useCallback, useEffect, useState } from 'react';
 import app, { initAppState } from 'state';
@@ -31,11 +30,11 @@ import {
   toggleDarkMode,
 } from 'views/components/component_kit/cw_toggle';
 import CWIconButton from 'views/components/component_kit/new_designs/CWIconButton';
+import useAuthentication from '../../modals/AuthModal/useAuthentication';
 import { useCommunityStake } from '../CommunityStake';
 import UserMenuItem from './UserMenuItem';
 import useCheckAuthenticatedAddresses from './useCheckAuthenticatedAddresses';
 
-const magic = new Magic(process.env.MAGIC_PUBLISHABLE_KEY!);
 const resetWalletConnectSession = async () => {
   /**
    * Imp to reset wc session on logout as otherwise, subsequent login attempts will fail
@@ -88,6 +87,8 @@ const useUserMenuItems = ({
   const userData = useUserStore();
   const hasMagic = userData.addresses?.[0]?.walletId === WalletId.Magic;
 
+  const { openMagicWallet } = useAuthentication({});
+
   const navigate = useCommonNavigate();
   const { stakeEnabled } = useCommunityStake();
   const { selectedAddress, setSelectedAddress } =
@@ -165,14 +166,6 @@ const useUserMenuItems = ({
     updateCanvasSignedAddresses().catch(console.error);
   }, [updateCanvasSignedAddresses]);
 
-  const openMagicWallet = async () => {
-    try {
-      await magic.wallet.showUI();
-    } catch (error) {
-      console.trace(error);
-    }
-  };
-
   const addresses: PopoverMenuItem[] = userData.accounts.map((account) => {
     const signed = canvasSignedAddresses.includes(account.address);
     const isActive = userData.activeAccount?.address === account.address;
@@ -275,7 +268,6 @@ const useUserMenuItems = ({
         ? [
             {
               type: 'default',
-              // label: 'Open wallet',
               label: (
                 <div className="UserMenuItem">
                   <div>Open wallet</div>

diff --git a/packages/commonwealth/client/scripts/views/modals/AuthModal/useAuthentication.tsx b/packages/commonwealth/client/scripts/views/modals/AuthModal/useAuthentication.tsx
@@ -28,6 +28,7 @@ import {
   signSessionWithAccount,
 } from 'controllers/server/sessions';
 import _ from 'lodash';
+import { Magic } from 'magic-sdk';
 import { useEffect, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import app, { initAppState } from 'state';
@@ -54,10 +55,12 @@ type UseAuthenticationProps = {
     address?: string | null | undefined,
     isNewlyCreated?: boolean,
   ) => Promise<void>;
-  onModalClose: () => void;
+  onModalClose?: () => void;
   withSessionKeyLoginFlow?: boolean;
 };
 
+const magic = new Magic(process.env.MAGIC_PUBLISHABLE_KEY!);
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Wallet = IWebWallet<any>;
 
@@ -584,6 +587,14 @@ const useAuthentication = (props: UseAuthenticationProps) => {
     props?.onModalClose?.();
   };
 
+  const openMagicWallet = async () => {
+    try {
+      await magic.wallet.showUI();
+    } catch (error) {
+      console.trace(error);
+    }
+  };
+
   return {
     wallets,
     isMagicLoading,
@@ -598,6 +609,7 @@ const useAuthentication = (props: UseAuthenticationProps) => {
     setEmail,
     setSMS,
     onVerifyMobileWalletSignature,
+    openMagicWallet,
   };
 };
 

diff --git a/...nt/scripts/views/modals/ManageCommunityStakeModal/StakeExchangeForm/StakeExchangeForm.tsx b/...nt/scripts/views/modals/ManageCommunityStakeModal/StakeExchangeForm/StakeExchangeForm.tsx
@@ -4,7 +4,6 @@ import { saveToClipboard } from 'client/scripts/utils/clipboard';
 import clsx from 'clsx';
 import { findDenominationIcon } from 'helpers/findDenomination';
 import { useBrowserAnalyticsTrack } from 'hooks/useBrowserAnalyticsTrack';
-import { Magic } from 'magic-sdk';
 import React from 'react';
 import { isMobile } from 'react-device-detect';
 import {
@@ -37,6 +36,7 @@ import { CWSelectList } from 'views/components/component_kit/new_designs/CWSelec
 import { MessageRow } from 'views/components/component_kit/new_designs/CWTextInput/MessageRow';
 import useAppStatus from '../../../../hooks/useAppStatus';
 import { trpc } from '../../../../utils/trpcClient';
+import useAuthentication from '../../../modals/AuthModal/useAuthentication';
 import { useStakeExchange } from '../hooks';
 import {
   ManageCommunityStakeModalMode,
@@ -49,8 +49,6 @@ import {
 } from './CustomAddressOption';
 import './StakeExchangeForm.scss';
 
-const magic = new Magic(process.env.MAGIC_PUBLISHABLE_KEY!);
-
 type OptionDropdown = {
   value: string;
   label: string;
@@ -256,13 +254,7 @@ const StakeExchangeForm = ({
     }
   };
 
-  const openMagicWallet = async () => {
-    try {
-      await magic.wallet.showUI();
-    } catch (error) {
-      console.trace(error);
-    }
-  };
+  const { openMagicWallet } = useAuthentication({});
 
   const insufficientFunds = isBuyMode
     ? // @ts-expect-error <StrictNullChecks/>

diff --git a/...ges/commonwealth/client/scripts/views/modals/WelcomeOnboardModal/WelcomeOnboardModal.scss b/...ges/commonwealth/client/scripts/views/modals/WelcomeOnboardModal/WelcomeOnboardModal.scss
@@ -49,7 +49,6 @@
 
     .progress {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
       gap: 8px;
       padding-bottom: 18px;
 
@@ -64,5 +63,12 @@
         }
       }
     }
+    .progress--with-magic {
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    }
+
+    .progress--without-magic {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
   }
 }
diff --git a/...ages/commonwealth/client/scripts/views/modals/WelcomeOnboardModal/WelcomeOnboardModal.tsx b/...ages/commonwealth/client/scripts/views/modals/WelcomeOnboardModal/WelcomeOnboardModal.tsx
@@ -1,6 +1,8 @@
+import { WalletId } from '@hicommonwealth/shared';
 import commonLogo from 'assets/img/branding/common-logo.svg';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import useUserStore from 'state/ui/user';
 import { CWIcon } from '../../components/component_kit/cw_icons/cw_icon';
 import { CWText } from '../../components/component_kit/cw_text';
 import { CWModal } from '../../components/component_kit/new_designs/CWModal';
@@ -18,6 +20,17 @@ const WelcomeOnboardModal = ({ isOpen, onClose }: WelcomeOnboardModalProps) => {
     WelcomeOnboardModalSteps.TermsOfServices,
   );
 
+  const user = useUserStore();
+  // const hasMagic = user.addresses?.[0]?.walletId === WalletId.Magic;
+
+  const [hasMagic, setHasMagic] = useState(false);
+
+  useEffect(() => {
+    if (user.addresses?.[0]?.walletId === WalletId.Magic) {
+      setHasMagic(true);
+    }
+  }, [user]);
+
   const handleClose = () => {
     // we require the user's to add their usernames in personal information step
     if (activeStep === WelcomeOnboardModalSteps.PersonalInformation) return;
@@ -69,17 +82,19 @@ const WelcomeOnboardModal = ({ isOpen, onClose }: WelcomeOnboardModalProps) => {
         };
       }
       case WelcomeOnboardModalSteps.MagicWallet: {
-        return {
-          index: 4,
-          title: 'Magic Wallet Creation',
-          component: (
-            <MagicWalletCreationStep
-              onComplete={() =>
-                setActiveStep(WelcomeOnboardModalSteps.JoinCommunity)
-              }
-            />
-          ),
-        };
+        return hasMagic
+          ? {
+              index: 4,
+              title: 'Magic Wallet Creation',
+              component: (
+                <MagicWalletCreationStep
+                  onComplete={() =>
+                    setActiveStep(WelcomeOnboardModalSteps.JoinCommunity)
+                  }
+                />
+              ),
+            }
+          : setActiveStep(WelcomeOnboardModalSteps.JoinCommunity);
       }
 
       case WelcomeOnboardModalSteps.JoinCommunity: {
@@ -112,17 +127,24 @@ const WelcomeOnboardModal = ({ isOpen, onClose }: WelcomeOnboardModalProps) => {
           </div>
 
           <CWText type="h2" className="modal-heading">
-            {getCurrentStep().title}
+            {getCurrentStep()?.title}
           </CWText>
-          <div className="progress">
-            {[1, 2, 3, 4, 5].map((step) => (
+          <div
+            className={clsx(
+              'progress',
+              hasMagic ? 'progress--with-magic' : 'progress--without-magic',
+            )}
+          >
+            {[1, 2, 3, ...(hasMagic ? [4, 5] : [5])].map((step) => (
               <span
                 key={step}
-                className={clsx({ completed: getCurrentStep().index >= step })}
+                className={clsx({
+                  completed: (getCurrentStep()?.index ?? 5) >= step,
+                })}
               />
             ))}
           </div>
-          {getCurrentStep().component}
+          {getCurrentStep()?.component}
         </section>
       }
     />

diff --git a/packages/commonwealth/client/scripts/views/pages/AdminPanel/UpdateCustomDomainTask.tsx b/packages/commonwealth/client/scripts/views/pages/AdminPanel/UpdateCustomDomainTask.tsx
@@ -25,8 +25,6 @@ const UpdateCustomDomainTask = () => {
           buttonType: 'destructive',
           buttonHeight: 'sm',
           onClick: () => {
-            console.log('communityId', communityId);
-            console.log('customDomain', customDomain);
             void (async () => {
               await updateCustomDomain.mutateAsync({
                 community_id: communityId,

diff --git a/packages/commonwealth/client/scripts/views/pages/MyCommunityStake/MyCommunityStake.tsx b/packages/commonwealth/client/scripts/views/pages/MyCommunityStake/MyCommunityStake.tsx
@@ -1,7 +1,6 @@
 import { WalletId } from '@hicommonwealth/shared';
 import { formatAddressShort } from 'helpers';
 import useTransactionHistory from 'hooks/useTransactionHistory';
-import { Magic } from 'magic-sdk';
 import React, { useState } from 'react';
 import useUserStore from 'state/ui/user';
 import CWPageLayout from 'views/components/component_kit/new_designs/CWPageLayout';
@@ -14,6 +13,7 @@ import {
   CWTabsRow,
 } from '../../components/component_kit/new_designs/CWTabs';
 import { CWTextInput } from '../../components/component_kit/new_designs/CWTextInput';
+import useAuthentication from '../../modals/AuthModal/useAuthentication';
 import { PageNotFound } from '../404';
 import './MyCommunityStake.scss';
 import NoTransactionHistory from './NoTransactionHistory';
@@ -27,8 +27,6 @@ const BASE_ADDRESS_FILTER = {
   value: '',
 };
 
-const magic = new Magic(process.env.MAGIC_PUBLISHABLE_KEY!);
-
 const MyCommunityStake = () => {
   const [activeTabIndex, setActiveTabIndex] = useState<number>(0);
   const [filterOptions, setFilterOptions] = useState<FilterOptions>({
@@ -57,13 +55,7 @@ const MyCommunityStake = () => {
     addressFilter = possibleAddresses;
   }
 
-  const openMagicWallet = async () => {
-    try {
-      await magic.wallet.showUI();
-    } catch (error) {
-      console.trace(error);
-    }
-  };
+  const { openMagicWallet } = useAuthentication({});
 
   const data = useTransactionHistory({
     filterOptions,