Update mobile web pages and overflow menus for asset details page

packages/common/src/utils/route.ts

@@ -154,6 +154,7 @@ export const FAVORITING_USERS_ROUTE = '/favoriting_users'
 export const FOLLOWING_USERS_ROUTE = '/following'
 export const FOLLOWERS_USERS_ROUTE = '/followers'
 export const LEADERBOARD_USERS_ROUTE = '/leaderboard'
+export const COIN_DETAIL_ROUTE = '/coins/:ticker/details'
 export const SUPPORTING_USERS_ROUTE = '/supporting'
 export const TOP_SUPPORTERS_USERS_ROUTE = '/top-supporters'
 export const ACCOUNT_SETTINGS_PAGE = '/settings/account'

packages/web/src/app/web-player/WebPlayer.jsx

@@ -55,6 +55,7 @@ import { ArtistCoinsExplorePage } from 'pages/artist-coins-explore-page/ArtistCo
 import { LaunchpadPage } from 'pages/artist-coins-launchpad-page'
 import { MobileArtistCoinsSortPage } from 'pages/artist-coins-sort-page/MobileArtistCoinsSortPage'
 import { AssetDetailPage } from 'pages/asset-detail-page/AssetDetailPage'
+import { ArtistCoinDetailsPage } from 'pages/asset-detail-page/components/mobile/ArtistCoinDetailsPage'
 import { AudioPage } from 'pages/audio-page/AudioPage'
 import { ChatPageProvider } from 'pages/chat-page/ChatPageProvider'
 import CollectionPage from 'pages/collection-page/CollectionPage'
@@ -152,6 +153,7 @@ const {
  FOLLOWING_USERS_ROUTE,
  FOLLOWERS_USERS_ROUTE,
  LEADERBOARD_USERS_ROUTE,
+ COIN_DETAIL_ROUTE,
  TRENDING_GENRES,
  APP_REDIRECT,
  TRACK_ID_PAGE,
@@ -952,6 +954,12 @@ const WebPlayer = (props) => {
  isMobile={isMobile}
  component={LeaderboardPage}
  />
+ <MobileRoute
+ exact
+ path={COIN_DETAIL_ROUTE}
+ isMobile={isMobile}
+ component={ArtistCoinDetailsPage}
+ />
  <MobileRoute
  exact
  path={SUPPORTING_USERS_ROUTE}

packages/web/src/pages/asset-detail-page/components/AssetInsightsOverflowMenu.tsx

@@ -1,7 +1,8 @@
-import { useContext, useState } from 'react'
+import { useCallback, useContext, useState } from 'react'
 
 import { useArtistCoin } from '@audius/common/api'
 import { coinDetailsMessages } from '@audius/common/messages'
+import { COIN_DETAIL_ROUTE } from '@audius/common/src/utils/route'
 import { route } from '@audius/common/utils'
 import {
  PopupMenu,
@@ -12,8 +13,12 @@ import {
  IconKebabHorizontal,
  IconInfo
 } from '@audius/harmony'
+import { useDispatch } from 'react-redux'
 
+import ActionDrawer from 'components/action-drawer/ActionDrawer'
 import { ToastContext } from 'components/toast/ToastContext'
+import { useIsMobile } from 'hooks/useIsMobile'
+import { push } from 'utils/navigation'
 
 import { copyToClipboard } from '../../../utils/clipboardUtil'
 
@@ -31,9 +36,12 @@ type AssetInsightsOverflowMenuProps = {
 export const AssetInsightsOverflowMenu = ({
  mint
 }: AssetInsightsOverflowMenuProps) => {
+ const dispatch = useDispatch()
  const { toast } = useContext(ToastContext)
  const { data: artistCoin } = useArtistCoin(mint)
+ const isMobile = useIsMobile()
  const [isDetailsModalOpen, setIsDetailsModalOpen] = useState(false)
+ const [isMobileOverflowOpen, setIsMobileOverflowOpen] = useState(false)
 
  const onCopyCoinAddress = () => {
  if (artistCoin?.mint) {
@@ -53,23 +61,36 @@ export const AssetInsightsOverflowMenu = ({
  }
 
  const onOpenDetails = () => {
- setIsDetailsModalOpen(true)
+ if (isMobile) {
+ dispatch(
+ push(COIN_DETAIL_ROUTE.replace(':ticker', artistCoin?.ticker ?? ''))
+ )
+ } else {
+ setIsDetailsModalOpen(true)
+ }
  }
+ const onOpenMobileOverflow = useCallback(() => {
+ setIsMobileOverflowOpen(true)
+ }, [setIsMobileOverflowOpen])
+
+ const onCloseMobileOverflow = useCallback(() => {
+ setIsMobileOverflowOpen(false)
+ }, [setIsMobileOverflowOpen])
 
  const menuItems: PopupMenuItem[] = [
  {
  text: messages.copyCoinAddress,
- icon: <IconCopy />,
+ icon: <IconCopy color='default' />,
  onClick: onCopyCoinAddress
  },
  {
  text: messages.openDexscreener,
- icon: <IconExternalLink />,
+ icon: <IconExternalLink color='default' />,
  onClick: onOpenDexscreener
  },
  {
  text: messages.details,
- icon: <IconInfo />,
+ icon: <IconInfo color='default' />,
  onClick: onOpenDetails
  }
  ]
@@ -79,6 +100,31 @@ export const AssetInsightsOverflowMenu = ({
  return null
  }
 
+ if (isMobile) {
+ return (
+ <>
+ <IconButton
+ icon={IconKebabHorizontal}
+ onClick={onOpenMobileOverflow}
+ aria-label='More options'
+ />
+ <ActionDrawer
+ actions={menuItems.map((item) => ({
+ text: item.text as string,
+ icon: item.icon,
+ onClick: (e) => {
+ // @ts-ignore - Element vs HTMLElement
+ item.onClick?.(e)
+ onCloseMobileOverflow()
+ }
+ }))}
+ isOpen={isMobileOverflowOpen}
+ onClose={onCloseMobileOverflow}
+ />
+ </>
+ )
+ }
+
  return (
  <>
  <PopupMenu

packages/web/src/pages/asset-detail-page/components/BalanceSection.tsx

@@ -1,3 +1,5 @@
+import { useCallback, useState } from 'react'
+
 import {
  useArtistCoin,
  useTokenBalance,
@@ -23,11 +25,19 @@ import {
 
 import { useModalState } from 'common/hooks/useModalState'
 import { useBuySellRegionSupport } from 'components/buy-sell-modal'
+import Drawer from 'components/drawer/Drawer'
 import { componentWithErrorBoundary } from 'components/error-wrapper/componentWithErrorBoundary'
 import Skeleton from 'components/skeleton/Skeleton'
 import Tooltip from 'components/tooltip/Tooltip'
 import { useIsMobile } from 'hooks/useIsMobile'
 import { useRequiresAccountCallback } from 'hooks/useRequiresAccount'
+import { zIndex } from 'utils/zIndex'
+
+const messages = {
+ openTheApp: 'Open The App',
+ drawerDescription:
+ "You'll need to make this purchase in the app or on the web."
+}
 
 type BalanceStateProps = {
  ticker: string
@@ -220,8 +230,16 @@ const BalanceSectionContent = ({ mint }: AssetDetailProps) => {
  const [, openTransferDrawer] = useModalState('TransferAudioMobileWarning')
  const { onOpen: openReceiveTokensModal } = useReceiveTokensModal()
  const { onOpen: openSendTokensModal } = useSendTokensModal()
-
  const isMobile = useIsMobile()
+ const [isMobileDrawerOpen, setIsMobileDrawerOpen] = useState(false)
+
+ const onOpenMobileDrawer = useCallback(() => {
+ setIsMobileDrawerOpen(true)
+ }, [setIsMobileDrawerOpen])
+
+ const onCloseMobileDrawer = useCallback(() => {
+ setIsMobileDrawerOpen(false)
+ }, [setIsMobileDrawerOpen])
 
  // Handler functions with account requirements - defined before early return
  const handleBuySell = useRequiresAccountCallback(() => {
@@ -272,21 +290,46 @@ const BalanceSectionContent = ({ mint }: AssetDetailProps) => {
  <ZeroBalanceState
  ticker={ticker}
  logoURI={logoURI}
- onBuy={handleAddCash}
+ onBuy={isMobile ? onOpenMobileDrawer : handleAddCash}
  onReceive={handleReceive}
  isBuySellSupported={isBuySellSupported}
  />
  ) : (
  <HasBalanceState
  ticker={ticker}
  logoURI={logoURI}
- onBuy={handleBuySell}
+ onBuy={isMobile ? onOpenMobileDrawer : handleBuySell}
  onSend={handleSend}
  onReceive={handleReceive}
  mint={mint}
  isBuySellSupported={isBuySellSupported}
  />
  )}
+ {isMobile && (
+ <Drawer
+ zIndex={zIndex.BUY_SELL_MODAL}
+ isOpen={isMobileDrawerOpen}
+ onClose={onCloseMobileDrawer}
+ shouldClose={!isMobileDrawerOpen}
+ >
+ <Flex direction='column' p='l' pb='2xl' w='100%'>
+ <Box pv='s'>
+ <Text
+ variant='label'
+ size='xl'
+ strength='strong'
+ color='subdued'
+ textAlign='center'
+ >
+ {messages.openTheApp}
+ </Text>
+ </Box>
+ <Box pv='l'>
+ <Text>{messages.drawerDescription}</Text>
+ </Box>
+ </Flex>
+ </Drawer>
+ )}
  </Flex>
  </Paper>
  )

packages/web/src/pages/asset-detail-page/components/ExternalWallets.tsx

@@ -29,7 +29,9 @@ import {
 import { UserCoinAccount } from '@audius/sdk'
 import { useQueryClient } from '@tanstack/react-query'
 
+import ActionDrawer from 'components/action-drawer/ActionDrawer'
 import { ToastContext } from 'components/toast/ToastContext'
+import { useIsMobile } from 'hooks/useIsMobile'
 import { copyToClipboard } from 'utils/clipboardUtil'
 
 import {
@@ -55,7 +57,9 @@ const WalletRow = ({
 }: WalletRowProps) => {
  const { toast } = useContext(ToastContext)
  const [isRemovingWallet, setIsRemovingWallet] = useState(false)
+ const isMobile = useIsMobile()
  const queryClient = useQueryClient()
+ const [isMobileOverflowOpen, setIsMobileOverflowOpen] = useState(false)
  const { data: currentUserId } = useCurrentUserId()
  // For connected wallets we want to use the root wallet address, for in-app wallets the owner will be us and not the user so we need to use the token account address
  const address = isInAppWallet ? account : owner
@@ -66,6 +70,14 @@ const WalletRow = ({
 
  const { mutateAsync: removeConnectedWalletAsync } = useRemoveConnectedWallet()
 
+ const onOpenMobileOverflow = useCallback(() => {
+ setIsMobileOverflowOpen(true)
+ }, [setIsMobileOverflowOpen])
+
+ const onCloseMobileOverflow = useCallback(() => {
+ setIsMobileOverflowOpen(false)
+ }, [setIsMobileOverflowOpen])
+
  const handleRemove = useCallback(async () => {
  try {
  setIsRemovingWallet(true)
@@ -88,13 +100,13 @@ const WalletRow = ({
  [
  {
  text: messages.copy,
- icon: <IconCopy />,
+ icon: <IconCopy color='default' />,
  onClick: copyAddressToClipboard
  },
  !isInAppWallet
  ? {
  text: messages.remove,
- icon: <IconTrash />,
+ icon: <IconTrash color='default' />,
  onClick: handleRemove
  }
  : null
@@ -121,28 +133,51 @@ const WalletRow = ({
  {Math.trunc(balance / Math.pow(10, decimals)).toLocaleString()}
  </Text>
  </Flex>
- <Flex
- css={{
- marginLeft: 'auto',
- flexBasis: 0
- }}
- >
- <PopupMenu
- items={items}
- aria-disabled={isRemovingWallet}
- renderTrigger={(ref, trigger) => (
- <IconButton
- ref={ref}
- icon={IconKebabHorizontal}
- size='s'
- color='subdued'
- disabled={isRemovingWallet}
- onClick={() => trigger()}
- aria-label={messages.options}
- />
- )}
- />
- </Flex>
+ {isMobile ? (
+ <>
+ <IconButton
+ icon={IconKebabHorizontal}
+ onClick={onOpenMobileOverflow}
+ aria-label='More options'
+ />
+ <ActionDrawer
+ actions={items.map((item) => ({
+ text: item.text as string,
+ icon: item.icon,
+ onClick: (e) => {
+ // @ts-ignore - Element vs HTMLElement
+ item.onClick?.(e)
+ onCloseMobileOverflow()
+ }
+ }))}
+ isOpen={isMobileOverflowOpen}
+ onClose={onCloseMobileOverflow}
+ />
+ </>
+ ) : (
+ <Flex
+ css={{
+ marginLeft: 'auto',
+ flexBasis: 0
+ }}
+ >
+ <PopupMenu
+ items={items}
+ aria-disabled={isRemovingWallet}
+ renderTrigger={(ref, trigger) => (
+ <IconButton
+ ref={ref}
+ icon={IconKebabHorizontal}
+ size='s'
+ color='subdued'
+ disabled={isRemovingWallet}
+ onClick={() => trigger()}
+ aria-label={messages.options}
+ />
+ )}
+ />
+ </Flex>
+ )}
  </Flex>
  )
 }