Save custom tips

components/item-act.js

@@ -5,6 +5,33 @@ import { useMe } from './me'
 import UpBolt from '../svgs/bolt.svg'
 import { amountSchema } from '../lib/validate'
 
+const Tips = ({ setOValue }) => {
+  const customTips = getCustomTips().sort((a, b) => a - b)
+  return [...customTips, 100, 1000, 10000, 100000].map(num =>
+    <Button
+      size='sm'
+      className={`${num > 1 ? 'ml-2' : ''} mb-2`}
+      key={num}
+      onClick={() => { setOValue(num) }}
+    >
+      <UpBolt
+        className='mr-1'
+        width={14}
+        height={14}
+      />{num}
+    </Button>)
+}
+
+const getCustomTips = () => JSON.parse(localStorage.getItem('custom-tips')) || []
+
+const addCustomTip = (amount) => {
+  let customTips = Array.from(new Set([amount, ...getCustomTips()]))
+  if (customTips.length > 3) {
+    customTips = customTips.slice(0, 3)
+  }
+  localStorage.setItem('custom-tips', JSON.stringify(customTips))
+}
+
 export default function ItemAct ({ onClose, itemId, act, strike }) {
   const inputRef = useRef(null)
   const me = useMe()
@@ -29,6 +56,7 @@ export default function ItemAct ({ onClose, itemId, act, strike }) {
           }
         })
         await strike()
+        addCustomTip(Number(amount))
         onClose()
       }}
     >
@@ -42,19 +70,7 @@ export default function ItemAct ({ onClose, itemId, act, strike }) {
         append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
       />
       <div>
-        {[100, 1000, 10000, 100000].map(num =>
+        <Tips setOValue={setOValue} />
-          <Button
-            size='sm'
-            className={`${num > 1 ? 'ml-2' : ''} mb-2`}
-            key={num}
-            onClick={() => { setOValue(num) }}
-          >
-            <UpBolt
-              className='mr-1'
-              width={14}
-              height={14}
-            />{num}
-          </Button>)}
       </div>
       <div className='d-flex'>
         <SubmitButton variant='success' className='ml-auto mt-1 px-4' value='TIP'>tip</SubmitButton>