From 8da91b9e688a897e0031f97a0662c4ceeb78705c Mon Sep 17 00:00:00 2001
From: Bartosz Dryl <drylbartosz@gmail.com>
Date: Fri, 30 Jun 2023 09:36:11 +0200
Subject: [PATCH] Wallet settings, change password and download mnemonic
 (#4326)

* wip

* settings view ground work

* uncomment route

* add borderColor prop to banner

* fix issues with modal paddings

* create password form component, sign up modal refactoring

* add export seed dialog and change password dialog

* handle copy button

* show different settings for wallet users

* refactor password dialogs

* cr fixes

* Update packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.tsx

Co-authored-by: attemka <attemka@gmail.com>

* auth helpers further refactor

* reset form on cancel

* cr fixes

* cr fixes 2

* add additional step to ChangePassword

* action bar adjustments, add unsaved changes dialog

* fix viewer layout

* action bar changes

* action bar adjustments

* cr fixes

* fix fee issue

* change password fix?

---------

Co-authored-by: attemka <attemka@gmail.com>
---
 .../components/ActionBar/ActionBar.styles.ts  |  29 +--
 .../src/components/ActionBar/ActionBar.tsx    |  32 +--
 .../src/components/Banner/Banner.styles.ts    |   4 +-
 .../atlas/src/components/Banner/Banner.tsx    |   4 +-
 .../components/PageTabs/PageTabs.styles.ts    |  11 +-
 .../src/components/PageTabs/PageTabs.tsx      |  21 +-
 .../src/components/Tooltip/Tooltip.styles.ts  |   4 +-
 .../ForgotPasswordModal.tsx                   |   3 +-
 .../PasswordCriterias.styles.ts               |   1 -
 .../PasswordCriterias/PasswordCriterias.tsx   |   8 +-
 .../_auth/SignUpModal/SignUpModal.tsx         |   1 +
 .../SignUpSteps/SignUpEmailStep.tsx           |   4 +-
 .../SignUpPasswordStep/SignUpPasswordStep.tsx |  24 +-
 .../SignUpSteps/SignUpSteps.styles.ts         |   4 +-
 .../components/_inputs/Input/Input.styles.ts  |   5 +-
 .../src/components/_inputs/Input/Input.tsx    |  22 +-
 .../src/components/_inputs/inputs.utils.ts    |  26 ++-
 .../_overlays/Dialog/Dialog.styles.ts         |   2 -
 .../components/_overlays/Dialog/Dialog.tsx    |   1 -
 .../_templates/EntitySettingTemplate.tsx      |  28 +--
 packages/atlas/src/hooks/useCreateMember.ts   |   3 +-
 .../src/hooks/useHidePasswordInInput.tsx      |  20 ++
 .../atlas/src/providers/auth/auth.helpers.ts  |  69 +++++-
 .../src/providers/auth/auth.provider.tsx      |  17 +-
 .../atlas/src/providers/auth/auth.types.ts    |   2 +
 .../atlas/src/utils/formValidationOptions.ts  |  20 ++
 .../StudioChannelGeneralTab.tsx               |  24 +-
 .../ChangePasswordDialog.tsx                  | 209 ++++++++++++++++++
 .../ExportSeedDialog.tsx                      | 140 ++++++++++++
 .../MembershipPublicProfile.tsx               |  72 +++---
 .../MembershipSettingsView.styles.ts          |  23 +-
 .../MembershipSettingsView.tsx                |  84 ++++++-
 .../MembershipWallet.styles.ts                |  64 ++++++
 .../MembershipWallet/MembershipWallet.tsx     | 192 ++++++++++++++++
 .../MembershipWallet/index.ts                 |   1 +
 .../atlas/src/views/viewer/ViewerLayout.tsx   |  12 +-
 36 files changed, 1005 insertions(+), 181 deletions(-)
 create mode 100644 packages/atlas/src/hooks/useHidePasswordInInput.tsx
 create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/ChangePasswordDialog.tsx
 create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/ExportSeedDialog.tsx
 create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.styles.ts
 create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.tsx
 create mode 100644 packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/index.ts

diff --git a/packages/atlas/src/components/ActionBar/ActionBar.styles.ts b/packages/atlas/src/components/ActionBar/ActionBar.styles.ts
index 2bb2c60a1c..bd8bac61cf 100644
--- a/packages/atlas/src/components/ActionBar/ActionBar.styles.ts
+++ b/packages/atlas/src/components/ActionBar/ActionBar.styles.ts
@@ -47,20 +47,6 @@ export const StyledInformation = styled(Information)`
   margin-left: ${sizes(1)};
 `
 
-export const ActionButtonPrimary = styled(Button)<{ secondaryButtonExists: boolean }>`
-  grid-area: primary-button;
-
-  ${({ secondaryButtonExists }) =>
-    !secondaryButtonExists &&
-    css`
-      grid-column: 1 / span 2;
-
-      ${media.sm} {
-        grid-column: -3 / span 2;
-      }
-    `}
-`
-
 export const SecondaryButton = styled(Button)`
   grid-area: secondary-button;
 `
@@ -80,3 +66,18 @@ export const FeeContainer = styled.div`
   display: flex;
   align-items: center;
 `
+
+export const PrimaryButtonContainer = styled.div<{ secondaryButtonExists: boolean }>`
+  grid-area: primary-button;
+  width: 100%;
+
+  ${({ secondaryButtonExists }) =>
+    !secondaryButtonExists &&
+    css`
+      grid-column: 1 / span 2;
+
+      ${media.sm} {
+        grid-column: -3 / span 2;
+      }
+    `}
+`
diff --git a/packages/atlas/src/components/ActionBar/ActionBar.tsx b/packages/atlas/src/components/ActionBar/ActionBar.tsx
index 026a08a8e3..eb488cd1cd 100644
--- a/packages/atlas/src/components/ActionBar/ActionBar.tsx
+++ b/packages/atlas/src/components/ActionBar/ActionBar.tsx
@@ -5,16 +5,16 @@ import { CSSTransition } from 'react-transition-group'
 import { Fee } from '@/components/Fee'
 import { Text } from '@/components/Text'
 import { Tooltip, TooltipProps } from '@/components/Tooltip'
-import { ButtonProps } from '@/components/_buttons/Button'
+import { Button, ButtonProps } from '@/components/_buttons/Button'
 import { useHasEnoughBalance } from '@/hooks/useHasEnoughBalance'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { transitions } from '@/styles'
 
 import {
   ActionBarContainer,
-  ActionButtonPrimary,
   DraftsBadgeContainer,
   FeeContainer,
+  PrimaryButtonContainer,
   SecondaryButton,
   StyledInformation,
 } from './ActionBar.styles'
@@ -93,18 +93,22 @@ export const ActionBar = forwardRef<HTMLDivElement, ActionBarProps>(
             {secondaryButton?.text}
           </SecondaryButton>
         </CSSTransition>
-        <ActionButtonPrimary
-          {...primaryButton}
-          ref={buttonRef}
-          disabled={primaryButton.disabled || loadingState}
-          onClick={isNoneCrypto ? primaryButton.onClick : signTransactionHandler}
-          secondaryButtonExists={!!secondaryButton}
-          size={smMatch ? 'large' : 'medium'}
-          type="submit"
-        >
-          {loadingState ? 'Please wait...' : primaryButton.text}
-        </ActionButtonPrimary>
-        {primaryButtonTooltip && <Tooltip reference={buttonRef.current} {...primaryButtonTooltip} />}
+        <PrimaryButtonContainer secondaryButtonExists={!!secondaryButton}>
+          {/* tooltip is positioned weirdly on this button, that's we are setting offsetY to 22 */}
+          <Tooltip offsetY={22} {...primaryButtonTooltip}>
+            <Button
+              fullWidth
+              {...primaryButton}
+              ref={buttonRef}
+              disabled={primaryButton.disabled || loadingState}
+              onClick={isNoneCrypto ? primaryButton.onClick : signTransactionHandler}
+              size={smMatch ? 'large' : 'medium'}
+              type="submit"
+            >
+              {loadingState ? 'Please wait...' : primaryButton.text}
+            </Button>
+          </Tooltip>
+        </PrimaryButtonContainer>
       </ActionBarContainer>
     )
   }
diff --git a/packages/atlas/src/components/Banner/Banner.styles.ts b/packages/atlas/src/components/Banner/Banner.styles.ts
index c1da921839..e4d140ced3 100644
--- a/packages/atlas/src/components/Banner/Banner.styles.ts
+++ b/packages/atlas/src/components/Banner/Banner.styles.ts
@@ -34,13 +34,13 @@ export const BannerDescription = styled.div<{ withTitle?: boolean }>`
   white-space: pre-line;
 `
 
-export const BannerWrapper = styled.div<{ size: 'small' | 'medium' }>`
+export const BannerWrapper = styled.div<{ size: 'small' | 'medium'; borderColor?: string }>`
   flex: 1;
   position: relative;
   padding: ${(props) => (props.size === 'small' ? sizes(4) : sizes(6))};
   width: 100%;
   background-color: ${cVar('colorBackgroundMutedAlpha')};
-  border-left: 2px solid ${cVar('colorBorderPrimary')};
+  border-left: 2px solid ${({ borderColor }) => borderColor ?? cVar('colorBorderPrimary')};
 `
 
 export const ActionButton = styled(Button)`
diff --git a/packages/atlas/src/components/Banner/Banner.tsx b/packages/atlas/src/components/Banner/Banner.tsx
index 6ba6ede31a..49ed33bc30 100644
--- a/packages/atlas/src/components/Banner/Banner.tsx
+++ b/packages/atlas/src/components/Banner/Banner.tsx
@@ -22,6 +22,7 @@ type ActionButtonProps = {
 
 export type BannerProps = {
   dismissibleId?: string
+  borderColor?: string
   title?: string
   description?: ReactNode
   className?: string
@@ -32,6 +33,7 @@ export type BannerProps = {
 
 export const Banner: FC<BannerProps> = ({
   title,
+  borderColor,
   description,
   className,
   icon,
@@ -49,7 +51,7 @@ export const Banner: FC<BannerProps> = ({
   }
 
   return (
-    <BannerWrapper size={size} className={className}>
+    <BannerWrapper size={size} className={className} borderColor={borderColor}>
       <Container>
         <div>
           {title && (
diff --git a/packages/atlas/src/components/PageTabs/PageTabs.styles.ts b/packages/atlas/src/components/PageTabs/PageTabs.styles.ts
index 04caff01ee..f1f1fb5613 100644
--- a/packages/atlas/src/components/PageTabs/PageTabs.styles.ts
+++ b/packages/atlas/src/components/PageTabs/PageTabs.styles.ts
@@ -7,8 +7,15 @@ export const PageTabsWrapper = styled.div`
   padding: 0 ${sizes(4)};
   box-shadow: ${cVar('effectDividersBottom')};
   display: flex;
-  justify-content: space-between;
+`
+
+export const BackActionWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: ${sizes(2)} ${sizes(4)} ${sizes(2)} 0;
+  position: relative;
+  border-right: 1px solid ${cVar('colorCoreNeutral600')};
 `
 export const TailingContentWrapper = styled.div`
-  margin: ${sizes(2)} ${sizes(4)};
+  margin: ${sizes(2)} ${sizes(4)} ${sizes(2)} auto;
 `
diff --git a/packages/atlas/src/components/PageTabs/PageTabs.tsx b/packages/atlas/src/components/PageTabs/PageTabs.tsx
index 1e564fcc86..68ea7ffc92 100644
--- a/packages/atlas/src/components/PageTabs/PageTabs.tsx
+++ b/packages/atlas/src/components/PageTabs/PageTabs.tsx
@@ -1,19 +1,30 @@
 import { FC, ReactNode } from 'react'
 
-import { PageTabsWrapper, TailingContentWrapper } from './PageTabs.styles'
+import { SvgActionChevronL } from '@/assets/icons'
+
+import { BackActionWrapper, PageTabsWrapper, TailingContentWrapper } from './PageTabs.styles'
 
 import { Tabs, TabsProps } from '../Tabs'
+import { Button, ButtonProps } from '../_buttons/Button'
+
+type BackAction = Pick<ButtonProps, 'to' | 'onClick'>
 
-type PageTabsProps = {
+type PageTabsProps = Omit<TabsProps, 'underline'> & {
+  backAction?: BackAction
   trailingContent?: ReactNode
-} & Omit<TabsProps, 'underline'>
+}
 
-export const PageTabs: FC<PageTabsProps> = ({ className, trailingContent, ...tabsProps }) => {
+export const PageTabs: FC<PageTabsProps> = ({ className, backAction, trailingContent, ...tabsProps }) => {
   return (
     <PageTabsWrapper className={className}>
+      {backAction && (
+        <BackActionWrapper>
+          <Button variant="tertiary" size="medium" icon={<SvgActionChevronL />} {...backAction} />
+        </BackActionWrapper>
+      )}
       <Tabs {...tabsProps} />
-      {/* todo add support for filters */}
       {trailingContent && <TailingContentWrapper>{trailingContent}</TailingContentWrapper>}
+      {/* todo add support for filters */}
     </PageTabsWrapper>
   )
 }
diff --git a/packages/atlas/src/components/Tooltip/Tooltip.styles.ts b/packages/atlas/src/components/Tooltip/Tooltip.styles.ts
index ef11a66008..3f6e5e6f56 100644
--- a/packages/atlas/src/components/Tooltip/Tooltip.styles.ts
+++ b/packages/atlas/src/components/Tooltip/Tooltip.styles.ts
@@ -27,7 +27,7 @@ type TooltipTextProps = {
 
 export const TooltipText = styled(Text)<TooltipTextProps>`
   display: inline-block;
-  max-width: 200px;
+  max-width: 224px;
 
   ${({ withIcon, headerText }) => withIcon && headerText && `margin-left: ${sizes(7)}`};
 `
@@ -48,7 +48,7 @@ const customContentCss = css`
 `
 
 export const TooltipContainer = styled.div<TooltipContainerProps>`
-  display: inline-flex;
+  display: block;
   flex-direction: ${({ hasHeader, hasCustomContent }) => (hasHeader || hasCustomContent ? 'column' : 'row')};
   padding: ${({ hasHeader, multiline }) => sizes(hasHeader || multiline ? 3 : 2)};
   background-color: ${cVar('colorBackgroundElevated')};
diff --git a/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.tsx b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.tsx
index 87285f1a7a..c9ed7cc5b8 100644
--- a/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.tsx
+++ b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.tsx
@@ -14,7 +14,8 @@ import { Button } from '@/components/_buttons/Button'
 import { DialogModal } from '@/components/_overlays/DialogModal'
 import { atlasConfig } from '@/config'
 import { ORION_AUTH_URL } from '@/config/env'
-import { keyring, loginRequest, logoutRequest, prepareEncryptionArtifacts } from '@/providers/auth/auth.helpers'
+import { keyring } from '@/joystream-lib/lib'
+import { loginRequest, logoutRequest, prepareEncryptionArtifacts } from '@/providers/auth/auth.helpers'
 import { useAuthStore } from '@/providers/auth/auth.store'
 import { useSnackbar } from '@/providers/snackbars'
 import { SentryLogger } from '@/utils/logs'
diff --git a/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.styles.ts b/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.styles.ts
index c20e2fc808..d4a40ac7cd 100644
--- a/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.styles.ts
+++ b/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.styles.ts
@@ -14,7 +14,6 @@ export const PasswordRequirementsList = styled.ul`
   list-style-type: none;
   display: grid;
   gap: ${sizes(2)};
-  margin-bottom: ${sizes(6)};
 `
 
 export const PasswordRequirementItem = styled(Text)`
diff --git a/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.tsx b/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.tsx
index bd026b7ae2..d9ee94a394 100644
--- a/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.tsx
+++ b/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.tsx
@@ -71,7 +71,11 @@ export const PasswordCriteria: FC<PasswordCriteriaProps> = ({ text, validationSt
   )
 }
 
-export const PasswordCriterias = ({ path = 'password' }: { path?: string }) => {
+type PasswordCriteriasProps = {
+  path?: string
+}
+
+export const PasswordCriterias: FC<PasswordCriteriasProps> = ({ path = 'password' }) => {
   const context = useFormContext()
   const [passwordRequirementsErrors, setPasswordRequirementsErrors] = useState<PasswordRequirementsErrors>(
     PASSWORD_REQUIREMENTS_ERRORS_INITIAL_STATE
@@ -91,7 +95,7 @@ export const PasswordCriterias = ({ path = 'password' }: { path?: string }) => {
       }
 
       setPasswordRequirementsErrors(() => ({
-        length: getValidationState(password.length <= 9),
+        length: getValidationState(password.length <= 9 || password.length >= 64),
         number: getValidationState(/^[^0-9]*$/.test(password)),
         upperCase: getValidationState(/^[^A-Z]*$/.test(password)),
         specialCharacter: getValidationState(/^[^!@#$%^&*()_+]*$/.test(password)),
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx b/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx
index 098f858673..96762ae838 100644
--- a/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx
@@ -229,6 +229,7 @@ export const SignUpModal = () => {
       {currentStep === SignUpSteps.SignUpEmail && (
         <SignUpEmailStep
           {...commonProps}
+          isOverflowing={overflow || !smMatch}
           isEmailAlreadyTakenError={emailAlreadyTakenError}
           onEmailSubmit={handleEmailStepSubmit}
           email={signUpFormData.email}
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpEmailStep.tsx b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpEmailStep.tsx
index edea70cd58..be7863584a 100644
--- a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpEmailStep.tsx
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpEmailStep.tsx
@@ -39,6 +39,7 @@ type EmailStepForm = z.infer<typeof zodSchema>
 type SignUpEmailStepProps = {
   onEmailSubmit: (email: string, confirmedTerms: boolean) => void
   isEmailAlreadyTakenError?: boolean
+  isOverflowing: boolean
 } & SignUpStepsCommonProps &
   Pick<AccountFormData, 'email' | 'confirmedTerms'>
 
@@ -46,6 +47,7 @@ export const SignUpEmailStep: FC<SignUpEmailStepProps> = ({
   setPrimaryButtonProps,
   hasNavigatedBack,
   isEmailAlreadyTakenError,
+  isOverflowing,
   onEmailSubmit,
   confirmedTerms,
   email,
@@ -94,7 +96,7 @@ export const SignUpEmailStep: FC<SignUpEmailStepProps> = ({
       hasNavigatedBack={hasNavigatedBack}
       subtitle="If you misspell your email address, please note that there is no option for us to recover your account."
     >
-      <StyledSignUpForm>
+      <StyledSignUpForm additionalPaddingBottom={!isOverflowing}>
         <FormField label="Email" error={errors.email?.message}>
           <Input {...register('email')} placeholder="Email" error={!!errors.email} />
         </FormField>
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpPasswordStep/SignUpPasswordStep.tsx b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpPasswordStep/SignUpPasswordStep.tsx
index 71d6101580..744bc9ad52 100644
--- a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpPasswordStep/SignUpPasswordStep.tsx
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpPasswordStep/SignUpPasswordStep.tsx
@@ -1,7 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { FC, RefObject, useCallback, useEffect, useRef, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
-import { z } from 'zod'
 
 import { SvgActionHide, SvgActionShow } from '@/assets/icons'
 import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
@@ -9,30 +8,11 @@ import { PasswordCriterias } from '@/components/_auth/PasswordCriterias'
 import { FormField } from '@/components/_inputs/FormField'
 import { Input, InputProps } from '@/components/_inputs/Input'
 import { AccountFormData } from '@/hooks/useCreateMember'
+import { passwordAndRepeatPasswordSchema } from '@/utils/formValidationOptions'
 
 import { StyledSignUpForm } from '../SignUpSteps.styles'
 import { SignUpStepsCommonProps } from '../SignUpSteps.types'
 
-const commonPasswordValidation = z
-  .string()
-  .regex(/^(?=.*[0-9])(?=.*[A-Z])(?=.*[!@#$%^&*()_+]).*$/, { message: 'Password has to meet requirements.' })
-  .min(9, { message: 'Password has to meet requirements.' })
-
-const zodSchema = z
-  .object({
-    password: commonPasswordValidation,
-    confirmPassword: commonPasswordValidation,
-  })
-  .refine(
-    (data) => {
-      return data.password === data.confirmPassword
-    },
-    {
-      path: ['confirmPassword'],
-      message: 'Password address has to match.',
-    }
-  )
-
 type PasswordStepForm = {
   password: string
   confirmPassword: string
@@ -59,7 +39,7 @@ export const SignUpPasswordStep: FC<SignUpPasswordStepProps> = ({
       password,
       confirmPassword: password,
     },
-    resolver: zodResolver(zodSchema),
+    resolver: zodResolver(passwordAndRepeatPasswordSchema),
   })
   const {
     handleSubmit,
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSteps.styles.ts b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSteps.styles.ts
index 4cc35722da..f457f81e4f 100644
--- a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSteps.styles.ts
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSteps.styles.ts
@@ -2,9 +2,11 @@ import styled from '@emotion/styled'
 
 import { cVar, sizes } from '@/styles'
 
-export const StyledSignUpForm = styled.form`
+export const StyledSignUpForm = styled.form<{ additionalPaddingBottom?: boolean }>`
   display: grid;
   gap: ${sizes(6)};
+  padding-bottom: ${({ additionalPaddingBottom }) =>
+    additionalPaddingBottom ? 'var(--local-size-dialog-padding)' : 0};
 `
 
 export const CheckboxWrapper = styled.div<{ isAccepted: boolean }>`
diff --git a/packages/atlas/src/components/_inputs/Input/Input.styles.ts b/packages/atlas/src/components/_inputs/Input/Input.styles.ts
index b945a9a9b4..ea2a5d1011 100644
--- a/packages/atlas/src/components/_inputs/Input/Input.styles.ts
+++ b/packages/atlas/src/components/_inputs/Input/Input.styles.ts
@@ -15,6 +15,7 @@ import {
 type TextInputProps = {
   error?: boolean
   inputSize: InputSize
+  disabledAttributeOnly?: boolean
 } & NodeWidthProps
 
 export const TextInput = styled.input<TextInputProps>`
@@ -83,7 +84,7 @@ export const NodeContainer = styled.div<NodeContainerProps>`
   ${nodePlacementStyles};
 `
 
-export const InputContainer = styled.div<{ size: InputSize }>`
+export const InputContainer = styled.div<{ size: InputSize; ignoreBoxShadow?: boolean }>`
   position: relative;
   height: max-content;
   font: ${({ size }) => (size === 'large' ? cVar('typographyDesktopT300') : cVar('typographyDesktopT200'))};
@@ -92,7 +93,7 @@ export const InputContainer = styled.div<{ size: InputSize }>`
 
   :focus-within {
     ${TextInput} {
-      ${getSharedInputStyles().focus};
+      ${({ ignoreBoxShadow }) => getSharedInputStyles(ignoreBoxShadow).focus};
     }
     ${NodeContainer} {
       > svg > path {
diff --git a/packages/atlas/src/components/_inputs/Input/Input.tsx b/packages/atlas/src/components/_inputs/Input/Input.tsx
index 97d5b32599..5b4e6b5df6 100644
--- a/packages/atlas/src/components/_inputs/Input/Input.tsx
+++ b/packages/atlas/src/components/_inputs/Input/Input.tsx
@@ -38,6 +38,7 @@ export type InputProps = {
   autoComplete?: 'off' | 'new-password'
   error?: boolean
   disabled?: boolean
+  disabledAttributeOnly?: boolean
   size?: InputSize
   processing?: boolean
   nodeStart?: ReactNode
@@ -59,6 +60,7 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
     onClick,
     error,
     disabled,
+    disabledAttributeOnly,
     placeholder,
     defaultValue,
     nodeStart,
@@ -123,7 +125,7 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
   }
 
   return (
-    <InputContainer size={size} className={className}>
+    <InputContainer size={size} className={className} ignoreBoxShadow={disabledAttributeOnly}>
       <TextInput
         inputSize={size}
         error={error}
@@ -134,6 +136,7 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
         name={name}
         value={value}
         disabled={disabled}
+        disabledAttributeOnly={disabledAttributeOnly}
         onChange={onChange}
         onFocus={onFocus}
         onBlur={onBlur}
@@ -147,19 +150,30 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
       />
       <span className="border-span" />
       {nodeStart && (
-        <NodeContainer size={size} onClick={() => inputRef.current?.focus()} ref={nodeLeftRef} left disabled={disabled}>
+        <NodeContainer
+          size={size}
+          onClick={() => inputRef.current?.focus()}
+          ref={nodeLeftRef}
+          left
+          disabled={disabled && !disabledAttributeOnly}
+        >
           {renderedNodeStart}
         </NodeContainer>
       )}
       {(nodeEnd || actionButton || processing) && (
-        <NodeContainer size={size} ref={nodeRightRef} disabled={disabled} isButton={!!actionButton}>
+        <NodeContainer
+          size={size}
+          ref={nodeRightRef}
+          disabled={disabled && !disabledAttributeOnly}
+          isButton={!!actionButton}
+        >
           {processing && <Loader variant="xsmall" />}
           {actionButton ? (
             <Tooltip text={actionButton.tooltipText} placement="top" hideOnClick={false}>
               <Button
                 {...actionButton}
                 variant="tertiary"
-                disabled={disabled}
+                disabled={disabled && !disabledAttributeOnly}
                 size="small"
                 onClick={handleButtonClick}
               />
diff --git a/packages/atlas/src/components/_inputs/inputs.utils.ts b/packages/atlas/src/components/_inputs/inputs.utils.ts
index df28199bd1..dc42180b3e 100644
--- a/packages/atlas/src/components/_inputs/inputs.utils.ts
+++ b/packages/atlas/src/components/_inputs/inputs.utils.ts
@@ -16,7 +16,7 @@ export const inputBorderColors = {
   focus: cVar('colorBorderPrimary'),
 }
 
-export const getSharedInputStyles = (ignoreBoxShadow?: boolean) => ({
+export const getSharedInputStyles = (ignoreBoxShadow?: boolean, disabledAttributeOnly?: boolean) => ({
   default: css`
     /* inherit from Text component font size and color */
     font-size: inherit;
@@ -66,11 +66,13 @@ export const getSharedInputStyles = (ignoreBoxShadow?: boolean) => ({
       background-color: ${ignoreBoxShadow ? 'transparent' : inputBorderColors.error};
     }
   `,
-  disabled: css`
-    opacity: 0.5;
-    background-color: ${cVar('colorBackgroundMutedAlpha')};
-    cursor: not-allowed;
-  `,
+  disabled: disabledAttributeOnly
+    ? null
+    : css`
+        opacity: 0.5;
+        background-color: ${cVar('colorBackgroundMutedAlpha')};
+        cursor: not-allowed;
+      `,
   focus: css`
     & + span {
       background-color: ${ignoreBoxShadow ? 'transparent' : inputBorderColors.focus};
@@ -105,11 +107,19 @@ export const getInputPadding = ({ inputSize, leftNodeWidth, rightNodeWidth }: Ge
   `
 }
 
-export const getBaseInputStyles = ({ error, ignoreBoxShadow }: { error?: boolean; ignoreBoxShadow?: boolean }) => css`
+export const getBaseInputStyles = ({
+  error,
+  ignoreBoxShadow,
+  disabledAttributeOnly,
+}: {
+  error?: boolean
+  ignoreBoxShadow?: boolean
+  disabledAttributeOnly?: boolean
+}) => css`
   ${getSharedInputStyles(ignoreBoxShadow).default};
 
   :disabled {
-    ${getSharedInputStyles(ignoreBoxShadow).disabled};
+    ${getSharedInputStyles(ignoreBoxShadow, disabledAttributeOnly).disabled};
   }
 
   :hover:not(:disabled) {
diff --git a/packages/atlas/src/components/_overlays/Dialog/Dialog.styles.ts b/packages/atlas/src/components/_overlays/Dialog/Dialog.styles.ts
index d4fcaee7e7..0881408bfe 100644
--- a/packages/atlas/src/components/_overlays/Dialog/Dialog.styles.ts
+++ b/packages/atlas/src/components/_overlays/Dialog/Dialog.styles.ts
@@ -15,7 +15,6 @@ type SizeProps = {
 
 type ContentProps = {
   noContentPadding?: boolean
-  hasFooter: boolean
 }
 
 const getDialogPaddingVariableStyles = ({ size }: SizeProps) =>
@@ -99,7 +98,6 @@ export const Footer = styled.div<FooterProps>`
   justify-content: space-between;
   flex-direction: ${({ additionalActionsNodeMobilePosition = 'top' }) =>
     additionalActionsNodeMobilePosition === 'bottom' ? 'column-reverse' : 'column'};
-  padding-top: var(--local-size-dialog-padding);
 
   ${({ dividers }) => dividers && footerDividersStyles};
 
diff --git a/packages/atlas/src/components/_overlays/Dialog/Dialog.tsx b/packages/atlas/src/components/_overlays/Dialog/Dialog.tsx
index da5530ab6e..e763a5c613 100644
--- a/packages/atlas/src/components/_overlays/Dialog/Dialog.tsx
+++ b/packages/atlas/src/components/_overlays/Dialog/Dialog.tsx
@@ -87,7 +87,6 @@ export const Dialog: FC<DialogProps> = ({
         </Header>
       )}
       <Content
-        hasFooter={hasFooter}
         data-scroll-lock-scrollable
         noContentPadding={noContentPadding}
         className={contentClassName}
diff --git a/packages/atlas/src/components/_templates/EntitySettingTemplate.tsx b/packages/atlas/src/components/_templates/EntitySettingTemplate.tsx
index a76cbdbc34..3cbbfd8670 100644
--- a/packages/atlas/src/components/_templates/EntitySettingTemplate.tsx
+++ b/packages/atlas/src/components/_templates/EntitySettingTemplate.tsx
@@ -8,11 +8,19 @@ import { cVar, media, sizes } from '@/styles'
 type EntitySettingTemplateProps = PropsWithChildren<{
   title: string
   description?: string
+  isFirst?: boolean
+  isLast?: boolean
 }>
 
-export const EntitySettingTemplate: FC<EntitySettingTemplateProps> = ({ children, title, description }) => {
+export const EntitySettingTemplate: FC<EntitySettingTemplateProps> = ({
+  children,
+  title,
+  description,
+  isLast,
+  isFirst,
+}) => {
   return (
-    <StyledLayoutGrid>
+    <StyledLayoutGrid isFirst={isFirst} isLast={isLast}>
       <GridItem colStart={{ base: 1 }} colSpan={{ base: 12, sm: 5, lg: 4 }} rowStart={{ base: 1 }}>
         <Text variant="h400" as="h3" margin={{ bottom: 4 }}>
           {title}
@@ -28,18 +36,12 @@ export const EntitySettingTemplate: FC<EntitySettingTemplateProps> = ({ children
   )
 }
 
-export const StyledLayoutGrid = styled(LayoutGrid)`
+export const StyledLayoutGrid = styled(LayoutGrid)<{ isFirst?: boolean; isLast?: boolean }>`
   row-gap: ${sizes(8)};
-  padding: ${sizes(10)} 0;
-  ${media.sm} {
-    padding: ${sizes(6)} 0;
-  }
+  padding: ${({ isFirst }) => (isFirst ? `0 0 ${sizes(10)} 0` : `${sizes(10)} 0`)};
+  box-shadow: ${({ isLast }) => (isLast ? 'unset' : cVar('effectDividersBottom'))};
 
-  :first-of-type {
-    padding-top: 0;
-  }
-
-  :not(:last-of-type) {
-    box-shadow: ${cVar('effectDividersBottom')};
+  ${media.sm} {
+    padding: ${({ isFirst }) => (isFirst ? `0 0 ${sizes(6)} 0` : `${sizes(6)} 0`)};
   }
 `
diff --git a/packages/atlas/src/hooks/useCreateMember.ts b/packages/atlas/src/hooks/useCreateMember.ts
index 40f729ea6c..696f48017f 100644
--- a/packages/atlas/src/hooks/useCreateMember.ts
+++ b/packages/atlas/src/hooks/useCreateMember.ts
@@ -6,9 +6,10 @@ import { useMutation } from 'react-query'
 
 import { ImageInputFile } from '@/components/_inputs/MultiFileSelect'
 import { FAUCET_URL } from '@/config/env'
+import { keyring } from '@/joystream-lib/lib'
 import { MemberId } from '@/joystream-lib/types'
 import { hapiBnToTokenNumber } from '@/joystream-lib/utils'
-import { keyring, registerAccount } from '@/providers/auth/auth.helpers'
+import { registerAccount } from '@/providers/auth/auth.helpers'
 import { useAuth } from '@/providers/auth/auth.hooks'
 import { useAuthStore } from '@/providers/auth/auth.store'
 import { OrionAccountError } from '@/providers/auth/auth.types'
diff --git a/packages/atlas/src/hooks/useHidePasswordInInput.tsx b/packages/atlas/src/hooks/useHidePasswordInInput.tsx
new file mode 100644
index 0000000000..9929fb49c3
--- /dev/null
+++ b/packages/atlas/src/hooks/useHidePasswordInInput.tsx
@@ -0,0 +1,20 @@
+import { useState } from 'react'
+
+import { SvgActionHide, SvgActionShow } from '@/assets/icons'
+import { InputProps } from '@/components/_inputs/Input'
+
+export const useHidePasswordInInput = (): [InputProps, () => void] => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false)
+
+  return [
+    {
+      type: isPasswordVisible ? 'text' : 'password',
+      actionButton: {
+        children: isPasswordVisible ? 'Hide' : 'Show',
+        icon: isPasswordVisible ? <SvgActionHide /> : <SvgActionShow />,
+        onClick: () => setIsPasswordVisible((isPasswordVisible) => !isPasswordVisible),
+      },
+    },
+    () => setIsPasswordVisible(false),
+  ]
+}
diff --git a/packages/atlas/src/providers/auth/auth.helpers.ts b/packages/atlas/src/providers/auth/auth.helpers.ts
index e03f8b80a1..d2842d0a55 100644
--- a/packages/atlas/src/providers/auth/auth.helpers.ts
+++ b/packages/atlas/src/providers/auth/auth.helpers.ts
@@ -1,6 +1,4 @@
-import { JOYSTREAM_ADDRESS_PREFIX } from '@joystream/types'
 import { ScryptOpts, scrypt } from '@noble/hashes/scrypt'
-import { Keyring } from '@polkadot/keyring'
 import { KeyringPair } from '@polkadot/keyring/types'
 import { hexToU8a, u8aToHex } from '@polkadot/util'
 import { mnemonicToEntropy as _mnemonicToEntropy, cryptoWaitReady } from '@polkadot/util-crypto'
@@ -9,13 +7,17 @@ import { entropyToMnemonic as _entropyToMnemonic } from 'bip39'
 import { Buffer } from 'buffer'
 import { AES, enc, lib, mode } from 'crypto-js'
 
+import { atlasConfig } from '@/config'
 import { ORION_AUTH_URL } from '@/config/env'
+import { keyring } from '@/joystream-lib/lib'
 import { getWalletsList } from '@/providers/wallet/wallet.helpers'
 import { SentryLogger } from '@/utils/logs'
 
-import { AuthModals, OrionAccountError, RegisterParams, RegisterPayload } from './auth.types'
+import { AuthModals, LogInErrors, OrionAccountError, RegisterParams, RegisterPayload } from './auth.types'
 
-export const keyring = new Keyring({ type: 'sr25519', ss58Format: JOYSTREAM_ADDRESS_PREFIX })
+export const getArtifactId = async (email: string, password: string) => {
+  return (await scryptHash(`${email}:${password}`, '0x0818ee04c541716831bdd0f598fa4bbb')).toString('hex')
+}
 
 export const handleAnonymousAuth = async (userId?: string | null) => {
   try {
@@ -57,7 +59,10 @@ export const getArtifacts = async (id: string, email: string, password: string)
       decryptedEntropy,
     }
   } catch (error) {
-    SentryLogger.error('Error when fetching artifacts', 'useLogIn', error)
+    if (isAxiosError(error) && error.response?.status === 404) {
+      throw new Error(LogInErrors.ArtifactsNotFound)
+    }
+    throw new Error(LogInErrors.UnknownError)
   }
 }
 
@@ -138,7 +143,7 @@ export const prepareEncryptionArtifacts = async (email: string, password: string
     const entropy = _mnemonicToEntropy(mnemonic)
     const seed = u8aToHex(entropy)
 
-    const id = (await scryptHash(`${email}:${password}`, '0x0818ee04c541716831bdd0f598fa4bbb')).toString('hex')
+    const id = await getArtifactId(email, password)
     const cipherIv = lib.WordArray.random(16).toString(enc.Hex)
     const cipherKey = await scryptHash(`${email}:${password}`, Buffer.from(hexToU8a(cipherIv)))
     const keyWA = enc.Hex.parse(cipherKey.toString('hex'))
@@ -213,3 +218,55 @@ export const registerAccount = async (params: RegisterParams) => {
     })
   }
 }
+
+type ChangePasswordArgs = {
+  joystreamAccountId: string
+  gatewayAccountId: string
+  email: string
+  mnemonic: string
+  newPassword: string
+}
+export const changePassword = async ({
+  email,
+  newPassword,
+  mnemonic,
+  joystreamAccountId,
+  gatewayAccountId,
+}: ChangePasswordArgs) => {
+  try {
+    const keypair = keyring.addFromMnemonic(mnemonic)
+    const newArtifacts = await prepareEncryptionArtifacts(email, newPassword, mnemonic)
+
+    const changePasswordPayload = {
+      joystreamAccountId,
+      gatewayName: atlasConfig.general.appName,
+      timestamp: Date.now() - 30_000,
+      action: 'changeAccount',
+      gatewayAccountId,
+      newArtifacts,
+    }
+
+    const signatureOverPayload = u8aToHex(keypair.sign(JSON.stringify(changePasswordPayload)))
+
+    return axios.post(
+      `${ORION_AUTH_URL}/change-account`,
+      {
+        signature: signatureOverPayload,
+        payload: changePasswordPayload,
+      },
+      { withCredentials: true }
+    )
+  } catch (error) {
+    SentryLogger.error('Something went wrong during changing password', 'changePassword', error)
+  }
+}
+
+export const getMnemonicFromeEmailAndPassword = async (email: string, password: string) => {
+  const id = await getArtifactId(email, password)
+  const data = await getArtifacts(id, email, password)
+  if (!data?.decryptedEntropy) {
+    throw Error("Couldn't fetch artifacts")
+  }
+  const mnemonic = entropyToMnemonic(data?.decryptedEntropy)
+  return mnemonic
+}
diff --git a/packages/atlas/src/providers/auth/auth.provider.tsx b/packages/atlas/src/providers/auth/auth.provider.tsx
index 359811f00a..9fbdacecd6 100644
--- a/packages/atlas/src/providers/auth/auth.provider.tsx
+++ b/packages/atlas/src/providers/auth/auth.provider.tsx
@@ -1,6 +1,4 @@
 import { useApolloClient } from '@apollo/client'
-import { JOYSTREAM_ADDRESS_PREFIX } from '@joystream/types/.'
-import { Keyring } from '@polkadot/keyring'
 import { u8aToHex } from '@polkadot/util'
 import { cryptoWaitReady } from '@polkadot/util-crypto'
 import axios from 'axios'
@@ -11,6 +9,7 @@ import { GetCurrentAccountQuery, useGetCurrentAccountLazyQuery } from '@/api/que
 import { atlasConfig } from '@/config'
 import { ORION_AUTH_URL } from '@/config/env'
 import { useMountEffect } from '@/hooks/useMountEffect'
+import { keyring } from '@/joystream-lib/lib'
 import { useAuthStore } from '@/providers/auth/auth.store'
 import { useJoystream } from '@/providers/joystream/joystream.provider'
 import { useWallet } from '@/providers/wallet/wallet.hooks'
@@ -20,18 +19,16 @@ import { SentryLogger } from '@/utils/logs'
 import {
   decodeSessionEncodedSeedToMnemonic,
   entropyToMnemonic,
+  getArtifactId,
   getArtifacts,
   handleAnonymousAuth,
   logoutRequest,
-  scryptHash,
 } from './auth.helpers'
 import { AuthContextValue, LogInErrors } from './auth.types'
 
 const AuthContext = createContext<undefined | AuthContextValue>(undefined)
 AuthContext.displayName = 'AuthContext'
 
-export const keyring = new Keyring({ type: 'sr25519', ss58Format: JOYSTREAM_ADDRESS_PREFIX })
-
 export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
   const [isAuthenticating, setIsAuthenticating] = useState(true)
   const [loggedAddress, setLoggedAddress] = useState<null | string>(null)
@@ -138,7 +135,7 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
       let localEntropy: string | null = null
       if (params.type === 'internal') {
         const { email, password } = params
-        const id = (await scryptHash(`${email}:${password}`, '0x0818ee04c541716831bdd0f598fa4bbb')).toString('hex')
+        const id = await getArtifactId(email, password)
         const data = await getArtifacts(id, email, password)
         if (!data) {
           setIsAuthenticating(false)
@@ -222,17 +219,21 @@ export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
     }
   }, [anonymousUserId, setAnonymousUserId, setEncodedSeed])
 
+  const isWalletUser = useMemo(() => encodedSeed === null && !!currentUser, [currentUser, encodedSeed])
+
   const contextValue: AuthContextValue = useMemo(
     () => ({
       handleLogin,
       isAuthenticating,
       loggedAddress,
       refetchCurrentUser: refetch,
-      currentUser: currentUser,
+      currentUser,
+      isWalletUser,
       handleLogout,
+      encodedSeed,
       isLoggedIn: !!currentUser && !isAuthenticating,
     }),
-    [currentUser, handleLogin, handleLogout, isAuthenticating, loggedAddress, refetch]
+    [currentUser, encodedSeed, handleLogin, handleLogout, isAuthenticating, isWalletUser, loggedAddress, refetch]
   )
 
   return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
diff --git a/packages/atlas/src/providers/auth/auth.types.ts b/packages/atlas/src/providers/auth/auth.types.ts
index 29a215221b..74d9641e2f 100644
--- a/packages/atlas/src/providers/auth/auth.types.ts
+++ b/packages/atlas/src/providers/auth/auth.types.ts
@@ -4,12 +4,14 @@ import { GetCurrentAccountQuery } from '@/api/queries/__generated__/accounts.gen
 
 export type AuthContextValue = {
   handleLogin: (params: LoginParams) => Promise<string>
+  isWalletUser: boolean
   isAuthenticating: boolean
   loggedAddress: string | null
   currentUser?: GetCurrentAccountQuery['accountData'] | null
   refetchCurrentUser: () => Promise<ApolloQueryResult<GetCurrentAccountQuery>>
   handleLogout: () => Promise<void>
   isLoggedIn: boolean
+  encodedSeed: string | null
 }
 
 // Login handler types
diff --git a/packages/atlas/src/utils/formValidationOptions.ts b/packages/atlas/src/utils/formValidationOptions.ts
index f944325932..40467cd2f8 100644
--- a/packages/atlas/src/utils/formValidationOptions.ts
+++ b/packages/atlas/src/utils/formValidationOptions.ts
@@ -1,5 +1,6 @@
 import { isValid } from 'date-fns'
 import { RegisterOptions, Validate } from 'react-hook-form'
+import { z } from 'zod'
 
 type TextValidationArgs = {
   name: string
@@ -59,3 +60,22 @@ export const pastDateValidation = (date: Date | null, required = false) => {
   const currentDate = new Date()
   return currentDate >= date
 }
+
+export const passwordAndRepeatPasswordSchema = z
+  .object({
+    password: z
+      .string()
+      .regex(/^(?=.*[0-9])(?=.*[A-Z])(?=.*[!@#$%^&*()_+]).*$/, { message: 'Password has to meet requirements.' })
+      .min(9, { message: 'Password has to meet requirements.' })
+      .max(64, { message: 'Password has to meet requirements.' }),
+    confirmPassword: z.string(),
+  })
+  .refine(
+    (data) => {
+      return data.password === data.confirmPassword
+    },
+    {
+      path: ['confirmPassword'],
+      message: 'Password address has to match.',
+    }
+  )
diff --git a/packages/atlas/src/views/studio/MyChannelView/tabs/StudioChannelGeneralTab/StudioChannelGeneralTab.tsx b/packages/atlas/src/views/studio/MyChannelView/tabs/StudioChannelGeneralTab/StudioChannelGeneralTab.tsx
index 628c6f814c..259a1c585f 100644
--- a/packages/atlas/src/views/studio/MyChannelView/tabs/StudioChannelGeneralTab/StudioChannelGeneralTab.tsx
+++ b/packages/atlas/src/views/studio/MyChannelView/tabs/StudioChannelGeneralTab/StudioChannelGeneralTab.tsx
@@ -3,7 +3,7 @@ import { RefObject } from 'react'
 import { Controller, FieldError } from 'react-hook-form'
 
 import { useFullChannel } from '@/api/hooks/channel'
-import { SvgActionCheck, SvgActionShow } from '@/assets/icons'
+import { SvgActionShow } from '@/assets/icons'
 import { ActionBar } from '@/components/ActionBar'
 import { Portal } from '@/components/Portal'
 import { ViewErrorFallback } from '@/components/ViewErrorFallback'
@@ -253,6 +253,7 @@ export const StudioChannelGeneralTab = ({ actionBarPortal }: { actionBarPortal:
           feeLoading={feeLoading}
           primaryButton={{
             text: 'Publish changes',
+            disabled: !isDirty,
             onClick: () =>
               isDirty
                 ? handleSubmit(() => {
@@ -263,22 +264,11 @@ export const StudioChannelGeneralTab = ({ actionBarPortal }: { actionBarPortal:
                   })
                 : undefined,
           }}
-          primaryButtonTooltip={
-            isDirty
-              ? undefined
-              : {
-                  text: 'All changes saved. Nothing to publish.',
-                  icon: <SvgActionCheck />,
-                }
-          }
-          secondaryButton={
-            isDirty && nodeConnectionStatus === 'connected'
-              ? {
-                  text: 'Cancel',
-                  onClick: () => openDialog(),
-                }
-              : undefined
-          }
+          secondaryButton={{
+            text: 'Cancel',
+            onClick: () => openDialog(),
+            disabled: !isDirty || nodeConnectionStatus !== 'connected',
+          }}
           skipFeeCheck
         />
       </Portal>
diff --git a/packages/atlas/src/views/viewer/MembershipSettingsView/ChangePasswordDialog.tsx b/packages/atlas/src/views/viewer/MembershipSettingsView/ChangePasswordDialog.tsx
new file mode 100644
index 0000000000..00202e8c25
--- /dev/null
+++ b/packages/atlas/src/views/viewer/MembershipSettingsView/ChangePasswordDialog.tsx
@@ -0,0 +1,209 @@
+import { keyframes } from '@emotion/react'
+import styled from '@emotion/styled'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { FC, useCallback, useState } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+
+import { PasswordCriterias } from '@/components/_auth/PasswordCriterias'
+import { FormField } from '@/components/_inputs/FormField'
+import { Input } from '@/components/_inputs/Input'
+import { DialogModal } from '@/components/_overlays/DialogModal'
+import { useHidePasswordInInput } from '@/hooks/useHidePasswordInInput'
+import { changePassword, getMnemonicFromeEmailAndPassword } from '@/providers/auth/auth.helpers'
+import { useAuth } from '@/providers/auth/auth.hooks'
+import { LogInErrors } from '@/providers/auth/auth.types'
+import { useSnackbar } from '@/providers/snackbars'
+import { cVar, media, sizes } from '@/styles'
+import { passwordAndRepeatPasswordSchema } from '@/utils/formValidationOptions'
+import { SentryLogger } from '@/utils/logs'
+
+type ChangePasswordDialogProps = {
+  onClose: () => void
+  show: boolean
+}
+
+type PasswordStepForm = {
+  password: string
+  confirmPassword: string
+}
+
+export const ChangePasswordDialog: FC<ChangePasswordDialogProps> = ({ onClose, show }) => {
+  const { displaySnackbar } = useSnackbar()
+  const [mnemonic, setMnemonic] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmiting] = useState(false)
+  const { currentUser } = useAuth()
+
+  const verifyPasswordForm = useForm<{ oldPassword: string }>({
+    shouldFocusError: true,
+  })
+
+  const handleVerifyPassword = useCallback(() => {
+    verifyPasswordForm.handleSubmit(async (data) => {
+      if (!currentUser) {
+        throw Error('Current user is not set')
+      }
+      try {
+        setIsSubmiting(true)
+        const mnemonic = await getMnemonicFromeEmailAndPassword(currentUser.email, data.oldPassword)
+        setMnemonic(mnemonic)
+      } catch (error) {
+        if (error.message === LogInErrors.ArtifactsNotFound) {
+          // assume this is incorrect password error
+          verifyPasswordForm.setError('oldPassword', { message: 'Incorrect password.' })
+          return
+        }
+        displaySnackbar({
+          iconType: 'error',
+          title: 'Something went wrong during verifying your password',
+        })
+        SentryLogger.error('error', 'ChangePasswordDialog', error)
+      } finally {
+        setIsSubmiting(false)
+      }
+    })()
+  }, [currentUser, displaySnackbar, verifyPasswordForm])
+
+  const changePasswordForm = useForm<PasswordStepForm>({
+    shouldFocusError: true,
+    resolver: zodResolver(passwordAndRepeatPasswordSchema),
+  })
+
+  const [hideOldPasswordProps, resethideOldPassword] = useHidePasswordInInput()
+  const [hidePasswordProps, resethidePassword] = useHidePasswordInInput()
+  const [hideConfirmPasswordProps, resethideConfirmPassword] = useHidePasswordInInput()
+
+  const handleClose = useCallback(() => {
+    verifyPasswordForm.reset({ oldPassword: '' })
+    changePasswordForm.reset({ password: '', confirmPassword: '' })
+    resethideOldPassword()
+    resethidePassword()
+    resethideConfirmPassword()
+    setMnemonic(null)
+    onClose()
+  }, [
+    changePasswordForm,
+    onClose,
+    resethideConfirmPassword,
+    resethideOldPassword,
+    resethidePassword,
+    verifyPasswordForm,
+  ])
+
+  const handleChangePassword = useCallback(() => {
+    changePasswordForm.handleSubmit(async (data) => {
+      if (!currentUser || !mnemonic) {
+        throw Error('Current user is not set or mnemonic is null')
+      }
+      try {
+        setIsSubmiting(true)
+        await changePassword({
+          email: currentUser.email,
+          mnemonic,
+          newPassword: data.password,
+          gatewayAccountId: currentUser.id,
+          joystreamAccountId: currentUser.joystreamAccount,
+        })
+        handleClose()
+        displaySnackbar({
+          iconType: 'success',
+          title: 'Password changed successfully',
+        })
+      } catch (error) {
+        displaySnackbar({
+          iconType: 'error',
+          title: 'Something went wrong during changing password',
+        })
+        SentryLogger.error('error', 'ChangePasswordDialog', error)
+      } finally {
+        setIsSubmiting(false)
+      }
+    })()
+  }, [changePasswordForm, currentUser, displaySnackbar, handleClose, mnemonic])
+
+  return (
+    <>
+      <StyledDialogModal
+        show={show}
+        onExitClick={handleClose}
+        title="Change password"
+        primaryButton={
+          mnemonic
+            ? {
+                text: isSubmitting ? 'Waiting...' : 'Change password',
+                disabled: isSubmitting,
+                onClick: handleChangePassword,
+              }
+            : {
+                text: 'Continue',
+                disabled: isSubmitting,
+                onClick: handleVerifyPassword,
+              }
+        }
+        secondaryButton={{
+          text: 'Cancel',
+          onClick: handleClose,
+        }}
+      >
+        {!mnemonic ? (
+          <FormField
+            label="Password"
+            description="Enter your current password to change it."
+            error={verifyPasswordForm.formState.errors.oldPassword?.message}
+          >
+            <Input
+              placeholder="Password"
+              {...verifyPasswordForm.register('oldPassword', {
+                validate: {
+                  required: (value) => (value ? true : 'Enter password.'),
+                },
+              })}
+              {...hideOldPasswordProps}
+              autoComplete="off"
+            />
+          </FormField>
+        ) : (
+          <Wrapper>
+            <FormField label="New password" error={changePasswordForm.formState.errors.password?.message}>
+              <Input
+                placeholder="New password"
+                {...changePasswordForm.register('password')}
+                {...hidePasswordProps}
+                autoComplete="new-password"
+              />
+            </FormField>
+            <FormField label="Repeat Password" error={changePasswordForm.formState.errors.confirmPassword?.message}>
+              <Input
+                placeholder="Repeat password"
+                {...changePasswordForm.register('confirmPassword')}
+                {...hideConfirmPasswordProps}
+                autoComplete="new-password"
+              />
+            </FormField>
+            <FormProvider {...changePasswordForm}>
+              <PasswordCriterias />
+            </FormProvider>
+          </Wrapper>
+        )}
+      </StyledDialogModal>
+    </>
+  )
+}
+
+const forwardAnimation = keyframes`
+  from {
+    transform: translateX(-32px);
+    opacity: 0;
+  }
+`
+const StyledDialogModal = styled(DialogModal)`
+  max-height: calc(100vh - 80px);
+  ${media.sm} {
+    max-height: 576px;
+  }
+`
+
+const Wrapper = styled.div`
+  display: grid;
+  gap: ${sizes(6)};
+  animation: ${forwardAnimation} ${cVar('animationTransitionMedium')};
+`
diff --git a/packages/atlas/src/views/viewer/MembershipSettingsView/ExportSeedDialog.tsx b/packages/atlas/src/views/viewer/MembershipSettingsView/ExportSeedDialog.tsx
new file mode 100644
index 0000000000..8013ed395f
--- /dev/null
+++ b/packages/atlas/src/views/viewer/MembershipSettingsView/ExportSeedDialog.tsx
@@ -0,0 +1,140 @@
+import styled from '@emotion/styled'
+import { FC, useCallback, useState } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { SvgAlertsWarning24 } from '@/assets/icons'
+import { Banner } from '@/components/Banner'
+import { FormField } from '@/components/_inputs/FormField'
+import { Input } from '@/components/_inputs/Input'
+import { useHidePasswordInInput } from '@/hooks/useHidePasswordInInput'
+import { entropyToMnemonic, getArtifactId, getArtifacts } from '@/providers/auth/auth.helpers'
+import { useAuth } from '@/providers/auth/auth.hooks'
+import { LogInErrors } from '@/providers/auth/auth.types'
+import { useSnackbar } from '@/providers/snackbars'
+import { cVar, sizes } from '@/styles'
+
+import { StyledDialogModal } from './MembershipSettingsView.styles'
+
+export const getMnemonicFileFromEmailAndPassword = async (email: string, password: string) => {
+  const id = await getArtifactId(email, password)
+  const data = await getArtifacts(id, email, password)
+  if (!data?.decryptedEntropy) {
+    throw Error("Couldn't fetch artifacts")
+  }
+  const mnemonic = entropyToMnemonic(data?.decryptedEntropy)
+  const blobText = new Blob([JSON.stringify({ mnemonic })], { type: 'text/plain' })
+
+  const url = URL.createObjectURL(blobText)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = 'mnemonic.json'
+  link.click()
+
+  link.remove()
+  URL.revokeObjectURL(url)
+}
+
+type ExportSeedDialogProps = {
+  onClose: () => void
+  show: boolean
+}
+
+export const ExportSeedDialog: FC<ExportSeedDialogProps> = ({ onClose, show }) => {
+  const {
+    register,
+    handleSubmit,
+    setError,
+    reset,
+    formState: { errors },
+  } = useForm<{ password: string }>({
+    shouldFocusError: true,
+  })
+  const { currentUser } = useAuth()
+  const { displaySnackbar } = useSnackbar()
+  const [isSubmitting, setIsSubmiting] = useState(false)
+
+  const [hidePasswordProps, resetHidePassword] = useHidePasswordInInput()
+
+  const handleClose = useCallback(() => {
+    reset({ password: '' })
+    onClose()
+    resetHidePassword()
+  }, [onClose, reset, resetHidePassword])
+
+  const handlePrimaryButtonClick = useCallback(() => {
+    handleSubmit(async ({ password }) => {
+      try {
+        if (!currentUser) {
+          throw Error('Current user is not set')
+        }
+        setIsSubmiting(true)
+        await getMnemonicFileFromEmailAndPassword(currentUser?.email, password)
+        handleClose()
+        displaySnackbar({
+          title: 'Started downloading wallet seed',
+          iconType: 'info',
+        })
+      } catch (error) {
+        if (error.message === LogInErrors.ArtifactsNotFound) {
+          setError('password', { type: 'custom', message: 'Incorrect password.' })
+        } else {
+          displaySnackbar({
+            title: 'Something went wrong',
+            description: 'There was a problem with sending your request. Please try again later.',
+            iconType: 'error',
+          })
+        }
+      } finally {
+        setIsSubmiting(false)
+      }
+    })()
+  }, [currentUser, displaySnackbar, handleClose, handleSubmit, setError])
+
+  return (
+    <StyledDialogModal
+      title="Export seed"
+      onExitClick={handleClose}
+      show={show}
+      primaryButton={{
+        text: isSubmitting ? 'Waiting...' : 'Export seed',
+        disabled: isSubmitting,
+        onClick: handlePrimaryButtonClick,
+      }}
+      secondaryButton={{
+        text: 'Cancel',
+        onClick: handleClose,
+      }}
+    >
+      <FormField
+        label="Password"
+        description="Enter your password to export the file with your wallet seed."
+        error={errors.password?.message}
+      >
+        <Input
+          placeholder="Password"
+          {...hidePasswordProps}
+          {...register('password', {
+            validate: {
+              required: (value) => {
+                if (!value || !value.length) {
+                  return 'Enter password.'
+                }
+              },
+            },
+          })}
+          autoComplete="off"
+        />
+      </FormField>
+      <StyledBanner
+        borderColor={cVar('colorBackgroundCautionStrong')}
+        icon={<SvgAlertsWarning24 />}
+        title="Don't share your wallet seed with anyone"
+        description="Anyone who knows your wallet seed can take your assets from you. We will only ask to provide the seed in case you are resetting your password."
+      />
+    </StyledDialogModal>
+  )
+}
+
+const StyledBanner = styled(Banner)`
+  margin-top: ${sizes(6)};
+`
diff --git a/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipPublicProfile/MembershipPublicProfile.tsx b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipPublicProfile/MembershipPublicProfile.tsx
index 0191ae1f1d..8853c44316 100644
--- a/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipPublicProfile/MembershipPublicProfile.tsx
+++ b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipPublicProfile/MembershipPublicProfile.tsx
@@ -1,9 +1,9 @@
 import { useApolloClient } from '@apollo/client'
 import debouncePromise from 'awesome-debounce-promise'
+import { BN } from 'bn.js'
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { useMutation } from 'react-query'
-import { useNavigate } from 'react-router'
 import useResizeObserver from 'use-resize-observer'
 
 import {
@@ -16,13 +16,12 @@ import { FormField } from '@/components/_inputs/FormField'
 import { Input } from '@/components/_inputs/Input'
 import { ImageInputFile } from '@/components/_inputs/MultiFileSelect'
 import { TextArea } from '@/components/_inputs/TextArea'
+import { DialogButtonProps } from '@/components/_overlays/Dialog'
 import { ImageCropModal, ImageCropModalImperativeHandle } from '@/components/_overlays/ImageCropModal'
 import { EntitySettingTemplate } from '@/components/_templates/EntitySettingTemplate'
 import { MEMBERSHIP_NAME_PATTERN } from '@/config/regex'
-import { absoluteRoutes } from '@/config/routes'
 import { useHeadTags } from '@/hooks/useHeadTags'
 import { MemberInputMetadata } from '@/joystream-lib/types'
-import { useConfirmationModal } from '@/providers/confirmationModal'
 import { useFee, useJoystream } from '@/providers/joystream'
 import { useSnackbar } from '@/providers/snackbars'
 import { useTransaction } from '@/providers/transactions/transactions.hooks'
@@ -37,29 +36,22 @@ export type EditMemberFormInputs = {
   avatar: ImageInputFile | null
   about: string | null
 }
+type MembershipPublicProfileProps = {
+  onDirty: (isDirty: boolean) => void
+  onOpenUnsavedChangesDialog: (primaryButtonProps: DialogButtonProps) => void
+  onCloseUnsavedChangesDialog: () => void
+}
 
-export const MembershipPublicProfile: FC = () => {
-  const navigate = useNavigate()
+export const MembershipPublicProfile: FC<MembershipPublicProfileProps> = ({
+  onDirty,
+  onOpenUnsavedChangesDialog,
+  onCloseUnsavedChangesDialog,
+}) => {
   const handleInputRef = useRef<HTMLInputElement | null>(null)
   const [isImageValid, setIsImageValid] = useState(true)
   const [isHandleValidating, setIsHandleValidating] = useState(false)
   const { memberId, activeMembership, isLoggedIn, refetchUserMemberships } = useUser()
 
-  const [openDialog, closeDialog] = useConfirmationModal({
-    title: 'Discard changes?',
-    description:
-      'You have unsaved changes which are going to be lost if you change the tab. Are you sure you want to continue?',
-    type: 'warning',
-    primaryButton: {
-      text: 'Discard changes',
-      to: absoluteRoutes.viewer.member(activeMembership?.handle),
-      onClick: () => closeDialog(),
-    },
-    secondaryButton: {
-      text: 'Cancel',
-      onClick: () => closeDialog(),
-    },
-  })
   const { ref: actionBarRef, height: actionBarBoundsHeight = 0 } = useResizeObserver({ box: 'border-box' })
   const { joystream, proxyCallback } = useJoystream()
   const handleTransaction = useTransaction()
@@ -98,9 +90,14 @@ export const MembershipPublicProfile: FC = () => {
     formState: { errors, isDirty, dirtyFields, isSubmitting },
   } = useForm<EditMemberFormInputs>({
     shouldFocusError: true,
+    shouldUnregister: true,
     reValidateMode: 'onSubmit',
   })
 
+  useEffect(() => {
+    onDirty(isDirty)
+  }, [isDirty, onDirty])
+
   const resetForm = useCallback(async () => {
     let blob
     if (activeMembership?.metadata?.avatar?.__typename === 'AvatarUri' && activeMembership.metadata.avatar.avatarUri) {
@@ -172,7 +169,10 @@ export const MembershipPublicProfile: FC = () => {
       }
     }
 
-    const success = await handleTransaction({
+    await handleTransaction({
+      onTxSync: async () => {
+        await refetchUserMemberships()
+      },
       txFactory: async (updateStatus) => {
         const memberInputMetadata: MemberInputMetadata = {
           ...(dirtyFields.handle ? { name: data.handle } : {}),
@@ -190,13 +190,6 @@ export const MembershipPublicProfile: FC = () => {
         title: 'Profile updated successfully',
       },
     })
-    const {
-      data: { memberships },
-    } = await refetchUserMemberships()
-    const updatedMembership = memberships.find((m) => m.id === activeMembership.id)
-    if (success) {
-      navigate(absoluteRoutes.viewer.member(updatedMembership?.handle))
-    }
   })
 
   const { ref, ...handleRest } = useMemo(
@@ -231,6 +224,8 @@ export const MembershipPublicProfile: FC = () => {
 
   return (
     <EntitySettingTemplate
+      isFirst
+      isLast
       title="Profile info"
       description="This membership information is stored on Joystream blockchain and can be displayed in all apps connected to the chain."
     >
@@ -308,17 +303,30 @@ export const MembershipPublicProfile: FC = () => {
         </Wrapper>
         <StyledActionBar
           ref={actionBarRef}
-          fee={fee}
+          fee={isDirty ? fee : new BN(0)}
           feeLoading={feeLoading}
           primaryButton={{
-            disabled: isSubmitting,
+            disabled: isSubmitting || !isDirty,
             text: isSubmitting ? 'Please wait...' : 'Publish changes',
             type: 'submit',
           }}
           secondaryButton={{
             text: 'Cancel',
-            to: isDirty ? undefined : absoluteRoutes.viewer.member(activeMembership?.handle),
-            onClick: () => (isDirty ? openDialog() : undefined),
+            disabled: !isDirty,
+            onClick: () =>
+              isDirty
+                ? onOpenUnsavedChangesDialog({
+                    text: 'Discard changes',
+                    onClick: () => {
+                      reset()
+                      onCloseUnsavedChangesDialog()
+                      displaySnackbar({
+                        title: 'All changes were discarded',
+                        iconType: 'info',
+                      })
+                    },
+                  })
+                : undefined,
           }}
         />
       </form>
diff --git a/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipSettingsView.styles.ts b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipSettingsView.styles.ts
index b244b758cb..ed97888962 100644
--- a/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipSettingsView.styles.ts
+++ b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipSettingsView.styles.ts
@@ -1,7 +1,13 @@
 import styled from '@emotion/styled'
 
+import { ActionBar } from '@/components/ActionBar'
 import { LimitedWidthContainer } from '@/components/LimitedWidthContainer'
-import { media, sizes } from '@/styles'
+import { DialogModal } from '@/components/_overlays/DialogModal'
+import { media, sizes, zIndex } from '@/styles'
+
+export const MemberSettingsPageWrapper = styled.div`
+  padding-bottom: ${sizes(13)};
+`
 
 export const NoGlobalPaddingWrapper = styled.div`
   margin: 0 calc(-1 * var(--size-global-horizontal-padding));
@@ -13,3 +19,18 @@ export const StyledLimitedWidthContainer = styled(LimitedWidthContainer)`
     margin: ${sizes(8)} auto;
   }
 `
+
+export const StyledActionBar = styled(ActionBar)`
+  position: fixed;
+  left: var(--size-sidenav-width-collapsed);
+  right: 0;
+  bottom: 0;
+  z-index: ${zIndex.sideNav - 1};
+`
+
+export const StyledDialogModal = styled(DialogModal)`
+  max-height: calc(100vh - 80px);
+  ${media.sm} {
+    max-height: 576px;
+  }
+`
diff --git a/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipSettingsView.tsx b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipSettingsView.tsx
index c8dc3f4391..35ba7f866f 100644
--- a/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipSettingsView.tsx
+++ b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipSettingsView.tsx
@@ -1,18 +1,27 @@
 import { FC, useCallback, useEffect, useRef, useState } from 'react'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useSearchParams } from 'react-router-dom'
 
 import { PageTabs } from '@/components/PageTabs'
+import { DialogButtonProps } from '@/components/_overlays/Dialog'
 import { MemberSettingsTabs, QUERY_PARAMS, absoluteRoutes } from '@/config/routes'
+import { useConfirmationModal } from '@/providers/confirmationModal'
+import { useUser } from '@/providers/user/user.hooks'
 
 import { MembershipPublicProfile } from './MembershipPublicProfile'
-import { NoGlobalPaddingWrapper, StyledLimitedWidthContainer } from './MembershipSettingsView.styles'
+import {
+  MemberSettingsPageWrapper,
+  NoGlobalPaddingWrapper,
+  StyledLimitedWidthContainer,
+} from './MembershipSettingsView.styles'
+import { MembershipWallet } from './MembershipWallet'
 
-const TABS: MemberSettingsTabs[] = ['Public profile']
+const TABS: MemberSettingsTabs[] = ['Public profile', 'Wallet']
 
 export const MembershipSettingsView: FC = () => {
   const [searchParams, setSearchParams] = useSearchParams()
   const [currentTab, setCurrentTab] = useState<number>(0)
-  const navigate = useNavigate()
+  const [isFormDirty, setIsFormDirty] = useState(false)
+  const { activeMembership } = useUser()
   const currentTabName = searchParams.get(QUERY_PARAMS.TAB) as MemberSettingsTabs | null
 
   // At mount set the tab from the search params
@@ -25,22 +34,75 @@ export const MembershipSettingsView: FC = () => {
     }
   }, [currentTabName, setSearchParams])
 
+  const [openUnsavedChangesDialog, closeUnsavedChangesDialog] = useConfirmationModal()
+
+  const handleOpenUnsavedChangesDialog = useCallback(
+    (primaryButtonProps: DialogButtonProps) => {
+      openUnsavedChangesDialog({
+        title: 'Discard changes?',
+        description:
+          'You have unsaved changes which are going to be lost if you change the tab. Are you sure you want to continue?',
+        type: 'warning',
+        primaryButton: primaryButtonProps,
+        secondaryButton: {
+          text: 'Cancel',
+          onClick: () => closeUnsavedChangesDialog(),
+        },
+      })
+    },
+    [closeUnsavedChangesDialog, openUnsavedChangesDialog]
+  )
+
   const handleChangeTab = useCallback(
     (idx: number) => {
-      navigate(absoluteRoutes.viewer.memberSettings({ tab: TABS[idx] }))
-      setCurrentTab(idx)
+      if (isFormDirty) {
+        handleOpenUnsavedChangesDialog({
+          text: 'Discard changes',
+          onClick: () => {
+            closeUnsavedChangesDialog()
+            setIsFormDirty(false)
+            setCurrentTab(idx)
+          },
+        })
+      } else {
+        setCurrentTab(idx)
+      }
     },
-    [navigate]
+    [closeUnsavedChangesDialog, handleOpenUnsavedChangesDialog, isFormDirty]
   )
 
   return (
-    <>
+    <MemberSettingsPageWrapper>
       <NoGlobalPaddingWrapper>
-        <PageTabs tabs={TABS.map((tab) => ({ name: tab }))} onSelectTab={handleChangeTab} selected={currentTab} />
+        <PageTabs
+          tabs={TABS.map((tab) => ({ name: tab }))}
+          onSelectTab={handleChangeTab}
+          selected={currentTab}
+          backAction={{
+            to: !isFormDirty ? absoluteRoutes.viewer.member(activeMembership?.handle) : undefined,
+            onClick: isFormDirty
+              ? () =>
+                  handleOpenUnsavedChangesDialog({
+                    text: 'Discard changes',
+                    to: absoluteRoutes.viewer.member(activeMembership?.handle),
+                    onClick: () => {
+                      closeUnsavedChangesDialog()
+                    },
+                  })
+              : undefined,
+          }}
+        />
       </NoGlobalPaddingWrapper>
       <StyledLimitedWidthContainer>
-        <MembershipPublicProfile />
+        {currentTab === 0 && (
+          <MembershipPublicProfile
+            onDirty={setIsFormDirty}
+            onOpenUnsavedChangesDialog={handleOpenUnsavedChangesDialog}
+            onCloseUnsavedChangesDialog={closeUnsavedChangesDialog}
+          />
+        )}
+        {currentTab === 1 && <MembershipWallet />}
       </StyledLimitedWidthContainer>
-    </>
+    </MemberSettingsPageWrapper>
   )
 }
diff --git a/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.styles.ts b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.styles.ts
new file mode 100644
index 0000000000..0af34d811c
--- /dev/null
+++ b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.styles.ts
@@ -0,0 +1,64 @@
+import styled from '@emotion/styled'
+
+import { Button } from '@/components/_buttons/Button'
+import { Input } from '@/components/_inputs/Input'
+import { cVar, sizes, square } from '@/styles'
+
+export const FormFieldsWrapper = styled.div`
+  display: grid;
+  gap: ${sizes(8)};
+`
+
+export const ChangePasswordButton = styled(Button)`
+  margin-top: ${sizes(4)};
+  justify-self: flex-start;
+`
+
+export const UnEditableInput = styled(Input)`
+  background-color: ${cVar('colorBackgroundStrongAlpha')};
+  color: ${cVar('colorText')};
+
+  input {
+    cursor: text;
+  }
+`
+
+const COUNTER_NAME = 'wallet-step-counter'
+
+export const WalletStepsOrderedList = styled.ol`
+  margin: 0;
+  padding: ${sizes(4)} 0 0;
+  display: grid;
+  gap: ${sizes(8)};
+  list-style: none;
+  counter-reset: ${COUNTER_NAME};
+`
+
+export const WalletStepListItem = styled.li`
+  display: flex;
+  padding: 0;
+  gap: ${sizes(4)};
+  counter-increment: ${COUNTER_NAME};
+
+  ::before {
+    ${square(44)};
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${cVar('colorBackgroundStrongAlpha')};
+    border-radius: 999px;
+    font: ${cVar('typographyDesktopH400')};
+    content: counter(${COUNTER_NAME});
+  }
+`
+
+export const StyledAnchor = styled.a`
+  color: ${cVar('colorTextPrimary')};
+  text-decoration: none;
+
+  :hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+`
diff --git a/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.tsx b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.tsx
new file mode 100644
index 0000000000..d68686d91c
--- /dev/null
+++ b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/MembershipWallet.tsx
@@ -0,0 +1,192 @@
+import { FC, ReactNode, useCallback, useState } from 'react'
+
+import { SvgActionCopy, SvgActionDownload, SvgActionEdit } from '@/assets/icons'
+import { Text } from '@/components/Text'
+import { Button } from '@/components/_buttons/Button'
+import { FormField } from '@/components/_inputs/FormField'
+import { EntitySettingTemplate } from '@/components/_templates/EntitySettingTemplate'
+import { useClipboard } from '@/hooks/useClipboard'
+import { useAuth } from '@/providers/auth/auth.hooks'
+
+import {
+  ChangePasswordButton,
+  FormFieldsWrapper,
+  StyledAnchor,
+  UnEditableInput,
+  WalletStepListItem,
+  WalletStepsOrderedList,
+} from './MembershipWallet.styles'
+
+import { ChangePasswordDialog } from '../ChangePasswordDialog'
+import { ExportSeedDialog } from '../ExportSeedDialog'
+
+const CONNECTING_WALLET_STEPS: WalletStepListItemComponentProps[] = [
+  {
+    title: 'Install wallet (signer) browser extension of your choice',
+    description: (
+      <>
+        It can be any wallet supporting polkadot account like:{' '}
+        <StyledAnchor href="https://polkadot.js.org/extension/" target="_blank" rel="noopener noreferrer">
+          Polkadot.js
+        </StyledAnchor>
+        ,{' '}
+        <StyledAnchor href="https://www.talisman.xyz/" target="_blank" rel="noopener noreferrer">
+          Talisman
+        </StyledAnchor>
+        ,{' '}
+        <StyledAnchor href="https://www.subwallet.app/download.html" target="_blank" rel="noopener noreferrer">
+          Subwallet
+        </StyledAnchor>{' '}
+        etc.
+      </>
+    ),
+  },
+  {
+    title: 'Export your wallet seed',
+    description: 'Use the export seed button above to export your seed',
+  },
+  {
+    title: 'Import your seed to external wallet',
+    description: 'Find the option to add polkadot account using the seed.',
+  },
+  {
+    title: 'Success',
+    description: 'From now you can log in to your account with your external wallet on other Apps but also to Gleev.',
+  },
+]
+
+export const MembershipWallet = () => {
+  const [isCopyClicked, setIsCopyClicked] = useState(false)
+  const { copyToClipboard } = useClipboard()
+  const { currentUser, isWalletUser } = useAuth()
+  const [isChangePasswordDialogOpen, setIsChangePasswordDialogOpen] = useState(false)
+  const [isExportSeedDialogOpen, setIsExportSeedDialogOpen] = useState(false)
+  const handleCopyToClipBoard = useCallback(() => {
+    if (!currentUser?.joystreamAccount) {
+      return
+    }
+    setIsCopyClicked(true)
+    copyToClipboard(currentUser?.joystreamAccount)
+  }, [copyToClipboard, currentUser?.joystreamAccount])
+  return (
+    <>
+      {!isWalletUser && (
+        <>
+          <ExportSeedDialog onClose={() => setIsExportSeedDialogOpen(false)} show={isExportSeedDialogOpen} />
+          <ChangePasswordDialog
+            onClose={() => setIsChangePasswordDialogOpen(false)}
+            show={isChangePasswordDialogOpen}
+          />
+        </>
+      )}
+      <EntitySettingTemplate
+        isFirst
+        title="Membership address"
+        description="When your public membership was created, it was linked to a new substrate account address built on polkadot protocol. This account holds all assets like tokens and NFTs that your membership accumulates. "
+      >
+        <FormFieldsWrapper>
+          <FormField label="Membership address">
+            <UnEditableInput
+              disabled
+              defaultValue={currentUser?.joystreamAccount}
+              disabledAttributeOnly
+              actionButton={{
+                icon: <SvgActionCopy />,
+                disabled: false,
+                onMouseLeave: () => setIsCopyClicked(false),
+                tooltipText: isCopyClicked ? 'Copied' : 'Copy',
+                onClick: handleCopyToClipBoard,
+                dontFocusOnClick: true,
+              }}
+            />
+          </FormField>
+          {!isWalletUser && (
+            <FormField
+              tooltip={{
+                multiline: true,
+                text: 'Wallet seed can be used to restore your account in case if you loose your password',
+              }}
+              label="Wallet seed"
+              description="You can access your wallet outside of our app, for example in an external signer wallet using your wallet seed. Keep your seed a secret."
+            >
+              <Button
+                icon={<SvgActionDownload />}
+                variant="secondary"
+                size="large"
+                onClick={() => {
+                  setIsExportSeedDialogOpen(true)
+                }}
+              >
+                Export seed
+              </Button>
+            </FormField>
+          )}
+        </FormFieldsWrapper>
+      </EntitySettingTemplate>
+      <EntitySettingTemplate
+        isLast={isWalletUser}
+        title="Login credentials"
+        description="We encrypt your password and won't share your private data with anyone."
+      >
+        <FormFieldsWrapper>
+          <FormField label="Email address">
+            <UnEditableInput disabled disabledAttributeOnly defaultValue={currentUser?.email} />
+          </FormField>
+          {!isWalletUser && (
+            <FormField label="Password">
+              <UnEditableInput disabled disabledAttributeOnly type="password" defaultValue="*********" />
+            </FormField>
+          )}
+        </FormFieldsWrapper>
+        {!isWalletUser && (
+          <ChangePasswordButton
+            icon={<SvgActionEdit />}
+            variant="secondary"
+            size="large"
+            onClick={() => setIsChangePasswordDialogOpen(true)}
+          >
+            Change password
+          </ChangePasswordButton>
+        )}
+      </EntitySettingTemplate>
+      {!isWalletUser && (
+        <EntitySettingTemplate
+          isLast
+          title="External wallet"
+          description="You can use external wallet to log in to your account."
+        >
+          <FormField
+            label="Connect external wallet"
+            description="Connecting external wallet allows you to access your assets like NFTs and Tokens outside of our app and login to other Apps connected to Joystream Network."
+          >
+            <WalletStepsOrderedList>
+              {CONNECTING_WALLET_STEPS.map(({ title, description }, idx) => (
+                <WalletStepListItemComponent key={idx} title={title} description={description} />
+              ))}
+            </WalletStepsOrderedList>
+          </FormField>
+        </EntitySettingTemplate>
+      )}
+    </>
+  )
+}
+
+type WalletStepListItemComponentProps = {
+  title: string
+  description: ReactNode
+}
+
+const WalletStepListItemComponent: FC<WalletStepListItemComponentProps> = ({ title, description }) => {
+  return (
+    <WalletStepListItem>
+      <div>
+        <Text as="p" variant="h200">
+          {title}
+        </Text>
+        <Text as="p" variant="t200" color="colorText" margin={{ top: 1 }}>
+          {description}
+        </Text>
+      </div>
+    </WalletStepListItem>
+  )
+}
diff --git a/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/index.ts b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/index.ts
new file mode 100644
index 0000000000..e4dd7c6f2b
--- /dev/null
+++ b/packages/atlas/src/views/viewer/MembershipSettingsView/MembershipWallet/index.ts
@@ -0,0 +1 @@
+export * from './MembershipWallet'
diff --git a/packages/atlas/src/views/viewer/ViewerLayout.tsx b/packages/atlas/src/views/viewer/ViewerLayout.tsx
index d13f99c538..5e5511f26f 100644
--- a/packages/atlas/src/views/viewer/ViewerLayout.tsx
+++ b/packages/atlas/src/views/viewer/ViewerLayout.tsx
@@ -82,13 +82,11 @@ export const ViewerLayout: FC = () => {
                 <Route
                   path={relativeRoutes.viewer.memberSettings()}
                   element={
-                    // todo uncomment and use private route once authentication is handled
-                    // <PrivateRoute
-                    //   isAuth={isLoggedIn}
-                    //   element={<MembershipSettingsView />}
-                    //   redirectTo={ENTRY_POINT_ROUTE}
-                    // />
-                    <MembershipSettingsView />
+                    <PrivateRoute
+                      isAuth={isLoggedIn}
+                      element={<MembershipSettingsView />}
+                      redirectTo={ENTRY_POINT_ROUTE}
+                    />
                   }
                 />
                 <Route