a6713f9793
* WIP: Account switching * Fix empty USER query ANON_USER_ID was undefined and thus the query for @anon had no variables. * Apply multiAuthMiddleware in /api/graphql * Fix 'you must be logged in' query error on switch to anon * Add smart 'switch account' button "smart" means that it only shows if there are accounts to which one can switch * Fix multiAuth not set in backend * Comment fixes, minor changes * Use fw-bold instead of 'selected' * Close dropdown and offcanvas Inside a dropdown, we can rely on autoClose but need to wrap the buttons with <Dropdown.Item> for that to work. For the offcanvas, we need to pass down handleClose. * Use button to add account * Some pages require hard reload on account switch * Reinit settings form on account switch * Also don't refetch WalletHistory * Formatting * Use width: fit-content for standalone SignUpButton * Remove unused className * Use fw-bold and text-underline on selected * Fix inconsistent padding of login buttons * Fix duplicate redirect from /settings on anon switch * Never throw during refetch * Throw errors which extend GraphQLError * Only use meAnonSats if logged out * Use reactive variable for meAnonSats The previous commit broke the UI update after anon zaps because we actually updated item.meSats in the cache and not item.meAnonSats. Updating item.meAnonSats was not possible because it's a local field. For that, one needs to use reactive variables. We do this now and thus also don't need the useEffect hack in item-info.js anymore. * Switch to new user * Fix missing cleanup during logout If we logged in but never switched to any other account, the 'multi_auth.user-id' cookie was not set. This meant that during logout, the other 'multi_auth.*' cookies were not deleted. This broke the account switch modal. This is fixed by setting the 'multi_auth.user-id' cookie on login. Additionally, we now cleanup if cookie pointer OR session is set (instead of only if both are set). * Fix comments in middleware * Remove unnecessary effect dependencies setState is stable and thus only noise in effect dependencies * Show but disable unavailable auth methods * make signup button consistent with others * Always reload page on switch * refine account switch styling * logout barrier --------- Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com> Co-authored-by: k00b <k00b@stacker.news>
143 lines
5.6 KiB
JavaScript
143 lines
5.6 KiB
JavaScript
import '@/styles/globals.scss'
|
|
import { ApolloProvider, gql } from '@apollo/client'
|
|
import { MeProvider } from '@/components/me'
|
|
import PlausibleProvider from 'next-plausible'
|
|
import getApolloClient from '@/lib/apollo.js'
|
|
import { PriceProvider } from '@/components/price'
|
|
import { BlockHeightProvider } from '@/components/block-height'
|
|
import Head from 'next/head'
|
|
import { useRouter } from 'next/dist/client/router'
|
|
import { useEffect } from 'react'
|
|
import { ShowModalProvider } from '@/components/modal'
|
|
import ErrorBoundary from '@/components/error-boundary'
|
|
import { LightningProvider } from '@/components/lightning'
|
|
import { ToastProvider } from '@/components/toast'
|
|
import { ServiceWorkerProvider } from '@/components/serviceworker'
|
|
import { SSR } from '@/lib/constants'
|
|
import NProgress from 'nprogress'
|
|
import 'nprogress/nprogress.css'
|
|
import { LoggerProvider } from '@/components/logger'
|
|
import { WalletLoggerProvider } from '@/components/wallet-logger'
|
|
import { ChainFeeProvider } from '@/components/chain-fee.js'
|
|
import dynamic from 'next/dynamic'
|
|
import { HasNewNotesProvider } from '@/components/use-has-new-notes'
|
|
import WebLnProvider from '@/wallets/webln'
|
|
import { AccountProvider } from '@/components/account'
|
|
|
|
const PWAPrompt = dynamic(() => import('react-ios-pwa-prompt'), { ssr: false })
|
|
|
|
NProgress.configure({
|
|
showSpinner: false
|
|
})
|
|
|
|
function writeQuery (client, apollo, data) {
|
|
if (apollo && data) {
|
|
client.writeQuery({
|
|
query: gql`${apollo.query}`,
|
|
data,
|
|
variables: apollo.variables,
|
|
overwrite: SSR,
|
|
broadcast: false
|
|
})
|
|
}
|
|
}
|
|
|
|
export default function MyApp ({ Component, pageProps: { ...props } }) {
|
|
const client = getApolloClient()
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
const nprogressStart = (_, { shallow }) => !shallow && NProgress.start()
|
|
const nprogressDone = (_, { shallow }) => !shallow && NProgress.done()
|
|
|
|
router.events.on('routeChangeStart', nprogressStart)
|
|
router.events.on('routeChangeComplete', nprogressDone)
|
|
router.events.on('routeChangeError', nprogressDone)
|
|
|
|
if (!props?.apollo) return
|
|
// HACK: 'cause there's no way to tell Next to skip SSR
|
|
// So every page load, we modify the route in browser history
|
|
// to point to the same page but without SSR, ie ?nodata=true
|
|
// this nodata var will get passed to the server on back/foward and
|
|
// 1. prevent data from reloading and 2. perserve scroll
|
|
// (2) is not possible while intercepting nav with beforePopState
|
|
router.replace({
|
|
pathname: router.pathname,
|
|
query: { ...router.query, nodata: true }
|
|
}, router.asPath, { ...router.options, shallow: true }).catch((e) => {
|
|
// workaround for https://github.com/vercel/next.js/issues/37362
|
|
if (!e.cancelled) {
|
|
console.log(e)
|
|
throw e
|
|
}
|
|
})
|
|
|
|
return () => {
|
|
router.events.off('routeChangeStart', nprogressStart)
|
|
router.events.off('routeChangeComplete', nprogressDone)
|
|
router.events.off('routeChangeError', nprogressDone)
|
|
}
|
|
}, [router.asPath, props?.apollo])
|
|
|
|
useEffect(() => {
|
|
// hack to disable ios pwa prompt for https://github.com/stackernews/stacker.news/issues/953
|
|
// see https://github.com/chrisdancee/react-ios-pwa-prompt/blob/66e91c4f033b740cff42c3220cf13ebdf39e3078/src/index.js#L30
|
|
if (router?.query?.disablePrompt) {
|
|
window.localStorage.setItem('iosPwaPrompt', JSON.stringify({ isiOS: false, visits: 0 }))
|
|
}
|
|
}, [router?.query?.disablePrompt])
|
|
|
|
/*
|
|
If we are on the client, we populate the apollo cache with the
|
|
ssr data
|
|
*/
|
|
const { apollo, ssrData, me, price, blockHeight, chainFee, ...otherProps } = props
|
|
useEffect(() => {
|
|
writeQuery(client, apollo, ssrData)
|
|
}, [client, apollo, ssrData])
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<meta name='viewport' content='initial-scale=1.0, width=device-width, viewport-fit=cover' />
|
|
</Head>
|
|
<ErrorBoundary>
|
|
<PlausibleProvider domain='stacker.news' trackOutboundLinks>
|
|
<ApolloProvider client={client}>
|
|
<MeProvider me={me}>
|
|
<HasNewNotesProvider>
|
|
<LoggerProvider>
|
|
<WalletLoggerProvider>
|
|
<WebLnProvider>
|
|
<ServiceWorkerProvider>
|
|
<AccountProvider>
|
|
<PriceProvider price={price}>
|
|
<LightningProvider>
|
|
<ToastProvider>
|
|
<ShowModalProvider>
|
|
<BlockHeightProvider blockHeight={blockHeight}>
|
|
<ChainFeeProvider chainFee={chainFee}>
|
|
<ErrorBoundary>
|
|
<Component ssrData={ssrData} {...otherProps} />
|
|
{!router?.query?.disablePrompt && <PWAPrompt copyBody='This website has app functionality. Add it to your home screen to use it in fullscreen and receive notifications. In Safari:' promptOnVisit={2} />}
|
|
</ErrorBoundary>
|
|
</ChainFeeProvider>
|
|
</BlockHeightProvider>
|
|
</ShowModalProvider>
|
|
</ToastProvider>
|
|
</LightningProvider>
|
|
</PriceProvider>
|
|
</AccountProvider>
|
|
</ServiceWorkerProvider>
|
|
</WebLnProvider>
|
|
</WalletLoggerProvider>
|
|
</LoggerProvider>
|
|
</HasNewNotesProvider>
|
|
</MeProvider>
|
|
</ApolloProvider>
|
|
</PlausibleProvider>
|
|
</ErrorBoundary>
|
|
</>
|
|
)
|
|
}
|