aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-04 23:14:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix Tipping incrementer

Browse Source 
* we have been always missing one incStep in the final amount
* update wording to use "vote"
* disable "vote" button dependening on payment status
This commit is contained in:
Michael Bumann
2022-01-30 17:44:48 +01:00
parent bbcb2be3db
commit 8996c5eb4a
2 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Components/TipButton/TipButton.tsx
View File

@@ -22,6 +22,7 @@ type Props = {
export default function TipButton({ onTip = () => { }, ...props }: Props) {
const [tipCnt, setTipCnt] = useState(0)
const [incStep, setIncStep] = useState(10)
const [sparks, setSparks] = useState<Particle[]>([]);
const [wasActive, setWasActive] = useState(false);
@@ -53,8 +54,9 @@ export default function TipButton({ onTip = () => { }, ...props }: Props) {
const { onPressDown, onPressUp } = usePressHolder(_throttle(() => {
const incStep = (Math.ceil((tipCnt + 1) / 100) + 1) ** 2;
setTipCnt(s => s + incStep)
const _incStep = (Math.ceil((tipCnt + 1) / 10) + 1) ** 2 * 10;
setIncStep(_incStep)
setTipCnt(s => { console.log('update'); return s + _incStep})
const newSpark = {
id: Math.random().toString(),
@@ -84,7 +86,6 @@ export default function TipButton({ onTip = () => { }, ...props }: Props) {
}
const handlePressUp = (event?: any) => {
if (!wasActive) return;
setWasActive(false);
@@ -95,9 +96,9 @@ export default function TipButton({ onTip = () => { }, ...props }: Props) {
else
setTimeout(() => {
setSparks([]);
onTip(tipCnt);
onTip(tipCnt + incStep); // somehow we always miss one incStep
setTipCnt(0);
}, 1000)
}, 500)
}
return (
@@ -116,7 +117,7 @@ export default function TipButton({ onTip = () => { }, ...props }: Props) {
} as any}
{...props}
>
Hold To Tip !!! <MdLocalFireDepartment className='text-fire' />
Hold To Vote !!! <MdLocalFireDepartment className='text-fire' />
<span
className='tip-counter'

24
src/pages/ProjectPage/Tip/TipCard.tsx
View File

@@ -10,9 +10,9 @@ import Confetti from "react-confetti";
import { Wallet_Service } from 'src/services';
const defaultOptions = [
{ text: '10 sat', value: 10 },
{ text: '100 sats', value: 100 },
{ text: '1k sats', value: 1000 },
{ text: '100 sat', value: 100 },
{ text: '1k sat', value: 1000 },
{ text: '10k sats', value: 10000 },
]
@@ -74,11 +74,11 @@ export default function TipCard({ onClose, direction, tipValue, ...props }: Prop
const paymentResponse = await webln.sendPayment(votingData.vote.payment_request);
setPaymentStatus(PaymentStatus.PAID);
confirmVote({ variables: { paymentRequest: votingData.vote.payment_request, preimage: paymentResponse.preimage } })
.catch() // ONLY TEMPROARY !!! SHOULD BE FIXED FROM BACKEND
.catch((e) => { console.log(e); } ) // ONLY TEMPROARY !!! SHOULD BE FIXED FROM BACKEND
.finally(() => {
setTimeout(() => {
onClose?.();
}, 2000);
}, 4000);
})
} catch (error) {
@@ -94,7 +94,7 @@ export default function TipCard({ onClose, direction, tipValue, ...props }: Prop
setPaymentStatus(PaymentStatus.PAYMENT_CONFIRMED);
setTimeout(() => {
onClose?.();
}, 2000);
}, 4000);
},
onError: () => { }
@@ -125,7 +125,7 @@ export default function TipCard({ onClose, direction, tipValue, ...props }: Prop
className="modal-card max-w-[343px] p-24 rounded-xl relative"
>
<IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
<h2 className='text-h5 font-bold'>Tip this Project</h2>
<h2 className='text-h5 font-bold'>Vote for this Project</h2>
<div className="mt-32 ">
<label className="block text-gray-700 text-body4 mb-2 ">
Enter Amount
@@ -150,13 +150,13 @@ export default function TipCard({ onClose, direction, tipValue, ...props }: Prop
)}
</div>
<p className="text-body6 mt-12 text-gray-500">1 sat = 1 vote</p>
{paymentStatus === PaymentStatus.FETCHING_PAYMENT_DETAILS && <p className="text-body6 mt-12 text-gray-500">Please wait while we the fetch payment details.</p>}
{paymentStatus === PaymentStatus.FETCHING_PAYMENT_DETAILS && <p className="text-body6 mt-12 text-yellow-500">Please wait while we the fetch payment details.</p>}
{paymentStatus === PaymentStatus.NOT_PAID && <p className="text-body6 mt-12 text-red-500">You did not confirm the payment. Please try again.</p>}
{paymentStatus === PaymentStatus.PAID && <p className="text-body6 mt-12 text-green-500">The invoice was paid! Please wait while we confirm it.</p>}
{paymentStatus === PaymentStatus.AWAITING_PAYMENT && <p className="text-body6 mt-12 text-yellow-500">Please confirm the payment in the prompt...</p>}
{paymentStatus === PaymentStatus.PAYMENT_CONFIRMED && <p className="text-body6 mt-12 text-green-500">Imagine confetti here</p>}
<button className="btn btn-primary w-full mt-32" onClick={requestPayment}>
Tip
{paymentStatus === PaymentStatus.AWAITING_PAYMENT && <p className="text-body6 mt-12 text-yellow-500">Waiting for your payment...</p>}
{paymentStatus === PaymentStatus.PAYMENT_CONFIRMED && <p className="text-body6 mt-12 text-green-500">Thanks for your vote</p>}
<button className="btn btn-primary w-full mt-32" disabled={paymentStatus !== PaymentStatus.DEFAULT && paymentStatus !== PaymentStatus.NOT_PAID} onClick={requestPayment}>
{paymentStatus === PaymentStatus.DEFAULT || paymentStatus === PaymentStatus.NOT_PAID ? "Vote" : "Voting..."}
</button>
</div>
{paymentStatus === PaymentStatus.PAYMENT_CONFIRMED && <Confetti width={width} height={height} />}