fix: added sats prefix to input in tip card

src/Components/TipButton/TipButton.tsx

@@ -2,7 +2,7 @@ import { MdLocalFireDepartment } from 'react-icons/md'
 import Button from 'src/Components/Button/Button'
 import { useAppSelector, usePressHolder } from 'src/utils/hooks'
 import _throttle from 'lodash.throttle'
-import { ComponentProps, useState } from 'react'
+import { ComponentProps, useRef, useState } from 'react'
 import './tipbutton.style.css'
 import { random, randomItem } from 'src/utils/helperFunctions'
 
@@ -22,7 +22,7 @@ type Props = {
 
 export default function TipButton({ onTip = () => { }, ...props }: Props) {
     const [tipCnt, setTipCnt] = useState(0)
-    const [incStep, setIncStep] = useState(10)
+    const tipCntRef = useRef(0);
     const [sparks, setSparks] = useState<Particle[]>([]);
     const [wasActive, setWasActive] = useState(false);
 
@@ -31,8 +31,11 @@ export default function TipButton({ onTip = () => { }, ...props }: Props) {
 
     const { onPressDown, onPressUp } = usePressHolder(_throttle(() => {
         const _incStep = (Math.ceil((tipCnt + 1) / 10) + 1) ** 2 * 10;
-        setIncStep(_incStep)
-        setTipCnt(s => s + _incStep)
+        setTipCnt(s => {
+            const newValue = s + _incStep;
+            tipCntRef.current = newValue;
+            return newValue;
+        })
 
         const newSpark = {
             id: Math.random().toString(),
@@ -72,8 +75,9 @@ export default function TipButton({ onTip = () => { }, ...props }: Props) {
         else
             setTimeout(() => {
                 setSparks([]);
-                onTip(tipCnt + incStep); // somehow we always miss one incStep
+                onTip(tipCntRef.current);
                 setTipCnt(0);
+                tipCntRef.current = 0;
             }, 500)
     }
 

src/pages/ProjectPage/Tip/TipCard.tsx

@@ -8,6 +8,7 @@ import { gql, useMutation } from "@apollo/client";
 import useWindowSize from "react-use/lib/useWindowSize";
 import Confetti from "react-confetti";
 import { Wallet_Service } from 'src/services';
+import styles from './style.module.css'
 
 const defaultOptions = [
     { text: '100 sat', value: 100 },
@@ -81,7 +82,7 @@ export default function TipCard({ onClose, direction, tipValue, ...props }: Prop
                         preimage: paymentResponse.preimage
                     }
                 })
-                    .catch((e) =>  { console.log(e); }) // ONLY TEMPROARY !!! SHOULD BE FIXED FROM BACKEND
+                    .catch((e) => { console.log(e); }) // ONLY TEMPROARY !!! SHOULD BE FIXED FROM BACKEND
                     .finally(() => {
                         setTimeout(() => {
                             onClose?.();
@@ -139,11 +140,13 @@ export default function TipCard({ onClose, direction, tipValue, ...props }: Prop
                 </label>
                 <div className="input-wrapper">
                     <input
-                        className="input-field"
+                        className={`input-field app ${styles.input}`}
                         value={voteAmount} onChange={onChangeInput}
                         type="number"
                         placeholder="e.g 5 sats" />
-                    {/* <IoCopy className='input-icon' /> */}
+                    <p className='px-16 flex items-center text-primary-400'>
+                        Sats
+                    </p>
                 </div>
                 <div className="flex mt-16 justify-between">
                     {defaultOptions.map((option, idx) =>

src/pages/ProjectPage/Tip/style.module.css

@@ -0,0 +1,10 @@
+.input::-webkit-outer-spin-button,
+.input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+.input[type="number"] {
+  -moz-appearance: textfield;
+}