From 026aead0bb216c2706d041c835acd93814350a34 Mon Sep 17 00:00:00 2001 From: Raymond Jacobson Date: Thu, 16 Nov 2023 08:54:46 -0800 Subject: [PATCH] [PAY-2154] Implement add funds modal (#6714) --- .../store/ui/modals/add-funds-modal/index.ts | 16 +++ packages/common/src/store/ui/modals/index.ts | 1 + .../common/src/store/ui/modals/parentSlice.ts | 3 +- .../common/src/store/ui/modals/reducers.ts | 2 + packages/common/src/store/ui/modals/types.ts | 3 + .../harmony/src/assets/icons/CreditCard.svg | 5 + .../button/BaseButton/BaseButton.tsx | 3 +- .../button/FilterButton/FilterButton.tsx | 2 +- packages/harmony/src/icons/utilityIcons.ts | 1 + .../pay-and-earn-screen/PayAndEarnScreen.tsx | 2 +- .../add-funds-modal/AddFundsModal.module.css | 13 ++ .../add-funds-modal/AddFundsModal.tsx | 80 +++++++++++ .../components/add-funds/AddFunds.module.css | 15 ++ .../web/src/components/add-funds/AddFunds.tsx | 128 ++++++++++++++++++ .../summary-table/SummaryTable.module.css | 4 + .../components/summary-table/SummaryTable.tsx | 46 ++++++- .../USDCManualTransferModal.module.css | 41 ------ .../USDCManualTransferModal.tsx | 97 +------------ .../USDCManualTransfer.module.css | 40 ++++++ .../USDCManualTransfer.tsx | 97 +++++++++++++ .../dashboard-page/DashboardPage.module.css | 2 +- packages/web/src/pages/modals/Modals.tsx | 4 +- .../pay-and-earn-page/PayAndEarnPage.tsx | 6 +- .../pay-and-earn-page/components/USDCCard.tsx | 8 +- packages/web/src/utils/zIndex.ts | 1 + 25 files changed, 467 insertions(+), 153 deletions(-) create mode 100644 packages/common/src/store/ui/modals/add-funds-modal/index.ts create mode 100644 packages/harmony/src/assets/icons/CreditCard.svg create mode 100644 packages/web/src/components/add-funds-modal/AddFundsModal.module.css create mode 100644 packages/web/src/components/add-funds-modal/AddFundsModal.tsx create mode 100644 packages/web/src/components/add-funds/AddFunds.module.css create mode 100644 packages/web/src/components/add-funds/AddFunds.tsx create mode 100644 packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.module.css create mode 100644 packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.tsx diff --git a/packages/common/src/store/ui/modals/add-funds-modal/index.ts b/packages/common/src/store/ui/modals/add-funds-modal/index.ts new file mode 100644 index 00000000000..614fa91c9ae --- /dev/null +++ b/packages/common/src/store/ui/modals/add-funds-modal/index.ts @@ -0,0 +1,16 @@ +import { createModal } from '../createModal' + +export type AddFundsModalState = { + isOpen: boolean +} + +const AddFundsModal = createModal({ + reducerPath: 'AddFundsModal', + initialState: { + isOpen: false + }, + sliceSelector: (state) => state.ui.modals +}) + +export const { hook: useAddFundsModal, reducer: addFundsModalReducer } = + AddFundsModal diff --git a/packages/common/src/store/ui/modals/index.ts b/packages/common/src/store/ui/modals/index.ts index 5aa901fc59f..ade088a22b5 100644 --- a/packages/common/src/store/ui/modals/index.ts +++ b/packages/common/src/store/ui/modals/index.ts @@ -14,3 +14,4 @@ export * from './edit-playlist-modal' export * from './edit-track-modal' export * from './premium-content-purchase-modal' export * from './usdc-manual-transfer-modal' +export * from './add-funds-modal' diff --git a/packages/common/src/store/ui/modals/parentSlice.ts b/packages/common/src/store/ui/modals/parentSlice.ts index ac2c92228a7..a42a8bdfacb 100644 --- a/packages/common/src/store/ui/modals/parentSlice.ts +++ b/packages/common/src/store/ui/modals/parentSlice.ts @@ -54,7 +54,8 @@ export const initialState: BasicModalsState = { WithdrawUSDCModal: { isOpen: false }, USDCPurchaseDetailsModal: { isOpen: false }, USDCTransactionDetailsModal: { isOpen: false }, - USDCManualTransferModal: { isOpen: false } + USDCManualTransferModal: { isOpen: false }, + AddFundsModal: { isOpen: false } } const slice = createSlice({ diff --git a/packages/common/src/store/ui/modals/reducers.ts b/packages/common/src/store/ui/modals/reducers.ts index 7ff58df32bc..8be28eed506 100644 --- a/packages/common/src/store/ui/modals/reducers.ts +++ b/packages/common/src/store/ui/modals/reducers.ts @@ -1,5 +1,6 @@ import { Action, combineReducers, Reducer } from '@reduxjs/toolkit' +import { addFundsModalReducer } from './add-funds-modal' import { createChatModalReducer } from './create-chat-modal' import { BaseModalState } from './createModal' import { editPlaylistModalReducer } from './edit-playlist-modal' @@ -37,6 +38,7 @@ const combinedReducers = combineReducers({ WithdrawUSDCModal: withdrawUSDCModalReducer, USDCPurchaseDetailsModal: usdcPurchaseDetailsModalReducer, USDCManualTransferModal: usdcManualTransferModalReducer, + AddFundsModal: addFundsModalReducer, USDCTransactionDetailsModal: usdcTransactionDetailsModalReducer, PremiumContentPurchaseModal: premiumContentPurchaseModalReducer }) diff --git a/packages/common/src/store/ui/modals/types.ts b/packages/common/src/store/ui/modals/types.ts index a4651dbf806..90a32c7c72a 100644 --- a/packages/common/src/store/ui/modals/types.ts +++ b/packages/common/src/store/ui/modals/types.ts @@ -1,5 +1,6 @@ import { ModalSource } from 'models/Analytics' +import { AddFundsModalState } from './add-funds-modal' import { CreateChatModalState } from './create-chat-modal' import { BaseModalState } from './createModal' import { EditPlaylistModalState } from './edit-playlist-modal' @@ -60,6 +61,7 @@ export type Modals = | 'USDCPurchaseDetailsModal' | 'USDCTransactionDetailsModal' | 'USDCManualTransferModal' + | 'AddFundsModal' export type BasicModalsState = { [modal in Modals]: BaseModalState @@ -75,6 +77,7 @@ export type StatefulModalsState = { USDCPurchaseDetailsModal: USDCPurchaseDetailsModalState USDCTransactionDetailsModal: USDCTransactionDetailsModalState USDCManualTransferModal: USDCManualTransferModalState + AddFundsModal: AddFundsModalState PremiumContentPurchaseModal: PremiumContentPurchaseModalState } diff --git a/packages/harmony/src/assets/icons/CreditCard.svg b/packages/harmony/src/assets/icons/CreditCard.svg new file mode 100644 index 00000000000..249d24f9031 --- /dev/null +++ b/packages/harmony/src/assets/icons/CreditCard.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/harmony/src/components/button/BaseButton/BaseButton.tsx b/packages/harmony/src/components/button/BaseButton/BaseButton.tsx index 05e60c19db7..4696199c7bf 100644 --- a/packages/harmony/src/components/button/BaseButton/BaseButton.tsx +++ b/packages/harmony/src/components/button/BaseButton/BaseButton.tsx @@ -62,8 +62,7 @@ export const BaseButton = forwardRef( whiteSpace: 'nowrap', transition: ` transform ${motion.hover}, - border-color ${motion.hover}, - background-color ${motion.hover} + border-color ${motion.hover} `, ...(fullWidth && { diff --git a/packages/harmony/src/components/button/FilterButton/FilterButton.tsx b/packages/harmony/src/components/button/FilterButton/FilterButton.tsx index b31ca50b7bb..bf267b0b23e 100644 --- a/packages/harmony/src/components/button/FilterButton/FilterButton.tsx +++ b/packages/harmony/src/components/button/FilterButton/FilterButton.tsx @@ -86,7 +86,7 @@ export const FilterButton = forwardRef( : color.text.default, gap: spacing.xs, fontSize: typography.size.s, - fontWeight: typography.weight.medium, + fontWeight: typography.weight.demiBold, lineHeight: typography.lineHeight.s, '&:hover': { diff --git a/packages/harmony/src/icons/utilityIcons.ts b/packages/harmony/src/icons/utilityIcons.ts index f11db64dae1..ebaaa0e69be 100644 --- a/packages/harmony/src/icons/utilityIcons.ts +++ b/packages/harmony/src/icons/utilityIcons.ts @@ -131,3 +131,4 @@ export { default as IconHeadphones } from '../assets/icons/Headphones.svg' export { default as IconValidationCheck } from '../assets/icons/ValidationCheck.svg' export { default as IconValidationX } from '../assets/icons/ValidationX.svg' export { default as IconSoundwave } from '../assets/icons/Soundwave.svg' +export { default as IconCreditCard } from '../assets/icons/CreditCard.svg' diff --git a/packages/mobile/src/screens/pay-and-earn-screen/PayAndEarnScreen.tsx b/packages/mobile/src/screens/pay-and-earn-screen/PayAndEarnScreen.tsx index a9c2e175f23..32fdf516a62 100644 --- a/packages/mobile/src/screens/pay-and-earn-screen/PayAndEarnScreen.tsx +++ b/packages/mobile/src/screens/pay-and-earn-screen/PayAndEarnScreen.tsx @@ -35,7 +35,7 @@ const messages = { addFunds: 'Add Funds' } -const useStyles = makeStyles(({ spacing, palette, typography }) => ({ +const useStyles = makeStyles(({ spacing, palette }) => ({ root: { paddingVertical: spacing(8), paddingHorizontal: spacing(3) diff --git a/packages/web/src/components/add-funds-modal/AddFundsModal.module.css b/packages/web/src/components/add-funds-modal/AddFundsModal.module.css new file mode 100644 index 00000000000..f7f49757bc2 --- /dev/null +++ b/packages/web/src/components/add-funds-modal/AddFundsModal.module.css @@ -0,0 +1,13 @@ +.modal { + width: 720px; +} + +.modalHeader { + text-align: center; +} + +.modalHeader.mobile { + margin: 0; + padding: 0; + border: none; +} diff --git a/packages/web/src/components/add-funds-modal/AddFundsModal.tsx b/packages/web/src/components/add-funds-modal/AddFundsModal.tsx new file mode 100644 index 00000000000..0d91eda2893 --- /dev/null +++ b/packages/web/src/components/add-funds-modal/AddFundsModal.tsx @@ -0,0 +1,80 @@ +import { useCallback, useState } from 'react' + +import { useAddFundsModal } from '@audius/common' +import { ModalContent, ModalHeader } from '@audius/stems' +import cn from 'classnames' + +import { AddFunds, Method } from 'components/add-funds/AddFunds' +import { Text } from 'components/typography' +import { USDCManualTransfer } from 'components/usdc-manual-transfer/USDCManualTransfer' +import ModalDrawer from 'pages/audio-rewards-page/components/modals/ModalDrawer' +import { isMobile } from 'utils/clientUtil' +import zIndex from 'utils/zIndex' + +import styles from './AddFundsModal.module.css' + +const messages = { + addFunds: 'Add Funds', + cryptoTransfer: 'Crypto Transfer' +} + +type Page = 'add-funds' | 'crypto-transfer' + +export const AddFundsModal = () => { + const { isOpen, onClose } = useAddFundsModal() + const mobile = isMobile() + + const [page, setPage] = useState('add-funds') + + const handleClose = useCallback(() => { + onClose() + }, [onClose]) + + const handleClosed = useCallback(() => { + setPage('add-funds') + }, [setPage]) + + const handleContinue = useCallback( + (method: Method) => { + setPage('crypto-transfer') + }, + [setPage] + ) + + return ( + + + + {page === 'add-funds' ? messages.addFunds : messages.cryptoTransfer} + + + + {page === 'add-funds' ? ( + + ) : ( + + )} + + + ) +} diff --git a/packages/web/src/components/add-funds/AddFunds.module.css b/packages/web/src/components/add-funds/AddFunds.module.css new file mode 100644 index 00000000000..d986e1d93cf --- /dev/null +++ b/packages/web/src/components/add-funds/AddFunds.module.css @@ -0,0 +1,15 @@ +.root { + display: flex; + flex-direction: column; + gap: var(--unit-6); +} + +.buttonContainer { + display: flex; + flex-direction: row; + gap: var(--unit-2); +} + +.buttonContainer.mobile { + flex-direction: column; +} diff --git a/packages/web/src/components/add-funds/AddFunds.tsx b/packages/web/src/components/add-funds/AddFunds.tsx new file mode 100644 index 00000000000..169e547f101 --- /dev/null +++ b/packages/web/src/components/add-funds/AddFunds.tsx @@ -0,0 +1,128 @@ +import { ChangeEvent, useCallback, useState } from 'react' + +import { + BNUSDC, + decimalIntegerToHumanReadable, + formatUSDCWeiToFloorCentsNumber, + useCreateUserbankIfNeeded, + useUSDCBalance +} from '@audius/common' +import { + Box, + Button, + ButtonType, + Flex, + Text, + IconLogoCircleUSDC, + IconCreditCard, + IconTransaction, + FilterButton, + FilterButtonType +} from '@audius/harmony' +import { BN } from 'bn.js' +import cn from 'classnames' + +import { SummaryTable, SummaryTableItem } from 'components/summary-table' +import { track } from 'services/analytics' +import { audiusBackendInstance } from 'services/audius-backend/audius-backend-instance' +import { isMobile } from 'utils/clientUtil' + +import styles from './AddFunds.module.css' + +const messages = { + usdcBalance: 'USDC Balance', + paymentMethod: 'Payment Method', + withCard: 'Add funds with Card', + withCrypto: 'Add funds with crypto transfer', + continue: 'Continue' +} + +export type Method = 'card' | 'crypto' + +export const AddFunds = ({ + onContinue +}: { + onContinue: (method: Method) => void +}) => { + useCreateUserbankIfNeeded({ + recordAnalytics: track, + audiusBackendInstance, + mint: 'usdc' + }) + const [selectedMethod, setSelectedMethod] = useState('card') + const mobile = isMobile() + const { data: balance } = useUSDCBalance() + const balanceNumber = formatUSDCWeiToFloorCentsNumber( + (balance ?? new BN(0)) as BNUSDC + ) + const balanceFormatted = decimalIntegerToHumanReadable(balanceNumber) + + const items: SummaryTableItem[] = [ + { + id: 'card', + label: messages.withCard, + icon: IconCreditCard, + value: ( + + ) + }, + { + id: 'crypto', + label: messages.withCrypto, + icon: IconTransaction + } + ] + + const handleChangeOption = useCallback( + (e: ChangeEvent) => { + setSelectedMethod(e.target.value as Method) + }, + [setSelectedMethod] + ) + + return ( +
+
+ + + + + + + + {messages.usdcBalance} + + + + + {`$${balanceFormatted}`} + + + + + + +
+
+ ) +} diff --git a/packages/web/src/components/summary-table/SummaryTable.module.css b/packages/web/src/components/summary-table/SummaryTable.module.css index 45b312bb0ea..b61e5f4231c 100644 --- a/packages/web/src/components/summary-table/SummaryTable.module.css +++ b/packages/web/src/components/summary-table/SummaryTable.module.css @@ -29,3 +29,7 @@ .rowGrayBackground { background: var(--background-surface-1); } + +.radioGroup { + width: 100%; +} diff --git a/packages/web/src/components/summary-table/SummaryTable.tsx b/packages/web/src/components/summary-table/SummaryTable.tsx index 4c01c5a1ece..23a52033e98 100644 --- a/packages/web/src/components/summary-table/SummaryTable.tsx +++ b/packages/web/src/components/summary-table/SummaryTable.tsx @@ -1,6 +1,7 @@ -import { ReactNode } from 'react' +import { ChangeEvent, ReactNode } from 'react' -import { ColorValue } from '@audius/stems' +import { Flex, IconComponent } from '@audius/harmony' +import { ColorValue, RadioButton, RadioButtonGroup } from '@audius/stems' import cn from 'classnames' import { Text } from 'components/typography' @@ -10,7 +11,8 @@ import styles from './SummaryTable.module.css' export type SummaryTableItem = { id: string label: ReactNode - value: ReactNode + icon?: IconComponent + value?: ReactNode } export type SummaryTableProps = { @@ -20,6 +22,9 @@ export type SummaryTableProps = { secondaryTitle?: ReactNode summaryLabelColor?: ColorValue summaryValueColor?: ColorValue + withRadioOptions?: boolean + selectedRadioOption?: string + onRadioChange?: (e: ChangeEvent) => void } export const SummaryTable = ({ @@ -28,9 +33,12 @@ export const SummaryTable = ({ title, secondaryTitle, summaryLabelColor, - summaryValueColor = 'secondary' + summaryValueColor = 'secondary', + withRadioOptions, + selectedRadioOption, + onRadioChange }: SummaryTableProps) => { - return ( + const body = (
@@ -40,9 +48,20 @@ export const SummaryTable = ({ {secondaryTitle}
- {items.map(({ id, label, value }) => ( + {items.map(({ id, label, icon: Icon, value }) => (
- {label} + + {withRadioOptions ? : null} + {Icon ? ( + + ) : null} + {label} + {value}
))} @@ -58,4 +77,17 @@ export const SummaryTable = ({ ) : null}
) + + return withRadioOptions && onRadioChange ? ( + + {body} + + ) : ( + body + ) } diff --git a/packages/web/src/components/usdc-manual-transfer-modal/USDCManualTransferModal.module.css b/packages/web/src/components/usdc-manual-transfer-modal/USDCManualTransferModal.module.css index cd0fb11da1f..f7f49757bc2 100644 --- a/packages/web/src/components/usdc-manual-transfer-modal/USDCManualTransferModal.module.css +++ b/packages/web/src/components/usdc-manual-transfer-modal/USDCManualTransferModal.module.css @@ -11,44 +11,3 @@ padding: 0; border: none; } - -.content { - display: flex; - flex-direction: column; - gap: var(--unit-6); -} - -.buttonContainer { - display: flex; - flex-direction: row; - gap: var(--unit-2); -} - -.buttonContainer.mobile { - flex-direction: column; -} - -.data { - display: flex; - flex-direction: column; - gap: var(--unit-6); -} - -.qr { - width: 160px; - height: 160px; - padding: 10px; - display: flex; - align-items: center; - justify-content: center; -} - -.columns { - display: flex; - gap: var(--unit-4); - align-items: center; -} - -.columns.mobile { - flex-direction: column; -} diff --git a/packages/web/src/components/usdc-manual-transfer-modal/USDCManualTransferModal.tsx b/packages/web/src/components/usdc-manual-transfer-modal/USDCManualTransferModal.tsx index 38f4c4d9802..923cb14cdb9 100644 --- a/packages/web/src/components/usdc-manual-transfer-modal/USDCManualTransferModal.tsx +++ b/packages/web/src/components/usdc-manual-transfer-modal/USDCManualTransferModal.tsx @@ -1,73 +1,25 @@ -import { useCallback, useContext } from 'react' +import { useCallback } from 'react' -import { - Name, - useUSDCManualTransferModal, - useCreateUserbankIfNeeded -} from '@audius/common' -import { Button, ButtonType } from '@audius/harmony' -import { IconError, LogoUSDC, ModalContent, ModalHeader } from '@audius/stems' +import { useUSDCManualTransferModal } from '@audius/common' +import { ModalContent, ModalHeader } from '@audius/stems' import cn from 'classnames' -import QRCode from 'react-qr-code' -import { useAsync } from 'react-use' -import { Icon } from 'components/Icon' -import { AddressTile } from 'components/address-tile' -import { ToastContext } from 'components/toast/ToastContext' import { Text } from 'components/typography' -import { Hint } from 'components/withdraw-usdc-modal/components/Hint' +import { USDCManualTransfer } from 'components/usdc-manual-transfer/USDCManualTransfer' import ModalDrawer from 'pages/audio-rewards-page/components/modals/ModalDrawer' -import { track, make } from 'services/analytics' -import { audiusBackendInstance } from 'services/audius-backend/audius-backend-instance' -import { getUSDCUserBank } from 'services/solana/solana' import { isMobile } from 'utils/clientUtil' -import { copyToClipboard } from 'utils/clipboardUtil' import zIndex from 'utils/zIndex' import styles from './USDCManualTransferModal.module.css' -const USDCLearnMore = - 'https://support.audius.co/help/Understanding-USDC-on-Audius' - const messages = { - title: 'Manual Crypto Transfer', - explainer1: - 'You can add funds manually by transferring USDC tokens to your Audius Wallet.', - explainer2: 'Use caution to avoid errors and lost funds.', - disclaimer: - 'You can only send Solana based (SPL) USDC tokens to this address.', - learnMore: 'Learn More', - copy: 'Copy Wallet Address', - goBack: 'Go Back', - copied: 'Copied to Clipboard!' + title: 'Crypto Transfer' } export const USDCManualTransferModal = () => { - useCreateUserbankIfNeeded({ - recordAnalytics: track, - audiusBackendInstance, - mint: 'usdc' - }) const { isOpen, onClose } = useUSDCManualTransferModal() - const { toast } = useContext(ToastContext) const mobile = isMobile() - const { value: USDCUserBank } = useAsync(async () => { - const USDCUserBankPubKey = await getUSDCUserBank() - return USDCUserBankPubKey?.toString() - }) - - const handleCopy = useCallback(() => { - copyToClipboard(USDCUserBank ?? '') - toast(messages.copied) - track( - make({ - eventName: Name.PURCHASE_CONTENT_USDC_USER_BANK_COPIED, - address: USDCUserBank ?? '' - }) - ) - }, [USDCUserBank, toast]) - const handleClose = useCallback(() => { onClose() }, [onClose]) @@ -99,44 +51,7 @@ export const USDCManualTransferModal = () => { -
- {messages.explainer1} - {messages.explainer2} -
-
- {USDCUserBank ? : null} -
-
- } /> - ( - - )} - linkText={messages.learnMore} - /> -
-
-
- - {mobile ? null : ( - - )} -
-
+ ) diff --git a/packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.module.css b/packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.module.css new file mode 100644 index 00000000000..9191c88d446 --- /dev/null +++ b/packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.module.css @@ -0,0 +1,40 @@ +.root { + display: flex; + flex-direction: column; + gap: var(--unit-6); +} + +.buttonContainer { + display: flex; + flex-direction: row; + gap: var(--unit-2); +} + +.buttonContainer.mobile { + flex-direction: column; +} + +.data { + display: flex; + flex-direction: column; + gap: var(--unit-6); +} + +.qr { + width: 160px; + height: 160px; + padding: 10px; + display: flex; + align-items: center; + justify-content: center; +} + +.columns { + display: flex; + gap: var(--unit-4); + align-items: center; +} + +.columns.mobile { + flex-direction: column; +} diff --git a/packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.tsx b/packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.tsx new file mode 100644 index 00000000000..46aaa2c3260 --- /dev/null +++ b/packages/web/src/components/usdc-manual-transfer/USDCManualTransfer.tsx @@ -0,0 +1,97 @@ +import { useCallback, useContext } from 'react' + +import { Name, useCreateUserbankIfNeeded } from '@audius/common' +import { Button, ButtonType } from '@audius/harmony' +import { IconError, LogoUSDC } from '@audius/stems' +import cn from 'classnames' +import QRCode from 'react-qr-code' +import { useAsync } from 'react-use' + +import { Icon } from 'components/Icon' +import { AddressTile } from 'components/address-tile' +import { ToastContext } from 'components/toast/ToastContext' +import { Text } from 'components/typography' +import { Hint } from 'components/withdraw-usdc-modal/components/Hint' +import { track, make } from 'services/analytics' +import { audiusBackendInstance } from 'services/audius-backend/audius-backend-instance' +import { getUSDCUserBank } from 'services/solana/solana' +import { isMobile } from 'utils/clientUtil' +import { copyToClipboard } from 'utils/clipboardUtil' + +import styles from './USDCManualTransfer.module.css' + +const USDCLearnMore = + 'https://support.audius.co/help/Understanding-USDC-on-Audius' + +const messages = { + explainer1: + 'You can add funds manually by transferring USDC tokens to your Audius Wallet.', + explainer2: 'Use caution to avoid errors and lost funds.', + disclaimer: + 'You can only send Solana based (SPL) USDC tokens to this address.', + learnMore: 'Learn More', + copy: 'Copy Wallet Address', + goBack: 'Go Back', + copied: 'Copied to Clipboard!' +} + +export const USDCManualTransfer = ({ onClose }: { onClose: () => void }) => { + useCreateUserbankIfNeeded({ + recordAnalytics: track, + audiusBackendInstance, + mint: 'usdc' + }) + const { toast } = useContext(ToastContext) + const mobile = isMobile() + + const { value: USDCUserBank } = useAsync(async () => { + const USDCUserBankPubKey = await getUSDCUserBank() + return USDCUserBankPubKey?.toString() + }) + + const handleCopy = useCallback(() => { + copyToClipboard(USDCUserBank ?? '') + toast(messages.copied) + track( + make({ + eventName: Name.PURCHASE_CONTENT_USDC_USER_BANK_COPIED, + address: USDCUserBank ?? '' + }) + ) + }, [USDCUserBank, toast]) + + return ( +
+ {messages.explainer1} + {messages.explainer2} +
+
+ {USDCUserBank ? : null} +
+
+ } /> + } + linkText={messages.learnMore} + /> +
+
+
+ + {mobile ? null : ( + + )} +
+
+ ) +} diff --git a/packages/web/src/pages/dashboard-page/DashboardPage.module.css b/packages/web/src/pages/dashboard-page/DashboardPage.module.css index a248ce08568..1ece095eae1 100644 --- a/packages/web/src/pages/dashboard-page/DashboardPage.module.css +++ b/packages/web/src/pages/dashboard-page/DashboardPage.module.css @@ -33,7 +33,7 @@ } .statTileContainer { - flex: 1 auto 120px; + flex: 1 1 120px; width: 100%; height: 72px; border-radius: 6px; diff --git a/packages/web/src/pages/modals/Modals.tsx b/packages/web/src/pages/modals/Modals.tsx index 2b1ceb9388f..ee6cdced427 100644 --- a/packages/web/src/pages/modals/Modals.tsx +++ b/packages/web/src/pages/modals/Modals.tsx @@ -3,6 +3,7 @@ import { ComponentType, lazy } from 'react' import { Client } from '@audius/common' import type { Modals as ModalTypes } from '@audius/common' +import { AddFundsModal } from 'components/add-funds-modal/AddFundsModal' import AddToPlaylistModal from 'components/add-to-playlist/desktop/AddToPlaylistModal' import { AiAttributionSettingsModal } from 'components/ai-attribution-settings-modal' import AppCTAModal from 'components/app-cta-modal/AppCTAModal' @@ -103,7 +104,8 @@ const commonModalsMap: { [Modal in ModalTypes]?: ComponentType } = { StripeOnRamp: StripeOnRampModal, USDCPurchaseDetailsModal, USDCTransactionDetailsModal, - USDCManualTransferModal + USDCManualTransferModal, + AddFundsModal } const commonModals = Object.entries(commonModalsMap) as [ diff --git a/packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.tsx b/packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.tsx index a84532d2172..72525753ba0 100644 --- a/packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.tsx +++ b/packages/web/src/pages/pay-and-earn-page/PayAndEarnPage.tsx @@ -1,6 +1,6 @@ import { useState } from 'react' -import { Status, useUSDCBalance } from '@audius/common' +import { useUSDCBalance } from '@audius/common' import { Button, ButtonSize, @@ -44,7 +44,7 @@ type TableMetadata = { export const PayAndEarnPage = () => { const [selectedTable, setSelectedTable] = useState(TableType.SALES) - const { data: balance, balanceStatus } = useUSDCBalance({ + const { data: balance } = useUSDCBalance({ isPolling: true, pollingInterval: 3000 }) @@ -107,7 +107,7 @@ export const PayAndEarnPage = () => { contentClassName={styles.pageContainer} header={header} > - {balance === null || balanceStatus === Status.LOADING ? ( + {balance === null ? ( ) : ( <> diff --git a/packages/web/src/pages/pay-and-earn-page/components/USDCCard.tsx b/packages/web/src/pages/pay-and-earn-page/components/USDCCard.tsx index 9791558997f..e9dc63e553c 100644 --- a/packages/web/src/pages/pay-and-earn-page/components/USDCCard.tsx +++ b/packages/web/src/pages/pay-and-earn-page/components/USDCCard.tsx @@ -6,8 +6,8 @@ import { WithdrawUSDCModalPages, formatCurrencyBalance, formatUSDCWeiToFloorCentsNumber, - useUSDCManualTransferModal, - useWithdrawUSDCModal + useWithdrawUSDCModal, + useAddFundsModal } from '@audius/common' import { Button, @@ -41,7 +41,7 @@ const messages = { export const USDCCard = ({ balance }: { balance: BNUSDC }) => { const { onOpen: openWithdrawUSDCModal } = useWithdrawUSDCModal() - const { onOpen: openUsdcManualTransferModal } = useUSDCManualTransferModal() + const { onOpen: openAddFundsModal } = useAddFundsModal() const balanceCents = formatUSDCWeiToFloorCentsNumber( (balance ?? new BN(0)) as BNUSDC @@ -65,7 +65,7 @@ export const USDCCard = ({ balance }: { balance: BNUSDC }) => { } const handleAddFunds = () => { - openUsdcManualTransferModal() + openAddFundsModal() track( make({ eventName: Name.BUY_USDC_ADD_FUNDS_MANUALLY diff --git a/packages/web/src/utils/zIndex.ts b/packages/web/src/utils/zIndex.ts index 4600cf611d6..3b3561f4b11 100644 --- a/packages/web/src/utils/zIndex.ts +++ b/packages/web/src/utils/zIndex.ts @@ -34,6 +34,7 @@ export enum zIndex { WEB3_WALLET_CONNECT_MODAL = 10002, MODAL_OVERFLOW_MENU_POPUP = 10002, USDC_MANUAL_TRANSFER_MODAL = 10002, + ADD_FUNDS_MODAL = 10002, ARTIST_POPOVER_POPUP = 20000, PLAY_BAR_POPUP_MENU = 20001, FEATURE_FLAG_OVERRIDE_MODAL = 30000,