Skip to content

Commit

Permalink
[Sign-in Revamp]: New Auth Modal + Updated Wallet behaviours (#6520)
Browse files Browse the repository at this point in the history 
* Added FLAG_NEW_SIGN_IN_MODAL feature flag

* Updated auth button variants

* Added auth modal layout

* Integrated social logins

* Integrated cosmos, substrate, and solana wallet auth

* Show 'no wallet available' if wallets aren't available

* Added option to show specific wallets

* Replaced all instances of LoginModal with AuthModal

* Updated height of sign-in scroll

* Updated AuthModal style

* Added EVM wallet options to AuthButton

* Updated wallets visibility behaviours

* Updated type for auth modal tabs list

* Fix types

* Use CWModal components

* Fixed race condition in useWallets when creating account

* [Sign-in Revamp]: Email Sign-in UI + Implementation (#6563)

* Added email login implementation

* Added evm wallets modal UI and implementation

* Make submit buttons fullwidth on mobile

* Only show loader when email form is submitted

* Fix function call

* [Sign-in Revamp]: EVM wallets submodal implementation in Auth Modal (#6577)

* Added wallet connect reset button

* Fixed `showWalletsFor` prop logic

* Updated conditional in AuthButton

* Added branching conditions for community specific wallets

* Refactored auth modal common logic into seperate BaseModal

* Added color vars

* Removed help icon

* Temp nerfed failing landing login test

* Fixed scroll
  • Loading branch information
@mzparacha
mzparacha authored Feb 7, 2024
1 parent da49e47 commit 429a2ba
Show file tree
Hide file tree
Showing 35 changed files with 1,105 additions and 166 deletions.
1 change: 1 addition & 0 deletions packages/commonwealth/client/scripts/helpers/feature-flags.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@ export const featureFlags = {
communityHomepage: process.env.FLAG_COMMUNITY_HOMEPAGE === 'true',
newAdminOnboardingEnabled: process.env.FLAG_NEW_ADMIN_ONBOARDING === 'true',
communityStake: process.env.FLAG_COMMUNITY_STAKE === 'true',
newSignInModal: process.env.FLAG_NEW_SIGN_IN_MODAL === 'true',
};
89 changes: 63 additions & 26 deletions packages/commonwealth/client/scripts/hooks/useWallets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
} from '../../../shared/analytics/types';
import NewProfilesController from '../controllers/server/newProfiles';
import { setDarkMode } from '../helpers/darkMode';
import { featureFlags } from '../helpers/feature-flags';
import {
getAddressFromWallet,
loginToAxie,
Expand Down Expand Up @@ -66,7 +67,9 @@ const useWallets = (walletProps: IuseWalletProps) => {
const [activeStep, setActiveStep] = useState<LoginActiveStep>();
const [profiles, setProfiles] = useState<Array<ProfileRowProps>>();
const [sidebarType, setSidebarType] = useState<LoginSidebarType>();
const [username, setUsername] = useState<string>();
const [username, setUsername] = useState<string>(
featureFlags.newSignInModal ? 'Anonymous' : '',
);
const [email, setEmail] = useState<string>();
const [wallets, setWallets] = useState<Array<IWebWallet<any>>>();
const [selectedWallet, setSelectedWallet] = useState<IWebWallet<any>>();
Expand Down Expand Up @@ -174,10 +177,13 @@ const useWallets = (walletProps: IuseWalletProps) => {
}, []);

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

setIsMagicLoading(true);

if (!email) {
if (!tempEmailToUse) {
notifyError('Please enter a valid email address.');
setIsMagicLoading(false);
return;
Expand All @@ -186,7 +192,7 @@ const useWallets = (walletProps: IuseWalletProps) => {
try {
const isCosmos = app.chain?.base === ChainBase.CosmosSDK;
const { address: magicAddress } = await startLoginWithMagicLink({
email,
email: tempEmailToUse,
isCosmos,
redirectTo: document.location.pathname + document.location.search,
chain: app.chain?.id,
Expand Down Expand Up @@ -373,11 +379,24 @@ const useWallets = (walletProps: IuseWalletProps) => {
setCachedChainId(chainId);
setCachedSessionPayload(sessionPayload);
walletProps.onSuccess?.(account.address);
setSidebarType('newOrReturning');
setActiveStep('selectAccountType');

if (featureFlags.newSignInModal) {
// Create the account with default values
await onCreateNewAccount(
walletToUse,
signature,
timestamp,
chainId,
sessionPayload,
account,
);
await onSaveProfileInfo(account);
}
} catch (e) {
console.log(e);
}
setSidebarType('newOrReturning');
setActiveStep('selectAccountType');
} else {
setSidebarType('newAddressLinked');
setActiveStep('selectProfile');
Expand All @@ -386,42 +405,58 @@ const useWallets = (walletProps: IuseWalletProps) => {
};

// Handle Logic for creating a new account, including validating signature
const onCreateNewAccount = async () => {
const onCreateNewAccount = async (
currentWallet?: IWebWallet<any>,
currentCachedWalletSignature?: string,
currentCachedTimestamp?: number,
currentCachedChainId?: string,
currentCachedSessionPayload?: SessionPayload,
currentPrimaryAccount?: Account,
) => {
const walletToUse = currentWallet || selectedWallet;
const cachedWalletSignatureToUse =
currentCachedWalletSignature || cachedWalletSignature;
const cachedTimestampToUse = currentCachedTimestamp || cachedTimestamp;
const cachedChainIdToUse = currentCachedChainId || cachedChainId;
const cachedSessionPayloadToUse =
currentCachedSessionPayload || cachedSessionPayload;
const primaryAccountToUse = currentPrimaryAccount || primaryAccount;

try {
if (selectedWallet.chain !== 'near') {
await primaryAccount.validate(
cachedWalletSignature,
cachedTimestamp,
cachedChainId,
if (walletToUse.chain !== 'near') {
await primaryAccountToUse.validate(
cachedWalletSignatureToUse,
cachedTimestampToUse,
cachedChainIdToUse,
false,
);
await app.sessions.authSession(
selectedWallet.chain,
cachedChainId,
primaryAccount.address,
cachedSessionPayload,
cachedWalletSignature,
walletToUse.chain,
cachedChainIdToUse,
primaryAccountToUse.address,
cachedSessionPayloadToUse,
cachedWalletSignatureToUse,
);
}
await onLogInWithAccount(primaryAccount, false, false);
await onLogInWithAccount(primaryAccountToUse, false, 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(
primaryAccount.profile.chain,
primaryAccount.profile.address,
primaryAccountToUse.profile.chain,
primaryAccountToUse.profile.address,
);
const currentUserUpdatedProfile = updatedProfiles[0];
if (!currentUserUpdatedProfile) {
console.log('No profile yet.');
} else {
primaryAccount.profile.initialize(
primaryAccountToUse.profile.initialize(
currentUserUpdatedProfile?.name,
currentUserUpdatedProfile.address,
currentUserUpdatedProfile?.avatarUrl,
currentUserUpdatedProfile.id,
primaryAccount.profile.chain,
primaryAccountToUse.profile.chain,
currentUserUpdatedProfile?.lastActive,
);
}
Expand Down Expand Up @@ -469,20 +504,22 @@ const useWallets = (walletProps: IuseWalletProps) => {
};

// Handle saving profile information
const onSaveProfileInfo = async () => {
const onSaveProfileInfo = async (currentPrimaryAccount?: Account) => {
const primaryAccountToUse = currentPrimaryAccount || primaryAccount;

try {
if (username || avatarUrl) {
await updateProfile({
address: primaryAccount.profile.address,
chain: primaryAccount.profile.chain,
address: primaryAccountToUse.profile.address,
chain: primaryAccountToUse.profile.chain,
name: username,
avatarUrl,
});
// we should trigger a redraw emit manually
NewProfilesController.Instance.isFetched.emit('redraw');
}
if (walletProps.onSuccess)
walletProps.onSuccess(primaryAccount.profile.address);
walletProps.onSuccess(primaryAccountToUse.profile.address);
app.loginStateEmitter.emit('redraw'); // redraw app state when fully onboarded with new account
walletProps.onModalClose();
} catch (e) {
Expand Down
27 changes: 19 additions & 8 deletions packages/commonwealth/client/scripts/views/SublayoutHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import useSidebarStore from 'state/ui/sidebar';
import UserDropdown from 'views/components/Header/UserDropdown/UserDropdown';
import { CWTooltip } from 'views/components/component_kit/new_designs/CWTooltip';
import { HelpMenuPopover } from 'views/menus/help_menu';
import { AuthModal } from 'views/modals/AuthModal';
import { FeedbackModal } from 'views/modals/feedback_modal';
import { LoginModal } from 'views/modals/login_modal';
import { featureFlags } from '../helpers/feature-flags';
import app from '../state';
import { CWDivider } from './components/component_kit/cw_divider';
import { CWIconButton } from './components/component_kit/cw_icon_button';
Expand Down Expand Up @@ -40,7 +42,7 @@ export const SublayoutHeader = ({ onMobile }: SublayoutHeaderProps) => {
setRecentlyUpdatedVisibility,
} = useSidebarStore();
const { isLoggedIn } = useUserLoggedIn();
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
const location = useLocation();

useEffect(() => {
Expand Down Expand Up @@ -134,7 +136,7 @@ export const SublayoutHeader = ({ onMobile }: SublayoutHeaderProps) => {
label="Sign in"
buttonWidth="wide"
disabled={location.pathname.includes('/finishsociallogin')}
onClick={() => setIsLoginModalOpen(true)}
onClick={() => setIsAuthModalOpen(true)}
/>
)}
</div>
Expand All @@ -147,12 +149,21 @@ export const SublayoutHeader = ({ onMobile }: SublayoutHeaderProps) => {
onClose={() => setIsFeedbackModalOpen(false)}
open={isFeedbackModalOpen}
/>
<CWModal
content={<LoginModal onModalClose={() => setIsLoginModalOpen(false)} />}
isFullScreen={isWindowMediumSmallInclusive(window.innerWidth)}
onClose={() => setIsLoginModalOpen(false)}
open={isLoginModalOpen}
/>
{!featureFlags.newSignInModal ? (
<CWModal
content={
<LoginModal onModalClose={() => setIsAuthModalOpen(false)} />
}
isFullScreen={isWindowMediumSmallInclusive(window.innerWidth)}
onClose={() => setIsAuthModalOpen(false)}
open={isAuthModalOpen}
/>
) : (
<AuthModal
onClose={() => setIsAuthModalOpen(false)}
isOpen={isAuthModalOpen}
/>
)}
</>
);
};
100 changes: 72 additions & 28 deletions packages/commonwealth/client/scripts/views/components/AuthButton/AuthButton.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,63 @@
align-items: center;
gap: 16px;
border-radius: 6px;
border: 2px solid $neutral-200;
padding: 16px;
width: 100%;
min-height: 68px !important;
max-height: 68px !important;
height: 68px !important;
outline: none !important;
cursor: pointer;
background-color: white;

&:not(:disabled) {
&:focus-within,
&:focus,
&:active {
border: 2px solid $primary-200 !important;
outline: none !important;
}
&.rounded {
border-radius: 16px;
}

&:disabled {
background-color: $neutral-100 !important;
cursor: not-allowed;
&.light {
background-color: white;
border: 2px solid $neutral-200;

&:not(:disabled) {
&:focus-within,
&:focus,
&:active {
border: 2px solid $primary-200 !important;
outline: none !important;
}
}

&:disabled {
background-color: $neutral-100 !important;
cursor: not-allowed;
}

&:hover {
background-color: $neutral-25;
}
}

&:hover {
background-color: $neutral-25;
&.dark {
background-color: $gray-800;
border: transparent;

&:not(:disabled) {
&:focus-within,
&:focus,
&:active {
border: transparent !important;
outline: none !important;
}
}

&:disabled {
background-color: $neutral-800 !important;
cursor: not-allowed;
}

&:hover {
background-color: $neutral-900;
}

.Text {
color: white;
}
}

.icon {
Expand All @@ -40,20 +71,33 @@
min-height: 36px;
}

.label {
font-weight: 600;
}
.info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
width: 100%;

.label {
font-weight: 600;
margin-right: auto;
margin-top: -6px;
margin-bottom: -6px;
}

.description {
margin-left: auto;
background-color: $primary-600;
.description {
margin-top: -6px;
margin-bottom: -6px;
background-color: $primary-600;

&.no-bg {
background-color: transparent;
padding: 0 !important;
&.no-bg {
background-color: transparent;
padding: 0 !important;

.Text {
color: $neutral-400 !important;
.Text {
color: $neutral-400 !important;
}
}
}
}
Expand Down
Loading

0 comments on commit 429a2ba

Please sign in to comment.