Release v4.0.0

Joystream · Jul 20, 2023 · 545c5df · 545c5df
2 parents 17c6d33 + 0d33d2e
commit 545c5df
Show file tree

Hide file tree

Showing 292 changed files with 9,112 additions and 4,501 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,43 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.0.0] - 2023-07-20
+
+### Added
+
+- Atlas now supports custodial user accounts
+- Added Segment analytics
+- Button for admin panel
+
+### Changed
+
+- Distributor connection timeout is now adjusted automatically
+
+### Fixed
+
+- Fixed wrong assets being displayed for NFT tiles
+- Fixed NFTs section re-render on filters change
+- Fixed Twitter card preview
+
+## [3.4.0] - 2023-07-03
+
+### Added
+
+- Added collapsed view to NFT widget
+- Added fiat representation to prices
+- Added environment variables description to operators guide
+
+### Changed
+
+- Changed assets resolution algorithm
+- Required NodeJS version bumped to 18
+
+### Fixed
+
+- Fixed bug with wallet connection
+- Fixed bug with minimized player showing error screen
+- Minor markup fixes
+
 ## [3.4.0] - 2023-07-03
 
 ### Added

diff --git a/docs/operator-guide.md b/docs/operator-guide.md
@@ -210,6 +210,8 @@ Below is the list of all the variables used by Atlas with a short description:
 
 `VITE_YOUTUBE_COLLABORATOR_MEMBER_ID` - The collaborator can add videos to a channel for a user. Every time a user signs up with the program, we're sending the `updateChannel` extrinsic and adding a collaborator to that channel. The collaborator is defined on the youtube-synch backend and needs to be the same in the front-end.
 
+`VITE_{environment}_YPP_FAUCET_URL` - Faucet URL for simplified YPP signup. Allows YPP backend to create membership automatically.
+
 `VITE_GA_ID` - Google Analytics ID. Used to enable Google Analytics.
 
 `VITE_SEGMENT_ID` - Segment ID. Used to enable Segment analytics tool.

diff --git a/packages/atlas-meta-server/src/tags.ts b/packages/atlas-meta-server/src/tags.ts
@@ -39,7 +39,7 @@ export const generateCommonMetaTags = (
     }),
     ...(image && {
       'og:image': image,
-      'twitter:image': image,
+      'twitter:image': appUrl + image,
       'og:image:alt': title,
       'twitter:image:alt': title,
       'og:image:type': 'image/webp',

diff --git a/packages/atlas/atlas.config.yml b/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

diff --git a/packages/atlas/package.json b/packages/atlas/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@joystream/atlas",
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "3.4.0",
+  "version": "4.0.0",
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",
@@ -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",
@@ -138,7 +142,7 @@
     "js-yaml": "^4.1.0",
     "madge": "^5.0.1",
     "postcss-syntax": "^0.36.2",
-    "react-ga": "^3.3.1",
+    "react-ga4": "^2.1.0",
     "react-hooks-testing-library": "^0.6.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-visualizer": "^5.8.3",

diff --git a/packages/atlas/src/.env b/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
@@ -34,25 +31,31 @@ VITE_OPTIMIZE_ID=
 VITE_USERSNAP_ID=
 
 # Production env URLs
-VITE_PRODUCTION_ORION_URL=https://orion.joystream.org/graphql
+VITE_PRODUCTION_ORION_AUTH_URL=https://auth.gleev.xyz/api/v1
+VITE_PRODUCTION_ORION_URL=https://orion.gleev.xyz/graphql
 VITE_PRODUCTION_QUERY_NODE_SUBSCRIPTION_URL=wss://orion.joystream.org/graphql
 VITE_PRODUCTION_NODE_URL=wss://rpc.joystream.org:9944
 VITE_PRODUCTION_FAUCET_URL=https://faucet.joystream.org/member-faucet/register
+VITE_PRODUCTION_YPP_FAUCET_URL=https://18.184.136.237.nip.io/membership
 
 # 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
+VITE_DEVELOPMENT_YPP_FAUCET_URL=https://52.204.147.11.nip.io/membership
 
 # 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
 VITE_NEXT_FAUCET_URL=https://atlas-next.joystream.org/member-faucet/register
+VITE_NEXT_YPP_FAUCET_URL=https://52.204.147.11.nip.io/membership
 
 # Local development env URLs
 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
diff --git a/packages/atlas/src/AnalyticsManager.tsx b/packages/atlas/src/AnalyticsManager.tsx
@@ -1,7 +1,6 @@
 import ls from '@livesession/sdk'
 import { FC, useCallback, useEffect } from 'react'
-import ReactGA from 'react-ga'
-import { useLocation } from 'react-router-dom'
+import ReactGA from 'react-ga4'
 
 import { atlasConfig } from '@/config'
 import { BUILD_ENV } from '@/config/env'
@@ -10,7 +9,6 @@ import { usePersonalDataStore } from '@/providers/personalData'
 export const AnalyticsManager: FC = () => {
   const cookiesAccepted = usePersonalDataStore((state) => state.cookiesAccepted)
   const analyticsEnabled = BUILD_ENV === 'production' && cookiesAccepted
-  const location = useLocation()
 
   const initUsersnap = useCallback(() => {
     if (!atlasConfig.analytics.usersnap?.id) return
@@ -66,13 +64,5 @@ export const AnalyticsManager: FC = () => {
     initGA()
   }, [analyticsEnabled, initGA])
 
-  //track pageview in GA
-  useEffect(() => {
-    if (!analyticsEnabled || !atlasConfig.analytics.GA?.id) {
-      return
-    }
-    ReactGA.pageview(location.pathname)
-  }, [location.pathname, analyticsEnabled])
-
   return null
 }
diff --git a/packages/atlas/src/App.tsx b/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 />

diff --git a/packages/atlas/src/CommonProviders.tsx b/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'
@@ -31,24 +33,28 @@ export const CommonProviders: FC<PropsWithChildren> = ({ children }) => {
   return (
     <>
       <GlobalStyles />
-      <ApolloProvider client={apolloClient}>
-        <QueryClientProvider client={queryClient}>
-          <UserProvider>
-            <OverlayManagerProvider>
-              <SegmentAnalyticsProvider>
-                <ConfirmationModalProvider>
-                  <BrowserRouter>
-                    <AdminModal />
-                    <MaintenanceWrapper>
-                      <OperatorsContextProvider>{children}</OperatorsContextProvider>
-                    </MaintenanceWrapper>
-                  </BrowserRouter>
-                </ConfirmationModalProvider>
-              </SegmentAnalyticsProvider>
-            </OverlayManagerProvider>
-          </UserProvider>
-        </QueryClientProvider>
-      </ApolloProvider>
+      <SegmentAnalyticsProvider>
+        <ApolloProvider client={apolloClient}>
+          <QueryClientProvider client={queryClient}>
+            <WalletProvider>
+              <AuthProvider>
+                <UserProvider>
+                  <OverlayManagerProvider>
+                    <ConfirmationModalProvider>
+                      <BrowserRouter>
+                        <AdminModal />
+                        <MaintenanceWrapper>
+                          <OperatorsContextProvider>{children}</OperatorsContextProvider>
+                        </MaintenanceWrapper>
+                      </BrowserRouter>
+                    </ConfirmationModalProvider>
+                  </OverlayManagerProvider>
+                </UserProvider>
+              </AuthProvider>
+            </WalletProvider>
+          </QueryClientProvider>
+        </ApolloProvider>
+      </SegmentAnalyticsProvider>
     </>
   )
 }

diff --git a/packages/atlas/src/MainLayout.tsx b/packages/atlas/src/MainLayout.tsx
@@ -1,12 +1,11 @@
 import loadable from '@loadable/component'
 import { FC, useEffect, useRef, useState } from 'react'
-import { Route, Routes, useLocation, useNavigationType, useSearchParams } from 'react-router-dom'
+import { Route, Routes, useLocation, useNavigationType } from 'react-router-dom'
 
 import { StudioLoading } from '@/components/_loaders/StudioLoading'
 import { CookiePopover } from '@/components/_overlays/CookiePopover'
 import { atlasConfig } from '@/config'
 import { BASE_PATHS, absoluteRoutes } from '@/config/routes'
-import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { transitions } from '@/styles'
 import { RoutingState } from '@/types/routing'
 import { isBrowserOutdated } from '@/utils/browser'
@@ -41,7 +40,7 @@ const LoadablePlaygroundLayout = loadable(() => import('./views/playground/Playg
 export const MainLayout: FC = () => {
   const scrollPosition = useRef<number>(0)
   const location = useLocation()
-  const [searchParams] = useSearchParams()
+
   const navigationType = useNavigationType()
   const [cachedLocation, setCachedLocation] = useState(location)
   const locationState = location.state as RoutingState
@@ -56,20 +55,8 @@ export const MainLayout: FC = () => {
     },
     onExitClick: () => closeDialog(),
   })
-  const { trackPageView } = useSegmentAnalytics()
 
   useEffect(() => {
-    // had to include this timeout to make sure the page title is updated
-    const trackRequestTimeout = setTimeout(
-      () =>
-        trackPageView(
-          document.title,
-          'viewer',
-          (location.pathname === absoluteRoutes.viewer.ypp() && searchParams.get('referrer')) || undefined
-        ),
-      1000
-    )
-
     if (!atlasConfig.analytics.sentry?.dsn) {
       return
     }
@@ -85,10 +72,7 @@ export const MainLayout: FC = () => {
         stopReplay()
       }
     }
-    return () => {
-      clearTimeout(trackRequestTimeout)
-    }
-  }, [location.pathname, trackPageView, searchParams])
+  }, [location.pathname])
 
   const { clearOverlays } = useOverlayManager()
 

diff --git a/packages/atlas/src/api/client/index.ts b/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 }) => {