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()
return (
<Container>
<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'>
{text || 'Login'} with Lightning
</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>
<Row className='w-100 text-muted'>
<Col className='ps-0 mb-4' md>
<Col className='ps-0 mb-4' md={md} lg={lg}>
<AccordianItem
header={`Which wallets can I use to ${(text || 'Login').toLowerCase()}?`}
body={
@ -92,7 +92,7 @@ function LightningExplainer ({ text, children }) {
}
/>
</Col>
<Col md className='mx-auto' style={{ maxWidth: '300px' }}>
<Col md={md} lg={lg} className='mx-auto' style={{ maxWidth: '300px' }}>
{children}
</Col>
</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 (
<LightningExplainer text={text}>
<LightningExplainer text={text} backButton={backButton} md={md} lg={lg}>
<LightningAuth callbackUrl={callbackUrl} multiAuth={multiAuth} />
</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 LoginButton from '@/components/login-button'
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 { useRouter } from 'next/router'
import Info from '@/components/info'
@ -706,7 +706,7 @@ function QRLinkButton ({ provider, unlink, status }) {
? unlink
: () => showModal(onClose =>
<div className='d-flex flex-column align-items-center'>
<LightningAuth />
<LightningAuthWithExplainer backButton={false} md={12} lg={12} />
</div>)
return (