[PE-6660] Add new send tokens modal flow

packages/common/src/api/index.ts

@@ -174,6 +174,7 @@ export * from './tan-query/wallets/useWalletCollectibles'
 export * from './tan-query/wallets/useWalletOwner'
 export * from './tan-query/wallets/useUSDCBalance'
 export * from './tan-query/wallets/useTokenBalance'
+export * from './tan-query/wallets/useSendTokens'
 export * from './tan-query/jupiter/useSwapTokens'
 export * from './tan-query/jupiter/useTokenExchangeRate'
 export * from './tan-query/jupiter/utils'

packages/common/src/api/tan-query/queryKeys.ts

@@ -98,6 +98,7 @@ export const QUERY_KEYS = {
  tokenPrice: 'tokenPrice',
  usdcBalance: 'usdcBalance',
  fileSizes: 'fileSizes',
+ sendTokens: 'sendTokens',
  managedAccounts: 'managedAccounts',
  userManagers: 'userManagers',
  reactions: 'reactions',

packages/common/src/api/tan-query/wallets/useSendTokens.ts

@@ -0,0 +1,163 @@
+import { AudioWei } from '@audius/fixed-decimal'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { useQueryContext } from '~/api/tan-query/utils'
+import { Name, SolanaWalletAddress } from '~/models'
+import { getErrorMessage } from '~/utils'
+
+import { getUserCoinQueryKey } from '../coins/useUserCoin'
+import { useWalletAddresses } from '../users/account/useWalletAddresses'
+
+import { useTokenBalance } from './useTokenBalance'
+
+export type SendTokensParams = {
+ recipientWallet: SolanaWalletAddress
+ amount: AudioWei
+}
+
+export type SendTokensResult = {
+ signature: string
+ success: boolean
+}
+
+/**
+ * Hook for sending tokens on Solana blockchain.
+ * This hook handles only Solana transfers, not ETH transfers.
+ *
+ * @returns Mutation object with sendTokens function and status
+ */
+export const useSendTokens = ({ mint }: { mint: string }) => {
+ const queryClient = useQueryClient()
+ const { audiusBackend, audiusSdk, reportToSentry, analytics, env } =
+ useQueryContext()
+ const { data: walletAddresses } = useWalletAddresses()
+
+ const { data: tokenBalance } = useTokenBalance({ mint })
+
+ return useMutation({
+ mutationFn: async ({
+ recipientWallet,
+ amount
+ }: SendTokensParams): Promise<SendTokensResult> => {
+ try {
+ // For now, we only support wAUDIO transfers
+ // This can be extended to support other tokens in the future
+ if (mint !== env.WAUDIO_MINT_ADDRESS) {
+ throw new Error(`Token mint ${mint} is not supported for sending`)
+ }
+
+ const currentUser = walletAddresses?.currentUser
+ if (!currentUser) {
+ throw new Error('Failed to retrieve current user wallet address')
+ }
+
+ const sdk = await audiusSdk()
+
+ if (!tokenBalance?.balance || tokenBalance.balance.value < amount) {
+ throw new Error('Insufficient balance to send tokens')
+ }
+
+ await audiusBackend.sendWAudioTokens({
+ address: recipientWallet,
+ amount,
+ ethAddress: currentUser,
+ sdk
+ })
+
+ return {
+ signature: 'success', // The backend doesn't return a signature, so we use a placeholder
+ success: true
+ }
+ } catch (error) {
+ console.error('Error sending tokens:', error)
+
+ const errorMessage = getErrorMessage(error)
+
+ if (errorMessage === 'Missing social proof') {
+ throw new Error('Missing social proof')
+ }
+ if (
+ errorMessage ===
+ 'Recipient has no $AUDIO token account. Please install Phantom-Wallet to create one.'
+ ) {
+ throw new Error(errorMessage)
+ }
+
+ throw new Error('Something has gone wrong, please try again.')
+ }
+ },
+ onMutate: async ({ amount }) => {
+ const queryKey = getUserCoinQueryKey(mint)
+ await queryClient.cancelQueries({ queryKey })
+
+ const previousBalance = queryClient.getQueryData(queryKey)
+
+ if (previousBalance) {
+ queryClient.setQueryData(queryKey, (old: any) => {
+ if (!old) return old
+
+ return {
+ ...old,
+ balance: old.balance - amount,
+ accounts: old.accounts?.map((account: any) =>
+ account.isInAppWallet
+ ? { ...account, balance: account.balance - amount }
+ : account
+ )
+ }
+ })
+ }
+
+ return { previousBalance }
+ },
+ onSuccess: (_, { recipientWallet }) => {
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_SUCCESS,
+ from: currentUser,
+ recipient: recipientWallet
+ })
+ )
+ }
+ }
+ },
+ onError: (error, { amount, recipientWallet }, context) => {
+ if (context?.previousBalance) {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.setQueryData(queryKey, context.previousBalance)
+ }
+
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_FAILURE,
+ from: currentUser,
+ recipient: recipientWallet,
+ error: error instanceof Error ? error.message : 'Unknown error'
+ })
+ )
+ }
+ }
+
+ if (reportToSentry) {
+ reportToSentry({
+ error: error instanceof Error ? error : new Error(error as string),
+ name: 'Send Tokens',
+ additionalInfo: {
+ amount: amount.toString(),
+ mint
+ }
+ })
+ }
+ },
+ onSettled: () => {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.invalidateQueries({ queryKey })
+ }
+ })
+}

packages/common/src/utils/route.ts

@@ -450,3 +450,7 @@ export const searchPage = (searchOptions: SearchOptions) => {
  query: searchParams
  })
 }
+
+export const solanaExplorerAddress = (address: string) => {
+ return `https://explorer.solana.com/address/${address}`
+}

packages/harmony/src/components/hint/Hint.tsx

@@ -8,14 +8,21 @@ import { IconQuestionCircle } from '~harmony/icons'
 
 type HintProps = {
  icon?: IconComponent
+ noIcon?: boolean
  actions?: ReactNode
 } & PaperProps
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 export const Hint = (props: HintProps) => {
- const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
+ const {
+ icon: Icon = IconQuestionCircle,
+ children,
+ actions,
+ noIcon,
+ ...other
+ } = props
  return (
  <Paper
  role='alert'
@@ -29,7 +36,7 @@ export const Hint = (props: HintProps) => {
  {...other}
  >
  <Flex gap='l' alignItems='center'>
- <Icon size='l' color='default' />
+{noIcon ? null : <Icon size='l' color='default' />}
  <Text variant='body' color='default'>
  {children}
  </Text>

packages/web/src/components/modal/ResponsiveModal.tsx

@@ -13,6 +13,7 @@ import Drawer from 'components/drawer/Drawer'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 export type ResponsiveModalProps = {
+ className?: string
  // Core props
  isOpen: boolean
  onClose: () => void
@@ -68,7 +69,8 @@ const ResponsiveModal = ({
  showDismissButton,
  zIndex,
  renderAsDrawer,
- renderAsModal
+ renderAsModal,
+ className
 }: ResponsiveModalProps) => {
  const isMobile = useIsMobile()
  const shouldRenderAsDrawer = renderAsDrawer ?? (isMobile && !renderAsModal)
@@ -123,6 +125,7 @@ const ResponsiveModal = ({
  size={getModalSize(size)}
  zIndex={zIndex}
  dismissOnClickOutside={dismissOnClickOutside}
+ className={className}
  >
  {(title || Icon || subtitle) && (
  <ModalHeader showDismissButton={showDismissButton}>

packages/common/src/api/index.ts

@@ -174,6 +174,7 @@ export * from './tan-query/wallets/useWalletCollectibles'
 export * from './tan-query/wallets/useWalletOwner'
 export * from './tan-query/wallets/useUSDCBalance'
 export * from './tan-query/wallets/useTokenBalance'
+export * from './tan-query/wallets/useSendTokens'
 export * from './tan-query/jupiter/useSwapTokens'
 export * from './tan-query/jupiter/useTokenExchangeRate'
 export * from './tan-query/jupiter/utils'

packages/common/src/api/tan-query/queryKeys.ts

@@ -98,6 +98,7 @@ export const QUERY_KEYS = {
  tokenPrice: 'tokenPrice',
  usdcBalance: 'usdcBalance',
  fileSizes: 'fileSizes',
+ sendTokens: 'sendTokens',
  managedAccounts: 'managedAccounts',
  userManagers: 'userManagers',
  reactions: 'reactions',

packages/common/src/api/tan-query/wallets/useSendTokens.ts

@@ -0,0 +1,163 @@
+import { AudioWei } from '@audius/fixed-decimal'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { useQueryContext } from '~/api/tan-query/utils'
+import { Name, SolanaWalletAddress } from '~/models'
+import { getErrorMessage } from '~/utils'
+
+import { getUserCoinQueryKey } from '../coins/useUserCoin'
+import { useWalletAddresses } from '../users/account/useWalletAddresses'
+
+import { useTokenBalance } from './useTokenBalance'
+
+export type SendTokensParams = {
+ recipientWallet: SolanaWalletAddress
+ amount: AudioWei
+}
+
+export type SendTokensResult = {
+ signature: string
+ success: boolean
+}
+
+/**
+ * Hook for sending tokens on Solana blockchain.
+ * This hook handles only Solana transfers, not ETH transfers.
+ *
+ * @returns Mutation object with sendTokens function and status
+ */
+export const useSendTokens = ({ mint }: { mint: string }) => {
+ const queryClient = useQueryClient()
+ const { audiusBackend, audiusSdk, reportToSentry, analytics, env } =
+ useQueryContext()
+ const { data: walletAddresses } = useWalletAddresses()
+
+ const { data: tokenBalance } = useTokenBalance({ mint })
+
+ return useMutation({
+ mutationFn: async ({
+ recipientWallet,
+ amount
+ }: SendTokensParams): Promise<SendTokensResult> => {
+ try {
+ // For now, we only support wAUDIO transfers
+ // This can be extended to support other tokens in the future
+ if (mint !== env.WAUDIO_MINT_ADDRESS) {
+ throw new Error(`Token mint ${mint} is not supported for sending`)
+ }
+
+ const currentUser = walletAddresses?.currentUser
+ if (!currentUser) {
+ throw new Error('Failed to retrieve current user wallet address')
+ }
+
+ const sdk = await audiusSdk()
+
+ if (!tokenBalance?.balance || tokenBalance.balance.value < amount) {
+ throw new Error('Insufficient balance to send tokens')
+ }
+
+ await audiusBackend.sendWAudioTokens({
+ address: recipientWallet,
+ amount,
+ ethAddress: currentUser,
+ sdk
+ })
+
+ return {
+ signature: 'success', // The backend doesn't return a signature, so we use a placeholder
+ success: true
+ }
+ } catch (error) {
+ console.error('Error sending tokens:', error)
+
+ const errorMessage = getErrorMessage(error)
+
+ if (errorMessage === 'Missing social proof') {
+ throw new Error('Missing social proof')
+ }
+ if (
+ errorMessage ===
+ 'Recipient has no $AUDIO token account. Please install Phantom-Wallet to create one.'
+ ) {
+ throw new Error(errorMessage)
+ }
+
+ throw new Error('Something has gone wrong, please try again.')
+ }
+ },
+ onMutate: async ({ amount }) => {
+ const queryKey = getUserCoinQueryKey(mint)
+ await queryClient.cancelQueries({ queryKey })
+
+ const previousBalance = queryClient.getQueryData(queryKey)
+
+ if (previousBalance) {
+ queryClient.setQueryData(queryKey, (old: any) => {
+ if (!old) return old
+
+ return {
+ ...old,
+ balance: old.balance - amount,
+ accounts: old.accounts?.map((account: any) =>
+ account.isInAppWallet
+ ? { ...account, balance: account.balance - amount }
+ : account
+ )
+ }
+ })
+ }
+
+ return { previousBalance }
+ },
+ onSuccess: (_, { recipientWallet }) => {
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_SUCCESS,
+ from: currentUser,
+ recipient: recipientWallet
+ })
+ )
+ }
+ }
+ },
+ onError: (error, { amount, recipientWallet }, context) => {
+ if (context?.previousBalance) {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.setQueryData(queryKey, context.previousBalance)
+ }
+
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_FAILURE,
+ from: currentUser,
+ recipient: recipientWallet,
+ error: error instanceof Error ? error.message : 'Unknown error'
+ })
+ )
+ }
+ }
+
+ if (reportToSentry) {
+ reportToSentry({
+ error: error instanceof Error ? error : new Error(error as string),
+ name: 'Send Tokens',
+ additionalInfo: {
+ amount: amount.toString(),
+ mint
+ }
+ })
+ }
+ },
+ onSettled: () => {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.invalidateQueries({ queryKey })
+ }
+ })
+}

packages/common/src/utils/route.ts

@@ -450,3 +450,7 @@ export const searchPage = (searchOptions: SearchOptions) => {
  query: searchParams
  })
 }
+
+export const solanaExplorerAddress = (address: string) => {
+ return `https://explorer.solana.com/address/${address}`
+}

packages/harmony/src/components/hint/Hint.tsx

@@ -8,14 +8,21 @@ import { IconQuestionCircle } from '~harmony/icons'
 
 type HintProps = {
  icon?: IconComponent
+ noIcon?: boolean
  actions?: ReactNode
 } & PaperProps
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 export const Hint = (props: HintProps) => {
- const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
+ const {
+ icon: Icon = IconQuestionCircle,
+ children,
+ actions,
+ noIcon,
+ ...other
+ } = props
  return (
  <Paper
  role='alert'
@@ -29,7 +36,7 @@ export const Hint = (props: HintProps) => {
  {...other}
  >
  <Flex gap='l' alignItems='center'>
- <Icon size='l' color='default' />
+{noIcon ? null : <Icon size='l' color='default' />}
  <Text variant='body' color='default'>
  {children}
  </Text>

packages/web/src/components/modal/ResponsiveModal.tsx

@@ -13,6 +13,7 @@ import Drawer from 'components/drawer/Drawer'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 export type ResponsiveModalProps = {
+ className?: string
  // Core props
  isOpen: boolean
  onClose: () => void
@@ -68,7 +69,8 @@ const ResponsiveModal = ({
  showDismissButton,
  zIndex,
  renderAsDrawer,
- renderAsModal
+ renderAsModal,
+ className
 }: ResponsiveModalProps) => {
  const isMobile = useIsMobile()
  const shouldRenderAsDrawer = renderAsDrawer ?? (isMobile && !renderAsModal)
@@ -123,6 +125,7 @@ const ResponsiveModal = ({
  size={getModalSize(size)}
  zIndex={zIndex}
  dismissOnClickOutside={dismissOnClickOutside}
+ className={className}
  >
  {(title || Icon || subtitle) && (
  <ModalHeader showDismissButton={showDismissButton}>

packages/common/src/api/index.ts

@@ -174,6 +174,7 @@ export * from './tan-query/wallets/useWalletCollectibles'
 export * from './tan-query/wallets/useWalletOwner'
 export * from './tan-query/wallets/useUSDCBalance'
 export * from './tan-query/wallets/useTokenBalance'
+export * from './tan-query/wallets/useSendTokens'
 export * from './tan-query/jupiter/useSwapTokens'
 export * from './tan-query/jupiter/useTokenExchangeRate'
 export * from './tan-query/jupiter/utils'

packages/common/src/api/tan-query/queryKeys.ts

@@ -98,6 +98,7 @@ export const QUERY_KEYS = {
  tokenPrice: 'tokenPrice',
  usdcBalance: 'usdcBalance',
  fileSizes: 'fileSizes',
+ sendTokens: 'sendTokens',
  managedAccounts: 'managedAccounts',
  userManagers: 'userManagers',
  reactions: 'reactions',

packages/common/src/api/tan-query/wallets/useSendTokens.ts

@@ -0,0 +1,163 @@
+import { AudioWei } from '@audius/fixed-decimal'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { useQueryContext } from '~/api/tan-query/utils'
+import { Name, SolanaWalletAddress } from '~/models'
+import { getErrorMessage } from '~/utils'
+
+import { getUserCoinQueryKey } from '../coins/useUserCoin'
+import { useWalletAddresses } from '../users/account/useWalletAddresses'
+
+import { useTokenBalance } from './useTokenBalance'
+
+export type SendTokensParams = {
+ recipientWallet: SolanaWalletAddress
+ amount: AudioWei
+}
+
+export type SendTokensResult = {
+ signature: string
+ success: boolean
+}
+
+/**
+ * Hook for sending tokens on Solana blockchain.
+ * This hook handles only Solana transfers, not ETH transfers.
+ *
+ * @returns Mutation object with sendTokens function and status
+ */
+export const useSendTokens = ({ mint }: { mint: string }) => {
+ const queryClient = useQueryClient()
+ const { audiusBackend, audiusSdk, reportToSentry, analytics, env } =
+ useQueryContext()
+ const { data: walletAddresses } = useWalletAddresses()
+
+ const { data: tokenBalance } = useTokenBalance({ mint })
+
+ return useMutation({
+ mutationFn: async ({
+ recipientWallet,
+ amount
+ }: SendTokensParams): Promise<SendTokensResult> => {
+ try {
+ // For now, we only support wAUDIO transfers
+ // This can be extended to support other tokens in the future
+ if (mint !== env.WAUDIO_MINT_ADDRESS) {
+ throw new Error(`Token mint ${mint} is not supported for sending`)
+ }
+
+ const currentUser = walletAddresses?.currentUser
+ if (!currentUser) {
+ throw new Error('Failed to retrieve current user wallet address')
+ }
+
+ const sdk = await audiusSdk()
+
+ if (!tokenBalance?.balance || tokenBalance.balance.value < amount) {
+ throw new Error('Insufficient balance to send tokens')
+ }
+
+ await audiusBackend.sendWAudioTokens({
+ address: recipientWallet,
+ amount,
+ ethAddress: currentUser,
+ sdk
+ })
+
+ return {
+ signature: 'success', // The backend doesn't return a signature, so we use a placeholder
+ success: true
+ }
+ } catch (error) {
+ console.error('Error sending tokens:', error)
+
+ const errorMessage = getErrorMessage(error)
+
+ if (errorMessage === 'Missing social proof') {
+ throw new Error('Missing social proof')
+ }
+ if (
+ errorMessage ===
+ 'Recipient has no $AUDIO token account. Please install Phantom-Wallet to create one.'
+ ) {
+ throw new Error(errorMessage)
+ }
+
+ throw new Error('Something has gone wrong, please try again.')
+ }
+ },
+ onMutate: async ({ amount }) => {
+ const queryKey = getUserCoinQueryKey(mint)
+ await queryClient.cancelQueries({ queryKey })
+
+ const previousBalance = queryClient.getQueryData(queryKey)
+
+ if (previousBalance) {
+ queryClient.setQueryData(queryKey, (old: any) => {
+ if (!old) return old
+
+ return {
+ ...old,
+ balance: old.balance - amount,
+ accounts: old.accounts?.map((account: any) =>
+ account.isInAppWallet
+ ? { ...account, balance: account.balance - amount }
+ : account
+ )
+ }
+ })
+ }
+
+ return { previousBalance }
+ },
+ onSuccess: (_, { recipientWallet }) => {
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_SUCCESS,
+ from: currentUser,
+ recipient: recipientWallet
+ })
+ )
+ }
+ }
+ },
+ onError: (error, { amount, recipientWallet }, context) => {
+ if (context?.previousBalance) {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.setQueryData(queryKey, context.previousBalance)
+ }
+
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_FAILURE,
+ from: currentUser,
+ recipient: recipientWallet,
+ error: error instanceof Error ? error.message : 'Unknown error'
+ })
+ )
+ }
+ }
+
+ if (reportToSentry) {
+ reportToSentry({
+ error: error instanceof Error ? error : new Error(error as string),
+ name: 'Send Tokens',
+ additionalInfo: {
+ amount: amount.toString(),
+ mint
+ }
+ })
+ }
+ },
+ onSettled: () => {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.invalidateQueries({ queryKey })
+ }
+ })
+}

packages/common/src/utils/route.ts

@@ -450,3 +450,7 @@ export const searchPage = (searchOptions: SearchOptions) => {
  query: searchParams
  })
 }
+
+export const solanaExplorerAddress = (address: string) => {
+ return `https://explorer.solana.com/address/${address}`
+}

packages/harmony/src/components/hint/Hint.tsx

@@ -8,14 +8,21 @@ import { IconQuestionCircle } from '~harmony/icons'
 
 type HintProps = {
  icon?: IconComponent
+ noIcon?: boolean
  actions?: ReactNode
 } & PaperProps
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 export const Hint = (props: HintProps) => {
- const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
+ const {
+ icon: Icon = IconQuestionCircle,
+ children,
+ actions,
+ noIcon,
+ ...other
+ } = props
  return (
  <Paper
  role='alert'
@@ -29,7 +36,7 @@ export const Hint = (props: HintProps) => {
  {...other}
  >
  <Flex gap='l' alignItems='center'>
- <Icon size='l' color='default' />
+{noIcon ? null : <Icon size='l' color='default' />}
  <Text variant='body' color='default'>
  {children}
  </Text>

packages/web/src/components/modal/ResponsiveModal.tsx

@@ -13,6 +13,7 @@ import Drawer from 'components/drawer/Drawer'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 export type ResponsiveModalProps = {
+ className?: string
  // Core props
  isOpen: boolean
  onClose: () => void
@@ -68,7 +69,8 @@ const ResponsiveModal = ({
  showDismissButton,
  zIndex,
  renderAsDrawer,
- renderAsModal
+ renderAsModal,
+ className
 }: ResponsiveModalProps) => {
  const isMobile = useIsMobile()
  const shouldRenderAsDrawer = renderAsDrawer ?? (isMobile && !renderAsModal)
@@ -123,6 +125,7 @@ const ResponsiveModal = ({
  size={getModalSize(size)}
  zIndex={zIndex}
  dismissOnClickOutside={dismissOnClickOutside}
+ className={className}
  >
  {(title || Icon || subtitle) && (
  <ModalHeader showDismissButton={showDismissButton}>

packages/common/src/api/index.ts

@@ -174,6 +174,7 @@ export * from './tan-query/wallets/useWalletCollectibles'
 export * from './tan-query/wallets/useWalletOwner'
 export * from './tan-query/wallets/useUSDCBalance'
 export * from './tan-query/wallets/useTokenBalance'
+export * from './tan-query/wallets/useSendTokens'
 export * from './tan-query/jupiter/useSwapTokens'
 export * from './tan-query/jupiter/useTokenExchangeRate'
 export * from './tan-query/jupiter/utils'

packages/common/src/api/tan-query/queryKeys.ts

@@ -98,6 +98,7 @@ export const QUERY_KEYS = {
  tokenPrice: 'tokenPrice',
  usdcBalance: 'usdcBalance',
  fileSizes: 'fileSizes',
+ sendTokens: 'sendTokens',
  managedAccounts: 'managedAccounts',
  userManagers: 'userManagers',
  reactions: 'reactions',

packages/common/src/api/tan-query/wallets/useSendTokens.ts

@@ -0,0 +1,163 @@
+import { AudioWei } from '@audius/fixed-decimal'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { useQueryContext } from '~/api/tan-query/utils'
+import { Name, SolanaWalletAddress } from '~/models'
+import { getErrorMessage } from '~/utils'
+
+import { getUserCoinQueryKey } from '../coins/useUserCoin'
+import { useWalletAddresses } from '../users/account/useWalletAddresses'
+
+import { useTokenBalance } from './useTokenBalance'
+
+export type SendTokensParams = {
+ recipientWallet: SolanaWalletAddress
+ amount: AudioWei
+}
+
+export type SendTokensResult = {
+ signature: string
+ success: boolean
+}
+
+/**
+ * Hook for sending tokens on Solana blockchain.
+ * This hook handles only Solana transfers, not ETH transfers.
+ *
+ * @returns Mutation object with sendTokens function and status
+ */
+export const useSendTokens = ({ mint }: { mint: string }) => {
+ const queryClient = useQueryClient()
+ const { audiusBackend, audiusSdk, reportToSentry, analytics, env } =
+ useQueryContext()
+ const { data: walletAddresses } = useWalletAddresses()
+
+ const { data: tokenBalance } = useTokenBalance({ mint })
+
+ return useMutation({
+ mutationFn: async ({
+ recipientWallet,
+ amount
+ }: SendTokensParams): Promise<SendTokensResult> => {
+ try {
+ // For now, we only support wAUDIO transfers
+ // This can be extended to support other tokens in the future
+ if (mint !== env.WAUDIO_MINT_ADDRESS) {
+ throw new Error(`Token mint ${mint} is not supported for sending`)
+ }
+
+ const currentUser = walletAddresses?.currentUser
+ if (!currentUser) {
+ throw new Error('Failed to retrieve current user wallet address')
+ }
+
+ const sdk = await audiusSdk()
+
+ if (!tokenBalance?.balance || tokenBalance.balance.value < amount) {
+ throw new Error('Insufficient balance to send tokens')
+ }
+
+ await audiusBackend.sendWAudioTokens({
+ address: recipientWallet,
+ amount,
+ ethAddress: currentUser,
+ sdk
+ })
+
+ return {
+ signature: 'success', // The backend doesn't return a signature, so we use a placeholder
+ success: true
+ }
+ } catch (error) {
+ console.error('Error sending tokens:', error)
+
+ const errorMessage = getErrorMessage(error)
+
+ if (errorMessage === 'Missing social proof') {
+ throw new Error('Missing social proof')
+ }
+ if (
+ errorMessage ===
+ 'Recipient has no $AUDIO token account. Please install Phantom-Wallet to create one.'
+ ) {
+ throw new Error(errorMessage)
+ }
+
+ throw new Error('Something has gone wrong, please try again.')
+ }
+ },
+ onMutate: async ({ amount }) => {
+ const queryKey = getUserCoinQueryKey(mint)
+ await queryClient.cancelQueries({ queryKey })
+
+ const previousBalance = queryClient.getQueryData(queryKey)
+
+ if (previousBalance) {
+ queryClient.setQueryData(queryKey, (old: any) => {
+ if (!old) return old
+
+ return {
+ ...old,
+ balance: old.balance - amount,
+ accounts: old.accounts?.map((account: any) =>
+ account.isInAppWallet
+ ? { ...account, balance: account.balance - amount }
+ : account
+ )
+ }
+ })
+ }
+
+ return { previousBalance }
+ },
+ onSuccess: (_, { recipientWallet }) => {
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_SUCCESS,
+ from: currentUser,
+ recipient: recipientWallet
+ })
+ )
+ }
+ }
+ },
+ onError: (error, { amount, recipientWallet }, context) => {
+ if (context?.previousBalance) {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.setQueryData(queryKey, context.previousBalance)
+ }
+
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_FAILURE,
+ from: currentUser,
+ recipient: recipientWallet,
+ error: error instanceof Error ? error.message : 'Unknown error'
+ })
+ )
+ }
+ }
+
+ if (reportToSentry) {
+ reportToSentry({
+ error: error instanceof Error ? error : new Error(error as string),
+ name: 'Send Tokens',
+ additionalInfo: {
+ amount: amount.toString(),
+ mint
+ }
+ })
+ }
+ },
+ onSettled: () => {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.invalidateQueries({ queryKey })
+ }
+ })
+}

packages/common/src/utils/route.ts

@@ -450,3 +450,7 @@ export const searchPage = (searchOptions: SearchOptions) => {
  query: searchParams
  })
 }
+
+export const solanaExplorerAddress = (address: string) => {
+ return `https://explorer.solana.com/address/${address}`
+}

packages/harmony/src/components/hint/Hint.tsx

@@ -8,14 +8,21 @@ import { IconQuestionCircle } from '~harmony/icons'
 
 type HintProps = {
  icon?: IconComponent
+ noIcon?: boolean
  actions?: ReactNode
 } & PaperProps
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 export const Hint = (props: HintProps) => {
- const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
+ const {
+ icon: Icon = IconQuestionCircle,
+ children,
+ actions,
+ noIcon,
+ ...other
+ } = props
  return (
  <Paper
  role='alert'
@@ -29,7 +36,7 @@ export const Hint = (props: HintProps) => {
  {...other}
  >
  <Flex gap='l' alignItems='center'>
- <Icon size='l' color='default' />
+{noIcon ? null : <Icon size='l' color='default' />}
  <Text variant='body' color='default'>
  {children}
  </Text>

packages/web/src/components/modal/ResponsiveModal.tsx

@@ -13,6 +13,7 @@ import Drawer from 'components/drawer/Drawer'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 export type ResponsiveModalProps = {
+ className?: string
  // Core props
  isOpen: boolean
  onClose: () => void
@@ -68,7 +69,8 @@ const ResponsiveModal = ({
  showDismissButton,
  zIndex,
  renderAsDrawer,
- renderAsModal
+ renderAsModal,
+ className
 }: ResponsiveModalProps) => {
  const isMobile = useIsMobile()
  const shouldRenderAsDrawer = renderAsDrawer ?? (isMobile && !renderAsModal)
@@ -123,6 +125,7 @@ const ResponsiveModal = ({
  size={getModalSize(size)}
  zIndex={zIndex}
  dismissOnClickOutside={dismissOnClickOutside}
+ className={className}
  >
  {(title || Icon || subtitle) && (
  <ModalHeader showDismissButton={showDismissButton}>

packages/common/src/api/index.ts

@@ -174,6 +174,7 @@ export * from './tan-query/wallets/useWalletCollectibles'
 export * from './tan-query/wallets/useWalletOwner'
 export * from './tan-query/wallets/useUSDCBalance'
 export * from './tan-query/wallets/useTokenBalance'
+export * from './tan-query/wallets/useSendTokens'
 export * from './tan-query/jupiter/useSwapTokens'
 export * from './tan-query/jupiter/useTokenExchangeRate'
 export * from './tan-query/jupiter/utils'

packages/common/src/api/tan-query/queryKeys.ts

@@ -98,6 +98,7 @@ export const QUERY_KEYS = {
  tokenPrice: 'tokenPrice',
  usdcBalance: 'usdcBalance',
  fileSizes: 'fileSizes',
+ sendTokens: 'sendTokens',
  managedAccounts: 'managedAccounts',
  userManagers: 'userManagers',
  reactions: 'reactions',

packages/common/src/api/tan-query/wallets/useSendTokens.ts

@@ -0,0 +1,163 @@
+import { AudioWei } from '@audius/fixed-decimal'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { useQueryContext } from '~/api/tan-query/utils'
+import { Name, SolanaWalletAddress } from '~/models'
+import { getErrorMessage } from '~/utils'
+
+import { getUserCoinQueryKey } from '../coins/useUserCoin'
+import { useWalletAddresses } from '../users/account/useWalletAddresses'
+
+import { useTokenBalance } from './useTokenBalance'
+
+export type SendTokensParams = {
+ recipientWallet: SolanaWalletAddress
+ amount: AudioWei
+}
+
+export type SendTokensResult = {
+ signature: string
+ success: boolean
+}
+
+/**
+ * Hook for sending tokens on Solana blockchain.
+ * This hook handles only Solana transfers, not ETH transfers.
+ *
+ * @returns Mutation object with sendTokens function and status
+ */
+export const useSendTokens = ({ mint }: { mint: string }) => {
+ const queryClient = useQueryClient()
+ const { audiusBackend, audiusSdk, reportToSentry, analytics, env } =
+ useQueryContext()
+ const { data: walletAddresses } = useWalletAddresses()
+
+ const { data: tokenBalance } = useTokenBalance({ mint })
+
+ return useMutation({
+ mutationFn: async ({
+ recipientWallet,
+ amount
+ }: SendTokensParams): Promise<SendTokensResult> => {
+ try {
+ // For now, we only support wAUDIO transfers
+ // This can be extended to support other tokens in the future
+ if (mint !== env.WAUDIO_MINT_ADDRESS) {
+ throw new Error(`Token mint ${mint} is not supported for sending`)
+ }
+
+ const currentUser = walletAddresses?.currentUser
+ if (!currentUser) {
+ throw new Error('Failed to retrieve current user wallet address')
+ }
+
+ const sdk = await audiusSdk()
+
+ if (!tokenBalance?.balance || tokenBalance.balance.value < amount) {
+ throw new Error('Insufficient balance to send tokens')
+ }
+
+ await audiusBackend.sendWAudioTokens({
+ address: recipientWallet,
+ amount,
+ ethAddress: currentUser,
+ sdk
+ })
+
+ return {
+ signature: 'success', // The backend doesn't return a signature, so we use a placeholder
+ success: true
+ }
+ } catch (error) {
+ console.error('Error sending tokens:', error)
+
+ const errorMessage = getErrorMessage(error)
+
+ if (errorMessage === 'Missing social proof') {
+ throw new Error('Missing social proof')
+ }
+ if (
+ errorMessage ===
+ 'Recipient has no $AUDIO token account. Please install Phantom-Wallet to create one.'
+ ) {
+ throw new Error(errorMessage)
+ }
+
+ throw new Error('Something has gone wrong, please try again.')
+ }
+ },
+ onMutate: async ({ amount }) => {
+ const queryKey = getUserCoinQueryKey(mint)
+ await queryClient.cancelQueries({ queryKey })
+
+ const previousBalance = queryClient.getQueryData(queryKey)
+
+ if (previousBalance) {
+ queryClient.setQueryData(queryKey, (old: any) => {
+ if (!old) return old
+
+ return {
+ ...old,
+ balance: old.balance - amount,
+ accounts: old.accounts?.map((account: any) =>
+ account.isInAppWallet
+ ? { ...account, balance: account.balance - amount }
+ : account
+ )
+ }
+ })
+ }
+
+ return { previousBalance }
+ },
+ onSuccess: (_, { recipientWallet }) => {
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_SUCCESS,
+ from: currentUser,
+ recipient: recipientWallet
+ })
+ )
+ }
+ }
+ },
+ onError: (error, { amount, recipientWallet }, context) => {
+ if (context?.previousBalance) {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.setQueryData(queryKey, context.previousBalance)
+ }
+
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_FAILURE,
+ from: currentUser,
+ recipient: recipientWallet,
+ error: error instanceof Error ? error.message : 'Unknown error'
+ })
+ )
+ }
+ }
+
+ if (reportToSentry) {
+ reportToSentry({
+ error: error instanceof Error ? error : new Error(error as string),
+ name: 'Send Tokens',
+ additionalInfo: {
+ amount: amount.toString(),
+ mint
+ }
+ })
+ }
+ },
+ onSettled: () => {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.invalidateQueries({ queryKey })
+ }
+ })
+}

packages/common/src/utils/route.ts

@@ -450,3 +450,7 @@ export const searchPage = (searchOptions: SearchOptions) => {
  query: searchParams
  })
 }
+
+export const solanaExplorerAddress = (address: string) => {
+ return `https://explorer.solana.com/address/${address}`
+}

packages/harmony/src/components/hint/Hint.tsx

@@ -8,14 +8,21 @@ import { IconQuestionCircle } from '~harmony/icons'
 
 type HintProps = {
  icon?: IconComponent
+ noIcon?: boolean
  actions?: ReactNode
 } & PaperProps
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 export const Hint = (props: HintProps) => {
- const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
+ const {
+ icon: Icon = IconQuestionCircle,
+ children,
+ actions,
+ noIcon,
+ ...other
+ } = props
  return (
  <Paper
  role='alert'
@@ -29,7 +36,7 @@ export const Hint = (props: HintProps) => {
  {...other}
  >
  <Flex gap='l' alignItems='center'>
- <Icon size='l' color='default' />
+{noIcon ? null : <Icon size='l' color='default' />}
  <Text variant='body' color='default'>
  {children}
  </Text>

packages/web/src/components/modal/ResponsiveModal.tsx

@@ -13,6 +13,7 @@ import Drawer from 'components/drawer/Drawer'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 export type ResponsiveModalProps = {
+ className?: string
  // Core props
  isOpen: boolean
  onClose: () => void
@@ -68,7 +69,8 @@ const ResponsiveModal = ({
  showDismissButton,
  zIndex,
  renderAsDrawer,
- renderAsModal
+ renderAsModal,
+ className
 }: ResponsiveModalProps) => {
  const isMobile = useIsMobile()
  const shouldRenderAsDrawer = renderAsDrawer ?? (isMobile && !renderAsModal)
@@ -123,6 +125,7 @@ const ResponsiveModal = ({
  size={getModalSize(size)}
  zIndex={zIndex}
  dismissOnClickOutside={dismissOnClickOutside}
+ className={className}
  >
  {(title || Icon || subtitle) && (
  <ModalHeader showDismissButton={showDismissButton}>

packages/common/src/api/index.ts

@@ -174,6 +174,7 @@ export * from './tan-query/wallets/useWalletCollectibles'
 export * from './tan-query/wallets/useWalletOwner'
 export * from './tan-query/wallets/useUSDCBalance'
 export * from './tan-query/wallets/useTokenBalance'
+export * from './tan-query/wallets/useSendTokens'
 export * from './tan-query/jupiter/useSwapTokens'
 export * from './tan-query/jupiter/useTokenExchangeRate'
 export * from './tan-query/jupiter/utils'

packages/common/src/api/tan-query/queryKeys.ts

@@ -98,6 +98,7 @@ export const QUERY_KEYS = {
  tokenPrice: 'tokenPrice',
  usdcBalance: 'usdcBalance',
  fileSizes: 'fileSizes',
+ sendTokens: 'sendTokens',
  managedAccounts: 'managedAccounts',
  userManagers: 'userManagers',
  reactions: 'reactions',

packages/common/src/api/tan-query/wallets/useSendTokens.ts

@@ -0,0 +1,163 @@
+import { AudioWei } from '@audius/fixed-decimal'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { useQueryContext } from '~/api/tan-query/utils'
+import { Name, SolanaWalletAddress } from '~/models'
+import { getErrorMessage } from '~/utils'
+
+import { getUserCoinQueryKey } from '../coins/useUserCoin'
+import { useWalletAddresses } from '../users/account/useWalletAddresses'
+
+import { useTokenBalance } from './useTokenBalance'
+
+export type SendTokensParams = {
+ recipientWallet: SolanaWalletAddress
+ amount: AudioWei
+}
+
+export type SendTokensResult = {
+ signature: string
+ success: boolean
+}
+
+/**
+ * Hook for sending tokens on Solana blockchain.
+ * This hook handles only Solana transfers, not ETH transfers.
+ *
+ * @returns Mutation object with sendTokens function and status
+ */
+export const useSendTokens = ({ mint }: { mint: string }) => {
+ const queryClient = useQueryClient()
+ const { audiusBackend, audiusSdk, reportToSentry, analytics, env } =
+ useQueryContext()
+ const { data: walletAddresses } = useWalletAddresses()
+
+ const { data: tokenBalance } = useTokenBalance({ mint })
+
+ return useMutation({
+ mutationFn: async ({
+ recipientWallet,
+ amount
+ }: SendTokensParams): Promise<SendTokensResult> => {
+ try {
+ // For now, we only support wAUDIO transfers
+ // This can be extended to support other tokens in the future
+ if (mint !== env.WAUDIO_MINT_ADDRESS) {
+ throw new Error(`Token mint ${mint} is not supported for sending`)
+ }
+
+ const currentUser = walletAddresses?.currentUser
+ if (!currentUser) {
+ throw new Error('Failed to retrieve current user wallet address')
+ }
+
+ const sdk = await audiusSdk()
+
+ if (!tokenBalance?.balance || tokenBalance.balance.value < amount) {
+ throw new Error('Insufficient balance to send tokens')
+ }
+
+ await audiusBackend.sendWAudioTokens({
+ address: recipientWallet,
+ amount,
+ ethAddress: currentUser,
+ sdk
+ })
+
+ return {
+ signature: 'success', // The backend doesn't return a signature, so we use a placeholder
+ success: true
+ }
+ } catch (error) {
+ console.error('Error sending tokens:', error)
+
+ const errorMessage = getErrorMessage(error)
+
+ if (errorMessage === 'Missing social proof') {
+ throw new Error('Missing social proof')
+ }
+ if (
+ errorMessage ===
+ 'Recipient has no $AUDIO token account. Please install Phantom-Wallet to create one.'
+ ) {
+ throw new Error(errorMessage)
+ }
+
+ throw new Error('Something has gone wrong, please try again.')
+ }
+ },
+ onMutate: async ({ amount }) => {
+ const queryKey = getUserCoinQueryKey(mint)
+ await queryClient.cancelQueries({ queryKey })
+
+ const previousBalance = queryClient.getQueryData(queryKey)
+
+ if (previousBalance) {
+ queryClient.setQueryData(queryKey, (old: any) => {
+ if (!old) return old
+
+ return {
+ ...old,
+ balance: old.balance - amount,
+ accounts: old.accounts?.map((account: any) =>
+ account.isInAppWallet
+ ? { ...account, balance: account.balance - amount }
+ : account
+ )
+ }
+ })
+ }
+
+ return { previousBalance }
+ },
+ onSuccess: (_, { recipientWallet }) => {
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_SUCCESS,
+ from: currentUser,
+ recipient: recipientWallet
+ })
+ )
+ }
+ }
+ },
+ onError: (error, { amount, recipientWallet }, context) => {
+ if (context?.previousBalance) {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.setQueryData(queryKey, context.previousBalance)
+ }
+
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_FAILURE,
+ from: currentUser,
+ recipient: recipientWallet,
+ error: error instanceof Error ? error.message : 'Unknown error'
+ })
+ )
+ }
+ }
+
+ if (reportToSentry) {
+ reportToSentry({
+ error: error instanceof Error ? error : new Error(error as string),
+ name: 'Send Tokens',
+ additionalInfo: {
+ amount: amount.toString(),
+ mint
+ }
+ })
+ }
+ },
+ onSettled: () => {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.invalidateQueries({ queryKey })
+ }
+ })
+}

packages/common/src/utils/route.ts

@@ -450,3 +450,7 @@ export const searchPage = (searchOptions: SearchOptions) => {
  query: searchParams
  })
 }
+
+export const solanaExplorerAddress = (address: string) => {
+ return `https://explorer.solana.com/address/${address}`
+}

packages/harmony/src/components/hint/Hint.tsx

@@ -8,14 +8,21 @@ import { IconQuestionCircle } from '~harmony/icons'
 
 type HintProps = {
  icon?: IconComponent
+ noIcon?: boolean
  actions?: ReactNode
 } & PaperProps
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 export const Hint = (props: HintProps) => {
- const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
+ const {
+ icon: Icon = IconQuestionCircle,
+ children,
+ actions,
+ noIcon,
+ ...other
+ } = props
  return (
  <Paper
  role='alert'
@@ -29,7 +36,7 @@ export const Hint = (props: HintProps) => {
  {...other}
  >
  <Flex gap='l' alignItems='center'>
- <Icon size='l' color='default' />
+{noIcon ? null : <Icon size='l' color='default' />}
  <Text variant='body' color='default'>
  {children}
  </Text>

packages/web/src/components/modal/ResponsiveModal.tsx

@@ -13,6 +13,7 @@ import Drawer from 'components/drawer/Drawer'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 export type ResponsiveModalProps = {
+ className?: string
  // Core props
  isOpen: boolean
  onClose: () => void
@@ -68,7 +69,8 @@ const ResponsiveModal = ({
  showDismissButton,
  zIndex,
  renderAsDrawer,
- renderAsModal
+ renderAsModal,
+ className
 }: ResponsiveModalProps) => {
  const isMobile = useIsMobile()
  const shouldRenderAsDrawer = renderAsDrawer ?? (isMobile && !renderAsModal)
@@ -123,6 +125,7 @@ const ResponsiveModal = ({
  size={getModalSize(size)}
  zIndex={zIndex}
  dismissOnClickOutside={dismissOnClickOutside}
+ className={className}
  >
  {(title || Icon || subtitle) && (
  <ModalHeader showDismissButton={showDismissButton}>

packages/common/src/api/index.ts

@@ -174,6 +174,7 @@ export * from './tan-query/wallets/useWalletCollectibles'
 export * from './tan-query/wallets/useWalletOwner'
 export * from './tan-query/wallets/useUSDCBalance'
 export * from './tan-query/wallets/useTokenBalance'
+export * from './tan-query/wallets/useSendTokens'
 export * from './tan-query/jupiter/useSwapTokens'
 export * from './tan-query/jupiter/useTokenExchangeRate'
 export * from './tan-query/jupiter/utils'

packages/common/src/api/tan-query/queryKeys.ts

@@ -98,6 +98,7 @@ export const QUERY_KEYS = {
  tokenPrice: 'tokenPrice',
  usdcBalance: 'usdcBalance',
  fileSizes: 'fileSizes',
+ sendTokens: 'sendTokens',
  managedAccounts: 'managedAccounts',
  userManagers: 'userManagers',
  reactions: 'reactions',

packages/common/src/api/tan-query/wallets/useSendTokens.ts

@@ -0,0 +1,163 @@
+import { AudioWei } from '@audius/fixed-decimal'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { useQueryContext } from '~/api/tan-query/utils'
+import { Name, SolanaWalletAddress } from '~/models'
+import { getErrorMessage } from '~/utils'
+
+import { getUserCoinQueryKey } from '../coins/useUserCoin'
+import { useWalletAddresses } from '../users/account/useWalletAddresses'
+
+import { useTokenBalance } from './useTokenBalance'
+
+export type SendTokensParams = {
+ recipientWallet: SolanaWalletAddress
+ amount: AudioWei
+}
+
+export type SendTokensResult = {
+ signature: string
+ success: boolean
+}
+
+/**
+ * Hook for sending tokens on Solana blockchain.
+ * This hook handles only Solana transfers, not ETH transfers.
+ *
+ * @returns Mutation object with sendTokens function and status
+ */
+export const useSendTokens = ({ mint }: { mint: string }) => {
+ const queryClient = useQueryClient()
+ const { audiusBackend, audiusSdk, reportToSentry, analytics, env } =
+ useQueryContext()
+ const { data: walletAddresses } = useWalletAddresses()
+
+ const { data: tokenBalance } = useTokenBalance({ mint })
+
+ return useMutation({
+ mutationFn: async ({
+ recipientWallet,
+ amount
+ }: SendTokensParams): Promise<SendTokensResult> => {
+ try {
+ // For now, we only support wAUDIO transfers
+ // This can be extended to support other tokens in the future
+ if (mint !== env.WAUDIO_MINT_ADDRESS) {
+ throw new Error(`Token mint ${mint} is not supported for sending`)
+ }
+
+ const currentUser = walletAddresses?.currentUser
+ if (!currentUser) {
+ throw new Error('Failed to retrieve current user wallet address')
+ }
+
+ const sdk = await audiusSdk()
+
+ if (!tokenBalance?.balance || tokenBalance.balance.value < amount) {
+ throw new Error('Insufficient balance to send tokens')
+ }
+
+ await audiusBackend.sendWAudioTokens({
+ address: recipientWallet,
+ amount,
+ ethAddress: currentUser,
+ sdk
+ })
+
+ return {
+ signature: 'success', // The backend doesn't return a signature, so we use a placeholder
+ success: true
+ }
+ } catch (error) {
+ console.error('Error sending tokens:', error)
+
+ const errorMessage = getErrorMessage(error)
+
+ if (errorMessage === 'Missing social proof') {
+ throw new Error('Missing social proof')
+ }
+ if (
+ errorMessage ===
+ 'Recipient has no $AUDIO token account. Please install Phantom-Wallet to create one.'
+ ) {
+ throw new Error(errorMessage)
+ }
+
+ throw new Error('Something has gone wrong, please try again.')
+ }
+ },
+ onMutate: async ({ amount }) => {
+ const queryKey = getUserCoinQueryKey(mint)
+ await queryClient.cancelQueries({ queryKey })
+
+ const previousBalance = queryClient.getQueryData(queryKey)
+
+ if (previousBalance) {
+ queryClient.setQueryData(queryKey, (old: any) => {
+ if (!old) return old
+
+ return {
+ ...old,
+ balance: old.balance - amount,
+ accounts: old.accounts?.map((account: any) =>
+ account.isInAppWallet
+ ? { ...account, balance: account.balance - amount }
+ : account
+ )
+ }
+ })
+ }
+
+ return { previousBalance }
+ },
+ onSuccess: (_, { recipientWallet }) => {
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_SUCCESS,
+ from: currentUser,
+ recipient: recipientWallet
+ })
+ )
+ }
+ }
+ },
+ onError: (error, { amount, recipientWallet }, context) => {
+ if (context?.previousBalance) {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.setQueryData(queryKey, context.previousBalance)
+ }
+
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_FAILURE,
+ from: currentUser,
+ recipient: recipientWallet,
+ error: error instanceof Error ? error.message : 'Unknown error'
+ })
+ )
+ }
+ }
+
+ if (reportToSentry) {
+ reportToSentry({
+ error: error instanceof Error ? error : new Error(error as string),
+ name: 'Send Tokens',
+ additionalInfo: {
+ amount: amount.toString(),
+ mint
+ }
+ })
+ }
+ },
+ onSettled: () => {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.invalidateQueries({ queryKey })
+ }
+ })
+}

packages/common/src/utils/route.ts

@@ -450,3 +450,7 @@ export const searchPage = (searchOptions: SearchOptions) => {
  query: searchParams
  })
 }
+
+export const solanaExplorerAddress = (address: string) => {
+ return `https://explorer.solana.com/address/${address}`
+}

packages/harmony/src/components/hint/Hint.tsx

@@ -8,14 +8,21 @@ import { IconQuestionCircle } from '~harmony/icons'
 
 type HintProps = {
  icon?: IconComponent
+ noIcon?: boolean
  actions?: ReactNode
 } & PaperProps
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 export const Hint = (props: HintProps) => {
- const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
+ const {
+ icon: Icon = IconQuestionCircle,
+ children,
+ actions,
+ noIcon,
+ ...other
+ } = props
  return (
  <Paper
  role='alert'
@@ -29,7 +36,7 @@ export const Hint = (props: HintProps) => {
  {...other}
  >
  <Flex gap='l' alignItems='center'>
- <Icon size='l' color='default' />
+{noIcon ? null : <Icon size='l' color='default' />}
  <Text variant='body' color='default'>
  {children}
  </Text>

packages/web/src/components/modal/ResponsiveModal.tsx

@@ -13,6 +13,7 @@ import Drawer from 'components/drawer/Drawer'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 export type ResponsiveModalProps = {
+ className?: string
  // Core props
  isOpen: boolean
  onClose: () => void
@@ -68,7 +69,8 @@ const ResponsiveModal = ({
  showDismissButton,
  zIndex,
  renderAsDrawer,
- renderAsModal
+ renderAsModal,
+ className
 }: ResponsiveModalProps) => {
  const isMobile = useIsMobile()
  const shouldRenderAsDrawer = renderAsDrawer ?? (isMobile && !renderAsModal)
@@ -123,6 +125,7 @@ const ResponsiveModal = ({
  size={getModalSize(size)}
  zIndex={zIndex}
  dismissOnClickOutside={dismissOnClickOutside}
+ className={className}
  >
  {(title || Icon || subtitle) && (
  <ModalHeader showDismissButton={showDismissButton}>

packages/common/src/api/index.ts

@@ -174,6 +174,7 @@ export * from './tan-query/wallets/useWalletCollectibles'
 export * from './tan-query/wallets/useWalletOwner'
 export * from './tan-query/wallets/useUSDCBalance'
 export * from './tan-query/wallets/useTokenBalance'
+export * from './tan-query/wallets/useSendTokens'
 export * from './tan-query/jupiter/useSwapTokens'
 export * from './tan-query/jupiter/useTokenExchangeRate'
 export * from './tan-query/jupiter/utils'

packages/common/src/api/tan-query/queryKeys.ts

@@ -98,6 +98,7 @@ export const QUERY_KEYS = {
  tokenPrice: 'tokenPrice',
  usdcBalance: 'usdcBalance',
  fileSizes: 'fileSizes',
+ sendTokens: 'sendTokens',
  managedAccounts: 'managedAccounts',
  userManagers: 'userManagers',
  reactions: 'reactions',

packages/common/src/api/tan-query/wallets/useSendTokens.ts

@@ -0,0 +1,163 @@
+import { AudioWei } from '@audius/fixed-decimal'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { useQueryContext } from '~/api/tan-query/utils'
+import { Name, SolanaWalletAddress } from '~/models'
+import { getErrorMessage } from '~/utils'
+
+import { getUserCoinQueryKey } from '../coins/useUserCoin'
+import { useWalletAddresses } from '../users/account/useWalletAddresses'
+
+import { useTokenBalance } from './useTokenBalance'
+
+export type SendTokensParams = {
+ recipientWallet: SolanaWalletAddress
+ amount: AudioWei
+}
+
+export type SendTokensResult = {
+ signature: string
+ success: boolean
+}
+
+/**
+ * Hook for sending tokens on Solana blockchain.
+ * This hook handles only Solana transfers, not ETH transfers.
+ *
+ * @returns Mutation object with sendTokens function and status
+ */
+export const useSendTokens = ({ mint }: { mint: string }) => {
+ const queryClient = useQueryClient()
+ const { audiusBackend, audiusSdk, reportToSentry, analytics, env } =
+ useQueryContext()
+ const { data: walletAddresses } = useWalletAddresses()
+
+ const { data: tokenBalance } = useTokenBalance({ mint })
+
+ return useMutation({
+ mutationFn: async ({
+ recipientWallet,
+ amount
+ }: SendTokensParams): Promise<SendTokensResult> => {
+ try {
+ // For now, we only support wAUDIO transfers
+ // This can be extended to support other tokens in the future
+ if (mint !== env.WAUDIO_MINT_ADDRESS) {
+ throw new Error(`Token mint ${mint} is not supported for sending`)
+ }
+
+ const currentUser = walletAddresses?.currentUser
+ if (!currentUser) {
+ throw new Error('Failed to retrieve current user wallet address')
+ }
+
+ const sdk = await audiusSdk()
+
+ if (!tokenBalance?.balance || tokenBalance.balance.value < amount) {
+ throw new Error('Insufficient balance to send tokens')
+ }
+
+ await audiusBackend.sendWAudioTokens({
+ address: recipientWallet,
+ amount,
+ ethAddress: currentUser,
+ sdk
+ })
+
+ return {
+ signature: 'success', // The backend doesn't return a signature, so we use a placeholder
+ success: true
+ }
+ } catch (error) {
+ console.error('Error sending tokens:', error)
+
+ const errorMessage = getErrorMessage(error)
+
+ if (errorMessage === 'Missing social proof') {
+ throw new Error('Missing social proof')
+ }
+ if (
+ errorMessage ===
+ 'Recipient has no $AUDIO token account. Please install Phantom-Wallet to create one.'
+ ) {
+ throw new Error(errorMessage)
+ }
+
+ throw new Error('Something has gone wrong, please try again.')
+ }
+ },
+ onMutate: async ({ amount }) => {
+ const queryKey = getUserCoinQueryKey(mint)
+ await queryClient.cancelQueries({ queryKey })
+
+ const previousBalance = queryClient.getQueryData(queryKey)
+
+ if (previousBalance) {
+ queryClient.setQueryData(queryKey, (old: any) => {
+ if (!old) return old
+
+ return {
+ ...old,
+ balance: old.balance - amount,
+ accounts: old.accounts?.map((account: any) =>
+ account.isInAppWallet
+ ? { ...account, balance: account.balance - amount }
+ : account
+ )
+ }
+ })
+ }
+
+ return { previousBalance }
+ },
+ onSuccess: (_, { recipientWallet }) => {
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_SUCCESS,
+ from: currentUser,
+ recipient: recipientWallet
+ })
+ )
+ }
+ }
+ },
+ onError: (error, { amount, recipientWallet }, context) => {
+ if (context?.previousBalance) {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.setQueryData(queryKey, context.previousBalance)
+ }
+
+ if (analytics) {
+ const currentUser = walletAddresses?.currentUser
+ if (currentUser) {
+ analytics.track(
+ analytics.make({
+ eventName: Name.SEND_AUDIO_FAILURE,
+ from: currentUser,
+ recipient: recipientWallet,
+ error: error instanceof Error ? error.message : 'Unknown error'
+ })
+ )
+ }
+ }
+
+ if (reportToSentry) {
+ reportToSentry({
+ error: error instanceof Error ? error : new Error(error as string),
+ name: 'Send Tokens',
+ additionalInfo: {
+ amount: amount.toString(),
+ mint
+ }
+ })
+ }
+ },
+ onSettled: () => {
+ const queryKey = getUserCoinQueryKey(mint)
+ queryClient.invalidateQueries({ queryKey })
+ }
+ })
+}

packages/common/src/utils/route.ts

@@ -450,3 +450,7 @@ export const searchPage = (searchOptions: SearchOptions) => {
  query: searchParams
  })
 }
+
+export const solanaExplorerAddress = (address: string) => {
+ return `https://explorer.solana.com/address/${address}`
+}

packages/harmony/src/components/hint/Hint.tsx

@@ -8,14 +8,21 @@ import { IconQuestionCircle } from '~harmony/icons'
 
 type HintProps = {
  icon?: IconComponent
+ noIcon?: boolean
  actions?: ReactNode
 } & PaperProps
 
 /*
  * A way of informing the user of important details in line in a prominent way.
  */
 export const Hint = (props: HintProps) => {
- const { icon: Icon = IconQuestionCircle, children, actions, ...other } = props
+ const {
+ icon: Icon = IconQuestionCircle,
+ children,
+ actions,
+ noIcon,
+ ...other
+ } = props
  return (
  <Paper
  role='alert'
@@ -29,7 +36,7 @@ export const Hint = (props: HintProps) => {
  {...other}
  >
  <Flex gap='l' alignItems='center'>
- <Icon size='l' color='default' />
+{noIcon ? null : <Icon size='l' color='default' />}
  <Text variant='body' color='default'>
  {children}
  </Text>

packages/web/src/components/modal/ResponsiveModal.tsx

@@ -13,6 +13,7 @@ import Drawer from 'components/drawer/Drawer'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 export type ResponsiveModalProps = {
+ className?: string
  // Core props
  isOpen: boolean
  onClose: () => void
@@ -68,7 +69,8 @@ const ResponsiveModal = ({
  showDismissButton,
  zIndex,
  renderAsDrawer,
- renderAsModal
+ renderAsModal,
+ className
 }: ResponsiveModalProps) => {
  const isMobile = useIsMobile()
  const shouldRenderAsDrawer = renderAsDrawer ?? (isMobile && !renderAsModal)
@@ -123,6 +125,7 @@ const ResponsiveModal = ({
  size={getModalSize(size)}
  zIndex={zIndex}
  dismissOnClickOutside={dismissOnClickOutside}
+ className={className}
  >
  {(title || Icon || subtitle) && (
  <ModalHeader showDismissButton={showDismissButton}>