MultiInput component; magic code via MultiInput

Author: Soxasora

awards.csv

@@ -160,11 +160,16 @@ Darth-Coin,issue,#1649,#1421,medium,,,,25k,[email protected],2024-12-07
 Soxasora,pr,#1685,,medium,,,,250k,[email protected],2024-12-07
 aegroto,pr,#1606,#1242,medium,,,,250k,[email protected],2024-12-07
 sfr0xyz,issue,#1696,#1196,good-first-issue,,,,2k,[email protected],2024-12-10
-Soxasora,pr,#1794,#756,hard,urgent,,includes #411,3m,bolt11,2024-01-09
-Soxasora,pr,#1786,#363,easy,,,,100k,bolt11,2024-01-09
-Soxasora,pr,#1768,#1186,medium-hard,,,,500k,bolt11,2024-01-09
-Soxasora,pr,#1750,#1035,medium,,,,250k,bolt11,2024-01-09
-SatsAllDay,issue,#1794,#411,hard,high,,,200k,[email protected],2024-01-20
-felipebueno,issue,#1786,#363,easy,,,,10k,[email protected],???
-cyphercosmo,pr,#1745,#1648,good-first-issue,,,2,16k,[email protected],2024-01-20
-Radentor,issue,#1768,#1186,medium-hard,,,,50k,???,???
+Soxasora,pr,#1794,#756,hard,urgent,,includes #411,3m,bolt11,2025-01-09
+Soxasora,pr,#1786,#363,easy,,,,100k,bolt11,2025-01-09
+Soxasora,pr,#1768,#1186,medium-hard,,,,500k,bolt11,2025-01-09
+Soxasora,pr,#1750,#1035,medium,,,,250k,bolt11,2025-01-09
+SatsAllDay,issue,#1794,#411,hard,high,,,200k,[email protected],2025-01-20
+felipebueno,issue,#1786,#363,easy,,,,10k,[email protected],2025-01-27
+cyphercosmo,pr,#1745,#1648,good-first-issue,,,2,16k,[email protected],2025-01-27
+Radentor,issue,#1768,#1186,medium-hard,,,,50k,[email protected],2025-01-27
+Soxasora,pr,#1841,#1692,good-first-issue,,,,20k,[email protected],2025-01-27
+Soxasora,pr,#1839,#1790,easy,,,1,90k,[email protected],2025-01-27
+Soxasora,pr,#1820,#1819,easy,,,1,90k,[email protected],2025-01-27
+SatsAllDay,issue,#1820,#1819,easy,,,1,9k,[email protected],2025-01-27
+Soxasora,pr,#1814,#1736,easy,,,,100k,[email protected],2025-01-27

components/form.js

@@ -486,7 +486,7 @@ function FormGroup ({ className, label, children }) {
 
 function InputInner ({
   prepend, append, hint, warn, showValid, onChange, onBlur, overrideValue, appendValue,
-  innerRef, noForm, clear, onKeyDown, inputGroupClassName, debounce: debounceTime, maxLength,
+  innerRef, noForm, clear, onKeyDown, inputGroupClassName, debounce: debounceTime, maxLength, hideError,
   ...props
 }) {
   const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props)
@@ -574,7 +574,7 @@ function InputInner ({
           onKeyDown={onKeyDownInner}
           onChange={onChangeInner}
           onBlur={onBlurInner}
-          isInvalid={invalid}
+          isInvalid={!hideError && invalid} // if hideError is true, handle error showing separately
           isValid={showValid && meta.initialValue !== meta.value && meta.touched && !meta.error}
         />
         {(isClient && clear && field.value && !props.readOnly) &&
@@ -1241,5 +1241,102 @@ export function PasswordInput ({ newPass, qr, copy, readOnly, append, value: ini
   )
 }
 
+export function MultiInput ({
+  name, label, groupClassName, length = 4, charLength = 1, upperCase, showSequence,
+  onChange, autoFocus, hideError, inputType = 'text',
+  ...props
+}) {
+  const [inputs, setInputs] = useState(new Array(length).fill(''))
+  const inputRefs = useRef(new Array(length).fill(null))
+  const [, meta, helpers] = useField({ name })
+
+  useEffect(() => {
+    autoFocus && inputRefs.current[0].focus() // focus the first input if autoFocus is true
+  }, [autoFocus])
+
+  const updateInputs = useCallback((newInputs) => {
+    setInputs(newInputs)
+    const combinedValue = newInputs.join('') // join the inputs to get the value
+    helpers.setValue(combinedValue) // set the value to the formik field
+    onChange?.(combinedValue)
+  }, [onChange, helpers])
+
+  const handleChange = useCallback((formik, e, index) => { // formik is not used but it's required to get the value
+    const newValue = upperCase // convert the input to uppercase if upperCase is true
+      ? e.target.value.slice(-charLength).toUpperCase()
+      : e.target.value.slice(-charLength)
+
+    const newInputs = [...inputs]
+    newInputs[index] = newValue
+    updateInputs(newInputs)
+
+    // focus the next input if the current input is filled
+    if (newValue.length === charLength && index < length - 1) {
+      inputRefs.current[index + 1].focus()
+    }
+  }, [inputs, charLength, upperCase, onChange, length])
+
+  const handleKeyDown = useCallback((e, index) => {
+    switch (e.key) {
+      case 'Backspace': {
+        e.preventDefault()
+        const newInputs = [...inputs]
+        // if current input is empty move focus to the previous input else clear the current input
+        const targetIndex = inputs[index] === '' && index > 0 ? index - 1 : index
+        newInputs[targetIndex] = ''
+        updateInputs(newInputs)
+        inputRefs.current[targetIndex]?.focus()
+        break
+      }
+      case 'ArrowLeft': {
+        if (index > 0) { // focus the previous input if it's not the first input
+          e.preventDefault()
+          inputRefs.current[index - 1]?.focus()
+        }
+        break
+      }
+      case 'ArrowRight': {
+        if (index < length - 1) { // focus the next input if it's not the last input
+          e.preventDefault()
+          inputRefs.current[index + 1]?.focus()
+        }
+        break
+      }
+    }
+  }, [inputs, length, updateInputs])
+
+  return (
+    <FormGroup label={label} className={groupClassName}>
+      <div className='d-flex flex-row gap-2'>
+        {inputs.map((value, index) => (
+          <InputInner
+            name={name}
+            key={index}
+            type={inputType}
+            value={value}
+            innerRef={(el) => { inputRefs.current[index] = el }}
+            onChange={(formik, e) => handleChange(formik, e, index)}
+            onKeyDown={e => handleKeyDown(e, index)}
+            style={{
+              textAlign: 'center',
+              maxWidth: `${charLength * 40}px` // adjusts the max width of the input based on the charLength
+            }}
+            prepend={showSequence && <InputGroup.Text>{index + 1}</InputGroup.Text>} // show the index of the input
+            hideError
+            {...props}
+          />
+        ))}
+      </div>
+      <div>
+        {hideError && meta.touched && meta.error && ( // custom error message is showed if hideError is true
+          <BootstrapForm.Control.Feedback type='invalid' className='d-block'>
+            {meta.error}
+          </BootstrapForm.Control.Feedback>
+        )}
+      </div>
+    </FormGroup>
+  )
+}
+
 export const ClientInput = Client(Input)
 export const ClientCheckbox = Client(Checkbox)

components/media-or-link.js

@@ -133,8 +133,12 @@ export const useMediaHelper = ({ src, srcSet: srcSetIntital, topLevel, tab }) =>
       // hack
       // if it's not a video it will throw an error, so we can assume it's an image
       const img = new window.Image()
-      img.onload = () => setIsImage(true)
       img.src = src
+      img.decode().then(() => { // decoding beforehand to prevent wrong image cropping
+        setIsImage(true)
+      }).catch((e) => {
+        console.error('Cannot decode image', e)
+      })
     }
     video.src = src
 

lib/validate.js

@@ -383,7 +383,7 @@ export const emailSchema = object({
 })
 
 export const emailTokenSchema = object({
-  token: string().required('required').trim().matches(/^[0-9a-z]{6}$/i, 'must be 6 alphanumeric characters')
+  token: string().required('required').trim().matches(/^[0-9a-z]{6}$/i, 'must be 6 alphanumeric character')
 })
 
 export const urlSchema = object({

pages/auth/error.js

@@ -28,7 +28,7 @@ export default function AuthError ({ error }) {
       <StaticLayout>
         <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.gif`} fluid />
         <h2 className='pt-4'>Where did the magic go?</h2>
-        <h4 className='text-muted pt-2'>Get another magic code by logging in or try again by going back.</h4>
+        <h4 className='text-muted text-center pt-2'>Get another magic code by logging in or try again by going back.</h4>
         <Button
           className='align-items-center my-3'
           style={{ borderWidth: '2px' }}

pages/email.js

@@ -3,7 +3,7 @@ import { StaticLayout } from '@/components/layout'
 import { getGetServerSideProps } from '@/api/ssrApollo'
 import { useRouter } from 'next/router'
 import { useState, useEffect, useCallback } from 'react'
-import { Form, SubmitButton, PasswordInput } from '@/components/form'
+import { Form, SubmitButton, MultiInput } from '@/components/form'
 import { emailTokenSchema } from '@/lib/validate'
 
 // force SSR to include CSP nonces
@@ -31,24 +31,37 @@ export default function Email () {
           <Image className='rounded-1 shadow-sm' width='640' height='302' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/cowboy-saloon.gif`} fluid />
         </video>
         <h2 className='pt-4'>Check your email</h2>
-        <h4 className='text-muted pt-2 pb-4'>a 5-minutes magic code has been sent to {callback ? callback.email : 'your email address'}</h4>
-        <MagicCodeForm onSubmit={(token) => pushCallback(token)} />
+        <h4 className='text-muted pt-2 pb-4'>a magic code has been sent to {callback ? callback.email : 'your email address'}</h4>
+        <MagicCodeForm onSubmit={(token) => pushCallback(token)} disabled={!callback} />
       </div>
     </StaticLayout>
   )
 }
 
-export const MagicCodeForm = ({ onSubmit }) => {
+export const MagicCodeForm = ({ onSubmit, disabled }) => {
   return (
     <Form
       initial={{
         token: ''
       }}
       schema={emailTokenSchema}
-      onSubmit={({ token }) => { onSubmit(token.toLowerCase()) }}
+      onSubmit={(values) => {
+        onSubmit(values.token.toLowerCase()) // token is displayed in uppercase but we need to check it in lowercase
+      }}
     >
-      <PasswordInput name='token' required placeholder='input your 6-digit magic code' />
-      <SubmitButton variant='primary' className='px-4'>verify</SubmitButton>
+      <MultiInput
+        length={8}
+        charLength={1}
+        name='token'
+        required
+        upperCase // display token in uppercase
+        autoFocus
+        groupClassName='d-flex flex-wrap justify-content-center'
+        inputType='text'
+        hideError // hide error message on every input, allow custom error message
+        disabled={disabled} // disable the form if no callback is provided
+      />
+      <SubmitButton variant='primary' className='px-4' disabled={disabled}>verify</SubmitButton>
     </Form>
   )
 }

scripts/welcome.js

@@ -1,9 +1,23 @@
 #!/usr/bin/env node
 
-const SN_API_URL = process.env.SN_API_URL ?? 'http://localhost:3000'
+function usage () {
+  console.log('Usage: scripts/welcome.js <fetch-after> [--prod]')
+  process.exit(1)
+}
+
+let args = process.argv.slice(2)
+
+const useProd = args.indexOf('--prod') !== -1
+const SN_API_URL = useProd ? 'https://stacker.news' : 'http://localhost:3000'
+args = args.filter(arg => arg !== '--prod')
+console.log('> url:', SN_API_URL)
+
 // this is the item id of the last bio that was included in the previous post of the series
-// TODO: make this configurable
-const FETCH_AFTER = 838433
+const FETCH_AFTER = args[0]
+console.log('> fetch-after:', FETCH_AFTER)
+if (!FETCH_AFTER) {
+  usage()
+}
 
 async function gql (query, variables = {}) {
   const response = await fetch(`${SN_API_URL}/api/graphql`, {
@@ -56,25 +70,39 @@ function filterBios (bios) {
   return newBios
 }
 
+async function populate (bios) {
+  return await Promise.all(
+    bios.map(
+      async bio => {
+        bio.user.since = await fetchItem(bio.user.since)
+        bio.user.items = await fetchUserItems(bio.user.name)
+        bio.user.credits = sumBy(bio.user.items, 'credits')
+        bio.user.sats = sumBy(bio.user.items, 'sats') - bio.user.credits
+        bio.user.satstandard = bio.user.sats / (bio.user.sats + bio.user.credits)
+        return bio
+      }
+    )
+  )
+}
+
 async function printTable (bios) {
-  console.log('| nym | bio (stacking since) | items | sats stacked |')
-  console.log('| --- | -------------------- | ----- | ------------ |')
+  console.log('| nym | bio (stacking since) | items | sats/ccs stacked | sat standard |')
+  console.log('| --- | -------------------- | ----- | ---------------- | ------------ |')
 
   for (const bio of bios) {
     const { user } = bio
 
     const bioCreatedAt = formatDate(bio.createdAt)
-    let col2 = `[${formatDate(bio.createdAt)}](${itemLink(bio.id)})`
-    if (Number(bio.id) !== user.since) {
-      const since = await fetchItem(user.since)
-      const sinceCreatedAt = formatDate(since.createdAt)
+    let col2 = dateLink(bio)
+    if (Number(bio.id) !== user.since.id) {
+      const sinceCreatedAt = formatDate(user.since.createdAt)
       // stacking since might not be the same item as the bio
       // but it can still have been created on the same day
       if (bioCreatedAt !== sinceCreatedAt) {
-        col2 += ` ([${formatDate(since.createdAt)}](${itemLink(since.id)}))`
+        col2 += ` (${dateLink(user.since)})`
       }
     }
-    console.log(`| @${user.name} | ${col2} | ${user.nitems} | ${user.optional.stacked || '???'} |`)
+    console.log(`| @${user.name} | ${col2} | ${user.nitems} | ${user.sats}/${user.credits} | ${user.satstandard.toFixed(2)} |`)
   }
 
   console.log(`${bios.length} rows`)
@@ -86,10 +114,18 @@ function formatDate (date) {
   return new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
 }
 
+function sumBy (arr, key) {
+  return arr.reduce((acc, item) => acc + item[key], 0)
+}
+
 function itemLink (id) {
   return `https://stacker.news/items/${id}`
 }
 
+function dateLink (item) {
+  return `[${formatDate(item.createdAt)}](${itemLink(item.id)})`
+}
+
 async function fetchItem (id) {
   const data = await gql(`
     query Item($id: ID!) {
@@ -102,7 +138,24 @@ async function fetchItem (id) {
   return data.item
 }
 
+async function fetchUserItems (name) {
+  const data = await gql(`
+    query UserItems($name: String!) {
+      items(sort: "user", name: $name) {
+        items {
+          id
+          createdAt
+          sats
+          credits
+        }
+      }
+    }`, { name }
+  )
+  return data.items.items
+}
+
 fetchRecentBios()
   .then(data => filterBios(data.items.items))
+  .then(populate)
   .then(printTable)
   .catch(console.error)

wallets/cln/index.js

@@ -21,7 +21,12 @@ export const fields = [
     name: 'rune',
     label: 'invoice only rune',
     help: {
-      text: 'We only accept runes that *only* allow `method=invoice`.\nRun this to generate one:\n\n```lightning-cli createrune restrictions=\'["method=invoice"]\'```'
+      text: 'We only accept runes that *only* allow `method=invoice`.\n\n' +
+      'Run this if you are on v23.08 to generate one:\n\n' +
+      '```lightning-cli createrune restrictions=\'["method=invoice"]\'```\n\n' +
+      'Or this if you are on v24.11 or later:\n\n' +
+      '```lightning-cli createrune restrictions=\'[["method=invoice"]]\'```\n\n' +
+      '[see `createrune` documentation](https://docs.corelightning.org/reference/lightning-createrune#restriction-format)'
     },
     type: 'text',
     placeholder: 'S34KtUW-6gqS_hD_9cc_PNhfF-NinZyBOCgr1aIrark9NCZtZXRob2Q9aW52b2ljZQ==',

worker/earn.js

@@ -189,7 +189,7 @@ function earnStmts (data, { models }) {
     })]
 }
 
-const DAILY_STIMULUS_SATS = 75_000
+const DAILY_STIMULUS_SATS = 50_000
 export async function earnRefill ({ models, lnd }) {
   return await performPaidAction('DONATE',
     { sats: DAILY_STIMULUS_SATS },