ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lnurl UI update (#2220)

Browse Source 
* Update index.js

added info tooltip for LNURL-auth button

* Update index.js

* Update index.js

* Update index.js

* Update index.js

* Update index.js

* Update index.js

* use existing lightning explainer

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
Co-authored-by: k00b <k00b@stacker.news>
This commit is contained in:
Axel Vyrn 2025-06-14 09:40:32 +05:30 committed by GitHub
parent 830967467a
commit 16da50733c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/lightning-auth.js
View File

@ -45,18 +45,18 @@ function QrAuth ({ k1, encodedUrl, callbackUrl, multiAuth }) {
) )
} }
function LightningExplainer ({ text, children }) { function LightningExplainer ({ text, children, backButton, md = 12, lg = 6 }) {
const router = useRouter() const router = useRouter()
return ( return (
<Container> <Container>
<div className={styles.login}> <div className={styles.login}>
<div className='w-100 mb-3 text-muted pointer' onClick={() => router.back()}><BackIcon /></div> {backButton && <div className='w-100 mb-3 text-muted pointer' onClick={() => router.back()}><BackIcon /></div>}
<h3 className='w-100 pb-2'> <h3 className='w-100 pb-2'>
{text || 'Login'} with Lightning {text || 'Login'} with Lightning
</h3> </h3>
<div className='fw-bold text-muted pb-4'>This is the most private way to use Stacker News. Just open your Lightning wallet and scan the QR code.</div> <div className='fw-bold text-muted pb-4'>This is the most private way to use Stacker News. Just open your Lightning wallet and scan the QR code.</div>
<Row className='w-100 text-muted'> <Row className='w-100 text-muted'>
<Col className='ps-0 mb-4' md> <Col className='ps-0 mb-4' md={md} lg={lg}>
<AccordianItem <AccordianItem
header={`Which wallets can I use to ${(text || 'Login').toLowerCase()}?`} header={`Which wallets can I use to ${(text || 'Login').toLowerCase()}?`}
body={ body={
@ -92,7 +92,7 @@ function LightningExplainer ({ text, children }) {
} }
/> />
</Col> </Col>
<Col md className='mx-auto' style={{ maxWidth: '300px' }}> <Col md={md} lg={lg} className='mx-auto' style={{ maxWidth: '300px' }}>
{children} {children}
</Col> </Col>
</Row> </Row>
@ -101,9 +101,9 @@ function LightningExplainer ({ text, children }) {
) )
} }
export function LightningAuthWithExplainer ({ text, callbackUrl, multiAuth }) { export function LightningAuthWithExplainer ({ text, callbackUrl, multiAuth, backButton = true, md = 12, lg = 6 }) {
return ( return (
<LightningExplainer text={text}> <LightningExplainer text={text} backButton={backButton} md={md} lg={lg}>
<LightningAuth callbackUrl={callbackUrl} multiAuth={multiAuth} /> <LightningAuth callbackUrl={callbackUrl} multiAuth={multiAuth} />
</LightningExplainer> </LightningExplainer>
) )

4
pages/settings/index.js
View File

@ -9,7 +9,7 @@ import { gql, useMutation, useQuery } from '@apollo/client'
import { getGetServerSideProps } from '@/api/ssrApollo' import { getGetServerSideProps } from '@/api/ssrApollo'
import LoginButton from '@/components/login-button' import LoginButton from '@/components/login-button'
import { signIn } from 'next-auth/react' import { signIn } from 'next-auth/react'
import { LightningAuth } from '@/components/lightning-auth' import { LightningAuthWithExplainer } from '@/components/lightning-auth'
import { SETTINGS, SET_SETTINGS } from '@/fragments/users' import { SETTINGS, SET_SETTINGS } from '@/fragments/users'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import Info from '@/components/info' import Info from '@/components/info'
@ -706,7 +706,7 @@ function QRLinkButton ({ provider, unlink, status }) {
? unlink ? unlink
: () => showModal(onClose => : () => showModal(onClose =>
<div className='d-flex flex-column align-items-center'> <div className='d-flex flex-column align-items-center'>
<LightningAuth /> <LightningAuthWithExplainer backButton={false} md={12} lg={12} />
</div>) </div>)
return ( return (