diff --git a/claim-tokens/serverless.yml b/claim-tokens/serverless.yml index 5c8dc392..7123e463 100644 --- a/claim-tokens/serverless.yml +++ b/claim-tokens/serverless.yml @@ -20,11 +20,6 @@ functions: IP_QUALITY_SCORE_SECRET_KEY: ${env:IP_QUALITY_SCORE_SECRET_KEY, ''} PORTAL_DOMAIN_URL: ${env:PORTAL_DOMAIN_URL, 'http://127.0.0.1:3001'} RECAPTCHA_SECRET_KEY: ${env:RECAPTCHA_SECRET_KEY, ''} - events: - - http: - cors: true - method: post - path: /claim handler: ./index.post iamRoleStatements: - Effect: Allow diff --git a/webapp/app/[locale]/get-started/_components/welcomePack.tsx b/webapp/app/[locale]/get-started/_components/welcomePack.tsx index 37861820..b30b084e 100644 --- a/webapp/app/[locale]/get-started/_components/welcomePack.tsx +++ b/webapp/app/[locale]/get-started/_components/welcomePack.tsx @@ -1,25 +1,15 @@ 'use client' -import { useMutation } from '@tanstack/react-query' import { hemi } from 'app/networks' import { bitcoinTestnet } from 'btc-wallet/chains' import { ExternalLink } from 'components/externalLink' -import fetch from 'fetch-plus-plus' import hemiSocials from 'hemi-socials' -import { useLocale, useTranslations } from 'next-intl' -import { useReCaptcha } from 'next-recaptcha-v3' -import { FormEvent, ReactNode, useState } from 'react' -import { Button } from 'ui-common/components/button' -import { Card } from 'ui-common/components/card' -import { useQueryParams } from 'ui-common/hooks/useQueryParams' +import { useTranslations } from 'next-intl' import { sepolia } from 'viem/chains' import { Btc } from './icons/btc' import { Eth } from './icons/eth' import { Hemi } from './icons/hemi' -import { Profile } from './quickStart' - -const EmailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ const giveAwayTokens = hemi.testnet ? [ @@ -67,275 +57,36 @@ const CoinRow = ({ ) -const DiscordIcon = () => ( - - - - - - - - - - -) - -const EmailIcon = () => ( - - - -) - -const ErrorIcon = () => ( - - - -) - -const ResetIcon = () => ( - - - -) - -const PostClaimContainer = ({ children }: { children: ReactNode }) => ( - -
- {children} -
- -) - -type EmailState = 'initial' | 'sent' | 'failed' - const { discordUrl } = hemiSocials export const WelcomePack = function () { - const locale = useLocale() const t = useTranslations('get-started') - const { profile } = useQueryParams<{ profile: Profile }>().queryParams - - const { executeRecaptcha, loaded: recaptchaLoaded } = useReCaptcha() - - const [email, setEmail] = useState('') - const [receiveUpdates, setReceiveUpdates] = useState(false) - - const [emailState, setEmailState] = useState('initial') - - const { isPending: isClaiming, mutate: claimTokens } = useMutation< - void, - Error, - { email: string; profile: Profile; receiveUpdates: boolean } - >({ - mutationFn: async function claimTokens(body) { - const token = await executeRecaptcha('claim_tokens') - - return fetch(`${process.env.NEXT_PUBLIC_CLAIM_TOKENS_URL}/claim`, { - body: JSON.stringify({ - ...body, - token, - }), - headers: { - 'Content-Type': 'application/json', - }, - method: 'POST', - }) - }, - onError() { - setEmailState('failed') - }, - onSuccess() { - setEmailState('sent') - }, - }) - - const canClaim = !isClaiming && recaptchaLoaded && EmailRegex.test(email) - - const handleSubmit = function (e: FormEvent) { - e.preventDefault() - if (!canClaim) { - return - } - claimTokens({ email, profile, receiveUpdates }) - } - - const onTryAgain = function () { - setEmailState('initial') - setEmail('') - } - - const linksCss = - 'cursor-pointer underline text-blue-600 hover:text-blue-800 visited:text-purple-600' - - const submitButton = ( - - ) - return ( <>

{t('network.welcome-pack')}

- {t('network.welcome-pack-description')} + {t.rich('network.welcome-pack-description', { + channel: (chunk: string) => ( + {chunk} + ), + })}

{giveAwayTokens.map(({ amount, icon, symbol }) => ( ))}
- {emailState === 'initial' && ( - <> -
-
- setEmail(e.target.value)} - placeholder="joe@email.com" - type="email" - value={email} - /> -
- {submitButton} -
-
-
- setReceiveUpdates(e.target.checked)} - placeholder={t('network.email-placeholder')} - type="checkbox" - /> - -
-
{submitButton}
-
- {/* See https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed */} - {t.rich('network.recaptcha-terms-and-conditions', { - privacy: (chunk: string) => ( - - {chunk} - - ), - terms: (chunk: string) => ( - - {chunk} - - ), - })} -
-
- - )} - {emailState === 'sent' && ( - -
- -

{t('network.email-sent')}

-
-
- -

- {t.rich('network.did-not-receive-try-again', { - button: (chunk: string) => ( - - ), - })} -

-
- - )} - {emailState === 'failed' && ( - -
- -

- {t('network.email-failed')} -

-
-

- {t.rich('network.email-failed-retry', { - button: (chunk: string) => ( - - ), - discord: () => , - link: (chunk: string) => ( - - {chunk} - - ), - })} -

- - )} +
+ + {t('network.claim-my-tokens')} + +
) } diff --git a/webapp/app/[locale]/get-started/page.tsx b/webapp/app/[locale]/get-started/page.tsx index afebd90b..69e3bebf 100644 --- a/webapp/app/[locale]/get-started/page.tsx +++ b/webapp/app/[locale]/get-started/page.tsx @@ -69,11 +69,9 @@ const NetworkPage = function () {
- }> - - - - + + +
diff --git a/webapp/app/[locale]/layout.tsx b/webapp/app/[locale]/layout.tsx index f73f7547..34c15ec0 100644 --- a/webapp/app/[locale]/layout.tsx +++ b/webapp/app/[locale]/layout.tsx @@ -7,7 +7,6 @@ import { TunnelHistoryProvider } from 'app/context/tunnelHistoryContext' import { locales, type Locale } from 'app/i18n' import { AppScreen } from 'components/appScreen' import { ErrorBoundary } from 'components/errorBoundary' -import { RecaptchaContext } from 'components/recaptcha' import { WalletsContext } from 'context/walletsContext' import { notFound } from 'next/navigation' import { NextIntlClientProvider } from 'next-intl' @@ -41,22 +40,20 @@ export default async function RootLayout({ - - - - -
-
- -
- - {children} - + + + +
+
+
- - - - + + {children} + +
+ + + diff --git a/webapp/messages/en.json b/webapp/messages/en.json index 20171611..ade839a8 100644 --- a/webapp/messages/en.json +++ b/webapp/messages/en.json @@ -261,12 +261,11 @@ "network-name": "Network name", "page-subtitle": "Add Ethereum Sepolia & Hemi testnet to your wallet", "page-title": "Add Hemi to your wallet", - "recaptcha-terms-and-conditions": "This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.", "receive-updates": "Receive marketing updates", "rpc-url": "RPC URL", "troubleshoot-other-errors": "Having issues? Contact the Hemi team on Discord.", "welcome-pack": "Welcome Pack", - "welcome-pack-description": "Sign up to receive our Hemi testnet welcome pack." + "welcome-pack-description": "Join our Discord server and visit the #claim-capsule channel to claim your onboarding Capsule." } }, "token-selector": { diff --git a/webapp/messages/es.json b/webapp/messages/es.json index 12fa2f6e..cac010c0 100644 --- a/webapp/messages/es.json +++ b/webapp/messages/es.json @@ -261,12 +261,11 @@ "network-name": "Nombre de la red", "page-subtitle": "Añada Ethereum Sepolia y la red de prueba Hemi ahora a su billetera", "page-title": "Añada Hemi a su billetera", - "recaptcha-terms-and-conditions": "Este sitio está protegido por reCAPTCHA y se aplican la Política de Privacidad y los Términos y Condiciones del servicio de Google.", "receive-updates": "Quiero recibir actualizaciones de marketing", "rpc-url": "URL de RPC", "troubleshoot-other-errors": "¿Tiene problemas? Contacte al equipo de Hemi enDiscord.", "welcome-pack": "Pack de Bienvenida", - "welcome-pack-description": "Suscríbase para recibir nuestro paquete de bienvenida de la red de prueba Hemi." + "welcome-pack-description": "Únase a nuestro servidor de Discord y visite el canal #claim-capsule para reclamar su Cápsula de incorporación." } }, "token-selector": {