From db1dc9819531f2709a3a3e910a75a599a65e6313 Mon Sep 17 00:00:00 2001 From: israellund Date: Tue, 3 Dec 2024 11:46:27 -0500 Subject: [PATCH] added requested changes --- .../SublayoutHeader/useUserMenuItems.tsx | 14 +---- .../modals/AuthModal/useAuthentication.tsx | 14 ++++- .../StakeExchangeForm/StakeExchangeForm.tsx | 12 +--- .../WelcomeOnboardModal.scss | 8 ++- .../WelcomeOnboardModal.tsx | 56 +++++++++++++------ .../AdminPanel/UpdateCustomDomainTask.tsx | 2 - .../MyCommunityStake/MyCommunityStake.tsx | 12 +--- 7 files changed, 66 insertions(+), 52 deletions(-) diff --git a/packages/commonwealth/client/scripts/views/components/SublayoutHeader/useUserMenuItems.tsx b/packages/commonwealth/client/scripts/views/components/SublayoutHeader/useUserMenuItems.tsx index acfe8f832aa..02774418982 100644 --- 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: (
Open wallet
diff --git a/packages/commonwealth/client/scripts/views/modals/AuthModal/useAuthentication.tsx b/packages/commonwealth/client/scripts/views/modals/AuthModal/useAuthentication.tsx index 67ee40405c6..749fa18493c 100644 --- 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; - 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; @@ -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/packages/commonwealth/client/scripts/views/modals/ManageCommunityStakeModal/StakeExchangeForm/StakeExchangeForm.tsx b/packages/commonwealth/client/scripts/views/modals/ManageCommunityStakeModal/StakeExchangeForm/StakeExchangeForm.tsx index 9e6a31ed3c0..7c3869db6fb 100644 --- a/packages/commonwealth/client/scripts/views/modals/ManageCommunityStakeModal/StakeExchangeForm/StakeExchangeForm.tsx +++ b/packages/commonwealth/client/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 diff --git a/packages/commonwealth/client/scripts/views/modals/WelcomeOnboardModal/WelcomeOnboardModal.scss b/packages/commonwealth/client/scripts/views/modals/WelcomeOnboardModal/WelcomeOnboardModal.scss index 60004b47431..dfd8fd376c4 100644 --- a/packages/commonwealth/client/scripts/views/modals/WelcomeOnboardModal/WelcomeOnboardModal.scss +++ b/packages/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/packages/commonwealth/client/scripts/views/modals/WelcomeOnboardModal/WelcomeOnboardModal.tsx b/packages/commonwealth/client/scripts/views/modals/WelcomeOnboardModal/WelcomeOnboardModal.tsx index 6a856ed50b4..cee9784027b 100644 --- a/packages/commonwealth/client/scripts/views/modals/WelcomeOnboardModal/WelcomeOnboardModal.tsx +++ b/packages/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: ( - - setActiveStep(WelcomeOnboardModalSteps.JoinCommunity) - } - /> - ), - }; + return hasMagic + ? { + index: 4, + title: 'Magic Wallet Creation', + component: ( + + setActiveStep(WelcomeOnboardModalSteps.JoinCommunity) + } + /> + ), + } + : setActiveStep(WelcomeOnboardModalSteps.JoinCommunity); } case WelcomeOnboardModalSteps.JoinCommunity: { @@ -112,17 +127,24 @@ const WelcomeOnboardModal = ({ isOpen, onClose }: WelcomeOnboardModalProps) => {
- {getCurrentStep().title} + {getCurrentStep()?.title} -
- {[1, 2, 3, 4, 5].map((step) => ( +
+ {[1, 2, 3, ...(hasMagic ? [4, 5] : [5])].map((step) => ( = step })} + className={clsx({ + completed: (getCurrentStep()?.index ?? 5) >= step, + })} /> ))}
- {getCurrentStep().component} + {getCurrentStep()?.component} } /> diff --git a/packages/commonwealth/client/scripts/views/pages/AdminPanel/UpdateCustomDomainTask.tsx b/packages/commonwealth/client/scripts/views/pages/AdminPanel/UpdateCustomDomainTask.tsx index 3da23c1d65c..d41778c06c2 100644 --- 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 index cf2e063a164..c4cb890c197 100644 --- 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(0); const [filterOptions, setFilterOptions] = useState({ @@ -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,