mirror of
https://github.com/neynarxyz/create-farcaster-mini-app.git
synced 2025-12-06 17:32:31 -05:00
more refactor
This commit is contained in:
Shreyaschorge
222
src/components/ui/NeynarAuthButton/AuthDialog.tsx
Normal file
222
src/components/ui/NeynarAuthButton/AuthDialog.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
'use client';
|
||||
|
||||
export function AuthDialog({
|
||||
open,
|
||||
onClose,
|
||||
url,
|
||||
isError,
|
||||
error,
|
||||
step,
|
||||
isLoading,
|
||||
signerApprovalUrl,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
url: string;
|
||||
isError: boolean;
|
||||
error?: Error | null;
|
||||
step: 'signin' | 'access' | 'loading';
|
||||
isLoading?: boolean;
|
||||
signerApprovalUrl?: string | null;
|
||||
}) {
|
||||
if (!open) return null;
|
||||
|
||||
const getStepContent = () => {
|
||||
switch (step) {
|
||||
case 'signin':
|
||||
return {
|
||||
title: 'Signin',
|
||||
description:
|
||||
"To signin, scan the code below with your phone's camera.",
|
||||
showQR: true,
|
||||
qrUrl: url,
|
||||
showOpenButton: true,
|
||||
};
|
||||
|
||||
case 'loading':
|
||||
return {
|
||||
title: 'Setting up access...',
|
||||
description:
|
||||
'Checking your account permissions and setting up secure access.',
|
||||
showQR: false,
|
||||
qrUrl: '',
|
||||
showOpenButton: false,
|
||||
};
|
||||
|
||||
case 'access':
|
||||
return {
|
||||
title: 'Grant Access',
|
||||
description: (
|
||||
<div className='space-y-3'>
|
||||
<p className='text-gray-600 dark:text-gray-400'>
|
||||
Allow this app to access your Farcaster account:
|
||||
</p>
|
||||
<div className='space-y-2 text-sm'>
|
||||
<div className='flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg'>
|
||||
<div className='w-6 h-6 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center'>
|
||||
<svg
|
||||
className='w-3 h-3 text-green-600 dark:text-green-400'
|
||||
fill='currentColor'
|
||||
viewBox='0 0 20 20'
|
||||
>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
|
||||
clipRule='evenodd'
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className='font-medium text-gray-900 dark:text-gray-100'>
|
||||
Read Access
|
||||
</div>
|
||||
<div className='text-gray-500 dark:text-gray-400'>
|
||||
View your profile and public information
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg'>
|
||||
<div className='w-6 h-6 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center'>
|
||||
<svg
|
||||
className='w-3 h-3 text-blue-600 dark:text-blue-400'
|
||||
fill='currentColor'
|
||||
viewBox='0 0 20 20'
|
||||
>
|
||||
<path d='M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z' />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className='font-medium text-gray-900 dark:text-gray-100'>
|
||||
Write Access
|
||||
</div>
|
||||
<div className='text-gray-500 dark:text-gray-400'>
|
||||
Post casts, likes, and update your profile
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
// Show QR code if we have signer approval URL, otherwise show loading
|
||||
showQR: !!signerApprovalUrl,
|
||||
qrUrl: signerApprovalUrl || '',
|
||||
showOpenButton: !!signerApprovalUrl,
|
||||
};
|
||||
|
||||
default:
|
||||
return {
|
||||
title: 'Sign in',
|
||||
description:
|
||||
"To signin, scan the code below with your phone's camera.",
|
||||
showQR: true,
|
||||
qrUrl: url,
|
||||
showOpenButton: true,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const content = getStepContent();
|
||||
|
||||
return (
|
||||
<div className='fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm'>
|
||||
<div className='bg-white dark:bg-gray-800 rounded-xl p-6 max-w-md mx-4 shadow-2xl border border-gray-200 dark:border-gray-700'>
|
||||
<div className='flex justify-between items-center mb-4'>
|
||||
<h2 className='text-lg font-semibold text-gray-900 dark:text-gray-100'>
|
||||
{isError ? 'Error' : content.title}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
|
||||
>
|
||||
<svg
|
||||
className='w-6 h-6'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
viewBox='0 0 24 24'
|
||||
>
|
||||
<path
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
strokeWidth={2}
|
||||
d='M6 18L18 6M6 6l12 12'
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isError ? (
|
||||
<div className='text-center'>
|
||||
<div className='text-red-600 dark:text-red-400 mb-4'>
|
||||
{error?.message || 'Unknown error, please try again.'}
|
||||
</div>
|
||||
<button onClick={onClose} className='btn btn-primary'>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className='text-center'>
|
||||
<div className='mb-6'>
|
||||
{typeof content.description === 'string' ? (
|
||||
<p className='text-gray-600 dark:text-gray-400'>
|
||||
{content.description}
|
||||
</p>
|
||||
) : (
|
||||
content.description
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='mb-6 flex justify-center'>
|
||||
{content.showQR && content.qrUrl ? (
|
||||
<div className='p-4 bg-white rounded-lg'>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
|
||||
content.qrUrl
|
||||
)}`}
|
||||
alt='QR Code'
|
||||
className='w-48 h-48'
|
||||
/>
|
||||
</div>
|
||||
) : step === 'loading' || isLoading ? (
|
||||
<div className='w-48 h-48 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-lg'>
|
||||
<div className='flex flex-col items-center gap-3'>
|
||||
<div className='spinner w-8 h-8' />
|
||||
<span className='text-sm text-gray-500 dark:text-gray-400'>
|
||||
{step === 'loading'
|
||||
? 'Setting up access...'
|
||||
: 'Loading...'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{content.showOpenButton && content.qrUrl && (
|
||||
<button
|
||||
onClick={() => window.open(content.qrUrl, '_blank')}
|
||||
className='btn btn-outline flex items-center justify-center gap-2 w-full'
|
||||
>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={12}
|
||||
height={18}
|
||||
fill='none'
|
||||
>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='M11.25 8.25H.75a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5Z'
|
||||
/>
|
||||
<path
|
||||
fill='currentColor'
|
||||
d='M9.75 6.75a.75.75 0 0 0-1.5 0v3a.75.75 0 0 0 1.5 0v-3Z'
|
||||
/>
|
||||
</svg>
|
||||
I'm using my phone →
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user