{title && (
diff --git a/packages/atlas/src/components/FilterButton/FilterButton.tsx b/packages/atlas/src/components/FilterButton/FilterButton.tsx
index 57ecba002a..96d5eac095 100644
--- a/packages/atlas/src/components/FilterButton/FilterButton.tsx
+++ b/packages/atlas/src/components/FilterButton/FilterButton.tsx
@@ -41,6 +41,9 @@ export const FilterButton: FC = (props) => {
const triggerRef = useRef(null)
const firstRangeInput = useRef(null)
const [shouldFocus, setShouldFocus] = useState(false)
+ const [filterValue, setFilterValue] = useState(
+ props.type === 'range' ? props.range : props.options
+ )
const { ref, inView } = useInView()
useEffect(() => {
@@ -51,33 +54,34 @@ export const FilterButton: FC = (props) => {
}, [inView, shouldFocus])
if (props.type === 'checkbox' || props.type === 'radio') {
- const { type, name, onChange, className, icon, label, options = [] } = props
-
- const counter = options.filter((option) => option.applied)?.length
+ const { type, name, onChange, className, icon, label = [] } = props
+ const currentValue = filterValue as FilterButtonOption[]
+ const counter = currentValue.filter((option) => option.applied)?.length
const handleApply = () => {
- onChange(options.map((option) => ({ ...option, applied: option.selected })))
+ onChange(currentValue.map((option) => ({ ...option, applied: option.selected })))
triggerRef.current?.click()
}
const handleCheckboxSelection = (num: number) => {
- const selected = options.map((option, idx) => {
+ const selected = currentValue.map((option, idx) => {
if (num === idx) {
return { ...option, selected: !option.selected }
}
return option
})
- onChange(selected)
+ setFilterValue(selected)
}
const handleRadioButtonClick = (e: ChangeEvent & { value: string | boolean }>) => {
- const optionIdx = options.findIndex((option) => option.value === e.currentTarget.value)
- const selected = options.map((option, idx) => ({ ...option, selected: optionIdx === idx }))
- onChange(selected)
+ const optionIdx = currentValue.findIndex((option) => option.value === e.currentTarget.value)
+ const selected = currentValue.map((option, idx) => ({ ...option, selected: optionIdx === idx }))
+ setFilterValue(selected)
}
const handleClear = () => {
- onChange(options.map((option) => ({ ...option, selected: false, applied: false })))
+ setFilterValue(currentValue.map((option) => ({ ...option, selected: false, applied: false })))
+ onChange(currentValue)
triggerRef.current?.click()
}
@@ -105,16 +109,18 @@ export const FilterButton: FC = (props) => {
{type === 'checkbox' && (
({ ...option, value: option.selected }))}
- checkedIds={options.map((option, index) => (option.selected ? index : -1)).filter((index) => index !== -1)}
+ options={currentValue.map((option) => ({ ...option, value: option.selected }))}
+ checkedIds={currentValue
+ .map((option, index) => (option.selected ? index : -1))
+ .filter((index) => index !== -1)}
onChange={handleCheckboxSelection}
/>
)}
{type === 'radio' && (
option.selected)?.value}
+ options={currentValue}
+ value={currentValue.find((option) => option.selected)?.value}
onChange={handleRadioButtonClick}
/>
)}
@@ -128,12 +134,16 @@ export const FilterButton: FC = (props) => {
const isApplied = Boolean(range?.appliedMax || range?.appliedMin)
const handleApply = () => {
- onChange({ ...range, appliedMin: range?.min, appliedMax: range?.max })
+ const currentValue = filterValue as FilterRange
+ onChange({ ...currentValue, appliedMin: currentValue?.min, appliedMax: currentValue?.max })
triggerRef.current?.click()
}
const handleClear = () => {
- onChange({ min: undefined, max: undefined, appliedMin: undefined, appliedMax: undefined })
+ setFilterValue({ min: undefined, max: undefined, appliedMin: undefined, appliedMax: undefined })
+ if (filterValue) {
+ onChange(filterValue)
+ }
triggerRef.current?.click()
}
@@ -164,8 +174,8 @@ export const FilterButton: FC = (props) => {
ref(inputRef)
firstRangeInput.current = inputRef
}}
- value={range}
- onChange={(value) => onChange({ ...range, ...value })}
+ value={filterValue as FilterRange}
+ onChange={(value) => setFilterValue({ ...range, ...value })}
/>
)
diff --git a/packages/atlas/src/components/List/List.tsx b/packages/atlas/src/components/List/List.tsx
index ac2730b3a7..0e097f5cf0 100644
--- a/packages/atlas/src/components/List/List.tsx
+++ b/packages/atlas/src/components/List/List.tsx
@@ -1,5 +1,7 @@
import { FC } from 'react'
+import { ProtectedActionWrapper } from '@/components/_auth/ProtectedActionWrapper'
+
import { ListWrapper } from './List.styles'
import { ListItem, ListItemProps, ListItemSizes } from '../ListItem'
@@ -14,9 +16,19 @@ type ListProps = {
export const List: FC = ({ items, size, className, scrollable = false }) => {
return (
- {items.map((item, index) => (
-
+ {component}
+
+ )
+ }
+
+ return component
+ })}
)
}
diff --git a/packages/atlas/src/components/ListItem/ListItem.tsx b/packages/atlas/src/components/ListItem/ListItem.tsx
index 66a54572ae..998be1d170 100644
--- a/packages/atlas/src/components/ListItem/ListItem.tsx
+++ b/packages/atlas/src/components/ListItem/ListItem.tsx
@@ -40,6 +40,10 @@ export type ListItemProps = {
}
isSeparator?: boolean
isInteractive?: boolean
+ protected?: {
+ title: string
+ description: string
+ }
}
export const ListItem = forwardRef(
diff --git a/packages/atlas/src/components/MembershipInfo/MembershipInfo.tsx b/packages/atlas/src/components/MembershipInfo/MembershipInfo.tsx
index bf03738202..aa610a8687 100644
--- a/packages/atlas/src/components/MembershipInfo/MembershipInfo.tsx
+++ b/packages/atlas/src/components/MembershipInfo/MembershipInfo.tsx
@@ -7,7 +7,7 @@ import { cVar, transitions } from '@/styles'
import { MembershipDetails, MembershipHeader, MembershipInfoContainer, StyledHandle } from './MembershipInfo.style'
-import { SvgActionEdit } from '../../assets/icons'
+import { SvgActionSettings } from '../../assets/icons'
import { Avatar } from '../Avatar'
import { Button } from '../_buttons/Button'
import { CopyAddressButton } from '../_buttons/CopyAddressButton/CopyAddressButton'
@@ -22,7 +22,6 @@ export type MembershipInfoProps = {
address?: string | null
loading?: boolean
isOwner?: boolean
- editable?: boolean
className?: string
}
@@ -31,11 +30,9 @@ export const MembershipInfo: FC = ({
avatarUrls,
avatarLoading,
hasAvatarUploadFailed,
- onAvatarEditClick,
handle,
loading,
isOwner,
- editable,
className,
}) => {
const smMatch = useMediaMatch('sm')
@@ -51,8 +48,6 @@ export const MembershipInfo: FC = ({
= ({
(null)
+ const { trackNFTCarouselNext, trackNFTCarouselPrev } = useSegmentAnalytics()
const mdMatch = useMediaMatch('md')
+ const handleNextSlide = useCallback(
+ (slideIndex: string, nft?: GetFeaturedNftsVideosQuery['ownedNfts'][number]) => {
+ trackNFTCarouselNext(slideIndex, nft?.id)
+ glider?.slideNext()
+ },
+ [glider, trackNFTCarouselNext]
+ )
+
+ const handlePrevSlide = useCallback(
+ (slideIndex: string, nft?: GetFeaturedNftsVideosQuery['ownedNfts'][number]) => {
+ trackNFTCarouselPrev(slideIndex, nft?.id)
+ glider?.slideNext()
+ },
+ [glider, trackNFTCarouselPrev]
+ )
+
const content = useMemo(() => {
if (isLoading) {
return [
@@ -47,16 +65,24 @@ export const MarketplaceCarousel = ({ carouselProps, isLoading, ...rest }: Marke
if (rest.type === 'nft' && rest.nfts && glider) {
return rest.nfts.map((nft, idx) => (
- (dir === '>' ? glider?.slideNext() : glider?.slidePrev())}>
+ (dir === '>' ? handleNextSlide(idx.toString(), nft) : handlePrevSlide(idx.toString(), nft))}
+ >
{(isActive) => (
- glider?.slideNext()} active={isActive} type="nft" nft={nft} />
+ handleNextSlide(idx.toString(), nft)}
+ active={isActive}
+ type="nft"
+ nft={nft}
+ />
)}
))
}
return [null]
- }, [rest.type, rest.nfts, glider, isLoading])
+ }, [isLoading, rest.type, rest.nfts, glider, handleNextSlide, handlePrevSlide])
if (!isLoading && (!rest.nfts || rest.nfts.length < 4)) {
return null
diff --git a/packages/atlas/src/components/NumberFormat/NumberFormat.tsx b/packages/atlas/src/components/NumberFormat/NumberFormat.tsx
index 6542057f4f..2088f3c736 100644
--- a/packages/atlas/src/components/NumberFormat/NumberFormat.tsx
+++ b/packages/atlas/src/components/NumberFormat/NumberFormat.tsx
@@ -124,7 +124,7 @@ export const NumberFormat = forwardRef(
return (
<>
{withDenomination ? (
-
+
{icon ? (
{icon}
@@ -183,7 +183,7 @@ const Denomination = styled(Text)<{ align: 'right' | 'left' }>`
`
const Container = styled.div<{ orientation: NumberFormatProps['withDenomination'] }>`
- display: flex;
+ display: inline-flex;
flex-direction: column;
gap: ${sizes(1)};
width: fit-content;
diff --git a/packages/atlas/src/components/PageTabs/PageTabs.styles.ts b/packages/atlas/src/components/PageTabs/PageTabs.styles.ts
new file mode 100644
index 0000000000..f1f1fb5613
--- /dev/null
+++ b/packages/atlas/src/components/PageTabs/PageTabs.styles.ts
@@ -0,0 +1,21 @@
+import styled from '@emotion/styled'
+
+import { cVar, sizes } from '@/styles'
+
+export const PageTabsWrapper = styled.div`
+ background-color: ${cVar('colorBackgroundMuted')};
+ padding: 0 ${sizes(4)};
+ box-shadow: ${cVar('effectDividersBottom')};
+ display: flex;
+`
+
+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)} ${sizes(2)} auto;
+`
diff --git a/packages/atlas/src/components/PageTabs/PageTabs.tsx b/packages/atlas/src/components/PageTabs/PageTabs.tsx
new file mode 100644
index 0000000000..68ea7ffc92
--- /dev/null
+++ b/packages/atlas/src/components/PageTabs/PageTabs.tsx
@@ -0,0 +1,30 @@
+import { FC, ReactNode } from 'react'
+
+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
+
+type PageTabsProps = Omit & {
+ backAction?: BackAction
+ trailingContent?: ReactNode
+}
+
+export const PageTabs: FC = ({ className, backAction, trailingContent, ...tabsProps }) => {
+ return (
+
+ {backAction && (
+
+ } {...backAction} />
+
+ )}
+ {trailingContent} }
+ {/* todo add support for filters */}
+
+ )
+}
diff --git a/packages/atlas/src/components/PageTabs/index.ts b/packages/atlas/src/components/PageTabs/index.ts
new file mode 100644
index 0000000000..57adf70758
--- /dev/null
+++ b/packages/atlas/src/components/PageTabs/index.ts
@@ -0,0 +1 @@
+export * from './PageTabs'
diff --git a/packages/atlas/src/components/Section/Section.tsx b/packages/atlas/src/components/Section/Section.tsx
index 62d73894fe..2b6edd5ee2 100644
--- a/packages/atlas/src/components/Section/Section.tsx
+++ b/packages/atlas/src/components/Section/Section.tsx
@@ -14,9 +14,20 @@ export type SectionProps = {
footerProps?: SectionFooterProps
className?: string
withoutGap?: boolean
+ slideCallbacks?: {
+ slideLeftCallback: (page?: string) => void
+ slideRightCallback: (page?: string) => void
+ }
}
-export function Section({ headerProps, contentProps, footerProps, className, withoutGap }: SectionProps) {
+export function Section({
+ headerProps,
+ contentProps,
+ footerProps,
+ className,
+ withoutGap,
+ slideCallbacks,
+}: SectionProps) {
const isCarousel = contentProps.type === 'carousel'
const [isCarouselEnd, setIsCarouselEnd] = useState(false)
const [isCarouselBeginning, setIsCarouselBeginning] = useState(true)
@@ -25,9 +36,11 @@ export function Section({ headerProps, contentProps, footerProps, className,
const handleSlideLeft = () => {
gliderRef.current?.slidePrev()
+ slideCallbacks?.slideLeftCallback(gliderRef?.current?.activeIndex?.toString())
}
const handleSlideRight = () => {
gliderRef.current?.slideNext()
+ slideCallbacks?.slideRightCallback(gliderRef?.current?.activeIndex?.toString())
}
useEffect(() => {
diff --git a/packages/atlas/src/components/StudioEntrypoint/StudioEntrypoint.tsx b/packages/atlas/src/components/StudioEntrypoint/StudioEntrypoint.tsx
index a2f1f8c40c..c89bd40b3d 100644
--- a/packages/atlas/src/components/StudioEntrypoint/StudioEntrypoint.tsx
+++ b/packages/atlas/src/components/StudioEntrypoint/StudioEntrypoint.tsx
@@ -26,7 +26,7 @@ export const StudioEntrypoint: FC = ({ enterLocation }) =
if (!activeMembership?.channels.length) {
return `
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`
- 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/Tooltip/Tooltip.tsx b/packages/atlas/src/components/Tooltip/Tooltip.tsx
index d33fa35ce7..80d57e8fda 100644
--- a/packages/atlas/src/components/Tooltip/Tooltip.tsx
+++ b/packages/atlas/src/components/Tooltip/Tooltip.tsx
@@ -4,20 +4,13 @@ import { CSSTransition } from 'react-transition-group'
import { transitions } from '@/styles'
-import {
- IconWrapper,
- StyledSvgAlertsInformative24,
- TooltipContainer,
- TooltipContent,
- TooltipHeader,
- TooltipText,
-} from './Tooltip.styles'
+import { IconWrapper, TooltipContainer, TooltipContent, TooltipHeader, TooltipText } from './Tooltip.styles'
type Placement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top' | 'bottom'
export type TooltipProps = PropsWithChildren<{
text?: string
headerText?: string
- icon?: boolean
+ icon?: ReactNode
placement?: Placement
offsetX?: number
offsetY?: number
@@ -59,11 +52,7 @@ export const Tooltip: FC = ({
) : (
- {icon && (
-
-
- )}
+ {icon && {icon} }
{headerText && (
{headerText}
diff --git a/packages/atlas/src/components/WelcomeView/WelcomeView.styles.ts b/packages/atlas/src/components/WelcomeView/WelcomeView.styles.ts
index a9b7fdabbe..149077f61c 100644
--- a/packages/atlas/src/components/WelcomeView/WelcomeView.styles.ts
+++ b/packages/atlas/src/components/WelcomeView/WelcomeView.styles.ts
@@ -19,7 +19,6 @@ export const LEFT_ANIMATION_MD = 'left-animation-md'
export const OverflowHiddenContainer = styled.div`
margin: 0 calc(-1 * var(--size-global-horizontal-padding)) 0;
- overflow: hidden;
[data-aos=${LEFT_ANIMATION_MD}] {
opacity: 0;
diff --git a/packages/atlas/src/components/WelcomeView/WelcomeView.tsx b/packages/atlas/src/components/WelcomeView/WelcomeView.tsx
index 9bfdf32512..f1a2c13948 100644
--- a/packages/atlas/src/components/WelcomeView/WelcomeView.tsx
+++ b/packages/atlas/src/components/WelcomeView/WelcomeView.tsx
@@ -2,9 +2,7 @@ import AOS from 'aos'
import 'aos/dist/aos.css'
import { ReactElement, ReactNode, useEffect } from 'react'
-// import crtDashbaord1x from '@/assets/images/crt-dashboard-1x.webp'
import crtDashbaord2x from '@/assets/images/crt-dashboard-2x.webp'
-// import crtForm1x from '@/assets/images/crt-form-1x.webp'
import crtForm2x from '@/assets/images/crt-form-2x.webp'
import myUploads1x from '@/assets/images/my-uploads-1x.webp'
import myUploads2x from '@/assets/images/my-uploads-2x.webp'
@@ -120,12 +118,7 @@ export const WelcomeView = ({
{headTags}
-
+
{pageTitle}
diff --git a/packages/atlas/src/components/_auth/AuthModals/AuthModals.tsx b/packages/atlas/src/components/_auth/AuthModals/AuthModals.tsx
new file mode 100644
index 0000000000..77516aacd4
--- /dev/null
+++ b/packages/atlas/src/components/_auth/AuthModals/AuthModals.tsx
@@ -0,0 +1,25 @@
+import { ExternalSignInModal } from '@/components/_auth/ExternalSignInModal'
+import { LogInModal } from '@/components/_auth/LogInModal'
+import { SignUpModal } from '@/components/_auth/SignUpModal'
+import { CreateChannelModal } from '@/components/_channel/CreateChannelModal'
+import { useAuthStore } from '@/providers/auth/auth.store'
+
+import { ForgotPasswordModal } from '../ForgotPasswordModal/ForgotPasswordModal'
+
+export const AuthModals = () => {
+ const { authModalOpenName } = useAuthStore()
+
+ if (authModalOpenName) {
+ return (
+ <>
+ `
position: relative;
overflow: hidden;
@@ -81,10 +81,11 @@ export const CustomBackgroundContainer = styled.div (hasNegativeBottomMargin ? 'calc(-1 * var(--local-size-dialog-padding))' : 0)}
calc(-1 * var(--local-size-dialog-padding));
- padding: ${({ bottomPadding }) =>
- bottomPadding
+ padding: ${({ hasBottomPadding }) =>
+ hasBottomPadding
? 'var(--local-size-dialog-padding)'
: 'var(--local-size-dialog-padding) var(--local-size-dialog-padding) 0 var(--local-size-dialog-padding)'};
background-color: ${({ darkBackground }) => (darkBackground ? cVar('colorBackground') : 'unset')};
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalStepTemplate/SignInModalStepTemplate.tsx b/packages/atlas/src/components/_auth/AuthenticationModalStepTemplate/AuthenticationModalStepTemplate.tsx
similarity index 82%
rename from packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalStepTemplate/SignInModalStepTemplate.tsx
rename to packages/atlas/src/components/_auth/AuthenticationModalStepTemplate/AuthenticationModalStepTemplate.tsx
index 9f8b80fb90..b448b1dda7 100644
--- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalStepTemplate/SignInModalStepTemplate.tsx
+++ b/packages/atlas/src/components/_auth/AuthenticationModalStepTemplate/AuthenticationModalStepTemplate.tsx
@@ -13,24 +13,26 @@ import {
HeaderContainer,
LogoContainer,
StyledAppLogo,
-} from './SignInModalStepTemplate.styles'
+} from './AuthenticationModalStepTemplate.styles'
-type SignInModalStepTemplateProps = PropsWithChildren<{
+type AuthenticationModalStepTemplateProps = PropsWithChildren<{
title: string
subtitle?: ReactNode
loader?: boolean
hasNavigatedBack: boolean
darkBackground?: boolean
+ hasNegativeBottomMargin?: boolean
backgroundImage?: string
formNode?: ReactNode
}>
-export const SignInModalStepTemplate: FC = ({
+export const AuthenticationModalStepTemplate: FC = ({
title,
subtitle,
children,
loader,
hasNavigatedBack,
+ hasNegativeBottomMargin,
darkBackground,
backgroundImage,
formNode,
@@ -41,8 +43,9 @@ export const SignInModalStepTemplate: FC = ({
<>
{backgroundImage && (
<>
diff --git a/packages/atlas/src/components/_auth/AuthenticationModalStepTemplate/index.ts b/packages/atlas/src/components/_auth/AuthenticationModalStepTemplate/index.ts
new file mode 100644
index 0000000000..aaea8608bb
--- /dev/null
+++ b/packages/atlas/src/components/_auth/AuthenticationModalStepTemplate/index.ts
@@ -0,0 +1 @@
+export * from './AuthenticationModalStepTemplate'
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInModal.styles.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.styles.ts
similarity index 59%
rename from packages/atlas/src/components/_auth/SignInModal/SignInModal.styles.ts
rename to packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.styles.ts
index b0c819dce1..5216e9b921 100644
--- a/packages/atlas/src/components/_auth/SignInModal/SignInModal.styles.ts
+++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.styles.ts
@@ -1,7 +1,11 @@
import styled from '@emotion/styled'
import { DialogModal } from '@/components/_overlays/DialogModal'
+import { media } from '@/styles'
export const StyledDialogModal = styled(DialogModal)`
- max-height: 576px;
+ max-height: calc(100vh - 80px);
+ ${media.sm} {
+ max-height: 576px;
+ }
`
diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.tsx b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.tsx
new file mode 100644
index 0000000000..4a0cd9199b
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.tsx
@@ -0,0 +1,163 @@
+import { zodResolver } from '@hookform/resolvers/zod/dist/zod'
+import { FC, useCallback, useEffect, useRef, useState } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import shallow from 'zustand/shallow'
+
+import { GetMembershipsQuery } from '@/api/queries/__generated__/memberships.generated'
+import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
+import { ExternalSignInModalEmailStep } from '@/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalEmailStep'
+import { Button } from '@/components/_buttons/Button'
+import { DialogButtonProps } from '@/components/_overlays/Dialog'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
+import { useAuthStore } from '@/providers/auth/auth.store'
+
+import { StyledDialogModal } from './ExternalSignInModal.styles'
+import {
+ ExternalSignInModalMembershipsStep,
+ ExternalSignInModalWalletStep,
+ ModalSteps,
+ SignInStepProps,
+} from './ExternalSignInSteps'
+
+const stepToPageName: Partial> = {
+ [ModalSteps.Email]: 'External sign in modal - Add email to existing membership',
+ [ModalSteps.Logging]: 'External sign in modal - logging',
+ [ModalSteps.Wallet]: 'External sign in modal - wallet selection',
+ [ModalSteps.Membership]: 'External sign in modal - membership params',
+ [ModalSteps.NoMembership]: 'External sign in modal - no membership',
+ [ModalSteps.Register]: 'External sign in modal - register',
+}
+export const ExternalSignInModal: FC = () => {
+ const [currentStep, setCurrentStep] = useState(ModalSteps.Wallet)
+ const [primaryButtonProps, setPrimaryButtonProps] = useState({ text: 'Select wallet' }) // start with sensible default so that there are no jumps after first effect runs
+ const [hasNavigatedBack, setHasNavigatedBack] = useState(false)
+ const [selectedMembership, setSelectedMembership] = useState(null)
+ const [availableMemberships, setAvailableMemberships] = useState(null)
+ const dialogContentRef = useRef(null)
+ const { trackPageView } = useSegmentAnalytics()
+ const form = useForm<{ email: string }>({
+ resolver: zodResolver(
+ z.object({
+ email: z.string().email(),
+ })
+ ),
+ })
+ const { authModalOpenName, setAuthModalOpenName } = useAuthStore(
+ (state) => ({
+ authModalOpenName: state.authModalOpenName,
+ setAuthModalOpenName: state.actions.setAuthModalOpenName,
+ }),
+ shallow
+ )
+
+ const goToPreviousStep = useCallback((step: ModalSteps) => {
+ setCurrentStep(step)
+ setHasNavigatedBack(true)
+ }, [])
+
+ // scroll the dialog content to top whenever the displayed step changes
+ useEffect(() => {
+ if (!dialogContentRef.current) return
+
+ dialogContentRef.current.scrollTo({ top: 0 })
+ }, [currentStep])
+
+ useEffect(() => {
+ authModalOpenName === 'externalLogIn' && trackPageView(stepToPageName[currentStep] ?? '')
+ }, [authModalOpenName, currentStep, trackPageView])
+
+ const renderStep = () => {
+ const commonProps: SignInStepProps = {
+ setPrimaryButtonProps,
+ goToStep: setCurrentStep,
+ hasNavigatedBack,
+ }
+
+ switch (currentStep) {
+ case ModalSteps.Wallet:
+ return
+ {renderStep()}
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalEmailStep.tsx b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalEmailStep.tsx
new file mode 100644
index 0000000000..c077f689f8
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalEmailStep.tsx
@@ -0,0 +1,107 @@
+import { FC, useCallback, useEffect } from 'react'
+import { useFormContext } from 'react-hook-form'
+import shallow from 'zustand/shallow'
+
+import { FormField } from '@/components/_inputs/FormField'
+import { Input } from '@/components/_inputs/Input'
+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'
+import { useJoystream } from '@/providers/joystream'
+import { useSnackbar } from '@/providers/snackbars'
+
+import { ModalSteps, SignInStepProps } from './ExternalSignInSteps.types'
+
+import { AuthenticationModalStepTemplate } from '../../AuthenticationModalStepTemplate'
+
+type SignInModalEmailStepProps = SignInStepProps & {
+ onConfirm?: (address: string) => void
+ memberId: string | null
+}
+
+export const ExternalSignInModalEmailStep: FC = ({
+ setPrimaryButtonProps,
+ goToStep,
+ memberId,
+}) => {
+ const { handleLogin } = useAuth()
+ const { joystream } = useJoystream()
+ const { displaySnackbar } = useSnackbar()
+ const { setAuthModalOpenName } = useAuthStore(
+ (state) => ({
+ authModalOpenName: state.authModalOpenName,
+ setAuthModalOpenName: state.actions.setAuthModalOpenName,
+ }),
+ shallow
+ )
+ const { handleSubmit, setError, formState, register } = useFormContext<{ email: string }>()
+ const handleConfirm = useCallback(async () => {
+ const account = await joystream?.selectedAccountId
+ if (!joystream?.signMessage || !account || !memberId) return
+ const userAddress = typeof account === 'object' ? account.address : account
+ await handleSubmit(async (data) => {
+ goToStep(ModalSteps.ExtensionSigning)
+
+ try {
+ const address = await registerAccount({
+ type: 'external',
+ email: data.email,
+ address: userAddress,
+ signature: (data) =>
+ joystream?.signMessage({
+ type: 'payload',
+ data,
+ }),
+ memberId,
+ })
+
+ if (address) {
+ await handleLogin({
+ type: 'external',
+ address,
+ sign: (data) =>
+ joystream?.signMessage({
+ type: 'payload',
+ data,
+ }),
+ })
+ }
+ setAuthModalOpenName(undefined)
+ } catch (error) {
+ if (error instanceof OrionAccountError) {
+ if (error.message === 'Account with the provided e-mail address already exists.') {
+ displaySnackbar({
+ iconType: 'error',
+ title: 'This email was used already',
+ description:
+ 'To create new membership you need to use an email that is not connected to already existing account.',
+ })
+ goToStep(ModalSteps.Email)
+ setError('email', { type: 'custom', message: 'Email already exists' })
+ }
+ }
+ }
+ })()
+ }, [displaySnackbar, goToStep, handleLogin, handleSubmit, joystream, memberId, setAuthModalOpenName, setError])
+
+ // send updates to SignInModal on state of primary button
+ useEffect(() => {
+ setPrimaryButtonProps({
+ text: 'Continue',
+ onClick: handleConfirm,
+ })
+ }, [handleConfirm, setPrimaryButtonProps])
+
+ return (
+
+
+
+
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalMembershipsStep.tsx b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalMembershipsStep.tsx
new file mode 100644
index 0000000000..05f27089f4
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalMembershipsStep.tsx
@@ -0,0 +1,131 @@
+import { FC, useCallback, useEffect } from 'react'
+import shallow from 'zustand/shallow'
+
+import { GetMembershipsQuery } from '@/api/queries/__generated__/memberships.generated'
+import { Avatar } from '@/components/Avatar'
+import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
+import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { getMemberAvatar } from '@/providers/assets/assets.helpers'
+import { useAuth } from '@/providers/auth/auth.hooks'
+import { useAuthStore } from '@/providers/auth/auth.store'
+import { LogInErrors } from '@/providers/auth/auth.types'
+import { useJoystream } from '@/providers/joystream'
+import { useSnackbar } from '@/providers/snackbars'
+import { shortenString } from '@/utils/misc'
+
+import { ListItemsWrapper, StyledListItem } from './ExternalSignInSteps.styles'
+import { ModalSteps, SignInStepProps } from './ExternalSignInSteps.types'
+
+type SignInModalAccountStepProps = SignInStepProps & {
+ memberId: string | null
+ setMemberId: (id: string) => void
+ memberships: GetMembershipsQuery['memberships'] | null
+}
+
+export const ExternalSignInModalMembershipsStep: FC = ({
+ setPrimaryButtonProps,
+ hasNavigatedBack,
+ goToStep,
+ setMemberId,
+ memberId,
+ memberships,
+}) => {
+ const smMatch = useMediaMatch('sm')
+ const { setAuthModalOpenName } = useAuthStore(
+ (state) => ({ setAuthModalOpenName: state.actions.setAuthModalOpenName }),
+ shallow
+ )
+ const { setApiActiveAccount } = useJoystream()
+
+ const { joystream } = useJoystream()
+ const { handleLogin } = useAuth()
+ const { displaySnackbar } = useSnackbar()
+
+ const handleConfirm = useCallback(async () => {
+ if (!joystream?.signMessage) return
+
+ const member = memberships?.find((entity) => entity.id === memberId)
+
+ if (!member) return
+
+ await setApiActiveAccount('address', member.controllerAccount)
+
+ goToStep(ModalSteps.ExtensionSigning)
+ await handleLogin({
+ type: 'external',
+ sign: (data) =>
+ joystream.signMessage({
+ type: 'payload',
+ data,
+ }),
+ address: member.controllerAccount,
+ })
+ .then(() => {
+ setAuthModalOpenName(undefined)
+ })
+ .catch((error) => {
+ if (error.message === LogInErrors.NoAccountFound) {
+ return goToStep(ModalSteps.Email)
+ }
+ if (error.message === LogInErrors.InvalidPayload) {
+ displaySnackbar({
+ iconType: 'error',
+ title: 'There was a problem with signature. Please try again.',
+ })
+ }
+ if (error.message === LogInErrors.SignatureCancelled) {
+ displaySnackbar({
+ iconType: 'warning',
+ title: 'Message signing cancelled',
+ })
+ goToStep(ModalSteps.Membership)
+ }
+ })
+ }, [
+ displaySnackbar,
+ goToStep,
+ handleLogin,
+ joystream,
+ memberId,
+ memberships,
+ setApiActiveAccount,
+ setAuthModalOpenName,
+ ])
+
+ useEffect(() => {
+ if (memberId) return
+
+ setMemberId(memberships?.[0]?.id ?? '')
+ }, [memberId, memberships, setMemberId])
+
+ // send updates to SignInModal on state of primary button
+ useEffect(() => {
+ setPrimaryButtonProps({
+ text: 'Sign in',
+ disabled: !memberId,
+ onClick: handleConfirm,
+ })
+ }, [handleConfirm, memberId, setPrimaryButtonProps])
+
+ return (
+
+
+ {memberships?.map((member) => (
+
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.tsx b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.tsx
similarity index 77%
rename from packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.tsx
rename to packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.tsx
index 3af688eb38..7306d44f11 100644
--- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.tsx
+++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.tsx
@@ -1,46 +1,50 @@
import { Wallet } from '@talismn/connect-wallets'
import { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import { GetMembershipsQuery, useGetMembershipsLazyQuery } from '@/api/queries/__generated__/memberships.generated'
import { SvgActionNewTab, SvgAlertsError24, SvgAlertsInformative24, SvgLogoPolkadot } from '@/assets/icons'
import { IconWrapper } from '@/components/IconWrapper'
+import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
import { Loader } from '@/components/_loaders/Loader'
import { useMediaMatch } from '@/hooks/useMediaMatch'
import { useMountEffect } from '@/hooks/useMountEffect'
-import { UnknownWallet } from '@/providers/user/user.helpers'
-import { useUser } from '@/providers/user/user.hooks'
-import { useUserStore } from '@/providers/user/user.store'
+import { UnknownWallet, getWalletsList } from '@/providers/wallet/wallet.helpers'
+import { useWallet } from '@/providers/wallet/wallet.hooks'
import { isMobile } from '@/utils/browser'
import { capitalizeFirstLetter } from '@/utils/misc'
-import { MOBILE_SUPPORTED_WALLETS, walletSort } from './SignInModalWalletStep.utils'
+import { MOBILE_SUPPORTED_WALLETS, walletSort } from './ExternalSignInModalWalletStep.utils'
-import { SignInModalStepTemplate } from '../SignInModalStepTemplate'
import {
ListItemsWrapper,
StyledBottomBanner,
StyledListItem,
StyledTopBanner,
WalletLogo,
-} from '../SignInSteps.styles'
-import { SignInStepProps } from '../SignInSteps.types'
+} from '../ExternalSignInSteps.styles'
+import { ModalSteps, SignInStepProps } from '../ExternalSignInSteps.types'
export const isMobileDevice = isMobile()
-export const SignInModalWalletStep: FC = ({
+export type ExternalSignInModalWalletStepProps = SignInStepProps & {
+ setAvailableMemberships: (members: GetMembershipsQuery['memberships']) => void
+}
+
+export const ExternalSignInModalWalletStep: FC = ({
setPrimaryButtonProps,
- goToNextStep,
+ goToStep,
hasNavigatedBack,
+ setAvailableMemberships,
}) => {
const smMatch = useMediaMatch('sm')
const [selectedWalletIdx, setSelectedWalletIdx] = useState(0)
const [hasError, setHasError] = useState(false)
const [isConnecting, setIsConnecting] = useState(false)
- const { getWalletsList, signIn } = useUser()
- const walletFromStore = useUserStore((state) => state.wallet)
-
+ const { wallet: walletFromStore, signInToWallet } = useWallet()
+ const [fetchMemberships] = useGetMembershipsLazyQuery({})
const wallets = useMemo(() => {
- const unsortedWallets = getWalletsList()
+ const unsortedWallets = getWalletsList().filter((wallet) => wallet.installed)
if (isMobileDevice) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const rawWallets = Object.keys((window as any).injectedWeb3 || {})
@@ -78,7 +82,7 @@ export const SignInModalWalletStep: FC = ({
.sort(walletSort)
}
return unsortedWallets.sort(walletSort)
- }, [getWalletsList])
+ }, [])
const selectedWallet = (selectedWalletIdx != null && wallets[selectedWalletIdx]) || null
@@ -87,17 +91,30 @@ export const SignInModalWalletStep: FC = ({
setIsConnecting(true)
setHasError(false)
- const success = await signIn(selectedWallet.extensionName)
- setIsConnecting(false)
+ const accounts = await signInToWallet(selectedWallet.extensionName)
- if (!success) {
+ if (!accounts) {
setHasError(true)
// set error state
return
}
- goToNextStep()
- }, [goToNextStep, selectedWallet, signIn])
+ const res = await fetchMemberships({
+ variables: {
+ where: {
+ controllerAccount_in: accounts.map((acc) => acc.address),
+ },
+ },
+ })
+ setIsConnecting(false)
+
+ if (res.data?.memberships.length) {
+ setAvailableMemberships(res.data.memberships)
+ goToStep(ModalSteps.Membership)
+ } else {
+ goToStep(ModalSteps.NoMembership)
+ }
+ }, [fetchMemberships, goToStep, selectedWallet, setAvailableMemberships, signInToWallet])
const handleSelectWallet = useCallback((idx: number) => {
setSelectedWalletIdx(idx)
@@ -121,7 +138,7 @@ export const SignInModalWalletStep: FC = ({
text: isConnecting
? 'Connecting...'
: selectedWallet?.installed || isMobileDevice
- ? 'Select wallet'
+ ? 'Use wallet'
: `Install ${selectedWallet?.title}`,
disabled: isConnecting,
icon: selectedWallet?.installed ? null : = ({
}, [handleConfirm, isConnecting, selectedWallet, setPrimaryButtonProps])
return (
- = ({
icon={
+
)
}
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.utils.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.utils.ts
similarity index 94%
rename from packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.utils.ts
rename to packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.utils.ts
index ba335406bf..397440d1bc 100644
--- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/SignInModalWalletStep.utils.ts
+++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/ExternalSignInModalWalletStep.utils.ts
@@ -1,7 +1,7 @@
import { Wallet } from '@talismn/connect-wallets'
import polkaWalletLogo from '@/assets/images/polkawallet-logo.webp'
-import { UnknownWallet } from '@/providers/user/user.helpers'
+import { UnknownWallet } from '@/providers/wallet/wallet.helpers'
export const PRIORITY_WALLETS = ['talisman', 'subwallet-js']
export const DEFAULT_PRIORITY = 100000
diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/index.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/index.ts
new file mode 100644
index 0000000000..f9b206e0f7
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInModalWalletStep/index.ts
@@ -0,0 +1 @@
+export * from './ExternalSignInModalWalletStep'
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInSteps.styles.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.styles.ts
similarity index 100%
rename from packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInSteps.styles.ts
rename to packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.styles.ts
diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.types.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.types.ts
new file mode 100644
index 0000000000..0239792094
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/ExternalSignInSteps.types.ts
@@ -0,0 +1,17 @@
+import { DialogButtonProps } from '@/components/_overlays/Dialog'
+
+export enum ModalSteps {
+ Wallet = 'Wallet',
+ Membership = 'Membership',
+ Logging = 'Logging',
+ Email = 'Email',
+ Register = 'Register',
+ ExtensionSigning = 'ExtensionSigning',
+ NoMembership = 'NoMembership',
+}
+
+export type SignInStepProps = {
+ setPrimaryButtonProps: (props: DialogButtonProps) => void
+ goToStep: (step: ModalSteps) => void
+ hasNavigatedBack: boolean
+}
diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/index.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/index.ts
new file mode 100644
index 0000000000..708f0b989d
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInSteps/index.ts
@@ -0,0 +1,4 @@
+export * from './ExternalSignInModalWalletStep/ExternalSignInModalWalletStep'
+export * from './ExternalSignInModalMembershipsStep'
+export type { SignInStepProps } from './ExternalSignInSteps.types'
+export { ModalSteps } from './ExternalSignInSteps.types'
diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/index.ts b/packages/atlas/src/components/_auth/ExternalSignInModal/index.ts
new file mode 100644
index 0000000000..850a830ca5
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ExternalSignInModal/index.ts
@@ -0,0 +1 @@
+export * from './ExternalSignInModal'
diff --git a/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.styles.ts b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.styles.ts
new file mode 100644
index 0000000000..6cbd554b19
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.styles.ts
@@ -0,0 +1,9 @@
+import styled from '@emotion/styled'
+
+import { sizes } from '@/styles'
+
+export const GapContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: ${sizes(6)};
+`
diff --git a/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.tsx b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.tsx
new file mode 100644
index 0000000000..9fbcf81974
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.tsx
@@ -0,0 +1,223 @@
+import { zodResolver } from '@hookform/resolvers/zod/dist/zod'
+import { u8aToHex } from '@polkadot/util'
+import axios from 'axios'
+import { useCallback, useState } from 'react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import shallow from 'zustand/shallow'
+
+import { useGetCurrentAccountLazyQuery } from '@/api/queries/__generated__/accounts.generated'
+import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
+import { EmailAndSeedStep } from '@/components/_auth/ForgotPasswordModal/steps/EmailAndSeedStep'
+import { NewPasswordStep } from '@/components/_auth/ForgotPasswordModal/steps/NewPasswordStep'
+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 } 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'
+
+import { ForgotPasswordModalForm, ForgotPasswordStep } from './ForgotPasswordModal.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 schema = z.object({
+ [ForgotPasswordStep.EmailAndSeedStep]: z.object({
+ email: z.string().min(3, { message: 'Enter email address.' }).email({ message: 'Enter valid email address.' }),
+ mnemonic: z
+ .string()
+ .min(1, 'Enter wallet seed phrase.')
+ .regex(/^(\w+\s){11}\w+$/, { message: 'Wallet seed phrase should contain 12 words separated by spaces.' }),
+ }),
+ [ForgotPasswordStep.NewPasswordStep]: z
+ .object({
+ password: commonPasswordValidation,
+ confirmPassword: commonPasswordValidation,
+ })
+ .refine(
+ (data) => {
+ return data.password === data.confirmPassword
+ },
+ {
+ path: ['confirmPassword'],
+ message: 'Password address has to match.',
+ }
+ ),
+})
+
+export const ForgotPasswordModal = () => {
+ const [currentStep, setCurrentStep] = useState(ForgotPasswordStep.EmailAndSeedStep)
+ const [isLoading, setIsLoading] = useState(false)
+ const [accountId, setAccountId] = useState()
+ const { displaySnackbar } = useSnackbar()
+ const setAuthModalName = useAuthStore((state) => state.actions.setAuthModalOpenName)
+ const isLastStep = currentStep === ForgotPasswordStep.NewPasswordStep
+ const [lazyCurrentAccountQuery] = useGetCurrentAccountLazyQuery()
+
+ const form = useForm({
+ resolver: zodResolver(isLastStep ? schema : schema.pick({ [currentStep]: true })),
+ })
+ const { authModalOpenName, setAuthModalOpenName } = useAuthStore(
+ (state) => ({
+ authModalOpenName: state.authModalOpenName,
+ setAuthModalOpenName: state.actions.setAuthModalOpenName,
+ }),
+ shallow
+ )
+ const handleEmailAndSeedStepSubmit = async (data: ForgotPasswordModalForm) => {
+ setIsLoading(true)
+
+ try {
+ const time = Date.now() - 10_000
+
+ const keypair = keyring.addFromMnemonic(data['EmailAndSeedStep'].mnemonic)
+ const address = keypair.address
+ const loginPayload = {
+ joystreamAccountId: address,
+ gatewayName: atlasConfig.general.appName,
+ timestamp: time,
+ action: 'login' as const,
+ }
+ const loginSignature = await keypair.sign(JSON.stringify(loginPayload))
+ const loginResponse = await loginRequest(u8aToHex(loginSignature), loginPayload)
+ const accData = await lazyCurrentAccountQuery()
+
+ if (accData.data?.accountData.email !== data['EmailAndSeedStep'].email) {
+ form.setError(`${ForgotPasswordStep.EmailAndSeedStep}.email`, {
+ message: 'Provided email do not match wallet seed phrase.',
+ })
+ logoutRequest().catch((error) => {
+ SentryLogger.error('Failed to logout when recovering password', 'ForgotPasswordModal', error)
+ })
+ return
+ }
+
+ setAccountId(loginResponse.data.accountId)
+ setCurrentStep(ForgotPasswordStep.NewPasswordStep)
+ } catch (error) {
+ displaySnackbar({
+ title: 'Something went wrong',
+ description: `We encountered unexpected error. Please try again.`,
+ iconType: 'error',
+ })
+ SentryLogger.error('Failed to login when recovering password', 'ForgotPasswordModal', error)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ const handleNewPasswordStep = useCallback(
+ async (data: ForgotPasswordModalForm) => {
+ if (!accountId) {
+ displaySnackbar({
+ title: 'Something went wrong',
+ description: `We couldn't find account associated with given credentials. Please try again.`,
+ iconType: 'error',
+ })
+ return
+ }
+ setCurrentStep(ForgotPasswordStep.LoadingStep)
+ const time = Date.now() - 10_000
+ try {
+ const keypair = keyring.addFromMnemonic(data['EmailAndSeedStep'].mnemonic)
+ const address = keypair.address
+
+ const newArtifacts = await prepareEncryptionArtifacts(
+ data['EmailAndSeedStep'].email,
+ data['NewPasswordStep'].password,
+ data['EmailAndSeedStep'].mnemonic
+ )
+ const forgetPayload = {
+ joystreamAccountId: address,
+ gatewayName: atlasConfig.general.appName,
+ timestamp: time,
+ action: 'changeAccount',
+ gatewayAccountId: accountId,
+ newArtifacts,
+ }
+ const forgetPayloadSignature = await keypair.sign(JSON.stringify(forgetPayload))
+
+ await axios.post<{ accountId: string }>(
+ `${ORION_AUTH_URL}/change-account`,
+ {
+ signature: u8aToHex(forgetPayloadSignature),
+ payload: forgetPayload,
+ },
+ {
+ withCredentials: true,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ )
+ displaySnackbar({
+ title: 'Password has been changed',
+ description: 'You can now sign in to your account using the new password',
+ iconType: 'success',
+ })
+ setAuthModalName('logIn')
+ } catch (error) {
+ displaySnackbar({
+ title: 'Something went wrong',
+ description: `We encountered unexpected error. Please try again.`,
+ iconType: 'error',
+ })
+ SentryLogger.error('Failed to change password', 'ForgotPasswordModal', error)
+ } finally {
+ setCurrentStep(ForgotPasswordStep.NewPasswordStep)
+ }
+ },
+ [accountId, displaySnackbar, setAuthModalName]
+ )
+
+ return (
+ {
+ form.handleSubmit(
+ currentStep === ForgotPasswordStep.EmailAndSeedStep ? handleEmailAndSeedStepSubmit : handleNewPasswordStep
+ )()
+ },
+ }}
+ secondaryButton={{
+ text: 'Back',
+ onClick: () =>
+ currentStep === ForgotPasswordStep.EmailAndSeedStep
+ ? setAuthModalName('logIn')
+ : setCurrentStep(ForgotPasswordStep.EmailAndSeedStep),
+ }}
+ dividers={currentStep === ForgotPasswordStep.NewPasswordStep}
+ additionalActionsNode={
+
+ }
+ >
+
+ {currentStep === ForgotPasswordStep.EmailAndSeedStep &&
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.types.ts b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.types.ts
new file mode 100644
index 0000000000..8085c675bf
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ForgotPasswordModal/ForgotPasswordModal.types.ts
@@ -0,0 +1,16 @@
+export enum ForgotPasswordStep {
+ EmailAndSeedStep = 'EmailAndSeedStep',
+ NewPasswordStep = 'NewPasswordStep',
+ LoadingStep = 'LoadingStep',
+}
+
+export type ForgotPasswordModalForm = {
+ [ForgotPasswordStep.EmailAndSeedStep]: {
+ mnemonic: string
+ email: string
+ }
+ [ForgotPasswordStep.NewPasswordStep]: {
+ password: string
+ confirmPassword: string
+ }
+}
diff --git a/packages/atlas/src/components/_auth/ForgotPasswordModal/steps/EmailAndSeedStep.tsx b/packages/atlas/src/components/_auth/ForgotPasswordModal/steps/EmailAndSeedStep.tsx
new file mode 100644
index 0000000000..474f8fcb13
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ForgotPasswordModal/steps/EmailAndSeedStep.tsx
@@ -0,0 +1,44 @@
+import { useFormContext } from 'react-hook-form'
+
+import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
+import {
+ ForgotPasswordModalForm,
+ ForgotPasswordStep,
+} from '@/components/_auth/ForgotPasswordModal/ForgotPasswordModal.types'
+import { FormField } from '@/components/_inputs/FormField'
+import { Input } from '@/components/_inputs/Input'
+import { TextArea } from '@/components/_inputs/TextArea'
+
+import { GapContainer } from '../ForgotPasswordModal.styles'
+
+export const EmailAndSeedStep = () => {
+ const { register, formState } = useFormContext()
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/ForgotPasswordModal/steps/NewPasswordStep.tsx b/packages/atlas/src/components/_auth/ForgotPasswordModal/steps/NewPasswordStep.tsx
new file mode 100644
index 0000000000..a0e84e79fb
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ForgotPasswordModal/steps/NewPasswordStep.tsx
@@ -0,0 +1,41 @@
+import { useFormContext } from 'react-hook-form'
+
+import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
+import {
+ ForgotPasswordModalForm,
+ ForgotPasswordStep,
+} from '@/components/_auth/ForgotPasswordModal/ForgotPasswordModal.types'
+import { FormField } from '@/components/_inputs/FormField'
+import { Input } from '@/components/_inputs/Input'
+import { useHidePasswordInInput } from '@/hooks/useHidePasswordInInput'
+
+import { PasswordCriterias } from '../../PasswordCriterias'
+import { GapContainer } from '../ForgotPasswordModal.styles'
+
+export const NewPasswordStep = () => {
+ const { register, formState } = useFormContext()
+ const [hidePasswordProps] = useHidePasswordInInput()
+ const [hideConfirmPasswordProps] = useHidePasswordInInput()
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/LogInModal/LogInModal.styles.ts b/packages/atlas/src/components/_auth/LogInModal/LogInModal.styles.ts
new file mode 100644
index 0000000000..2aac4619b5
--- /dev/null
+++ b/packages/atlas/src/components/_auth/LogInModal/LogInModal.styles.ts
@@ -0,0 +1,14 @@
+import styled from '@emotion/styled'
+
+import { TextButton } from '@/components/_buttons/Button'
+import { sizes } from '@/styles'
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: ${sizes(6)};
+`
+
+export const ForgotPasswordButton = styled(TextButton)`
+ margin: ${sizes(-2)} 0 0 auto;
+`
diff --git a/packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx b/packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx
new file mode 100644
index 0000000000..6bc1b13831
--- /dev/null
+++ b/packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx
@@ -0,0 +1,151 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import shallow from 'zustand/shallow'
+
+import { Button, TextButton } from '@/components/_buttons/Button'
+import { FormField } from '@/components/_inputs/FormField'
+import { Input } from '@/components/_inputs/Input'
+import { DialogModal } from '@/components/_overlays/DialogModal'
+import { atlasConfig } from '@/config'
+import { useHidePasswordInInput } from '@/hooks/useHidePasswordInInput'
+import { useAuth } from '@/providers/auth/auth.hooks'
+import { useAuthStore } from '@/providers/auth/auth.store'
+import { LogInErrors } from '@/providers/auth/auth.types'
+import { useSnackbar } from '@/providers/snackbars'
+import { useYppStore } from '@/providers/ypp/ypp.store'
+
+import { Container, ForgotPasswordButton } from './LogInModal.styles'
+
+import { AuthenticationModalStepTemplate } from '../AuthenticationModalStepTemplate'
+
+export const LogInModal = () => {
+ const [isLoading, setIsLoading] = useState(false)
+ const { handleLogin, refetchCurrentUser } = useAuth()
+ const { displaySnackbar } = useSnackbar()
+ const [hidePasswordProps] = useHidePasswordInInput()
+
+ const setYppModalOpenName = useYppStore((state) => state.actions.setYppModalOpenName)
+
+ const shouldContinueYppFlowAfterLogin = useYppStore((store) => store.shouldContinueYppFlowAfterLogin)
+
+ const {
+ register,
+ handleSubmit: _handleSubmit,
+ setError,
+ formState: { errors },
+ } = useForm<{ email: string; password: string }>({
+ resolver: zodResolver(
+ z.object({
+ email: z.string().min(3, { message: 'Enter email address.' }).email({ message: 'Enter valid email address.' }),
+ password: z.string().min(1, 'Enter password.'),
+ })
+ ),
+ })
+ const { authModalOpenName, setAuthModalOpenName } = useAuthStore(
+ (state) => ({
+ authModalOpenName: state.authModalOpenName,
+ setAuthModalOpenName: state.actions.setAuthModalOpenName,
+ }),
+ shallow
+ )
+
+ const handleLoginClick = async (email: string, password: string) => {
+ setIsLoading(true)
+ try {
+ setIsLoading(true)
+ await handleLogin({ type: 'internal', email, password })
+ setAuthModalOpenName(undefined)
+ await refetchCurrentUser()
+ if (shouldContinueYppFlowAfterLogin) {
+ setYppModalOpenName('ypp-requirements')
+ }
+ } catch (error) {
+ if (error.message === LogInErrors.ArtifactsNotFound) {
+ displaySnackbar({
+ title: `We can't find ${atlasConfig.general.appName} membership associated with this email`,
+ description: `Make sure that you are using the same email that you used to create your membership on ${atlasConfig.general.appName}.`,
+ iconType: 'error',
+ })
+ setError('email', { type: 'custom', message: 'Incorrect email or password.' })
+ setError('password', { type: 'custom', message: 'Incorrect email or password.' })
+ }
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ const handleSubmit = () =>
+ _handleSubmit((data) => {
+ handleLoginClick(data.email, data.password)
+ })()
+
+ return (
+ setAuthModalOpenName(undefined)}>
+ Close
+
+ )
+ }
+ >
+ {!isLoading ? (
+
+ Use your {atlasConfig.general.appName} account.{' '}
+ setAuthModalOpenName('signUp')}>Create account
+
+ }
+ hasNavigatedBack
+ >
+
+
+ {
+ if (e.key === 'Enter') {
+ handleSubmit()
+ }
+ }}
+ />
+
+
+ {
+ if (e.key === 'Enter') {
+ handleSubmit()
+ }
+ }}
+ />
+
+ setAuthModalOpenName('forgotPassword')}>
+ Forgot password?
+
+
+
+ ) : (
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/LogInModal/index.ts b/packages/atlas/src/components/_auth/LogInModal/index.ts
new file mode 100644
index 0000000000..bd01172f7c
--- /dev/null
+++ b/packages/atlas/src/components/_auth/LogInModal/index.ts
@@ -0,0 +1 @@
+export * from './LogInModal'
diff --git a/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.styles.ts b/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.styles.ts
new file mode 100644
index 0000000000..d4a40ac7cd
--- /dev/null
+++ b/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.styles.ts
@@ -0,0 +1,23 @@
+import styled from '@emotion/styled'
+
+import { Text } from '@/components/Text'
+import { sizes } from '@/styles'
+
+export const PasswordRequirementsWrapper = styled.section`
+ display: grid;
+ gap: ${sizes(2)};
+`
+
+export const PasswordRequirementsList = styled.ul`
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+ display: grid;
+ gap: ${sizes(2)};
+`
+
+export const PasswordRequirementItem = styled(Text)`
+ display: flex;
+ align-items: center;
+ gap: ${sizes(2)};
+`
diff --git a/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.tsx b/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.tsx
new file mode 100644
index 0000000000..12032d2a7e
--- /dev/null
+++ b/packages/atlas/src/components/_auth/PasswordCriterias/PasswordCriterias.tsx
@@ -0,0 +1,126 @@
+import { get } from 'lodash-es'
+import { FC, useEffect, useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+
+import { SvgActionCheck, SvgActionClose, SvgActionMinus } from '@/assets/icons'
+import { IconWrapper } from '@/components/IconWrapper'
+import { Text } from '@/components/Text'
+import { cVar } from '@/styles'
+
+import {
+ PasswordRequirementItem,
+ PasswordRequirementsList,
+ PasswordRequirementsWrapper,
+} from './PasswordCriterias.styles'
+
+type ValidationState = 'pending' | 'success' | 'error'
+
+type PasswordRequirementsErrors = {
+ length: ValidationState
+ upperCase: ValidationState
+ number: ValidationState
+ specialCharacter: ValidationState
+}
+
+const getValidationState = (isError: boolean) => {
+ if (isError) {
+ return 'error'
+ } else {
+ return 'success'
+ }
+}
+
+const PASSWORD_REQUIREMENTS_ERRORS_INITIAL_STATE: PasswordRequirementsErrors = {
+ length: 'pending',
+ upperCase: 'pending',
+ number: 'pending',
+ specialCharacter: 'pending',
+}
+
+type PasswordCriteriaProps = {
+ validationState: ValidationState
+ text: string
+}
+
+const getIconWrapperProps = (state: ValidationState) => {
+ switch (state) {
+ case 'pending':
+ return {
+ backgroundColor: undefined,
+ icon: = ({ text, validationState }) => {
+ const iconWrapperProps = getIconWrapperProps(validationState)
+ return (
+
+
+ )
+}
+
+type PasswordCriteriasProps = {
+ path?: string
+}
+
+export const PasswordCriterias: FC = ({ path = 'password' }) => {
+ const context = useFormContext()
+ const [passwordRequirementsErrors, setPasswordRequirementsErrors] = useState(
+ PASSWORD_REQUIREMENTS_ERRORS_INITIAL_STATE
+ )
+
+ if (!context) {
+ throw new Error('PasswordCriterias can be used only within FormProvider with password as field')
+ }
+ const { watch } = context
+
+ useEffect(() => {
+ const subscription = watch((fields) => {
+ const password = get(fields, path)
+ if (!password) {
+ setPasswordRequirementsErrors(PASSWORD_REQUIREMENTS_ERRORS_INITIAL_STATE)
+ return
+ }
+
+ setPasswordRequirementsErrors(() => ({
+ length: getValidationState(password.length <= 9 || password.length >= 64),
+ number: getValidationState(/^[^0-9]*$/.test(password)),
+ upperCase: getValidationState(/^[^A-Z]*$/.test(password)),
+ specialCharacter: getValidationState(/^[^!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]*$/.test(password)),
+ }))
+ })
+ return () => subscription.unsubscribe()
+ }, [path, watch])
+
+ return (
+
+
+ Password must:
+
+
+
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/PasswordCriterias/index.ts b/packages/atlas/src/components/_auth/PasswordCriterias/index.ts
new file mode 100644
index 0000000000..daa7739eee
--- /dev/null
+++ b/packages/atlas/src/components/_auth/PasswordCriterias/index.ts
@@ -0,0 +1 @@
+export * from './PasswordCriterias'
diff --git a/packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.styles.ts b/packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.styles.ts
new file mode 100644
index 0000000000..6019937a06
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.styles.ts
@@ -0,0 +1,34 @@
+import styled from '@emotion/styled'
+
+import { Text } from '@/components/Text'
+import { cVar, sizes } from '@/styles'
+
+export const UnclickableWrapper = styled.div`
+ cursor: pointer;
+
+ > * {
+ pointer-events: none;
+ }
+`
+
+export const Wrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: ${sizes(4)};
+ background-color: ${cVar('colorBackgroundStrong')};
+ padding: ${sizes(4)};
+ border-radius: ${cVar('radiusMedium')};
+`
+
+export const TextContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: ${sizes(2)};
+`
+
+export const Title = styled(Text)`
+ white-space: nowrap;
+`
+export const Description = styled(Text)`
+ white-space: nowrap;
+`
diff --git a/packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.tsx b/packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.tsx
new file mode 100644
index 0000000000..103c02b117
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.tsx
@@ -0,0 +1,69 @@
+import { ReactElement, ReactNode, useRef } from 'react'
+
+import { SvgActionMember } from '@/assets/icons'
+import {
+ Description,
+ TextContainer,
+ Title,
+ UnclickableWrapper,
+ Wrapper,
+} from '@/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.styles'
+import { Button } from '@/components/_buttons/Button'
+import { Popover, PopoverImperativeHandle } from '@/components/_overlays/Popover'
+import { getCorrectLoginModal } from '@/providers/auth/auth.helpers'
+import { useAuthStore } from '@/providers/auth/auth.store'
+import { useUser } from '@/providers/user/user.hooks'
+
+type ProtectedActionWrapperProps = {
+ title: string
+ description: string
+ children: ReactNode | ReactNode[]
+ className?: string
+}
+
+export const ProtectedActionWrapper = ({
+ children,
+ title,
+ description,
+ className,
+}: ProtectedActionWrapperProps): ReactElement => {
+ const { isLoggedIn } = useUser()
+ const popperRef = useRef()
+ const {
+ actions: { setAuthModalOpenName },
+ } = useAuthStore()
+
+ if (!isLoggedIn) {
+ return (
+ {children}}
+ >
+
+
+
+ {title}
+
+
+ {description}
+
+
+ }
+ onClick={() => {
+ setAuthModalOpenName(getCorrectLoginModal())
+ popperRef.current?.hide()
+ }}
+ variant="primary"
+ >
+ Sign in
+
+
+
+ )
+ }
+
+ return <>{children}
+}
diff --git a/packages/atlas/src/components/_auth/ProtectedActionWrapper/index.ts b/packages/atlas/src/components/_auth/ProtectedActionWrapper/index.ts
new file mode 100644
index 0000000000..c31c4f71ed
--- /dev/null
+++ b/packages/atlas/src/components/_auth/ProtectedActionWrapper/index.ts
@@ -0,0 +1 @@
+export * from './ProtectedActionWrapper'
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInModal.tsx b/packages/atlas/src/components/_auth/SignInModal/SignInModal.tsx
deleted file mode 100644
index fda3c5dd94..0000000000
--- a/packages/atlas/src/components/_auth/SignInModal/SignInModal.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-import axios from 'axios'
-import { BN } from 'bn.js'
-import { FC, useCallback, useEffect, useRef, useState } from 'react'
-import { useMutation } from 'react-query'
-import shallow from 'zustand/shallow'
-
-import { Button } from '@/components/_buttons/Button'
-import { DialogButtonProps } from '@/components/_overlays/Dialog'
-import { atlasConfig } from '@/config'
-import { FAUCET_URL } from '@/config/env'
-import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
-import { MemberId } from '@/joystream-lib/types'
-import { hapiBnToTokenNumber } from '@/joystream-lib/utils'
-import { useJoystream } from '@/providers/joystream/joystream.hooks'
-import { useSnackbar } from '@/providers/snackbars'
-import { useTransactionManagerStore } from '@/providers/transactions/transactions.store'
-import { useUser } from '@/providers/user/user.hooks'
-import { useUserStore } from '@/providers/user/user.store'
-import { isAxiosError } from '@/utils/error'
-import { uploadAvatarImage } from '@/utils/image'
-import { ConsoleLogger, SentryLogger } from '@/utils/logs'
-import { formatNumber } from '@/utils/number'
-
-import { StyledDialogModal } from './SignInModal.styles'
-import { MemberFormData, SIGN_IN_MODAL_STEPS } from './SignInModal.types'
-import {
- SignInModalAccountStep,
- SignInModalCreatingStep,
- SignInModalMembershipStep,
- SignInModalTermsStep,
- SignInModalWalletStep,
- SignInStepProps,
-} from './SignInSteps'
-
-type FaucetParams = {
- account: string
- handle: string
- avatar: string | undefined
- captchaToken: string | undefined
-}
-
-export const SignInModal: FC = () => {
- const [currentStepIdx, setCurrentStepIdx] = useState(null)
- const currentStep = currentStepIdx != null ? SIGN_IN_MODAL_STEPS[currentStepIdx] : null
- const [cachedStepsIdx, setCachedStepIdx] = useState(0) // keep cached step so that we can keep showing content when modal is in exit transition
- const [primaryButtonProps, setPrimaryButtonProps] = useState({ text: 'Select wallet' }) // start with sensible default so that there are no jumps after first effect runs
- const [selectedAddress, setSelectedAddress] = useState(null)
- const [hasNavigatedBack, setHasNavigatedBack] = useState(false)
- const { joystream } = useJoystream()
- const dialogContentRef = useRef(null)
- const [previouslyFailedData, setPreviouslyFailedData] = useState(null)
- const { mutateAsync: faucetMutation } = useMutation('faucet-post', (body: FaucetParams) =>
- axios.post(FAUCET_URL, body)
- )
- const { mutateAsync: avatarMutation } = useMutation('avatar-post', (croppedBlob: Blob) =>
- uploadAvatarImage(croppedBlob)
- )
-
- const { displaySnackbar } = useSnackbar()
- const { identifyUser } = useSegmentAnalytics()
- const { walletStatus, refetchUserMemberships, setActiveUser, isLoggedIn } = useUser()
- const { signInModalOpen, setSignInModalOpen } = useUserStore(
- (state) => ({ signInModalOpen: state.signInModalOpen, setSignInModalOpen: state.actions.setSignInModalOpen }),
- shallow
- )
- const addBlockAction = useTransactionManagerStore((state) => state.actions.addBlockAction)
-
- const walletConnected = walletStatus === 'connected'
-
- // handle opening/closing of modal and setting initial step
- useEffect(() => {
- if (!signInModalOpen) {
- setCurrentStepIdx(null)
- return
- }
- if (currentStep != null) return
-
- if (walletConnected) {
- setCurrentStepIdx(1)
- return
- }
- setCurrentStepIdx(0)
- }, [signInModalOpen, currentStep, walletConnected])
-
- // keep cachedStepIdx updated
- useEffect(() => {
- if (currentStepIdx != null) {
- setCachedStepIdx(currentStepIdx)
- }
- }, [currentStepIdx])
-
- const goToNextStep = useCallback(() => {
- setCurrentStepIdx((previousIdx) => (previousIdx ?? -1) + 1)
- setHasNavigatedBack(false)
- }, [])
- const goToPreviousStep = useCallback((data?: MemberFormData) => {
- if (data !== undefined) {
- setPreviouslyFailedData(data)
- }
- setCurrentStepIdx((previousIdx) => (previousIdx ?? 1) - 1)
- setHasNavigatedBack(true)
- }, [])
-
- const createNewMember = useCallback(
- async (address: string, data: MemberFormData) => {
- let fileUrl
-
- if (data.avatar?.blob) {
- fileUrl = await avatarMutation(data.avatar.blob)
- }
-
- const body: FaucetParams = {
- account: address,
- handle: data.handle,
- avatar: fileUrl,
- captchaToken: data.captchaToken,
- }
- const response = await faucetMutation(body)
-
- return response.data
- },
- [avatarMutation, faucetMutation]
- )
-
- const handleSubmit = useCallback(
- async (data: MemberFormData) => {
- if (!selectedAddress) return
-
- goToNextStep() // createMember will be called in member step, go to creating
-
- try {
- const callback = async () => {
- const { data } = await refetchUserMemberships()
- const lastCreatedMembership = data.memberships[data.memberships.length - 1]
- if (lastCreatedMembership) {
- setActiveUser({ accountId: selectedAddress, memberId: lastCreatedMembership.id, channelId: null })
- identifyUser(lastCreatedMembership.id)
- displaySnackbar({
- title: 'Your membership has been created',
- description: 'Browse, watch, create, collect videos across the platform and have fun!',
- iconType: 'success',
- })
- setSignInModalOpen(false)
- }
- if (!joystream) {
- ConsoleLogger.error('No joystream instance')
- return
- }
- const { lockedBalance } = await joystream.getAccountBalance(selectedAddress)
- const amountOfTokens = `${formatNumber(hapiBnToTokenNumber(new BN(lockedBalance)))} ${
- atlasConfig.joystream.tokenTicker
- }`
- displaySnackbar({
- title: `You received ${amountOfTokens}`,
- description: `Enjoy your ${amountOfTokens} tokens to help you cover transaction fees. These tokens are non-transferable and can't be spent on NFTs or other purchases.`,
- iconType: 'token',
- })
- }
- const { block } = await createNewMember(selectedAddress, data)
- addBlockAction({ targetBlock: block, callback })
- setPreviouslyFailedData(null)
- } catch (error) {
- if (error.name === 'UploadAvatarServiceError') {
- displaySnackbar({
- title: 'Something went wrong',
- description: 'Avatar could not be uploaded. Try again later',
- iconType: 'error',
- })
- goToPreviousStep(data)
- SentryLogger.error('Failed to upload member avatar', 'SignInModal', error)
- return
- }
-
- const errorCode = isAxiosError(error) ? error.response?.data?.error : null
-
- SentryLogger.error('Failed to create a membership', 'SignInModal', error, { error: { errorCode } })
-
- switch (errorCode) {
- case 'TooManyRequestsPerIp':
- displaySnackbar({
- title: 'You reached a membership limit',
- description:
- 'Your membership could not be created as you already created one recently from the same IP address. Try again in 2 days.',
- iconType: 'error',
- })
- break
- case 'TooManyRequests':
- displaySnackbar({
- title: 'Our system is overloaded',
- description:
- 'Your membership could not be created as our system is undergoing a heavy traffic. Please, try again in a little while.',
- iconType: 'error',
- })
- break
- case 'OnlyNewAccountsCanBeUsedForScreenedMembers':
- displaySnackbar({
- title: 'This account is not new',
- description:
- 'Your membership could not be created as the selected wallet account has either made some transactions in the past or has some funds already on it. Please, try again using a fresh wallet account. ',
- iconType: 'error',
- })
- break
-
- default:
- displaySnackbar({
- title: 'Something went wrong',
- description: `There was a problem with creating your membership. Please try again later.${
- errorCode ? ` Error code: ${errorCode}` : ''
- }`,
- iconType: 'error',
- })
- break
- }
-
- goToPreviousStep(data)
- return
- }
- },
- [
- addBlockAction,
- createNewMember,
- displaySnackbar,
- goToNextStep,
- goToPreviousStep,
- identifyUser,
- joystream,
- refetchUserMemberships,
- selectedAddress,
- setActiveUser,
- setSignInModalOpen,
- ]
- )
-
- const displayedStep = currentStep || SIGN_IN_MODAL_STEPS[cachedStepsIdx]
-
- // scroll the dialog content to top whenever the displayed step changes
- useEffect(() => {
- if (!dialogContentRef.current) return
-
- dialogContentRef.current.scrollTo({ top: 0 })
- }, [displayedStep])
-
- const renderStep = () => {
- const commonProps: SignInStepProps = {
- setPrimaryButtonProps,
- goToNextStep,
- hasNavigatedBack,
- }
-
- switch (displayedStep) {
- case 'wallet':
- return goToPreviousStep() } : undefined}
- additionalActionsNode={
- currentStep !== 'creating' ? (
-
- ) : null
- }
- additionalActionsNodeMobilePosition="bottom"
- contentRef={dialogContentRef}
- >
- {renderStep()}
-
- )
-}
-
-type NewMemberResponse = {
- memberId: MemberId
- block: number
-}
-
-type FaucetErrorType = 'TooManyRequestsPerIp' | 'TooManyRequests' | 'OnlyNewAccountsCanBeUsedForScreenedMembers'
-
-type NewMemberErrorResponse = {
- error?: FaucetErrorType
-}
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInModal.types.ts b/packages/atlas/src/components/_auth/SignInModal/SignInModal.types.ts
deleted file mode 100644
index d1206a620a..0000000000
--- a/packages/atlas/src/components/_auth/SignInModal/SignInModal.types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ImageInputFile } from '@/components/_inputs/MultiFileSelect'
-
-export const SIGN_IN_MODAL_STEPS = ['wallet', 'account', 'terms', 'membership', 'creating'] as const
-
-export type MemberFormData = {
- handle: string
- avatar?: ImageInputFile
- captchaToken?: string
-}
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalAccountStep.tsx b/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalAccountStep.tsx
deleted file mode 100644
index 33f43d7fe5..0000000000
--- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalAccountStep.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { FC, useCallback, useEffect, useState } from 'react'
-
-import { Banner } from '@/components/Banner'
-import { PolkadotIdenticon } from '@/components/PolkadotIdenticon'
-import { Loader } from '@/components/_loaders/Loader'
-import { useMediaMatch } from '@/hooks/useMediaMatch'
-import { useUser } from '@/providers/user/user.hooks'
-import { useUserStore } from '@/providers/user/user.store'
-import { shortenString } from '@/utils/misc'
-
-import { SignInModalStepTemplate } from './SignInModalStepTemplate'
-import { ListItemsWrapper, StyledListItem } from './SignInSteps.styles'
-import { SignInStepProps } from './SignInSteps.types'
-
-type SignInModalAccountStepProps = SignInStepProps & {
- selectedAddress: string | null
- setSelectedAddress: (acc: string) => void
-}
-
-export const SignInModalAccountStep: FC = ({
- selectedAddress,
- setSelectedAddress,
- setPrimaryButtonProps,
- goToNextStep,
- hasNavigatedBack,
-}) => {
- const smMatch = useMediaMatch('sm')
-
- const [localSelectedAddress, setLocalSelectedAddress] = useState(selectedAddress)
- const { walletAccounts, memberships } = useUser()
- const wallet = useUserStore((state) => state.wallet)
-
- const membershipsControllerAccounts = memberships?.map((a) => a.controllerAccount)
- const accountsWithNoMembership = walletAccounts.filter((el) => !membershipsControllerAccounts?.includes(el.address))
-
- const handleConfirm = useCallback(() => {
- if (!localSelectedAddress) return
-
- setSelectedAddress(localSelectedAddress)
- goToNextStep()
- }, [goToNextStep, localSelectedAddress, setSelectedAddress])
-
- // select first account when there's nothing selected
- useEffect(() => {
- if (localSelectedAddress || !accountsWithNoMembership.length) return
-
- setLocalSelectedAddress(accountsWithNoMembership[0].address)
- }, [accountsWithNoMembership, localSelectedAddress])
-
- // send updates to SignInModal on state of primary button
- useEffect(() => {
- setPrimaryButtonProps({
- text: 'Select account',
- disabled: !localSelectedAddress,
- onClick: handleConfirm,
- })
- }, [handleConfirm, localSelectedAddress, setPrimaryButtonProps])
-
- return (
-
- {accountsWithNoMembership.length !== 0 ? (
-
- {accountsWithNoMembership.map((account) => (
-
- ) : (
-
- )
-}
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalStepTemplate/index.ts b/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalStepTemplate/index.ts
deleted file mode 100644
index bb813f0a96..0000000000
--- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalStepTemplate/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SignInModalStepTemplate'
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalTermsStep.tsx b/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalTermsStep.tsx
deleted file mode 100644
index 591194af4d..0000000000
--- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalTermsStep.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { FC, useEffect } from 'react'
-
-import { TermsOfService } from '@/components/TermsOfService'
-
-import { SignInModalStepTemplate } from './SignInModalStepTemplate'
-import { SignInStepProps } from './SignInSteps.types'
-
-export const SignInModalTermsStep: FC = ({
- setPrimaryButtonProps,
- goToNextStep,
- hasNavigatedBack,
-}) => {
- // send updates to SignInModal on state of primary button
- useEffect(() => {
- setPrimaryButtonProps({
- text: 'Accept terms',
- onClick: goToNextStep,
- })
- }, [goToNextStep, setPrimaryButtonProps])
-
- return (
-
-
- )
-}
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/index.ts b/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/index.ts
deleted file mode 100644
index 066b412511..0000000000
--- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalWalletStep/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SignInModalWalletStep'
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/index.ts b/packages/atlas/src/components/_auth/SignInModal/SignInSteps/index.ts
deleted file mode 100644
index 69ea69e381..0000000000
--- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './SignInModalWalletStep/SignInModalWalletStep'
-export * from './SignInModalAccountStep'
-export * from './SignInModalTermsStep'
-export * from './SignInModalMembershipStep'
-export * from './SignInModalCreatingStep'
-export type { SignInStepProps } from './SignInSteps.types'
diff --git a/packages/atlas/src/components/_auth/SignInModal/index.ts b/packages/atlas/src/components/_auth/SignInModal/index.ts
deleted file mode 100644
index 2d9dbe0f61..0000000000
--- a/packages/atlas/src/components/_auth/SignInModal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SignInModal'
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx b/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx
new file mode 100644
index 0000000000..25364e4ecf
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx
@@ -0,0 +1,401 @@
+import styled from '@emotion/styled'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useOverflowDetector } from 'react-detectable-overflow'
+import shallow from 'zustand/shallow'
+
+import { Button } from '@/components/_buttons/Button'
+import { DialogButtonProps } from '@/components/_overlays/Dialog'
+import { DialogModal } from '@/components/_overlays/DialogModal'
+import { AccountFormData, MemberFormData, RegisterError, useCreateMember } from '@/hooks/useCreateMember'
+import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
+import { useUniqueMemberHandle } from '@/hooks/useUniqueMemberHandle'
+import { useAuthStore } from '@/providers/auth/auth.store'
+import { useYppStore } from '@/providers/ypp/ypp.store'
+import { media } from '@/styles'
+import { createId } from '@/utils/createId'
+import { imageUrlToBlob } from '@/utils/image'
+
+import { SignUpSteps } from './SignUpModal.types'
+import {
+ SignUpCreatingMemberStep,
+ SignUpEmailStep,
+ SignUpMembershipStep,
+ SignUpPasswordStep,
+ SignUpSeedStep,
+ SignUpSuccessStep,
+} from './SignUpSteps'
+import { SignUpStepsCommonProps } from './SignUpSteps/SignUpSteps.types'
+
+const SIGNUP_FORM_DATA_INITIAL_STATE: AccountFormData & MemberFormData = {
+ email: '',
+ password: '',
+ mnemonic: '',
+ handle: '',
+ avatar: undefined,
+ captchaToken: undefined,
+ confirmedTerms: false,
+ confirmedCopy: false,
+ memberId: '',
+}
+
+const stepToPageName: Partial> = {
+ [SignUpSteps.CreateMember]: 'Sign up modal - create member',
+ [SignUpSteps.SignUpSeed]: 'Signup modal - seed',
+ [SignUpSteps.SignUpPassword]: 'Signup modal - password',
+ [SignUpSteps.SignUpEmail]: 'Signup modal - email',
+ [SignUpSteps.Creating]: 'Signup modal - creating',
+ [SignUpSteps.Success]: 'Signup modal - success',
+}
+
+export const SignUpModal = () => {
+ const [currentStep, setCurrentStep] = useState(0)
+ const [emailAlreadyTakenError, setEmailAlreadyTakenError] = useState(false)
+ const [hasNavigatedBack, setHasNavigatedBack] = useState(false)
+ const [primaryButtonProps, setPrimaryButtonProps] = useState({ text: 'Continue' })
+ const [amountOfTokens, setAmountofTokens] = useState()
+ const [memberId, setMemberId] = useState(null)
+ const syncState = useRef<'synced' | 'tried' | null>(null)
+ const ytResponseData = useYppStore((state) => state.ytResponseData)
+ const setYppModalOpenName = useYppStore((state) => state.actions.setYppModalOpenName)
+ const setYtResponseData = useYppStore((state) => state.actions.setYtResponseData)
+
+ const { generateUniqueMemberHandleBasedOnInput } = useUniqueMemberHandle()
+
+ const { authModalOpenName, setAuthModalOpenName } = useAuthStore(
+ (state) => ({
+ authModalOpenName: state.authModalOpenName,
+ setAuthModalOpenName: state.actions.setAuthModalOpenName,
+ }),
+ shallow
+ )
+ const { ref, overflow } = useOverflowDetector({})
+
+ const [signUpFormData, setSignupFormData] =
+ useState>(SIGNUP_FORM_DATA_INITIAL_STATE)
+ const { createNewMember, createNewOrionAccount } = useCreateMember()
+ const { trackPageView, trackMembershipCreation } = useSegmentAnalytics()
+
+ const goToNextStep = useCallback(() => {
+ setCurrentStep((previousIdx) => (previousIdx ?? -1) + 1)
+ setHasNavigatedBack(false)
+ }, [])
+
+ const isYppFlow = ytResponseData !== null
+
+ // skip the membership step when signing to ypp(ypp flow will provide handle and avatar for membership automatically)
+ useEffect(() => {
+ if (isYppFlow) {
+ setCurrentStep(SignUpSteps.SignUpSeed)
+ }
+ }, [isYppFlow])
+
+ const goToPreviousStep = useCallback(() => {
+ setCurrentStep((previousIdx) => (previousIdx ?? 1) - 1)
+ setHasNavigatedBack(true)
+ }, [])
+
+ const goToStep = useCallback(
+ (step: SignUpSteps) => {
+ if (currentStep && currentStep < step) {
+ setHasNavigatedBack(true)
+ }
+ setCurrentStep(step)
+ },
+ [currentStep]
+ )
+
+ const handleEmailStepSubmit = useCallback(
+ (email: string, confirmedTerms: boolean) => {
+ setSignupFormData((userForm) => ({ ...userForm, email, confirmedTerms }))
+ if (memberId && emailAlreadyTakenError) {
+ createNewOrionAccount({
+ data: { ...signUpFormData, email, memberId },
+ onError: (error) => {
+ if (error === RegisterError.EmailAlreadyExists) {
+ setEmailAlreadyTakenError(true)
+ goToStep(SignUpSteps.SignUpEmail)
+ return
+ }
+ goToStep(SignUpSteps.CreateMember)
+ },
+ onStart: () => goToStep(SignUpSteps.Creating),
+ onSuccess: ({ amountOfTokens }) => {
+ // if this is ypp flow, overwrite ytResponseData.email
+ if (ytResponseData) {
+ setYtResponseData({ ...ytResponseData, email })
+ setAuthModalOpenName(undefined)
+ setYppModalOpenName('ypp-sync-options')
+ } else {
+ setAmountofTokens(amountOfTokens)
+ goToNextStep()
+ }
+ },
+ })
+ return
+ }
+
+ goToNextStep()
+ },
+ [
+ createNewOrionAccount,
+ emailAlreadyTakenError,
+ goToNextStep,
+ goToStep,
+ memberId,
+ setAuthModalOpenName,
+ setYppModalOpenName,
+ setYtResponseData,
+ signUpFormData,
+ ytResponseData,
+ ]
+ )
+
+ const handlePasswordStepSubmit = useCallback(
+ async (password: string) => {
+ setSignupFormData((userForm) => ({ ...userForm, password }))
+ if (memberId && syncState.current === 'synced') {
+ createNewOrionAccount({
+ data: { ...signUpFormData, password, memberId },
+ onError: (error) => {
+ if (error === RegisterError.EmailAlreadyExists) {
+ setEmailAlreadyTakenError(true)
+ goToStep(SignUpSteps.SignUpEmail)
+ return
+ }
+ goToStep(SignUpSteps.CreateMember)
+ },
+ onStart: () => goToStep(SignUpSteps.Creating),
+ onSuccess: ({ amountOfTokens }) => {
+ // if this is ypp flow, overwrite ytResponseData.email
+ if (ytResponseData) {
+ setYtResponseData({ ...ytResponseData, email: signUpFormData.email })
+ setAuthModalOpenName(undefined)
+ setYppModalOpenName('ypp-sync-options')
+ } else {
+ setAmountofTokens(amountOfTokens)
+ goToNextStep()
+ }
+ },
+ })
+ return
+ }
+ syncState.current = 'tried'
+ goToNextStep()
+ },
+ [
+ createNewOrionAccount,
+ goToNextStep,
+ goToStep,
+ memberId,
+ setAuthModalOpenName,
+ setYppModalOpenName,
+ setYtResponseData,
+ signUpFormData,
+ syncState,
+ ytResponseData,
+ ]
+ )
+
+ const handleCreateMemberOnSeedStepSubmit = useCallback(
+ async (mnemonic: string, confirmedCopy: boolean) => {
+ let handle = signUpFormData.handle
+ let blob = signUpFormData.avatar?.blob
+
+ if (ytResponseData) {
+ // replace handle and avatar if they are provided via ypp flow
+ blob = ytResponseData.avatarUrl ? await imageUrlToBlob(ytResponseData.avatarUrl) : null
+ handle = ytResponseData.channelHandle
+ ? await generateUniqueMemberHandleBasedOnInput(ytResponseData.channelHandle)
+ : `user${createId()}`
+ }
+
+ const memberData = {
+ mnemonic,
+ handle,
+ confirmedCopy,
+ avatar: blob ? { blob } : undefined,
+ }
+
+ setSignupFormData((userForm) => ({
+ ...userForm,
+ ...memberData,
+ }))
+
+ // don't create another member if user already created a member and click back on the password step
+ if (memberId) {
+ goToNextStep()
+ return
+ }
+ goToNextStep()
+ const newMemberId = await createNewMember(
+ {
+ data: { ...signUpFormData, ...memberData },
+ onError: () => {
+ goToStep(SignUpSteps.CreateMember)
+ },
+ },
+ () => {
+ if (syncState.current === 'tried') {
+ syncState.current = 'synced'
+ handlePasswordStepSubmit(signUpFormData.password)
+ }
+ syncState.current = 'synced'
+ }
+ )
+ // in case of block sync logic failure assume member is synced after 10s
+ setTimeout(() => {
+ if (syncState.current === 'tried') {
+ syncState.current = 'synced'
+ handlePasswordStepSubmit(signUpFormData.password)
+ }
+ }, 10_000)
+
+ if (newMemberId) {
+ setMemberId(newMemberId)
+ }
+ },
+ [
+ signUpFormData,
+ ytResponseData,
+ memberId,
+ goToNextStep,
+ createNewMember,
+ generateUniqueMemberHandleBasedOnInput,
+ goToStep,
+ syncState,
+ handlePasswordStepSubmit,
+ ]
+ )
+
+ const handleMemberStepSubmit = useCallback(
+ (data: MemberFormData) => {
+ goToNextStep()
+ setSignupFormData((userForm) => ({ ...userForm, handle: data.handle, avatar: data.avatar }))
+ },
+ [goToNextStep]
+ )
+
+ const commonProps: SignUpStepsCommonProps = useMemo(
+ () => ({
+ setPrimaryButtonProps,
+ goToNextStep,
+ hasNavigatedBack,
+ }),
+ [goToNextStep, hasNavigatedBack]
+ )
+ const backButtonVisible = useMemo(() => {
+ if (currentStep === SignUpSteps.SignUpSeed && ytResponseData) {
+ return undefined
+ }
+
+ if (currentStep === SignUpSteps.CreateMember) {
+ return { text: 'Back', onClick: () => setAuthModalOpenName('logIn') }
+ }
+
+ if (
+ currentStep === SignUpSteps.SignUpEmail ||
+ currentStep === SignUpSteps.SignUpPassword ||
+ currentStep === SignUpSteps.SignUpSeed
+ ) {
+ return { text: 'Back', onClick: () => goToPreviousStep() }
+ }
+ }, [currentStep, goToPreviousStep, setAuthModalOpenName, ytResponseData])
+
+ const cancelButtonVisible = currentStep !== SignUpSteps.Success && currentStep !== SignUpSteps.Creating
+ const isSuccess = currentStep === SignUpSteps.Success
+
+ useEffect(() => {
+ if (isSuccess) {
+ trackMembershipCreation(signUpFormData.handle, signUpFormData.email)
+ }
+ }, [isSuccess, signUpFormData.email, signUpFormData.handle, trackMembershipCreation])
+
+ useEffect(() => {
+ authModalOpenName === 'signUp' && trackPageView(stepToPageName[currentStep] ?? '', { isYppFlow })
+ }, [authModalOpenName, currentStep, isYppFlow, trackPageView])
+
+ const smMatch = useMediaMatch('sm')
+ return (
+ {
+ setSignupFormData(SIGNUP_FORM_DATA_INITIAL_STATE)
+ setAuthModalOpenName(undefined)
+ },
+ }
+ : primaryButtonProps
+ }
+ secondaryButton={backButtonVisible}
+ confetti={currentStep === SignUpSteps.Success && smMatch}
+ additionalActionsNode={
+ cancelButtonVisible ? (
+
+ ) : undefined
+ }
+ additionalActionsNodeMobilePosition="bottom"
+ contentRef={ref}
+ >
+ {currentStep === SignUpSteps.CreateMember && (
+
+ )
+}
+
+const StyledDialogModal = styled(DialogModal)`
+ max-height: calc(100vh - 80px);
+ ${media.sm} {
+ max-height: 576px;
+ }
+`
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.types.ts b/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.types.ts
new file mode 100644
index 0000000000..e2de7dc59b
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.types.ts
@@ -0,0 +1,8 @@
+export enum SignUpSteps {
+ CreateMember,
+ SignUpSeed,
+ SignUpEmail,
+ SignUpPassword,
+ Creating,
+ Success,
+}
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalCreatingStep.tsx b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpCreatingMemberStep.tsx
similarity index 63%
rename from packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalCreatingStep.tsx
rename to packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpCreatingMemberStep.tsx
index 69d66e6454..30a454bfd1 100644
--- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalCreatingStep.tsx
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpCreatingMemberStep.tsx
@@ -1,9 +1,10 @@
import { FC, useEffect } from 'react'
-import { SignInModalStepTemplate } from './SignInModalStepTemplate'
-import { SignInStepProps } from './SignInSteps.types'
+import { SignUpStepsCommonProps } from './SignUpSteps.types'
-export const SignInModalCreatingStep: FC = ({ setPrimaryButtonProps, hasNavigatedBack }) => {
+import { AuthenticationModalStepTemplate } from '../../AuthenticationModalStepTemplate'
+
+export const SignUpCreatingMemberStep: FC = ({ setPrimaryButtonProps, hasNavigatedBack }) => {
// send updates to SignInModal on state of primary button
useEffect(() => {
setPrimaryButtonProps({
@@ -13,7 +14,7 @@ export const SignInModalCreatingStep: FC = ({ setPrimaryButtonP
}, [setPrimaryButtonProps])
return (
- value, { message: 'Agree to Terms and Conditions to continue.' }),
+ })
+ .refine(
+ (data) => {
+ return data.email === data.confirmEmail
+ },
+ {
+ path: ['confirmEmail'],
+ message: 'Email address has to match.',
+ }
+ )
+
+type EmailStepForm = z.infer
+
+type SignUpEmailStepProps = {
+ onEmailSubmit: (email: string, confirmedTerms: boolean) => void
+ isEmailAlreadyTakenError?: boolean
+ isOverflowing: boolean
+} & SignUpStepsCommonProps &
+ Pick
+
+export const SignUpEmailStep: FC = ({
+ setPrimaryButtonProps,
+ hasNavigatedBack,
+ isEmailAlreadyTakenError,
+ isOverflowing,
+ onEmailSubmit,
+ confirmedTerms,
+ email,
+}) => {
+ const {
+ register,
+ handleSubmit,
+ control,
+ setError,
+ formState: { errors },
+ } = useForm({
+ criteriaMode: 'all',
+ mode: 'onBlur',
+ resolver: zodResolver(zodSchema),
+ shouldFocusError: true,
+ defaultValues: {
+ confirmedTerms: confirmedTerms || false,
+ confirmEmail: email,
+ email: email,
+ },
+ })
+
+ const handleGoToNextStep = useCallback(() => {
+ handleSubmit((data) => {
+ onEmailSubmit(data.email, data.confirmedTerms)
+ })()
+ }, [handleSubmit, onEmailSubmit])
+
+ useEffect(() => {
+ setPrimaryButtonProps({
+ text: 'Continue',
+ onClick: handleGoToNextStep,
+ })
+ }, [handleGoToNextStep, isEmailAlreadyTakenError, setPrimaryButtonProps])
+
+ useMountEffect(() => {
+ if (isEmailAlreadyTakenError) {
+ setError('email', { message: 'This email is already in use.' })
+ }
+ })
+
+ return (
+
+
+
+
+
+
+
+
+ (
+
+ onChange(val)}
+ value={value}
+ caption={errors.confirmedTerms?.message}
+ label={
+ <>
+ I have read and agree to{' '}
+
+ Terms and conditions
+
+
+ }
+ />
+
+ )}
+ />
+
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpMembershipStep/SignUpMembershipStep.styles.ts b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpMembershipStep/SignUpMembershipStep.styles.ts
new file mode 100644
index 0000000000..810aac6550
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpMembershipStep/SignUpMembershipStep.styles.ts
@@ -0,0 +1,33 @@
+import styled from '@emotion/styled'
+
+import { Avatar } from '@/components/Avatar'
+import { DialogModal } from '@/components/_overlays/DialogModal'
+import { media, sizes } from '@/styles'
+
+export const StyledDialogModal = styled(DialogModal)`
+ max-height: calc(100vh - 80px);
+ ${media.sm} {
+ max-height: 576px;
+ }
+`
+
+export const StyledAvatar = styled(Avatar)`
+ position: absolute;
+ transform: translateY(-50%);
+ top: 0;
+`
+
+export const StyledForm = styled.form`
+ position: relative;
+ padding-top: ${sizes(17)};
+ display: grid;
+ gap: ${sizes(6)};
+ margin-bottom: ${sizes(6)};
+`
+
+export const SubtitleContainer = styled.div`
+ display: inline-block;
+ text-decoration: none;
+ margin-top: ${sizes(2)};
+ margin-bottom: ${sizes(11)};
+`
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalMembershipStep.tsx b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpMembershipStep/SignUpMembershipStep.tsx
similarity index 76%
rename from packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalMembershipStep.tsx
rename to packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpMembershipStep/SignUpMembershipStep.tsx
index 72447a9f39..a12e204231 100644
--- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInModalMembershipStep.tsx
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpMembershipStep/SignUpMembershipStep.tsx
@@ -1,39 +1,36 @@
-import { useApolloClient } from '@apollo/client'
import HCaptcha from '@hcaptcha/react-hcaptcha'
import debouncePromise from 'awesome-debounce-promise'
import { FC, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Controller, useForm } from 'react-hook-form'
+import shallow from 'zustand/shallow'
-import {
- GetMembershipsDocument,
- GetMembershipsQuery,
- GetMembershipsQueryVariables,
-} from '@/api/queries/__generated__/memberships.generated'
-import { Text } from '@/components/Text'
+import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
+import { TextButton } from '@/components/_buttons/Button'
import { FormField } from '@/components/_inputs/FormField'
import { Input } from '@/components/_inputs/Input'
import { ImageCropModal, ImageCropModalImperativeHandle } from '@/components/_overlays/ImageCropModal'
import { atlasConfig } from '@/config'
import { MEMBERSHIP_NAME_PATTERN } from '@/config/regex'
+import { MemberFormData } from '@/hooks/useCreateMember'
+import { useUniqueMemberHandle } from '@/hooks/useUniqueMemberHandle'
+import { useAuthStore } from '@/providers/auth/auth.store'
-import { SignInModalStepTemplate } from './SignInModalStepTemplate'
-import { Anchor, StyledAvatar, StyledForm } from './SignInSteps.styles'
-import { SignInStepProps } from './SignInSteps.types'
+import { StyledAvatar, StyledForm, SubtitleContainer } from './SignUpMembershipStep.styles'
-import { MemberFormData } from '../SignInModal.types'
+import { SignUpStepsCommonProps } from '../SignUpSteps.types'
-type SignInModalMembershipStepProps = SignInStepProps & {
+type SignInModalMembershipStepProps = SignUpStepsCommonProps & {
onSubmit: (data: MemberFormData) => void
- previouslyFailedData?: MemberFormData | null
dialogContentRef?: RefObject
-}
+} & Pick
-export const SignInModalMembershipStep: FC = ({
+export const SignUpMembershipStep: FC = ({
setPrimaryButtonProps,
onSubmit,
hasNavigatedBack,
dialogContentRef,
- previouslyFailedData,
+ avatar,
+ handle,
}) => {
const {
register,
@@ -42,30 +39,28 @@ export const SignInModalMembershipStep: FC = ({
watch,
control,
formState: { errors, isSubmitting },
- } = useForm({ reValidateMode: 'onSubmit', defaultValues: previouslyFailedData || undefined })
-
+ } = useForm({
+ reValidateMode: 'onSubmit',
+ defaultValues: {
+ avatar,
+ handle,
+ },
+ })
+ const { setAuthModalOpenName } = useAuthStore(
+ (state) => ({
+ setAuthModalOpenName: state.actions.setAuthModalOpenName,
+ }),
+ shallow
+ )
const handleInputRef = useRef(null)
+ const captchaInputRef = useRef(null)
const avatarDialogRef = useRef(null)
const [isHandleValidating, setIsHandleValidating] = useState(false)
// used to scroll the form to the bottom upon first handle field focus - this is done to let the user see Captcha form field
const hasDoneInitialScroll = useRef(false)
- const client = useApolloClient()
-
- const validateUserHandle = useCallback(
- async (value: string) => {
- const {
- data: { memberships },
- } = await client.query({
- query: GetMembershipsDocument,
- variables: { where: { handle_eq: value } },
- })
-
- return !memberships[0]
- },
- [client]
- )
+ const { checkIfMemberIsAvailable } = useUniqueMemberHandle()
const requestFormSubmit = useCallback(() => {
setIsHandleValidating(false)
@@ -75,7 +70,7 @@ export const SignInModalMembershipStep: FC = ({
// send updates to SignInModal on state of primary button
useEffect(() => {
setPrimaryButtonProps({
- text: isSubmitting ? 'Please wait...' : 'Create membership',
+ text: 'Continue',
disabled: isSubmitting,
onClick: requestFormSubmit,
})
@@ -100,36 +95,35 @@ export const SignInModalMembershipStep: FC = ({
validate: {
valid: (value) => (!value ? true : MEMBERSHIP_NAME_PATTERN.test(value) || 'Enter a valid member handle.'),
unique: async (value) => {
- const valid = await validateUserHandle(value)
+ const valid = await checkIfMemberIsAvailable(value)
return valid || 'This member handle is already in use.'
},
},
required: { value: true, message: 'Member handle is required.' },
minLength: { value: 5, message: 'Member handle must be at least 5 characters long.' },
}),
- [register, trigger, validateUserHandle]
+ [checkIfMemberIsAvailable, register, trigger]
)
useEffect(() => {
if (errors.handle) {
handleInputRef.current?.scrollIntoView({ behavior: 'smooth' })
}
- }, [errors.handle])
+
+ if (errors.captchaToken) {
+ captchaInputRef.current?.scrollIntoView({ behavior: 'smooth' })
+ }
+ }, [errors.captchaToken, errors.handle])
return (
-
- To get the full {atlasConfig.general.appName} experience, you need a free Joystream blockchain membership.
-
-
- Learn about Joystream →
-
-
-
+
+ Already have an account? setAuthModalOpenName('logIn')}>Sign in
+
}
hasNavigatedBack={hasNavigatedBack}
formNode={
@@ -148,7 +142,7 @@ export const SignInModalMembershipStep: FC = ({
!!imageInputFile?.blob
)
}
- assetUrls={imageInputFile?.url ? [imageInputFile.url] : undefined}
+ assetUrls={imageInputFile?.url ? [imageInputFile.url] : []}
editable
/>
= ({
control={control}
name="captchaToken"
render={({ field: { onChange }, fieldState: { error } }) => (
-
+
void
+ password?: string
+ dialogContentRef?: RefObject
+} & SignUpStepsCommonProps &
+ Pick
+
+export const SignUpPasswordStep: FC = ({
+ setPrimaryButtonProps,
+ hasNavigatedBack,
+ password,
+ dialogContentRef,
+ onPasswordSubmit,
+}) => {
+ const form = useForm({
+ shouldFocusError: true,
+ defaultValues: {
+ password,
+ confirmPassword: password,
+ },
+ resolver: zodResolver(passwordAndRepeatPasswordSchema),
+ })
+ const {
+ handleSubmit,
+ register,
+ formState: { errors },
+ } = form
+ const [hidePasswordProps] = useHidePasswordInInput()
+ const [hideConfirmPasswordProps] = useHidePasswordInInput()
+
+ const handleGoToNextStep = useCallback(() => {
+ handleSubmit((data) => {
+ onPasswordSubmit(data.password)
+ })()
+ }, [handleSubmit, onPasswordSubmit])
+
+ useEffect(() => {
+ setPrimaryButtonProps({
+ text: 'Sign up',
+ onClick: handleGoToNextStep,
+ })
+ }, [handleGoToNextStep, setPrimaryButtonProps])
+
+ // used to scroll the form to the bottom upon first handle field focus - this is done to let the user see password requirements
+ const hasDoneInitialScroll = useRef(false)
+
+ return (
+
+
+
+
+ {
+ if (hasDoneInitialScroll.current || !dialogContentRef?.current) return
+ hasDoneInitialScroll.current = true
+ dialogContentRef.current.scrollTo({ top: dialogContentRef.current.scrollHeight, behavior: 'smooth' })
+ }}
+ />
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpPasswordStep/index.ts b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpPasswordStep/index.ts
new file mode 100644
index 0000000000..69a21393fd
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpPasswordStep/index.ts
@@ -0,0 +1 @@
+export * from './SignUpPasswordStep'
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/SignUpSeedStep.tsx b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/SignUpSeedStep.tsx
new file mode 100644
index 0000000000..090acde1e0
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/SignUpSeedStep.tsx
@@ -0,0 +1,116 @@
+import { mnemonicGenerate } from '@polkadot/util-crypto'
+import { FC, useCallback, useEffect, useRef } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+
+import { SvgActionCopy } from '@/assets/icons'
+import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
+import { Checkbox } from '@/components/_inputs/Checkbox'
+import { FormField } from '@/components/_inputs/FormField'
+import { useClipboard } from '@/hooks/useClipboard'
+import { MemberFormData } from '@/hooks/useCreateMember'
+
+import { StyledTextArea, StyledTextButton } from './SignupSeedStep.styles'
+
+import { CheckboxWrapper, StyledSignUpForm } from '../SignUpSteps.styles'
+import { SignUpStepsCommonProps } from '../SignUpSteps.types'
+
+type FormData = Pick
+
+type SignUpSeedStepProps = {
+ onSeedSubmit: (mnemonic: string, confirmedCopy: boolean) => void
+} & SignUpStepsCommonProps &
+ FormData
+
+export const SignUpSeedStep: FC = ({
+ hasNavigatedBack,
+ setPrimaryButtonProps,
+ mnemonic,
+ confirmedCopy,
+ onSeedSubmit,
+}) => {
+ const { copyToClipboard } = useClipboard()
+ const {
+ control,
+ register,
+ handleSubmit,
+ setValue,
+ getValues,
+ formState: { errors },
+ } = useForm({
+ shouldFocusError: true,
+ defaultValues: {
+ confirmedCopy: confirmedCopy,
+ mnemonic,
+ },
+ })
+ const firstRender = useRef(true)
+
+ useEffect(() => {
+ if (firstRender.current && !mnemonic) {
+ setValue('mnemonic', mnemonicGenerate())
+ firstRender.current = false
+ }
+ }, [mnemonic, setValue])
+
+ const handleGoToNextStep = useCallback(() => {
+ handleSubmit((data) => {
+ onSeedSubmit(data.mnemonic, data.confirmedCopy)
+ })()
+ }, [handleSubmit, onSeedSubmit])
+
+ useEffect(() => {
+ setPrimaryButtonProps({
+ text: 'Continue',
+ onClick: () => handleGoToNextStep(),
+ })
+ }, [handleGoToNextStep, setPrimaryButtonProps])
+
+ return (
+
+
+
+
+ {
+ if (!value) {
+ return 'Agree that you saved your wallet seed phrase safely.'
+ } else {
+ return value
+ }
+ },
+ },
+ }}
+ render={({ field: { onChange, value } }) => (
+
+ onChange(val)}
+ caption={errors.confirmedCopy?.message}
+ error={!!errors.confirmedCopy}
+ value={value}
+ label="I have saved my wallet seed phrase safely"
+ />
+
+ )}
+ />
+
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/SignupSeedStep.styles.ts b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/SignupSeedStep.styles.ts
new file mode 100644
index 0000000000..1b222cc268
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/SignupSeedStep.styles.ts
@@ -0,0 +1,19 @@
+import styled from '@emotion/styled'
+
+import { TextButton } from '@/components/_buttons/Button'
+import { TextArea } from '@/components/_inputs/TextArea'
+import { cVar } from '@/styles'
+
+export const StyledTextButton = styled(TextButton)`
+ justify-self: start;
+`
+
+export const StyledTextArea = styled(TextArea)`
+ color: ${cVar('colorTextCaution')};
+ resize: none;
+
+ :disabled {
+ cursor: auto;
+ opacity: 1;
+ }
+`
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/index.ts b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/index.ts
new file mode 100644
index 0000000000..6fa88c026b
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSeedStep/index.ts
@@ -0,0 +1 @@
+export * from './SignUpSeedStep'
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSteps.styles.ts b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSteps.styles.ts
new file mode 100644
index 0000000000..f457f81e4f
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSteps.styles.ts
@@ -0,0 +1,23 @@
+import styled from '@emotion/styled'
+
+import { cVar, sizes } from '@/styles'
+
+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 }>`
+ margin: 0 calc(-1 * var(--local-size-dialog-padding));
+ display: flex;
+ align-items: center;
+ background-color: ${({ isAccepted }) => (isAccepted ? cVar('colorBackground') : cVar('colorBackgroundElevated'))};
+ padding: ${sizes(4)} var(--local-size-dialog-padding);
+`
+
+export const StyledLink = styled.a`
+ color: ${cVar('colorTextPrimary')};
+ text-decoration: underline;
+`
diff --git a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInSteps.types.ts b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSteps.types.ts
similarity index 72%
rename from packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInSteps.types.ts
rename to packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSteps.types.ts
index 9ae3ce679c..0b1ad4a772 100644
--- a/packages/atlas/src/components/_auth/SignInModal/SignInSteps/SignInSteps.types.ts
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSteps.types.ts
@@ -1,7 +1,6 @@
import { DialogButtonProps } from '@/components/_overlays/Dialog'
-export type SignInStepProps = {
+export type SignUpStepsCommonProps = {
setPrimaryButtonProps: (props: DialogButtonProps) => void
- goToNextStep: () => void
hasNavigatedBack: boolean
}
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/SignUpSuccessStep.styles.ts b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/SignUpSuccessStep.styles.ts
new file mode 100644
index 0000000000..0816fd854a
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/SignUpSuccessStep.styles.ts
@@ -0,0 +1,38 @@
+import styled from '@emotion/styled'
+
+import { cVar, media, sizes, zIndex } from '@/styles'
+
+export const IllustrationWrapper = styled.div`
+ margin: calc(var(--local-size-dialog-padding) * -1) calc(var(--local-size-dialog-padding) * -1) ${sizes(6)}
+ calc(var(--local-size-dialog-padding) * -1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ background-color: ${cVar('colorBackgroundMuted')};
+
+ > * {
+ width: 100%;
+ height: 208px;
+
+ ${media.sm} {
+ height: 264px;
+ }
+ }
+`
+
+export const LottieContainer = styled.div`
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ z-index: ${zIndex.nearOverlay};
+ display: flex;
+ justify-content: center;
+`
+
+export const ContentWrapper = styled.div`
+ text-align: center;
+`
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/SignUpSuccessStep.tsx b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/SignUpSuccessStep.tsx
new file mode 100644
index 0000000000..0dd8ce8ab5
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/SignUpSuccessStep.tsx
@@ -0,0 +1,55 @@
+import { FC } from 'react'
+
+import confettiAnimation from '@/assets/animations/confetti.json'
+import { AppKV } from '@/components/AppKV'
+import { Avatar } from '@/components/Avatar'
+import { LottiePlayer } from '@/components/LottiePlayer'
+import { Text } from '@/components/Text'
+import { atlasConfig } from '@/config'
+import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { formatNumber } from '@/utils/number'
+
+import { ContentWrapper, IllustrationWrapper, LottieContainer } from './SignUpSuccessStep.styles'
+
+type SignUpSuccessStepProps = {
+ avatarUrl?: string
+ amountOfTokens?: number
+}
+
+export const SignUpSuccessStep: FC = ({ avatarUrl, amountOfTokens }) => {
+ const smMatch = useMediaMatch('sm')
+ return (
+ <>
+
+
+
+ )}
+
+
+
+ Your membership has been created!
+
+
+ Congratulations! Now you can browse, watch, create, collect videos across the platform and have fun!
+ {amountOfTokens && amountOfTokens > 0 && (
+ <>
+
+
+ Enjoy your {formatNumber(amountOfTokens)} {atlasConfig.joystream.tokenTicker} tokens to help you cover + transaction fees. These tokens are non-transferable and can't be spent on NFTs or other purchases. + + )} +
+
+
+ )
+}
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/index.ts b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/index.ts
new file mode 100644
index 0000000000..3baa0a446d
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/SignUpSuccessStep/index.ts
@@ -0,0 +1 @@
+export * from './SignUpSuccessStep'
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/index.ts b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/index.ts
new file mode 100644
index 0000000000..2e37508160
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/SignUpSteps/index.ts
@@ -0,0 +1,6 @@
+export * from './SignUpEmailStep'
+export * from './SignUpPasswordStep'
+export * from './SignUpSeedStep'
+export * from './SignUpCreatingMemberStep'
+export * from './SignUpMembershipStep'
+export * from './SignUpSuccessStep'
diff --git a/packages/atlas/src/components/_auth/SignUpModal/index.ts b/packages/atlas/src/components/_auth/SignUpModal/index.ts
new file mode 100644
index 0000000000..33e0624e22
--- /dev/null
+++ b/packages/atlas/src/components/_auth/SignUpModal/index.ts
@@ -0,0 +1 @@
+export * from './SignUpModal'
diff --git a/packages/atlas/src/components/_buttons/CopyAddressButton/CopyAddressButton.styles.ts b/packages/atlas/src/components/_buttons/CopyAddressButton/CopyAddressButton.styles.ts
index d34cdf3045..b78fd23915 100644
--- a/packages/atlas/src/components/_buttons/CopyAddressButton/CopyAddressButton.styles.ts
+++ b/packages/atlas/src/components/_buttons/CopyAddressButton/CopyAddressButton.styles.ts
@@ -2,31 +2,29 @@ import styled from '@emotion/styled'
import { SvgActionCheck, SvgActionCopy } from '@/assets/icons'
import { Text } from '@/components/Text'
-import { Tooltip } from '@/components/Tooltip'
import { cVar, sizes } from '@/styles'
-export const StyledTooltip = styled(Tooltip)`
- :hover {
- button {
- color: ${cVar('colorCoreNeutral50')};
- }
-
- path {
- fill: ${cVar('colorCoreNeutral50')};
- }
- }
+export const Container = styled.div`
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ width: fit-content;
`
export const StyledText = styled(Text)`
+ min-width: 0;
+ width: auto;
+ padding: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
border: none;
background: none;
- display: flex;
- align-items: center;
+ max-height: 20px;
cursor: pointer;
transition: ${cVar('animationTransitionFast')};
`
export const StyledSvgActionCopy = styled(SvgActionCopy)`
- margin-left: ${sizes(2)};
+ margin-left: ${sizes(1)};
path {
fill: ${cVar('colorCoreNeutral300')};
diff --git a/packages/atlas/src/components/_buttons/CopyAddressButton/CopyAddressButton.tsx b/packages/atlas/src/components/_buttons/CopyAddressButton/CopyAddressButton.tsx
index 50567f4d14..0bb108e601 100644
--- a/packages/atlas/src/components/_buttons/CopyAddressButton/CopyAddressButton.tsx
+++ b/packages/atlas/src/components/_buttons/CopyAddressButton/CopyAddressButton.tsx
@@ -1,17 +1,19 @@
import { FC, useState } from 'react'
+import { Tooltip } from '@/components/Tooltip'
import { useClipboard } from '@/hooks/useClipboard'
import { shortenString } from '@/utils/misc'
-import { StyledSvgActionCheck, StyledSvgActionCopy, StyledText, StyledTooltip } from './CopyAddressButton.styles'
+import { Container, StyledSvgActionCheck, StyledSvgActionCopy, StyledText } from './CopyAddressButton.styles'
export type CopyAddressButtonProps = {
address: string
className?: string
size?: 'small' | 'big'
+ truncate?: boolean
}
-export const CopyAddressButton: FC = ({ address, className, size = 'big' }) => {
+export const CopyAddressButton: FC = ({ address, className, size = 'big', truncate }) => {
const { copyToClipboard } = useClipboard()
const [copyButtonClicked, setCopyButtonClicked] = useState(false)
@@ -27,21 +29,13 @@ export const CopyAddressButton: FC = ({ address, classNa
}
return (
-
-
- {shortenString(address, 6, 4)}
- {copyButtonClicked ?
+
+ {truncate ? address : shortenString(address, 6, 4)}
-
+
+ {copyButtonClicked ?
+
)
}
diff --git a/packages/atlas/src/components/_channel/ChannelCover/ChannelCover.styles.ts b/packages/atlas/src/components/_channel/ChannelCover/ChannelCover.styles.ts
index ed0a0222a9..1533e63b0b 100644
--- a/packages/atlas/src/components/_channel/ChannelCover/ChannelCover.styles.ts
+++ b/packages/atlas/src/components/_channel/ChannelCover/ChannelCover.styles.ts
@@ -7,15 +7,13 @@ import { Button } from '@/components/_buttons/Button'
import { cVar, media, sizes, transitions, zIndex } from '@/styles'
export const MediaWrapper = styled.div`
- margin: 0 calc(-1 * var(--size-global-horizontal-padding));
- width: calc(100% + calc(2 * var(--size-global-horizontal-padding)));
+ aspect-ratio: 1/0.25;
position: relative;
`
export const Media = styled.div`
width: 100%;
- height: 0;
- padding-top: 25%;
+ height: 100%;
position: relative;
z-index: ${zIndex.background};
background-color: ${cVar('colorCoreNeutral900')};
@@ -33,6 +31,7 @@ export const CoverImage = styled(AssetImage)`
export const CoverWrapper = styled.div`
position: relative;
+ overflow: hidden;
`
export const EditableControls = styled.div`
@@ -51,7 +50,7 @@ export const EditableControls = styled.div`
content: ' ';
inset: 0;
transition: opacity ${transitions.timings.loading} ${transitions.easing};
- opacity: 0;
+ opacity: 0.75;
background-color: ${cVar('colorCoreNeutral500Darken')};
z-index: -1;
}
@@ -107,6 +106,8 @@ export const StyledBackgroundPattern = styled(SvgBgPattern)`
position: absolute;
top: 0;
right: 0;
+ width: auto;
+ height: 100%;
`
export const StyledSvgIllustrativeFileFailed = styled(SvgIllustrativeFileFailed)`
diff --git a/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.styles.ts b/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.styles.ts
index 0588b7c63c..ad73a4fe95 100644
--- a/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.styles.ts
+++ b/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.styles.ts
@@ -2,7 +2,6 @@ import styled from '@emotion/styled'
import { Link } from 'react-router-dom'
import { Avatar, AvatarSize } from '@/components/Avatar'
-import { Button } from '@/components/_buttons/Button'
import { sizes } from '@/styles'
export const Container = styled.div`
@@ -27,7 +26,7 @@ export const TitleWrapper = styled.div<{ followButton?: boolean }>`
align-items: center;
`
-export const FollowButton = styled(Button)`
+export const FollowButtonWrapper = styled.div`
margin-left: auto;
`
diff --git a/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx b/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx
index bba581ff61..fce66de5cb 100644
--- a/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx
+++ b/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx
@@ -5,13 +5,15 @@ import { useBasicChannel } from '@/api/hooks/channel'
import { BasicChannelFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
import { AvatarSize } from '@/components/Avatar'
import { Text, TextVariant } from '@/components/Text'
+import { ProtectedActionWrapper } from '@/components/_auth/ProtectedActionWrapper'
+import { Button } from '@/components/_buttons/Button'
import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
import { absoluteRoutes } from '@/config/routes'
import { useHandleFollowChannel } from '@/hooks/useHandleFollowChannel'
import { transitions } from '@/styles'
import { SentryLogger } from '@/utils/logs'
-import { Container, FollowButton, StyledAvatar, StyledLink, TitleWrapper } from './ChannelLink.styles'
+import { Container, FollowButtonWrapper, StyledAvatar, StyledLink, TitleWrapper } from './ChannelLink.styles'
export type ChannelLinkProps = {
id?: string
@@ -95,9 +97,16 @@ export const ChannelLink: FC = ({
)}
{followButton && (
-
- {isFollowing ? 'Unfollow' : 'Follow'}
-
+
+
+
+
+
)}
) : (
diff --git a/packages/atlas/src/components/_channel/CreateChannelModal/CreateChannelModal.tsx b/packages/atlas/src/components/_channel/CreateChannelModal/CreateChannelModal.tsx
new file mode 100644
index 0000000000..4a8dcb1839
--- /dev/null
+++ b/packages/atlas/src/components/_channel/CreateChannelModal/CreateChannelModal.tsx
@@ -0,0 +1,143 @@
+import styled from '@emotion/styled'
+import { Controller } from 'react-hook-form'
+import { useNavigate } from 'react-router'
+
+import { Avatar } from '@/components/Avatar'
+import { Text } from '@/components/Text'
+import { AuthenticationModalStepTemplate } from '@/components/_auth/AuthenticationModalStepTemplate'
+import { FormField } from '@/components/_inputs/FormField'
+import { Input } from '@/components/_inputs/Input'
+import { DialogModal } from '@/components/_overlays/DialogModal'
+import { ImageCropModal } from '@/components/_overlays/ImageCropModal'
+import { absoluteRoutes } from '@/config/routes'
+import { useChannelForm } from '@/hooks/useChannelForm'
+import { useAuthStore } from '@/providers/auth/auth.store'
+import { useSnackbar } from '@/providers/snackbars'
+import { useUser } from '@/providers/user/user.hooks'
+import { media, sizes } from '@/styles'
+
+export const CreateChannelModal = () => {
+ const { displaySnackbar } = useSnackbar()
+ const {
+ authModalOpenName,
+ actions: { setAuthModalOpenName },
+ } = useAuthStore()
+ const navigate = useNavigate()
+ const { setActiveChannel } = useUser()
+ const { refs, actions, form, hasAvatarUploadFailed } = useChannelForm({ type: 'new' })
+ const {
+ register,
+ control,
+ watch,
+ formState: { errors },
+ } = form
+
+ const { avatarDialogRef } = refs
+ const { handleSubmit, handleAvatarChange, handleDeleteAvatar } = actions
+
+ return (
+
+ handleSubmit((channelId) => {
+ setActiveChannel(channelId)
+ navigate(absoluteRoutes.viewer.channel(channelId))
+ setAuthModalOpenName(undefined)
+ }),
+ }}
+ secondaryButton={{
+ text: 'Cancel',
+ onClick: () => setAuthModalOpenName(undefined),
+ }}
+ show={authModalOpenName === 'createChannel'}
+ noContentPadding
+ additionalActionsNodeMobilePosition="bottom"
+ >
+
+
+ Publish your videos and sell them as NFTs with your own channel.
+
+ }
+ formNode={
+
+ (
+ <>
+ {
+ avatarDialogRef.current?.open(
+ value.originalBlob,
+ value.imageCropData || undefined,
+ !!value.originalBlob
+ )
+ }}
+ editable
+ />
+
+ displaySnackbar({
+ title: 'Cannot load the image. Choose another.',
+ iconType: 'error',
+ })
+ }
+ ref={avatarDialogRef}
+ onDelete={handleDeleteAvatar}
+ />
+
+ )}
+ />
+
+
+
+
+ }
+ />
+
+
+ )
+}
+
+const Description = styled(Text)`
+ margin-bottom: 44px;
+`
+
+const FormContainer = styled.div`
+ position: relative;
+ padding-top: ${sizes(17)};
+ display: grid;
+ gap: ${sizes(6)};
+`
+const StyledAvatar = styled(Avatar)`
+ position: absolute;
+ transform: translateY(-50%);
+ top: 0;
+`
+const PaddingBox = styled.div`
+ padding: ${sizes(4)};
+
+ ${media.sm} {
+ padding: ${sizes(6)};
+ }
+`
diff --git a/packages/atlas/src/components/_channel/CreateChannelModal/index.ts b/packages/atlas/src/components/_channel/CreateChannelModal/index.ts
new file mode 100644
index 0000000000..d4f36b602b
--- /dev/null
+++ b/packages/atlas/src/components/_channel/CreateChannelModal/index.ts
@@ -0,0 +1 @@
+export * from './CreateChannelModal'
diff --git a/packages/atlas/src/components/_comments/Comment/Comment.tsx b/packages/atlas/src/components/_comments/Comment/Comment.tsx
index 916ece2062..6cef356b96 100644
--- a/packages/atlas/src/components/_comments/Comment/Comment.tsx
+++ b/packages/atlas/src/components/_comments/Comment/Comment.tsx
@@ -6,13 +6,12 @@ import { CommentStatus } from '@/api/queries/__generated__/baseTypes.generated'
import { CommentFieldsFragment, FullVideoFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
import { DialogModal } from '@/components/_overlays/DialogModal'
import { QUERY_PARAMS, absoluteRoutes } from '@/config/routes'
-import { useDisplaySignInDialog } from '@/hooks/useDisplaySignInDialog'
import { useReactionTransactions } from '@/hooks/useReactionTransactions'
import { useRouterQuery } from '@/hooks/useRouterQuery'
import { CommentReaction } from '@/joystream-lib/types'
import { getMemberAvatar } from '@/providers/assets/assets.helpers'
import { useConfirmationModal } from '@/providers/confirmationModal'
-import { useFee } from '@/providers/joystream/joystream.hooks'
+import { useFee } from '@/providers/joystream'
import { usePersonalDataStore } from '@/providers/personalData'
import { useUser } from '@/providers/user/user.hooks'
@@ -58,7 +57,7 @@ export const Comment: FC = memo(
const [isEditingComment, setIsEditingComment] = useState(false)
const [processingReactionsIds, setProcessingReactionsIds] = useState([])
- const { memberId, activeMembership, isLoggedIn, signIn } = useUser()
+ const { memberId, activeMembership, isLoggedIn } = useUser()
const { comment } = useComment(
{ commentId: commentId ?? '' },
{
@@ -69,7 +68,6 @@ export const Comment: FC = memo(
const commentIdQueryParam = useRouterQuery(QUERY_PARAMS.COMMENT_ID)
const reactionPopoverDismissed = usePersonalDataStore((state) => state.reactionPopoverDismissed)
- const { openSignInDialog } = useDisplaySignInDialog()
const [reactionFee, setReactionFee] = useState(undefined)
const [replyCommentInputActive, setCommentInputActive] = useState(false)
const [openModal, closeModal] = useConfirmationModal()
@@ -172,16 +170,12 @@ export const Comment: FC = memo(
}
}
const handleCommentReaction = async (commentId: string, reactionId: CommentReaction) => {
- if (isLoggedIn) {
- setProcessingReactionsIds((previous) => [...previous, reactionId])
- const fee =
- reactionFee ||
- (await getReactToVideoCommentFee(memberId && comment?.id ? [memberId, comment.id, reactionId] : undefined))
- await reactToComment(commentId, video?.id || '', reactionId, comment?.author.handle || '', fee)
- setProcessingReactionsIds((previous) => previous.filter((r) => r !== reactionId))
- } else {
- openSignInDialog({ onConfirm: signIn })
- }
+ setProcessingReactionsIds((previous) => [...previous, reactionId])
+ const fee =
+ reactionFee ||
+ (await getReactToVideoCommentFee(memberId && comment?.id ? [memberId, comment.id, reactionId] : undefined))
+ await reactToComment(commentId, video?.id || '', reactionId, comment?.author.handle || '', fee)
+ setProcessingReactionsIds((previous) => previous.filter((r) => r !== reactionId))
}
const handleOnBoardingPopoverOpen = async (reactionId: number) => {
@@ -212,10 +206,6 @@ export const Comment: FC = memo(
}
const handleReplyClick = () => {
- if (!isLoggedIn) {
- handleOpenSignInDialog()
- return
- }
if (replyInputOpen) {
replyCommentInputRef.current?.focus()
}
@@ -229,10 +219,6 @@ export const Comment: FC = memo(
}
}
- const handleOpenSignInDialog = () => {
- !memberId && openSignInDialog({ onConfirm: signIn })
- }
-
const handleOnEditLabelClick = () => {
setShowEditHistory?.(true)
comment && setOriginalComment?.(comment)
@@ -284,7 +270,6 @@ export const Comment: FC = memo(
isMemberAvatarLoading={isMemberAvatarLoading}
value={editCommentInputText}
hasInitialValueChanged={comment?.text !== editCommentInputText}
- onFocus={handleOpenSignInDialog}
onComment={handleUpdateComment}
onChange={(e) => setEditCommentInputText(e.target.value)}
onCancel={() =>
@@ -339,7 +324,6 @@ export const Comment: FC = memo(
processing={replyCommentInputIsProcessing}
readOnly={!memberId}
memberHandle={activeMembership?.handle}
- onFocus={handleOpenSignInDialog}
onComment={handleComment}
hasInitialValueChanged={!!replyCommentInputText}
value={replyCommentInputText}
diff --git a/packages/atlas/src/components/_comments/Comment/InternalComment.tsx b/packages/atlas/src/components/_comments/Comment/InternalComment.tsx
index ad8e3bb2af..ba4ca96b71 100644
--- a/packages/atlas/src/components/_comments/Comment/InternalComment.tsx
+++ b/packages/atlas/src/components/_comments/Comment/InternalComment.tsx
@@ -8,6 +8,7 @@ import { SvgActionChevronB, SvgActionChevronT, SvgActionEdit, SvgActionMore, Svg
import { AvatarGroupUrlAvatar } from '@/components/Avatar/AvatarGroup'
import { Text } from '@/components/Text'
import { Tooltip } from '@/components/Tooltip'
+import { ProtectedActionWrapper } from '@/components/_auth/ProtectedActionWrapper'
import { TextButton } from '@/components/_buttons/Button'
import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
import { ContextMenu } from '@/components/_overlays/ContextMenu'
@@ -265,50 +266,62 @@ export const InternalComment: FC = ({
trigger={
{hasReactionsAndCommentIsNotDeleted && (
-
- {sortedReactions?.map(({ reactionId, active, count, state }) => (
-
+
+
+ {sortedReactions?.map(({ reactionId, active, count, state }) => (
+
+
)}
+
- {!!repliesCount && filteredDuplicatedAvatars.length ? (
-
- Reply
-
- )}
+
+ {!!repliesCount && filteredDuplicatedAvatars.length ? (
+
+ Reply
+
+ )}
+
}
diff --git a/packages/atlas/src/components/_comments/CommentInput/CommentInput.tsx b/packages/atlas/src/components/_comments/CommentInput/CommentInput.tsx
index 67c1dc2d63..328580f20a 100644
--- a/packages/atlas/src/components/_comments/CommentInput/CommentInput.tsx
+++ b/packages/atlas/src/components/_comments/CommentInput/CommentInput.tsx
@@ -5,6 +5,7 @@ import useResizeObserver from 'use-resize-observer'
import { Fee } from '@/components/Fee'
import { Text } from '@/components/Text'
+import { ProtectedActionWrapper } from '@/components/_auth/ProtectedActionWrapper'
import { Button } from '@/components/_buttons/Button'
import { useHasEnoughBalance } from '@/hooks/useHasEnoughBalance'
import { useSnackbar } from '@/providers/snackbars'
@@ -116,81 +117,86 @@ export const CommentInput = forwardRef(
const show = !!value || active || !!processing
const canComment = !!value && hasInitialValueChanged
return (
-
- {
- onFocus?.()
- !readOnly && setActive(true)
- }}
- data-show={show}
- height={textAreaHeight}
- onKeyDown={(e) => {
- // handle submit by keyboard shortcut
- if (canComment && (e.nativeEvent.ctrlKey || e.nativeEvent.metaKey) && e.nativeEvent.code === 'Enter') {
- validateLengthAndProcess()
- }
- if (e.nativeEvent.code === 'Escape') {
- textAreaRef.current?.blur()
- }
- }}
- >
-
- !readOnly && onChange?.(e)}
- disabled={processing}
- data-processing={processing}
- />
-
- Leave a public {reply ? 'reply' : 'comment'} as
- {memberHandle ? (
-
- {' '}
- {memberHandle}
-
- ) : (
- '...'
- )}
-
-
-
-
-
-
- {onCancel && (
-
+
+
+
)
}
)
diff --git a/packages/atlas/src/components/_inputs/Checkbox/Checkbox.tsx b/packages/atlas/src/components/_inputs/Checkbox/Checkbox.tsx
index c071528e24..92548478dd 100644
--- a/packages/atlas/src/components/_inputs/Checkbox/Checkbox.tsx
+++ b/packages/atlas/src/components/_inputs/Checkbox/Checkbox.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, DetailedHTMLProps, InputHTMLAttributes, forwardRef } from 'react'
+import { ChangeEvent, DetailedHTMLProps, InputHTMLAttributes, ReactNode, forwardRef } from 'react'
import { SvgActionMinus } from '@/assets/icons'
@@ -15,7 +15,7 @@ export interface CheckboxProps extends Omit) => void
- label?: string
+ label?: ReactNode
caption?: string
}
diff --git a/packages/atlas/src/components/_inputs/Input/Input.styles.ts b/packages/atlas/src/components/_inputs/Input/Input.styles.ts
index 2e79380db6..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`
@@ -27,6 +28,13 @@ export const TextInput = styled.input`
margin: 0;
}
+ :-webkit-autofill,
+ :-webkit-autofill:hover,
+ :-webkit-autofill:focus {
+ -webkit-text-fill-color: ${cVar('colorTextStrong')};
+ transition: background-color 9999s ease-in-out 0s;
+ }
+
&[type='number'],
&[type='search'] {
appearance: textfield;
@@ -76,7 +84,7 @@ export const NodeContainer = styled.div`
${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'))};
@@ -85,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 4f7c009ba6..5b4e6b5df6 100644
--- a/packages/atlas/src/components/_inputs/Input/Input.tsx
+++ b/packages/atlas/src/components/_inputs/Input/Input.tsx
@@ -35,9 +35,10 @@ export type InputProps = {
className?: string
placeholder?: string
defaultValue?: string
- autoComplete?: 'off'
+ autoComplete?: 'off' | 'new-password'
error?: boolean
disabled?: boolean
+ disabledAttributeOnly?: boolean
size?: InputSize
processing?: boolean
nodeStart?: ReactNode
@@ -59,6 +60,7 @@ const InputComponent: ForwardRefRenderFunction = (
onClick,
error,
disabled,
+ disabledAttributeOnly,
placeholder,
defaultValue,
nodeStart,
@@ -123,7 +125,7 @@ const InputComponent: ForwardRefRenderFunction = (
}
return (
-
+
= (
name={name}
value={value}
disabled={disabled}
+ disabledAttributeOnly={disabledAttributeOnly}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
@@ -147,19 +150,30 @@ const InputComponent: ForwardRefRenderFunction = (
/>
{nodeStart && (
- inputRef.current?.focus()} ref={nodeLeftRef} left disabled={disabled}>
+ inputRef.current?.focus()}
+ ref={nodeLeftRef}
+ left
+ disabled={disabled && !disabledAttributeOnly}
+ >
{renderedNodeStart}
)}
{(nodeEnd || actionButton || processing) && (
-
+
{processing &&
diff --git a/packages/atlas/src/components/_inputs/MultiFileSelect/MultiFileSelect.tsx b/packages/atlas/src/components/_inputs/MultiFileSelect/MultiFileSelect.tsx
index 34e4cd6e40..e4d36660f1 100644
--- a/packages/atlas/src/components/_inputs/MultiFileSelect/MultiFileSelect.tsx
+++ b/packages/atlas/src/components/_inputs/MultiFileSelect/MultiFileSelect.tsx
@@ -6,6 +6,7 @@ import useResizeObserver from 'use-resize-observer'
import { SvgActionChevronR } from '@/assets/icons'
import { Step } from '@/components/Step'
import { ImageCropModal, ImageCropModalImperativeHandle } from '@/components/_overlays/ImageCropModal'
+import { ImageInputMetadata, MediaInputMetadata } from '@/providers/videoWorkspace'
import { AssetDimensions, ImageCropData } from '@/types/cropper'
import { FileType } from '@/types/files'
import { validateImage } from '@/utils/image'
@@ -22,21 +23,8 @@ type InputFile = {
title?: string
}
-export type MediaInputMetadata = {
- duration?: number | null
- mediaPixelWidth?: number
- mediaPixelHeight?: number
- mimeType?: string
- size?: number
-}
-
export type VideoInputFile = MediaInputMetadata & InputFile
-export type ImageInputMetadata = {
- imageCropData?: ImageCropData
- assetDimensions?: AssetDimensions
-}
-
export type ImageInputFile = {
originalBlob?: Blob | File | null
} & ImageInputMetadata &
diff --git a/packages/atlas/src/components/_inputs/PriceRangeInput/PriceRangeInput.tsx b/packages/atlas/src/components/_inputs/PriceRangeInput/PriceRangeInput.tsx
index 5d870f6a6e..b201517f36 100644
--- a/packages/atlas/src/components/_inputs/PriceRangeInput/PriceRangeInput.tsx
+++ b/packages/atlas/src/components/_inputs/PriceRangeInput/PriceRangeInput.tsx
@@ -25,7 +25,7 @@ export const PriceRangeInput = forwardRef(
nodeStart={
({
+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/_navigation/PrivateRoute/PrivateRoute.tsx b/packages/atlas/src/components/_navigation/PrivateRoute/PrivateRoute.tsx
index 07544e923c..899c490d7a 100644
--- a/packages/atlas/src/components/_navigation/PrivateRoute/PrivateRoute.tsx
+++ b/packages/atlas/src/components/_navigation/PrivateRoute/PrivateRoute.tsx
@@ -22,7 +22,7 @@ export const PrivateRoute: FC = ({ redirectTo, isAuth, elemen
}
if (!isAuth && redirectTo) {
- return = ({
className,
}) => {
const scrollContainer = createRef()
+ const setAdminModalOpen = useMiscStore((store) => store.actions.setAdminModalOpen)
+
const scrollAndToggle = (expended: boolean) => {
scrollContainer?.current && scrollContainer.current.scrollTo(0, 0)
toggleSideNav(expended)
@@ -140,6 +144,10 @@ const SidenavBase: FC = ({
+
+ •
+
+ setAdminModalOpen(true)}>Admin Panel
= ({ hideChannelInfo, isMembershipLoaded }) => {
- const { channelId, activeMembership, signIn, isAuthLoading } = useUser()
+ const { channelId, activeMembership } = useUser()
const mdMatch = useMediaMatch('md')
const hasAtLeastOneChannel = !!activeMembership?.channels.length && activeMembership?.channels.length >= 1
-
+ const {
+ actions: { setAuthModalOpenName },
+ } = useAuthStore()
const { isWorkspaceOpen, setIsWorkspaceOpen, uploadVideoButtonProps } = useVideoWorkspace()
- const currentChannel = activeMembership?.channels.find((channel) => channel.id === channelId)
-
- const channelAvatarUrls = currentChannel?.avatarPhoto?.resolvedUrls
-
- const { urls: memberAvatarUrls, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(activeMembership)
+ const { urls: memberAvatarUrls } = getMemberAvatar(activeMembership)
const [isMemberDropdownActive, setIsMemberDropdownActive] = useState(false)
@@ -50,17 +49,6 @@ export const TopbarStudio: FC = ({ hideChannelInfo, isMembers
setIsWorkspaceOpen(false)
}
- const avatars: AvatarGroupUrlAvatar[] = channelId
- ? [
- {
- urls: memberAvatarUrls,
- loading: memberAvatarLoading,
- onClick: handleDrawerToggle,
- },
- { urls: channelAvatarUrls, loading: isAuthLoading, onClick: handleDrawerToggle },
- ]
- : [{ urls: memberAvatarUrls, loading: memberAvatarLoading, onClick: handleDrawerToggle }]
-
return (
<>
= ({ hideChannelInfo, isMembers
diff --git a/packages/atlas/src/components/_navigation/TopbarViewer/TopbarViewer.tsx b/packages/atlas/src/components/_navigation/TopbarViewer/TopbarViewer.tsx
index 485fb87408..1cc3ac26e2 100644
--- a/packages/atlas/src/components/_navigation/TopbarViewer/TopbarViewer.tsx
+++ b/packages/atlas/src/components/_navigation/TopbarViewer/TopbarViewer.tsx
@@ -1,6 +1,7 @@
import { ChangeEvent, FC, MouseEvent, useCallback, useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { CSSTransition, SwitchTransition } from 'react-transition-group'
+import shallow from 'zustand/shallow'
import { SvgActionMember } from '@/assets/icons'
import { AppLogo } from '@/components/AppLogo'
@@ -10,9 +11,11 @@ import { NotificationsButton } from '@/components/_navigation/NotificationsButto
import { NotificationsWidget } from '@/components/_notifications/NotificationsWidget'
import { MemberDropdown } from '@/components/_overlays/MemberDropdown'
import { QUERY_PARAMS, absoluteRoutes } from '@/config/routes'
-import { useDisplaySignInDialog } from '@/hooks/useDisplaySignInDialog'
import { useMediaMatch } from '@/hooks/useMediaMatch'
import { getMemberAvatar } from '@/providers/assets/assets.helpers'
+import { getCorrectLoginModal } from '@/providers/auth/auth.helpers'
+import { useAuth } from '@/providers/auth/auth.hooks'
+import { useAuthStore } from '@/providers/auth/auth.store'
import { useOverlayManager } from '@/providers/overlayManager'
import { useSearchStore } from '@/providers/search'
import { useUser } from '@/providers/user/user.hooks'
@@ -30,7 +33,8 @@ import {
} from './TopbarViewer.styles'
export const TopbarViewer: FC = () => {
- const { isLoggedIn, activeMembership, signIn, isAuthLoading } = useUser()
+ const { activeMembership, isLoggedIn, membershipsLoading } = useUser()
+ const { isAuthenticating } = useAuth()
const [isMemberDropdownActive, setIsMemberDropdownActive] = useState(false)
const { urls: memberAvatarUrls, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(activeMembership)
@@ -43,7 +47,13 @@ export const TopbarViewer: FC = () => {
searchQuery,
actions: { setSearchOpen, setSearchQuery },
} = useSearchStore()
- const { openSignInDialog } = useDisplaySignInDialog()
+ const { setAuthModalOpenName } = useAuthStore(
+ (state) => ({
+ authModalOpenName: state.authModalOpenName,
+ setAuthModalOpenName: state.actions.setAuthModalOpenName,
+ }),
+ shallow
+ )
useEffect(() => {
if (searchOpen) {
@@ -86,7 +96,7 @@ export const TopbarViewer: FC = () => {
setIsMemberDropdownActive(!isMemberDropdownActive)
}
- const topbarButtonLoaded = !isAuthLoading
+ const topbarButtonLoading = isAuthenticating || membershipsLoading
return (
<>
@@ -113,13 +123,13 @@ export const TopbarViewer: FC = () => {
{(!searchQuery || mdMatch) && (
- {topbarButtonLoaded ? (
+ {!topbarButtonLoading ? (
isLoggedIn ? (
)}
- {!searchQuery && !mdMatch && !isLoggedIn && topbarButtonLoaded && (
- signIn(undefined, openSignInDialog)}>
- Connect wallet
+ {!searchQuery && !mdMatch && !isLoggedIn && !topbarButtonLoading && (
+ setAuthModalOpenName(getCorrectLoginModal())}>
+ Sign in
)}
diff --git a/packages/atlas/src/components/_nft/NftWidget/NftWidgetContent.tsx b/packages/atlas/src/components/_nft/NftWidget/NftWidgetContent.tsx
index 0452a8f429..c533af5814 100644
--- a/packages/atlas/src/components/_nft/NftWidget/NftWidgetContent.tsx
+++ b/packages/atlas/src/components/_nft/NftWidget/NftWidgetContent.tsx
@@ -10,6 +10,7 @@ import { JoyTokenIcon } from '@/components/JoyTokenIcon'
import { GridItem } from '@/components/LayoutGrid'
import { NumberFormat } from '@/components/NumberFormat'
import { Text } from '@/components/Text'
+import { ProtectedActionWrapper } from '@/components/_auth/ProtectedActionWrapper'
import { Button } from '@/components/_buttons/Button'
import { absoluteRoutes } from '@/config/routes'
import { useMsTimestamp } from '@/hooks/useMsTimestamp'
@@ -402,12 +403,23 @@ export const NftWidgetContent: FC = memo(
(nftStatus.buyNowPrice?.gtn(0) ? (
-
-
+
+
+
+
+
+
+
{/* second row button */}
{nftStatus.canWithdrawBid && (
@@ -429,9 +441,14 @@ export const NftWidgetContent: FC = memo(
-
+
+
+
{nftStatus.canWithdrawBid && (
diff --git a/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.tsx b/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.tsx
index eff26a87df..423dfbb23d 100644
--- a/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.tsx
+++ b/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.tsx
@@ -27,25 +27,29 @@ const getNotificationText = (notification: NotificationRecord): ReactNode => {
case 'bid-made':
return (
<>
- bid on your NFT for {
@@ -141,7 +143,6 @@ const EnvTab: FC = () => {
const determinedNodeFound = AVAILABLE_NODES.find((node) => node.value === determinedNode)
const [usingCustomNodeUrl, setUsingCustomNodeUrl] = useState(!determinedNodeFound)
const [customNodeUrl, setCustomNodeUrl] = useState(determinedNode)
- const resetActiveUser = useUserStore((state) => state.actions.resetActiveUser)
const handleEnvironmentChange = (value?: string | null) => {
if (!value) {
@@ -149,7 +150,6 @@ const EnvTab: FC = () => {
}
setDefaultDataEnv(value)
setNodeOverride(null)
- resetActiveUser()
window.location.reload()
}
@@ -300,74 +300,6 @@ const StateTab: FC = () => {
)
}
-const UserTab: FC = () => {
- const {
- accountId,
- memberId,
- channelId,
- actions: { setActiveUser, resetActiveUser },
- } = useUserStore()
-
- const [accountIdValue, setAccountIdValue] = useState(accountId)
- const [memberIdValue, setMemberIdValue] = useState(memberId)
- const [channelIdValue, setChannelIdValue] = useState(channelId)
-
- useEffect(() => {
- const handler = (state: ActiveUserState) => {
- setAccountIdValue(state.accountId)
- setMemberIdValue(state.memberId)
- setChannelIdValue(state.channelId)
- }
- return useUserStore.subscribe(handler)
- }, [])
-
- const handleAccountIdChange = (e: ChangeEvent) => {
- setAccountIdValue(e.target.value)
- }
-
- const handleMemberIdChange = (e: ChangeEvent) => {
- setMemberIdValue(e.target.value)
- }
-
- const handleChannelIdChange = (e: ChangeEvent) => {
- setChannelIdValue(e.target.value)
- }
-
- const handleSaveClick = () => {
- setActiveUser({
- accountId: accountIdValue,
- memberId: memberIdValue,
- channelId: channelIdValue,
- })
- }
-
- const handleRestClick = () => {
- resetActiveUser()
- }
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
const LocationTab: FC = () => {
const {
coordinates,
diff --git a/packages/atlas/src/components/_overlays/AlertDialogModalWithFee/AlertDialogModalWithFee.tsx b/packages/atlas/src/components/_overlays/AlertDialogModalWithFee/AlertDialogModalWithFee.tsx
index c143b42a86..6dd760ad79 100644
--- a/packages/atlas/src/components/_overlays/AlertDialogModalWithFee/AlertDialogModalWithFee.tsx
+++ b/packages/atlas/src/components/_overlays/AlertDialogModalWithFee/AlertDialogModalWithFee.tsx
@@ -6,7 +6,7 @@ import { AlertDialogModal, AlertDialogModalProps } from '@/components/_overlays/
import { useHasEnoughBalance } from '@/hooks/useHasEnoughBalance'
import { JoystreamLibExtrinsics } from '@/joystream-lib/extrinsics'
import { TxMethodName } from '@/joystream-lib/types'
-import { useFee } from '@/providers/joystream/joystream.hooks'
+import { useFee } from '@/providers/joystream'
type AlertDialogModalWithFeeProps = AlertDialogModalProps & {
fee: {
diff --git a/packages/atlas/src/components/_overlays/ChangePriceDialog/ChangePriceDialog.tsx b/packages/atlas/src/components/_overlays/ChangePriceDialog/ChangePriceDialog.tsx
index 157b772312..85f173e8e9 100644
--- a/packages/atlas/src/components/_overlays/ChangePriceDialog/ChangePriceDialog.tsx
+++ b/packages/atlas/src/components/_overlays/ChangePriceDialog/ChangePriceDialog.tsx
@@ -8,7 +8,7 @@ import { FormField } from '@/components/_inputs/FormField'
import { TokenInput } from '@/components/_inputs/TokenInput'
import { DialogModal } from '@/components/_overlays/DialogModal'
import { tokenNumberToHapiBn } from '@/joystream-lib/utils'
-import { useFee } from '@/providers/joystream/joystream.hooks'
+import { useFee } from '@/providers/joystream'
import { sizes } from '@/styles'
type ChangePriceDialogProps = {
diff --git a/packages/atlas/src/components/_overlays/ClaimChannelPaymentsDialog/ClaimChannelPaymentsDialog.tsx b/packages/atlas/src/components/_overlays/ClaimChannelPaymentsDialog/ClaimChannelPaymentsDialog.tsx
index d86e139eea..cea058da6b 100644
--- a/packages/atlas/src/components/_overlays/ClaimChannelPaymentsDialog/ClaimChannelPaymentsDialog.tsx
+++ b/packages/atlas/src/components/_overlays/ClaimChannelPaymentsDialog/ClaimChannelPaymentsDialog.tsx
@@ -10,7 +10,7 @@ import { BalanceWrapper } from '@/components/_overlays/ClaimChannelPaymentsDialo
import { DialogModal } from '@/components/_overlays/DialogModal'
import { useMediaMatch } from '@/hooks/useMediaMatch'
import { hapiBnToTokenNumber } from '@/joystream-lib/utils'
-import { useFee, useSubscribeAccountBalance } from '@/providers/joystream/joystream.hooks'
+import { useFee, useSubscribeAccountBalance } from '@/providers/joystream'
import { useUser } from '@/providers/user/user.hooks'
import { useChannelPayout } from '@/views/studio/MyPaymentsView/PaymentsOverview/PaymentsOverview.hooks'
diff --git a/packages/atlas/src/components/_overlays/Dialog/Dialog.styles.ts b/packages/atlas/src/components/_overlays/Dialog/Dialog.styles.ts
index 5c66224e77..0881408bfe 100644
--- a/packages/atlas/src/components/_overlays/Dialog/Dialog.styles.ts
+++ b/packages/atlas/src/components/_overlays/Dialog/Dialog.styles.ts
@@ -1,7 +1,7 @@
import { css } from '@emotion/react'
import styled from '@emotion/styled'
-import { cVar, media, sizes } from '@/styles'
+import { cVar, media, sizes, zIndex } from '@/styles'
export type DialogSize = 'default' | 'compact'
@@ -35,6 +35,7 @@ export const DialogContainer = styled.div`
flex-direction: column;
width: 100%;
overflow: hidden;
+ z-index: ${zIndex.modals + 2};
background-color: ${cVar('colorBackgroundStrong')};
border-radius: ${cVar('radiusMedium')};
box-shadow: ${cVar('effectElevation24Layer1')}, ${cVar('effectElevation24Layer2')};
diff --git a/packages/atlas/src/components/_overlays/DialogModal/DialogModal.tsx b/packages/atlas/src/components/_overlays/DialogModal/DialogModal.tsx
index b519896bf7..d526973e1c 100644
--- a/packages/atlas/src/components/_overlays/DialogModal/DialogModal.tsx
+++ b/packages/atlas/src/components/_overlays/DialogModal/DialogModal.tsx
@@ -3,18 +3,31 @@ import { FC } from 'react'
import { Dialog, DialogProps } from '@/components/_overlays/Dialog'
import { Modal, ModalProps } from '@/components/_overlays/Modal'
-export type DialogModalProps = Pick & Omit
+export type DialogModalProps = Pick<
+ ModalProps,
+ 'show' | 'size' | 'onClickOutside' | 'confetti' | 'disableBackdropAnimation'
+> &
+ Omit
export const DialogModal: FC = ({
show,
onExitClick,
onClickOutside,
size,
+ confetti,
children,
+ disableBackdropAnimation,
...dialogProps
}) => {
return (
-
+
diff --git a/packages/atlas/src/components/_overlays/ImageCropModal/ImageCropModal.tsx b/packages/atlas/src/components/_overlays/ImageCropModal/ImageCropModal.tsx
index d670ace297..5021a30452 100644
--- a/packages/atlas/src/components/_overlays/ImageCropModal/ImageCropModal.tsx
+++ b/packages/atlas/src/components/_overlays/ImageCropModal/ImageCropModal.tsx
@@ -16,7 +16,7 @@ import { Button } from '@/components/_buttons/Button'
import { DialogModalProps } from '@/components/_overlays/DialogModal'
import { JoystreamLibExtrinsics } from '@/joystream-lib/extrinsics'
import { TxMethodName } from '@/joystream-lib/types'
-import { useFee } from '@/providers/joystream/joystream.hooks'
+import { useFee } from '@/providers/joystream'
import { AssetDimensions, ImageCropData } from '@/types/cropper'
import { validateImage } from '@/utils/image'
import { SentryLogger } from '@/utils/logs'
diff --git a/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdown.styles.ts b/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdown.styles.ts
index a0625094e7..9e5c4f6a41 100644
--- a/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdown.styles.ts
+++ b/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdown.styles.ts
@@ -7,10 +7,11 @@ import { cVar, media, sizes, zIndex } from '@/styles'
export const Container = styled.div`
position: fixed;
right: ${sizes(4)};
- height: 0;
- top: 0;
+ top: 68px;
width: 280px;
- z-index: ${zIndex.nearTransactionBar};
+ z-index: ${zIndex.header + 1};
+ border-radius: ${cVar('radiusLarge')};
+ overflow: hidden;
${media.md} {
right: ${sizes(8)};
@@ -38,18 +39,11 @@ export const InnerContainer = styled.div<{
containerHeight?: number
disableVerticalScroll: boolean
}>`
- width: 280px;
- position: relative;
max-height: calc(100vh - ${sizes(4)} - var(--size-topbar-height));
height: ${({ containerHeight = 0 }) => containerHeight}px;
- transform: translateY(
- ${({ isActive, containerHeight = 0 }) =>
- isActive ? 'var(--size-topbar-height)' : `calc(-${containerHeight}px + var(--size-topbar-height)) `}
- );
- transition: transform ${cVar('animationTransitionMedium')}, height ${cVar('animationTransitionMedium')};
- will-change: height, transform;
+ transition: height ${cVar('animationTransitionMedium')};
+ will-change: height;
box-shadow: ${cVar('effectElevation24Layer2')}, ${cVar('effectElevation24Layer1')};
- border-radius: 0 0 ${cVar('radiusMedium')} ${cVar('radiusMedium')};
background-color: ${cVar('colorBackgroundStrong')};
overflow-x: hidden;
overflow-y: ${({ disableVerticalScroll }) => (disableVerticalScroll ? 'hidden' : 'auto')};
diff --git a/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdown.tsx b/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdown.tsx
index b2288df12f..957d96b2ef 100644
--- a/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdown.tsx
+++ b/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdown.tsx
@@ -1,17 +1,17 @@
-import bezier from 'bezier-easing'
import { BN } from 'bn.js'
import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { mergeRefs } from 'react-merge-refs'
import { useNavigate } from 'react-router'
-import { useTransition } from 'react-spring'
+import { CSSTransition } from 'react-transition-group'
import useResizeObserver from 'use-resize-observer'
import { absoluteRoutes } from '@/config/routes'
-import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
import { getMemberAvatar } from '@/providers/assets/assets.helpers'
-import { useSubscribeAccountBalance } from '@/providers/joystream/joystream.hooks'
+import { useAuth } from '@/providers/auth/auth.hooks'
+import { useAuthStore } from '@/providers/auth/auth.store'
+import { useSubscribeAccountBalance } from '@/providers/joystream'
import { useUser } from '@/providers/user/user.hooks'
-import { cVar } from '@/styles'
+import { transitions } from '@/styles'
import { Container, InnerContainer, SlideAnimationContainer } from './MemberDropdown.styles'
import { MemberDropdownList } from './MemberDropdownList'
@@ -29,16 +29,17 @@ export type MemberDropdownProps = {
export const MemberDropdown = forwardRef(
({ publisher, isActive, closeDropdown, onChannelChange }, ref) => {
const navigate = useNavigate()
- const { channelId, activeMembership, memberships, signOut, setActiveUser, setSignInModalOpen, membershipsLoading } =
- useUser()
- const { identifyUser } = useSegmentAnalytics()
+ const { channelId, activeMembership, memberships, setActiveChannel } = useUser()
+ const { handleLogout } = useAuth()
+ const {
+ actions: { setAuthModalOpenName },
+ } = useAuthStore()
const [showWithdrawDialog, setShowWithdrawDialog] = useState(false)
- const [disableScrollDuringAnimation, setDisableScrollDuringAnimation] = useState(false)
+ const [disableScrollDuringAnimation, setDisableScrollDuringAnimation] = useState(true)
const [showSendDialog, setShowSendDialog] = useState(false)
const { urls: memberAvatarUrls } = getMemberAvatar(activeMembership)
const selectedChannel = activeMembership?.channels.find((chanel) => chanel.id === channelId)
-
const memoizedChannelStateBloatBond = useMemo(() => {
return new BN(selectedChannel?.channelStateBloatBond || 0)
}, [selectedChannel?.channelStateBloatBond])
@@ -58,51 +59,26 @@ export const MemberDropdown = forwardRef(
})
const containerRef = useRef(null)
- const transition = useTransition(isList, {
- from: { opacity: 0, x: isList ? 280 : -280, position: 'absolute' as const },
- enter: { opacity: 1, x: 0 },
- leave: { opacity: 0, x: isList ? -280 : 280 },
- config: {
- duration: parseInt(cVar('animationTimingMedium', true)),
- // 'animationEasingMedium'
- easing: bezier(0.03, 0.5, 0.25, 1),
- },
- onStart: () => setDisableScrollDuringAnimation(true),
- onRest: () => setDisableScrollDuringAnimation(false),
- })
-
- const handleAddNewMember = useCallback(() => {
- closeDropdown?.()
- setSignInModalOpen(true)
- }, [closeDropdown, setSignInModalOpen])
-
- const handleMemberChange = useCallback(
- (memberId: string, accountId: string, channelId: string | null) => {
- setActiveUser({ accountId, memberId, channelId })
- identifyUser(memberId)
- setIsList(false)
-
- if (publisher) {
- navigate(absoluteRoutes.studio.index())
- }
- },
- [identifyUser, navigate, publisher, setActiveUser]
- )
-
const handleAddNewChannel = useCallback(() => {
- setDropdownType('channel')
- setIsList(false)
+ setAuthModalOpenName('createChannel')
closeDropdown?.()
- }, [closeDropdown])
+ }, [closeDropdown, setAuthModalOpenName])
const handleChannelChange = useCallback(
(channelId: string) => {
- setDropdownType('channel')
- setIsList(false)
- setActiveUser({ channelId })
- onChannelChange?.(channelId)
+ if (dropdownType === 'channel') {
+ setDropdownType('channel')
+ setIsList(false)
+ setActiveChannel(channelId)
+ onChannelChange?.(channelId)
+ }
+
+ if (dropdownType === 'member') {
+ navigate(absoluteRoutes.viewer.channel(channelId))
+ closeDropdown?.()
+ }
},
- [onChannelChange, setActiveUser]
+ [closeDropdown, dropdownType, navigate, onChannelChange, setActiveChannel]
)
const handleSwitch = useCallback((type: 'channel' | 'member', changeToList: boolean) => {
@@ -137,6 +113,7 @@ export const MemberDropdown = forwardRef(
}, [closeDropdown, isActive])
const resetToDefaultState = useCallback(() => {
+ setDisableScrollDuringAnimation(false)
if (isActive) {
return
}
@@ -156,57 +133,71 @@ export const MemberDropdown = forwardRef(
channelId={channelId}
/>
-
- {transition((style, isList) => (
-
- {!isList ? (
-
- ))}
-
-
+
+
+
)
}
diff --git a/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownList.tsx b/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownList.tsx
index d97c802ab8..b1d9799078 100644
--- a/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownList.tsx
+++ b/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownList.tsx
@@ -1,15 +1,10 @@
import { FC, useMemo } from 'react'
-import {
- BasicMembershipFieldsFragment,
- FullMembershipFieldsFragment,
-} from '@/api/queries/__generated__/fragments.generated'
-import { SvgActionChannel, SvgActionChevronL, SvgActionNewChannel } from '@/assets/icons'
+import { FullMembershipFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
+import { SvgActionAddChannel, SvgActionChevronL } from '@/assets/icons'
import { Avatar } from '@/components/Avatar'
import { IconWrapper } from '@/components/IconWrapper'
import { ListItem } from '@/components/ListItem'
-import { absoluteRoutes } from '@/config/routes'
-import { getMemberAvatar } from '@/providers/assets/assets.helpers'
import { SectionContainer } from './MemberDropdown.styles'
import { SwitchMemberItemListContainer } from './MemberDropdownList.styles'
@@ -18,25 +13,19 @@ type DropdownType = 'member' | 'channel'
type MemberDropdownListProps = {
type: DropdownType
- memberships: FullMembershipFieldsFragment[]
activeMembership?: FullMembershipFieldsFragment | null
channelId: string | null
onAddNewChannel?: () => void
onChannelChange?: (channelId: string) => void
onSwitchToNav: (type: DropdownType) => void
- onMemberChange: (memberId: string, accountId: string, channelId: string | null) => void
- onAddNewMember: () => void
}
export const MemberDropdownList: FC = ({
type,
channelId,
- memberships,
activeMembership,
onAddNewChannel,
onSwitchToNav,
onChannelChange,
- onMemberChange,
- onAddNewMember,
}) => {
const sortedMemberChannels = useMemo(() => {
if (!activeMembership) {
@@ -46,65 +35,31 @@ export const MemberDropdownList: FC = ({
}, [activeMembership])
return (
- <>
+
onSwitchToNav(type)}
nodeStart={
- {type === 'member'
- ? memberships?.map((member) => (
- onMemberChange(member.id, member.controllerAccount, member.channels[0]?.id || null)}
- />
- ))
- : sortedMemberChannels.map((channel) => (
- onChannelChange?.(channel.id)}
- nodeStart={ onChannelChange?.(channel.id)}
+ nodeStart={
-
- )
-}
-
-type MemberListItemProps = {
- member: BasicMembershipFieldsFragment
- selected: boolean
- onClick: () => void
-}
-const MemberListItem: FC = ({ member, selected, onClick }) => {
- const { urls, isLoadingAsset } = getMemberAvatar(member)
- return (
-
)
}
diff --git a/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownNav.styles.ts b/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownNav.styles.ts
index 4591f534ba..a1a4a3c1c8 100644
--- a/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownNav.styles.ts
+++ b/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownNav.styles.ts
@@ -1,18 +1,12 @@
-import { css } from '@emotion/react'
import styled from '@emotion/styled'
import { animated } from 'react-spring'
import { Avatar } from '@/components/Avatar'
-import { IconWrapper } from '@/components/IconWrapper'
import { Text } from '@/components/Text'
import { cVar, sizes } from '@/styles'
import { SectionContainer } from './MemberDropdown.styles'
-const paddingStyles = css`
- padding: ${sizes(6)} ${sizes(4)};
-`
-
export const MemberInfoAndBgWrapper = styled.div`
position: relative;
width: 280px;
@@ -61,62 +55,23 @@ export const Filter = styled.div`
export const MemberInfoContainer = styled.div`
position: relative;
- ${paddingStyles}
-
border-bottom: 1px solid ${cVar('colorBorderMutedAlpha')};
+ padding: ${sizes(4)};
`
-export const AvatarsGroupContainer = styled.div`
+export const AvatarContainer = styled.div`
display: grid;
justify-content: start;
grid-template-columns: auto auto;
- gap: ${sizes(4)};
- margin-bottom: ${sizes(6)};
+ gap: ${sizes(2)};
`
-export const StyledAvatar = styled(Avatar)<{ isDisabled: boolean }>`
- width: 40px;
- height: 40px;
- clip-path: path(
- 'm 40 0 h -40 v 40 h 20.5041 c -0.3291 -1.2785 -0.5041 -2.6188 -0.5041 -4 c 0 -8.8366 7.1634 -16 16 -16 c 1.3812 0 2.7215 0.175 4 0.5041 v -20.5041 z'
- );
- opacity: ${({ isDisabled }) => (isDisabled ? 0.25 : 1)};
+export const StyledAvatar = styled(Avatar)`
+ width: 48px;
+ height: 48px;
transition: opacity ${cVar('animationTransitionMedium')};
`
-export const AvatarButton = styled.button`
- position: relative;
- cursor: pointer;
- border: none;
- padding: 0;
- background: none;
-
- :hover {
- ${StyledAvatar} {
- opacity: 1;
- }
- }
-
- :active {
- opacity: 0.75;
- }
-`
-
-export const AddAvatar = styled.div`
- width: 100%;
- height: 100%;
- background-color: ${cVar('colorBackgroundAlpha')};
- display: flex;
- align-items: center;
- justify-content: center;
-`
-
-export const StyledIconWrapper = styled(IconWrapper)`
- position: absolute;
- right: -${sizes(2)};
- bottom: -${sizes(2)};
-`
-
type FixedSizeContainerProps = {
height?: number | string
width?: number | string
@@ -126,11 +81,30 @@ export const FixedSizeContainer = styled.div`
width: ${({ width }) => (width ? (typeof width === 'number' ? `${width}px` : width) : 'unset')};
`
-export const UserBalance = styled.div`
- display: inline-grid;
- grid-auto-flow: column;
- grid-auto-columns: max-content;
+export const AddressContainer = styled.div`
+ display: grid;
+ grid-template-columns: 1fr auto;
align-items: center;
+ border-radius: ${cVar('radiusSmall')};
+ background-color: ${cVar('colorCoreNeutral800Lighten')};
+ padding: ${sizes(2)};
+ overflow: hidden;
+ width: 100%;
+ grid-column: 1/3;
+ margin-top: ${sizes(2)};
+
+ path {
+ fill: ${cVar('colorText')};
+ }
+
+ svg {
+ cursor: pointer;
+ }
+`
+
+export const UserBalance = styled.div`
+ display: flex;
+ align-items: start;
gap: ${sizes(1)};
margin-top: ${sizes(2)};
`
@@ -159,8 +133,6 @@ export const TextLink = styled(Text)`
}
`
-export const AnimatedTextLink = styled(animated(TextLink))``
-
export const BalanceContainer = styled.div`
clear: both;
margin-top: ${sizes(1)};
@@ -180,8 +152,3 @@ export const MemberHandleText = styled(Text)`
word-break: break-word;
display: block;
`
-
-export const ChannelsSectionTitle = styled(Text)`
- padding: ${sizes(2)} ${sizes(4)};
- display: block;
-`
diff --git a/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownNav.tsx b/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownNav.tsx
index 319add2a73..55a5f64295 100644
--- a/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownNav.tsx
+++ b/packages/atlas/src/components/_overlays/MemberDropdown/MemberDropdownNav.tsx
@@ -1,12 +1,10 @@
-import bezier from 'bezier-easing'
import BN from 'bn.js'
import { FC, useRef } from 'react'
-import { useNavigate } from 'react-router'
-import { animated, useTransition } from 'react-spring'
import useResizeObserver from 'use-resize-observer'
import { FullMembershipFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
import {
+ SvgActionAddChannel,
SvgActionAddVideo,
SvgActionChannel,
SvgActionChevronR,
@@ -14,30 +12,24 @@ import {
SvgActionMember,
SvgActionNewTab,
SvgActionPlay,
- SvgActionPlus,
- SvgActionSwitchMember,
+ SvgActionShow,
} from '@/assets/icons'
import { IconWrapper } from '@/components/IconWrapper'
import { JoyTokenIcon } from '@/components/JoyTokenIcon'
import { ListItem, ListItemProps } from '@/components/ListItem'
import { NumberFormat } from '@/components/NumberFormat'
-import { Tooltip } from '@/components/Tooltip'
+import { CopyAddressButton } from '@/components/_buttons/CopyAddressButton/CopyAddressButton'
import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
import { atlasConfig } from '@/config'
import { absoluteRoutes } from '@/config/routes'
import { getMemberAvatar } from '@/providers/assets/assets.helpers'
-import { useUserStore } from '@/providers/user/user.store'
-import { cVar } from '@/styles'
-import { isMobile } from '@/utils/browser'
import { BalanceTooltip } from './BalanceTooltip'
import { SectionContainer } from './MemberDropdown.styles'
import {
- AddAvatar,
+ AddressContainer,
AnimatedSectionContainer,
- AnimatedTextLink,
- AvatarButton,
- AvatarsGroupContainer,
+ AvatarContainer,
BalanceContainer,
BlurredBG,
Divider,
@@ -47,7 +39,6 @@ import {
MemberInfoAndBgWrapper,
MemberInfoContainer,
StyledAvatar,
- StyledIconWrapper,
TextLink,
UserBalance,
} from './MemberDropdownNav.styles'
@@ -59,12 +50,11 @@ type MemberDropdownNavProps = {
publisher?: boolean
containerRefElement: Element | null
onCloseDropdown?: () => void
- onSwitchDropdownType: (type: DropdownType) => void
+ onAddNewChannel?: () => void
onSwitchToList: (type: DropdownType) => void
onSignOut: () => void
onShowFundsDialog: () => void
activeMembership?: FullMembershipFieldsFragment | null
- membershipLoading?: boolean
hasOneMember?: boolean
channelId: string | null
accountBalance?: BN
@@ -78,203 +68,114 @@ export const MemberDropdownNav: FC = ({
publisher,
containerRefElement,
onCloseDropdown,
- onSwitchDropdownType,
onSwitchToList,
onSignOut,
onShowFundsDialog,
channelId,
activeMembership,
- membershipLoading,
- hasOneMember,
accountBalance,
+ onAddNewChannel,
lockedAccountBalance,
channelBalance,
isInDebt,
}) => {
- const navigate = useNavigate()
const selectedChannel = activeMembership?.channels.find((chanel) => chanel.id === channelId)
const { urls: memberAvatarUrls, isLoadingAsset: memberAvatarLoading } = getMemberAvatar(activeMembership)
const channelAvatarUrls = selectedChannel?.avatarPhoto?.resolvedUrls
- const setSignInModalOpen = useUserStore((state) => state.actions.setSignInModalOpen)
- const memberAvatarWrapperRef = useRef(null)
- const channelAvatarWrapperRef = useRef(null)
-
- const { ref: textLinkRef, width: textLinkWidth } = useResizeObserver({
- box: 'border-box',
- })
- const { ref: memberContainerRef, height: memberContainerHeight } = useResizeObserver({
- box: 'border-box',
- })
const { ref: sectionContainerRef, height: sectionContainerHeight } = useResizeObserver({
box: 'border-box',
})
const blockAnimationRef = useRef(null)
- const memberChanneltransition = useTransition(type, {
- from: { opacity: 0, x: type === 'channel' ? 280 : -280, position: 'absolute' as const },
- enter: { opacity: 1, x: 0 },
- leave: { opacity: 0, x: type === 'channel' ? -280 : 280 },
- // this will block initial animation when switching to list
- immediate: !blockAnimationRef.current,
- config: {
- duration: parseInt(cVar('animationTimingMedium', true)),
- // 'animationEasingMedium'
- easing: bezier(0.03, 0.5, 0.25, 1),
- },
- })
-
- const hasAtLeastOneChannel = activeMembership?.channels.length && activeMembership?.channels.length >= 1
- const hasAtleastTwoChannels = activeMembership?.channels.length && activeMembership?.channels.length >= 2
+ const hasAtLeastOneChannel = !!activeMembership?.channels.length && activeMembership?.channels.length >= 1
+ const hasAtleastTwoChannels = !!activeMembership?.channels.length && activeMembership?.channels.length >= 2
- const handleAddNewMember = () => {
- setSignInModalOpen(true)
- onCloseDropdown?.()
+ const dropdownEntity = {
+ title: type === 'member' ? activeMembership?.handle : selectedChannel?.title,
+ avatarUrls: type === 'member' ? memberAvatarUrls : channelAvatarUrls,
+ avatarLoading: type === 'member' ? memberAvatarLoading : false,
+ balance: type === 'member' ? memberAvatarLoading : channelBalance,
}
return (
-
- {!isMobile() && (
- onSwitchDropdownType('member')}
- ref={memberAvatarWrapperRef}
- aria-label="Show member details"
- >
-
- {!isMobile() && (
-
- hasAtLeastOneChannel ? onSwitchDropdownType('channel') : navigate(absoluteRoutes.studio.newChannel())
- }
- ref={channelAvatarWrapperRef}
- aria-label="Show channel details"
- >
-
- {!hasAtLeastOneChannel ? (
-
-
- ) : null}
-
-
-
-
- {memberChanneltransition((style, type) => (
-
- {type === 'channel' ? (
-
+
+
= ({
- {memberChanneltransition((style, item) => (
-
- {item === 'member' ? (
-
- ))}
+
+ {type === 'member' ? (
+
= ({
type ListItemOptionsProps = {
publisher?: boolean
+ hasAtLeastOneChannel?: boolean
closeDropdown?: () => void
- listItems: [ListItemProps, ListItemProps]
+ listItems: [ListItemProps, ListItemProps] | [ListItemProps]
}
-const ListItemOptions: FC = ({ publisher, closeDropdown, listItems }) => {
+const ListItemOptions: FC = ({ publisher, closeDropdown, listItems, hasAtLeastOneChannel }) => {
return (
<>
+ {listItems.map((listItemsProps, idx) => (
+ = ({ publisher, closeDropdown, l
label={atlasConfig.general.appName}
to={absoluteRoutes.viewer.index()}
/>
- ) : (
+ ) : hasAtLeastOneChannel ? (
<>
= ({ publisher, closeDropdown, l
to={absoluteRoutes.studio.index()}
/>
- )}
- {listItems.map((listItemsProps, idx) => (
- = ({ show, onClose }) => {
- const handleDismiss = () => {
- onClose()
- }
-
+export const MintNftFirstTimeModal: FC = ({
+ show,
+ onClose,
+ shouldHideNextTime,
+ onShouldHideNextTime,
+}) => {
return (
+ }
actionDivider
>
- Now that you've minted your first NFT, you can put it on sale by choosing "Start sale" from your video
- options.
+ You can mint your videos and sell them on the market for {atlasConfig.joystream.tokenTicker}. To do that
+ select mint NFT option in context menu of a video.
diff --git a/packages/atlas/src/components/_overlays/MintNftModal/MintNftModal.tsx b/packages/atlas/src/components/_overlays/MintNftModal/MintNftModal.tsx
new file mode 100644
index 0000000000..13dda71bf7
--- /dev/null
+++ b/packages/atlas/src/components/_overlays/MintNftModal/MintNftModal.tsx
@@ -0,0 +1,165 @@
+import styled from '@emotion/styled'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { SvgAlertsInformative24 } from '@/assets/icons'
+import { Banner } from '@/components/Banner'
+import { Text } from '@/components/Text'
+import { FormField } from '@/components/_inputs/FormField'
+import { Input } from '@/components/_inputs/Input'
+import { Switch } from '@/components/_inputs/Switch'
+import { DialogModal } from '@/components/_overlays/DialogModal'
+import { SaleNftFirstTimeModal } from '@/components/_overlays/SaleNftFirstTimeModal'
+import { useVideoForm } from '@/hooks/useVideoForm'
+import { useJoystream } from '@/providers/joystream'
+import { useNftActions } from '@/providers/nftActions/nftActions.hooks'
+import { usePersonalDataStore } from '@/providers/personalData'
+import { VideoWorkspaceVideoFormFields, useVideoWorkspaceData } from '@/providers/videoWorkspace'
+import { sizes } from '@/styles'
+import { useHandleVideoWorkspaceSubmit } from '@/views/studio/VideoWorkspace/VideoWorkspace.hooks'
+
+const SALE_CONFIRMATION_ID = 'first-mint'
+
+export const MintNftModal = () => {
+ const {
+ chainState: { nftMaxCreatorRoyaltyPercentage, nftMinCreatorRoyaltyPercentage },
+ } = useJoystream()
+ const [shouldHideMintModal, setShouldHideMintModal] = useState(false)
+ const [showRoyaltyInput, setShowRoyaltyInput] = useState(false)
+
+ const handleVideoWorkspaceSubmit = useHandleVideoWorkspaceSubmit()
+ const { setNftToMint, nftToMint, openNftPutOnSale } = useNftActions()
+ const { tabData } = useVideoWorkspaceData(nftToMint ?? undefined)
+ const [showSaleConfirmationDialog, setShowSaleConfirmationDialog] = useState(false)
+ const saleConfirmationDismissed = usePersonalDataStore((state) =>
+ state.dismissedMessages.some((message) => message.id === SALE_CONFIRMATION_ID)
+ )
+ const updateMintConfirmationDismiss = usePersonalDataStore((state) => state.actions.updateDismissedMessages)
+
+ const form = useForm({
+ defaultValues: { ...tabData, mintNft: true },
+ })
+
+ const {
+ register,
+ formState: { errors },
+ } = form
+
+ const { submitHandler, formStatus } = useVideoForm({
+ id: nftToMint,
+ isEdit: true,
+ onSubmit: async (data) => {
+ handleVideoWorkspaceSubmit(
+ data,
+ { isNew: false, mintNft: true, isDraft: false, id: nftToMint ?? '' },
+ undefined,
+ () => {
+ if (!saleConfirmationDismissed) {
+ setShowSaleConfirmationDialog(true)
+ } else {
+ setNftToMint(null)
+ }
+ }
+ )
+ },
+ form,
+ })
+
+ return (
+ <>
+ {
+ if (shouldHideMintModal) {
+ updateMintConfirmationDismiss(SALE_CONFIRMATION_ID, true)
+ }
+ setShowSaleConfirmationDialog(false)
+ setNftToMint(null)
+ }}
+ onSale={() => {
+ if (shouldHideMintModal) {
+ updateMintConfirmationDismiss(SALE_CONFIRMATION_ID, true)
+ }
+ openNftPutOnSale(nftToMint ?? '')
+ setShowSaleConfirmationDialog(false)
+ setNftToMint(null)
+ }}
+ />
+ submitHandler(),
+ }}
+ secondaryButton={{
+ text: 'Cancel',
+ onClick: () => setNftToMint(null),
+ }}
+ fee={formStatus.actionBarFee}
+ >
+
+
+ Minting an NFT creates a record of ownership on the blockchain that can be put on sale. This doesn't impact
+ your intellectual rights to the video.
+
+
+ setShowRoyaltyInput(e?.target.checked ?? false)}
+ />
+
+ Royalties let you earn commissions from every sale of this NFT. Sale commissions go out to your channel
+ account.
+
+ {showRoyaltyInput && (
+
+
+ %
+
+ }
+ />
+
+ )}
+
+
+
+
+
+ )
+}
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: ${sizes(8)};
+`
+
+const SwitchContainer = styled.div`
+ display: grid;
+ gap: ${sizes(2)};
+`
diff --git a/packages/atlas/src/components/_overlays/MintNftModal/index.ts b/packages/atlas/src/components/_overlays/MintNftModal/index.ts
new file mode 100644
index 0000000000..f404e84e15
--- /dev/null
+++ b/packages/atlas/src/components/_overlays/MintNftModal/index.ts
@@ -0,0 +1 @@
+export * from './MintNftModal'
diff --git a/packages/atlas/src/components/_overlays/Modal/Modal.styles.ts b/packages/atlas/src/components/_overlays/Modal/Modal.styles.ts
index 869da7cda7..62a999ec61 100644
--- a/packages/atlas/src/components/_overlays/Modal/Modal.styles.ts
+++ b/packages/atlas/src/components/_overlays/Modal/Modal.styles.ts
@@ -33,7 +33,6 @@ export const ModalContent = styled.div`
position: fixed;
width: 100vw;
max-height: calc(100vh - var(--size-topbar-height));
- overflow: hidden;
bottom: 0;
${({ noBoxShadow }) =>
!noBoxShadow &&
@@ -65,3 +64,19 @@ export const ModalContent = styled.div`
}
}
`
+
+export const ConfettiWrapper = styled.div`
+ z-index: ${zIndex.modals};
+ position: absolute;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ align-items: baseline;
+ justify-content: center;
+ pointer-events: none;
+
+ svg {
+ width: 100vw !important;
+ height: 100vh !important;
+ }
+`
diff --git a/packages/atlas/src/components/_overlays/Modal/Modal.tsx b/packages/atlas/src/components/_overlays/Modal/Modal.tsx
index 63a7e0bd64..6673edc1e7 100644
--- a/packages/atlas/src/components/_overlays/Modal/Modal.tsx
+++ b/packages/atlas/src/components/_overlays/Modal/Modal.tsx
@@ -1,24 +1,38 @@
import { FC, MouseEvent, PropsWithChildren, useEffect, useState } from 'react'
import { CSSTransition } from 'react-transition-group'
+import confettiAnimation from '@/assets/animations/confetti.json'
+import { LottiePlayer } from '@/components/LottiePlayer'
import { Portal } from '@/components/Portal'
+import { useMountEffect } from '@/hooks/useMountEffect'
import { useOverlayManager } from '@/providers/overlayManager'
import { cVar, transitions } from '@/styles'
-import { ModalBackdrop, ModalContent, ModalSize } from './Modal.styles'
+import { ConfettiWrapper, ModalBackdrop, ModalContent, ModalSize } from './Modal.styles'
import { DialogProps } from '../Dialog'
export type ModalProps = PropsWithChildren<{
show?: boolean
+ confetti?: boolean
noBoxShadow?: boolean
size?: ModalSize
onClickOutside?: (event?: MouseEvent) => void
className?: string
+ disableBackdropAnimation?: boolean
}> &
Pick
-export const Modal: FC = ({ children, size = 'small', show, onClickOutside, className, noBoxShadow }) => {
+export const Modal: FC = ({
+ children,
+ size = 'small',
+ show,
+ onClickOutside,
+ className,
+ noBoxShadow,
+ disableBackdropAnimation,
+ confetti,
+}) => {
const { modalContainerRef, incrementOverlaysOpenCount, decrementOverlaysOpenCount, lastOverlayId } =
useOverlayManager()
const [overlayId, setOverlayId] = useState(null)
@@ -41,18 +55,42 @@ export const Modal: FC = ({ children, size = 'small', show, onClickO
}
}, [lastOverlayId, onClickOutside, overlayId])
+ useMountEffect(() => {
+ return () => {
+ decrementOverlaysOpenCount()
+ }
+ })
+
return (
-
-
+ {disableBackdropAnimation ? (
+ show &&
+
+ )}
+ {confetti && (
+
+
+
+
+ )}
void
+ onSkip: () => void
+ onShouldHideNextTime: (value: boolean) => void
+ shouldHideNextTime: boolean
+}
+
+export const SaleNftFirstTimeModal: FC = ({
+ show,
+ onSale,
+ onShouldHideNextTime,
+ shouldHideNextTime,
+ onSkip,
+}) => {
+ return (
+
+
+
+
+ }
+ actionDivider
+ >
+
+ Now that you've minted your NFT you can put it on sale by choosing "Start sale" from your video options
+
+
+
+ )
+}
diff --git a/packages/atlas/src/components/_overlays/SaleNftFirstTimeModal/index.ts b/packages/atlas/src/components/_overlays/SaleNftFirstTimeModal/index.ts
new file mode 100644
index 0000000000..30aad9d2ff
--- /dev/null
+++ b/packages/atlas/src/components/_overlays/SaleNftFirstTimeModal/index.ts
@@ -0,0 +1 @@
+export * from './SaleNftFirstTimeModal'
diff --git a/packages/atlas/src/components/_overlays/SendTransferDialogs/SendFundsDialog.tsx b/packages/atlas/src/components/_overlays/SendTransferDialogs/SendFundsDialog.tsx
index 3a5b3c5c49..0c6e6227bf 100644
--- a/packages/atlas/src/components/_overlays/SendTransferDialogs/SendFundsDialog.tsx
+++ b/packages/atlas/src/components/_overlays/SendTransferDialogs/SendFundsDialog.tsx
@@ -23,7 +23,7 @@ import { DialogModal } from '@/components/_overlays/DialogModal'
import { atlasConfig } from '@/config'
import { hapiBnToTokenNumber, tokenNumberToHapiBn } from '@/joystream-lib/utils'
import { getMemberAvatar } from '@/providers/assets/assets.helpers'
-import { useFee, useJoystream, useTokenPrice } from '@/providers/joystream/joystream.hooks'
+import { useFee, useJoystream, useTokenPrice } from '@/providers/joystream'
import { useTransaction } from '@/providers/transactions/transactions.hooks'
import { formatJoystreamAddress, isValidAddressPolkadotAddress } from '@/utils/address'
import { SentryLogger } from '@/utils/logs'
diff --git a/packages/atlas/src/components/_overlays/SendTransferDialogs/WithdrawFundsDialog.tsx b/packages/atlas/src/components/_overlays/SendTransferDialogs/WithdrawFundsDialog.tsx
index 5f2e2c3008..060b142f8d 100644
--- a/packages/atlas/src/components/_overlays/SendTransferDialogs/WithdrawFundsDialog.tsx
+++ b/packages/atlas/src/components/_overlays/SendTransferDialogs/WithdrawFundsDialog.tsx
@@ -12,7 +12,7 @@ import { TokenInput } from '@/components/_inputs/TokenInput'
import { DialogModal } from '@/components/_overlays/DialogModal'
import { atlasConfig } from '@/config'
import { hapiBnToTokenNumber, tokenNumberToHapiBn } from '@/joystream-lib/utils'
-import { useFee, useJoystream, useTokenPrice } from '@/providers/joystream/joystream.hooks'
+import { useFee, useJoystream, useTokenPrice } from '@/providers/joystream'
import { useTransaction } from '@/providers/transactions/transactions.hooks'
import { formatNumber } from '@/utils/number'
import { useChannelPaymentsHistory } from '@/views/studio/MyPaymentsView/PaymentsTransactions/PaymentTransactions.hooks'
diff --git a/packages/atlas/src/components/_overlays/SignInDialogContent/SignInDialogContent.styles.ts b/packages/atlas/src/components/_overlays/SignInDialogContent/SignInDialogContent.styles.ts
deleted file mode 100644
index 37bb74bfbf..0000000000
--- a/packages/atlas/src/components/_overlays/SignInDialogContent/SignInDialogContent.styles.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import styled from '@emotion/styled'
-
-import {
- SvgLargeComputer,
- SvgLargeWall,
- SvgOtherSignInDialogPatterns,
- SvgOtherSignInMobileDialogPatterns,
-} from '@/assets/illustrations'
-import { media, sizes } from '@/styles'
-
-export const IllustrationWrapper = styled.div<{ isMobileDevice: boolean }>`
- position: relative;
- margin: calc(var(--local-size-dialog-padding) * -1) calc(var(--local-size-dialog-padding) * -1) ${sizes(6)}
- calc(var(--local-size-dialog-padding) * -1);
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
-
- > * {
- width: 100%;
- height: 208px;
-
- ${media.sm} {
- height: 264px;
- }
- }
-`
-
-export const SignInDialogTextWrapper = styled.div`
- margin: 0 auto;
- text-align: center;
- display: grid;
- grid-auto-rows: auto;
- grid-gap: ${sizes(2)};
- padding: ${sizes(2)};
-
- ${media.sm} {
- padding: 0;
- }
-`
-
-export const StyledSvgLargeWall = styled(SvgLargeWall)`
- max-width: 256px;
- max-height: 256px;
- display: block;
- margin: 0 auto;
- position: relative;
- z-index: 1;
-
- ${media.sm} {
- max-width: 320px;
- max-height: 320px;
- }
-`
-
-export const StyledLargeComputer = styled(SvgLargeComputer)`
- max-width: 160px;
- max-height: 160px;
- display: block;
- margin: 0 auto;
- position: relative;
- z-index: 1;
-
- ${media.sm} {
- max-width: 208px;
- max-height: 208px;
- }
-`
-
-export const StyledSvgOtherSignInMobileDialogPatterns = styled(SvgOtherSignInMobileDialogPatterns)`
- position: absolute;
- top: 0;
- left: 50%;
- transform: translateX(-50%);
- height: 100%;
-`
-
-export const StyledSvgOtherSignInDialogPatterns = styled(SvgOtherSignInDialogPatterns)`
- position: absolute;
- top: 0;
- left: 50%;
- transform: translateX(-50%);
- height: 100%;
- max-width: 100%;
-`
diff --git a/packages/atlas/src/components/_overlays/SignInDialogContent/SignInDialogContent.tsx b/packages/atlas/src/components/_overlays/SignInDialogContent/SignInDialogContent.tsx
deleted file mode 100644
index bf92992619..0000000000
--- a/packages/atlas/src/components/_overlays/SignInDialogContent/SignInDialogContent.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { FC } from 'react'
-
-import { AppKV } from '@/components/AppKV'
-import { Text } from '@/components/Text'
-import { atlasConfig } from '@/config'
-import { useMediaMatch } from '@/hooks/useMediaMatch'
-
-import { IllustrationWrapper, SignInDialogTextWrapper } from './SignInDialogContent.styles'
-
-type SignInDialogContentProps = {
- isMobileDevice: boolean
- interaction?: boolean
-}
-
-export const SignInDialogContent: FC = ({ isMobileDevice, interaction }) => {
- const smMatch = useMediaMatch('sm')
- return (
- <>
-
-
-
-
- {isMobileDevice
- ? `${atlasConfig.general.appName} is best experienced on desktop`
- : 'Connect wallet to continue'}
-
- {!isMobileDevice ? (
-
- Connect your wallet and sign in to a free Joystream membership to continue.
-
- ) : (
- <>
-
- {interaction
- ? "To continue, you'll need to connect a wallet and set up a free Joystream membership, which is best done on a desktop."
- : `While we work on a full mobile experience, we encourage you to visit ${atlasConfig.general.appName} on your desktop to create a free Joystream membership today.`}
-
-
- If you have a wallet app on your phone, tap “Connect anyway” to create your membership.
-
-
- )}
-
-
- )
-}
diff --git a/packages/atlas/src/components/_overlays/SignInDialogContent/index.ts b/packages/atlas/src/components/_overlays/SignInDialogContent/index.ts
deleted file mode 100644
index bca2245efd..0000000000
--- a/packages/atlas/src/components/_overlays/SignInDialogContent/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SignInDialogContent'
diff --git a/packages/atlas/src/components/_overlays/TransactionModal/TransactionModal.tsx b/packages/atlas/src/components/_overlays/TransactionModal/TransactionModal.tsx
index d38f256802..a80529340c 100644
--- a/packages/atlas/src/components/_overlays/TransactionModal/TransactionModal.tsx
+++ b/packages/atlas/src/components/_overlays/TransactionModal/TransactionModal.tsx
@@ -7,7 +7,7 @@ import { Text } from '@/components/Text'
import { ErrorCode } from '@/joystream-lib/errors'
import { ExtrinsicStatus } from '@/joystream-lib/types'
import { useOverlayManager } from '@/providers/overlayManager'
-import { useUserStore } from '@/providers/user/user.store'
+import { useWallet } from '@/providers/wallet/wallet.hooks'
import { transitions } from '@/styles'
import { createPlaceholderData } from '@/utils/data'
@@ -37,7 +37,7 @@ export const TransactionModal: FC = ({ onClose, status, c
const [walletLogoVisible, setWalletLogoVisible] = useState(false)
const { decrementOverlaysOpenCount } = useOverlayManager()
const [initialStatus, setInitialStatus] = useState(null)
- const wallet = useUserStore((state) => state.wallet)
+ const { wallet } = useWallet()
const nonUploadTransaction = initialStatus === ExtrinsicStatus.Unsigned
const error = status === ExtrinsicStatus.Error
const stepDetails =
diff --git a/packages/atlas/src/components/_templates/EntitySettingTemplate.tsx b/packages/atlas/src/components/_templates/EntitySettingTemplate.tsx
new file mode 100644
index 0000000000..3cbbfd8670
--- /dev/null
+++ b/packages/atlas/src/components/_templates/EntitySettingTemplate.tsx
@@ -0,0 +1,47 @@
+import styled from '@emotion/styled'
+import { FC, PropsWithChildren } from 'react'
+
+import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
+import { Text } from '@/components/Text'
+import { cVar, media, sizes } from '@/styles'
+
+type EntitySettingTemplateProps = PropsWithChildren<{
+ title: string
+ description?: string
+ isFirst?: boolean
+ isLast?: boolean
+}>
+
+export const EntitySettingTemplate: FC = ({
+ children,
+ title,
+ description,
+ isLast,
+ isFirst,
+}) => {
+ return (
+
+
+
+ {title}
+
+
+ {description}
+
+
+
+ {children}
+
+
+ )
+}
+
+export const StyledLayoutGrid = styled(LayoutGrid)<{ isFirst?: boolean; isLast?: boolean }>`
+ row-gap: ${sizes(8)};
+ padding: ${({ isFirst }) => (isFirst ? `0 0 ${sizes(10)} 0` : `${sizes(10)} 0`)};
+ box-shadow: ${({ isLast }) => (isLast ? 'unset' : cVar('effectDividersBottom'))};
+
+ ${media.sm} {
+ padding: ${({ isFirst }) => (isFirst ? `0 0 ${sizes(6)} 0` : `${sizes(6)} 0`)};
+ }
+`
diff --git a/packages/atlas/src/components/_video/ReactionStepper/ReactionStepper.tsx b/packages/atlas/src/components/_video/ReactionStepper/ReactionStepper.tsx
index dc7ae02499..7f4a41cd92 100644
--- a/packages/atlas/src/components/_video/ReactionStepper/ReactionStepper.tsx
+++ b/packages/atlas/src/components/_video/ReactionStepper/ReactionStepper.tsx
@@ -1,6 +1,7 @@
import BN from 'bn.js'
import { FC, useRef, useState } from 'react'
+import { ProtectedActionWrapper } from '@/components/_auth/ProtectedActionWrapper'
import { VideoReaction } from '@/joystream-lib/types'
import { ReactionButton, ReactionSteppperState } from './ReactionButton'
@@ -17,6 +18,8 @@ export type ReactionStepperProps = {
onCalculateFee?: (reaction: VideoReaction) => Promise
}
+const reactions: VideoReaction[] = ['like', 'dislike']
+
export const ReactionStepper: FC = ({
likes = 0,
dislikes = 0,
@@ -31,7 +34,6 @@ export const ReactionStepper: FC = ({
const total = likes + dislikes
const likesPercent = total ? Number((likes / total).toFixed(4)) : 0
const reactionStepperWrapperRef = useRef(null)
- const reactions: VideoReaction[] = ['like', 'dislike']
return (
<>
{state === 'processing' && (
@@ -43,21 +45,26 @@ export const ReactionStepper: FC = ({
)}
{reactions.map((reaction) => (
- {
- setIsPopoverOpen(true)
- await onCalculateFee?.(reaction)
- }}
- onPopoverHide={() => setIsPopoverOpen(false)}
- isPopoverOpen={isPopoverOpen}
- />
+ title={reaction === 'like' ? 'You like this video?' : 'You don’t like this video?'}
+ description="Sign in to make your vote count"
+ >
+ {
+ setIsPopoverOpen(true)
+ await onCalculateFee?.(reaction)
+ }}
+ onPopoverHide={() => setIsPopoverOpen(false)}
+ isPopoverOpen={isPopoverOpen}
+ />
+
))}
-
diff --git a/packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx b/packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx
index a6727f8766..f24b1d27ec 100644
--- a/packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx
+++ b/packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx
@@ -134,12 +134,7 @@ const VideoPlayerComponent: ForwardRefRenderFunction(null)
- const {
- trackVideoPlaybackResumed,
- trackVideoPlaybackPaused,
- trackVideoPlaybackStarted,
- trackVideoPlaybackCompleted,
- } = useSegmentAnalytics()
+ const { addEventToQueue } = useSegmentAnalytics()
const customControlsOffset =
((customControlsRef.current?.getBoundingClientRect().top || 0) -
@@ -166,6 +161,7 @@ const VideoPlayerComponent: ForwardRefRenderFunction('loading')
const [isLoaded, setIsLoaded] = useState(false)
const [needsManualPlay, setNeedsManualPlay] = useState(!autoplay)
@@ -189,11 +185,20 @@ const VideoPlayerComponent: ForwardRefRenderFunction void) => {
- if (!player) {
- return
- }
- withIndicator && player.trigger(CustomVideojsEvents.PauseControl)
- callback?.()
- player.pause()
- trackVideoPlaybackPaused(videoPlaybackData)
- },
- [trackVideoPlaybackPaused, videoPlaybackData]
- )
+ const pauseVideo = useCallback((player: VideoJsPlayer | null, withIndicator?: boolean, callback?: () => void) => {
+ if (!player) {
+ return
+ }
+ withIndicator && player.trigger(CustomVideojsEvents.PauseControl)
+ callback?.()
+ player.pause()
+ }, [])
useEffect(() => {
if (!isVideoPending) {
@@ -361,13 +359,13 @@ const VideoPlayerComponent: ForwardRefRenderFunction {
setPlayerState('ended')
- trackVideoPlaybackCompleted(videoPlaybackData)
+ addEventToQueue('playbackCompleted', videoPlaybackData)
}
player.on('ended', handler)
return () => {
player.off('ended', handler)
}
- }, [nextVideo, player, trackVideoPlaybackCompleted, videoPlaybackData])
+ }, [nextVideo, player, addEventToQueue, videoPlaybackData])
// handle loadstart
useEffect(() => {
@@ -393,15 +391,16 @@ const VideoPlayerComponent: ForwardRefRenderFunction {
onAddVideoView?.()
+ addEventToQueue('playbackStarted', videoPlaybackData)
setIsPlaying(true)
- trackVideoPlaybackStarted(videoPlaybackData)
+ setAutoplayEventFired(true)
})
.catch((e) => {
setNeedsManualPlay(true)
ConsoleLogger.warn('Video autoplay failed', e)
})
}
- }, [player, isLoaded, autoplay, onAddVideoView, trackVideoPlaybackStarted, videoPlaybackData])
+ }, [player, isLoaded, autoplay, onAddVideoView, addEventToQueue, videoPlaybackData])
// handle playing and pausing from outside the component
useEffect(() => {
@@ -410,12 +409,10 @@ const VideoPlayerComponent: ForwardRefRenderFunction {
@@ -424,9 +421,13 @@ const VideoPlayerComponent: ForwardRefRenderFunction {
if (event.type === 'play') {
+ if (autoplayEventFired) {
+ addEventToQueue('playbackResumed', videoPlaybackData)
+ }
setIsPlaying(true)
}
if (event.type === 'pause') {
+ addEventToQueue('playbackPaused', videoPlaybackData)
setIsPlaying(false)
}
}
@@ -434,7 +435,7 @@ const VideoPlayerComponent: ForwardRefRenderFunction {
player.off(['play', 'pause'], handler)
}
- }, [player, playerState])
+ }, [autoplayEventFired, player, playerState, addEventToQueue, videoPlaybackData])
useEffect(() => {
if (!externalRef) {
diff --git a/packages/atlas/src/components/_video/VideoTileDetails/VideoTileDetails.tsx b/packages/atlas/src/components/_video/VideoTileDetails/VideoTileDetails.tsx
index a28e2f2609..ed5e187c0f 100644
--- a/packages/atlas/src/components/_video/VideoTileDetails/VideoTileDetails.tsx
+++ b/packages/atlas/src/components/_video/VideoTileDetails/VideoTileDetails.tsx
@@ -110,7 +110,7 @@ export const VideoTileDetails: FC = ({
) : (
<>
{type === 'video' ? (
-
+
{videoSubTitle
? videoSubTitle
: createdAt && (
diff --git a/packages/atlas/src/config/config.ts b/packages/atlas/src/config/config.ts
index dc4ad67fbf..1bc34605ea 100644
--- a/packages/atlas/src/config/config.ts
+++ b/packages/atlas/src/config/config.ts
@@ -1,6 +1,6 @@
import { cloneDeepWith } from 'lodash-es'
-import { SelectItem } from '@/components/_inputs/Select'
+import { ListItemProps } from '@/components/ListItem/ListItem'
import { createLookup } from '@/utils/data'
import { ConsoleLogger } from '@/utils/logs'
@@ -8,6 +8,16 @@ import { RawConfig, configSchema } from './configSchema'
import rawConfig from '../../atlas.config.yml'
+type SelectItem = {
+ value: T
+ name: string
+ // replaces the name in the menu list
+ menuName?: string
+ // hides the item in the menu list
+ hideInMenu?: boolean
+ onClick?: () => void
+} & Omit
+
type SelectValue = Pick
export type Config = RawConfig & {
derived: {
diff --git a/packages/atlas/src/config/env.ts b/packages/atlas/src/config/env.ts
index 4cf0c56289..487afb608c 100644
--- a/packages/atlas/src/config/env.ts
+++ b/packages/atlas/src/config/env.ts
@@ -1,7 +1,7 @@
import { useEnvironmentStore } from '@/providers/environment'
import { getEnvName } from '@/utils/envVariables'
-type BuildEnv = 'production' | 'development'
+type BuildEnv = 'production' | 'development' | 'accounts'
export const ENV_PREFIX = 'VITE'
@@ -34,9 +34,11 @@ export const readEnv = (name: string, required = true, direct = false): string =
// variables that depends on chosen environment
export const ORION_GRAPHQL_URL = readEnv('ORION_URL')
+export const ORION_AUTH_URL = readEnv('ORION_AUTH_URL')
export const QUERY_NODE_GRAPHQL_SUBSCRIPTION_URL = readEnv('QUERY_NODE_SUBSCRIPTION_URL')
export const NODE_URL = readEnv('NODE_URL')
export const FAUCET_URL = readEnv('FAUCET_URL')
+export const YPP_FAUCET_URL = readEnv('YPP_FAUCET_URL')
// direct variables
export const GOOGLE_OAUTH_ENDPOINT = 'https://accounts.google.com/o/oauth2/v2/auth'
diff --git a/packages/atlas/src/config/routes.ts b/packages/atlas/src/config/routes.ts
index db13a40793..8382ab36a2 100644
--- a/packages/atlas/src/config/routes.ts
+++ b/packages/atlas/src/config/routes.ts
@@ -7,6 +7,10 @@ export const BASE_PATHS = {
playground: '/playground',
} as const
+export type MemberSettingsTabs = 'Public profile' | 'Wallet' | 'Notifications'
+export type MemberTabs = 'NFTs' | 'Activity' | 'About'
+export type MyChannelTabs = 'General' | 'Notifications'
+
const withQueryParameters = (basePath: string, query: Record = {}) => {
if (Object.values(query).length) {
const queryParams = new URLSearchParams()
@@ -28,7 +32,8 @@ export const relativeRoutes = {
channel: (id = ':id') => `channel/${id}`,
channels: () => 'channels',
video: (id = ':id', query?: { [QUERY_PARAMS.COMMENT_ID]?: string }) => withQueryParameters(`video/${id}`, query),
- editMembership: () => 'member/edit',
+ memberSettings: (query?: { [QUERY_PARAMS.TAB]?: MemberSettingsTabs }) =>
+ withQueryParameters(`member/settings`, query),
member: (handle = ':handle', query?: { [QUERY_PARAMS.TAB]?: MemberTabs }) =>
withQueryParameters(`member/${handle}`, query),
notifications: () => 'notifications',
@@ -44,8 +49,7 @@ export const relativeRoutes = {
},
studio: {
index: () => '',
- newChannel: () => 'channel/new',
- editChannel: () => 'channel',
+ myChannel: (query?: { [QUERY_PARAMS.TAB]?: MyChannelTabs }) => withQueryParameters('channel', query),
videos: () => 'videos',
crtWelcome: () => 'crt-welcome',
crtTokenPreview: () => 'crt-preview',
@@ -82,8 +86,6 @@ export const absoluteRoutes = Object.entries(BASE_PATHS).reduce((absoluteRoutesA
return absoluteRoutesAcc
}, {} as typeof relativeRoutes)
-export type MemberTabs = 'NFTs' | 'Activity' | 'About'
-
export const QUERY_PARAMS = {
SEARCH: 'query',
COMMENT_ID: 'commentId',
diff --git a/packages/atlas/src/hooks/useChannelForm.ts b/packages/atlas/src/hooks/useChannelForm.ts
new file mode 100644
index 0000000000..00f840ffa1
--- /dev/null
+++ b/packages/atlas/src/hooks/useChannelForm.ts
@@ -0,0 +1,396 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import shallow from 'zustand/shallow'
+
+import {
+ GetExtendedFullChannelsQuery,
+ GetExtendedFullChannelsQueryHookResult,
+} from '@/api/queries/__generated__/channels.generated'
+import { SelectItem } from '@/components/_inputs/Select'
+import { ImageCropModalImperativeHandle, ImageCropModalProps } from '@/components/_overlays/ImageCropModal'
+import { atlasConfig } from '@/config'
+import { CreateEditChannelFormInputs, useCreateEditChannelSubmit } from '@/hooks/useChannelFormSubmit'
+import { ChannelInputAssets, ChannelInputMetadata } from '@/joystream-lib/types'
+import { useChannelsStorageBucketsCount } from '@/providers/assets/assets.hooks'
+import { useConnectionStatusStore } from '@/providers/connectionStatus'
+import { useBloatFeesAndPerMbFees, useFee, useJoystream } from '@/providers/joystream'
+import { useUploadsStore } from '@/providers/uploads/uploads.store'
+import { useUser } from '@/providers/user/user.hooks'
+import { createId } from '@/utils/createId'
+import { ConsoleLogger, SentryLogger } from '@/utils/logs'
+
+export const PUBLIC_SELECT_ITEMS: SelectItem[] = [
+ { name: 'Public', value: true },
+ { name: 'Unlisted (channel will not appear in feeds and search)', value: false },
+]
+
+type NewChannelProps = {
+ type: 'new'
+}
+
+type EditChannelProps = {
+ type: 'edit'
+ channel?: GetExtendedFullChannelsQuery['extendedChannels'][number]['channel']
+ refetchChannel: GetExtendedFullChannelsQueryHookResult['refetch']
+}
+
+type FormType = EditChannelProps | NewChannelProps
+
+const isEditType = (props: FormType): props is EditChannelProps => props.type === 'edit'
+const DEFAULT_LANGUAGE = atlasConfig.derived.popularLanguagesSelectValues[0].value
+
+const channelSchema = z.object({
+ title: z
+ .string()
+ .min(1, 'Title is required.')
+ .min(3, 'Title should be at least 3 characters long.')
+ .max(40, 'Title can be only 40 characters long.'),
+ isPublic: z.boolean(),
+ description: z.string().optional(),
+ language: z.any(),
+ avatar: z.any(),
+ cover: z.any(),
+})
+
+export const useChannelForm = (props: FormType) => {
+ const [showConnectToYtDialog, setShowConnectToYtDialog] = useState(false)
+ const firstRender = useRef(true)
+ const avatarDialogRef = useRef(null)
+ const coverDialogRef = useRef(null)
+ const { memberId, accountId, channelId, refetchUserMemberships } = useUser()
+ const cachedChannelId = useRef(channelId)
+ const { joystream } = useJoystream()
+ const nodeConnectionStatus = useConnectionStatusStore((state) => state.nodeConnectionStatus)
+ const handleChannelSubmit = useCreateEditChannelSubmit()
+ const channel = isEditType(props) ? props.channel : undefined
+ const newChannel = !isEditType(props)
+ const channelBucketsCount = useChannelsStorageBucketsCount(channel?.id ?? null)
+
+ const form = useForm({
+ mode: 'onSubmit',
+ resolver: zodResolver(channelSchema),
+ defaultValues: {
+ avatar: { contentId: null, assetDimensions: null, imageCropData: null, originalBlob: undefined },
+ cover: { contentId: null, assetDimensions: null, imageCropData: null, originalBlob: undefined },
+ title: '',
+ description: '',
+ language: DEFAULT_LANGUAGE,
+ isPublic: true,
+ },
+ })
+ const {
+ handleSubmit: createSubmitHandler,
+ formState: { isDirty, dirtyFields },
+ watch,
+ setValue,
+ reset,
+ getValues,
+ } = form
+ const avatarContentId = watch('avatar').contentId
+ const coverContentId = watch('cover').contentId
+
+ const isAvatarUploading = useUploadsStore(
+ (state) =>
+ avatarContentId
+ ? ['processing', 'inProgress', 'reconnecting'].includes(state.uploadsStatus[avatarContentId]?.lastStatus ?? '')
+ : null,
+ shallow
+ )
+ const isCoverUploading = useUploadsStore(
+ (state) =>
+ coverContentId
+ ? state.uploadsStatus[coverContentId]?.lastStatus === 'processing' ||
+ state.uploadsStatus[coverContentId]?.lastStatus === 'inProgress' ||
+ state.uploadsStatus[coverContentId]?.lastStatus === 'reconnecting'
+ : null,
+ shallow
+ )
+
+ useEffect(() => {
+ if (newChannel) {
+ reset({
+ avatar: { contentId: null },
+ cover: { contentId: null },
+ title: '',
+ description: '',
+ language: DEFAULT_LANGUAGE,
+ isPublic: true,
+ })
+ }
+ }, [newChannel, reset])
+
+ const createChannelMetadata = useCallback(
+ (data: CreateEditChannelFormInputs) => {
+ return isDirty
+ ? {
+ ...(dirtyFields.title ? { title: data.title?.trim() ?? '' } : {}),
+ ...(dirtyFields.description ? { description: data.description?.trim() ?? '' } : {}),
+ ...(dirtyFields.language || newChannel ? { language: data.language } : {}),
+ ...(dirtyFields.isPublic || newChannel ? { isPublic: data.isPublic } : {}),
+ ownerAccount: accountId || '',
+ }
+ : null
+ },
+ [accountId, dirtyFields, isDirty, newChannel]
+ )
+
+ const createChannelAssets = useCallback((): [ChannelInputAssets, string[]] => {
+ const replacedAssetsIds: string[] = []
+ const newAssets: ChannelInputAssets = {}
+ const avatarAsset = getValues('avatar')
+ const coverAsset = getValues('cover')
+ if (avatarAsset?.croppedBlob?.size) {
+ newAssets.avatarPhoto = {
+ size: avatarAsset?.croppedBlob.size,
+ ipfsHash: '',
+ }
+ }
+ if (channel?.avatarPhoto?.id && channel?.avatarPhoto?.id !== avatarAsset.contentId) {
+ replacedAssetsIds.push(channel.avatarPhoto.id)
+ }
+ if (coverAsset?.croppedBlob?.size) {
+ newAssets.coverPhoto = {
+ size: coverAsset.croppedBlob.size,
+ ipfsHash: '',
+ }
+ }
+ if (channel?.coverPhoto?.id && channel?.coverPhoto?.id !== coverAsset.contentId) {
+ replacedAssetsIds.push(channel.coverPhoto.id)
+ }
+ return [newAssets, replacedAssetsIds]
+ }, [channel?.avatarPhoto?.id, channel?.coverPhoto?.id, getValues])
+
+ const channelMetadata = createChannelMetadata(watch())
+ const [newChannelAssets, removedChannelAssetsIds] = createChannelAssets()
+
+ const { channelStateBloatBondValue, dataObjectStateBloatBondValue } = useBloatFeesAndPerMbFees()
+
+ const { fullFee: updateChannelFee, loading: updateChannelFeeLoading } = useFee(
+ 'updateChannelTx',
+ channelId && memberId && channelMetadata && isDirty && !newChannel
+ ? [
+ channelId,
+ memberId,
+ channelMetadata,
+ newChannelAssets,
+ removedChannelAssetsIds,
+ dataObjectStateBloatBondValue.toString(),
+ channelBucketsCount.toString(),
+ ]
+ : undefined,
+ newChannelAssets
+ )
+ const { fullFee: createChannelFee, loading: createChannelFeeLoading } = useFee(
+ 'createChannelTx',
+ memberId && channelMetadata && newChannel
+ ? [
+ memberId,
+ channelMetadata,
+ newChannelAssets,
+ // use basic buckets config for fee estimation
+ { storage: [0], distribution: [{ distributionBucketFamilyId: 0, distributionBucketIndex: 0 }] },
+ dataObjectStateBloatBondValue.toString(),
+ channelStateBloatBondValue.toString(),
+ ]
+ : undefined,
+ newChannelAssets
+ )
+
+ useEffect(() => {
+ const init = async () => {
+ if (newChannel || !channel) {
+ return
+ }
+
+ const { title, description, isPublic, language, avatarPhoto, coverPhoto } = channel
+
+ const foundLanguage = atlasConfig.derived.languagesSelectValues.find(({ value }) => value === language)
+ let avatarBlob
+ let coverBlob
+ const originalBlobPromises = []
+ const isChannelChanged = cachedChannelId.current !== channel.id
+ if (avatarPhoto?.isAccepted && avatarPhoto.resolvedUrls[0]) {
+ originalBlobPromises.push(
+ fetch(avatarPhoto.resolvedUrls[0])
+ .then((r) => r.blob())
+ .then((createdBlob) => (avatarBlob = createdBlob))
+ .catch((err) => ConsoleLogger.warn(`Cannot fetch avatar`, err))
+ )
+ }
+ if (coverPhoto?.isAccepted && coverPhoto.resolvedUrls[0]) {
+ originalBlobPromises.push(
+ fetch(coverPhoto.resolvedUrls[0])
+ .then((r) => r.blob())
+ .then((createdBlob) => (coverBlob = createdBlob))
+ .catch((err) => ConsoleLogger.warn(`Cannot fetch cover`, err))
+ )
+ }
+
+ await Promise.all(originalBlobPromises)
+ // This condition should prevent from updating cover/avatar when the upload is done
+ if (isChannelChanged || firstRender.current) {
+ reset({
+ avatar: {
+ contentId: avatarPhoto?.id,
+ assetDimensions: null,
+ imageCropData: null,
+ originalBlob: avatarBlob,
+ originalUrl: channel.avatarPhoto?.resolvedUrls[0],
+ },
+ cover: {
+ contentId: coverPhoto?.id,
+ assetDimensions: null,
+ imageCropData: null,
+ originalBlob: coverBlob,
+ originalUrl: channel.coverPhoto?.resolvedUrls[0],
+ },
+ title: title || '',
+ description: description || '',
+ isPublic: isPublic ?? false,
+ language: foundLanguage?.value || DEFAULT_LANGUAGE,
+ })
+ firstRender.current = false
+ cachedChannelId.current = channel.id
+ }
+ }
+
+ init()
+ }, [channel, newChannel, reset])
+
+ const handleSubmit = (onCompleted?: (channelId: string) => void) =>
+ createSubmitHandler(async (data) => {
+ if (!joystream || !memberId || !accountId) {
+ return
+ }
+
+ if (!channelBucketsCount && !newChannel) {
+ SentryLogger.error('Channel buckets count is not set', 'CreateEditChannelView')
+ return
+ }
+
+ const metadata: ChannelInputMetadata = {
+ ...(dirtyFields.title ? { title: data.title?.trim() ?? '' } : {}),
+ ...(dirtyFields.description ? { description: data.description?.trim() ?? '' } : {}),
+ ...(dirtyFields.language || newChannel ? { language: data.language } : {}),
+ ...(dirtyFields.isPublic || newChannel ? { isPublic: data.isPublic } : {}),
+ ownerAccount: accountId ?? '',
+ }
+ let channelId = ''
+ await handleChannelSubmit({
+ data: {
+ metadata,
+ channel,
+ newChannel,
+ assets: {
+ avatarPhoto: data.avatar,
+ coverPhoto: data.cover,
+ },
+ refetchChannel: isEditType(props) ? props.refetchChannel : undefined,
+ fee: newChannel ? createChannelFee : updateChannelFee,
+ },
+ onTxSync: (result) => {
+ reset(getValues())
+ channelId = result.channelId
+ refetchUserMemberships()
+ },
+ onUploadAssets: setValue,
+ onCompleted: () => {
+ atlasConfig.features.ypp.googleConsoleClientId &&
+ atlasConfig.features.ypp.youtubeSyncApiUrl &&
+ setTimeout(() => setShowConnectToYtDialog(true), 2000)
+ onCompleted?.(channelId)
+ },
+ })
+ })()
+
+ const handleCoverChange: ImageCropModalProps['onConfirm'] = (
+ croppedBlob,
+ croppedUrl,
+ assetDimensions,
+ imageCropData,
+ originalBlob
+ ) => {
+ const newCoverAssetId = `local-cover-${createId()}`
+ setValue(
+ 'cover',
+ {
+ contentId: newCoverAssetId,
+ assetDimensions,
+ croppedBlob,
+ imageCropData,
+ originalBlob,
+ croppedUrl,
+ },
+ { shouldDirty: true }
+ )
+ }
+
+ const handleAvatarChange: ImageCropModalProps['onConfirm'] = (
+ croppedBlob,
+ croppedUrl,
+ assetDimensions,
+ imageCropData,
+ originalBlob
+ ) => {
+ const newAvatarAssetId = `local-avatar-${createId()}`
+ setValue(
+ 'avatar',
+ { contentId: newAvatarAssetId, assetDimensions, imageCropData, originalBlob, croppedUrl, croppedBlob },
+ { shouldDirty: true }
+ )
+ }
+
+ const handleDeleteAvatar = () => {
+ setValue(
+ 'avatar',
+ { contentId: null, assetDimensions: null, imageCropData: null, originalBlob: undefined },
+ { shouldDirty: true }
+ )
+ }
+
+ const handleDeleteCover = () => {
+ setValue(
+ 'cover',
+ {
+ contentId: null,
+ assetDimensions: null,
+ imageCropData: null,
+ originalBlob: undefined,
+ croppedUrl: undefined,
+ originalUrl: undefined,
+ },
+ { shouldDirty: true }
+ )
+ }
+
+ const hasAvatarUploadFailed = isAvatarUploading
+ ? false
+ : (channel?.avatarPhoto && !channel.avatarPhoto.isAccepted && !dirtyFields.avatar) || false
+ const hasCoverUploadFailed = isCoverUploading
+ ? false
+ : (channel?.coverPhoto && !channel.coverPhoto.isAccepted && !dirtyFields.cover) || false
+ const hideActionBar = !isDirty || nodeConnectionStatus !== 'connected'
+
+ return {
+ form,
+ fee: isEditType(props) ? updateChannelFee : createChannelFee,
+ feeLoading: isEditType(props) ? updateChannelFeeLoading : createChannelFeeLoading,
+ hasAvatarUploadFailed,
+ hasCoverUploadFailed,
+ hideActionBar,
+ showConnectToYtDialog,
+ actions: {
+ handleDeleteCover,
+ handleDeleteAvatar,
+ handleAvatarChange,
+ handleCoverChange,
+ handleSubmit,
+ },
+ refs: {
+ avatarDialogRef,
+ coverDialogRef,
+ },
+ }
+}
diff --git a/packages/atlas/src/views/studio/CreateEditChannelView/CreateEditChannelView.hooks.ts b/packages/atlas/src/hooks/useChannelFormSubmit.ts
similarity index 88%
rename from packages/atlas/src/views/studio/CreateEditChannelView/CreateEditChannelView.hooks.ts
rename to packages/atlas/src/hooks/useChannelFormSubmit.ts
index e30ed8d38c..2066157654 100644
--- a/packages/atlas/src/views/studio/CreateEditChannelView/CreateEditChannelView.hooks.ts
+++ b/packages/atlas/src/hooks/useChannelFormSubmit.ts
@@ -7,14 +7,16 @@ import { AppActionActionType } from '@/api/queries/__generated__/baseTypes.gener
import { GetExtendedFullChannelsQueryHookResult } from '@/api/queries/__generated__/channels.generated'
import { FullChannelFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
import { atlasConfig } from '@/config'
-import { ChannelAssets, ChannelExtrinsicResult, ChannelInputAssets, ChannelInputMetadata } from '@/joystream-lib/types'
+import {
+ ChannelAssets,
+ ChannelAssetsIds,
+ ChannelExtrinsicResult,
+ ChannelInputAssets,
+ ChannelInputMetadata,
+} from '@/joystream-lib/types'
import { useChannelsStorageBucketsCount } from '@/providers/assets/assets.hooks'
import { useOperatorsContext } from '@/providers/assets/assets.provider'
-import {
- useBloatFeesAndPerMbFees,
- useBucketsConfigForNewChannel,
- useJoystream,
-} from '@/providers/joystream/joystream.hooks'
+import { useBloatFeesAndPerMbFees, useBucketsConfigForNewChannel, useJoystream } from '@/providers/joystream'
import { useTransaction } from '@/providers/transactions/transactions.hooks'
import { useStartFileUpload } from '@/providers/uploads/uploads.hooks'
import { useUploadsStore } from '@/providers/uploads/uploads.store'
@@ -48,13 +50,27 @@ type CreateEditChannelData = {
metadata: ChannelInputMetadata
assets: ChannelAssets
channel?: FullChannelFieldsFragment
- refetchChannel: GetExtendedFullChannelsQueryHookResult['refetch']
+ refetchChannel?: GetExtendedFullChannelsQueryHookResult['refetch']
fee?: BN
+ collaboratorId?: string
+}
+
+type CreateEditChannelSubmitParams = {
+ data: CreateEditChannelData
+ onUploadAssets?: (field: 'avatar.contentId' | 'cover.contentId', data: string) => void
+ onCompleted?: () => void
+ onTxSync?: (result: { block: number } & { channelId: string; assetsIds: ChannelAssetsIds }) => void | Promise
+ minimized?:
+ | {
+ errorMessage: string
+ }
+ | undefined
}
export const useCreateEditChannelSubmit = () => {
const { joystream, proxyCallback } = useJoystream()
- const { channelId, memberId, setActiveUser, refetchUserMemberships } = useUser()
+ const { channelId, memberId, refetchUserMemberships } = useUser()
+
const addNewChannelIdToUploadsStore = useUploadsStore((state) => state.actions.addNewChannelId)
const getBucketsConfigForNewChannel = useBucketsConfigForNewChannel()
const { channelStateBloatBondValue, dataObjectStateBloatBondValue } = useBloatFeesAndPerMbFees()
@@ -70,12 +86,7 @@ export const useCreateEditChannelSubmit = () => {
)
return useCallback(
- async (
- data: CreateEditChannelData,
- onTxSync?: () => void,
- onUploadAssets?: (field: 'avatar.contentId' | 'cover.contentId', data: string) => void,
- onCompleted?: () => void
- ) => {
+ async ({ data, onCompleted, onUploadAssets, minimized, onTxSync }: CreateEditChannelSubmitParams) => {
if (!joystream) {
ConsoleLogger.error('No Joystream instance! Has webworker been initialized?')
return
@@ -183,7 +194,15 @@ export const useCreateEditChannelSubmit = () => {
// membership includes full list of channels so the channel update will be fetched too
await refetchUserMemberships()
} else {
- await data?.refetchChannel()
+ await data?.refetchChannel?.()
+ }
+
+ if (data.newChannel) {
+ // when creating a channel, refetch operators before uploading so that storage bag assignments gets populated for a new channel
+ await fetchStorageOperators()
+ uploadAssets(result)
+ } else {
+ uploadAssets(result)
}
if (assetsIds.avatarPhoto && data.assets.avatarPhoto?.croppedUrl) {
@@ -192,18 +211,9 @@ export const useCreateEditChannelSubmit = () => {
if (assetsIds.coverPhoto && data.assets.coverPhoto?.croppedUrl) {
modifyAssetUrlInCache(client, assetsIds.coverPhoto, data.assets.coverPhoto.croppedUrl)
}
-
- if (data.newChannel) {
- // when creating a channel, refetch operators before uploading so that storage bag assignments gets populated for a new channel
- setActiveUser({ channelId })
- fetchStorageOperators().then(() => {
- uploadAssets(result)
- })
- } else {
- uploadAssets(result)
- }
}
const completed = await handleTransaction({
+ minimized,
fee: data.fee,
preProcess: processAssets,
txFactory: async (updateStatus) =>
@@ -218,6 +228,7 @@ export const useCreateEditChannelSubmit = () => {
dataObjectStateBloatBondValue.toString(),
channelStateBloatBondValue.toString(),
atlasConfig.general.appId ? proxyCallback(rawMetadataProcessor) : undefined,
+ data.collaboratorId,
proxyCallback(updateStatus)
)
: (
@@ -230,16 +241,16 @@ export const useCreateEditChannelSubmit = () => {
removedAssetsIds,
dataObjectStateBloatBondValue.toString(),
channelBucketsCount.toString(),
- undefined,
+ data.collaboratorId,
proxyCallback(updateStatus)
),
- onTxSync: (result) => {
- onTxSync?.()
+ onTxSync: async (result) => {
+ onTxSync?.(result)
return refetchDataAndUploadAssets(result)
},
})
- if (completed && data.newChannel) {
+ if (completed) {
onCompleted?.()
}
},
@@ -258,7 +269,6 @@ export const useCreateEditChannelSubmit = () => {
proxyCallback,
rawMetadataProcessor,
refetchUserMemberships,
- setActiveUser,
startFileUpload,
]
)
diff --git a/packages/atlas/src/hooks/useCreateMember.ts b/packages/atlas/src/hooks/useCreateMember.ts
new file mode 100644
index 0000000000..f39ee49025
--- /dev/null
+++ b/packages/atlas/src/hooks/useCreateMember.ts
@@ -0,0 +1,224 @@
+import { cryptoWaitReady } from '@polkadot/util-crypto'
+import axios, { isAxiosError } from 'axios'
+import BN from 'bn.js'
+import { useCallback } from 'react'
+import { useMutation } from 'react-query'
+
+import { ImageInputFile } from '@/components/_inputs/MultiFileSelect'
+import { FAUCET_URL, YPP_FAUCET_URL } from '@/config/env'
+import { keyring } from '@/joystream-lib/lib'
+import { MemberId } from '@/joystream-lib/types'
+import { hapiBnToTokenNumber } from '@/joystream-lib/utils'
+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'
+import { useJoystream } from '@/providers/joystream'
+import { useSnackbar } from '@/providers/snackbars'
+import { useTransactionManagerStore } from '@/providers/transactions/transactions.store'
+import { useYppStore } from '@/providers/ypp/ypp.store'
+import { UploadAvatarServiceError, uploadAvatarImage } from '@/utils/image'
+import { ConsoleLogger, SentryLogger } from '@/utils/logs'
+
+export type MemberFormData = {
+ handle: string
+ avatar?: ImageInputFile
+ captchaToken?: string
+ mnemonic: string
+ confirmedCopy: boolean
+}
+
+export type AccountFormData = {
+ email: string
+ password: string
+ mnemonic: string
+ confirmedTerms: boolean
+ memberId: string
+}
+
+type NewMemberResponse = {
+ memberId: MemberId
+ block: number
+}
+
+type FaucetErrorType = 'TooManyRequestsPerIp' | 'TooManyRequests' | 'OnlyNewAccountsCanBeUsedForScreenedMembers'
+
+type NewMemberErrorResponse = {
+ error?: FaucetErrorType
+}
+
+type FaucetParams = {
+ account: string
+ handle: string
+ avatar: string | undefined
+ captchaToken: string | undefined
+}
+
+export enum RegisterError {
+ EmailAlreadyExists = 'EmailAlreadyExists',
+ UnknownError = 'UnknownError',
+}
+
+type SignUpParams = {
+ data: T
+ onStart?: () => void
+ onSuccess?: (params: { amountOfTokens: number }) => void
+ onError?: (step?: RegisterError) => void
+}
+
+// replace avatar's ImageInputFile type with simpler CreateMemberAvatarParam, because we only need blob file to upload new avatar
+type CreateMemberAvatarParam = { avatar?: { blob?: null | Blob } }
+type CreateNewMemberParams = SignUpParams & CreateMemberAvatarParam>
+
+export const useCreateMember = () => {
+ const { handleLogin } = useAuth()
+ const setAnonymousUserId = useAuthStore((store) => store.actions.setAnonymousUserId)
+ const { joystream } = useJoystream()
+ const { displaySnackbar } = useSnackbar()
+ const { addBlockAction } = useTransactionManagerStore((state) => state.actions)
+ const ytResponseData = useYppStore((state) => state.ytResponseData)
+
+ const { mutateAsync: avatarMutation } = useMutation('avatar-post', (croppedBlob: Blob) =>
+ uploadAvatarImage(croppedBlob)
+ )
+ const { mutateAsync: faucetMutation } = useMutation('faucet-post', (body: FaucetParams) =>
+ axios.post(ytResponseData ? YPP_FAUCET_URL : FAUCET_URL, body)
+ )
+
+ const createNewMember = useCallback(
+ async (params: CreateNewMemberParams, onBlockSync?: () => void) => {
+ const { data, onError } = params
+ let fileUrl
+ const keypair = keyring.addFromMnemonic(data.mnemonic)
+ const address = keypair.address
+
+ if (data.avatar?.blob) {
+ fileUrl = await avatarMutation(data.avatar.blob)
+ }
+
+ const body: FaucetParams = {
+ account: address,
+ handle: data.handle,
+ avatar: fileUrl,
+ captchaToken: data.captchaToken,
+ }
+ try {
+ const response = await faucetMutation(body)
+ onBlockSync && addBlockAction({ callback: onBlockSync, targetBlock: response.data.block })
+
+ return String(response.data.memberId)
+ } catch (error) {
+ if (error instanceof UploadAvatarServiceError) {
+ displaySnackbar({
+ title: 'Something went wrong',
+ description: 'Avatar could not be uploaded. Try again later',
+ iconType: 'error',
+ })
+ onError?.()
+ SentryLogger.error('Failed to upload member avatar', 'SignUpModal', error)
+ return
+ }
+
+ const errorCode = isAxiosError(error) ? error.response?.data?.error : null
+
+ SentryLogger.error('Failed to create a membership', 'SignUpModal', error, { error: { errorCode } })
+
+ switch (errorCode) {
+ case 'TooManyRequestsPerIp':
+ displaySnackbar({
+ title: 'You reached a membership limit',
+ description:
+ 'Your membership could not be created as you already created one recently from the same IP address. Try again in 2 days.',
+ iconType: 'error',
+ })
+ break
+ case 'TooManyRequests':
+ displaySnackbar({
+ title: 'Our system is overloaded',
+ description:
+ 'Your membership could not be created as our system is undergoing a heavy traffic. Please, try again in a little while.',
+ iconType: 'error',
+ })
+ break
+ case 'OnlyNewAccountsCanBeUsedForScreenedMembers':
+ displaySnackbar({
+ title: 'This account is not new',
+ description:
+ 'Your membership could not be created as the selected wallet account has either made some transactions in the past or has some funds already on it. Please, try again using a fresh wallet account. ',
+ iconType: 'error',
+ })
+ break
+
+ default:
+ displaySnackbar({
+ title: 'Something went wrong',
+ description: `There was a problem with creating your membership. Please try again later.${
+ errorCode ? ` Error code: ${errorCode}` : ''
+ }`,
+ iconType: 'error',
+ })
+ break
+ }
+
+ onError?.()
+ return
+ }
+ },
+ [addBlockAction, avatarMutation, displaySnackbar, faucetMutation]
+ )
+
+ const createNewOrionAccount = useCallback(
+ async ({ data, onError, onStart, onSuccess }: SignUpParams) => {
+ onStart?.()
+
+ await cryptoWaitReady()
+ const keypair = keyring.addFromMnemonic(data.mnemonic)
+
+ const address = keypair.address
+
+ try {
+ await registerAccount({ type: 'internal', ...data })
+ setAnonymousUserId('')
+
+ if (!joystream) {
+ ConsoleLogger.error('No joystream instance')
+ return
+ }
+ const { lockedBalance } = await joystream.getAccountBalance(address)
+ const amountOfTokens = hapiBnToTokenNumber(new BN(lockedBalance))
+ onSuccess?.({ amountOfTokens })
+ handleLogin({ type: 'internal', ...data })
+ } catch (error) {
+ if (error instanceof OrionAccountError) {
+ const errorCode = error.status
+ const errorMessage = error.message
+ if (errorMessage === 'Account with the provided e-mail address already exists.') {
+ displaySnackbar({
+ iconType: 'error',
+ title: 'This email was used already',
+ description:
+ 'To create new membership you need to use an email that is not connected to already existing account.',
+ })
+ onError?.(RegisterError.EmailAlreadyExists)
+ } else {
+ displaySnackbar({
+ title: 'Something went wrong',
+ description: `There was a problem with creating your account. Please try again later.${
+ errorCode ? ` Error code: ${errorCode}` : ''
+ }`,
+ iconType: 'error',
+ })
+ onError?.(RegisterError.UnknownError)
+ }
+
+ SentryLogger.error('Failed to create an account', 'SignUpModal', error)
+ }
+ }
+ },
+ [displaySnackbar, handleLogin, joystream, setAnonymousUserId]
+ )
+ return {
+ createNewMember,
+ createNewOrionAccount,
+ }
+}
diff --git a/packages/atlas/src/hooks/useDebounceValue.ts b/packages/atlas/src/hooks/useDebounceValue.ts
new file mode 100644
index 0000000000..f69f28e3cd
--- /dev/null
+++ b/packages/atlas/src/hooks/useDebounceValue.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react'
+
+export function useDebounceValue(value: T, delay?: number): T {
+ const [debouncedValue, setDebouncedValue] = useState(value)
+
+ useEffect(() => {
+ const timer = setTimeout(() => setDebouncedValue(value), delay ?? 500)
+
+ return () => {
+ clearTimeout(timer)
+ }
+ }, [value, delay])
+
+ return debouncedValue
+}
diff --git a/packages/atlas/src/hooks/useDeleteVideo.ts b/packages/atlas/src/hooks/useDeleteVideo.ts
index b20590ac6e..dbf6f14709 100644
--- a/packages/atlas/src/hooks/useDeleteVideo.ts
+++ b/packages/atlas/src/hooks/useDeleteVideo.ts
@@ -8,7 +8,7 @@ import {
} from '@/api/queries/__generated__/videos.generated'
import { useStorageOperators } from '@/providers/assets/assets.provider'
import { useConfirmationModal } from '@/providers/confirmationModal'
-import { useJoystream } from '@/providers/joystream/joystream.hooks'
+import { useJoystream } from '@/providers/joystream'
import { useTransaction } from '@/providers/transactions/transactions.hooks'
import { useUploadsStore } from '@/providers/uploads/uploads.store'
import { useAuthorizedUser } from '@/providers/user/user.hooks'
diff --git a/packages/atlas/src/hooks/useDisplaySignInDialog.tsx b/packages/atlas/src/hooks/useDisplaySignInDialog.tsx
deleted file mode 100644
index b5e9de55c3..0000000000
--- a/packages/atlas/src/hooks/useDisplaySignInDialog.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useCallback } from 'react'
-
-import { Button } from '@/components/_buttons/Button'
-import { SignInDialogContent } from '@/components/_overlays/SignInDialogContent'
-import { useConfirmationModal } from '@/providers/confirmationModal'
-import { isMobile } from '@/utils/browser'
-
-type OpenSignInDialogArgs = {
- onCancel?: () => void
- onConfirm?: () => void
-}
-
-const isMobileDevice = isMobile()
-
-export const useDisplaySignInDialog = (props?: { interaction: boolean }) => {
- const { interaction = false } = props || {}
- const [openDialog, closeDialog] = useConfirmationModal()
-
- const openSignInDialog = useCallback(
- ({ onCancel, onConfirm }: OpenSignInDialogArgs) => {
- const handleCancel = () => {
- onCancel?.()
- closeDialog()
- }
- openDialog({
- dividers: true,
- children: => {
+ if (!urls || !urls.length) {
return
}
@@ -14,7 +19,10 @@ export const getSingleAssetUrl = async (urls: string[] | undefined | null, type:
const distributorUrl = distributionAssetUrl.split(`/${atlasConfig.storage.assetPath}/`)[0]
const assetTestPromise = testAssetDownload(distributionAssetUrl, type)
- const assetTestPromiseWithTimeout = withTimeout(assetTestPromise, atlasConfig.storage.assetResponseTimeout)
+ const assetTestPromiseWithTimeout = withTimeout(
+ assetTestPromise,
+ timeout ?? atlasConfig.storage.assetResponseTimeout
+ )
try {
await assetTestPromiseWithTimeout
@@ -23,25 +31,48 @@ export const getSingleAssetUrl = async (urls: string[] | undefined | null, type:
} catch (err) {
if (err instanceof TimeoutError) {
// AssetLogger.logDistributorResponseTimeout(eventEntry)
- ConsoleLogger.warn(`Distributor didn't respond in ${atlasConfig.storage.assetResponseTimeout} seconds`, {
- distributorUrl: distributorUrl,
- assetUrl: distributionAssetUrl,
- })
+ ConsoleLogger.warn(
+ `Distributor didn't respond in ${timeout ?? atlasConfig.storage.assetResponseTimeout} seconds`,
+ {
+ distributorUrl: distributorUrl,
+ assetUrl: distributionAssetUrl,
+ }
+ )
}
}
}
+
+ // if waterfall logic timeout was too small, fallback to waiting with no timeout
+ return new Promise((res) => {
+ const promises: Promise[] = []
+ for (const distributionAssetUrl of urls) {
+ const assetTestPromise = testAssetDownload(distributionAssetUrl, type)
+ promises.push(assetTestPromise)
+ }
+
+ Promise.race(promises)
+ .then(res)
+ .catch((error) => {
+ ConsoleLogger.warn(`Error during fallback asset promise race`, {
+ urls,
+ error,
+ })
+ })
+ })
}
export const useGetAssetUrl = (urls: string[] | undefined | null, type: 'image' | 'video' | 'subtitle') => {
const [url, setUrl] = useState(undefined)
const [isLoading, setIsLoading] = useState(true)
+ const { userBenchmarkTime } = useOperatorsContext()
useEffect(() => {
- if (url) {
+ if (url && urls?.includes(url)) {
return
}
const init = async () => {
+ setUrl(undefined)
setIsLoading(true)
- const resolvedUrl = await getSingleAssetUrl(urls, type)
+ const resolvedUrl = await getSingleAssetUrl(urls, type, userBenchmarkTime ?? undefined)
setIsLoading(false)
if (resolvedUrl) {
setUrl(resolvedUrl)
@@ -49,7 +80,11 @@ export const useGetAssetUrl = (urls: string[] | undefined | null, type: 'image'
}
init()
- }, [type, url, urls])
+
+ return () => {
+ setIsLoading(false)
+ }
+ }, [type, url, urls, userBenchmarkTime])
return { url, isLoading }
}
diff --git a/packages/atlas/src/hooks/useHasEnoughBalance.ts b/packages/atlas/src/hooks/useHasEnoughBalance.ts
index 2bed4d3af9..6755590cc0 100644
--- a/packages/atlas/src/hooks/useHasEnoughBalance.ts
+++ b/packages/atlas/src/hooks/useHasEnoughBalance.ts
@@ -1,7 +1,7 @@
import BN from 'bn.js'
import { useCallback, useEffect, useState } from 'react'
-import { useSubscribeAccountBalance } from '@/providers/joystream/joystream.hooks'
+import { useSubscribeAccountBalance } from '@/providers/joystream'
import { useSnackbar } from '@/providers/snackbars'
export const useHasEnoughBalance = (feeLoading: boolean, fee?: BN, callback?: () => void, skipFeeCheck?: boolean) => {
diff --git a/packages/atlas/src/hooks/useHeadTags.tsx b/packages/atlas/src/hooks/useHeadTags.tsx
index 63f926133b..4f00cd2535 100644
--- a/packages/atlas/src/hooks/useHeadTags.tsx
+++ b/packages/atlas/src/hooks/useHeadTags.tsx
@@ -10,7 +10,7 @@ export const useHeadTags = (title?: string | null, metaTagsMapping: MetaTags = {
const pageTitle = title ? `${title} - ${atlasConfig.general.appName}` : atlasConfig.general.appName
const commonTags = generateCommonMetaTags(
atlasConfig.general.appName,
- atlasConfig.general.appDescription,
+ atlasConfig.general.appUrl,
pageTitle,
atlasConfig.general.appDescription,
atlasConfig.general.appOgImgPath,
diff --git a/packages/atlas/src/hooks/useHidePasswordInInput.tsx b/packages/atlas/src/hooks/useHidePasswordInInput.tsx
new file mode 100644
index 0000000000..84c9f3a119
--- /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: {
+ icon: isPasswordVisible ? ({
+ query: GetMembershipsDocument,
+ variables: { where: { handle_eq: value } },
+ })
+ return !memberships[0]
+ },
+ [client]
+ )
+
+ const generateUniqueMemberHandleBasedOnInput = useCallback(
+ async (userHandle: string, attempt = 1): Promise => {
+ const sanitizedHandle = removeSpecialCharacters(userHandle)
+
+ if (attempt >= 5) {
+ const newMemberHandle = sanitizedHandle + createId()
+ const isAvailable = await checkIfMemberIsAvailable(sanitizedHandle)
+ if (!isAvailable) {
+ return generateUniqueMemberHandleBasedOnInput(newMemberHandle, 1)
+ }
+ }
+
+ const isAvailable = await checkIfMemberIsAvailable(sanitizedHandle)
+ if (!isAvailable) {
+ const modified = attempt === 1 ? `${sanitizedHandle}${attempt}` : `${sanitizedHandle.slice(-1)}${attempt}`
+
+ return generateUniqueMemberHandleBasedOnInput(modified, attempt + 1)
+ }
+ return sanitizedHandle
+ },
+ [checkIfMemberIsAvailable]
+ )
+
+ return { checkIfMemberIsAvailable, generateUniqueMemberHandleBasedOnInput }
+}
diff --git a/packages/atlas/src/hooks/useVideoForm.ts b/packages/atlas/src/hooks/useVideoForm.ts
new file mode 100644
index 0000000000..770c964e25
--- /dev/null
+++ b/packages/atlas/src/hooks/useVideoForm.ts
@@ -0,0 +1,307 @@
+import { formatISO, isValid as isValidDate } from 'date-fns'
+import { useCallback, useMemo } from 'react'
+import { UseFormReturn } from 'react-hook-form'
+
+import { VideoInputAssets, VideoInputMetadata } from '@/joystream-lib/types'
+import { useChannelsStorageBucketsCount } from '@/providers/assets/assets.hooks'
+import { useBloatFeesAndPerMbFees, useFee } from '@/providers/joystream/joystream.hooks'
+import { useUser } from '@/providers/user/user.hooks'
+import {
+ VideoFormAssetData,
+ VideoFormAssets,
+ VideoFormData,
+ VideoWorkspaceFormStatus,
+ VideoWorkspaceVideoAssets,
+ VideoWorkspaceVideoFormFields,
+} from '@/providers/videoWorkspace'
+import { SubtitlesInput } from '@/types/subtitles'
+import { createId } from '@/utils/createId'
+import { ConsoleLogger } from '@/utils/logs'
+import { createNftInputMetadata } from '@/utils/video'
+import { useVideoFormAssets } from '@/views/studio/VideoWorkspace/VideoForm/VideoForm.hooks'
+
+type UseVideoFormProps = {
+ isEdit: boolean
+ id: string | null
+ onSubmit: (data: VideoFormData) => Promise
+ form: UseFormReturn
+}
+
+export const useVideoForm = ({ isEdit, id, onSubmit, form }: UseVideoFormProps) => {
+ const isNew = !isEdit
+ const { memberId, channelId } = useUser()
+
+ const {
+ handleSubmit: createSubmitHandler,
+ getValues,
+ setValue,
+ watch,
+ trigger,
+ formState: { errors, dirtyFields, isDirty, isValid },
+ } = form
+ const formData = getValues()
+
+ const channelBucketsCount = useChannelsStorageBucketsCount(channelId)
+ const { videoStateBloatBondValue, dataObjectStateBloatBondValue } = useBloatFeesAndPerMbFees()
+
+ const createVideoInputMetadata = useCallback(
+ (data: VideoWorkspaceVideoFormFields): VideoInputMetadata => {
+ const videoInputFile = data?.assets?.video
+ const license = {
+ code: data.licenseCode ?? undefined,
+ attribution: data.licenseAttribution ?? undefined,
+ customText: data.licenseCustomText ?? undefined,
+ }
+ const anyLicenseFieldsDirty =
+ dirtyFields.licenseCode || dirtyFields.licenseAttribution || dirtyFields.licenseCustomText
+
+ return {
+ ...(isNew || dirtyFields.title ? { title: data.title } : {}),
+ ...(isNew || dirtyFields.description ? { description: data.description } : {}),
+ ...(isNew || dirtyFields.category ? { category: data.category } : {}),
+ ...(isNew || dirtyFields.isPublic ? { isPublic: data.isPublic } : {}),
+ ...((isNew || dirtyFields.hasMarketing) && data.hasMarketing !== null
+ ? { hasMarketing: data.hasMarketing }
+ : {}),
+ ...((isNew || dirtyFields.isExplicit) && data.isExplicit !== null ? { isExplicit: data.isExplicit } : {}),
+ ...((isNew || dirtyFields.language) && data.language !== null ? { language: data.language } : {}),
+ ...(isNew || anyLicenseFieldsDirty ? { license } : {}),
+ ...((isNew || dirtyFields.enableComments) && data.enableComments !== null
+ ? { enableComments: data.enableComments }
+ : {}),
+ ...((isNew || dirtyFields.publishedBeforeJoystream) &&
+ data.publishedBeforeJoystream !== null &&
+ isValidDate(data.publishedBeforeJoystream)
+ ? {
+ publishedBeforeJoystream: formatISO(data.publishedBeforeJoystream),
+ }
+ : {}),
+ ...(isNew || dirtyFields.assets?.video
+ ? {
+ mimeMediaType: videoInputFile?.mimeType,
+ }
+ : {}),
+ ...(isNew || dirtyFields.assets?.video ? { duration: Math.round(videoInputFile?.duration || 0) } : {}),
+ ...(isNew || dirtyFields.assets?.video ? { mediaPixelHeight: videoInputFile?.mediaPixelHeight } : {}),
+ ...(isNew || dirtyFields.assets?.video ? { mediaPixelWidth: videoInputFile?.mediaPixelWidth } : {}),
+ ...(isNew || dirtyFields.subtitlesArray
+ ? {
+ subtitles: data.subtitlesArray?.map((subtitle, idx) => ({
+ id: subtitle.id || `new-subtitle-${idx}`,
+ language: subtitle.languageIso,
+ type: subtitle?.type,
+ mimeType: 'text/vtt',
+ })),
+ }
+ : {}),
+ clearSubtitles: !data.subtitlesArray?.length,
+ }
+ },
+ [dirtyFields, isNew]
+ )
+
+ // for fee only
+ const createBasicVideoInputAssetsInfo = (
+ assets?: VideoWorkspaceVideoAssets,
+ subtitles?: SubtitlesInput[]
+ ): VideoInputAssets => {
+ if (!assets) {
+ return {}
+ }
+ return {
+ ...(assets.video?.blob?.size
+ ? {
+ media: {
+ ipfsHash: '',
+ size: assets.video.blob.size,
+ },
+ }
+ : {}),
+ ...(assets.thumbnail?.blob?.size
+ ? {
+ thumbnailPhoto: {
+ ipfsHash: '',
+ size: assets.thumbnail.blob.size,
+ },
+ }
+ : {}),
+ ...(subtitles?.length
+ ? { subtitles: subtitles.map((subtitle) => ({ ipfsHash: '', size: subtitle.file?.size || 0 })) }
+ : {}),
+ }
+ }
+
+ const videoInputMetadata = createVideoInputMetadata(formData)
+ const nftMetadata = createNftInputMetadata(formData)
+ const assets = createBasicVideoInputAssetsInfo(formData.assets, formData.subtitlesArray ?? undefined)
+
+ const isSigned = memberId && channelId
+ const { fullFee: createVideoFee, loading: createVideoFeeLoading } = useFee(
+ 'createVideoTx',
+ isSigned && isNew
+ ? [
+ memberId,
+ channelId,
+ videoInputMetadata,
+ nftMetadata,
+ assets,
+ dataObjectStateBloatBondValue.toString(),
+ videoStateBloatBondValue.toString(),
+ channelBucketsCount.toString(),
+ ]
+ : undefined,
+ assets
+ )
+ const { fullFee: updateVideoFee, loading: updateVideoFeeLoading } = useFee(
+ 'updateVideoTx',
+ isSigned && isEdit && id
+ ? [
+ id,
+ memberId,
+ videoInputMetadata,
+ nftMetadata,
+ assets,
+ [], // provide empty removedAssetsId array to simplify fee calculation
+ dataObjectStateBloatBondValue.toString(),
+ channelBucketsCount.toString(),
+ ]
+ : undefined,
+ assets
+ )
+
+ // manage assets used by the form
+ const videoFormAssets = useVideoFormAssets(watch, getValues, setValue, dirtyFields, trigger, errors)
+ const {
+ videoHashPromise,
+ thumbnailHashPromise,
+ mediaAsset,
+ thumbnailAsset,
+ subtitlesHashesPromises,
+ hasUnsavedAssets,
+ } = videoFormAssets
+
+ const submitHandler = useMemo(
+ () =>
+ createSubmitHandler(async (data) => {
+ if (!id) {
+ return
+ }
+
+ const { video: videoInputFile, thumbnail: thumbnailInputFile } = data.assets
+
+ if (isNew && (!videoInputFile.blob || !videoHashPromise)) {
+ ConsoleLogger.error('Video file cannot be empty')
+ return
+ }
+
+ if (isNew && (!thumbnailAsset || !thumbnailHashPromise)) {
+ ConsoleLogger.error('Thumbnail cannot be empty')
+ return
+ }
+
+ const metadata = createVideoInputMetadata(data)
+
+ const videoWidth = videoInputFile?.mediaPixelWidth
+ const videoHeight = videoInputFile?.mediaPixelHeight
+
+ const mappedSubtitles: PartialBy[] | undefined = data?.subtitlesArray?.map(
+ (subtitle, idx) => ({
+ id: metadata.subtitles?.[idx].id || createId(),
+ blob: subtitle.file,
+ hashPromise: subtitlesHashesPromises[idx] || Promise.resolve(''),
+ subtitlesLanguageIso: subtitle.languageIso,
+ })
+ )
+ const mappedFilteredSubtitles: VideoFormAssets['subtitles'] = mappedSubtitles?.filter(
+ (subtitle): subtitle is VideoFormAssetData => !!subtitle.blob
+ )
+
+ const assets: VideoFormAssets = {
+ ...(videoInputFile?.blob && videoInputFile.id && videoHashPromise
+ ? {
+ media: {
+ id: videoInputFile.id,
+ blob: videoInputFile.blob,
+ url: videoInputFile.url || undefined,
+ hashPromise: videoHashPromise,
+ dimensions: videoWidth && videoHeight ? { height: videoHeight, width: videoWidth } : undefined,
+ },
+ }
+ : {}),
+ ...(thumbnailAsset?.blob && thumbnailInputFile.cropId && thumbnailInputFile.originalId && thumbnailHashPromise
+ ? {
+ thumbnailPhoto: {
+ id: thumbnailInputFile.cropId,
+ originalId: thumbnailInputFile.originalId,
+ blob: thumbnailAsset.blob,
+ url: thumbnailAsset.url || undefined,
+ hashPromise: thumbnailHashPromise,
+ dimensions: thumbnailInputFile?.assetDimensions,
+ cropData: thumbnailInputFile?.imageCropData,
+ name: (thumbnailInputFile.originalBlob as File)?.name,
+ },
+ }
+ : {}),
+ ...(mappedFilteredSubtitles?.length
+ ? {
+ subtitles: mappedFilteredSubtitles,
+ }
+ : {}),
+ }
+
+ const nftMetadata = createNftInputMetadata(data)
+ onSubmit({
+ metadata,
+ assets,
+ nftMetadata,
+ })
+ }),
+ [
+ createSubmitHandler,
+ createVideoInputMetadata,
+ id,
+ isNew,
+ onSubmit,
+ subtitlesHashesPromises,
+ thumbnailAsset,
+ thumbnailHashPromise,
+ videoHashPromise,
+ ]
+ )
+
+ const isFormValid = (isEdit || !!mediaAsset) && !!thumbnailAsset && isValid
+ const actionBarPrimaryText = !isEdit ? 'Publish & upload' : 'Publish changes'
+
+ const formStatus: VideoWorkspaceFormStatus = useMemo(
+ () => ({
+ hasUnsavedAssets,
+ isDirty,
+ isDisabled: isEdit ? !isDirty : false,
+ actionBarPrimaryText,
+ actionBarFee: isEdit ? updateVideoFee : createVideoFee,
+ actionBarFeeLoading: isEdit ? updateVideoFeeLoading : createVideoFeeLoading,
+ isValid: isFormValid,
+ triggerFormSubmit: submitHandler,
+ }),
+ [
+ actionBarPrimaryText,
+ createVideoFee,
+ createVideoFeeLoading,
+ hasUnsavedAssets,
+ isDirty,
+ isEdit,
+ isFormValid,
+ submitHandler,
+ updateVideoFee,
+ updateVideoFeeLoading,
+ ]
+ )
+
+ return {
+ formStatus,
+ videoInputMetadata,
+ nftMetadata,
+ submitHandler,
+ videoFormAssets,
+ }
+}
diff --git a/packages/atlas/src/joystream-lib/extrinsics.ts b/packages/atlas/src/joystream-lib/extrinsics.ts
index b5e3688154..6889efefe7 100644
--- a/packages/atlas/src/joystream-lib/extrinsics.ts
+++ b/packages/atlas/src/joystream-lib/extrinsics.ts
@@ -32,7 +32,7 @@ import {
wrapMetadata,
} from './metadata'
import {
- AccountId,
+ AtlasSigner,
ChannelExtrinsicResult,
ChannelId,
ChannelInputAssets,
@@ -63,7 +63,7 @@ import {
VideoReaction,
} from './types'
-type AccountIdAccessor = () => AccountId | null
+type AccountIdAccessor = () => AtlasSigner | null
type PublicExtrinsic = TxFunction extends (...a: infer U) => unknown
? (...a: [...U, ExtrinsicStatusCallbackFn | undefined]) => Promise
: never
@@ -196,7 +196,8 @@ export class JoystreamLibExtrinsics {
inputBuckets: ChannelInputBuckets,
expectedDataObjectStateBloatBond: StringifiedNumber,
expectedChannelStateBloatBond: StringifiedNumber,
- rawMetadataProcessor?: RawMetadataProcessorFn
+ rawMetadataProcessor?: RawMetadataProcessorFn,
+ collaboratorMemberId?: MemberId | null
) => {
await this.ensureApi()
@@ -210,7 +211,16 @@ export class JoystreamLibExtrinsics {
const creationParameters = createType('PalletContentChannelCreationParametersRecord', {
meta: channelMetadata,
assets: channelAssets,
- collaborators: createType('BTreeMap>', {}),
+ collaborators: createType(
+ 'BTreeMap>',
+ collaboratorMemberId
+ ? {
+ [collaboratorMemberId]: createType('BTreeSet', [
+ 'AddVideo',
+ ]),
+ }
+ : {}
+ ),
storageBuckets: createType('BTreeSet', inputBuckets.storage),
distributionBuckets: createType('BTreeSet', inputBuckets.distribution),
expectedDataObjectStateBloatBond: new BN(expectedDataObjectStateBloatBond),
@@ -230,6 +240,7 @@ export class JoystreamLibExtrinsics {
expectedDataObjectStateBloatBond,
expectedChannelStateBloatBond,
rawMetadataProcessor,
+ collaboratorMemberId,
cb
) => {
const tx = await this.createChannelTx(
@@ -239,7 +250,8 @@ export class JoystreamLibExtrinsics {
inputBuckets,
expectedDataObjectStateBloatBond,
expectedChannelStateBloatBond,
- rawMetadataProcessor
+ rawMetadataProcessor,
+ collaboratorMemberId
)
const { block, getEventData } = await this.sendExtrinsic(tx, cb)
diff --git a/packages/atlas/src/joystream-lib/helpers.ts b/packages/atlas/src/joystream-lib/helpers.ts
index e0e2cec8a1..255a3a7844 100644
--- a/packages/atlas/src/joystream-lib/helpers.ts
+++ b/packages/atlas/src/joystream-lib/helpers.ts
@@ -19,6 +19,7 @@ import { SentryLogger } from '@/utils/logs'
import { NFT_DEFAULT_BID_LOCK_DURATION, NFT_DEFAULT_EXTENSION_PERIOD, PERBILL_ONE_PERCENT } from './config'
import { JoystreamLibError } from './errors'
import {
+ AtlasSigner,
ChannelAssets,
ChannelAssetsIds,
DataObjectMetadata,
@@ -111,7 +112,7 @@ type RawExtrinsicResult = {
export const sendExtrinsicAndParseEvents = (
tx: SubmittableExtrinsic<'promise'>,
- accountId: string,
+ accountId: AtlasSigner,
registry: Registry,
endpoint: string,
cb?: ExtrinsicStatusCallbackFn
@@ -125,7 +126,6 @@ export const sendExtrinsicAndParseEvents = (
tx.signAndSend(accountId, { nonce: -1 }, (result) => {
const extrinsicsHash = tx.hash.toHex()
const { status, isError, events: rawEvents } = result
-
if (isError) {
unsub()
diff --git a/packages/atlas/src/joystream-lib/lib.ts b/packages/atlas/src/joystream-lib/lib.ts
index 62ece9f19d..e39dec6524 100644
--- a/packages/atlas/src/joystream-lib/lib.ts
+++ b/packages/atlas/src/joystream-lib/lib.ts
@@ -1,8 +1,9 @@
// load type augments
-import '@joystream/types'
+import * as types from '@joystream/types'
import { ApiPromise, WsProvider } from '@polkadot/api'
import { QueryableStorageMultiArg } from '@polkadot/api-base/types/storage'
import { Signer } from '@polkadot/api/types'
+import { Keyring } from '@polkadot/keyring'
import { getSpecTypes } from '@polkadot/types-known'
import { Codec, SignerPayloadRawBase } from '@polkadot/types/types'
import { base64Encode } from '@polkadot/util-crypto'
@@ -15,13 +16,15 @@ import { ConsoleLogger, SentryLogger } from '@/utils/logs'
import { JoystreamLibError } from './errors'
import { JoystreamLibExtrinsics } from './extrinsics'
-import { AccountId } from './types'
+import { AccountId, AtlasSigner } from './types'
+
+export const keyring = new Keyring({ type: 'sr25519', ss58Format: types.JOYSTREAM_ADDRESS_PREFIX })
export class JoystreamLib {
readonly api: ApiPromise
readonly extrinsics: JoystreamLibExtrinsics
- private _selectedAccountId: AccountId | null = null
+ private _selectedAccountId: AtlasSigner | null = null
get selectedAccountId() {
return this._selectedAccountId
}
@@ -68,18 +71,25 @@ export class JoystreamLib {
}
/* Public */
- async setActiveAccount(accountId: AccountId | null, signer?: Signer) {
- if (!accountId) {
+ async setActiveAccount(payloadType: 'address' | 'seed', payload: string | null, signer?: Signer) {
+ if (!payload) {
this._selectedAccountId = null
this.api.setSigner({})
return
- } else if (!signer) {
+ } else if (!signer && payloadType === 'address') {
SentryLogger.error('Missing signer for setActiveAccount', 'JoystreamLib')
return
}
- this._selectedAccountId = accountId
- this.api.setSigner(signer)
+ if (payloadType === 'seed') {
+ this._selectedAccountId = keyring.addFromMnemonic(payload)
+ } else {
+ this._selectedAccountId = payload
+ }
+
+ if (signer) {
+ this.api.setSigner(signer)
+ }
}
signMessage = async (signerPayload: SignerPayloadRawBase) => {
diff --git a/packages/atlas/src/joystream-lib/types.ts b/packages/atlas/src/joystream-lib/types.ts
index bad7591135..71bbfb48ae 100644
--- a/packages/atlas/src/joystream-lib/types.ts
+++ b/packages/atlas/src/joystream-lib/types.ts
@@ -1,11 +1,13 @@
import { IChannelMetadata, IMembershipMetadata, ISubtitleMetadata, IVideoMetadata } from '@joystream/metadata-protobuf'
import { AugmentedEvent, AugmentedEvents } from '@polkadot/api/types/events'
import { GenericEvent } from '@polkadot/types'
+import { IKeyringPair } from '@polkadot/types/types/interfaces'
import { JoystreamLibExtrinsics } from './extrinsics'
export type StringifiedNumber = string
+export type AtlasSigner = IKeyringPair | string
export type AccountId = string
export type MemberId = string
export type ChannelId = string
diff --git a/packages/atlas/src/main.tsx b/packages/atlas/src/main.tsx
index ed25485f9b..b1811d3c33 100644
--- a/packages/atlas/src/main.tsx
+++ b/packages/atlas/src/main.tsx
@@ -1,3 +1,4 @@
+import { Buffer } from 'buffer'
import { createRoot } from 'react-dom/client'
import { atlasConfig } from '@/config'
@@ -12,6 +13,10 @@ const initApp = async () => {
AssetLogger.initialize(atlasConfig.analytics.assetLogs?.url)
}
+ if (typeof globalThis !== 'undefined') {
+ globalThis.Buffer = Buffer
+ }
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const container = document.getElementById('root')!
const root = createRoot(container)
diff --git a/packages/atlas/src/providers/assets/assets.helpers.ts b/packages/atlas/src/providers/assets/assets.helpers.ts
index f27719233b..43928ba531 100644
--- a/packages/atlas/src/providers/assets/assets.helpers.ts
+++ b/packages/atlas/src/providers/assets/assets.helpers.ts
@@ -1,3 +1,5 @@
+import axios from 'axios'
+
import { BasicMembershipFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
import { BUILD_ENV } from '@/config/env'
import { AssetLogger, ConsoleLogger, DataObjectResponseMetric, DistributorEventEntry } from '@/utils/logs'
@@ -51,7 +53,10 @@ export const testAssetDownload = (url: string, type: 'image' | 'video' | 'subtit
if (type === 'image') {
img = new Image()
- img.addEventListener('load', resolve)
+ img.addEventListener('load', (e) => {
+ e.preventDefault()
+ resolve()
+ })
img.addEventListener('error', reject)
img.src = url
} else if (type === 'video') {
@@ -105,3 +110,14 @@ export const logDistributorPerformance = async (assetUrl: string, eventEntry: Di
AssetLogger.logDistributorResponseTime(eventEntry, metric)
}
+
+export const getFastestImageUrl = async (urls: string[]) => {
+ const promises = urls.map((url) => {
+ return axios.head(url, {
+ headers: {
+ 'Cache-Control': 'no-cache',
+ },
+ })
+ })
+ return Promise.race(promises)
+}
diff --git a/packages/atlas/src/providers/assets/assets.provider.tsx b/packages/atlas/src/providers/assets/assets.provider.tsx
index 4f175f7290..06dc54e846 100644
--- a/packages/atlas/src/providers/assets/assets.provider.tsx
+++ b/packages/atlas/src/providers/assets/assets.provider.tsx
@@ -26,9 +26,12 @@ import {
GetStorageBucketsWithBagsQuery,
GetStorageBucketsWithBagsQueryVariables,
} from '@/api/queries/__generated__/storage.generated'
+import { useGetBasicVideosLazyQuery } from '@/api/queries/__generated__/videos.generated'
import { ViewErrorFallback } from '@/components/ViewErrorFallback'
import { atlasConfig } from '@/config'
import { absoluteRoutes } from '@/config/routes'
+import { useMountEffect } from '@/hooks/useMountEffect'
+import { getFastestImageUrl } from '@/providers/assets/assets.helpers'
import { UserCoordinates, useUserLocationStore } from '@/providers/userLocation'
import { ConsoleLogger, SentryLogger } from '@/utils/logs'
@@ -41,6 +44,7 @@ type OperatorsContextValue = {
failedStorageOperatorIds: string[]
setFailedStorageOperatorIds: Dispatch>
fetchStorageOperators: () => Promise
+ userBenchmarkTime: number | null
}
const OperatorsContext = createContext(undefined)
OperatorsContext.displayName = 'OperatorsContext'
@@ -49,6 +53,8 @@ export const OperatorsContextProvider: FC = ({ children }) =>
const storageOperatorsMappingPromiseRef = useRef>()
const [storageOperatorsError, setStorageOperatorsError] = useState(null)
const [failedStorageOperatorIds, setFailedStorageOperatorIds] = useState([])
+ const [userBenchmarkTime, setUserBenchmarkTime] = useState(null)
+ const [getBasicVideo] = useGetBasicVideosLazyQuery()
const {
coordinates,
expiry,
@@ -145,6 +151,37 @@ export const OperatorsContextProvider: FC = ({ children }) =>
fetchStorageOperators()
}, [fetchStorageOperators, isStudio])
+ useMountEffect(() => {
+ const initBenchmark = async () => {
+ const { data } = await getBasicVideo({
+ variables: {
+ limit: 1,
+ where: {
+ thumbnailPhoto: {
+ isAccepted_eq: true,
+ },
+ },
+ },
+ })
+ const thumbnail = data?.videos[0].thumbnailPhoto
+ if (thumbnail) {
+ const promiseRace = getFastestImageUrl(thumbnail.resolvedUrls)
+ const startTime = performance.now()
+ await promiseRace
+ const msDuration = performance.now() - startTime
+ const previousTimeout = userBenchmarkTime ?? atlasConfig.storage.assetResponseTimeout
+ if (msDuration > previousTimeout || msDuration < previousTimeout / 2) {
+ setUserBenchmarkTime((msDuration + previousTimeout) * 0.75)
+ }
+ }
+ }
+ initBenchmark()
+ const id = setInterval(initBenchmark, 30 * 1_000)
+ return () => {
+ clearInterval(id)
+ }
+ })
+
if (storageOperatorsError) {
return = ({ children }) =>
failedStorageOperatorIds,
setFailedStorageOperatorIds,
fetchStorageOperators,
+ userBenchmarkTime,
}}
>
{children}
diff --git a/packages/atlas/src/providers/auth/auth.helpers.ts b/packages/atlas/src/providers/auth/auth.helpers.ts
new file mode 100644
index 0000000000..d2842d0a55
--- /dev/null
+++ b/packages/atlas/src/providers/auth/auth.helpers.ts
@@ -0,0 +1,272 @@
+import { ScryptOpts, scrypt } from '@noble/hashes/scrypt'
+import { KeyringPair } from '@polkadot/keyring/types'
+import { hexToU8a, u8aToHex } from '@polkadot/util'
+import { mnemonicToEntropy as _mnemonicToEntropy, cryptoWaitReady } from '@polkadot/util-crypto'
+import axios, { isAxiosError } from 'axios'
+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, LogInErrors, OrionAccountError, RegisterParams, RegisterPayload } from './auth.types'
+
+export const getArtifactId = async (email: string, password: string) => {
+ return (await scryptHash(`${email}:${password}`, '0x0818ee04c541716831bdd0f598fa4bbb')).toString('hex')
+}
+
+export const handleAnonymousAuth = async (userId?: string | null) => {
+ try {
+ const response = await axios.post<{
+ success: boolean
+ userId: string
+ }>(
+ `${ORION_AUTH_URL}/anonymous-auth`,
+ { ...(userId ? { userId: userId } : {}) },
+ {
+ method: 'POST',
+ withCredentials: true,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ )
+ if (response.data.userId && response.data.success) {
+ return response.data.userId
+ }
+ } catch (error) {
+ SentryLogger.error('Error during fetching user id', 'setAnonymousAuth', error)
+ }
+}
+
+export const getArtifacts = async (id: string, email: string, password: string) => {
+ try {
+ const res = await axios.get<{ cipherIv: string; encryptedSeed: string }>(
+ `${ORION_AUTH_URL}/artifacts?id=${id}&email=${encodeURIComponent(email)}`
+ )
+ const { cipherIv, encryptedSeed: encryptedEntropy } = res.data
+ const cipherKey = await scryptHash(`${email}:${password}`, Buffer.from(cipherIv, 'hex'))
+ const decryptedEntropy = aes256CbcDecrypt(encryptedEntropy, cipherKey, Buffer.from(cipherIv, 'hex'))
+ const mnemonic = entropyToMnemonic(decryptedEntropy)
+
+ const keypair = keyring.addFromMnemonic(mnemonic)
+ return {
+ keypair,
+ decryptedEntropy,
+ }
+ } catch (error) {
+ if (isAxiosError(error) && error.response?.status === 404) {
+ throw new Error(LogInErrors.ArtifactsNotFound)
+ }
+ throw new Error(LogInErrors.UnknownError)
+ }
+}
+
+export const entropyToMnemonic = (hexSeed: string) =>
+ _entropyToMnemonic(Buffer.from(hexSeed.slice(2, hexSeed.length), 'hex'))
+
+export async function scryptHash(
+ data: string,
+ salt: Buffer | string,
+ options: ScryptOpts = { N: 32768, r: 8, p: 1, dkLen: 32 }
+): Promise {
+ return new Promise((resolve) => {
+ resolve(Buffer.from(scrypt(Buffer.from(data), salt, options)))
+ })
+}
+
+export function aes256CbcDecrypt(encryptedData: string, key: Buffer, iv: Buffer): string {
+ const keyWA = enc.Hex.parse(key.toString('hex'))
+ const ivWA = enc.Hex.parse(iv.toString('hex'))
+ const decrypted = AES.decrypt(lib.CipherParams.create({ ciphertext: enc.Hex.parse(encryptedData) }), keyWA, {
+ iv: ivWA,
+ mode: mode.CBC,
+ })
+ return decrypted.toString(enc.Hex)
+}
+
+export const decodeSessionEncodedSeedToMnemonic = async (encodedSeed: string) => {
+ try {
+ const { data } = await axios.get(`${ORION_AUTH_URL}/session-artifacts`, { withCredentials: true })
+
+ if (!(data.cipherKey || data.cipherIv)) {
+ return null
+ }
+
+ const { cipherKey, cipherIv } = data
+ const decryptedSeed = aes256CbcDecrypt(encodedSeed, Buffer.from(cipherKey, 'hex'), Buffer.from(cipherIv, 'hex'))
+ return _entropyToMnemonic(Buffer.from(decryptedSeed.slice(2, decryptedSeed.length), 'hex'))
+ } catch (e) {
+ if (isAxiosError(e) && e.response?.data.message === 'isAxiosError') {
+ logoutRequest()
+ }
+ return null
+ }
+}
+
+export const loginRequest = (
+ signature: string,
+ payload: {
+ joystreamAccountId: string
+ gatewayName: string
+ timestamp: number
+ action: 'login'
+ }
+) =>
+ axios.post<{ accountId: string }>(
+ `${ORION_AUTH_URL}/login`,
+ {
+ signature,
+ payload,
+ },
+ {
+ withCredentials: true,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ )
+
+export const logoutRequest = () => axios.post(`${ORION_AUTH_URL}/logout`, {}, { withCredentials: true })
+
+export const getCorrectLoginModal = (): AuthModals => {
+ const hasAtleastOneWallet = getWalletsList().some((wallet) => wallet.installed)
+ return hasAtleastOneWallet ? 'externalLogIn' : 'logIn'
+}
+
+export const prepareEncryptionArtifacts = async (email: string, password: string, mnemonic: string) => {
+ try {
+ const entropy = _mnemonicToEntropy(mnemonic)
+ const seed = u8aToHex(entropy)
+
+ 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'))
+ const ivWA = enc.Hex.parse(cipherIv)
+ const wordArray = enc.Hex.parse(seed)
+
+ const encrypted = AES.encrypt(wordArray, keyWA, { iv: ivWA, mode: mode.CBC })
+
+ return {
+ id,
+ cipherIv,
+ encryptedSeed: encrypted.ciphertext.toString(enc.Hex),
+ }
+ } catch (error) {
+ SentryLogger.error('Error during preparing encryption artifacts', 'prepareEncryptionArtifacts', error)
+ }
+}
+
+export const registerAccount = async (params: RegisterParams) => {
+ try {
+ await cryptoWaitReady()
+
+ const registerPayload: RegisterPayload = {
+ gatewayName: 'Gleev',
+ memberId: params.memberId,
+ joystreamAccountId: '',
+ timestamp: Date.now() - 30_000,
+ action: 'createAccount',
+ email: params.email,
+ }
+ let registerSignature = null
+ let keypair: KeyringPair | null = null
+ if (params.type === 'internal') {
+ const { email, password, mnemonic } = params
+ const encryptionArtifacts = await prepareEncryptionArtifacts(email, password, mnemonic)
+
+ keypair = keyring.addFromMnemonic(mnemonic)
+ registerPayload.encryptionArtifacts = encryptionArtifacts
+ registerPayload.joystreamAccountId = keypair.address
+ registerSignature = u8aToHex(keypair.sign(JSON.stringify(registerPayload)))
+ }
+
+ if (params.type === 'external') {
+ registerPayload.joystreamAccountId = params.address
+ registerPayload.email = params.email
+ registerSignature = await params.signature(JSON.stringify(registerPayload))
+ }
+ await axios.post(
+ `${ORION_AUTH_URL}/account`,
+ {
+ payload: registerPayload,
+ signature: registerSignature,
+ },
+ {
+ withCredentials: true,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ )
+
+ return registerPayload.joystreamAccountId
+ } catch (error) {
+ if (!isAxiosError<{ message?: string }>(error)) {
+ throw new OrionAccountError({ details: error, message: 'Something went wrong' })
+ }
+ const errorMessage = error.response?.data?.message
+ throw new OrionAccountError({
+ details: error,
+ message: errorMessage || 'Something went wrong',
+ status: error.response?.status,
+ })
+ }
+}
+
+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.hooks.ts b/packages/atlas/src/providers/auth/auth.hooks.ts
new file mode 100644
index 0000000000..04b0e98e8f
--- /dev/null
+++ b/packages/atlas/src/providers/auth/auth.hooks.ts
@@ -0,0 +1 @@
+export { useAuthContext as useAuth } from '@/providers/auth/auth.provider'
diff --git a/packages/atlas/src/providers/auth/auth.provider.tsx b/packages/atlas/src/providers/auth/auth.provider.tsx
new file mode 100644
index 0000000000..48ac435a64
--- /dev/null
+++ b/packages/atlas/src/providers/auth/auth.provider.tsx
@@ -0,0 +1,260 @@
+import { useApolloClient } from '@apollo/client'
+import { u8aToHex } from '@polkadot/util'
+import { cryptoWaitReady } from '@polkadot/util-crypto'
+import axios from 'axios'
+import { AES, enc, lib, mode } from 'crypto-js'
+import { FC, PropsWithChildren, createContext, useCallback, useContext, useMemo, useState } from 'react'
+
+import { GetCurrentAccountQuery, useGetCurrentAccountLazyQuery } from '@/api/queries/__generated__/accounts.generated'
+import { atlasConfig } from '@/config'
+import { ORION_AUTH_URL } from '@/config/env'
+import { useMountEffect } from '@/hooks/useMountEffect'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
+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'
+import { useWalletStore } from '@/providers/wallet/wallet.store'
+import { SentryLogger } from '@/utils/logs'
+
+import {
+ decodeSessionEncodedSeedToMnemonic,
+ entropyToMnemonic,
+ getArtifactId,
+ getArtifacts,
+ handleAnonymousAuth,
+ logoutRequest,
+} from './auth.helpers'
+import { AuthContextValue, LogInErrors } from './auth.types'
+
+const AuthContext = createContext(undefined)
+AuthContext.displayName = 'AuthContext'
+
+export const AuthProvider: FC = ({ children }) => {
+ const [isAuthenticating, setIsAuthenticating] = useState(true)
+ const [loggedAddress, setLoggedAddress] = useState(null)
+ const [currentUser, setCurrentUser] = useState(null)
+ const [lazyCurrentAccountQuery, { refetch }] = useGetCurrentAccountLazyQuery()
+ const { setApiActiveAccount } = useJoystream()
+ const { identifyUser, trackLogout } = useSegmentAnalytics()
+ const client = useApolloClient()
+ const {
+ anonymousUserId,
+ encodedSeed,
+ actions: { setAnonymousUserId, setEncodedSeed },
+ } = useAuthStore()
+ const lastUsedWalletName = useWalletStore((store) => store.lastUsedWalletName)
+ const { signInToWallet } = useWallet()
+
+ useMountEffect(() => {
+ const init = async () => {
+ await cryptoWaitReady()
+ setIsAuthenticating(true)
+
+ const { data } = await lazyCurrentAccountQuery()
+ if (!data) {
+ handleAnonymousAuth(anonymousUserId).then((userId) => {
+ client.refetchQueries({ include: 'active' })
+ setAnonymousUserId(userId ?? null)
+ })
+ setIsAuthenticating(false)
+ return
+ }
+
+ if (encodedSeed) {
+ const mnemonic = await decodeSessionEncodedSeedToMnemonic(encodedSeed)
+ if (mnemonic) {
+ const keypair = keyring.addFromMnemonic(mnemonic)
+ if (keypair.address === data.accountData.joystreamAccount) {
+ setLoggedAddress(keypair.address)
+ setCurrentUser(data.accountData)
+ identifyUser(data.accountData.email)
+ setApiActiveAccount('seed', mnemonic)
+ setIsAuthenticating(false)
+ return
+ }
+ }
+ }
+
+ if (lastUsedWalletName) {
+ setTimeout(async () => {
+ // add a slight delay - sometimes the extension will not initialize by the time of this call and may appear unavailable
+ const res = await signInToWallet(lastUsedWalletName, true)
+ if (res?.find((walletAcc) => walletAcc.address === data.accountData.joystreamAccount)) {
+ setLoggedAddress(data.accountData.joystreamAccount)
+ identifyUser(data.accountData.email)
+ setCurrentUser(data.accountData)
+ setApiActiveAccount('address', data.accountData.joystreamAccount)
+ }
+ setIsAuthenticating(false)
+ }, 200)
+ return
+ }
+ setIsAuthenticating(false)
+ }
+ init()
+ })
+
+ const saveEncodedSeed = useCallback(
+ async (seed: string): Promise => {
+ const cipherKey = lib.WordArray.random(32).toString(enc.Hex)
+ const cipherIv = lib.WordArray.random(16).toString(enc.Hex)
+ const wordArray = enc.Hex.parse(seed)
+ const encrypted = AES.encrypt(wordArray, enc.Hex.parse(cipherKey), {
+ iv: enc.Hex.parse(cipherIv),
+ mode: mode.CBC,
+ })
+
+ try {
+ await axios.post(
+ `${ORION_AUTH_URL}/session-artifacts`,
+ {
+ cipherKey,
+ cipherIv,
+ },
+ { withCredentials: true }
+ )
+
+ setEncodedSeed(encrypted.ciphertext.toString(enc.Hex))
+ return true
+ } catch (error) {
+ throw new Error(LogInErrors.ArtifactsAlreadySaved)
+ }
+ },
+ [setEncodedSeed]
+ )
+
+ const handleLogin: AuthContextValue['handleLogin'] = useCallback(
+ async (params, retryCount = 0) => {
+ setIsAuthenticating(true)
+ await cryptoWaitReady()
+ const time = Date.now() - 30_000
+ const payload = {
+ joystreamAccountId: '',
+ gatewayName: atlasConfig.general.appName,
+ timestamp: time,
+ action: 'login',
+ }
+ let signatureOverPayload = null
+ let localEntropy: string | null = null
+ if (params.type === 'internal') {
+ const { email, password } = params
+ const id = await getArtifactId(email, password)
+ const data = await getArtifacts(id, email, password)
+ if (!data) {
+ setIsAuthenticating(false)
+ throw new Error(LogInErrors.ArtifactsNotFound)
+ }
+ const { keypair, decryptedEntropy } = data
+ localEntropy = decryptedEntropy
+ payload.joystreamAccountId = keypair.address
+ signatureOverPayload = u8aToHex(keypair.sign(JSON.stringify(payload)))
+ }
+
+ if (params.type === 'external') {
+ payload.joystreamAccountId = params.address
+ try {
+ signatureOverPayload = await params.sign(JSON.stringify(payload))
+ } catch (e) {
+ setIsAuthenticating(false)
+ if (e.message === 'Cancelled') {
+ throw new Error(LogInErrors.SignatureCancelled)
+ }
+ throw new Error(LogInErrors.UnknownError)
+ }
+ }
+
+ try {
+ const response = await axios.post<{ accountId: string }>(
+ `${ORION_AUTH_URL}/login`,
+ {
+ signature: signatureOverPayload,
+ payload,
+ },
+ {
+ withCredentials: true,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ )
+
+ setAnonymousUserId(null)
+ if (localEntropy) {
+ await saveEncodedSeed(localEntropy)
+ setApiActiveAccount('seed', entropyToMnemonic(localEntropy))
+ } else {
+ setApiActiveAccount('address', payload.joystreamAccountId)
+ }
+
+ const res = await refetch()
+ setCurrentUser(res.data.accountData)
+ identifyUser(res.data.accountData.email)
+
+ return response.data.accountId
+ } catch (error) {
+ // if user receive "Session artifacts already saved", remove artifacts by signing user out and run login again
+ if (retryCount === 0 && error.message === LogInErrors.ArtifactsAlreadySaved) {
+ await logoutRequest()
+ return handleLogin(params, retryCount + 1)
+ } else {
+ const orionMessage = error.response.data.message
+ if (orionMessage.includes('Invalid credentials')) {
+ throw new Error(LogInErrors.NoAccountFound)
+ }
+
+ if (orionMessage.includes('Payload signature is invalid.')) {
+ throw new Error(LogInErrors.InvalidPayload)
+ }
+
+ SentryLogger.error('Unsupported error when posting login action', 'auth.provider', error)
+ throw new Error(LogInErrors.UnknownError)
+ }
+ } finally {
+ setIsAuthenticating(false)
+ }
+ },
+ [identifyUser, refetch, saveEncodedSeed, setAnonymousUserId, setApiActiveAccount]
+ )
+
+ const handleLogout: AuthContextValue['handleLogout'] = useCallback(async () => {
+ try {
+ await logoutRequest()
+ handleAnonymousAuth(anonymousUserId).then((userId) => {
+ setAnonymousUserId(userId ?? null)
+ })
+ setCurrentUser(null)
+ trackLogout()
+ setEncodedSeed(null)
+ } catch (error) {
+ SentryLogger.error('Error when logging out', 'auth.provider', error)
+ }
+ }, [anonymousUserId, setAnonymousUserId, setEncodedSeed, trackLogout])
+
+ const isWalletUser = useMemo(() => encodedSeed === null && !!currentUser, [currentUser, encodedSeed])
+
+ const contextValue: AuthContextValue = useMemo(
+ () => ({
+ handleLogin,
+ isAuthenticating,
+ loggedAddress,
+ refetchCurrentUser: refetch,
+ currentUser,
+ isWalletUser,
+ handleLogout,
+ encodedSeed,
+ isLoggedIn: !!currentUser && !isAuthenticating,
+ }),
+ [currentUser, encodedSeed, handleLogin, handleLogout, isAuthenticating, isWalletUser, loggedAddress, refetch]
+ )
+
+ return {children}
+}
+
+export const useAuthContext = () => {
+ const ctx = useContext(AuthContext)
+ if (ctx === undefined) {
+ throw new Error('useActiveUserContext must be used within a UserProvider')
+ }
+ return ctx
+}
diff --git a/packages/atlas/src/providers/auth/auth.store.ts b/packages/atlas/src/providers/auth/auth.store.ts
new file mode 100644
index 0000000000..5cb1e698e8
--- /dev/null
+++ b/packages/atlas/src/providers/auth/auth.store.ts
@@ -0,0 +1,52 @@
+import { createStore } from '@/utils/store'
+
+import { AuthModals } from './auth.types'
+
+export type AuthStoreState = {
+ anonymousUserId: string | null
+ authModalOpenName?: AuthModals
+ encodedSeed: string | null
+}
+
+export type AuthStoreActions = {
+ setAnonymousUserId: (anonymousUserId: string | null) => void
+ setEncodedSeed: (encodedSeed: string | null) => void
+ setAuthModalOpenName: (modal?: AuthModals) => void
+}
+
+export const useAuthStore = createStore(
+ {
+ state: {
+ anonymousUserId: null,
+ authModalOpenName: undefined,
+ encodedSeed: null,
+ },
+ actionsFactory: (set) => ({
+ setAnonymousUserId: (anonymousUserId) => {
+ set((state) => {
+ state.anonymousUserId = anonymousUserId
+ })
+ },
+ setEncodedSeed: (encodedSeed) => {
+ set((state) => {
+ state.encodedSeed = encodedSeed
+ })
+ },
+ setAuthModalOpenName: (modal) => {
+ set((state) => {
+ state.authModalOpenName = modal
+ })
+ },
+ }),
+ },
+ {
+ persist: {
+ key: 'auth',
+ version: 0,
+ whitelist: ['anonymousUserId', 'encodedSeed'],
+ migrate: (oldState) => {
+ return oldState
+ },
+ },
+ }
+)
diff --git a/packages/atlas/src/providers/auth/auth.types.ts b/packages/atlas/src/providers/auth/auth.types.ts
new file mode 100644
index 0000000000..705f1525fe
--- /dev/null
+++ b/packages/atlas/src/providers/auth/auth.types.ts
@@ -0,0 +1,91 @@
+import { ApolloQueryResult } from '@apollo/client'
+
+import { GetCurrentAccountQuery } from '@/api/queries/__generated__/accounts.generated'
+
+export type AuthContextValue = {
+ handleLogin: (params: LoginParams, retryCount?: number) => Promise
+ isWalletUser: boolean
+ isAuthenticating: boolean
+ loggedAddress: string | null
+ currentUser?: GetCurrentAccountQuery['accountData'] | null
+ refetchCurrentUser: () => Promise>
+ handleLogout: () => Promise
+ isLoggedIn: boolean
+ encodedSeed: string | null
+}
+
+// Login handler types
+export enum LogInErrors {
+ ArtifactsAlreadySaved = 'ArtifactsAlreadySaved',
+ ArtifactsNotFound = 'ArtifactsNotFound',
+ NoAccountFound = 'NoAccountFound',
+ InvalidPayload = 'InvalidPayload',
+ UnknownError = 'UnknownError',
+ SignatureCancelled = 'SignatureCancelled',
+}
+
+export type InternalLogin = {
+ type: 'internal'
+ email: string
+ password: string
+}
+
+export type ExternalLogin = {
+ type: 'external'
+ sign: (payload: string) => Promise
+ address: string
+}
+
+export type LoginParams = InternalLogin | ExternalLogin
+
+export type AuthModals = 'logIn' | 'externalLogIn' | 'signUp' | 'createChannel' | 'forgotPassword'
+
+type EncryptionArtifacts = {
+ id: string
+ encryptedSeed: string
+ cipherIv: string
+}
+
+export type RegisterPayload = {
+ joystreamAccountId: string
+ gatewayName: string
+ timestamp: number
+ action: 'createAccount'
+ memberId: string
+ email: string
+ encryptionArtifacts?: EncryptionArtifacts
+}
+
+type ExtensionParams = {
+ type: 'external'
+ signature: (payload: string) => Promise
+ email: string
+ address: string
+ memberId: string
+}
+
+type EmailPasswordParams = {
+ type: 'internal'
+ email: string
+ password: string
+ mnemonic: string
+ memberId: string
+}
+
+export type RegisterParams = ExtensionParams | EmailPasswordParams
+
+type OrionAccountErrorArgs = {
+ message?: string
+ details?: unknown
+ status?: number
+}
+
+export class OrionAccountError extends Error {
+ details: unknown
+ status?: number
+ constructor({ message, details, status }: OrionAccountErrorArgs) {
+ super(message)
+ this.details = details
+ this.status = status
+ }
+}
diff --git a/packages/atlas/src/providers/joystream/index.ts b/packages/atlas/src/providers/joystream/index.ts
new file mode 100644
index 0000000000..ee4acb18dd
--- /dev/null
+++ b/packages/atlas/src/providers/joystream/index.ts
@@ -0,0 +1,2 @@
+export * from './joystream.hooks'
+export { useJoystream } from './joystream.provider'
diff --git a/packages/atlas/src/providers/joystream/joystream.hooks.ts b/packages/atlas/src/providers/joystream/joystream.hooks.ts
index 52110f4531..5ebd5f5112 100644
--- a/packages/atlas/src/providers/joystream/joystream.hooks.ts
+++ b/packages/atlas/src/providers/joystream/joystream.hooks.ts
@@ -2,7 +2,7 @@ import { useApolloClient } from '@apollo/client'
import debouncePromise from 'awesome-debounce-promise'
import BN from 'bn.js'
import { isEqual, sampleSize } from 'lodash-es'
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import {
GetBasicDistributionBucketsDocument,
@@ -23,18 +23,10 @@ import {
import { useUser } from '@/providers/user/user.hooks'
import { ConsoleLogger } from '@/utils/logs'
-import { JoystreamContext, JoystreamContextValue } from './joystream.provider'
+import { useJoystream } from './joystream.provider'
const USE_FEE_DEBOUNCE = 500
-export const useJoystream = (): JoystreamContextValue => {
- const ctx = useContext(JoystreamContext)
- if (!ctx) {
- throw new Error('useJoystream must be used within JoystreamProvider')
- }
- return ctx
-}
-
export const useTokenPrice = () => {
const { tokenPrice } = useJoystream()
const convertHapiToUSD = useCallback(
diff --git a/packages/atlas/src/providers/joystream/joystream.manager.ts b/packages/atlas/src/providers/joystream/joystream.manager.ts
index 7a6cf1a498..ae228c446c 100644
--- a/packages/atlas/src/providers/joystream/joystream.manager.ts
+++ b/packages/atlas/src/providers/joystream/joystream.manager.ts
@@ -1,6 +1,6 @@
import { FC, useEffect, useRef } from 'react'
-import { useJoystream } from './joystream.hooks'
+import { useJoystream } from './joystream.provider'
import { useJoystreamStore } from './joystream.store'
export const JoystreamManager: FC = () => {
diff --git a/packages/atlas/src/providers/joystream/joystream.provider.tsx b/packages/atlas/src/providers/joystream/joystream.provider.tsx
index 2d14c5e43e..1eb921a2ac 100644
--- a/packages/atlas/src/providers/joystream/joystream.provider.tsx
+++ b/packages/atlas/src/providers/joystream/joystream.provider.tsx
@@ -1,13 +1,13 @@
import BN from 'bn.js'
import { ProxyMarked, Remote, proxy, wrap } from 'comlink'
-import { FC, PropsWithChildren, createContext, useCallback, useEffect, useRef, useState } from 'react'
+import { FC, PropsWithChildren, createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
import { atlasConfig } from '@/config'
import { NODE_URL } from '@/config/env'
import { HAPI_TO_JOY_RATE } from '@/joystream-lib/config'
import { JoystreamLib } from '@/joystream-lib/lib'
import { useEnvironmentStore } from '@/providers/environment/store'
-import { useUserStore } from '@/providers/user/user.store'
+import { useWalletStore } from '@/providers/wallet/wallet.store'
import { SentryLogger } from '@/utils/logs'
import { useConnectionStatusStore } from '../connectionStatus'
@@ -18,6 +18,7 @@ export type JoystreamContextValue = {
joystream: Remote | undefined
proxyCallback: ProxyCallbackFn
chainState: ReturnType
+ setApiActiveAccount: (type: 'seed' | 'address', address: string) => Promise
} & ReturnType
export const JoystreamContext = createContext(undefined)
@@ -29,10 +30,11 @@ const worker = new Worker(new URL('../../utils/polkadot-worker', import.meta.url
const api = wrap(worker)
export const JoystreamProvider: FC = ({ children }) => {
- const { accountId, walletAccounts, wallet } = useUserStore()
+ const { wallet } = useWalletStore()
const { nodeOverride } = useEnvironmentStore((state) => state)
const setNodeConnection = useConnectionStatusStore((state) => state.actions.setNodeConnection)
const [initialized, setInitialized] = useState(false)
+ const [awaitingAccount, setAwaitingAccount] = useState<['seed' | 'address', string] | null>(null)
const handleNodeConnectionUpdate = useCallback(
(connected: boolean) => {
setNodeConnection(connected ? 'connected' : 'disconnected')
@@ -46,6 +48,28 @@ export const JoystreamProvider: FC = ({ children }) => {
const utilFns = useJoystreamUtilFns()
const chainState = useJoystreamChainConstants(joystream.current)
+ const setApiActiveAccount: JoystreamContextValue['setApiActiveAccount'] = useCallback(
+ async (payloadType, payload) => {
+ const instance = joystream.current
+ if (!initialized || !instance) {
+ setAwaitingAccount([payloadType, payload])
+ return false
+ }
+
+ if (!wallet?.signer && payloadType === 'address') {
+ SentryLogger.error(
+ "Failed to get signer from web3FromAddress and customSigner wasn't provided",
+ 'JoystreamProvider'
+ )
+ return false
+ }
+ await instance.setActiveAccount(payloadType, payload, wallet?.signer ? proxy(wallet.signer) : undefined)
+
+ return true
+ },
+ [initialized, wallet?.signer]
+ )
+
// initialize Joystream Lib
useEffect(() => {
const getJoystream = async () => {
@@ -65,43 +89,22 @@ export const JoystreamProvider: FC = ({ children }) => {
}
}, [handleNodeConnectionUpdate, nodeOverride, setNodeConnection])
- // update Joystream Lib selected on change
useEffect(() => {
- if (!initialized) {
- return
+ if (initialized && awaitingAccount) {
+ setApiActiveAccount(...awaitingAccount)
+ setAwaitingAccount(null)
}
- const init = async () => {
- const instance = joystream.current
- if (!instance || !accountId || !walletAccounts || !wallet) {
- return
- }
-
- const previousAccountId = await instance?.selectedAccountId
- if (accountId === previousAccountId) {
- return
- }
-
- const setActiveAccount = async () => {
- if (accountId) {
- const { signer } = wallet
- if (!signer) {
- SentryLogger.error('Failed to get signer from web3FromAddress', 'JoystreamProvider')
- return
- }
- await instance.setActiveAccount(accountId, proxy(signer))
- } else {
- await instance.setActiveAccount(accountId)
- }
- }
-
- setActiveAccount()
- }
- init()
- }, [accountId, initialized, wallet, walletAccounts])
+ }, [awaitingAccount, initialized, setApiActiveAccount])
return (
{children}
@@ -182,3 +185,11 @@ const useJoystreamChainConstants = (joystream: Remote | undefined)
return chainConstant
}
+
+export const useJoystream = (): JoystreamContextValue => {
+ const ctx = useContext(JoystreamContext)
+ if (!ctx) {
+ throw new Error('useJoystream must be used within JoystreamProvider')
+ }
+ return ctx
+}
diff --git a/packages/atlas/src/providers/misc/store.ts b/packages/atlas/src/providers/misc/store.ts
index 6a1712283e..bcf8152bdc 100644
--- a/packages/atlas/src/providers/misc/store.ts
+++ b/packages/atlas/src/providers/misc/store.ts
@@ -2,15 +2,18 @@ import { createStore } from '@/utils/store'
export type MiscStoreState = {
openedContexMenuId?: string
+ isAdminModalOpen?: boolean
}
type MiscStoreActions = {
setOpenedContextMenuId: (id: string) => void
+ setAdminModalOpen: (value: boolean) => void
}
export const useMiscStore = createStore({
state: {
openedContexMenuId: '',
+ isAdminModalOpen: false,
},
actionsFactory: (set) => ({
setOpenedContextMenuId: (id) => {
@@ -18,5 +21,10 @@ export const useMiscStore = createStore({
state.openedContexMenuId = id
})
},
+ setAdminModalOpen: (value) => {
+ set((state) => {
+ state.isAdminModalOpen = value
+ })
+ },
}),
})
diff --git a/packages/atlas/src/providers/nftActions/nftActions.hooks.ts b/packages/atlas/src/providers/nftActions/nftActions.hooks.ts
index bea0d421a1..7bd4da7a1f 100644
--- a/packages/atlas/src/providers/nftActions/nftActions.hooks.ts
+++ b/packages/atlas/src/providers/nftActions/nftActions.hooks.ts
@@ -1,6 +1,5 @@
import { useCallback, useContext } from 'react'
-import { useDisplaySignInDialog } from '@/hooks/useDisplaySignInDialog'
import { useUser } from '@/providers/user/user.hooks'
import { NftActionsContext } from './nftActions.provider'
@@ -14,8 +13,7 @@ export const useNftActions = () => {
if (ctx === undefined) {
throw new Error('useNftActions must be used within NftActionsProvider')
}
- const { signIn, isLoggedIn } = useUser()
- const { openSignInDialog } = useDisplaySignInDialog({ interaction: true })
+ const { isLoggedIn } = useUser()
const {
currentAction,
@@ -27,14 +25,13 @@ export const useNftActions = () => {
closeNftAction,
cancelNftSale,
changeNftPrice,
+ nftToMint,
+ setNftToMint,
} = ctx
const checkIfSigned = useCallback(() => {
- if (!isLoggedIn) {
- openSignInDialog({ onConfirm: signIn })
- }
return isLoggedIn
- }, [isLoggedIn, openSignInDialog, signIn])
+ }, [isLoggedIn])
const openNftPurchase = useCallback(
(nftId: string, opts?: OpenNftPurchaseOpts) => {
@@ -98,5 +95,7 @@ export const useNftActions = () => {
openNftChangePrice,
cancelNftSale,
changeNftPrice,
+ nftToMint,
+ setNftToMint,
}
}
diff --git a/packages/atlas/src/providers/nftActions/nftActions.provider.tsx b/packages/atlas/src/providers/nftActions/nftActions.provider.tsx
index 4955f33366..927753988f 100644
--- a/packages/atlas/src/providers/nftActions/nftActions.provider.tsx
+++ b/packages/atlas/src/providers/nftActions/nftActions.provider.tsx
@@ -14,9 +14,11 @@ type NftAction = 'putOnSale' | 'purchase' | 'settle' | 'accept-bid' | 'change-pr
type ContextValue = {
currentAction: NftAction | null
currentNftId: string | null
+ nftToMint: string | null
isBuyNowClicked?: boolean
- setCurrentAction: Dispatch>
+ setCurrentAction: (action: NftAction | null) => void
setCurrentNftId: Dispatch>
+ setNftToMint: Dispatch>
setIsBuyNowClicked: Dispatch>
closeNftAction: () => void
}
@@ -25,9 +27,10 @@ export const NftActionsContext = createContext<(ContextValue & ReturnType = ({ children }) => {
const [currentAction, setCurrentAction] = useState(null)
+ const [nftToMint, setNftToMint] = useState(null)
+
const transactions = useNftTransactions()
const [isBuyNowClicked, setIsBuyNowClicked] = useState()
const [currentNftId, setCurrentNftId] = useState(null)
@@ -63,9 +66,11 @@ export const NftActionsProvider: FC = ({ children }) => {
setCurrentAction,
setCurrentNftId,
closeNftAction,
+ nftToMint,
+ setNftToMint,
...transactions,
}),
- [closeNftAction, currentAction, currentNftId, isBuyNowClicked, transactions]
+ [closeNftAction, currentAction, currentNftId, isBuyNowClicked, nftToMint, transactions]
)
const currentBuyNowPrice =
diff --git a/packages/atlas/src/providers/overlayManager.tsx b/packages/atlas/src/providers/overlayManager.tsx
index e09432cef2..aed0f6881c 100644
--- a/packages/atlas/src/providers/overlayManager.tsx
+++ b/packages/atlas/src/providers/overlayManager.tsx
@@ -83,9 +83,9 @@ export const useOverlayManager = () => {
const decrementOverlaysOpenCount = useCallback(() => {
setOverlays((prev) => {
- return prev.filter((_, i) => i !== prev.length - 1)
+ return prev.filter((id) => id !== overlayId)
})
- }, [setOverlays])
+ }, [overlayId, setOverlays])
const clearOverlays = useCallback(() => {
setOverlays([])
diff --git a/packages/atlas/src/providers/segmentAnalytics/segment.provider.tsx b/packages/atlas/src/providers/segmentAnalytics/segment.provider.tsx
index 3e0f9db1e8..f326d15cd8 100644
--- a/packages/atlas/src/providers/segmentAnalytics/segment.provider.tsx
+++ b/packages/atlas/src/providers/segmentAnalytics/segment.provider.tsx
@@ -23,7 +23,7 @@ export const SegmentAnalyticsProvider: FC = ({ children
const writeKey = (analyticsEnabled && atlasConfig.analytics.segment?.id) || ''
const segmentAnalytics: AnalyticsContextProps = useMemo(
- () => ({ analytics: writeKey ? AnalyticsBrowser.load({ writeKey }) : new AnalyticsBrowser() }),
+ () => ({ analytics: AnalyticsBrowser.load({ writeKey }) }),
[writeKey]
)
diff --git a/packages/atlas/src/providers/segmentAnalytics/useSegmentAnalyticsContext.ts b/packages/atlas/src/providers/segmentAnalytics/useSegmentAnalyticsContext.ts
index ce5b892d0e..fc300fd933 100644
--- a/packages/atlas/src/providers/segmentAnalytics/useSegmentAnalyticsContext.ts
+++ b/packages/atlas/src/providers/segmentAnalytics/useSegmentAnalyticsContext.ts
@@ -2,6 +2,10 @@ import { useContext } from 'react'
import { SegmentAnalyticsContext } from './segment.provider'
-const useSegmentAnalyticsContext = () => useContext(SegmentAnalyticsContext)
+export const useSegmentAnalyticsContext = () => {
+ const ctx = useContext(SegmentAnalyticsContext)
-export default useSegmentAnalyticsContext
+ if (!ctx) throw new Error('useSegmentAnalyticsContext must be used within SegmentAnalyticsContext')
+
+ return ctx
+}
diff --git a/packages/atlas/src/providers/transactions/transactions.hooks.ts b/packages/atlas/src/providers/transactions/transactions.hooks.ts
index a69a4e58d6..df8f752b84 100644
--- a/packages/atlas/src/providers/transactions/transactions.hooks.ts
+++ b/packages/atlas/src/providers/transactions/transactions.hooks.ts
@@ -12,9 +12,8 @@ import {
import { absoluteRoutes } from '@/config/routes'
import { ErrorCode, JoystreamLibError, JoystreamLibErrorType } from '@/joystream-lib/errors'
import { ExtrinsicResult, ExtrinsicStatus, ExtrinsicStatusCallbackFn } from '@/joystream-lib/types'
-import { useSubscribeAccountBalance } from '@/providers/joystream/joystream.hooks'
-import { useUser } from '@/providers/user/user.hooks'
-import { useUserStore } from '@/providers/user/user.store'
+import { useSubscribeAccountBalance } from '@/providers/joystream'
+import { useWallet } from '@/providers/wallet/wallet.hooks'
import { createId } from '@/utils/createId'
import { ConsoleLogger, SentryLogger } from '@/utils/logs'
import { wait, withTimeout } from '@/utils/misc'
@@ -64,8 +63,7 @@ export const useTransaction = (): HandleTransactionFn => {
const { displaySnackbar } = useSnackbar()
const getMetaprotocolTxStatus = useMetaprotocolTransactionStatus()
const { totalBalance } = useSubscribeAccountBalance()
- const { isSignerMetadataOutdated, updateSignerMetadata, skipSignerMetadataUpdate } = useUser()
- const { wallet } = useUserStore()
+ const { isSignerMetadataOutdated, updateSignerMetadata, skipSignerMetadataUpdate, wallet } = useWallet()
return useCallback(
async ({
@@ -187,8 +185,8 @@ export const useTransaction = (): HandleTransactionFn => {
}
updateStatus(status)
}
- const result = await txFactory(handleTxStatusChange) // txFactory will return only once the tx has been included in a block and that block has been finalized
+ const result = await txFactory(handleTxStatusChange) // txFactory will return only once the tx has been included in a block and that block has been finalized
/* === if provided, run finalize callback === */
updateStatus(ExtrinsicStatus.Syncing)
if (onTxFinalize) {
diff --git a/packages/atlas/src/providers/transactions/transactions.manager.tsx b/packages/atlas/src/providers/transactions/transactions.manager.tsx
index 7b578dc048..e50ee5e477 100644
--- a/packages/atlas/src/providers/transactions/transactions.manager.tsx
+++ b/packages/atlas/src/providers/transactions/transactions.manager.tsx
@@ -1,12 +1,10 @@
import { FC, useEffect, useRef, useState } from 'react'
import { useQueryNodeStateSubscription } from '@/api/hooks/queryNode'
-import { MintNftFirstTimeModal } from '@/components/_overlays/MintNftFirstTimeModal'
import { TransactionModal } from '@/components/_overlays/TransactionModal'
import { ExtrinsicStatus } from '@/joystream-lib/types'
-import { usePersonalDataStore } from '@/providers/personalData'
import { useSnackbar } from '@/providers/snackbars'
-import { useUserStore } from '@/providers/user/user.store'
+import { useWalletStore } from '@/providers/wallet/wallet.store'
import { SentryLogger } from '@/utils/logs'
import { METAPROTOCOL_SNACKBAR_ID } from './transactions.config'
@@ -15,12 +13,10 @@ import { useTransactionManagerStore } from './transactions.store'
export const TransactionsManager: FC = () => {
const {
transactions,
- showFirstMintDialog,
- actions: { removeOldBlockActions, setShowFistMintDialog, removeTransaction },
+ actions: { removeOldBlockActions, removeTransaction },
} = useTransactionManagerStore((state) => state)
- const updateDismissedMessages = usePersonalDataStore((state) => state.actions.updateDismissedMessages)
- const userWalletName = useUserStore((state) => state.wallet?.title)
+ const userWalletName = useWalletStore((state) => state.wallet?.title)
const lastProcessedQnBlockRef = useRef(0)
const { displaySnackbar, closeSnackbar } = useSnackbar()
@@ -67,7 +63,7 @@ export const TransactionsManager: FC = () => {
lastProcessedQnBlockRef.current = lastProcessedBlock
const blockActions = useTransactionManagerStore.getState().blockActions
- const syncedActions = blockActions.filter((action) => lastProcessedBlock >= action.targetBlock)
+ const syncedActions = blockActions.filter((action) => lastProcessedBlock > action.targetBlock)
if (!syncedActions.length) {
return
@@ -94,14 +90,8 @@ export const TransactionsManager: FC = () => {
},
})
- const handleFirstMintDialogClose = () => {
- updateDismissedMessages('first-mint')
- setShowFistMintDialog(false)
- }
-
return (
<>
-
- showFirstMintDialog: boolean
}
type TransactionManagerStoreActions = {
addBlockAction: (action: ProcessedBlockAction) => void
removeOldBlockActions: (currentBlock: number) => void
-
addTransaction: (transaction: Transaction) => void
updateTransaction: (id: string, transaction: Transaction) => void
removeTransaction: (id: string) => void
-
- setShowFistMintDialog: (show: boolean) => void
}
export const useTransactionManagerStore = createStore({
state: {
blockActions: [],
-
transactions: {},
-
- showFirstMintDialog: false,
},
actionsFactory: (set) => ({
addBlockAction: (action) =>
@@ -41,7 +34,6 @@ export const useTransactionManagerStore = createStore {
state.blockActions = state.blockActions.filter((action) => action.targetBlock > currentBlock)
}),
-
addTransaction: (transaction) =>
set((state) => {
state.transactions[transaction.id] = transaction
@@ -54,10 +46,5 @@ export const useTransactionManagerStore = createStore {
delete state.transactions[id]
}),
-
- setShowFistMintDialog: (show) =>
- set((state) => {
- state.showFirstMintDialog = show
- }),
}),
})
diff --git a/packages/atlas/src/providers/user/user.helpers.ts b/packages/atlas/src/providers/user/user.helpers.ts
deleted file mode 100644
index 1ee79eced6..0000000000
--- a/packages/atlas/src/providers/user/user.helpers.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import { BaseDotsamaWallet, WalletAccount, getWallets } from '@talismn/connect-wallets'
-import { useCallback, useEffect } from 'react'
-import shallow from 'zustand/shallow'
-
-import { atlasConfig } from '@/config'
-import { formatJoystreamAddress } from '@/utils/address'
-import { ConsoleLogger } from '@/utils/logs'
-
-import { useUserStore } from './user.store'
-import { SignerWalletAccount } from './user.types'
-
-export const useSignerWallet = () => {
- const { walletStatus, walletAccounts, wallet, accountId } = useUserStore(
- (state) => ({
- walletStatus: state.walletStatus,
- walletAccounts: state.walletAccounts,
- wallet: state.wallet,
- accountId: state.accountId,
- }),
- shallow
- )
- const {
- setWalletAccounts: _setWalletAccount,
- setWalletStatus,
- resetActiveUser,
- setWallet,
- } = useUserStore((state) => state.actions)
-
- const setWalletAccounts = useCallback(
- async (accounts: WalletAccount[]) => {
- const mappedAccounts = accounts.map((account) => {
- return {
- ...account,
- address: formatJoystreamAddress(account.address),
- }
- })
- _setWalletAccount(mappedAccounts)
- },
- [_setWalletAccount]
- )
-
- const handleAccountsChange = useCallback(
- (accounts?: WalletAccount[]) => {
- if (!accounts) {
- setWalletAccounts([])
- return
- }
- setWalletAccounts(accounts)
- },
- [setWalletAccounts]
- )
-
- const getWalletsList = useCallback(() => {
- const supportedWallets = getWallets()
- const supportedWalletsNames = supportedWallets.map((wallet) => wallet.extensionName)
-
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const unknownWallets = Object.keys((window as any).injectedWeb3 || {}).reduce((acc, walletName) => {
- if (supportedWalletsNames.includes(walletName)) {
- // wallet is already in supportedWallets list
- return acc
- }
-
- return [...acc, new UnknownWallet(walletName)]
- }, [] as UnknownWallet[])
-
- return [...supportedWallets, ...unknownWallets]
- }, [])
-
- const initSignerWallet = useCallback(
- async (walletName: string): Promise => {
- try {
- setWalletStatus('pending')
- const allWallets = getWalletsList()
- const selectedWallet = allWallets.find((wallet) => wallet.extensionName === walletName)
- if (!selectedWallet || !selectedWallet.installed) {
- setWalletStatus('disconnected')
- resetActiveUser()
- return null
- }
-
- await selectedWallet.enable(atlasConfig.general.appName)
-
- // taken from https://github.com/TalismanSociety/talisman-connect/blob/47cfefee9f1333326c0605c159d6ee8ebfba3e84/libs/wallets/src/lib/base-dotsama-wallet/index.ts#L98-L107
- // should be part of future talisman-connect release
- const accounts = await selectedWallet.extension.accounts.get()
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const accountsWithWallet = accounts.map((account: any) => {
- return {
- ...account,
- address: formatJoystreamAddress(account.address),
- source: selectedWallet.extension?.name as string,
- wallet: selectedWallet,
- signer: selectedWallet.extension?.signer,
- }
- })
-
- setWalletAccounts(accountsWithWallet)
- setWallet(selectedWallet)
- setWalletStatus('connected')
-
- return accountsWithWallet
- } catch (e) {
- setWalletStatus('disconnected')
- throw e
- }
- },
- [getWalletsList, resetActiveUser, setWallet, setWalletAccounts, setWalletStatus]
- )
-
- // subscribe to account changes when extension is connected
- useEffect(() => {
- if (!wallet || walletStatus !== 'connected') {
- return
- }
-
- type UnsubFn = () => void
- let unsubscribeAccounts: UnsubFn | undefined
- const subscribePromise = wallet.subscribeAccounts(handleAccountsChange) as Promise
- subscribePromise.then((unsub) => {
- unsubscribeAccounts = unsub
- })
- return () => {
- unsubscribeAccounts?.()
- }
- }, [handleAccountsChange, wallet, walletStatus])
-
- // reset the active user if the selected account is not found
- useEffect(() => {
- if (!accountId || walletStatus !== 'connected') {
- return
- }
-
- const account = walletAccounts.find((a) => a.address === accountId)
-
- if (!account) {
- ConsoleLogger.warn('Selected accountId not found in extension accounts, resetting user')
- resetActiveUser()
- }
- }, [accountId, resetActiveUser, walletStatus, walletAccounts])
-
- return { getWalletsList, initSignerWallet }
-}
-
-export class UnknownWallet extends BaseDotsamaWallet {
- extensionName: string
- title: string
-
- constructor(walletName: string) {
- super()
- this.extensionName = walletName
- this.title = walletName
- }
-}
diff --git a/packages/atlas/src/providers/user/user.hooks.ts b/packages/atlas/src/providers/user/user.hooks.ts
index c91f26bdaa..8f98cfd9fb 100644
--- a/packages/atlas/src/providers/user/user.hooks.ts
+++ b/packages/atlas/src/providers/user/user.hooks.ts
@@ -1,38 +1,19 @@
-import { useSignerWallet } from './user.helpers'
-import { useUserContext } from './user.provider'
-import { UserStoreActions, useUserStore } from './user.store'
-import { ActiveUserState, SignerWalletAccount, SignerWalletStatus, UserContextValue } from './user.types'
-
-type UseUserHookReturn = ActiveUserState &
- UserStoreActions &
- UserContextValue & {
- walletAccounts: SignerWalletAccount[]
- walletStatus: SignerWalletStatus
+import { useAuth } from '@/providers/auth/auth.hooks'
- isLoggedIn: boolean
- isWalletLoading: boolean
+import { useUserContext } from './user.provider'
+import { UserContextValue } from './user.types'
- getWalletsList: ReturnType['getWalletsList']
- }
+type UseUserHookReturn = UserContextValue & {
+ isLoggedIn: boolean
+}
export const useUser = (): UseUserHookReturn => {
- const { accountId, memberId, channelId, walletStatus, walletAccounts, actions } = useUserStore()
const userContext = useUserContext()
- const { getWalletsList } = useSignerWallet()
-
- const isLoggedIn = !!accountId && !!memberId && walletStatus === 'connected'
+ const { isLoggedIn } = useAuth()
return {
- accountId,
- memberId,
- channelId,
- walletStatus,
- walletAccounts,
isLoggedIn,
- isWalletLoading: walletStatus === 'pending',
- getWalletsList,
...userContext,
- ...actions,
}
}
export const useAuthorizedUser = () => {
diff --git a/packages/atlas/src/providers/user/user.provider.tsx b/packages/atlas/src/providers/user/user.provider.tsx
index 3a0ae80a76..a4935d2882 100644
--- a/packages/atlas/src/providers/user/user.provider.tsx
+++ b/packages/atlas/src/providers/user/user.provider.tsx
@@ -2,39 +2,20 @@ import { FC, PropsWithChildren, createContext, useCallback, useContext, useEffec
import { useMemberships } from '@/api/hooks/membership'
import { ViewErrorFallback } from '@/components/ViewErrorFallback'
-import { JoystreamContext, JoystreamContextValue } from '@/providers/joystream/joystream.provider'
-import { isMobile } from '@/utils/browser'
+import { useJoystream } from '@/providers/joystream/joystream.provider'
import { AssetLogger, SentryLogger } from '@/utils/logs'
-import { retryWalletPromise } from '@/utils/misc'
-import { useSignerWallet } from './user.helpers'
-import { useUserStore } from './user.store'
import { UserContextValue } from './user.types'
+import { useAuth } from '../auth/auth.hooks'
+
const UserContext = createContext(undefined)
UserContext.displayName = 'UserContext'
-const isMobileDevice = isMobile()
-
export const UserProvider: FC = ({ children }) => {
- const {
- accountId,
- memberId,
- channelId,
- walletAccounts,
- walletStatus,
- lastUsedWalletName,
- wallet,
- lastChainMetadataVersion,
- } = useUserStore((state) => state)
- const { setActiveUser, setSignInModalOpen, setLastChainMetadataVersion } = useUserStore((state) => state.actions)
- const { initSignerWallet } = useSignerWallet()
- const joystreamCtx = useContext(JoystreamContext)
-
- const [isAuthLoading, setIsAuthLoading] = useState(true)
- const [isSignerMetadataOutdated, setIsSignerMetadataOutdated] = useState(false)
-
- const accountsIds = walletAccounts.map((a) => a.address)
+ const { currentUser } = useAuth()
+ const [channelId, setChannelId] = useState(null)
+ const { setApiActiveAccount } = useJoystream()
const {
memberships: currentMemberships,
@@ -45,13 +26,13 @@ export const UserProvider: FC = ({ children }) => {
} = useMemberships(
{
where: {
- controllerAccount_in: accountsIds,
+ id_eq: currentUser?.membershipId,
},
},
{
- skip: !accountsIds.length,
+ skip: !currentUser,
onError: (error) =>
- SentryLogger.error('Failed to fetch user memberships', 'UserProvider', error, { user: { accountsIds } }),
+ SentryLogger.error('Failed to fetch user memberships', 'UserProvider', error, { user: currentUser ?? {} }),
}
)
@@ -61,162 +42,36 @@ export const UserProvider: FC = ({ children }) => {
return refetch()
}, [refetch])
- const signIn = useCallback(
- async (
- walletName?: string,
- mobileCallback?: ({ onConfirm }: { onConfirm: () => void }) => void,
- invokedAutomatically?: boolean
- ): Promise => {
- let accounts = []
-
- if (!walletName) {
- if (isMobileDevice && mobileCallback) {
- mobileCallback?.({ onConfirm: () => setSignInModalOpen(true) })
- return true
- }
- setSignInModalOpen(true)
- return true
- }
-
- try {
- const initializedAccounts = await (!invokedAutomatically
- ? initSignerWallet(walletName)
- : retryWalletPromise(() => initSignerWallet(walletName), 1_500, 3_000))
- if (initializedAccounts == null) {
- SentryLogger.error('Selected wallet not found or not installed', 'UserProvider')
- setSignInModalOpen(true)
- return false
- }
- accounts = initializedAccounts
- } catch (e) {
- SentryLogger.error('Failed to enable selected wallet', 'UserProvider', e)
- return false
- }
-
- const accountsIds = accounts.map((a) => a.address)
-
- const { data, error } = await refetch({ where: { controllerAccount_in: accountsIds } })
-
- if (error) {
- // error is logged in hook
- return false
- }
-
- const memberships = data?.memberships || []
-
- if (memberships.length) {
- setSignInModalOpen(false)
- }
-
- if (!memberId && memberships.length) {
- const firstMembership = memberships[0]
- const sortedMemberChannels = firstMembership.channels.slice().sort((a, b) => {
- // for some reason createdAt are sometimes not yet parsed into Date objects at this point
- const aCreatedAtStr = typeof a.createdAt === 'string' ? a.createdAt : a.createdAt.toISOString()
- const bCreatedAtStr = typeof b.createdAt === 'string' ? b.createdAt : b.createdAt.toISOString()
-
- return aCreatedAtStr.localeCompare(bCreatedAtStr)
- })
- setActiveUser({
- memberId: firstMembership.id,
- accountId: firstMembership.controllerAccount,
- channelId: sortedMemberChannels[0]?.id || null,
- })
- return true
- }
-
- return true
- },
- [initSignerWallet, memberId, refetch, setActiveUser, setSignInModalOpen]
- )
-
// keep user used by loggers in sync
useEffect(() => {
const user = {
- accountId,
- memberId,
- channelId,
+ accountId: currentUser?.joystreamAccount,
+ memberId: currentUser?.membershipId,
+ channelId: currentMemberships?.[0].channels[0]?.id,
}
+
SentryLogger.setUser(user)
AssetLogger.setUser(user)
- }, [accountId, channelId, memberId])
-
- // if the user has account/member IDs set, initialize sign in automatically
- useEffect(() => {
- if (walletStatus !== 'unknown' || !lastUsedWalletName) {
- setIsAuthLoading(false)
- return
- }
-
- if (!accountId || !memberId) {
- setIsAuthLoading(false)
- return
- }
+ }, [
+ currentMemberships,
+ currentUser?.email,
+ currentUser?.joystreamAccount,
+ currentUser?.membershipId,
+ setApiActiveAccount,
+ ])
+
+ const activeMembership =
+ (currentUser?.membershipId && memberships?.find((membership) => membership.id === currentUser?.membershipId)) ||
+ null
- setTimeout(() => {
- // add a slight delay - sometimes the extension will not initialize by the time of this call and may appear unavailable
- signIn(lastUsedWalletName, undefined, true).then(() => setIsAuthLoading(false))
- }, 200)
- }, [accountId, lastUsedWalletName, memberId, signIn, walletStatus])
-
- const activeMembership = (memberId && memberships?.find((membership) => membership.id === memberId)) || null
const activeChannel =
- (activeMembership && activeMembership?.channels.find((channel) => channel.id === channelId)) || null
-
- const checkSignerStatus = useCallback(async () => {
- const chainMetadata = await joystreamCtx?.joystream?.getChainMetadata()
-
- if (wallet?.extension.metadata && chainMetadata) {
- const [localGenesisHash, localSpecVersion] = lastChainMetadataVersion ?? ['', 0]
-
- // update was skipped
- if (localGenesisHash === chainMetadata.genesisHash && localSpecVersion === chainMetadata.specVersion) {
- return setIsSignerMetadataOutdated(false)
- }
-
- const extensionMetadata = await wallet.extension.metadata.get()
- const currentChain = extensionMetadata.find(
- (infoEntry: { specVersion: number; genesisHash: string }) =>
- infoEntry.genesisHash === chainMetadata?.genesisHash
- )
-
- // if there isn't even a metadata entry for node with specific genesis hash then update
- if (!currentChain) {
- return setIsSignerMetadataOutdated(true)
- }
-
- // if there is metadata for this node then verify specVersion
- const isOutdated = currentChain.specVersion < chainMetadata.specVersion
- setIsSignerMetadataOutdated(isOutdated)
- }
- }, [joystreamCtx?.joystream, lastChainMetadataVersion, wallet?.extension.metadata])
-
- const updateSignerMetadata = useCallback(async () => {
- const chainMetadata = await joystreamCtx?.joystream?.getChainMetadata()
- return wallet?.extension.metadata.provide(chainMetadata)
- }, [joystreamCtx?.joystream, wallet?.extension.metadata])
-
- const skipSignerMetadataUpdate = useCallback(async () => {
- const chainMetadata = await joystreamCtx?.joystream?.getChainMetadata()
- if (chainMetadata) {
- setLastChainMetadataVersion(chainMetadata.genesisHash, chainMetadata.specVersion)
- setIsSignerMetadataOutdated(false)
- }
- }, [joystreamCtx?.joystream, setLastChainMetadataVersion])
+ (channelId
+ ? activeMembership?.channels.find((channel) => channel.id === channelId)
+ : activeMembership?.channels[0]) || null
useEffect(() => {
- checkSignerStatus()
- }, [checkSignerStatus])
-
- const isChannelBelongsToTheUserOrExists = activeMembership?.channels.length
- ? activeMembership.channels.some((channel) => channel.id === channelId)
- : true
-
- useEffect(() => {
- if (!isChannelBelongsToTheUserOrExists) {
- setActiveUser({ channelId: activeMembership?.channels.length ? activeMembership.channels[0].id : null })
- }
- }, [activeMembership?.channels, isChannelBelongsToTheUserOrExists, setActiveUser])
+ if (!channelId) setChannelId(activeMembership?.channels[0]?.id ?? null)
+ }, [activeMembership?.channels, channelId])
const contextValue: UserContextValue = useMemo(
() => ({
@@ -224,24 +79,21 @@ export const UserProvider: FC = ({ children }) => {
membershipsLoading,
activeMembership,
activeChannel,
- isAuthLoading,
- signIn,
refetchUserMemberships,
- isSignerMetadataOutdated,
- updateSignerMetadata,
- skipSignerMetadataUpdate,
+ memberId: currentUser?.membershipId ?? null,
+ accountId: currentUser?.joystreamAccount ?? null,
+ channelId,
+ setActiveChannel: setChannelId,
}),
[
- activeChannel,
memberships,
membershipsLoading,
activeMembership,
- isAuthLoading,
- signIn,
+ activeChannel,
refetchUserMemberships,
- isSignerMetadataOutdated,
- updateSignerMetadata,
- skipSignerMetadataUpdate,
+ currentUser?.membershipId,
+ currentUser?.joystreamAccount,
+ channelId,
]
)
diff --git a/packages/atlas/src/providers/user/user.store.ts b/packages/atlas/src/providers/user/user.store.ts
deleted file mode 100644
index 255bb3f9d4..0000000000
--- a/packages/atlas/src/providers/user/user.store.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { createStore } from '@/utils/store'
-
-import { ActiveUserState, SignerWallet, SignerWalletAccount, SignerWalletStatus } from './user.types'
-
-export type UserStoreState = ActiveUserState & {
- wallet: SignerWallet | null
- walletAccounts: SignerWalletAccount[]
- walletStatus: SignerWalletStatus
- lastUsedWalletName: string | null
- lastChainMetadataVersion: [string, number] | null // [genesisHash, number]
- signInModalOpen: boolean
-}
-
-export type UserStoreActions = {
- resetActiveUser: () => void
- setActiveUser: (activeUserChanges: Partial) => void
- signOut: () => void
-
- setWallet: (wallet: SignerWallet) => void
- setWalletAccounts: (accounts: SignerWalletAccount[]) => void
- setWalletStatus: (status: SignerWalletStatus) => void
-
- setSignInModalOpen: (isOpen: boolean) => void
- setLastChainMetadataVersion: (genesisHash: string, version: number) => void
-}
-
-export const useUserStore = createStore(
- {
- state: {
- accountId: null,
- memberId: null,
- channelId: null,
-
- wallet: null,
- walletAccounts: [],
- walletStatus: 'unknown',
- lastUsedWalletName: null,
- lastChainMetadataVersion: null,
- signInModalOpen: false,
- },
- actionsFactory: (set) => ({
- resetActiveUser: () => {
- set((state) => {
- state.accountId = null
- state.memberId = null
- state.channelId = null
- })
- },
- setActiveUser: (activeUserChanges) => {
- set((state) => {
- state.accountId = activeUserChanges.accountId !== undefined ? activeUserChanges.accountId : state.accountId
- state.memberId = activeUserChanges.memberId !== undefined ? activeUserChanges.memberId : state.memberId
- state.channelId = activeUserChanges.channelId !== undefined ? activeUserChanges.channelId : state.channelId
- })
- },
- signOut: () => {
- set((state) => {
- state.accountId = null
- state.memberId = null
- state.channelId = null
- state.wallet = null
- state.walletStatus = 'unknown'
- state.walletAccounts = []
- state.lastUsedWalletName = null
- })
- },
-
- setWallet: (wallet) => {
- set((state) => {
- state.wallet = wallet
- state.lastUsedWalletName = wallet.extensionName
- })
- },
- setWalletAccounts: (accounts) => {
- set((state) => {
- state.walletAccounts = accounts
- })
- },
- setWalletStatus: (status) => {
- set((state) => {
- state.walletStatus = status
- })
- },
- setSignInModalOpen: (isOpen) => {
- set((state) => {
- state.signInModalOpen = isOpen
- })
- },
- setLastChainMetadataVersion: (genesisHash, version) => {
- set((state) => {
- state.lastChainMetadataVersion = [genesisHash, version]
- })
- },
- }),
- },
- {
- persist: {
- key: 'activeUser',
- version: 0,
- whitelist: ['accountId', 'memberId', 'channelId', 'lastUsedWalletName', 'lastChainMetadataVersion'],
- migrate: (oldState) => {
- return oldState
- },
- },
- }
-)
diff --git a/packages/atlas/src/providers/user/user.types.ts b/packages/atlas/src/providers/user/user.types.ts
index 3c6d9d72ab..6da3af312a 100644
--- a/packages/atlas/src/providers/user/user.types.ts
+++ b/packages/atlas/src/providers/user/user.types.ts
@@ -1,27 +1,16 @@
-import { Wallet, WalletAccount } from '@talismn/connect-wallets'
-
import { useMemberships } from '@/api/hooks/membership'
import { FullMembershipFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
export type Membership = FullMembershipFieldsFragment
-export type ActiveUserState = {
- accountId: string | null
- memberId: string | null
- channelId: string | null
-}
-export type SignerWallet = Wallet
-export type SignerWalletStatus = 'unknown' | 'connected' | 'disconnected' | 'pending'
-export type SignerWalletAccount = WalletAccount
export type UserContextValue = {
memberships: Membership[]
membershipsLoading: boolean
activeMembership: Membership | null
- isSignerMetadataOutdated: boolean
activeChannel: Membership['channels'][number] | null
- isAuthLoading: boolean
- signIn: (walletName?: string, mobileCallback?: ({ onConfirm }: { onConfirm: () => void }) => void) => Promise
- updateSignerMetadata: () => Promise
- skipSignerMetadataUpdate: () => Promise
+ setActiveChannel: (channelId: string) => void
refetchUserMemberships: ReturnType['refetch']
+ memberId: string | null
+ accountId: string | null
+ channelId: string | null
}
diff --git a/packages/atlas/src/providers/videoWorkspace/hooks.ts b/packages/atlas/src/providers/videoWorkspace/hooks.ts
index a4290c9b0e..e08b9f0f42 100644
--- a/packages/atlas/src/providers/videoWorkspace/hooks.ts
+++ b/packages/atlas/src/providers/videoWorkspace/hooks.ts
@@ -29,12 +29,12 @@ export const useVideoWorkspace = () => {
return ctx
}
-export const useVideoWorkspaceData = () => {
+export const useVideoWorkspaceData = (id?: string) => {
const { editedVideoInfo } = useVideoWorkspace()
const { channelId } = useAuthorizedUser()
const drafts = useDraftStore(channelDraftsSelector(channelId))
const { video, loading, error } = useFullVideo(
- editedVideoInfo?.id ?? '',
+ id ?? editedVideoInfo?.id ?? '',
{
skip: editedVideoInfo?.isDraft,
onError: (error) => SentryLogger.error('Failed to fetch video', 'useVideoWorkspaceData', error),
diff --git a/packages/atlas/src/providers/videoWorkspace/types.ts b/packages/atlas/src/providers/videoWorkspace/types.ts
index de9089161c..a1fdd1e1d5 100644
--- a/packages/atlas/src/providers/videoWorkspace/types.ts
+++ b/packages/atlas/src/providers/videoWorkspace/types.ts
@@ -1,10 +1,22 @@
import BN from 'bn.js'
-import { ImageInputMetadata, MediaInputMetadata } from '@/components/_inputs/MultiFileSelect'
import { NftIssuanceInputMetadata, VideoAssets, VideoInputMetadata } from '@/joystream-lib/types'
import { AssetDimensions, ImageCropData } from '@/types/cropper'
import { SubtitlesInput } from '@/types/subtitles'
+export type MediaInputMetadata = {
+ duration?: number | null
+ mediaPixelWidth?: number
+ mediaPixelHeight?: number
+ mimeType?: string
+ size?: number
+}
+
+export type ImageInputMetadata = {
+ imageCropData?: ImageCropData
+ assetDimensions?: AssetDimensions
+}
+
export type VideoWorkspaceVideoAssets = {
video: {
url?: string | undefined | null
diff --git a/packages/atlas/src/providers/wallet/wallet.helpers.ts b/packages/atlas/src/providers/wallet/wallet.helpers.ts
new file mode 100644
index 0000000000..a13a427b82
--- /dev/null
+++ b/packages/atlas/src/providers/wallet/wallet.helpers.ts
@@ -0,0 +1,29 @@
+import { BaseDotsamaWallet, getWallets } from '@talismn/connect-wallets'
+
+export const getWalletsList = () => {
+ const supportedWallets = getWallets()
+ const supportedWalletsNames = supportedWallets.map((wallet) => wallet.extensionName)
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const unknownWallets = Object.keys((window as any).injectedWeb3 || {}).reduce((acc, walletName) => {
+ if (supportedWalletsNames.includes(walletName)) {
+ // wallet is already in supportedWallets list
+ return acc
+ }
+
+ return [...acc, new UnknownWallet(walletName)]
+ }, [] as UnknownWallet[])
+
+ return [...supportedWallets, ...unknownWallets]
+}
+
+export class UnknownWallet extends BaseDotsamaWallet {
+ extensionName: string
+ title: string
+
+ constructor(walletName: string) {
+ super()
+ this.extensionName = walletName
+ this.title = walletName
+ }
+}
diff --git a/packages/atlas/src/providers/wallet/wallet.hooks.ts b/packages/atlas/src/providers/wallet/wallet.hooks.ts
new file mode 100644
index 0000000000..16a027d9a9
--- /dev/null
+++ b/packages/atlas/src/providers/wallet/wallet.hooks.ts
@@ -0,0 +1,14 @@
+import { useWalletContext } from '@/providers/wallet/wallet.provider'
+import { useWalletStore } from '@/providers/wallet/wallet.store'
+
+export const useWallet = () => {
+ const { walletStatus, walletAccounts, wallet } = useWalletStore()
+ const walletContext = useWalletContext()
+
+ return {
+ walletStatus,
+ walletAccounts,
+ wallet,
+ ...walletContext,
+ }
+}
diff --git a/packages/atlas/src/providers/wallet/wallet.provider.tsx b/packages/atlas/src/providers/wallet/wallet.provider.tsx
new file mode 100644
index 0000000000..09898b25ab
--- /dev/null
+++ b/packages/atlas/src/providers/wallet/wallet.provider.tsx
@@ -0,0 +1,199 @@
+import { WalletAccount } from '@talismn/connect-wallets'
+import { FC, PropsWithChildren, createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+
+// import { ViewErrorFallback } from '@/components/ViewErrorFallback'
+import { atlasConfig } from '@/config'
+import { JoystreamContext, JoystreamContextValue } from '@/providers/joystream/joystream.provider'
+import { useWalletStore } from '@/providers/wallet/wallet.store'
+import { SignerWalletAccount, WalletContextValue } from '@/providers/wallet/wallet.types'
+import { formatJoystreamAddress } from '@/utils/address'
+import { SentryLogger } from '@/utils/logs'
+import { retryWalletPromise } from '@/utils/misc'
+
+import { getWalletsList } from './wallet.helpers'
+
+const WalletContext = createContext(undefined)
+WalletContext.displayName = 'WalletContext'
+
+export const WalletProvider: FC = ({ children }) => {
+ const { walletStatus, wallet, lastChainMetadataVersion } = useWalletStore()
+ const {
+ setLastChainMetadataVersion,
+ setWallet,
+ setWalletAccounts: _setWalletAccounts,
+ setWalletStatus,
+ } = useWalletStore((state) => state.actions)
+ const joystreamCtx = useContext(JoystreamContext)
+
+ const [isSignerMetadataOutdated, setIsSignerMetadataOutdated] = useState(false)
+
+ const setWalletAccounts = useCallback(
+ async (accounts: WalletAccount[]) => {
+ const mappedAccounts = accounts.map((account) => {
+ return {
+ ...account,
+ address: formatJoystreamAddress(account.address),
+ }
+ })
+ _setWalletAccounts(mappedAccounts)
+ },
+ [_setWalletAccounts]
+ )
+
+ const initSignerWallet = useCallback(
+ async (walletName: string): Promise => {
+ try {
+ setWalletStatus('pending')
+ const allWallets = getWalletsList()
+ const selectedWallet = allWallets.find((wallet) => wallet.extensionName === walletName)
+ if (!selectedWallet || !selectedWallet.installed) {
+ setWalletStatus('disconnected')
+ return null
+ }
+
+ await selectedWallet.enable(atlasConfig.general.appName)
+
+ // taken from https://github.com/TalismanSociety/talisman-connect/blob/47cfefee9f1333326c0605c159d6ee8ebfba3e84/libs/wallets/src/lib/base-dotsama-wallet/index.ts#L98-L107
+ // should be part of future talisman-connect release
+ const accounts = await selectedWallet.extension.accounts.get()
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const accountsWithWallet = accounts.map((account: any) => {
+ return {
+ ...account,
+ address: formatJoystreamAddress(account.address),
+ source: selectedWallet.extension?.name as string,
+ wallet: selectedWallet,
+ signer: selectedWallet.extension?.signer,
+ }
+ })
+
+ setWalletAccounts(accountsWithWallet)
+ setWallet(selectedWallet)
+ setWalletStatus('connected')
+
+ return accountsWithWallet
+ } catch (e) {
+ setWalletStatus('disconnected')
+ throw e
+ }
+ },
+ [setWallet, setWalletAccounts, setWalletStatus]
+ )
+
+ const signInToWallet = useCallback(
+ async (walletName?: string, invokedAutomatically?: boolean): Promise => {
+ if (!walletName) {
+ return null
+ }
+
+ try {
+ const initializedAccounts = await (!invokedAutomatically
+ ? initSignerWallet(walletName)
+ : retryWalletPromise(() => initSignerWallet(walletName), 500, 2000))
+ if (initializedAccounts === null) {
+ SentryLogger.error('Selected wallet not found or not installed', 'UserProvider')
+ }
+ return initializedAccounts
+ } catch (e) {
+ SentryLogger.error('Failed to enable selected wallet', 'UserProvider', e)
+ return null
+ }
+ },
+ [initSignerWallet]
+ )
+
+ const checkSignerStatus = useCallback(async () => {
+ const chainMetadata = await joystreamCtx?.joystream?.getChainMetadata()
+
+ if (wallet?.extension.metadata && chainMetadata) {
+ const [localGenesisHash, localSpecVersion] = lastChainMetadataVersion ?? ['', 0]
+
+ // update was skipped
+ if (localGenesisHash === chainMetadata.genesisHash && localSpecVersion === chainMetadata.specVersion) {
+ return setIsSignerMetadataOutdated(false)
+ }
+
+ const extensionMetadata = await wallet.extension.metadata.get()
+ const currentChain = extensionMetadata.find(
+ (infoEntry: { specVersion: number; genesisHash: string }) =>
+ infoEntry.genesisHash === chainMetadata?.genesisHash
+ )
+
+ // if there isn't even a metadata entry for node with specific genesis hash then update
+ if (!currentChain) {
+ return setIsSignerMetadataOutdated(true)
+ }
+
+ // if there is metadata for this node then verify specVersion
+ const isOutdated = currentChain.specVersion < chainMetadata.specVersion
+ setIsSignerMetadataOutdated(isOutdated)
+ }
+ }, [joystreamCtx?.joystream, lastChainMetadataVersion, wallet?.extension.metadata])
+
+ const updateSignerMetadata = useCallback(async () => {
+ const chainMetadata = await joystreamCtx?.joystream?.getChainMetadata()
+ return wallet?.extension.metadata.provide(chainMetadata)
+ }, [joystreamCtx?.joystream, wallet?.extension.metadata])
+
+ const skipSignerMetadataUpdate = useCallback(async () => {
+ const chainMetadata = await joystreamCtx?.joystream?.getChainMetadata()
+ if (chainMetadata) {
+ setLastChainMetadataVersion(chainMetadata.genesisHash, chainMetadata.specVersion)
+ setIsSignerMetadataOutdated(false)
+ }
+ }, [joystreamCtx?.joystream, setLastChainMetadataVersion])
+
+ const handleAccountsChange = useCallback(
+ (accounts?: WalletAccount[]) => {
+ if (!accounts) {
+ setWalletAccounts([])
+ return
+ }
+ setWalletAccounts(accounts)
+ },
+ [setWalletAccounts]
+ )
+
+ useEffect(() => {
+ checkSignerStatus()
+ }, [checkSignerStatus])
+
+ useEffect(() => {
+ if (!wallet || walletStatus !== 'connected') {
+ return
+ }
+ type UnsubFn = () => void
+ let unsubscribeAccounts: UnsubFn | undefined
+ const subscribePromise = wallet.subscribeAccounts(handleAccountsChange) as Promise
+ subscribePromise.then((unsub) => {
+ unsubscribeAccounts = unsub
+ })
+ return () => {
+ unsubscribeAccounts?.()
+ }
+ }, [handleAccountsChange, wallet, walletStatus])
+
+ const contextValue: WalletContextValue = useMemo(
+ () => ({
+ signInToWallet,
+ isSignerMetadataOutdated,
+ updateSignerMetadata,
+ skipSignerMetadataUpdate,
+ }),
+ [signInToWallet, isSignerMetadataOutdated, updateSignerMetadata, skipSignerMetadataUpdate]
+ )
+
+ // if (error) {
+ // return {children}
+}
+
+export const useWalletContext = () => {
+ const ctx = useContext(WalletContext)
+ if (ctx === undefined) {
+ throw new Error('useWalletContext must be used within a WalletProvider')
+ }
+ return ctx
+}
diff --git a/packages/atlas/src/providers/wallet/wallet.store.ts b/packages/atlas/src/providers/wallet/wallet.store.ts
new file mode 100644
index 0000000000..6ebf5a75c5
--- /dev/null
+++ b/packages/atlas/src/providers/wallet/wallet.store.ts
@@ -0,0 +1,63 @@
+import { createStore } from '@/utils/store'
+
+import { SignerWallet, SignerWalletAccount, SignerWalletStatus } from './wallet.types'
+
+export type WalletStoreState = {
+ wallet: SignerWallet | null
+ walletAccounts: SignerWalletAccount[]
+ walletStatus: SignerWalletStatus
+ lastUsedWalletName: string | null
+ lastChainMetadataVersion: [string, number] | null // [genesisHash, number]
+}
+
+export type WalletStoreActions = {
+ setWallet: (wallet: SignerWallet) => void
+ setWalletAccounts: (accounts: SignerWalletAccount[]) => void
+ setWalletStatus: (status: SignerWalletStatus) => void
+ setLastChainMetadataVersion: (genesisHash: string, version: number) => void
+}
+
+export const useWalletStore = createStore(
+ {
+ state: {
+ wallet: null,
+ walletAccounts: [],
+ walletStatus: 'unknown',
+ lastUsedWalletName: null,
+ lastChainMetadataVersion: null,
+ },
+ actionsFactory: (set) => ({
+ setWallet: (wallet) => {
+ set((state) => {
+ state.wallet = wallet
+ state.lastUsedWalletName = wallet.extensionName
+ })
+ },
+ setWalletAccounts: (accounts) => {
+ set((state) => {
+ state.walletAccounts = accounts
+ })
+ },
+ setWalletStatus: (status) => {
+ set((state) => {
+ state.walletStatus = status
+ })
+ },
+ setLastChainMetadataVersion: (genesisHash, version) => {
+ set((state) => {
+ state.lastChainMetadataVersion = [genesisHash, version]
+ })
+ },
+ }),
+ },
+ {
+ persist: {
+ key: 'reacntWallet',
+ version: 0,
+ whitelist: ['lastUsedWalletName', 'lastChainMetadataVersion'],
+ migrate: (oldState) => {
+ return oldState
+ },
+ },
+ }
+)
diff --git a/packages/atlas/src/providers/wallet/wallet.types.ts b/packages/atlas/src/providers/wallet/wallet.types.ts
new file mode 100644
index 0000000000..92b41aea27
--- /dev/null
+++ b/packages/atlas/src/providers/wallet/wallet.types.ts
@@ -0,0 +1,12 @@
+import { Wallet, WalletAccount } from '@talismn/connect-wallets'
+
+export type SignerWallet = Wallet
+export type SignerWalletStatus = 'unknown' | 'connected' | 'disconnected' | 'pending'
+export type SignerWalletAccount = WalletAccount
+
+export type WalletContextValue = {
+ isSignerMetadataOutdated: boolean
+ skipSignerMetadataUpdate: () => Promise
+ signInToWallet: (walletName?: string, invokedAutomatically?: boolean) => Promise
+ updateSignerMetadata: () => Promise
+}
diff --git a/packages/atlas/src/providers/ypp/ypp.store.ts b/packages/atlas/src/providers/ypp/ypp.store.ts
index 874edc8304..8e47ecb7ef 100644
--- a/packages/atlas/src/providers/ypp/ypp.store.ts
+++ b/packages/atlas/src/providers/ypp/ypp.store.ts
@@ -1,17 +1,31 @@
import { createStore } from '@/utils/store'
+import { YppModalStep, YtResponseData } from './ypp.types'
+
type YppStoreState = {
referrerId: string | null
selectedChannelId: string | null
- authState: string | null // 'state' param passed to Google auth URL
- shouldContinueYppFlow: boolean
+ /**
+ * 'state' param passed to Google auth URL
+ */
+ ytStateParam: string | null
+ yppModalOpenName: YppModalStep
+ shouldContinueYppFlowAfterLogin: boolean
+ shouldContinueYppFlowAfterCreatingChannel: boolean
+ ytResponseData: YtResponseData
}
type YppStoreActions = {
setReferrerId: (referrerId: string | null) => void
setSelectedChannelId: (selectedChannelId: string | null) => void
- setAuthState: (authState: string | null) => void
- setShouldContinueYppFlow: (shouldContinueYppFlow: boolean) => void
+ /**
+ * sets 'state' param passed to Google auth URL
+ */
+ setYtStateParam: (authState: string | null) => void
+ setYppModalOpenName: (modal: YppModalStep) => void
+ setShouldContinueYppFlowAfterLogin: (shouldContinueYppFlow: boolean) => void
+ setShouldContinueYppFlowAfterCreatingChannel: (shouldContinueYppFlow: boolean) => void
+ setYtResponseData: (ytResponseData: YtResponseData) => void
}
export const useYppStore = createStore(
@@ -19,8 +33,11 @@ export const useYppStore = createStore(
state: {
referrerId: null,
selectedChannelId: null,
- authState: null,
- shouldContinueYppFlow: false,
+ ytStateParam: null,
+ yppModalOpenName: null,
+ shouldContinueYppFlowAfterLogin: false,
+ shouldContinueYppFlowAfterCreatingChannel: false,
+ ytResponseData: null,
},
actionsFactory: (set) => ({
setReferrerId: (referrerId) => {
@@ -33,14 +50,29 @@ export const useYppStore = createStore(
state.selectedChannelId = selectedChannelId
})
},
- setAuthState: (authState) => {
+ setYtStateParam: (authState) => {
+ set((state) => {
+ state.ytStateParam = authState
+ })
+ },
+ setYppModalOpenName: (modal) => {
+ set((state) => {
+ state.yppModalOpenName = modal
+ })
+ },
+ setShouldContinueYppFlowAfterLogin: (shouldContinueYppFlow) => {
+ set((state) => {
+ state.shouldContinueYppFlowAfterLogin = shouldContinueYppFlow
+ })
+ },
+ setShouldContinueYppFlowAfterCreatingChannel: (shouldContinueYppFlow) => {
set((state) => {
- state.authState = authState
+ state.shouldContinueYppFlowAfterCreatingChannel = shouldContinueYppFlow
})
},
- setShouldContinueYppFlow: (shouldContinueYppFlow) => {
+ setYtResponseData: (ytResponseData) => {
set((state) => {
- state.shouldContinueYppFlow = shouldContinueYppFlow
+ state.ytResponseData = ytResponseData
})
},
}),
@@ -48,7 +80,7 @@ export const useYppStore = createStore(
{
persist: {
key: 'ypp',
- whitelist: ['referrerId', 'authState'],
+ whitelist: ['referrerId', 'ytStateParam'],
version: 0,
migrate: (oldState) => oldState,
},
diff --git a/packages/atlas/src/providers/ypp/ypp.types.ts b/packages/atlas/src/providers/ypp/ypp.types.ts
new file mode 100644
index 0000000000..38a4f6645a
--- /dev/null
+++ b/packages/atlas/src/providers/ypp/ypp.types.ts
@@ -0,0 +1,12 @@
+import { ChannelVerificationSuccessResponse } from '@/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.types'
+
+export type YppModalStep =
+ | 'ypp-select-channel'
+ | 'ypp-requirements'
+ | 'ypp-fetching-data'
+ | 'ypp-sync-options'
+ | 'ypp-channel-already-registered'
+ | 'ypp-speaking-to-backend'
+ | null
+
+export type YtResponseData = (ChannelVerificationSuccessResponse & { authorizationCode: string }) | null
diff --git a/packages/atlas/src/styles/transitions.ts b/packages/atlas/src/styles/transitions.ts
index fa23a59dd5..8dff65e144 100644
--- a/packages/atlas/src/styles/transitions.ts
+++ b/packages/atlas/src/styles/transitions.ts
@@ -7,6 +7,7 @@ import { sizes } from './sizes'
export const transitions = {
easing: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
routingEasing: 'cubic-bezier(0.87, 0, 0.13, 1)',
+ switch: 'cubic-bezier(0.03, 0.5, 0.25, 1)',
timings: {
loading: '600ms',
regular: '400ms',
@@ -21,6 +22,9 @@ export const transitions = {
slide: 'slide',
slideDown: 'slide-down',
modal: 'modal',
+ dropdown: 'dropdown',
+ enterFromLeft: 'enterFromLeft',
+ enterFromRight: 'enterFromRight',
},
}
@@ -29,7 +33,7 @@ export const transitionStyles = css`
opacity: 0;
& .${transitions.names.slide} {
- transform: translateY(${sizes(8)});
+ transform: translateY(${sizes(7)});
}
}
@@ -129,4 +133,68 @@ export const transitionStyles = css`
opacity: 0 !important;
}
}
+
+ .${transitions.names.dropdown}-enter, .${transitions.names.dropdown}-appear {
+ opacity: 0;
+ transform: translateY(${sizes(-8)});
+ }
+
+ .${transitions.names.dropdown}-enter-done, .${transitions.names.dropdown}-appear-active {
+ opacity: 1;
+ transform: translateY(0);
+ transition: ${cVar('animationTimingMedium')} ${transitions.routingEasing};
+ }
+
+ .${transitions.names.dropdown}-exit {
+ opacity: 1;
+ }
+
+ .${transitions.names.dropdown}-exit-active {
+ opacity: 0;
+ transition: ${cVar('animationTimingMedium')} ${transitions.routingEasing};
+ }
+
+ .${transitions.names.enterFromRight}-enter, .${transitions.names.enterFromRight}-appear {
+ opacity: 0;
+ transform: translateX(280px);
+ position: absolute;
+ }
+
+ .${transitions.names.enterFromRight}-enter-done, .${transitions.names.enterFromRight}-appear-active {
+ opacity: 1;
+ transform: translateX(0);
+ transition: ${cVar('animationTimingMedium')} ${transitions.switch};
+ }
+
+ .${transitions.names.enterFromRight}-exit {
+ opacity: 1;
+ }
+
+ .${transitions.names.enterFromRight}-exit-active {
+ opacity: 0;
+ transform: translateX(280px);
+ transition: ${cVar('animationTimingMedium')} ${transitions.switch};
+ }
+
+ .${transitions.names.enterFromLeft}-enter, .${transitions.names.enterFromLeft}-appear {
+ opacity: 0;
+ transform: translateX(-280px);
+ position: absolute;
+ }
+
+ .${transitions.names.enterFromLeft}-enter-done, .${transitions.names.enterFromLeft}-appear-active {
+ opacity: 1;
+ transform: translateX(0);
+ transition: ${cVar('animationTimingMedium')} ${transitions.switch};
+ }
+
+ .${transitions.names.enterFromLeft}-exit {
+ opacity: 1;
+ }
+
+ .${transitions.names.enterFromLeft}-exit-active {
+ opacity: 0;
+ transform: translateX(-280px);
+ transition: ${cVar('animationTimingMedium')} ${transitions.switch};
+ }
`
diff --git a/packages/atlas/src/types/react-detectable-overflow.d.ts b/packages/atlas/src/types/react-detectable-overflow.d.ts
new file mode 100644
index 0000000000..afa22827be
--- /dev/null
+++ b/packages/atlas/src/types/react-detectable-overflow.d.ts
@@ -0,0 +1,10 @@
+/// (
+ props: useOverflowDetectorProps
+ ): {
+ overflow: boolean
+ ref: import('react').MutableRefObject
+ }
+}
diff --git a/packages/atlas/src/utils/formValidationOptions.ts b/packages/atlas/src/utils/formValidationOptions.ts
index f944325932..0a2743fb1a 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,28 @@ export const pastDateValidation = (date: Date | null, required = false) => {
const currentDate = new Date()
return currentDate >= date
}
+export const passwordAndRepeatPasswordSchema = z
+ .object({
+ password: z
+ .string()
+ .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.',
+ }
+ )
+ .refine(
+ (data) =>
+ !!data.password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]).{8,}$/)?.length,
+ {
+ path: ['password'],
+ message: 'Password has to meet requirements.',
+ }
+ )
diff --git a/packages/atlas/src/utils/image.ts b/packages/atlas/src/utils/image.ts
index 0b4835fb53..a530b0155e 100644
--- a/packages/atlas/src/utils/image.ts
+++ b/packages/atlas/src/utils/image.ts
@@ -33,3 +33,64 @@ export class UploadAvatarServiceError extends Error {
this.name = 'UploadAvatarServiceError'
}
}
+
+const resizeImage = (image: HTMLImageElement, targetWidth: number, targetHeight: number): HTMLCanvasElement => {
+ const canvas = document.createElement('canvas')
+ canvas.width = targetWidth
+ canvas.height = targetHeight
+
+ const ctx = canvas.getContext('2d')
+ if (ctx) {
+ const imageWidth = image.width
+ const imageHeight = image.height
+
+ // Calculate the coordinates to center the image
+ const x = Math.max(0, (targetWidth - imageWidth) / 2)
+ const y = Math.max(0, (targetHeight - imageHeight) / 2)
+
+ ctx.drawImage(image, x, y, imageWidth, imageHeight)
+ }
+
+ return canvas
+}
+
+export const imageUrlToBlob = async (imageUrl: string, width = 192, height = 192): Promise => {
+ try {
+ const response = await axios.get(imageUrl, {
+ responseType: 'blob',
+ headers: {
+ Accept: 'image/*',
+ },
+ })
+
+ const contentType: string | undefined = response.headers['content-type']
+ if (contentType && !contentType.startsWith('image/')) {
+ throw new Error('Invalid image URL')
+ }
+
+ const img = new Image()
+ img.src = URL.createObjectURL(response.data)
+
+ return new Promise((resolve, reject) => {
+ img.onload = () => {
+ const resizedCanvas = resizeImage(img, width, height)
+ resizedCanvas.toBlob((blob: Blob | null) => {
+ if (blob) {
+ resolve(blob)
+ img.remove()
+ } else {
+ reject(new Error('Failed to create Blob'))
+ img.remove()
+ }
+ })
+ }
+
+ img.onerror = () => {
+ reject(new Error('Failed to load image'))
+ img.remove()
+ }
+ })
+ } catch (error) {
+ throw new Error('Failed to fetch or process image')
+ }
+}
diff --git a/packages/atlas/src/utils/text.ts b/packages/atlas/src/utils/text.ts
new file mode 100644
index 0000000000..45039339b2
--- /dev/null
+++ b/packages/atlas/src/utils/text.ts
@@ -0,0 +1,4 @@
+export const removeSpecialCharacters = (input: string) => {
+ const regex = /[^\w\s]|_/g
+ return input.replace(regex, '').toLowerCase()
+}
diff --git a/packages/atlas/src/utils/video.ts b/packages/atlas/src/utils/video.ts
index 724e8aa98d..6888ea2fec 100644
--- a/packages/atlas/src/utils/video.ts
+++ b/packages/atlas/src/utils/video.ts
@@ -1,3 +1,5 @@
+import { NftIssuanceInputMetadata } from '@/joystream-lib/types'
+import { VideoWorkspaceVideoFormFields } from '@/providers/videoWorkspace'
import { ConsoleLogger } from '@/utils/logs'
import { formatDateAgo } from '@/utils/time'
@@ -41,3 +43,11 @@ export const getVideoMetadata = async (file: File): Promise => {
}
})
}
+
+export const createNftInputMetadata = (data: VideoWorkspaceVideoFormFields): NftIssuanceInputMetadata | undefined => {
+ return data.mintNft
+ ? {
+ royalty: data.nftRoyaltiesPercent || undefined,
+ }
+ : undefined
+}
diff --git a/packages/atlas/src/views/global/NftPurchaseBottomDrawer/NftPurchaseBottomDrawer.tsx b/packages/atlas/src/views/global/NftPurchaseBottomDrawer/NftPurchaseBottomDrawer.tsx
index f5fdfe25e9..d536b32c73 100644
--- a/packages/atlas/src/views/global/NftPurchaseBottomDrawer/NftPurchaseBottomDrawer.tsx
+++ b/packages/atlas/src/views/global/NftPurchaseBottomDrawer/NftPurchaseBottomDrawer.tsx
@@ -23,7 +23,7 @@ import { useMsTimestamp } from '@/hooks/useMsTimestamp'
import { useNftState } from '@/hooks/useNftState'
import { hapiBnToTokenNumber, tokenNumberToHapiBn } from '@/joystream-lib/utils'
import { getMemberAvatar } from '@/providers/assets/assets.helpers'
-import { useFee, useJoystream, useSubscribeAccountBalance } from '@/providers/joystream/joystream.hooks'
+import { useFee, useJoystream, useSubscribeAccountBalance } from '@/providers/joystream'
import { useJoystreamStore } from '@/providers/joystream/joystream.store'
import { useNftActions } from '@/providers/nftActions/nftActions.hooks'
import { useSnackbar } from '@/providers/snackbars'
diff --git a/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/AcceptTerms/AcceptTerms.tsx b/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/AcceptTerms/AcceptTerms.tsx
index 85036cf471..3d61cd5e57 100644
--- a/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/AcceptTerms/AcceptTerms.tsx
+++ b/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/AcceptTerms/AcceptTerms.tsx
@@ -8,7 +8,7 @@ import { NumberFormat } from '@/components/NumberFormat'
import { Text } from '@/components/Text'
import { atlasConfig } from '@/config'
import { getMemberAvatar } from '@/providers/assets/assets.helpers'
-import { useJoystream } from '@/providers/joystream/joystream.hooks'
+import { useJoystream } from '@/providers/joystream'
import { formatDateTime } from '@/utils/time'
import {
@@ -133,7 +133,7 @@ export const AcceptTerms: FC = ({
-
)}
@@ -152,7 +152,7 @@ export const AcceptTerms: FC = ({
/>
-
)}
@@ -239,7 +239,7 @@ export const AcceptTerms: FC = ({
/>
-
diff --git a/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/NftForm.hooks.ts b/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/NftForm.hooks.ts
index b5bbeae523..94de810f84 100644
--- a/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/NftForm.hooks.ts
+++ b/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/NftForm.hooks.ts
@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react'
import { AuctionDatePickerValue } from '@/components/_inputs/AuctionDatePicker'
import { useBlockTimeEstimation } from '@/hooks/useBlockTimeEstimation'
-import { useJoystream } from '@/providers/joystream/joystream.hooks'
+import { useJoystream } from '@/providers/joystream'
import { daysToMilliseconds } from '@/utils/time'
import { Listing } from './NftForm.types'
diff --git a/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/NftForm.tsx b/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/NftForm.tsx
index d2dc153718..34ff59273f 100644
--- a/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/NftForm.tsx
+++ b/packages/atlas/src/views/global/NftSaleBottomDrawer/NftForm/NftForm.tsx
@@ -15,7 +15,7 @@ import { NftBuyNowInputMetadata, NftSaleInputMetadata } from '@/joystream-lib/ty
import { hapiBnToTokenNumber, tokenNumberToHapiBn } from '@/joystream-lib/utils'
import { getMemberAvatar } from '@/providers/assets/assets.helpers'
import { useConfirmationModal } from '@/providers/confirmationModal'
-import { useFee } from '@/providers/joystream/joystream.hooks'
+import { useFee } from '@/providers/joystream'
import { useUser } from '@/providers/user/user.hooks'
import { SentryLogger } from '@/utils/logs'
import { formatDateTime } from '@/utils/time'
diff --git a/packages/atlas/src/views/global/NftSaleBottomDrawer/NftSaleBottomDrawer.tsx b/packages/atlas/src/views/global/NftSaleBottomDrawer/NftSaleBottomDrawer.tsx
index c4c873fc18..5211c70b00 100644
--- a/packages/atlas/src/views/global/NftSaleBottomDrawer/NftSaleBottomDrawer.tsx
+++ b/packages/atlas/src/views/global/NftSaleBottomDrawer/NftSaleBottomDrawer.tsx
@@ -7,7 +7,7 @@ import { BottomDrawer } from '@/components/_overlays/BottomDrawer'
import { absoluteRoutes } from '@/config/routes'
import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
import { useConfirmationModal } from '@/providers/confirmationModal'
-import { useJoystream } from '@/providers/joystream/joystream.hooks'
+import { useJoystream } from '@/providers/joystream'
import { useNftActions } from '@/providers/nftActions/nftActions.hooks'
import { useSnackbar } from '@/providers/snackbars'
import { useTransaction } from '@/providers/transactions/transactions.hooks'
diff --git a/packages/atlas/src/views/global/NftSettlementBottomDrawer/NftSettlementBottomDrawer.tsx b/packages/atlas/src/views/global/NftSettlementBottomDrawer/NftSettlementBottomDrawer.tsx
index 04672dba43..7657e344ef 100644
--- a/packages/atlas/src/views/global/NftSettlementBottomDrawer/NftSettlementBottomDrawer.tsx
+++ b/packages/atlas/src/views/global/NftSettlementBottomDrawer/NftSettlementBottomDrawer.tsx
@@ -10,7 +10,7 @@ import { NftCard } from '@/components/_nft/NftCard'
import { BottomDrawer } from '@/components/_overlays/BottomDrawer'
import { useMediaMatch } from '@/hooks/useMediaMatch'
import { getMemberAvatar } from '@/providers/assets/assets.helpers'
-import { useFee, useJoystream } from '@/providers/joystream/joystream.hooks'
+import { useFee, useJoystream } from '@/providers/joystream'
import { useNftActions } from '@/providers/nftActions/nftActions.hooks'
import { useSnackbar } from '@/providers/snackbars'
import { useTransaction } from '@/providers/transactions/transactions.hooks'
diff --git a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.stories.tsx b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.stories.tsx
index ea8324c406..7a1698a484 100644
--- a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.stories.tsx
+++ b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.stories.tsx
@@ -10,7 +10,6 @@ import { OverlayManagerProvider } from '@/providers/overlayManager'
import { UserProvider } from '@/providers/user/user.provider'
import { YppAuthorizationModal, YppAuthorizationModalProps } from './YppAuthorizationModal'
-import { YppAuthorizationStepsType } from './YppAuthorizationModal.types'
export default {
title: 'ypp/YppAuthorizationModal',
@@ -19,23 +18,6 @@ export default {
args: {
step: 'requirements',
},
- argTypes: {
- currentStep: { table: { disable: true } },
- step: {
- control: {
- type: 'select',
- options: [
- 'requirements',
- 'details',
- 'fetching-data',
- 'select-channel',
- 'summary',
- 'terms-and-conditions',
- 'channel-already-registered',
- ] as YppAuthorizationStepsType[],
- },
- },
- },
decorators: [
(Story) => {
const apolloClient = createApolloClient()
@@ -58,12 +40,12 @@ export default {
],
} as Meta
-const Template: Story = (args) => {
+const Template: Story = (args) => {
const apolloClient = createApolloClient()
return (
-
)
diff --git a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.styles.ts b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.styles.ts
index 75fc064e3a..9ae701d36b 100644
--- a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.styles.ts
+++ b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.styles.ts
@@ -17,20 +17,12 @@ export const Content = styled.div`
margin-top: ${sizes(6)};
`
-export const DescriptionText = styled(Text)`
- display: block;
-`
-
export const Anchor = styled.a`
text-decoration: none;
color: inherit;
cursor: pointer;
`
-export const Img = styled.img`
- width: 100%;
-`
-
export const HeaderIconsWrapper = styled.div`
display: flex;
align-items: center;
diff --git a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx
index 8d25fa29b8..df2b722fd7 100644
--- a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx
+++ b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.tsx
@@ -1,55 +1,50 @@
import axios from 'axios'
-import { formatDuration } from 'date-fns'
import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import { useMutation } from 'react-query'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import shallow from 'zustand/shallow'
-import { useBasicChannel } from '@/api/hooks/channel'
+import { useBasicChannel, useFullChannel } from '@/api/hooks/channel'
import { FullMembershipFieldsFragment } from '@/api/queries/__generated__/fragments.generated'
import { SvgAlertsError32 } from '@/assets/icons'
-import appScreenshot from '@/assets/images/ypp-authorization/app-screenshot.webp'
import { Text } from '@/components/Text'
import { Button } from '@/components/_buttons/Button'
import { GoogleButton } from '@/components/_buttons/GoogleButton'
import { Loader } from '@/components/_loaders/Loader'
+import { DialogButtonProps } from '@/components/_overlays/Dialog'
import { DialogModal } from '@/components/_overlays/DialogModal'
import { atlasConfig } from '@/config'
+import { displayCategoriesLookup } from '@/config/categories'
import { absoluteRoutes } from '@/config/routes'
+import { useCreateEditChannelSubmit } from '@/hooks/useChannelFormSubmit'
import { useMediaMatch } from '@/hooks/useMediaMatch'
import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
-import { useChannelsStorageBucketsCount } from '@/providers/assets/assets.hooks'
-import { useBloatFeesAndPerMbFees, useJoystream } from '@/providers/joystream/joystream.hooks'
-import { useOverlayManager } from '@/providers/overlayManager'
+import { useAuthStore } from '@/providers/auth/auth.store'
import { useSnackbar } from '@/providers/snackbars'
-import { useTransaction } from '@/providers/transactions/transactions.hooks'
import { useUser } from '@/providers/user/user.hooks'
import { useYppStore } from '@/providers/ypp/ypp.store'
+import { createId } from '@/utils/createId'
+import { imageUrlToBlob } from '@/utils/image'
import { SentryLogger } from '@/utils/logs'
-import { pluralizeNoun } from '@/utils/misc'
-import { useGetYppSyncedChannels } from '@/views/global/YppLandingView/YppLandingView.hooks'
-import { useGetYppChannelRequirements, useYppGoogleAuth } from './YppAuthorizationModal.hooks'
import {
Anchor,
- CategoriesText,
Content,
- DescriptionText,
HeaderIconsWrapper,
- Img,
RequirementsButtonSkeleton,
StyledSvgAppLogoShort,
} from './YppAuthorizationModal.styles'
-import { YppAuthorizationErrorCode, YppAuthorizationStepsType } from './YppAuthorizationModal.types'
import {
DetailsFormData,
YppAuthorizationDetailsFormStep,
YppAuthorizationRequirementsStep,
YppAuthorizationSelectChannelStep,
- YppAuthorizationSyncStep,
- YppAuthorizationTermsAndConditionsStep,
YppSyncStepData,
} from './YppAuthorizationSteps'
+import { useYppGoogleAuth } from './useYppGoogleAuth'
+
+import { useGetYppSyncedChannels } from '../useGetYppSyncedChannels'
type FinalFormData = {
authorizationCode?: string
@@ -62,38 +57,73 @@ type FinalFormData = {
}
export type YppAuthorizationModalProps = {
- currentStep: YppAuthorizationStepsType
- onChangeStep: (step: YppAuthorizationStepsType) => void
unSyncedChannels?: FullMembershipFieldsFragment['channels']
}
+const stepToPageName = {
+ 'ypp-select-channel': 'YPP Select Channel modal',
+ 'ypp-requirements': 'YPP Requirements modal',
+ 'ypp-fetching-data': 'YPP Fetching Data modal',
+ 'ypp-sync-options': 'YPP Category And Referrer Modal',
+ 'ypp-channel-already-registered': 'YPP channel already registered modal',
+ 'ypp-speaking-to-backend': 'YPP processing modal',
+}
+
const APP_NAME = atlasConfig.general.appName
+const COLLABORATOR_ID = atlasConfig.features.ypp.youtubeCollaboratorMemberId
+const DEFAULT_LANGUAGE = atlasConfig.derived.popularLanguagesSelectValues[0].value
-export const YppAuthorizationModal: FC = ({
- currentStep,
- onChangeStep,
- unSyncedChannels,
-}) => {
- const { setActiveUser, memberId, activeMembership } = useUser()
+export const YppAuthorizationModal: FC = ({ unSyncedChannels }) => {
+ const { memberId, refetchUserMemberships, setActiveChannel, channelId, isLoggedIn } = useUser()
+ const [searchParams] = useSearchParams()
+ const [utmSource, setUtmSource] = useState(null)
const navigate = useNavigate()
const [isSubmitting, setIsSubmitting] = useState(false)
- const { decrementOverlaysOpenCount } = useOverlayManager()
+ const createdChannelId = useRef(null)
const {
unsyncedChannels: yppUnsyncedChannels,
currentChannel: yppCurrentChannel,
isLoading,
} = useGetYppSyncedChannels()
+
+ const setYppModalOpenName = useYppStore((state) => state.actions.setYppModalOpenName)
+ const yppModalOpenName = useYppStore((state) => state.yppModalOpenName)
+
const contentRef = useRef(null)
const channelsLoaded = !!unSyncedChannels
const [finalFormData, setFinalFormData] = useState(null)
const selectedChannelId = useYppStore((store) => store.selectedChannelId)
- const referrerId = useYppStore((store) => store.referrerId)
const setSelectedChannelId = useYppStore((store) => store.actions.setSelectedChannelId)
+ const {
+ referrerId,
+ ytResponseData,
+ actions: { setYtResponseData },
+ } = useYppStore((store) => store, shallow)
const setReferrerId = useYppStore((store) => store.actions.setReferrerId)
- const setShouldContinueYppFlow = useYppStore((store) => store.actions.setShouldContinueYppFlow)
- const { data: fetchedChannelRequirements } = useGetYppChannelRequirements()
- const { mutateAsync: yppChannelMutation } = useMutation('ypp-channels-post', (finalFormData: FinalFormData | null) =>
- axios.post(`${atlasConfig.features.ypp.youtubeSyncApiUrl}/channels`, finalFormData)
+ const setShouldContinueYppFlowAfterLogin = useYppStore((store) => store.actions.setShouldContinueYppFlowAfterLogin)
+ const { mutateAsync: yppSignChannelMutation } = useMutation(
+ 'ypp-channels-post',
+ (finalFormData: FinalFormData | null) =>
+ axios.post(`${atlasConfig.features.ypp.youtubeSyncApiUrl}/channels`, finalFormData)
+ )
+
+ const { setAuthModalOpenName } = useAuthStore(
+ (state) => ({
+ setAuthModalOpenName: state.actions.setAuthModalOpenName,
+ }),
+ shallow
+ )
+
+ const { refetch: refetchChannel } = useFullChannel(
+ channelId || '',
+ {
+ skip: !channelId,
+ onError: (error) =>
+ SentryLogger.error('Failed to fetch channel', 'UploadStatus', error, {
+ channel: { id: channelId },
+ }),
+ },
+ { where: { channel: { isPublic_eq: undefined, isCensored_eq: undefined } } }
)
const smMatch = useMediaMatch('sm')
@@ -102,61 +132,57 @@ export const YppAuthorizationModal: FC = ({
defaultValues: {
referrerChannelId: '',
referrerChannelTitle: '',
- email: '',
shouldBeIngested: true,
},
})
- const { dataObjectStateBloatBondValue } = useBloatFeesAndPerMbFees()
- const channelBucketsCount = useChannelsStorageBucketsCount(selectedChannelId)
-
- const { joystream, proxyCallback } = useJoystream()
- const youtubeCollaboratorMemberId = atlasConfig.features.ypp.youtubeCollaboratorMemberId
const { extendedChannel } = useBasicChannel(referrerId || '', {
skip: !referrerId,
})
+ const { trackPageView, trackYppOptIn, identifyUser } = useSegmentAnalytics()
const channel = extendedChannel?.channel
- const handleTransaction = useTransaction()
const { displaySnackbar } = useSnackbar()
- const { trackYppOptIn } = useSegmentAnalytics()
- const {
- handleAuthorizeClick,
- ytRequirementsErrors,
- ytResponseData,
- setYtRequirementsErrors,
- alreadyRegisteredChannel,
- } = useYppGoogleAuth({
- closeModal: useCallback(() => onChangeStep(null), [onChangeStep]),
- channelsLoaded,
- onChangeStep: onChangeStep,
- })
+ const { handleAuthorizeClick, ytRequirementsErrors, setYtRequirementsErrors, alreadyRegisteredChannel } =
+ useYppGoogleAuth({
+ channelsLoaded,
+ })
+
+ useEffect(() => {
+ if (searchParams.get('utm_source')) {
+ setUtmSource(searchParams.get('utm_source'))
+ }
+ }, [searchParams])
useEffect(() => {
contentRef.current?.scrollTo({ top: 0 })
- }, [currentStep])
+ yppModalOpenName && trackPageView(stepToPageName[yppModalOpenName])
+ }, [trackPageView, yppModalOpenName])
const handleClose = useCallback(() => {
setYtRequirementsErrors([])
setReferrerId(null)
- onChangeStep(null)
+ setYppModalOpenName(null)
setSelectedChannelId(null)
- setShouldContinueYppFlow(false)
- }, [onChangeStep, setReferrerId, setSelectedChannelId, setShouldContinueYppFlow, setYtRequirementsErrors])
+ setShouldContinueYppFlowAfterLogin(false)
+ }, [
+ setYppModalOpenName,
+ setReferrerId,
+ setSelectedChannelId,
+ setShouldContinueYppFlowAfterLogin,
+ setYtRequirementsErrors,
+ ])
const handleGoBack = useCallback(() => {
- if (currentStep === 'ypp-sync') {
- onChangeStep('details')
+ if (yppModalOpenName === 'ypp-sync-options') {
+ setYppModalOpenName(null)
}
- if (currentStep === 'terms-and-conditions') {
- onChangeStep('ypp-sync')
+ if (yppModalOpenName === 'ypp-sync-options' || yppModalOpenName === 'ypp-channel-already-registered') {
+ setYppModalOpenName('ypp-select-channel')
}
- if (currentStep === 'details' || currentStep === 'channel-already-registered') {
- onChangeStep('select-channel')
- }
- }, [currentStep, onChangeStep])
+ }, [yppModalOpenName, setYppModalOpenName])
const handleSelectChannel = useCallback(
(selectedChannelId: string) => {
@@ -166,56 +192,113 @@ export const YppAuthorizationModal: FC = ({
[setSelectedChannelId, setYtRequirementsErrors]
)
- const handleSubmitDetailsForm = detailsFormMethods.handleSubmit((data) => {
+ const createOrUpdateChannel = useCreateEditChannelSubmit()
+
+ const handleCreateOrUpdateChannel = detailsFormMethods.handleSubmit(async (data) => {
setFinalFormData(() => ({
...(selectedChannelId ? { joystreamChannelId: parseInt(selectedChannelId) } : {}),
authorizationCode: ytResponseData?.authorizationCode,
userId: ytResponseData?.userId,
- email: data.email,
shouldBeIngested: data.shouldBeIngested,
videoCategoryId: data.videoCategoryId,
...(data.referrerChannelId ? { referrerChannelId: parseInt(data.referrerChannelId) } : {}),
}))
- onChangeStep(currentStep === 'details' ? 'ypp-sync' : 'terms-and-conditions')
- })
+ setIsSubmitting(true)
+
+ setYppModalOpenName('ypp-speaking-to-backend')
- const handleAcceptTermsAndSubmit = useCallback(async () => {
- if (!joystream || !selectedChannelId || !memberId) {
- return
- }
try {
- if (!youtubeCollaboratorMemberId) {
+ const avatarBlob = ytResponseData?.avatarUrl ? await imageUrlToBlob(ytResponseData?.avatarUrl) : null
+
+ const coverBlob = ytResponseData?.bannerUrl ? await imageUrlToBlob(ytResponseData?.bannerUrl, 1920, 480) : null
+
+ const avatarContentId = `local-avatar-${createId()}`
+ const coverContentId = `local-cover-${createId()}`
+
+ if (!memberId) {
+ throw Error('memberId id was not provided')
+ }
+ if (!COLLABORATOR_ID) {
throw Error('Collaborator member id was not provided')
}
- setIsSubmitting(true)
- await yppChannelMutation(finalFormData)
- const completed = await handleTransaction({
- txFactory: async (updateStatus) => {
- return (await joystream.extrinsics).updateChannel(
- selectedChannelId,
- memberId,
- { ownerAccount: memberId },
- {},
- [],
- dataObjectStateBloatBondValue.toString(),
- channelBucketsCount.toString(),
- youtubeCollaboratorMemberId,
- proxyCallback(updateStatus)
- )
+
+ await createOrUpdateChannel({
+ minimized: {
+ errorMessage: 'Failed to create or update channel',
},
- })
- if (completed) {
- setTimeout(() => {
- const { email, videoCategoryId } = finalFormData || {}
+ data: {
+ collaboratorId: COLLABORATOR_ID,
+ metadata: selectedChannelId
+ ? { ownerAccount: memberId }
+ : {
+ ownerAccount: memberId,
+ description: ytResponseData?.channelDescription,
+ isPublic: true,
+ language: DEFAULT_LANGUAGE,
+ title: ytResponseData?.channelTitle || ytResponseData?.channelHandle,
+ },
+ refetchChannel,
+ newChannel: !selectedChannelId,
+ assets: selectedChannelId
+ ? {}
+ : {
+ avatarPhoto: {
+ assetDimensions: { height: 192, width: 192 },
+ contentId: avatarContentId,
+ imageCropData: null,
+ croppedBlob: avatarBlob,
+ originalBlob: avatarBlob,
+ },
+ coverPhoto: {
+ assetDimensions: { width: 1920, height: 480 },
+ contentId: coverContentId,
+ imageCropData: null,
+ croppedBlob: coverBlob,
+ originalBlob: coverBlob,
+ },
+ },
+ },
+ onTxSync: async ({ channelId }) => {
+ setActiveChannel(channelId)
+ createdChannelId.current = channelId
+ },
+ onCompleted: async () => {
+ await refetchUserMemberships()
+
+ const channelId = selectedChannelId || createdChannelId.current
+
+ const channelCreationResponse = await yppSignChannelMutation({
+ ...(channelId ? { joystreamChannelId: parseInt(channelId) } : {}),
+ ...(data.referrerChannelId ? { referrerChannelId: parseInt(data.referrerChannelId) } : {}),
+ authorizationCode: ytResponseData?.authorizationCode,
+ userId: ytResponseData?.userId,
+ email: ytResponseData?.email,
+ shouldBeIngested: data.shouldBeIngested,
+ videoCategoryId: data.videoCategoryId,
+ })
+
+ identifyUser(ytResponseData?.email)
trackYppOptIn(
- yppCurrentChannel?.title || '',
- email ?? '',
- videoCategoryId ?? '',
- yppCurrentChannel?.subscribersCount.toString() ?? '0'
+ ytResponseData?.channelHandle,
+ ytResponseData?.email,
+ data.videoCategoryId ? displayCategoriesLookup[data.videoCategoryId]?.name : undefined,
+ channelCreationResponse.data.channel.subscribersCount,
+ data.referrerChannelId,
+ utmSource || undefined
)
- onChangeStep('summary')
- }, 2000)
- }
+ setYtResponseData(null)
+
+ navigate(absoluteRoutes.studio.ypp())
+ displaySnackbar({
+ title: 'YouTube Synch Enabled',
+ description:
+ 'We started importing your YouTube videos. Allow up to 30 minutes for the YouTube videos to start showing in your channel.',
+ actionText: 'Go to My videos',
+ onActionClick: () => navigate(absoluteRoutes.studio.videos()),
+ iconType: 'info',
+ })
+ },
+ })
} catch (error) {
displaySnackbar({
title: 'Authorization failed',
@@ -228,25 +311,10 @@ export const YppAuthorizationModal: FC = ({
},
})
} finally {
+ setYppModalOpenName(null)
setIsSubmitting(false)
}
- }, [
- joystream,
- selectedChannelId,
- memberId,
- yppChannelMutation,
- finalFormData,
- handleTransaction,
- dataObjectStateBloatBondValue,
- channelBucketsCount,
- youtubeCollaboratorMemberId,
- proxyCallback,
- onChangeStep,
- displaySnackbar,
- yppCurrentChannel?.subscribersCount,
- yppCurrentChannel?.title,
- trackYppOptIn,
- ])
+ })
useEffect(() => {
if (channel?.title && referrerId) {
@@ -255,12 +323,6 @@ export const YppAuthorizationModal: FC = ({
}
}, [channel, detailsFormMethods, referrerId])
- useEffect(() => {
- if (ytResponseData?.email && ytResponseData.email.includes('@gmail.com')) {
- detailsFormMethods.setValue('email', ytResponseData.email)
- }
- }, [detailsFormMethods, ytResponseData?.email])
-
const selectedChannel = useMemo(() => {
if (!unSyncedChannels || !selectedChannelId) {
return null
@@ -268,79 +330,9 @@ export const YppAuthorizationModal: FC = ({
return unSyncedChannels.find((channel) => channel.id === selectedChannelId)
}, [unSyncedChannels, selectedChannelId])
- const handleGoToDashboard = useCallback(() => {
- decrementOverlaysOpenCount()
- setActiveUser({ channelId: selectedChannel?.id })
- }, [decrementOverlaysOpenCount, selectedChannel?.id, setActiveUser])
-
- const convertHoursRequirementTime = (hours: number) => {
- if (hours > 24 * 30) {
- return formatDuration({ months: Math.round(hours / (24 * 30)) })
- }
- if (hours > 24) {
- return formatDuration({ days: Math.round(hours / 24) })
- }
- return formatDuration({ hours: hours })
- }
-
- const requirements = useMemo(
- () => [
- ...(atlasConfig.general.appContentFocus
- ? [
- {
- text: (
- <>
- The main topic of your videos is{' '}
-
- {atlasConfig.general.appContentFocus}
-
-
- {atlasConfig.general.appName} video categories:{' '}
- {atlasConfig.content.categories.map((category) => category.name).join(', ')}
-
-
- ),
- fulfilled: true,
- },
- ]
- : []),
- {
- text: `Your YouTube channel is at least ${convertHoursRequirementTime(
- fetchedChannelRequirements?.MINIMUM_CHANNEL_AGE_HOURS || 0
- )} old`,
- fulfilled: !ytRequirementsErrors.some(
- (error) => error === YppAuthorizationErrorCode.CHANNEL_CRITERIA_UNMET_CREATION_DATE
- ),
- },
- {
- text: `Your YouTube channel has at least ${pluralizeNoun(
- fetchedChannelRequirements?.MINIMUM_VIDEO_COUNT ?? 0,
- 'video',
- true
- )}, all published at least ${convertHoursRequirementTime(
- fetchedChannelRequirements?.MINIMUM_VIDEO_AGE_HOURS || 0
- )} ago`,
- fulfilled: !ytRequirementsErrors.some(
- (error) => error === YppAuthorizationErrorCode.CHANNEL_CRITERIA_UNMET_VIDEOS
- ),
- },
- {
- text: `Your YouTube channel has at least ${pluralizeNoun(
- fetchedChannelRequirements?.MINIMUM_SUBSCRIBERS_COUNT ?? 0,
- 'subscriber',
- true
- )} and subscriptions are made public.`,
- fulfilled: !ytRequirementsErrors.some(
- (error) => error === YppAuthorizationErrorCode.CHANNEL_CRITERIA_UNMET_SUBSCRIBERS
- ),
- },
- ],
- [fetchedChannelRequirements, ytRequirementsErrors]
- )
-
const authorizationStep = useMemo(() => {
- switch (currentStep) {
- case 'requirements': {
+ switch (yppModalOpenName) {
+ case 'ypp-requirements': {
const getPrimaryButton = () => {
if (isLoading) {
return = ({
navigate(absoluteRoutes.studio.ypp())
}
- if (!activeMembership?.channels.length) {
- return {
- text: 'Create a new channel',
- onClick: () => navigate(absoluteRoutes.studio.newChannel()),
- }
- }
-
if (yppUnsyncedChannels?.length) {
setSelectedChannelId(yppUnsyncedChannels[0].id)
}
+ if (ytRequirementsErrors.length) {
+ return {
+ text: 'Close',
+ onClick: handleClose,
+ }
+ }
+
if (yppUnsyncedChannels && yppUnsyncedChannels.length > 1) {
return {
text: 'Select channel',
- onClick: () => onChangeStep('select-channel'),
+ onClick: () => setYppModalOpenName('ypp-select-channel'),
}
}
- return (
- {
- setSelectedChannelId(yppUnsyncedChannels?.[0].id ?? '')
- handleAuthorizeClick(yppUnsyncedChannels?.[0].id)
- }}
- />
- )
+ // non signed users
+ return {
+ text: 'Create account',
+ onClick: () => {
+ setSelectedChannelId(yppUnsyncedChannels?.[0]?.id ?? '')
+ handleAuthorizeClick(yppUnsyncedChannels?.[0]?.id)
+ },
+ }
}
return {
- title: 'Requirements',
- description: `Before you can apply to the program, make sure your YouTube channel meets the below conditions.`,
+ headerIcon: ytRequirementsErrors.length ? handleAuthorizeClick()} />,
+ primaryButton: {
+ text: 'Continue',
+ disabled: !selectedChannel,
+ onClick: () => handleAuthorizeClick(),
+ },
component: (
= ({
/>
),
}
- case 'fetching-data':
+ case 'ypp-fetching-data':
return {
headerIcon: = ({
disabled: true,
},
}
- case 'details':
+
+ case 'ypp-sync-options':
return {
- title: 'Details',
- description: 'Provide additional information to set up your program membership.',
+ title: 'YouTube Auto Sync',
+ description: 'Gleev automatically syncs all your YouTube videos.',
primaryButton: {
- onClick: () => handleSubmitDetailsForm(),
+ onClick: () => handleCreateOrUpdateChannel(),
text: 'Continue',
},
component:
- Your channel is now successfully enrolled to {APP_NAME} YouTube Partnership Program! Go to Dashboard for
- more information.
-
- ),
+ headerIcon: 
,
}
- case 'channel-already-registered':
+ case 'ypp-channel-already-registered':
return {
headerIcon: = ({
}
}
}, [
- currentStep,
+ yppModalOpenName,
selectedChannel,
unSyncedChannels,
selectedChannelId,
handleSelectChannel,
- isSubmitting,
- handleAcceptTermsAndSubmit,
- handleGoToDashboard,
alreadyRegisteredChannel?.channelTitle,
alreadyRegisteredChannel?.ownerMemberHandle,
- requirements,
+ ytRequirementsErrors,
isLoading,
yppCurrentChannel,
- activeMembership?.channels.length,
yppUnsyncedChannels,
navigate,
setSelectedChannelId,
- onChangeStep,
+ handleClose,
+ setYppModalOpenName,
handleAuthorizeClick,
- handleSubmitDetailsForm,
+ handleCreateOrUpdateChannel,
])
- const secondaryButton = useMemo(() => {
- if (currentStep === 'requirements' || currentStep === 'select-channel') return
- if (currentStep === 'summary') {
+ const isLoadingModal = yppModalOpenName === 'ypp-fetching-data' || yppModalOpenName === 'ypp-speaking-to-backend'
+
+ const secondaryButton: DialogButtonProps | undefined = useMemo(() => {
+ if (isLoadingModal || ytRequirementsErrors.length) return
+
+ if (yppModalOpenName === 'ypp-requirements' && isLoggedIn) return
+
+ if (yppModalOpenName === 'ypp-requirements' && !isLoggedIn) {
+ return {
+ text: 'Sign in',
+ onClick: () => {
+ setShouldContinueYppFlowAfterLogin(true)
+ setYppModalOpenName(null)
+ setAuthModalOpenName('logIn')
+ },
+ }
+ }
+
+ if (yppModalOpenName === 'ypp-select-channel') {
return {
- text: 'Close',
- onClick: handleClose,
+ text: 'Create new channel',
+ onClick: () => {
+ setYppModalOpenName(null)
+ handleAuthorizeClick()
+ },
}
}
@@ -513,20 +502,31 @@ export const YppAuthorizationModal: FC = ({
disabled: isSubmitting,
onClick: handleGoBack,
}
- }, [currentStep, handleGoBack, isSubmitting, handleClose])
+ }, [
+ isLoadingModal,
+ yppModalOpenName,
+ isLoggedIn,
+ ytRequirementsErrors.length,
+ isSubmitting,
+ handleGoBack,
+ setShouldContinueYppFlowAfterLogin,
+ setYppModalOpenName,
+ setAuthModalOpenName,
+ handleAuthorizeClick,
+ ])
return (
Cancel
@@ -539,7 +539,6 @@ export const YppAuthorizationModal: FC = ({
{authorizationStep?.title}
- {authorizationStep?.additionalSubtitleNode}
{authorizationStep?.description}
diff --git a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.types.ts b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.types.ts
index ab0f81f18a..dca274cc71 100644
--- a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.types.ts
+++ b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.types.ts
@@ -2,17 +2,6 @@ import { FullMembershipFieldsFragment } from '@/api/queries/__generated__/fragme
export type MemberChannel = FullMembershipFieldsFragment['channels'][0]
-export type YppAuthorizationStepsType =
- | 'select-channel'
- | 'requirements'
- | 'fetching-data'
- | 'details'
- | 'ypp-sync'
- | 'terms-and-conditions'
- | 'summary'
- | 'channel-already-registered'
- | null
-
export enum YppAuthorizationErrorCode {
CHANNEL_ALREADY_REGISTERED = 'CHANNEL_ALREADY_REGISTERED',
CHANNEL_NOT_FOUND = 'CHANNEL_NOT_FOUND',
@@ -34,6 +23,11 @@ export type YppRequirementsErrorCode = PickEnum<
export type ChannelVerificationSuccessResponse = {
email: string
userId: string
+ channelHandle: string
+ channelTitle: string
+ channelDescription?: string
+ avatarUrl?: string
+ bannerUrl?: string
}
export type ChannelRequirements = {
@@ -43,6 +37,8 @@ export type ChannelRequirements = {
MINIMUM_CHANNEL_AGE_HOURS: number
}
+export type Requirements = Record
+
type ChannelRequirementsFailedError = {
code: YppRequirementsErrorCode
message: string
@@ -67,9 +63,3 @@ export type ChannelVerificationErrorResponse =
}
| YppError
| ChannelAlreadyRegisteredError
-
-export type YoutubeResponseData = {
- email: string
- userId: string
- authorizationCode: string
-}
diff --git a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationDetailsFormStep/YppAuthorizationDetailsFormStep.tsx b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationDetailsFormStep/YppAuthorizationDetailsFormStep.tsx
index 763265b475..bdcfe53d86 100644
--- a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationDetailsFormStep/YppAuthorizationDetailsFormStep.tsx
+++ b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationDetailsFormStep/YppAuthorizationDetailsFormStep.tsx
@@ -12,25 +12,30 @@ import {
} from '@/api/queries/__generated__/fragments.generated'
import { Avatar } from '@/components/Avatar'
import { FormField } from '@/components/_inputs/FormField'
-import { Input } from '@/components/_inputs/Input'
import { InputAutocomplete } from '@/components/_inputs/InputAutocomplete'
+import { Select, SelectItem } from '@/components/_inputs/Select'
import { atlasConfig } from '@/config'
-import { EMAIL_PATTERN } from '@/config/regex'
+import { displayCategories } from '@/config/categories'
import { useUser } from '@/providers/user/user.hooks'
import { FormFieldsWrapper } from './YppAuthorizationDetailsFormStep.styles'
export type DetailsFormData = {
- email: string | undefined
referrerChannelTitle: string | undefined
referrerChannelId: string | undefined
+ videoCategoryId?: string
}
+const categoriesSelectItems: SelectItem[] =
+ displayCategories?.map((c) => ({
+ name: c.name || 'Unknown category',
+ value: c.defaultVideoCategory,
+ })) || []
+
export const YppAuthorizationDetailsFormStep: FC = () => {
const [foundChannel, setFoundChannel] = useState()
const { memberId } = useUser()
const {
- register,
control,
formState: { errors },
setValue,
@@ -39,31 +44,25 @@ export const YppAuthorizationDetailsFormStep: FC = () => {
return (
- {
- if (!value || !value.length) {
- return 'Enter contact email.'
- }
- },
- valid: (value) => {
- if (value && !EMAIL_PATTERN.test(value)) {
- return 'Enter valid email address.'
- }
- return true
- },
+ (
+
+ )}
/>
+
`
export const Paragraph = styled.p`
margin: 0;
`
+
+export const CategoriesText = styled(Text)`
+ display: block;
+ margin-top: ${sizes(1)};
+`
diff --git a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationRequirementsStep/YppAuthorizationRequirementsStep.tsx b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationRequirementsStep/YppAuthorizationRequirementsStep.tsx
index 3ccc4e4d99..0335be482e 100644
--- a/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationRequirementsStep/YppAuthorizationRequirementsStep.tsx
+++ b/packages/atlas/src/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationSteps/YppAuthorizationRequirementsStep/YppAuthorizationRequirementsStep.tsx
@@ -1,36 +1,91 @@
-import { FC, ReactNode } from 'react'
+import { formatDuration } from 'date-fns'
+import { FC, PropsWithChildren } from 'react'
import { SvgActionCheck, SvgActionClose } from '@/assets/icons'
import { Banner } from '@/components/Banner'
+import { Text } from '@/components/Text'
import { atlasConfig } from '@/config'
+import { pluralizeNoun } from '@/utils/misc'
-import { ListItem, Paragraph, StyledList, TickWrapper } from './YppAuthorizationRequirementsStep.styles'
+import { CategoriesText, ListItem, Paragraph, StyledList, TickWrapper } from './YppAuthorizationRequirementsStep.styles'
+import { useGetYppChannelRequirements } from './useGetYppChannelRequirements'
-type Requirment = {
- text: ReactNode
- fulfilled: boolean
-}
+import { YppAuthorizationErrorCode, YppRequirementsErrorCode } from '../../YppAuthorizationModal.types'
type YppAuthorizationRequirementsStepProps = {
- requirements: Requirment[]
+ requirmentsErrorCodes: YppRequirementsErrorCode[]
}
-export const YppAuthorizationRequirementsStep: FC = ({ requirements }) => {
+const convertHoursRequirementTime = (hours: number) => {
+ if (hours > 24 * 30) {
+ return formatDuration({ months: Math.round(hours / (24 * 30)) })
+ }
+ if (hours > 24) {
+ return formatDuration({ days: Math.round(hours / 24) })
+ }
+ return formatDuration({ hours: hours })
+}
+
+export const YppAuthorizationRequirementsStep: FC = ({
+ requirmentsErrorCodes,
+}) => {
+ const requirements = useGetYppChannelRequirements()
+ const checkRequirmentError = (errorCode: YppAuthorizationErrorCode) =>
+ !requirmentsErrorCodes.some((error) => error === errorCode)
+ const hasAtLeastOneError = !!requirmentsErrorCodes.length
return (
<>
- {requirements.map((item, idx) => (
-
-
- {item.fulfilled ?
+
+ Enjoy your {formatNumber(amountOfTokens)} {atlasConfig.joystream.tokenTicker} tokens to help you cover + transaction fees. These tokens are non-transferable and can't be spent on NFTs or other purchases. + + )} +
+
+
+
+
+
+
+
{
+ measureContainerRef(ref)
+ }}
+ >
+ setDisableScrollDuringAnimation(true)}
+ onExiting={() => setDisableScrollDuringAnimation(true)}
+ unmountOnExit
+ mountOnEnter
+ >
dropdownType === 'channel' ? setShowWithdrawDialog(true) : setShowSendDialog(true)
}
accountBalance={accountBalance}
+ onAddNewChannel={handleAddNewChannel}
channelBalance={channelBalance}
lockedAccountBalance={lockedAccountBalance}
activeMembership={activeMembership}
- membershipLoading={membershipsLoading}
hasOneMember={hasOneMember}
- onSwitchDropdownType={setDropdownType}
onSwitchToList={(type) => handleSwitch(type, true)}
onCloseDropdown={closeDropdown}
publisher={publisher}
type={dropdownType}
isInDebt={totalBalance && totalInvitationLock && totalBalance?.sub(totalInvitationLock).isNeg()}
/>
-
- ) : (
-
+
+
handleSwitch(type, false)}
type={dropdownType}
/>
-
- )}
+
-
- {selectedChannel?.title}
-
- {channelBalance !== undefined ? (
+
+
-
- {memberChanneltransition(({ opacity, position }) => (
- {
- onCloseDropdown?.()
- onShowFundsDialog()
- }}
+
+ ) : (
+
+
+ {
+ onCloseDropdown?.()
+ onShowFundsDialog()
+ }}
+ variant="t100"
+ color="colorCoreNeutral200Lighten"
+ >
+ {type === 'channel' ? 'Withdraw' : 'Transfer'}
+
+
+
- {type === 'channel' ? 'Withdraw' : 'Transfer'}
-
- ))}
-
-
- Learn about {atlasConfig.joystream.tokenTicker}
-
+ Learn about {atlasConfig.joystream.tokenTicker}
+
+
+ {dropdownEntity.title}
+
+ {type === 'channel' ? (
+ channelBalance ? (
+
+
+ ) : (
+
+ {accountBalance !== undefined ? (
+
+
- ) : (
-
-
- {activeMembership?.handle}
-
-
- {accountBalance !== undefined ? (
-
-
- ) : (
-
-
- )}
-
- ))}
-
-