Merge branch 'wallet-updates' into 'main'

Wallet UI Updates for User Clarity

See merge request soapbox-pub/soapbox!3372
merge-requests/3372/merge
Mary Kate 2025-05-09 19:37:08 +00:00
commit 051d53ca9d
4 zmienionych plików z 107 dodań i 4 usunięć

Wyświetl plik

@ -7,7 +7,6 @@ import QRCode from 'qrcode.react';
import { useCallback, useEffect, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import CopyableInput from 'soapbox/components/copyable-input.tsx';
import Button from 'soapbox/components/ui/button.tsx';
import Divider from 'soapbox/components/ui/divider.tsx';
@ -24,6 +23,7 @@ import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
import { Quote, quoteSchema } from 'soapbox/schemas/wallet.ts';
import toast from 'soapbox/toast.tsx';
import WithdrawModal from './withdraw-modal.tsx';
const messages = defineMessages({
@ -60,6 +60,15 @@ const openExtension = async (invoice: string) => {
const Amount = ({ amount, onMintClick }: AmountProps) => {
const intl = useIntl();
const [isWithdrawModalOpen, setWithdrawModalOpen] = useState(false);
const handleWithdrawClick = () => {
setWithdrawModalOpen(true);
};
const handleCloseWithdrawModal = () => {
setWithdrawModalOpen(false);
};
return (
<Stack alignItems='center' space={4} className='w-4/5'>
@ -72,9 +81,22 @@ const Amount = ({ amount, onMintClick }: AmountProps) => {
</div>
<HStack space={2}>
<Button icon={withdrawIcon} theme='secondary' text={intl.formatMessage(messages.withdraw)} />
<Button icon={libraryPlusIcon} theme='primary' onClick={onMintClick} text={intl.formatMessage(messages.mint)} />
<Button
icon={withdrawIcon}
theme='secondary'
text={intl.formatMessage(messages.withdraw)}
onClick={handleWithdrawClick}
className='withdraw-button'
/>
<Button
icon={libraryPlusIcon}
theme='primary'
onClick={onMintClick}
text={intl.formatMessage(messages.mint)}
/>
</HStack>
{isWithdrawModalOpen && <WithdrawModal onClose={handleCloseWithdrawModal} />}
</Stack>
);
};
@ -228,6 +250,19 @@ const NewMint = ({ onBack, list }: NewMintProps) => {
<Button icon={cancelIcon} theme='danger' text={intl.formatMessage(messages.cancel)} onClick={handleClean} />
<Button icon={iconButton} type='submit' theme='primary' text={textButton} />
</HStack>
<Text size='sm' theme='muted' align='center'>
{intl.formatMessage({
id: 'wallet.balance.mint.help',
defaultMessage: 'Minting converts sats from your existing Lightning wallet into Cashu. {learnMore}',
}, {
learnMore: (
// eslint-disable-next-line formatjs/no-literal-string-in-jsx
<a href='https://cashu.space/#howitworks' target='_blank' rel='noopener noreferrer' className='text-blue-500 underline'>
Learn more
</a>
),
})}
</Text>
</Stack>
</Form>
);

Wyświetl plik

@ -1,8 +1,10 @@
import IconSquareArrowRight from '@tabler/icons/outline/square-arrow-right.svg';
import { useEffect, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import Button from 'soapbox/components/ui/button.tsx';
import { Column } from 'soapbox/components/ui/column.tsx';
import Icon from 'soapbox/components/ui/icon.tsx';
import Spinner from 'soapbox/components/ui/spinner.tsx';
import Stack from 'soapbox/components/ui/stack.tsx';
import Text from 'soapbox/components/ui/text.tsx';
@ -83,6 +85,19 @@ const WalletMints = () => {
return (
<Column label={intl.formatMessage(messages.title)} >
<Stack space={2} className=''>
<div className='mx-2 flex justify-end'>
<a
href='https://bitcoinmints.com/?tab=mints'
target='_blank'
rel='noopener noreferrer'
className='flex items-center space-x-1 text-primary-500 hover:underline dark:text-primary-400'
>
<FormattedMessage id='wallet.discover_mints' defaultMessage='Discover Mints' />
<Icon src={IconSquareArrowRight} className='ml-2 size-4 text-primary-500 dark:text-primary-400' />
</a>
</div>
</Stack>
{(() => {
if (isInitialLoading) {
return (

Wyświetl plik

@ -0,0 +1,50 @@
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { FormattedMessage } from 'react-intl';
import Modal from 'soapbox/components/ui/modal.tsx';
import Text from 'soapbox/components/ui/text.tsx';
interface IWithdrawModal {
onClose: () => void;
}
const WithdrawModal: React.FC<IWithdrawModal> = ({ onClose }) => {
const modalWrapperRef = useRef<HTMLDivElement>(null);
useEffect(() => {
// Get the button that triggered the modal
const buttonRef = document.querySelector('.withdraw-button') as HTMLElement;
if (buttonRef && modalWrapperRef.current) {
// Calculate the position of the button
const buttonRect = buttonRef.getBoundingClientRect();
// Position the modal relative to the button
modalWrapperRef.current.style.position = 'absolute';
modalWrapperRef.current.style.top = `${buttonRect.bottom + window.scrollY}px`;
modalWrapperRef.current.style.left = `${buttonRect.left + window.scrollX}px`;
modalWrapperRef.current.style.zIndex = '9999';
}
}, []);
// Render the modal as a portal
return ReactDOM.createPortal(
<div ref={modalWrapperRef}>
<Modal
title={<FormattedMessage id='withdraw_modal.title' defaultMessage='Feature Coming Soon!' />}
onClose={onClose}
>
<Text>
<FormattedMessage
id='withdraw_modal.message'
defaultMessage="The withdraw feature is not yet available, but it's coming soon! Stay tuned."
/>
</Text>
</Modal>
</div>,
document.body, // Render the modal at the root of the document
);
};
export default WithdrawModal;

Wyświetl plik

@ -1722,6 +1722,7 @@
"video.unmute": "Unmute sound",
"wallet.balance.expired": "Expired",
"wallet.balance.mint.amount": "Amount in sats",
"wallet.balance.mint.help": "Minting converts sats from your existing Lightning wallet into Cashu. {learnMore}",
"wallet.balance.mint.paid_message": "Your mint was successful, and your sats are now in your balance. Enjoy!",
"wallet.balance.mint.payment": "Make the payment to complete:",
"wallet.balance.mint.unpaid_message": "Your mint is still unpaid. Complete the payment to receive your sats.",
@ -1755,6 +1756,8 @@
"wallet.transactions.no_transactions": "You don't have transactions yet.",
"wallet.transactions.show_more": "Show More",
"who_to_follow.title": "People To Follow",
"withdraw_modal.message": "The withdraw feature is not yet available, but it's coming soon! Stay tuned.",
"withdraw_modal.title": "Feature Coming Soon!",
"zap.button.text.rounded": "Zap {amount}K sats",
"zap.finish": "Finish",
"zap.next": "Next",