[C-969] Add native audio-screen (#1873)

packages/common/src/services/cognito/Cognito.ts

@@ -0,0 +1,71 @@
+import { AudiusBackend, AuthHeaders } from '../audius-backend'
+
+type HttpMethod = 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH'
+
+export type CognitoSignatureResponse = { signature: string }
+export type CognitoFlowResponse = { shareable_url: string }
+export type CognitoFlowExistsResponse = { exists: boolean }
+type AuthHeadersType = typeof AuthHeaders
+type MakeRequestConfig = {
+  path: string
+  method?: HttpMethod
+  useAuth?: boolean
+}
+
+type CognitoConfig = {
+  audiusBackend: AudiusBackend
+}
+
+export class Cognito {
+  audiusBackend: AudiusBackend
+  constructor(config: CognitoConfig) {
+    this.audiusBackend = config.audiusBackend
+  }
+
+  _makeRequest = async <ResponseModel>(
+    config: MakeRequestConfig
+  ): Promise<ResponseModel> => {
+    const { path, method = 'GET', useAuth = true } = config
+    const options: {
+      method: HttpMethod
+      headers?: { [key in AuthHeadersType[keyof AuthHeadersType]]: string }
+    } = { method }
+    if (useAuth) {
+      const libs = await this.audiusBackend.getAudiusLibs()
+      const account = libs.Account.getCurrentUser()
+      if (!account) {
+        throw new Error('Cognito Identity Request Failed: Missing current user')
+      }
+      const { data, signature } = await this.audiusBackend.signData()
+      options.headers = {
+        [AuthHeaders.Message]: data,
+        [AuthHeaders.Signature]: signature
+      }
+    }
+    const response = await fetch(
+      `${this.audiusBackend.identityServiceUrl}${path}`,
+      options
+    )
+    if (response.status >= 400 && response.status < 600) {
+      throw new Error(`Cognito Identity Request Failed: ${response.statusText}`)
+    }
+    const json: ResponseModel = await response.json()
+    return json
+  }
+
+  getCognitoSignature = () =>
+    this._makeRequest<CognitoSignatureResponse>({ path: '/cognito_signature' })
+
+  getCognitoFlow = () =>
+    this._makeRequest<CognitoFlowResponse>({
+      path: '/cognito_flow',
+      method: 'POST'
+    })
+
+  getCognitoExists = (handle: string) =>
+    this._makeRequest<CognitoFlowExistsResponse>({
+      path: `/cognito_recent_exists/${handle}`,
+      method: 'GET',
+      useAuth: false
+    })
+}

packages/common/src/services/cognito/index.ts

@@ -0,0 +1 @@
+export * from './Cognito'

packages/common/src/services/env.ts

@@ -3,5 +3,12 @@ export type Environment = 'development' | 'staging' | 'production'
 export type Env = {
   EAGER_DISCOVERY_NODES?: string
   EXPLORE_CONTENT_URL?: string
+<<<<<<< HEAD
   ENVIRONMENT?: Environment
+=======
+  SUGGESTED_FOLLOW_HANDLES: string
+  AAO_ENDPOINT?: string
+  ORACLE_ETH_ADDRESSES?: string
+  ENVIRONMENT: string
+>>>>>>> c54fab787 ([C-969] Add native audio-screen (#1873))
 }

packages/common/src/services/index.ts

@@ -11,3 +11,4 @@ export * from './explore'
 export * from './audio-player'
 export * from './opensea-client'
 export * from './solana-client'
+export * from './cognito'

packages/common/src/services/native-mobile-interface/types.ts

@@ -109,9 +109,6 @@ export enum MessageType {
 
   SYNC_COMMON_STATE = 'sync-common-state',
 
-  // hCaptcha
-  UPDATE_HCAPTCHA_SCORE = 'update-hcaptcha-score',
-
   // Tipping
   FETCH_RECENT_TIPS = 'fetch-recent-tips',
   UPDATE_TIPS_STORAGE = 'update-tips-storage'

packages/common/src/store/index.ts

@@ -22,3 +22,4 @@ export * from './ui'
 export * from './user-list'
 export * from './commonStore'
 export * from './player'
+export * from './music-confetti'

packages/common/src/store/music-confetti/index.ts

@@ -0,0 +1,5 @@
+export * as musicConfettiSelectors from './selectors'
+export {
+  default as musicConfettiReducer,
+  actions as musicConfettiActions
+} from './slice'

packages/common/src/store/music-confetti/selectors.ts

@@ -0,0 +1,4 @@
+import { CommonState } from '../commonStore'
+
+export const getIsVisible = (state: CommonState) =>
+  state.ui.musicConfetti.isVisible

packages/web/src/components/music-confetti/store/slice.ts → packages/common/src/store/music-confetti/slice.ts

@@ -1,8 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit'
 
-import { AppState } from 'store/types'
-
-type MusicConfettiState = {
+export type MusicConfettiState = {
   isVisible: boolean
   isMatrix: boolean
 }
@@ -27,9 +25,5 @@ const slice = createSlice({
 
 export const { show, hide } = slice.actions
 
-// Selectors
-
-export const getIsVisible = (state: AppState) =>
-  state.application.ui.musicConfetti.isVisible
-
+export const actions = slice.actions
 export default slice.reducer

packages/common/src/store/pages/token-dashboard/slice.ts

@@ -4,7 +4,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { Nullable } from 'utils/typeUtils'
 
 import { Chain } from '../../../models/Chain'
-import { BNWei, StringWei, WalletAddress } from '../../../models/Wallet'
+import { BNWei, WalletAddress } from '../../../models/Wallet'
 
 import {
   AssociatedWallets,

packages/common/src/store/reducers.ts

@@ -13,6 +13,9 @@ import { UsersCacheState } from './cache/users/types'
 import cast from './cast/slice'
 import changePasswordReducer from './change-password/slice'
 import { ChangePasswordState } from './change-password/types'
+import musicConfettiReducer, {
+  MusicConfettiState
+} from './music-confetti/slice'
 import notifications from './notifications/reducer'
 import audioRewardsSlice from './pages/audio-rewards/slice'
 import collection from './pages/collection/reducer'
@@ -139,6 +142,7 @@ export const reducers = () => ({
     deletePlaylistConfirmationModal: deletePlaylistConfirmationReducer,
     mobileOverflowModal: mobileOverflowModalReducer,
     modals: modalsReducer,
+    musicConfetti: musicConfettiReducer,
     nowPlaying: nowPlayingReducer,
     reactions: reactionsReducer,
     shareSoundToTikTokModal: shareSoundToTikTokModalReducer,
@@ -232,6 +236,7 @@ export type CommonState = {
     deletePlaylistConfirmationModal: DeletePlaylistConfirmationModalState
     mobileOverflowModal: MobileOverflowModalState
     modals: ModalsState
+    musicConfetti: MusicConfettiState
     nowPlaying: NowPlayingState
     reactions: ReactionsState
     shareSoundToTikTokModal: ShareSoundToTikTokModalState

packages/common/src/store/storeContext.ts

@@ -1,3 +1,4 @@
+import { Cognito } from 'services/cognito'
 import { SolanaClient } from 'services/solana-client'
 
 import { AnalyticsEvent, LineupState, Track } from '../models'
@@ -48,4 +49,5 @@ export type CommonStoreContext = {
     setTag: (key: string, value: string) => void
     configureScope: (fn: (scope: { setUser: any }) => void) => void
   }
+  cognito: Cognito
 }

packages/mobile/src/components/audio-breakdown-drawer/AudioBreakdownDrawer.tsx

@@ -16,6 +16,7 @@ import {
   View,
   Animated
 } from 'react-native'
+import { useSelector } from 'react-redux'
 
 import IconCopy from 'app/assets/images/iconCopy.svg'
 import IconInfo from 'app/assets/images/iconInfo.svg'
@@ -25,7 +26,6 @@ import { GradientText } from 'app/components/core'
 import { AppDrawer } from 'app/components/drawer'
 import Text from 'app/components/text'
 import { usePressScaleAnimation } from 'app/hooks/usePressScaleAnimation'
-import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import type { ThemeColors } from 'app/hooks/useThemedStyles'
 import { useThemedStyles } from 'app/hooks/useThemedStyles'
 import share from 'app/utils/share'
@@ -183,11 +183,11 @@ const messages = {
 export const AudioBreakdownDrawer = () => {
   const styles = useThemedStyles(createStyles)
 
-  const accountBalance = (useSelectorWeb(getAccountBalance, (a, b) =>
+  const accountBalance = (useSelector(getAccountBalance, (a, b) =>
     Boolean(a && b && a.eq(b))
   ) ?? new BN('0')) as BNWei
 
-  const associatedWallets = useSelectorWeb(getAssociatedWallets, isEqual)
+  const associatedWallets = useSelector(getAssociatedWallets)
   const { connectedEthWallets: ethWallets, connectedSolWallets: solWallets } =
     associatedWallets ?? {
       ethWallets: null,

packages/mobile/src/components/challenge-rewards-drawer/ChallengeRewardsDrawerProvider.tsx

@@ -10,11 +10,10 @@ import {
   audioRewardsPageSelectors,
   modalsActions
 } from '@audius/common'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useRemoteVar } from 'app/hooks/useRemoteConfig'
-import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import type { ChallengesParamList } from 'app/utils/challenges'
 import { challengesConfig } from 'app/utils/challenges'
 
@@ -46,18 +45,18 @@ const styles = {
 }
 
 export const ChallengeRewardsDrawerProvider = () => {
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const { onClose } = useDrawerState(MODAL_NAME)
-  const modalType = useSelectorWeb(getChallengeRewardsModalType)
-  const userChallenges = useSelectorWeb(getOptimisticUserChallenges, isEqual)
+  const modalType = useSelector(getChallengeRewardsModalType)
+  const userChallenges = useSelector(getOptimisticUserChallenges)
 
   const handleClose = useCallback(() => {
-    dispatchWeb(resetAndCancelClaimReward())
+    dispatch(resetAndCancelClaimReward())
     onClose()
-  }, [dispatchWeb, onClose])
+  }, [dispatch, onClose])
 
-  const claimStatus = useSelectorWeb(getClaimStatus)
-  const aaoErrorCode = useSelectorWeb(getAAOErrorCode)
+  const claimStatus = useSelector(getClaimStatus)
+  const aaoErrorCode = useSelector(getAAOErrorCode)
 
   const { toast } = useContext(ToastContext)
 
@@ -94,16 +93,16 @@ export const ChallengeRewardsDrawerProvider = () => {
 
   const openUploadModal = useCallback(() => {
     handleClose()
-    dispatchWeb(setVisibility({ modal: 'MobileUpload', visible: true }))
-  }, [dispatchWeb, handleClose])
+    dispatch(setVisibility({ modal: 'MobileUpload', visible: true }))
+  }, [dispatch, handleClose])
 
   // Claim rewards button config
   const quorumSize = useRemoteVar(IntKeys.ATTESTATION_QUORUM_SIZE)
   const oracleEthAddress = useRemoteVar(StringKeys.ORACLE_ETH_ADDRESS)
   const AAOEndpoint = useRemoteVar(StringKeys.ORACLE_ENDPOINT)
   const hasConfig = (oracleEthAddress && AAOEndpoint && quorumSize > 0) || true
   const onClaim = useCallback(() => {
-    dispatchWeb(
+    dispatch(
       claimChallengeReward({
         claim: {
           challengeId: modalType,
@@ -113,7 +112,7 @@ export const ChallengeRewardsDrawerProvider = () => {
         retryOnFailure: true
       })
     )
-  }, [dispatchWeb, modalType, challenge])
+  }, [dispatch, modalType, challenge])
 
   useEffect(() => {
     if (claimStatus === ClaimStatus.SUCCESS) {

packages/mobile/src/components/challenge-rewards-drawer/ProfileCompletionChecks.tsx

@@ -2,19 +2,19 @@ import { useCallback } from 'react'
 
 import { accountSelectors, challengesSelectors } from '@audius/common'
 import { StyleSheet, View } from 'react-native'
+import { useSelector } from 'react-redux'
 
 import IconArrow from 'app/assets/images/iconArrow.svg'
 import IconValidationCheck from 'app/assets/images/iconValidationCheck.svg'
 import Text from 'app/components/text'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { useThemedStyles } from 'app/hooks/useThemedStyles'
 import type { ProfileTabScreenParamList } from 'app/screens/app-screen/ProfileTabScreen'
 import type { ThemeColors } from 'app/utils/theme'
 
 import Button, { ButtonType } from '../button'
 const { getCompletionStages } = challengesSelectors
-const getAccountUser = accountSelectors.getAccountUser
+const { getAccountUser } = accountSelectors
 
 const messages = {
   profileCheckNameAndHandle: 'Name & Handle',
@@ -64,8 +64,8 @@ export const ProfileCompletionChecks = ({
   isComplete: boolean
   onClose: () => void
 }) => {
-  const currentUser = useSelectorWeb(getAccountUser)
-  const completionStages = useSelectorWeb(getCompletionStages)
+  const currentUser = useSelector(getAccountUser)
+  const completionStages = useSelector(getCompletionStages)
   const styles = useThemedStyles(createStyles)
   const navigation = useNavigation<ProfileTabScreenParamList>()
   const goToProfile = useCallback(() => {

packages/mobile/src/components/challenge-rewards-drawer/ReferralRewardContents.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 
 import { accountSelectors } from '@audius/common'
-
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
+import { useSelector } from 'react-redux'
 
 import { ReferralLinkCopyButton } from './ReferralLinkCopyButton'
 import { TwitterShareButton } from './TwitterShareButton'
@@ -12,7 +11,7 @@ export const ReferralRewardContents = ({
 }: {
   isVerified: boolean
 }) => {
-  const handle = useSelectorWeb(accountSelectors.getUserHandle)
+  const handle = useSelector(accountSelectors.getUserHandle)
   const inviteUrl = `audius.co/signup?ref=${handle}`
 
   return (

packages/mobile/src/components/cognito-drawer/CognitoDrawer.tsx

@@ -8,12 +8,11 @@ import {
 } from '@audius/common'
 import { StyleSheet, View } from 'react-native'
 import WebView from 'react-native-webview'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { AppDrawer, useDrawerState } from 'app/components/drawer'
 import LoadingSpinner from 'app/components/loading-spinner'
 import Text from 'app/components/text'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { useThemedStyles } from 'app/hooks/useThemedStyles'
 import type { ThemeColors } from 'app/utils/theme'
 const { getCognitoFlowUrl, getCognitoFlowUrlStatus } = audioRewardsPageSelectors
@@ -55,15 +54,15 @@ const createStyles = (themeColors: ThemeColors) =>
 
 export const CognitoDrawer = () => {
   const styles = useThemedStyles(createStyles)
-  const dispatchWeb = useDispatchWeb()
+  const dispatch = useDispatch()
   const { isOpen } = useDrawerState(MODAL_NAME)
-  const uri = useSelectorWeb(getCognitoFlowUrl)
-  const uriStatus = useSelectorWeb(getCognitoFlowUrlStatus)
+  const uri = useSelector(getCognitoFlowUrl)
+  const uriStatus = useSelector(getCognitoFlowUrlStatus)
   const [key, setKey] = useState(0)
 
   const handleClose = useCallback(() => {
-    dispatchWeb(setCognitoFlowStatus({ status: CognitoFlowStatus.CLOSED }))
-  }, [dispatchWeb])
+    dispatch(setCognitoFlowStatus({ status: CognitoFlowStatus.CLOSED }))
+  }, [dispatch])
 
   const reload = useCallback(() => {
     setKey((key) => key + 1)
@@ -72,11 +71,11 @@ export const CognitoDrawer = () => {
   // On open, fetch the cognito flow url if don't already have one, otherwise refresh
   useEffect(() => {
     if (isOpen && !uri) {
-      dispatchWeb(fetchCognitoFlowUrl())
+      dispatch(fetchCognitoFlowUrl())
     } else if (isOpen) {
       reload()
     }
-  }, [dispatchWeb, reload, isOpen, uri])
+  }, [dispatch, reload, isOpen, uri])
 
   return (
     <AppDrawer