Shahadath Hossen Sajib Posts

Shahadath Hossen Sajib

•Created by Shahadath Hossen Sajib on 2/8/2025 in #general-help

Turnstile: Seeing "$" at the bottom of the page in production in remix app.

export function RootFileLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  const data = useLoaderData()
  const turnstileSiteKey = data?.ENV?.turnstileSiteKey
  const [verified, setVerified] = useState(false)

  useEffect(() => {
    const checkCaptcha = () => {
      if (window?.turnstile) {
        window?.turnstile?.render('#captcha-container', {
          sitekey: turnstileSiteKey,
          // className: 'cf-turnstile',
          callback: (token: string) => {
            // console.log('Captcha verified:', token)
            setVerified(true)
          },
        })
      }
    }

    // * Prevent loading the script multiple times
    if (!document.getElementById('turnstile-script')) {
      const script = document.createElement('script')
      script.id = 'turnstile-script'
      script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
      script.async = true
      script.defer = true
      script.onload = checkCaptcha
      document.body.appendChild(script)
    } else {
      checkCaptcha() // * If already loaded, trigger manually
    }
  }, [])

  return (
    <html lang="en" data-theme="light">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <Meta />
        <Links />
       
      </head>
      <body>
        {verified ? (
          <>
            <CookieConsentBanner />
            <Toaster position="top-right" />
            {children}
          </>
        ) : (
          <div className="flex h-screen items-center justify-center bg-gray-100">
            <div id="captcha-container" className='cf-turnstile'></div> 
          </div>
        )}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

export function RootFileLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  const data = useLoaderData()
  const turnstileSiteKey = data?.ENV?.turnstileSiteKey
  const [verified, setVerified] = useState(false)

  useEffect(() => {
    const checkCaptcha = () => {
      if (window?.turnstile) {
        window?.turnstile?.render('#captcha-container', {
          sitekey: turnstileSiteKey,
          // className: 'cf-turnstile',
          callback: (token: string) => {
            // console.log('Captcha verified:', token)
            setVerified(true)
          },
        })
      }
    }

    // * Prevent loading the script multiple times
    if (!document.getElementById('turnstile-script')) {
      const script = document.createElement('script')
      script.id = 'turnstile-script'
      script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
      script.async = true
      script.defer = true
      script.onload = checkCaptcha
      document.body.appendChild(script)
    } else {
      checkCaptcha() // * If already loaded, trigger manually
    }
  }, [])

  return (
    <html lang="en" data-theme="light">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <Meta />
        <Links />
       
      </head>
      <body>
        {verified ? (
          <>
            <CookieConsentBanner />
            <Toaster position="top-right" />
            {children}
          </>
        ) : (
          <div className="flex h-screen items-center justify-center bg-gray-100">
            <div id="captcha-container" className='cf-turnstile'></div> 
          </div>
        )}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

This is the code I am using.

1 replies

Gaming

Programming