kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Merge branch 'wallet-updates' into 'main'
Wallet UI Updates for User Clarity See merge request soapbox-pub/soapbox!3372merge-requests/3372/merge
commit
051d53ca9d
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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;
|
|
@ -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",
|
||||
|
|
Ładowanie…
Reference in New Issue