diff --git a/.env.dev b/.env.dev index 228087110e..51feee5bbd 100644 --- a/.env.dev +++ b/.env.dev @@ -32,6 +32,7 @@ NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS=0xa219c6722008aa22828b31a13ab9ba93bb91222c NEXT_PUBLIC_GOOGLE_CLIENT_ID=315393900359-2r9fundftis7dc0tdeo2hf8630nfdd8h.apps.googleusercontent.com NEXT_PUBLIC_TWITTER_CLIENT_ID=bWF1QmMzY2JPLTB2alJiZHdsMjI6MTpjaQ NEXT_PUBLIC_FACEBOOK_CLIENT_ID=823885921293850 +NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=0x4AAAAAAAKiedvR5qiLUhIs DEBUG=false PLAYWRIGHT_RUNTIME_ENV=ci PLAYWRIGHT_TEST_BASE_URL=https://web-develop.matters.town diff --git a/.env.prod b/.env.prod index b21a036455..0af85a78ac 100644 --- a/.env.prod +++ b/.env.prod @@ -27,6 +27,7 @@ NEXT_PUBLIC_LOGBOOKS_URL=https://logbook.matters.town NEXT_PUBLIC_ALCHEMY_KEY=bOu-fCphi9mvePsxg968Qe-pidHQNdlT NEXT_PUBLIC_USDT_CONTRACT_ADDRESS=0xc2132D05D31c914a87C6611C10748AEb04B58e8F NEXT_PUBLIC_CURATION_CONTRACT_ADDRESS=0x5edebbdae7b5c79a69aacf7873796bb1ec664db8 +NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY=0x4AAAAAAAKVODkJMwfIxG78 DEBUG=false NEXT_PUBLIC_GOOGLE_CLIENT_ID= NEXT_PUBLIC_TWITTER_CLIENT_ID=cmdKbUlyd1ZZZDZYa3dTampidGo6MTpjaQ diff --git a/next.config.js b/next.config.js index bbb454dda3..5adddc3ab3 100644 --- a/next.config.js +++ b/next.config.js @@ -49,6 +49,12 @@ const nextConfig = { }, ], }) + // config.resolve.alias["react"] = path.resolve("./node_modules/react"); + config.resolve.alias= { + ...config.resolve.alias, + // "react/jsx-dev-runtime": "react/jsx-dev-runtime.js", + "react/jsx-runtime": "react/jsx-runtime.js" + } return config }, diff --git a/package-lock.json b/package-lock.json index b9ddb188d8..aff7d543c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -101,6 +101,7 @@ "@formatjs/cli": "^6.1.3", "@graphql-codegen/cli": "3.3.1", "@graphql-codegen/client-preset": "3.0.1", + "@marsidev/react-turnstile": "^0.3.1", "@playwright/test": "^1.35.1", "@storybook/addon-a11y": "^7.0.26", "@storybook/addon-actions": "^7.0.26", @@ -152,6 +153,7 @@ "postcss-mixins": "^9.0.4", "postcss-preset-env": "^9.0.0", "prettier": "^3.0.0", + "react-turnstile": "^1.1.2", "storybook": "^7.0.26", "storybook-css-modules": "^1.0.8", "stylelint": "^15.10.1", @@ -160,7 +162,7 @@ "stylelint-config-standard": "^34.0.0", "stylelint-prettier": "^4.0.0", "ts-node": "^10.9.1", - "typescript": "^5.1.6", + "typescript": "^5.2.2", "webpack-merge": "^5.9.0" }, "engines": { @@ -6904,6 +6906,16 @@ "resolved": "https://registry.npmjs.org/@lokesh.dhakar/quantize/-/quantize-1.3.0.tgz", "integrity": "sha512-4KBSyaMj65d8A+2vnzLxtHFu4OmBU4IKO0yLxZ171Itdf9jGV4w+WbG7VsKts2jUdRkFSzsZqpZOz6hTB3qGAw==" }, + "node_modules/@marsidev/react-turnstile": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.3.1.tgz", + "integrity": "sha512-XnpIUqufuZp2VoC14fmYztB2/8lSABh8eFG6TWAR7Loipdy0p2lZXzuvUOTcQl69j1XKvWu3WChFCBWx/Cbd1A==", + "dev": true, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@matters/apollo-upload-client": { "version": "11.1.0", "resolved": "https://registry.npmjs.org/@matters/apollo-upload-client/-/apollo-upload-client-11.1.0.tgz", @@ -33350,6 +33362,16 @@ "react-dom": "^15.4.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-turnstile": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/react-turnstile/-/react-turnstile-1.1.2.tgz", + "integrity": "sha512-wfhSf4JtXlmLRkfxMryU8yEeCbh401muKoInhx+TegYwP8RprUW5XPZa8WnCNZiYpMy1i6IXAb1Ar7xj5HxJag==", + "dev": true, + "peerDependencies": { + "react": ">= 17.0.0", + "react-dom": ">= 17.0.0" + } + }, "node_modules/react-use-gesture": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.1.3.tgz", @@ -37130,9 +37152,9 @@ } }, "node_modules/typescript": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", - "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -44054,6 +44076,12 @@ "resolved": "https://registry.npmjs.org/@lokesh.dhakar/quantize/-/quantize-1.3.0.tgz", "integrity": "sha512-4KBSyaMj65d8A+2vnzLxtHFu4OmBU4IKO0yLxZ171Itdf9jGV4w+WbG7VsKts2jUdRkFSzsZqpZOz6hTB3qGAw==" }, + "@marsidev/react-turnstile": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.3.1.tgz", + "integrity": "sha512-XnpIUqufuZp2VoC14fmYztB2/8lSABh8eFG6TWAR7Loipdy0p2lZXzuvUOTcQl69j1XKvWu3WChFCBWx/Cbd1A==", + "dev": true + }, "@matters/apollo-upload-client": { "version": "11.1.0", "resolved": "https://registry.npmjs.org/@matters/apollo-upload-client/-/apollo-upload-client-11.1.0.tgz", @@ -64009,6 +64037,12 @@ "prop-types": "^15.5.7" } }, + "react-turnstile": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/react-turnstile/-/react-turnstile-1.1.2.tgz", + "integrity": "sha512-wfhSf4JtXlmLRkfxMryU8yEeCbh401muKoInhx+TegYwP8RprUW5XPZa8WnCNZiYpMy1i6IXAb1Ar7xj5HxJag==", + "dev": true + }, "react-use-gesture": { "version": "9.1.3", "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.1.3.tgz", @@ -66905,9 +66939,9 @@ } }, "typescript": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", - "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==" + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==" }, "ua-parser-js": { "version": "0.7.35", diff --git a/package.json b/package.json index 661ce88d0d..79d4f35885 100644 --- a/package.json +++ b/package.json @@ -127,6 +127,7 @@ "@formatjs/cli": "^6.1.3", "@graphql-codegen/cli": "3.3.1", "@graphql-codegen/client-preset": "3.0.1", + "@marsidev/react-turnstile": "^0.3.1", "@playwright/test": "^1.35.1", "@storybook/addon-a11y": "^7.0.26", "@storybook/addon-actions": "^7.0.26", @@ -178,6 +179,7 @@ "postcss-mixins": "^9.0.4", "postcss-preset-env": "^9.0.0", "prettier": "^3.0.0", + "react-turnstile": "^1.1.2", "storybook": "^7.0.26", "storybook-css-modules": "^1.0.8", "stylelint": "^15.10.1", @@ -186,7 +188,7 @@ "stylelint-config-standard": "^34.0.0", "stylelint-prettier": "^4.0.0", "ts-node": "^10.9.1", - "typescript": "^5.1.6", + "typescript": "^5.2.2", "webpack-merge": "^5.9.0" }, "overrides": { diff --git a/src/components/Forms/EmailSignUpForm/Init.tsx b/src/components/Forms/EmailSignUpForm/Init.tsx index b5265853e7..e8423e42eb 100644 --- a/src/components/Forms/EmailSignUpForm/Init.tsx +++ b/src/components/Forms/EmailSignUpForm/Init.tsx @@ -1,6 +1,8 @@ +import type { TurnstileInstance } from '@marsidev/react-turnstile' +import { Turnstile } from '@marsidev/react-turnstile' import { useFormik } from 'formik' import _pickBy from 'lodash/pickBy' -import { useContext } from 'react' +import { useContext, useRef } from 'react' import { FormattedMessage, useIntl } from 'react-intl' import { @@ -18,7 +20,7 @@ import { IconLeft20, LanguageContext, Media, - ReCaptchaContext, + // ReCaptchaContext, TextIcon, useMutation, } from '~/components' @@ -59,9 +61,8 @@ const Init: React.FC = ({ const isNormal = authFeedType === 'normal' const isWallet = authFeedType === 'wallet' - const { token, refreshToken } = useContext(ReCaptchaContext) + const turnstileRef = useRef(null) - // const { token, refreshToken } = useContext(ReCaptchaContext) const [sendCode] = useMutation( SEND_CODE, undefined, @@ -93,7 +94,12 @@ const Init: React.FC = ({ const redirectUrl = signupCallbackUrl(email) await sendCode({ variables: { - input: { email, type: 'register', token, redirectUrl }, + input: { + email, + type: 'register', + token: turnstileRef.current?.getResponse(), + redirectUrl, + }, }, }) @@ -104,16 +110,22 @@ const Init: React.FC = ({ const [messages, codes] = parseFormSubmitErrors(error as any) setFieldError('email', intl.formatMessage(messages[codes[0]])) - - if (refreshToken) { - refreshToken() - } } }, }) const InnerForm = (
+ setStatus('error')} + // onExpire={() => setStatus('expired')} + // onSuccess={token => { setToken(token); setStatus('solved') }} + /> + } type="email" diff --git a/src/views/ArticleDetail/AppreciationButton/index.tsx b/src/views/ArticleDetail/AppreciationButton/index.tsx index 4691d137d4..b50baa8b6b 100644 --- a/src/views/ArticleDetail/AppreciationButton/index.tsx +++ b/src/views/ArticleDetail/AppreciationButton/index.tsx @@ -1,10 +1,12 @@ import { useQuery } from '@apollo/react-hooks' -import { useContext, useState } from 'react' +import type { TurnstileInstance } from '@marsidev/react-turnstile' +import { Turnstile } from '@marsidev/react-turnstile' +import { useContext, useRef, useState } from 'react' import { useDebouncedCallback } from 'use-debounce' import { APPRECIATE_DEBOUNCE, EXTERNAL_LINKS, Z_INDEX } from '~/common/enums' import { - ReCaptchaContext, + // ReCaptchaContext, toast, Tooltip, Translate, @@ -41,7 +43,10 @@ const AppreciationButton = ({ disabled, }: AppreciationButtonProps) => { const viewer = useContext(ViewerContext) - const { token, refreshToken } = useContext(ReCaptchaContext) + + const turnstileRef = useRef(null) + // const { token, refreshToken } = useContext(ReCaptchaContext) + const { data, client } = useQuery(CLIENT_PREFERENCE, { variables: { id: 'local' }, }) @@ -67,9 +72,9 @@ const AppreciationButton = ({ variables: { id: article.id, amount, - token, + token: turnstileRef.current?.getResponse(), }, - }).then(refreshToken) + }) // .then(refreshToken) } catch (e) { console.error(e) } @@ -87,7 +92,7 @@ const AppreciationButton = ({ variables: { id: article.id, amount: 1, - token, + token: turnstileRef.current?.getResponse(), superLike: true, }, update: (cache) => { @@ -216,13 +221,21 @@ const AppreciationButton = ({ // Appreciable if (canAppreciate && !disabled) { return ( - 0 ? appreciatedCount : undefined} - total={total} - isSuperLike={isSuperLike} - superLiked={superLiked} - /> + <> + + 0 ? appreciatedCount : undefined} + total={total} + isSuperLike={isSuperLike} + superLiked={superLiked} + /> + ) }