Merge 'Accounts' into 'dev'

packages/atlas/atlas.config.yml

@@ -1,5 +1,5 @@
 general:
-  appName: Atlas # Application name - used in the copy throughout the app, in index.html, open graph meta tags, etc. Don't use env variables here
+  appName: Gleev # Application name - used in the copy throughout the app, in index.html, open graph meta tags, etc. Don't use env variables here
   appDescription: 'The streaming platform empowering viewers, creators, and builders. Built on and operated by the Joystream blockchain and DAO.' # Application description - used in index.html meta tags
   appTagline: 'The streaming platform empowering viewers, creators, and builders. Built on and operated by the Joystream blockchain and DAO.'
   appId: '$VITE_APP_ID' # App ID for Apps as first-class citizens

packages/atlas/package.json

@@ -51,11 +51,13 @@
     "awesome-debounce-promise": "^2.1.0",
     "axios": "^1.2.1",
     "bezier-easing": "^2.1.0",
+    "bip39": "^3.1.0",
     "blake3": "2.1.7",
     "bn.js": "^5.2.1",
     "buffer": "^6.0.3",
     "comlink": "^4.3.1",
     "cropperjs": "^1.5.13",
+    "crypto-js": "^4.1.1",
     "date-fns": "^2.29.3",
     "downshift": "^7.0.4",
     "graphql": "^16.6.0",
@@ -70,6 +72,7 @@
     "rc-slider": "^10.1.0",
     "react": "^18.2.0",
     "react-datepicker": "^4.8.0",
+    "react-detectable-overflow": "^0.7.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-helmet": "^6.1.0",
@@ -122,6 +125,7 @@
     "@testing-library/react": "^13.4.0",
     "@types/aos": "^3.0.4",
     "@types/bn.js": "^5.1.1",
+    "@types/crypto-js": "^4.1.1",
     "@types/js-yaml": "^4.0.5",
     "@types/loadable__component": "^5.13.4",
     "@types/lodash-es": "^4.17.6",

packages/atlas/src/.env

@@ -17,9 +17,6 @@ VITE_AVATAR_SERVICE_URL=https://atlas-services.joystream.org/avatars
 VITE_ASSET_LOGS_URL=
 VITE_GEOLOCATION_SERVICE_URL=https://geolocation.joystream.org
 VITE_HCAPTCHA_SITE_KEY=41cae189-7676-4f6b-aa56-635be26d3ceb
-VITE_GOOGLE_CONSOLE_CLIENT_ID=
-VITE_YOUTUBE_SYNC_API_URL=
-VITE_YOUTUBE_COLLABORATOR_MEMBER_ID=
 
 # YPP configuration
 VITE_GOOGLE_CONSOLE_CLIENT_ID=246331758613-rc1psegmsr9l4e33nqu8rre3gno5dsca.apps.googleusercontent.com
@@ -40,12 +37,14 @@ VITE_PRODUCTION_NODE_URL=wss://rpc.joystream.org:9944
 VITE_PRODUCTION_FAUCET_URL=https://faucet.joystream.org/member-faucet/register
 
 # Development env URLs - this is the default configuration if VITE_ENV != production
-VITE_DEVELOPMENT_ORION_URL=https://atlas-dev.joystream.org/orion-v2/graphql
+VITE_DEVELOPMENT_ORION_AUTH_URL=https://atlas-dev.joystream.org/orion-auth/api/v1
+VITE_DEVELOPMENT_ORION_URL=https://atlas-dev.joystream.org/orion-api/graphql
 VITE_DEVELOPMENT_QUERY_NODE_SUBSCRIPTION_URL=wss://atlas-dev.joystream.org/orion-v2/graphql
 VITE_DEVELOPMENT_NODE_URL=wss://atlas-dev.joystream.org/ws-rpc
 VITE_DEVELOPMENT_FAUCET_URL=https://atlas-dev.joystream.org/member-faucet/register
 
 # Experimental env URLs
+VITE_NEXT_ORION_AUTH_URL=
 VITE_NEXT_ORION_URL=https://atlas-next.joystream.org/orion/graphql
 VITE_NEXT_QUERY_NODE_SUBSCRIPTION_URL=wss://atlas-next.joystream.org/orion/graphql
 VITE_NEXT_NODE_URL=wss://atlas-next.joystream.org/ws-rpc
@@ -55,4 +54,4 @@ VITE_NEXT_FAUCET_URL=https://atlas-next.joystream.org/member-faucet/register
 VITE_LOCAL_ORION_URL=http://localhost:6116/graphql
 VITE_LOCAL_QUERY_NODE_SUBSCRIPTION_URL=ws://localhost:8081/graphql
 VITE_LOCAL_NODE_URL=ws://localhost:9944/ws-rpc
-VITE_LOCAL_FAUCET_URL=http://localhost:3002/register
+VITE_LOCAL_FAUCET_URL=http://localhost:3002/register

packages/atlas/src/App.tsx

@@ -1,7 +1,7 @@
 import { AnalyticsManager } from '@/AnalyticsManager'
 import { CommonProviders } from '@/CommonProviders'
 import { WelcomeDialog } from '@/components/WelcomeDialog'
-import { SignInModal } from '@/components/_auth/SignInModal'
+import { AuthModals } from '@/components/_auth/AuthModals'
 import { JoystreamManager } from '@/providers/joystream/joystream.manager'
 import { JoystreamProvider } from '@/providers/joystream/joystream.provider'
 import { NftActionsProvider } from '@/providers/nftActions/nftActions.provider'
@@ -25,7 +25,7 @@ export const App = () => {
           <TransactionsManager />
           <JoystreamManager />
           <NotificationsManager />
-          <SignInModal />
+          <AuthModals />
           <WelcomeDialog />
           <NftSettlementBottomDrawer />
           <NftPurchaseBottomDrawer />

packages/atlas/src/CommonProviders.tsx

@@ -8,10 +8,12 @@ import { createApolloClient } from '@/api'
 import { useGetKillSwitch } from '@/api/hooks/admin'
 import { AdminModal } from '@/components/_overlays/AdminModal'
 import { OperatorsContextProvider } from '@/providers/assets/assets.provider'
+import { AuthProvider } from '@/providers/auth/auth.provider'
 import { ConfirmationModalProvider } from '@/providers/confirmationModal'
 import { OverlayManagerProvider } from '@/providers/overlayManager'
 import { SegmentAnalyticsProvider } from '@/providers/segmentAnalytics/segment.provider'
 import { UserProvider } from '@/providers/user/user.provider'
+import { WalletProvider } from '@/providers/wallet/wallet.provider'
 import { GlobalStyles } from '@/styles'
 
 import { FORCE_MAINTENANCE } from './config/env'
@@ -33,20 +35,24 @@ export const CommonProviders: FC<PropsWithChildren> = ({ children }) => {
       <GlobalStyles />
       <ApolloProvider client={apolloClient}>
         <QueryClientProvider client={queryClient}>
-          <UserProvider>
-            <OverlayManagerProvider>
-              <SegmentAnalyticsProvider>
-                <ConfirmationModalProvider>
-                  <BrowserRouter>
-                    <AdminModal />
-                    <MaintenanceWrapper>
-                      <OperatorsContextProvider>{children}</OperatorsContextProvider>
-                    </MaintenanceWrapper>
-                  </BrowserRouter>
-                </ConfirmationModalProvider>
-              </SegmentAnalyticsProvider>
-            </OverlayManagerProvider>
-          </UserProvider>
+          <WalletProvider>
+            <AuthProvider>
+              <UserProvider>
+                <SegmentAnalyticsProvider>
+                  <OverlayManagerProvider>
+                    <ConfirmationModalProvider>
+                      <BrowserRouter>
+                        <AdminModal />
+                        <MaintenanceWrapper>
+                          <OperatorsContextProvider>{children}</OperatorsContextProvider>
+                        </MaintenanceWrapper>
+                      </BrowserRouter>
+                    </ConfirmationModalProvider>
+                  </OverlayManagerProvider>
+                </SegmentAnalyticsProvider>
+              </UserProvider>
+            </AuthProvider>
+          </WalletProvider>
         </QueryClientProvider>
       </ApolloProvider>
     </>

packages/atlas/src/api/client/index.ts

@@ -31,7 +31,7 @@ const createApolloClient = () => {
     })
   )
 
-  const orionLink = ApolloLink.from([delayLink, new HttpLink({ uri: ORION_GRAPHQL_URL })])
+  const orionLink = ApolloLink.from([delayLink, new HttpLink({ uri: ORION_GRAPHQL_URL, credentials: 'include' })])
 
   const operationSplitLink = split(
     ({ query, setContext }) => {

packages/atlas/src/api/queries/accounts.graphql

@@ -0,0 +1,9 @@
+query GetCurrentAccount {
+  accountData {
+    email
+    id
+    isEmailConfirmed
+    joystreamAccount
+    membershipId
+  }
+}

packages/atlas/src/assets/icons/ActionAddChannel.tsx

@@ -0,0 +1,17 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY;
+import { Ref, SVGProps, forwardRef, memo } from 'react'
+
+const SvgActionAddChannel = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => (
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" ref={ref} {...props}>
+    <path d="M11.874 15H4.126a4.002 4.002 0 0 1 7.748 0Z" fill="#F4F6F8" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2 1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2Zm5 1h2v2.5h2.5v2H9V9H7V6.5H4.5v-2H7V2Z"
+      fill="#F4F6F8"
+    />
+  </svg>
+))
+SvgActionAddChannel.displayName = 'SvgActionAddChannel'
+const Memo = memo(SvgActionAddChannel)
+export { Memo as SvgActionAddChannel }

packages/atlas/src/assets/icons/index.ts

@@ -1,4 +1,5 @@
 // THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY
+export * from './ActionAddChannel'
 export * from './ActionAddImage'
 export * from './ActionAddVideo'
 export * from './ActionAdd'

packages/atlas/src/components/ActionBar/ActionBar.styles.ts

@@ -47,20 +47,6 @@ export const StyledInformation = styled(Information)`
   margin-left: ${sizes(1)};
 `
 
-export const ActionButtonPrimary = styled(Button)<{ secondaryButtonExists: boolean }>`
-  grid-area: primary-button;
-
-  ${({ secondaryButtonExists }) =>
-    !secondaryButtonExists &&
-    css`
-      grid-column: 1 / span 2;
-
-      ${media.sm} {
-        grid-column: -3 / span 2;
-      }
-    `}
-`
-
 export const SecondaryButton = styled(Button)`
   grid-area: secondary-button;
 `
@@ -80,3 +66,18 @@ export const FeeContainer = styled.div`
   display: flex;
   align-items: center;
 `
+
+export const PrimaryButtonContainer = styled.div<{ secondaryButtonExists: boolean }>`
+  grid-area: primary-button;
+  width: 100%;
+
+  ${({ secondaryButtonExists }) =>
+    !secondaryButtonExists &&
+    css`
+      grid-column: 1 / span 2;
+
+      ${media.sm} {
+        grid-column: -3 / span 2;
+      }
+    `}
+`

packages/atlas/src/components/ActionBar/ActionBar.tsx

@@ -1,20 +1,20 @@
 import BN from 'bn.js'
-import { MouseEvent, forwardRef } from 'react'
+import { MouseEvent, forwardRef, useRef } from 'react'
 import { CSSTransition } from 'react-transition-group'
 
 import { Fee } from '@/components/Fee'
 import { Text } from '@/components/Text'
-import { TooltipProps } from '@/components/Tooltip'
-import { ButtonProps } from '@/components/_buttons/Button'
+import { Tooltip, TooltipProps } from '@/components/Tooltip'
+import { Button, ButtonProps } from '@/components/_buttons/Button'
 import { useHasEnoughBalance } from '@/hooks/useHasEnoughBalance'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { transitions } from '@/styles'
 
 import {
   ActionBarContainer,
-  ActionButtonPrimary,
   DraftsBadgeContainer,
   FeeContainer,
+  PrimaryButtonContainer,
   SecondaryButton,
   StyledInformation,
 } from './ActionBar.styles'
@@ -34,6 +34,7 @@ export type ActionBarProps = {
   feeLoading?: boolean
   infoBadge?: ActionDialogInfoBadge
   primaryButton: ActionDialogButtonProps
+  primaryButtonTooltip?: Omit<TooltipProps, 'reference'>
   secondaryButton?: ActionDialogButtonProps
   isActive?: boolean
   skipFeeCheck?: boolean
@@ -49,6 +50,7 @@ export const ActionBar = forwardRef<HTMLDivElement, ActionBarProps>(
       isActive = true,
       className,
       primaryButton,
+      primaryButtonTooltip,
       secondaryButton,
       infoBadge,
       skipFeeCheck,
@@ -63,6 +65,7 @@ export const ActionBar = forwardRef<HTMLDivElement, ActionBarProps>(
       primaryButton.onClick,
       skipFeeCheck
     )
+    const buttonRef = useRef<HTMLButtonElement>(null)
 
     return (
       <ActionBarContainer ref={ref} className={`${className} action-bar`} isActive={isActive}>
@@ -90,16 +93,22 @@ export const ActionBar = forwardRef<HTMLDivElement, ActionBarProps>(
             {secondaryButton?.text}
           </SecondaryButton>
         </CSSTransition>
-        <ActionButtonPrimary
-          {...primaryButton}
-          disabled={primaryButton.disabled || loadingState}
-          onClick={isNoneCrypto ? primaryButton.onClick : signTransactionHandler}
-          secondaryButtonExists={!!secondaryButton}
-          size={smMatch ? 'large' : 'medium'}
-          type="submit"
-        >
-          {loadingState ? 'Please wait...' : primaryButton.text}
-        </ActionButtonPrimary>
+        <PrimaryButtonContainer secondaryButtonExists={!!secondaryButton}>
+          {/* tooltip is positioned weirdly on this button, that's we are setting offsetY to 22 */}
+          <Tooltip offsetY={22} {...primaryButtonTooltip}>
+            <Button
+              fullWidth
+              {...primaryButton}
+              ref={buttonRef}
+              disabled={primaryButton.disabled || loadingState}
+              onClick={isNoneCrypto ? primaryButton.onClick : signTransactionHandler}
+              size={smMatch ? 'large' : 'medium'}
+              type="submit"
+            >
+              {loadingState ? 'Please wait...' : primaryButton.text}
+            </Button>
+          </Tooltip>
+        </PrimaryButtonContainer>
       </ActionBarContainer>
     )
   }