[C-939] Refactor discord modal (#1838)

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

@@ -17,7 +17,6 @@ import {
 const initialState: TokenDashboardState = {
   modalState: null,
   modalVisible: false,
-  discordCode: null,
   associatedWallets: {
     status: null,
     connectedEthWallets: null,
@@ -126,16 +125,6 @@ const slice = createSlice({
       }
       state.modalVisible = true
     },
-    pressDiscord: (state) => {
-      state.modalState = { stage: 'DISCORD_CODE' }
-      state.modalVisible = true
-    },
-    setDiscordCode: (
-      state,
-      { payload: { code } }: PayloadAction<{ code: Nullable<string> }>
-    ) => {
-      state.discordCode = code
-    },
 
     // Saga Actions
 
@@ -293,8 +282,6 @@ export const {
   pressSend,
   inputSendData,
   confirmSend,
-  pressDiscord,
-  setDiscordCode,
   fetchAssociatedWallets,
   setWalletAddedConfirmed,
   setAssociatedWallets,

packages/common/src/store/reducers.ts

@@ -74,6 +74,8 @@ import theme from './ui/theme/reducer'
 import { ThemeState } from './ui/theme/types'
 import toastReducer from './ui/toast/slice'
 import transactionDetailsReducer from './ui/transaction-details/slice'
+import vipDiscordModalReducer from './ui/vip-discord-modal/slice'
+import { VipDiscordModalState } from './ui/vip-discord-modal/types'
 import favoritesUserListReducer from './user-list/favorites/reducers'
 import followersUserListReducer from './user-list/followers/reducers'
 import followingUserListReducer from './user-list/following/reducers'
@@ -149,7 +151,8 @@ export const reducers = () => ({
       mutuals: mutualsUserListReducer,
       notifications: notificationsUserListReducer
     }),
-    theme
+    theme,
+    vipDiscordModal: vipDiscordModalReducer
   }),
 
   // Pages
@@ -240,6 +243,7 @@ export type CommonState = {
       supporting: ReturnType<typeof supportingUserListReducer>
     }
     theme: ThemeState
+    vipDiscordModal: VipDiscordModalState
   }
 
   pages: {

packages/common/src/store/ui/index.ts

@@ -64,6 +64,14 @@ export * from './share-modal/types'
 export * as shareModalUISelectors from './share-modal/selectors'
 export { default as shareModalUISagas } from './share-modal/sagas'
 
+export {
+  default as vipDiscordModalReducer,
+  actions as vipDiscordModalActions
+} from './vip-discord-modal/slice'
+export * from './vip-discord-modal/types'
+export * as vipDiscordModalSelectors from './vip-discord-modal/selectors'
+export { default as vipDiscordModalSagas } from './vip-discord-modal/sagas'
+
 export {
   default as shareSoundToTiktokModalReducer,
   actions as shareSoundToTiktokModalActions

packages/common/src/store/ui/modals/slice.ts

@@ -30,7 +30,8 @@ const initialState: ModalsState = {
   DeletePlaylistConfirmation: false,
   FeatureFlagOverride: false,
   BuyAudio: false,
-  TransactionDetails: false
+  TransactionDetails: false,
+  VipDiscord: false
 }
 
 const slice = createSlice({

packages/common/src/store/ui/modals/types.ts

@@ -27,5 +27,6 @@ export type Modals =
   | 'FeatureFlagOverride'
   | 'BuyAudio'
   | 'TransactionDetails'
+  | 'VipDiscord'
 
 export type ModalsState = { [modal in Modals]: boolean | 'closing' }

packages/common/src/store/ui/vip-discord-modal/sagas.ts

@@ -0,0 +1,34 @@
+import { call, put, select, takeLatest } from 'typed-redux-saga'
+
+import { getContext } from '../../effects'
+import { setVisibility } from '../modals/slice'
+
+import { getDiscordCode } from './selectors'
+import { pressDiscord, setDiscordCode } from './slice'
+
+const getSignableData = () => {
+  const vals = 'abcdefghijklmnopqrstuvwxyz123456789'
+  return vals.charAt(Math.floor(Math.random() * vals.length))
+}
+
+function* fetchDiscordCode() {
+  const discordCode = yield* select(getDiscordCode)
+  if (!discordCode) {
+    const audiusBackendInstance = yield* getContext('audiusBackendInstance')
+    yield* call(audiusBackendInstance.waitForWeb3)
+    const data = getSignableData()
+    const signature = yield* call(audiusBackendInstance.getSignature, data)
+    const appended = `${signature}:${data}`
+    yield* put(setDiscordCode({ code: appended }))
+  }
+
+  yield* put(setVisibility({ modal: 'VipDiscord', visible: true }))
+}
+
+function* watchPressDiscord() {
+  yield* takeLatest(pressDiscord.type, fetchDiscordCode)
+}
+
+export default function sagas() {
+  return [watchPressDiscord]
+}

packages/common/src/store/ui/vip-discord-modal/selectors.ts

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

packages/common/src/store/ui/vip-discord-modal/slice.ts

@@ -0,0 +1,27 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { Nullable } from '../../../utils/typeUtils'
+
+import { VipDiscordModalState } from './types'
+
+const initialState: VipDiscordModalState = {
+  discordCode: null
+}
+
+const slice = createSlice({
+  name: 'ui/vipDiscordModal',
+  initialState,
+  reducers: {
+    pressDiscord: (_state, _action: PayloadAction<undefined>) => {},
+    setDiscordCode: (
+      state,
+      { payload: { code } }: PayloadAction<{ code: Nullable<string> }>
+    ) => {
+      state.discordCode = code
+    }
+  }
+})
+
+export const { pressDiscord, setDiscordCode } = slice.actions
+export const actions = slice.actions
+export default slice.reducer

packages/common/src/store/ui/vip-discord-modal/types.ts

@@ -0,0 +1,5 @@
+import { Nullable } from '../../../utils/typeUtils'
+
+export type VipDiscordModalState = {
+  discordCode: Nullable<string>
+}

packages/mobile/src/Drawers.tsx

@@ -26,8 +26,8 @@ import { TransferAudioMobileDrawer } from 'app/components/transfer-audio-mobile-
 import { TrendingRewardsDrawer } from 'app/components/trending-rewards-drawer'
 import { TrendingFilterDrawer } from 'app/screens/trending-screen'
 
-import { DiscordDrawer } from './components/discord-drawer'
 import { useDrawerState } from './components/drawer'
+import { VipDiscordDrawer } from './components/vip-discord-drawer'
 import { useDrawer } from './hooks/useDrawer'
 import type { Drawer } from './store/drawers/slice'
 
@@ -83,7 +83,8 @@ const commonDrawersMap: { [Modal in Modals]?: ComponentType } = {
   SignOutConfirmation: SignOutConfirmationDrawer,
   AddToPlaylist: AddToPlaylistDrawer,
   AudioBreakdown: AudioBreakdownDrawer,
-  DeletePlaylistConfirmation: DeletePlaylistConfirmationDrawer
+  DeletePlaylistConfirmation: DeletePlaylistConfirmationDrawer,
+  VipDiscord: VipDiscordDrawer
 }
 
 const nativeDrawersMap: { [DrawerName in Drawer]?: ComponentType } = {
@@ -117,7 +118,6 @@ export const Drawers = () => {
           drawer={Drawer}
         />
       ))}
-      <DiscordDrawer />
     </>
   )
 }

packages/mobile/src/components/discord-drawer/DiscordDrawer.tsx → packages/mobile/src/components/vip-discord-drawer/VipDiscordDrawer.tsx

@@ -1,22 +1,14 @@
-import { useCallback } from 'react'
-
-import {
-  tokenDashboardPageActions,
-  tokenDashboardPageSelectors
-} from '@audius/common'
+import { vipDiscordModalSelectors } from '@audius/common'
 import { AUDIUS_DISCORD_LINK } from 'audius-client/src/utils/route'
 import { View } from 'react-native'
 
 import IconDiscord from 'app/assets/images/iconDiscord.svg'
 import { CopyTextTile } from 'app/components/copy-text-tile'
 import { Text, Button } from 'app/components/core'
-import Drawer from 'app/components/drawer'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
+import Drawer, { useDrawerState } from 'app/components/drawer'
 import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles } from 'app/styles'
-const { getDiscordCode, getModalState, getModalVisible } =
-  tokenDashboardPageSelectors
-const { setModalState, setModalVisibility } = tokenDashboardPageActions
+const { getDiscordCode } = vipDiscordModalSelectors
 
 const messages = {
   title: 'Launch the VIP Discord',
@@ -43,34 +35,25 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   }
 }))
 
-export const DiscordDrawer = () => {
+export const VipDiscordDrawer = () => {
   const styles = useStyles()
-  const dispatchWeb = useDispatchWeb()
+  const { isOpen, onClose } = useDrawerState('VipDiscord')
 
-  // TODO: Discord modal state should probably be pulled out of token dashboard
-  const modalVisible = useSelectorWeb(getModalVisible)
-  const modalState = useSelectorWeb(getModalState)
   const discordCode = useSelectorWeb(getDiscordCode)
 
-  const isOpen =
-    modalVisible && modalState !== null && modalState.stage === 'DISCORD_CODE'
-
-  const handleClose = useCallback(() => {
-    dispatchWeb(setModalVisibility({ isVisible: false }))
-    dispatchWeb(setModalState({ modalState: null }))
-  }, [dispatchWeb])
-
   return (
     <Drawer
       isOpen={isOpen}
-      onClose={handleClose}
+      onClose={onClose}
       isFullscreen
       isGestureSupported={false}
       title={messages.title}
     >
       <View style={styles.container}>
         <Text style={styles.body}>{messages.body}</Text>
-        <CopyTextTile hint={messages.copyThisCode} text={discordCode} />
+        {discordCode ? (
+          <CopyTextTile hint={messages.copyThisCode} text={discordCode} />
+        ) : null}
         <Button
           style={styles.launchDiscord}
           title={messages.launchDiscord}

packages/mobile/src/components/vip-discord-drawer/index.ts

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

packages/mobile/src/screens/audio-screen/AudioScreen.tsx

@@ -2,8 +2,8 @@ import { useCallback } from 'react'
 
 import type { BNWei, StringWei, Nullable } from '@audius/common'
 import {
+  vipDiscordModalActions,
   formatWei,
-  tokenDashboardPageActions,
   tokenDashboardPageSelectors,
   walletSelectors,
   walletActions,
@@ -46,7 +46,7 @@ const { setVisibility } = modalsActions
 const { getBalance } = walletActions
 const { getAccountTotalBalance } = walletSelectors
 const { getHasAssociatedWallets } = tokenDashboardPageSelectors
-const { setModalState, setModalVisibility } = tokenDashboardPageActions
+const { pressDiscord } = vipDiscordModalActions
 
 const LEARN_MORE_LINK = 'https://blog.audius.co/article/community-meet-audio'
 
@@ -330,8 +330,7 @@ export const AudioScreen = () => {
   }
 
   const onPressLaunchDiscord = useCallback(() => {
-    dispatchWeb(setModalState({ modalState: { stage: 'DISCORD_CODE' } }))
-    dispatchWeb(setModalVisibility({ isVisible: true }))
+    dispatchWeb(pressDiscord())
   }, [dispatchWeb])
 
   const renderTierTile = () => {

packages/web/src/pages/audio-rewards-page/Tiers.tsx

@@ -4,9 +4,9 @@ import {
   BadgeTier,
   Nullable,
   accountSelectors,
-  tokenDashboardPageActions,
   badgeTiers,
-  getTierNumber
+  getTierNumber,
+  vipDiscordModalActions
 } from '@audius/common'
 import { Button, ButtonType, IconDiscord } from '@audius/stems'
 import cn from 'classnames'
@@ -25,7 +25,7 @@ import { isMobile } from 'utils/clientUtil'
 import { useSelector } from 'utils/reducer'
 
 import styles from './Tiers.module.css'
-const { pressDiscord } = tokenDashboardPageActions
+const { pressDiscord } = vipDiscordModalActions
 const getAccountUser = accountSelectors.getAccountUser
 
 const messages = {

packages/web/src/pages/audio-rewards-page/WalletModal.module.css

@@ -59,10 +59,6 @@
   fill: var(--neutral-light-4);
 }
 
-.discordDrawerTitle {
-  margin-top: 24px;
-}
-
 .converting {
   margin-right: 6px;
 }