env vars for polling intervals (#1038)

* env vars for polling intervals

add env vars for 4 different common polling intervals,
fast (1000), normal (30000), long (60000), extra long (300000)

use env vars in all `pollInterval` params to `useQuery`

* replace `setInterval`'s interval with `FAST_POLL_INTERVAL`

.env.sample

@@ -87,6 +87,12 @@ OPENSEARCH_MODEL_ID=
 # prisma db url
 DATABASE_URL="postgresql://sn:password@db:5432/stackernews?schema=public"
 
+# polling intervals
+NEXT_PUBLIC_FAST_POLL_INTERVAL=1000
+NEXT_PUBLIC_NORMAL_POLL_INTERVAL=30000
+NEXT_PUBLIC_LONG_POLL_INTERVAL=60000
+NEXT_PUBLIC_EXTRA_LONG_POLL_INTERVAL=300000
+
 ###################
 # FOR DOCKER ONLY #
 ###################

.github/pull_request_template.md

@@ -52,3 +52,7 @@ If changes were requested, request a new review when you incorporated the feedba
 
 <!-- You should be able to use the mobile browser emulator in your browser to test this. -->
 - [ ] For frontend changes: Tested on mobile?
+
+<!-- New env vars need to be called out
+so they can be properly configured for prod. -->
+- [ ] Did you introduce any new environment variables? If so, call them out explicitly in the PR description.

components/block-height.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo } from 'react'
 import { useQuery } from '@apollo/client'
-import { SSR } from '@/lib/constants'
+import { NORMAL_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { BLOCK_HEIGHT } from '@/fragments/blockHeight'
 
 export const BlockHeightContext = createContext({
@@ -14,7 +14,7 @@ export const BlockHeightProvider = ({ blockHeight, children }) => {
     ...(SSR
       ? {}
       : {
-          pollInterval: 30000,
+          pollInterval: NORMAL_POLL_INTERVAL,
           nextFetchPolicy: 'cache-and-network'
         })
   })

components/chain-fee.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo } from 'react'
 import { useQuery } from '@apollo/client'
-import { SSR } from '@/lib/constants'
+import { NORMAL_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { CHAIN_FEE } from '@/fragments/chainFee'
 
 export const ChainFeeContext = createContext({
@@ -14,7 +14,7 @@ export const ChainFeeProvider = ({ chainFee, children }) => {
     ...(SSR
       ? {}
       : {
-          pollInterval: 30000,
+          pollInterval: NORMAL_POLL_INTERVAL,
           nextFetchPolicy: 'cache-and-network'
         })
   })

components/fee-button.js

@@ -4,7 +4,7 @@ import ActionTooltip from './action-tooltip'
 import Info from './info'
 import styles from './fee-button.module.css'
 import { gql, useQuery } from '@apollo/client'
-import { ANON_FEE_MULTIPLIER, SSR } from '@/lib/constants'
+import { ANON_FEE_MULTIPLIER, FAST_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { numWithUnits } from '@/lib/format'
 import { useMe } from './me'
 import AnonIcon from '@/svgs/spy-fill.svg'
@@ -43,7 +43,7 @@ export function postCommentUseRemoteLineItems ({ parentId } = {}) {
   return function useRemoteLineItems () {
     const [line, setLine] = useState({})
 
-    const { data } = useQuery(query, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
+    const { data } = useQuery(query, SSR ? {} : { pollInterval: FAST_POLL_INTERVAL, nextFetchPolicy: 'cache-and-network' })
 
     useEffect(() => {
       const repetition = data?.itemRepetition

components/footer-rewards.js

@@ -1,7 +1,7 @@
 import { gql, useQuery } from '@apollo/client'
 import Link from 'next/link'
 import { RewardLine } from '@/pages/rewards'
-import { SSR } from '@/lib/constants'
+import { LONG_POLL_INTERVAL, SSR } from '@/lib/constants'
 
 const REWARDS = gql`
 {
@@ -12,7 +12,7 @@ const REWARDS = gql`
 }`
 
 export default function Rewards () {
-  const { data } = useQuery(REWARDS, SSR ? { ssr: false } : { pollInterval: 60000, nextFetchPolicy: 'cache-and-network' })
+  const { data } = useQuery(REWARDS, SSR ? { ssr: false } : { pollInterval: LONG_POLL_INTERVAL, nextFetchPolicy: 'cache-and-network' })
   const total = data?.rewards?.[0]?.total
   const time = data?.rewards?.[0]?.time
   return (

components/invoice.js

@@ -13,6 +13,7 @@ import Countdown from './countdown'
 import PayerData from './payer-data'
 import Bolt11Info from './bolt11-info'
 import { useWebLN } from './webln'
+import { FAST_POLL_INTERVAL } from '@/lib/constants'
 
 export function Invoice ({ invoice, modal, onPayment, info, successVerb, webLn }) {
   const [expired, setExpired] = useState(new Date(invoice.expiredAt) <= new Date())
@@ -100,7 +101,7 @@ export function Invoice ({ invoice, modal, onPayment, info, successVerb, webLn }
 
 const JITInvoice = ({ invoice: { id, hash, hmac, expiresAt }, onPayment, onCancel, onRetry }) => {
   const { data, loading, error } = useQuery(INVOICE, {
-    pollInterval: 1000,
+    pollInterval: FAST_POLL_INTERVAL,
     variables: { id }
   })
   const [retryError, setRetryError] = useState(0)
@@ -362,7 +363,7 @@ const waitForWebLNPayment = async ({ provider, invoice, pollInvoice, gqlCacheUpd
           clearInterval(interval)
           reject(err)
         }
-      }, 1000)
+      }, FAST_POLL_INTERVAL)
     })
   } catch (err) {
     undoUpdate?.()

components/lightning-auth.js

@@ -9,7 +9,7 @@ import Qr, { QrSkeleton } from './qr'
 import styles from './lightning-auth.module.css'
 import BackIcon from '@/svgs/arrow-left-line.svg'
 import { useRouter } from 'next/router'
-import { SSR } from '@/lib/constants'
+import { FAST_POLL_INTERVAL, SSR } from '@/lib/constants'
 
 function QrAuth ({ k1, encodedUrl, callbackUrl }) {
   const query = gql`
@@ -19,7 +19,7 @@ function QrAuth ({ k1, encodedUrl, callbackUrl }) {
       k1
     }
   }`
-  const { data } = useQuery(query, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
+  const { data } = useQuery(query, SSR ? {} : { pollInterval: FAST_POLL_INTERVAL, nextFetchPolicy: 'cache-and-network' })
 
   useEffect(() => {
     if (data?.lnAuth?.pubkey) {

components/me.js

@@ -1,14 +1,14 @@
 import React, { useContext } from 'react'
 import { useQuery } from '@apollo/client'
 import { ME } from '@/fragments/users'
-import { SSR } from '@/lib/constants'
+import { FAST_POLL_INTERVAL, SSR } from '@/lib/constants'
 
 export const MeContext = React.createContext({
   me: null
 })
 
 export function MeProvider ({ me, children }) {
-  const { data } = useQuery(ME, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
+  const { data } = useQuery(ME, SSR ? {} : { pollInterval: FAST_POLL_INTERVAL, nextFetchPolicy: 'cache-and-network' })
 
   return (
     <MeContext.Provider value={data?.me || me}>

components/price.js

@@ -4,7 +4,7 @@ import { fixedDecimal } from '@/lib/format'
 import { useMe } from './me'
 import { PRICE } from '@/fragments/price'
 import { CURRENCY_SYMBOLS } from '@/lib/currency'
-import { SSR } from '@/lib/constants'
+import { NORMAL_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { useBlockHeight } from './block-height'
 import { useChainFee } from './chain-fee'
 
@@ -25,7 +25,7 @@ export function PriceProvider ({ price, children }) {
     ...(SSR
       ? {}
       : {
-          pollInterval: 30000,
+          pollInterval: NORMAL_POLL_INTERVAL,
           nextFetchPolicy: 'cache-and-network'
         })
   })

components/sub-select.js

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { Select } from './form'
-import { SSR } from '@/lib/constants'
+import { EXTRA_LONG_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { SUBS } from '@/fragments/subs'
 import { useQuery } from '@apollo/client'
 import { useEffect, useState } from 'react'
@@ -19,7 +19,7 @@ export function useSubs ({ prependSubs = [], sub, filterSubs = () => true, appen
   const { data } = useQuery(SUBS, SSR
     ? {}
     : {
-        pollInterval: 300000,
+        pollInterval: EXTRA_LONG_POLL_INTERVAL,
         nextFetchPolicy: 'cache-and-network'
       })
 

components/use-has-new-notes.js

@@ -1,6 +1,6 @@
 import { HAS_NOTIFICATIONS } from '@/fragments/notifications'
 import { clearNotifications } from '@/lib/badge'
-import { SSR } from '@/lib/constants'
+import { NORMAL_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { useQuery } from '@apollo/client'
 import React, { useContext } from 'react'
 
@@ -11,7 +11,7 @@ export function HasNewNotesProvider ({ me, children }) {
     SSR
       ? {}
       : {
-          pollInterval: 30000,
+          pollInterval: NORMAL_POLL_INTERVAL,
           nextFetchPolicy: 'cache-and-network',
           onCompleted: ({ hasNewNotes }) => {
             if (!hasNewNotes) {

lib/constants.js

@@ -126,3 +126,8 @@ export const ITEM_ALLOW_EDITS = [
 ]
 
 export const INVOICE_RETENTION_DAYS = 7
+
+export const FAST_POLL_INTERVAL = Number(process.env.NEXT_PUBLIC_FAST_POLL_INTERVAL)
+export const NORMAL_POLL_INTERVAL = Number(process.env.NEXT_PUBLIC_NORMAL_POLL_INTERVAL)
+export const LONG_POLL_INTERVAL = Number(process.env.NEXT_PUBLIC_LONG_POLL_INTERVAL)
+export const EXTRA_LONG_POLL_INTERVAL = Number(process.env.NEXT_PUBLIC_EXTRA_LONG_POLL_INTERVAL)

pages/invoices/[id].js

@@ -4,7 +4,7 @@ import { QrSkeleton } from '@/components/qr'
 import { CenterLayout } from '@/components/layout'
 import { useRouter } from 'next/router'
 import { INVOICE } from '@/fragments/wallet'
-import { SSR } from '@/lib/constants'
+import { FAST_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { getGetServerSideProps } from '@/api/ssrApollo'
 
 // force SSR to include CSP nonces
@@ -15,7 +15,7 @@ export default function FullInvoice () {
   const { data, error } = useQuery(INVOICE, SSR
     ? {}
     : {
-        pollInterval: 1000,
+        pollInterval: FAST_POLL_INTERVAL,
         variables: { id: router.query.id },
         nextFetchPolicy: 'cache-and-network'
       })

pages/rewards/index.js

@@ -12,7 +12,7 @@ import { numWithUnits } from '@/lib/format'
 import PageLoading from '@/components/page-loading'
 import { useShowModal } from '@/components/modal'
 import dynamic from 'next/dynamic'
-import { SSR } from '@/lib/constants'
+import { FAST_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { useToast } from '@/components/toast'
 import { useLightning } from '@/components/lightning'
 import { ListUsers } from '@/components/user-list'
@@ -94,7 +94,7 @@ export default function Rewards ({ ssrData }) {
   // only poll for updates to rewards and not leaderboard
   const { data: rewardsData } = useQuery(
     REWARDS,
-    SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
+    SSR ? {} : { pollInterval: FAST_POLL_INTERVAL, nextFetchPolicy: 'cache-and-network' })
   const { data } = useQuery(REWARDS_FULL)
   const dat = useData(data, ssrData)
 

pages/wallet/index.js

@@ -15,7 +15,7 @@ import { CREATE_WITHDRAWL, SEND_TO_LNADDR } from '@/fragments/wallet'
 import { getGetServerSideProps } from '@/api/ssrApollo'
 import { amountSchema, lnAddrSchema, withdrawlSchema } from '@/lib/validate'
 import Nav from 'react-bootstrap/Nav'
-import { BALANCE_LIMIT_MSATS, SSR } from '@/lib/constants'
+import { BALANCE_LIMIT_MSATS, FAST_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { msatsToSats, numWithUnits } from '@/lib/format'
 import styles from '@/components/user-header.module.css'
 import HiddenWalletSummary from '@/components/hidden-wallet-summary'
@@ -327,7 +327,7 @@ function LnQRWith ({ k1, encodedUrl }) {
       k1
     }
   }`
-  const { data } = useQuery(query, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
+  const { data } = useQuery(query, SSR ? {} : { pollInterval: FAST_POLL_INTERVAL, nextFetchPolicy: 'cache-and-network' })
 
   if (data?.lnWith?.withdrawalId) {
     router.push(`/withdrawals/${data.lnWith.withdrawalId}`)

pages/withdrawals/[id].js

@@ -6,7 +6,7 @@ import InvoiceStatus from '@/components/invoice-status'
 import { useRouter } from 'next/router'
 import { WITHDRAWL } from '@/fragments/wallet'
 import Link from 'next/link'
-import { SSR, INVOICE_RETENTION_DAYS } from '@/lib/constants'
+import { SSR, INVOICE_RETENTION_DAYS, FAST_POLL_INTERVAL } from '@/lib/constants'
 import { numWithUnits } from '@/lib/format'
 import Bolt11Info from '@/components/bolt11-info'
 import { datePivot, timeLeft } from '@/lib/time'
@@ -48,7 +48,7 @@ function LoadWithdrawl () {
     ? {}
     : {
         variables: { id: router.query.id },
-        pollInterval: 1000,
+        pollInterval: FAST_POLL_INTERVAL,
         nextFetchPolicy: 'cache-and-network'
       })
   if (error) return <div>error</div>