Release v4.3.0

.github/workflows/checks.yml

@@ -8,7 +8,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [16.x]
+        node-version: [18.x]
       fail-fast: true
     steps:
       - uses: actions/checkout@v2

CHANGELOG.md

@@ -5,6 +5,25 @@ 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.3.0] - 2023-08-02
+
+### Added
+
+- Added sentry stacktrace
+
+### Changed
+
+- Bumped NodeJS version to 18 for Github actions and project package.json
+- Changed YPP to sync only verified channels
+- Email is now prepopulated for YPP sign up
+- YPP carousel now shows recently paid channels
+
+### Fixed
+
+- Fixed referrer autocomplete
+- Fixed errors with wrong user system time
+- Fixed bugs in segment analytics events
+
 ## [4.2.0] - 2023-07-28
 
 ### Added
@@ -13,7 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Fixed QN subscriptions connection 
+- Fixed QN subscriptions connection
 - Fixed issues with sign up flow
 
 ## [4.1.0] - 2023-07-26

packages/atlas/.storybook/main.ts

@@ -15,7 +15,7 @@ const config: StorybookConfig = {
     }
   },
   docs: {
-    autodocs: true,
+    autodocs: false,
   },
 }
 export default config

packages/atlas/atlas.config.yml

@@ -46,6 +46,8 @@ features:
     suspendedLinkText: '#ypp-support channel on our Discord server'
     youtubeCollaboratorMemberId: '$VITE_YOUTUBE_COLLABORATOR_MEMBER_ID'
     enrollmentReward: 5000 # Amount for successful enrollment in YPP in joystream.tokenTicker units.
+    enrollmentUsdReward: 20 # Amount for successful enrollment in YPP in USD.
+    referralBaseReward: 10 # Self-explanatory, it should match `baseUsdAmount.min` value in last `rewards` entry
     tiersDefinition: # Tiers for YouTube partner program rewards. You can provide maximum three tiers. Each tier should has own multiplier.
       tiers:
         - minimumSubscribers: 50

packages/atlas/codegen.config.ts

@@ -0,0 +1,56 @@
+import { CodegenConfig } from '@graphql-codegen/cli'
+
+import { customSchemaLoader } from './scripts/customSchemaLoader'
+
+const schemaUrl = 'https://orion.gleev.xyz/graphql'
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: [
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    {
+      [schemaUrl]: {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        loader: customSchemaLoader,
+      },
+    },
+  ],
+  documents: ['./src/api/queries/**/*.graphql'],
+  config: {
+    scalars: {
+      DateTime: 'Date',
+      BigInt: 'string',
+    },
+    preResolveTypes: true, // avoid using Pick
+  },
+  generates: {
+    'src/api/schemas/orion.json': {
+      plugins: ['introspection'],
+      config: {
+        minify: true,
+      },
+    },
+    'src/api/queries/__generated__/baseTypes.generated.ts': {
+      hooks: {
+        afterOneFileWrite: ['prettier --write', 'eslint --fix'],
+      },
+      plugins: ['typescript'],
+    },
+    'src/api/queries/__generated__/': {
+      preset: 'near-operation-file',
+      presetConfig: {
+        baseTypesPath: 'baseTypes.generated.ts',
+        folder: '__generated__',
+        extension: '.generated.tsx',
+      },
+      hooks: {
+        afterOneFileWrite: ['prettier --write', 'eslint --fix'],
+      },
+      plugins: ['typescript-operations', 'typescript-react-apollo'],
+    },
+  },
+}
+
+export default config

packages/atlas/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@joystream/atlas",
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",
@@ -25,7 +25,7 @@
     "svgs:icons": "yarn svgs:icons-import && yarn svgs:icons-generate",
     "svgs:logos": "svgr --config-file svgr.config.js -d src/assets/logos src/assets/logos/svgs && prettier --write src/assets/logos",
     "lint:post-codegen": "stylelint --max-warnings 0 './src/**/*generated.{tsx,ts}' && prettier --write src/**/*generated.{tsx,ts}",
-    "graphql": "rimraf src/api/queries/__generated__ && DOTENV_CONFIG_PATH=\"./src/.env\" graphql-codegen --config codegen.config.yml -r dotenv/config && yarn lint:post-codegen",
+    "graphql": "rimraf src/api/queries/__generated__ && DOTENV_CONFIG_PATH=\"./src/.env\" graphql-codegen -r ts-node/register dotenv/config --config codegen.config.ts && yarn lint:post-codegen",
     "test": "vitest run",
     "test:dev": "vitest dev",
     "madge:circular": "madge --circular ./src/* --ts-config ./tsconfig.json --extensions ts,tsx",
@@ -43,6 +43,7 @@
     "@livesession/sdk": "^1.1.4",
     "@loadable/component": "^5.15.2",
     "@lottiefiles/react-lottie-player": "^3.5.0",
+    "@nivo/line": "^0.83.0",
     "@segment/analytics-next": "^1.53.0",
     "@sentry/react": "^7.53.1",
     "@talismn/connect-wallets": "^1.2.1",
@@ -112,6 +113,7 @@
     "@joystream/prettier-config": "^1.0.0",
     "@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",
@@ -153,6 +155,6 @@
     "vitest": "^0.25.7"
   },
   "engines": {
-    "node": "^16"
+    "node": "^18"
   }
 }

packages/atlas/scripts/customSchemaLoader.ts

@@ -0,0 +1,46 @@
+import axios from 'axios'
+import { buildClientSchema, getIntrospectionQuery } from 'graphql'
+
+async function fetchAuthCookie() {
+  const response = await axios.post(
+    `https://auth.gleev.xyz/api/v1/anonymous-auth`,
+    {},
+    {
+      method: 'POST',
+      withCredentials: true,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }
+  )
+
+  return response.headers['set-cookie']
+}
+
+export async function customSchemaLoader() {
+  const authCookie = await fetchAuthCookie()
+  const introspectionQuery = getIntrospectionQuery()
+
+  if (!authCookie) {
+    throw new Error('Authorization cookie is missing.')
+  }
+
+  const schemaResponse = await axios
+    .post<any>(
+      'https://orion.gleev.xyz/graphql',
+      {
+        query: introspectionQuery,
+      },
+      {
+        method: 'post',
+        withCredentials: true,
+        headers: {
+          Cookie: authCookie.join('; '),
+          'Content-Type': 'application/json',
+        },
+      }
+    )
+    .catch((error) => console.log(error.response.data))
+  const schema = buildClientSchema(schemaResponse && schemaResponse.data.data)
+  return schema
+}

packages/atlas/src/.env

@@ -12,7 +12,6 @@ VITE_FORCE_MAINTENANCE=
 VITE_APP_ID=4414-2
 VITE_APP_NAME=Atlas
 
-
 VITE_AVATAR_SERVICE_URL=https://atlas-services.joystream.org/avatars
 VITE_ASSET_LOGS_URL=
 VITE_GEOLOCATION_SERVICE_URL=https://geolocation.joystream.org
@@ -58,4 +57,6 @@ VITE_NEXT_YPP_FAUCET_URL=https://52.204.147.11.nip.io/membership
 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
+
+VITE_SENTRY_AUTH_TOKEN=

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

@@ -0,0 +1,14 @@
+import axios from 'axios'
+
+export const axiosInstance = axios.create()
+
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  (response) => {
+    if (response.config.data) {
+      response.errorData = JSON.stringify(response.config.data)
+    }
+    response.endpoint = response.config.url
+    throw response
+  }
+)

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

@@ -1,6 +1,8 @@
 import { MutationHookOptions, QueryHookOptions } from '@apollo/client'
+import { BN_ZERO } from '@polkadot/util'
+import BN from 'bn.js'
 import { shuffle } from 'lodash-es'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 import {
   FollowChannelMutation,
@@ -17,6 +19,7 @@ import {
   UnfollowChannelMutation,
   useFollowChannelMutation,
   useGetChannelNftCollectorsQuery,
+  useGetChannelsPaymentEventsQuery,
   useGetDiscoverChannelsQuery,
   useGetExtendedBasicChannelsQuery,
   useGetExtendedFullChannelsQuery,
@@ -81,6 +84,42 @@ export const useBasicChannels = (
   }
 }
 
+type PayeeChannel = {
+  id: string
+  title?: string | null
+  avatarPhoto?: { resolvedUrls: string[] } | null
+}
+export type YPPPaidChannels = { channel: PayeeChannel; amount: BN }
+export const useRecentlyPaidChannels = (): { channels: YPPPaidChannels[] | undefined; loading: boolean } => {
+  const { data, loading } = useGetChannelsPaymentEventsQuery({ variables: { limit: 2000 } })
+
+  const channels = useMemo<YPPPaidChannels[] | undefined>(() => {
+    type PaymentMap = Map<string, YPPPaidChannels>
+    const paymentMap = data?.events.reduce<PaymentMap>((channels, { data }) => {
+      if (data.__typename !== 'ChannelPaymentMadeEventData' || !data.payeeChannel) return channels
+
+      const exisitng = channels.get(data.payeeChannel.id)
+      const channel = exisitng?.channel ?? data.payeeChannel
+      const amount = new BN(data.amount).add(exisitng?.amount ?? BN_ZERO)
+
+      channels.set(data.payeeChannel.id, { channel, amount })
+
+      return channels
+    }, new Map())
+
+    return (
+      paymentMap &&
+      Array.from(paymentMap.values()).sort((a, b) => {
+        if (a.amount.gt(b.amount)) return -1
+        if (a.amount.lt(b.amount)) return 1
+        return 0
+      })
+    )
+  }, [data])
+
+  return { channels, loading }
+}
+
 export const useFollowChannel = (opts?: MutationHookOptions<FollowChannelMutation>) => {
   const [followChannel, rest] = useFollowChannelMutation()
   const { trackChannelFollow } = useSegmentAnalytics()
@@ -112,12 +151,11 @@ export const useFollowChannel = (opts?: MutationHookOptions<FollowChannelMutatio
 export const useUnfollowChannel = (opts?: MutationHookOptions<UnfollowChannelMutation>) => {
   const [unfollowChannel, rest] = useUnfollowChannelMutation()
   return {
-    unfollowChannel: (id: string, token: string) =>
+    unfollowChannel: (id: string) =>
       unfollowChannel({
         ...opts,
         variables: {
           channelId: id,
-          token,
         },
         update: (cache, mutationResult) => {
           cache.modify({