@dynamic-labs/sdk-react-core/src/lib/views/FarcasterQrCodeView/FarcasterQrCodeView.js

A React SDK for implementing wallet web3 authentication and authorization to your website.

'use client'
import { jsx } from 'react/jsx-runtime';
import { useState, useRef, useEffect } from 'react';
import { ProviderEnum } from '@dynamic-labs/sdk-api-core';
import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
import { FarcasterConnectView } from '../FarcasterConnectView/FarcasterConnectView.js';
import { useSocialAuth } from '../../utils/hooks/useSocialAuth/useSocialAuth.js';
import { useNonce } from '../../store/state/nonce/nonce.js';

/**
 * This view is used to display the QR code for the farcaster connection.
 * It is only used in the login view when Farcaster is the only available login method.
 */
const FarcasterQrCodeView = () => {
    const { setError } = useErrorContext();
    const [url, setUrl] = useState(undefined);
    // this is used to prevent the connectSocialAccount from being more than once
    const triggeredConnect = useRef(false);
    const nonce = useNonce();
    const { connectSocialAccount } = useSocialAuth({
        onError: () => setError('Something went wrong'),
        onFarcasterUrl: (url) => setUrl(url),
    });
    useEffect(() => {
        // wait until the nonce is fetched
        if (triggeredConnect.current || !nonce)
            return;
        triggeredConnect.current = true;
        connectSocialAccount({
            authMode: 'signin',
            provider: ProviderEnum.Farcaster,
        });
    }, [connectSocialAccount, nonce]);
    return jsx(FarcasterConnectView, { url: url !== null && url !== void 0 ? url : '' });
};

export { FarcasterQrCodeView };