From 5246301324e7b56cdcdea3498181ee22476b23c1 Mon Sep 17 00:00:00 2001 From: danidfra Date: Thu, 29 Aug 2024 10:44:00 -0300 Subject: [PATCH 01/36] update-zap --- src/assets/icons/questionIcon.svg | 1 + src/assets/icons/questionIconDark.svg | 1 + .../zap/components/zap-pay-request-form.tsx | 16 +++++++++++++--- 3 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 src/assets/icons/questionIcon.svg create mode 100644 src/assets/icons/questionIconDark.svg diff --git a/src/assets/icons/questionIcon.svg b/src/assets/icons/questionIcon.svg new file mode 100644 index 000000000..525e62b78 --- /dev/null +++ b/src/assets/icons/questionIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/questionIconDark.svg b/src/assets/icons/questionIconDark.svg new file mode 100644 index 000000000..efd0ad8b2 --- /dev/null +++ b/src/assets/icons/questionIconDark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx index 723c1fa64..cacffe7d7 100644 --- a/src/features/zap/components/zap-pay-request-form.tsx +++ b/src/features/zap/components/zap-pay-request-form.tsx @@ -8,8 +8,9 @@ import coinStack from 'soapbox/assets/icons/coin-stack.png'; import coinIcon from 'soapbox/assets/icons/coin.png'; import moneyBag from 'soapbox/assets/icons/money-bag.png'; import pileCoin from 'soapbox/assets/icons/pile-coin.png'; +import questionIcon from 'soapbox/assets/icons/questionIcon.svg'; import Account from 'soapbox/components/account'; -import { Stack, Button, Input } from 'soapbox/components/ui'; +import { Stack, HStack, Button, Input } from 'soapbox/components/ui'; import { useAppDispatch } from 'soapbox/hooks'; import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities'; @@ -64,7 +65,7 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => { }; return ( - +
@@ -85,8 +86,17 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => { />
- setZapComment(e.target.value)} type='text' placeholder={intl.formatMessage(messages.zap_commentPlaceholder)} /> +
+ setZapComment(e.target.value)} type='text' placeholder={intl.formatMessage(messages.zap_commentPlaceholder)} /> +
+ + ); + + if (to) { + return ( + + {renderButton()} + + ); + } + + return renderButton(); +}); + +export { + ZapButton as default, + ZapButton, +}; diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx index 850bfbfb9..890bf74e3 100644 --- a/src/features/zap/components/zap-pay-request-form.tsx +++ b/src/features/zap/components/zap-pay-request-form.tsx @@ -1,75 +1,68 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; +import { Link } from 'react-router-dom'; import { zap } from 'soapbox/actions/interactions'; import { openModal, closeModal } from 'soapbox/actions/modals'; +import useZapSplit from 'soapbox/api/hooks/zap-split/useZapSplit'; import chestIcon from 'soapbox/assets/icons/blue-chest.png'; import coinStack from 'soapbox/assets/icons/coin-stack.png'; import coinIcon from 'soapbox/assets/icons/coin.png'; import moneyBag from 'soapbox/assets/icons/money-bag.png'; import pileCoin from 'soapbox/assets/icons/pile-coin.png'; import questionIcon from 'soapbox/assets/icons/questionIcon.svg'; -import Account from 'soapbox/components/account'; -import { Stack, HStack, Button, Input } from 'soapbox/components/ui'; -import { useApi, useAppDispatch } from 'soapbox/hooks'; -import { type ZapSplitData } from 'soapbox/schemas/zap-split'; +import DisplayNameRow from 'soapbox/components/display-name-row'; +import { Stack, Button, Input, Avatar } from 'soapbox/components/ui'; +import IconButton from 'soapbox/components/ui/icon-button/icon-button'; +import { useAppDispatch } from 'soapbox/hooks'; + +import ZapButton from './zap-button/zap-button'; import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities'; interface IZapPayRequestForm { status?: StatusEntity; account: AccountEntity; + onClose?(): void; } +const closeIcon = require('@tabler/icons/outline/x.svg'); + const messages = defineMessages({ zap_button_rounded: { id: 'zap.button.text.rounded', defaultMessage: 'Zap {amount}K sats' }, zap_button: { id: 'zap.button.text.raw', defaultMessage: 'Zap {amount} sats' }, zap_commentPlaceholder: { id: 'zap.comment_input.placeholder', defaultMessage: 'Optional comment' }, }); -const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => { - const api = useApi(); +const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) => { + const intl = useIntl(); const dispatch = useAppDispatch(); const [zapComment, setZapComment] = useState(''); - // amount in millisatoshi - const [zapAmount, setZapAmount] = useState(50); - - const fetchZapSplit = async (id: string) => { - return await api.get(`/api/v1/ditto/${id}/zap_splits`); - }; + const [zapAmount, setZapAmount] = useState(50); // amount in millisatoshi + const { zapArrays, zapSplitData, receiveAmount } = useZapSplit(status, account); + const splitValues = zapSplitData.splitValues; + const hasZapSplit = zapArrays.length > 0; const handleSubmit = async (e?: React.FormEvent) => { e?.preventDefault(); - const zapArrays: ZapSplitData[] = (await fetchZapSplit(status!.id)).data; + const zapSplitAccounts = zapArrays.filter(zapData => zapData.account.id !== account.id); + // const splitData = [hasZapSplit, zapSplitAccounts, splitValues]; - let newZapAmount = zapAmount; - const zapSplitAccounts: ZapSplitData[] = []; - - if (zapArrays) { - const totalWeight = zapArrays.reduce((e,b) => e + b.weight, (0)); - zapArrays.forEach((zapSplit) => { - if (zapSplit.account.id === account.id){ - newZapAmount = zapSplit.weight * (zapAmount / totalWeight); - } else { - zapSplitAccounts.push(zapSplit); - } - }); - } - - const invoice = await dispatch(zap(account, status, newZapAmount * 1000, zapComment)); + const invoice = hasZapSplit ? await dispatch(zap(account, status, zapSplitData.receiveAmount * 1000, zapComment)) : await dispatch(zap(account, status, zapAmount * 1000, zapComment)); // If invoice is undefined it means the user has paid through his extension // In this case, we simply close the modal + console.log(invoice); if (!invoice) { dispatch(closeModal('ZAP_PAY_REQUEST')); // Dispatch the adm account - if (zapArrays) { - dispatch(openModal('ZAP_SPLIT', { zapSplitAccounts, status, zapAmount })); + if (zapSplitAccounts.length > 0) { + dispatch(openModal('ZAP_SPLIT', { zapSplitAccounts, splitValues })); } return; } // open QR code modal - dispatch(openModal('ZAP_INVOICE', { invoice, account })); + dispatch(openModal('ZAP_INVOICE', { account, invoice, hasZapSplit, zapSplitAccounts, splitValues })); }; const handleCustomAmount = (e: React.ChangeEvent) => { @@ -90,39 +83,70 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => { return intl.formatMessage(messages.zap_button, { amount: zapAmount }); }; + useEffect(() => { + receiveAmount(zapAmount); + }, [zapAmount, zapArrays]); + return ( - - -
- -
+ + + + + + + + +
-
-
- -
+ +
+ + {hasZapSplit &&

sats

} +
+ + {hasZapSplit && + + } + +
setZapComment(e.target.value)} type='text' placeholder={intl.formatMessage(messages.zap_commentPlaceholder)} />
-