☎️ Query the new notifications from Orion

packages/atlas/.storybook/preview.jsx

@@ -2,6 +2,8 @@ import styled from '@emotion/styled'
 import { useRef } from 'react'
 import useResizeObserver from 'use-resize-observer'
 
+import { OperatorsContext } from '@/providers/assets/assets.provider'
+import { JoystreamContext } from '@/providers/joystream/joystream.provider'
 import { GlobalStyles } from '@/styles'
 
 const Wrapper = styled.div`
@@ -26,8 +28,19 @@ const StylesWrapperDecorator = (styleFn) => {
     </Wrapper>
   )
 }
+const OperatorsContextDecorator = (Story) => (
+  <OperatorsContext.Provider value={{}}>
+    <Story />
+  </OperatorsContext.Provider>
+)
 
-export const decorators = [StylesWrapperDecorator]
+const TokenPriceDecorator = (Story) => (
+  <JoystreamContext.Provider value={{ tokenPrice: 0.5 }}>
+    <Story />
+  </JoystreamContext.Provider>
+)
+
+export const decorators = [OperatorsContextDecorator, TokenPriceDecorator, StylesWrapperDecorator]
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

packages/atlas/src/.env

@@ -54,9 +54,11 @@ 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_ORION_AUTH_URL=http://localhost:4074/api/v1
+VITE_LOCAL_ORION_URL=http://localhost:4350/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_YPP_FAUCET_URL=https://52.204.147.11.nip.io/membership
 
 VITE_SENTRY_AUTH_TOKEN=

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

@@ -5,28 +5,31 @@ import {
   GetNftActivitiesCountQueryVariables,
   GetNftActivitiesQuery,
   GetNftActivitiesQueryVariables,
-  GetNotificationsConnectionQuery,
-  GetNotificationsConnectionQueryVariables,
   useGetNftActivitiesCountQuery,
   useGetNftActivitiesQuery,
   useGetNotificationsConnectionQuery,
+  useMarkNotificationsAsReadMutation,
 } from '@/api/queries/__generated__/notifications.generated'
+import { RecipientType } from '@/providers/notifications/notifications.store'
 
 import { NftActivityOrderByInput } from '../queries/__generated__/baseTypes.generated'
 
 export const useRawNotifications = (
   accountId: string,
-  opts?: QueryHookOptions<GetNotificationsConnectionQuery, GetNotificationsConnectionQueryVariables>
+  type: RecipientType,
+  opts?: Pick<QueryHookOptions, 'notifyOnNetworkStatusChange'>
 ) => {
   const { data, ...rest } = useGetNotificationsConnectionQuery({
-    variables: { first: 10, accountId },
-    skip: !accountId,
+    variables: { first: 10, accountId, type },
     ...opts,
   })
+
+  const [markNotificationsAsReadMutation] = useMarkNotificationsAsReadMutation()
+
   return {
-    notifications: data?.notificationsConnection.edges || [],
-    totalCount: data?.notificationsConnection.totalCount,
-    pageInfo: data?.notificationsConnection.pageInfo,
+    notifications: data?.notificationInAppDeliveriesConnection.edges || [],
+    pageInfo: data?.notificationInAppDeliveriesConnection.pageInfo,
+    markNotificationsAsReadMutation,
     ...rest,
   }
 }