🟣 Release 5.2.0

.prettierrc.js

@@ -5,5 +5,5 @@ module.exports = {
   importOrderParserPlugins: ['jsx', 'typescript'],
   importOrderSeparation: true,
   importOrderSortSpecifiers: true,
-  'plugins': ['@trivago/prettier-plugin-sort-imports'],
+  plugins: ['@trivago/prettier-plugin-sort-imports'],
 }

CHANGELOG.md

@@ -5,6 +5,18 @@ 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).
 
+## [5.2.0] - 2024-04-22
+
+### Added
+
+- CRT features
+- ChangeNOW integration
+- Powered by Joystream label
+
+### Fixed
+
+- Embedded player ending screen
+
 ## [5.1.0] - 2024-04-18
 
 - New types for Luxor network release

package.json

@@ -72,7 +72,7 @@
     "@polkadot/types": "10.7.1",
     "@polkadot/util": "12.6.2",
     "@polkadot/util-crypto": "12.6.2",
-    "@polkadot/networks": "9.5.1",
+    "@polkadot/networks": "12.6.2",
     "@polkadot/x-fetch": "9.5.1",
     "@polkadot/x-global": "9.5.1",
     "@polkadot/x-ws": "9.5.1",

packages/atlas-proxy-worker/src/handler.ts

@@ -1,5 +1,5 @@
 const CRAWLER_USER_AGENT_REGEX =
-  /googlebot|YandexBot|baiduspider|twitterbot|facebookexternalhit|discordbot|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|Rocket.Chat|Minds|Taringa|redditbot/i
+  /googlebot|YandexBot|baiduspider|twitterbot|facebookexternalhit|discordbot|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|Rocket.Chat|Minds|Taringa|redditbot|HeadlessChrome/i
 
 declare global {
   const ATLAS_URL: string

packages/atlas/atlas.config.yml

@@ -11,6 +11,7 @@ general:
   joystreamLandingPageUrl: 'https://www.joystream.org' # URL for Joystream landing page - used in the footer and in "Learn more" links
   joystreamDiscordUrl: 'https://discord.gg/DE9UN3YpRP' # URL for Joystream Discord - used for support when errors occur
   appContentFocus: 'web3 & crypto' # Content focus of given app. Provide a string, for example `web & crypto` or `sport`
+  crtMaintenanceMode: false
 storage:
   assetResponseTimeout: 2_000 # Timeout for asset response in ms - after this timeout, different distributor will be tried
   assetUploadStatusPollingInterval: 2000 # Interval for polling asset upload status in ms - polling begins once asset is uploaded and is finished once QN reports the asset as accepted
@@ -237,7 +238,7 @@ features:
 
         Your use of our Services is at your sole risk. Our Services are provided “as is" and “as available" without warranties of any kind, either express or implied, including, but not limited to, implied warranties of merchantability, fitness for a particular purpose, title, and non-infringement. In addition, the Company does not represent or warrant that our Services are accurate, complete, reliable, current or error-free. While the Company attempts to make your access to and use of our Services safe, we cannot and do not represent or warrant that our Services or servers are free of viruses or other harmful components. You assume the entire risk as to the quality and performance of the Services.
 
-        Manual process is involved, so errors are not inevitable.  JSG team is not liable for any reconciliations, but is committed to spend reasonable efforts to support all participants in reconciliation of rewards calculation where it deems to be operationally viable and commercially sensible to do so.
+        Manual process is involved, so errors are not inevitable. JSG team is not liable for any reconciliations, but is committed to spend reasonable efforts to support all participants in reconciliation of rewards calculation where it deems to be operationally viable and commercially sensible to do so.
 
         JSG team is not liable or obliged to do the payments and in case of errors will seek to provide the support in reconciliation of payments but not be obliged for channel rewards. In case of any disputes over content quality and qualification for rewards, JSG has no liability to compensate the channels and these terms are not binding, but payouts are made on total discretion of the $VITE_APP_NAME App operator and the JS Genesis AS team. In case program budget runs out before some of the apps are paid, there is no obligation to pay late subscribers.
 
@@ -568,6 +569,13 @@ analytics:
     id: '$VITE_SEGMENT_ID'
 
 legal:
+  crtTnc: |
+    By buying this token:
+    - You have right to own it, hold it, sell it and transfer to any other wallet.
+    - You can sell your token to the AMM if the AMM becomes enabled at any moment. 
+
+    Holders rights:
+    Proin urna volutpat pharetra, tellus. Quam purus integer tempus habitant volutpat pellentesque.
   termsOfService: |
     # Terms of Service
 

packages/atlas/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@joystream/atlas",
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",
@@ -39,12 +39,13 @@
     "@hcaptcha/react-hcaptcha": "^1.4.4",
     "@hookform/resolvers": "^2.9.10",
     "@joystream/js": "^1.4.0",
-    "@joystream/metadata-protobuf": "2.8.1",
+    "@joystream/metadata-protobuf": "2.9.0",
     "@joystream/types": "4.5.0",
     "@livesession/sdk": "^1.1.4",
     "@loadable/component": "^5.15.2",
     "@lottiefiles/react-lottie-player": "^3.5.0",
     "@nivo/line": "^0.83.0",
+    "@nivo/pie": "^0.83.0",
     "@segment/analytics-next": "^1.53.0",
     "@sentry/react": "^7.53.1",
     "@talismn/connect-wallets": "^1.2.1",
@@ -72,6 +73,7 @@
     "mp4box": "^0.5.2",
     "multihashes": "^4.0.3",
     "postcss-syntax": "^0.36.2",
+    "qrcode.react": "^3.1.0",
     "rc-slider": "^10.1.0",
     "react": "^18.2.0",
     "react-datepicker": "^4.8.0",
@@ -95,6 +97,9 @@
     "react-transition-group": "^4.4.5",
     "retry-axios": "^3.0.0",
     "scroll-lock": "^2.1.5",
+    "slate": "^0.94.1",
+    "slate-history": "^0.93.0",
+    "slate-react": "^0.98.1",
     "subscriptions-transport-ws": "^0.11.0",
     "swiper": "^9.1.1",
     "twemoji": "^14.0.2",
@@ -116,13 +121,13 @@
     "@modyfi/vite-plugin-yaml": "^1.0.3",
     "@rollup/plugin-babel": "^6.0.3",
     "@sentry/vite-plugin": "^2.5.0",
-    "@storybook/addon-actions": "7.0.7",
-    "@storybook/addon-docs": "7.0.7",
-    "@storybook/addon-essentials": "7.0.7",
-    "@storybook/addon-links": "7.0.7",
-    "@storybook/addons": "7.0.7",
-    "@storybook/react-vite": "7.0.7",
-    "@storybook/theming": "7.0.7",
+    "@storybook/addon-actions": "7.4.6",
+    "@storybook/addon-docs": "7.4.6",
+    "@storybook/addon-essentials": "7.4.6",
+    "@storybook/addon-links": "7.4.6",
+    "@storybook/addons": "7.4.6",
+    "@storybook/react-vite": "7.4.6",
+    "@storybook/theming": "7.4.6",
     "@svgr/cli": "^6.5.1",
     "@testing-library/dom": "^8.19.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -150,7 +155,7 @@
     "react-hooks-testing-library": "^0.6.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-visualizer": "^5.9.2",
-    "storybook": "7.0.7",
+    "storybook": "7.4.6",
     "style-dictionary": "^3.7.1",
     "vite": "^4.3.9",
     "vite-plugin-checker": "^0.5.2",

packages/atlas/src/.env

@@ -16,6 +16,7 @@ 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_CHANGENOW_PUBLIC_API_KEY=0d8a58104f82b860a70e9460bccf62ae1e0fca4a93fd7e0c27c90448187b988f
 
 # YPP configuration
 VITE_GOOGLE_CONSOLE_CLIENT_ID=246331758613-rc1psegmsr9l4e33nqu8rre3gno5dsca.apps.googleusercontent.com

packages/atlas/src/CommonProviders.tsx

@@ -10,6 +10,7 @@ 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 { NetworkUtilsProvider } from '@/providers/networkUtils/networkUtils.provider'
 import { OverlayManagerProvider } from '@/providers/overlayManager'
 import { SegmentAnalyticsProvider } from '@/providers/segmentAnalytics/segment.provider'
 import { UserProvider } from '@/providers/user/user.provider'
@@ -33,28 +34,30 @@ export const CommonProviders: FC<PropsWithChildren> = ({ children }) => {
   return (
     <>
       <GlobalStyles />
-      <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>
+      <BrowserRouter>
+        <SegmentAnalyticsProvider>
+          <ApolloProvider client={apolloClient}>
+            <QueryClientProvider client={queryClient}>
+              <WalletProvider>
+                <AuthProvider>
+                  <UserProvider>
+                    <NetworkUtilsProvider>
+                      <OverlayManagerProvider>
+                        <ConfirmationModalProvider>
+                          <AdminModal />
+                          <MaintenanceWrapper>
+                            <OperatorsContextProvider>{children}</OperatorsContextProvider>
+                          </MaintenanceWrapper>
+                        </ConfirmationModalProvider>
+                      </OverlayManagerProvider>
+                    </NetworkUtilsProvider>
+                  </UserProvider>
+                </AuthProvider>
+              </WalletProvider>
+            </QueryClientProvider>
+          </ApolloProvider>
+        </SegmentAnalyticsProvider>
+      </BrowserRouter>
     </>
   )
 }

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

@@ -9,6 +9,7 @@ import {
   QueryChannelsConnectionArgs,
   QueryCommentsConnectionArgs,
   QueryOwnedNftsConnectionArgs,
+  QueryTokenAccountsArgs,
   QueryVideosConnectionArgs,
   VideosConnection,
 } from '../queries/__generated__/baseTypes.generated'
@@ -41,6 +42,7 @@ const getVideoKeyArgs = (
   const durationLte = args?.where?.duration_gte || ''
   const titleContains = args?.where?.title_contains || ''
   const titleContainsInsensitive = args?.where?.title_containsInsensitive || ''
+  const OR = stringifyValue(args?.where?.OR)
 
   const sortingArray = args?.orderBy != null ? (Array.isArray(args.orderBy) ? args.orderBy : [args.orderBy]) : []
   const sorting = stringifyValue(sortingArray)
@@ -50,7 +52,7 @@ const getVideoKeyArgs = (
     return `${createdAtGte}:${channel}`
   }
 
-  return `${onlyCount}:${channel}:${category}:${nft}:${language}:${createdAtGte}:${createdAtLte}:${isPublic}:${idEq}:${idIn}:${sorting}:${durationGte}:${durationLte}:${titleContains}:${titleContainsInsensitive}:${offset}:${createdAtGt}:${createdAtLt}`
+  return `${onlyCount}:${channel}:${category}:${nft}:${language}:${createdAtGte}:${createdAtLte}:${isPublic}:${idEq}:${idIn}:${sorting}:${durationGte}:${durationLte}:${titleContains}:${titleContainsInsensitive}:${offset}:${createdAtGt}:${createdAtLt}:${OR}`
 }
 
 const getNftKeyArgs = (
@@ -78,6 +80,24 @@ const getNftKeyArgs = (
   return `${OR}:${AND}:${ownerMember}:${creatorChannel}:${status}:${auctionStatus}:${sorting}:${createdAtGte}:${createdAtLte}:${video}:${offset}:${lastSalePriceGte}:${lastSalePriceLte}`
 }
 
+const getTokenAccountsKeyArgs = (
+  args: Partial<QueryTokenAccountsArgs> | null,
+  ctx: {
+    variables?: Record<string, unknown>
+    fieldName: string
+  }
+) => {
+  const offset = ctx?.variables?.offset ?? ''
+  const limit = ctx?.variables?.limit ?? ''
+  const OR = stringifyValue(args?.where?.OR)
+  const AND = stringifyValue(args?.where?.AND)
+  const sortingArray = args?.orderBy != null ? (Array.isArray(args.orderBy) ? args.orderBy : [args.orderBy]) : []
+  const sorting = stringifyValue(sortingArray)
+  const where = stringifyValue(args?.where ?? {})
+
+  return `${OR}:${AND}:${sorting}:${offset}:${where}:${limit}`
+}
+
 const getChannelKeyArgs = (args: Partial<QueryChannelsConnectionArgs> | null) => {
   // make sure queries asking for a specific category are separated in cache
   const language = stringifyValue(args?.where?.language_eq)
@@ -224,6 +244,44 @@ const queryCacheFields: CachePolicyFields<keyof Query> = {
       })
     )
   },
+  tokenAccounts: {
+    ...offsetLimitPagination(getTokenAccountsKeyArgs),
+    read(existing, { args, toReference, canRead }) {
+      if (args?.where?.id_eq) {
+        const holderRef = toReference({
+          __typename: 'TokenAccount',
+          id: args?.where.id_eq,
+        })
+        if (canRead(holderRef)) {
+          return [holderRef]
+        } else {
+          return undefined
+        }
+      }
+      const offset = args?.offset ?? 0
+      const limit = args?.limit ?? existing?.length
+      return existing?.slice(offset, offset + limit)
+    },
+  },
+  getAccountTransferrableBalance: (existing, { toReference, args }) => {
+    return (
+      existing ||
+      toReference({
+        __typename: 'GetAccountTransferrableBalanceResult',
+        memberId: args?.memberId,
+        tokenId: args?.tokenId,
+      })
+    )
+  },
+  creatorTokenById: (existing, { toReference, args }) => {
+    return (
+      existing ||
+      toReference({
+        __typename: 'CreatorToken',
+        id: args?.id,
+      })
+    )
+  },
   commentById: (existing, { toReference, args }) => {
     return (
       existing ||

packages/atlas/src/api/hooks/channel.ts

@@ -30,6 +30,7 @@ import {
   useUnfollowChannelMutation,
 } from '@/api/queries/__generated__/channels.generated'
 import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
+import { useAuth } from '@/providers/auth/auth.hooks'
 
 export const useBasicChannel = (
   id: string,
@@ -143,6 +144,7 @@ export const useMostPaidChannels = (): { channels: PayeeChannel[] | undefined; l
 
 export const useFollowChannel = (opts?: MutationHookOptions<FollowChannelMutation>) => {
   const [followChannel, rest] = useFollowChannelMutation()
+  const { refetchCurrentUser } = useAuth()
   const { trackChannelFollow } = useSegmentAnalytics()
   return {
     followChannel: (id: string) => {
@@ -152,6 +154,9 @@ export const useFollowChannel = (opts?: MutationHookOptions<FollowChannelMutatio
         variables: {
           channelId: id,
         },
+        onCompleted: () => {
+          refetchCurrentUser().catch(() => undefined)
+        },
         update: (cache, mutationResult) => {
           cache.modify({
             id: cache.identify({
@@ -171,13 +176,18 @@ export const useFollowChannel = (opts?: MutationHookOptions<FollowChannelMutatio
 
 export const useUnfollowChannel = (opts?: MutationHookOptions<UnfollowChannelMutation>) => {
   const [unfollowChannel, rest] = useUnfollowChannelMutation()
+  const { refetchCurrentUser } = useAuth()
+
   return {
     unfollowChannel: (id: string) =>
       unfollowChannel({
         ...opts,
         variables: {
           channelId: id,
         },
+        onCompleted: () => {
+          refetchCurrentUser().catch(() => undefined)
+        },
         update: (cache, mutationResult) => {
           cache.modify({
             id: cache.identify({

packages/atlas/src/api/hooks/dataObject.ts

@@ -11,7 +11,7 @@ export const useDataObjectsAvailabilityLazy = (opts?: QueryHookOptions<GetDataOb
 
   const _getDataObjectsAvailability = useCallback(
     (ids: string[]) => {
-      getDataObjectsAvailability({
+      return getDataObjectsAvailability({
         variables: {
           id_in: ids,
         },

packages/atlas/src/api/hooks/video.ts

@@ -17,7 +17,7 @@ import {
   useGetMostViewedVideosConnectionQuery,
   useGetVideosCountQuery,
 } from '@/api/queries/__generated__/videos.generated'
-import { publicCryptoVideoFilter } from '@/config/contentFilter'
+import { getPublicCryptoVideoFilter } from '@/config/contentFilter'
 
 export const useFullVideo = (
   id: string,
@@ -48,7 +48,7 @@ export const useChannelPreviewVideos = (
   const { data, ...rest } = useGetBasicVideosQuery({
     ...opts,
     variables: {
-      where: { ...publicCryptoVideoFilter, channel: { id_eq: channelId } },
+      where: getPublicCryptoVideoFilter({ channel: { id_eq: channelId } }),
       orderBy: VideoOrderByInput.CreatedAtDesc,
       offset: 0,
       limit: 10,