feat(evm): add turnstile

apps/evm/.env.example

@@ -33,3 +33,6 @@ SENTRY_AUTH_TOKEN=
 # REDIS CACHE
 KV_REST_API_URL="https://communal-hen-23354.upstash.io"
 KV_REST_API_TOKEN=
+
+
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=

apps/evm/package.json

@@ -28,6 +28,7 @@
     "@gobob/utils": "workspace:^",
     "@lingui/core": "catalog:",
     "@lingui/react": "catalog:",
+    "@marsidev/react-turnstile": "^1.1.0",
     "@next/third-parties": "catalog:",
     "@react-aria/button": "catalog:",
     "@react-aria/focus": "catalog:",

apps/evm/src/app/[lang]/nested-providers.tsx

@@ -10,7 +10,7 @@ import { useLocalStorage } from 'usehooks-ts';
 import { isAddressEqual } from 'viem';
 import { useAccount, useAccountEffect, useChainId, useConfig, useSwitchChain } from 'wagmi';
 
-import { Footer, Header, Layout, ReceiveModal } from '@/components';
+import { Footer, Header, Layout, ReceiveModal, TurnstileModal } from '@/components';
 import { ConnectProvider } from '@/connect-ui';
 import { isClient, L2_CHAIN, LocalStorageKey } from '@/constants';
 import { useBalances, useGetUser, useLogout, useTokens } from '@/hooks';
@@ -148,6 +148,7 @@ export function NestedProviders({ children }: PropsWithChildren) {
             {children}
             <Footer />
           </Layout>
+          <TurnstileModal />
         </ConnectProvider>
       </BOBUIProvider>
     </StyledComponentsRegistry>

apps/evm/src/app/[lang]/sign-up/SignUp.tsx

@@ -5,20 +5,22 @@ import { Button, Divider, Flex, P, toast } from '@gobob/ui';
 import { Trans, t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { useMutation } from '@tanstack/react-query';
+import { useStore } from '@tanstack/react-store';
 import { useParams, useRouter } from 'next/navigation';
 import { FormEventHandler, Suspense, useEffect, useState } from 'react';
 import { useAccount, useSwitchChain } from 'wagmi';
 
 import { Auditors, HighlightText, ReferralInput } from './components';
 import { StyledAuthCard, StyledH1 } from './SignUp.style';
 
+import { chakraPetch } from '@/app/fonts';
 import { Geoblock, LoginSection, Main } from '@/components';
 import { useConnectModal } from '@/connect-ui';
 import { L1_CHAIN, L2_CHAIN, RoutesPath, isValidChain } from '@/constants';
 import { useGetUser, useSignUp } from '@/hooks';
 import { fusionKeys } from '@/lib/react-query';
+import { store } from '@/lib/store';
 import { apiClient } from '@/utils';
-import { chakraPetch } from '@/app/fonts';
 
 const SignUp = (): JSX.Element | null => {
   const { address, chain } = useAccount();
@@ -30,9 +32,20 @@ const SignUp = (): JSX.Element | null => {
   const params = useParams();
   const { data: user } = useGetUser();
 
+  const { token: turnstileToken } = useStore(store, (state) => state.shared.turnstile);
+
   const [referralCode, setReferralCode] = useState('');
 
-  const { mutate: signUp, isPending: isLoadingSignUp } = useSignUp();
+  const { mutate: signUp, isPending: isLoadingSignUp } = useSignUp({
+    onSuccess: () =>
+      store.setState((s) => ({
+        ...s,
+        shared: {
+          ...s.shared,
+          turnstile: { isOpen: false }
+        }
+      }))
+  });
 
   const {
     mutateAsync: validateReferralCodeAsync,
@@ -74,7 +87,17 @@ const SignUp = (): JSX.Element | null => {
             }
           }
 
-          return signUp({ address });
+          if (!turnstileToken) {
+            return store.setState((s) => ({
+              ...s,
+              shared: {
+                ...s.shared,
+                turnstile: { isOpen: true, onSuccess: (token) => signUp({ address, turnstileToken: token }) }
+              }
+            }));
+          }
+
+          return signUp({ address, turnstileToken });
         }
       });
     }
@@ -83,7 +106,17 @@ const SignUp = (): JSX.Element | null => {
       await switchChainAsync({ chainId: L1_CHAIN });
     }
 
-    return signUp({ address, referralCode });
+    if (!turnstileToken) {
+      return store.setState((s) => ({
+        ...s,
+        shared: {
+          ...s.shared,
+          turnstile: { isOpen: true, onSuccess: (token) => signUp({ address, turnstileToken: token }) }
+        }
+      }));
+    }
+
+    return signUp({ address, turnstileToken });
   };
 
   return (

apps/evm/src/components/SignUpButton/SignUpButton.tsx

@@ -3,10 +3,12 @@ import { Button, ButtonProps, toast } from '@gobob/ui';
 import { Trans } from '@lingui/macro';
 import { mergeProps } from '@react-aria/utils';
 import { useAccount, useSwitchChain } from 'wagmi';
+import { useStore } from '@tanstack/react-store';
 
 import { useConnectModal } from '@/connect-ui';
 import { L2_CHAIN, isValidChain } from '@/constants';
 import { useSignUp } from '@/hooks';
+import { store } from '@/lib/store';
 
 type SignUpButtonProps = ButtonProps;
 
@@ -15,7 +17,18 @@ const SignUpButton = (props: SignUpButtonProps): JSX.Element => {
   const { open } = useConnectModal();
   const { address, chain } = useAccount();
 
-  const { mutate: signUp, isPending: isSigningUp } = useSignUp();
+  const { token: turnstileToken } = useStore(store, (state) => state.shared.turnstile);
+
+  const { mutate: signUp, isPending: isSigningUp } = useSignUp({
+    onSuccess: () =>
+      store.setState((s) => ({
+        ...s,
+        shared: {
+          ...s.shared,
+          turnstile: { isOpen: false }
+        }
+      }))
+  });
 
   const handlePress = async () => {
     if (!address) {
@@ -30,7 +43,17 @@ const SignUpButton = (props: SignUpButtonProps): JSX.Element => {
             }
           }
 
-          return signUp({ address });
+          if (!turnstileToken) {
+            return store.setState((s) => ({
+              ...s,
+              shared: {
+                ...s.shared,
+                turnstile: { isOpen: true, onSuccess: (token) => signUp({ address, turnstileToken: token }) }
+              }
+            }));
+          }
+
+          return signUp({ address, turnstileToken });
         }
       });
     }
@@ -39,7 +62,17 @@ const SignUpButton = (props: SignUpButtonProps): JSX.Element => {
       await switchChainAsync({ chainId: L2_CHAIN });
     }
 
-    return signUp({ address });
+    if (!turnstileToken) {
+      return store.setState((s) => ({
+        ...s,
+        shared: {
+          ...s.shared,
+          turnstile: { isOpen: true, onSuccess: (token) => signUp({ address, turnstileToken: token }) }
+        }
+      }));
+    }
+
+    return signUp({ address, turnstileToken });
   };
 
   return <Button loading={isSigningUp} {...mergeProps(props, { onPress: handlePress })} />;

apps/evm/src/components/TurnstileModal/TurnstileModal.tsx

@@ -0,0 +1,36 @@
+import { Modal, ModalBody, ModalHeader } from '@gobob/ui';
+import { useStore } from '@tanstack/react-store';
+import { Turnstile } from '@marsidev/react-turnstile';
+import { Trans } from '@lingui/macro';
+
+import { store } from '@/lib/store';
+
+const TurnstileModal = () => {
+  const { isOpen, onSuccess } = useStore(store, (state) => state.shared.turnstile);
+
+  const handleSuccess = (token: string) => {
+    onSuccess?.(token);
+
+    store.setState((s) => ({ ...s, shared: { ...s.shared, turnstile: { isOpen: false, token } } }));
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={() => store.setState((s) => ({ ...s, shared: { ...s.shared, turnstile: { isOpen: false } } }))}
+    >
+      <ModalHeader>
+        <Trans>Verify you are human</Trans>
+      </ModalHeader>
+      <ModalBody>
+        <Turnstile
+          siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
+          style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+          onSuccess={handleSuccess}
+        />
+      </ModalBody>
+    </Modal>
+  );
+};
+
+export { TurnstileModal };

apps/evm/src/components/TurnstileModal/index.tsx

@@ -0,0 +1 @@
+export { TurnstileModal } from './TurnstileModal';

apps/evm/src/components/index.ts

@@ -12,3 +12,4 @@ export * from './SignUpButton';
 export * from './SpiceAmount';
 export * from './Trapezoid';
 export * from './WithdrawAlert';
+export * from './TurnstileModal';

apps/evm/src/hooks/tests/useSignUp.test.tsx

@@ -53,6 +53,7 @@ describe('useSignUp', () => {
   it('calls refetchUser on successful sign-up', async () => {
     vi.useFakeTimers();
     const mockAddress = '0x123';
+    const mockTurnstileToken = '0x12345';
     const mockChainId = 1;
     const mockNonce = 'mock-nonce';
     const mockRefetchUser = vi.fn();
@@ -69,13 +70,13 @@ describe('useSignUp', () => {
       wrapper
     });
 
-    await act(() => result.current.mutate({ address: mockAddress }));
+    await act(() => result.current.mutate({ address: mockAddress, turnstileToken: mockTurnstileToken }));
 
     vi.runAllTimers();
 
     expect(apiClient.getNonce).toHaveBeenCalled();
     expect(mockSignMessageAsync).toHaveBeenCalledWith({ message: 'Message for 0x123' });
-    expect(apiClient.signUp).toHaveBeenCalledWith(expect.any(Object), 'mock-signature');
+    expect(apiClient.signUp).toHaveBeenCalledWith(expect.any(Object), mockTurnstileToken, 'mock-signature');
     expect(mockRefetchUser).toHaveBeenCalled();
   });
 
@@ -91,7 +92,7 @@ describe('useSignUp', () => {
       wrapper
     });
 
-    await act(() => result.current.mutate({ address: mockAddress }));
+    await act(() => result.current.mutate({ address: mockAddress, turnstileToken: '' }));
 
     expect(toast.error).toHaveBeenCalledWith('User rejected the request');
   });
@@ -108,7 +109,7 @@ describe('useSignUp', () => {
       wrapper
     });
 
-    await act(() => result.current.mutate({ address: mockAddress }));
+    await act(() => result.current.mutate({ address: mockAddress, turnstileToken: '' }));
 
     expect(toast.error).toHaveBeenCalledWith('Network error');
   });

apps/evm/src/hooks/useSignUp.ts

@@ -12,7 +12,11 @@ import { useGetUser } from './useGetUser';
 import { fusionKeys } from '@/lib/react-query';
 import { apiClient } from '@/utils';
 
-const useSignUp = () => {
+type UseSignUpProps = {
+  onSuccess?: () => void;
+};
+
+const useSignUp = ({ onSuccess }: UseSignUpProps = {}) => {
   const { signMessageAsync } = useSignMessage();
   const { chain } = useAccount();
 
@@ -22,7 +26,14 @@ const useSignUp = () => {
 
   return useMutation({
     mutationKey: fusionKeys.signUp(),
-    mutationFn: async ({ address }: { address: Address; referralCode?: string }) => {
+    mutationFn: async ({
+      address,
+      turnstileToken
+    }: {
+      address: Address;
+      turnstileToken: string;
+      referralCode?: string;
+    }) => {
       const nonce = await apiClient.getNonce();
 
       const message = new SiweMessage({
@@ -39,10 +50,11 @@ const useSignUp = () => {
         message: message.prepareMessage()
       });
 
-      await apiClient.signUp(message, signature);
+      await apiClient.signUp(message, turnstileToken, signature);
     },
     onSuccess: (_, { address, referralCode }) => {
       sendGAEvent('event', 'signup', { evm_address: JSON.stringify(address), referral_code: referralCode });
+      onSuccess?.();
       setTimeout(() => refetchUser(), 100);
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

apps/evm/src/lib/store.ts

@@ -35,6 +35,11 @@ type SharedStore = {
       };
     };
   };
+  turnstile: {
+    isOpen: boolean;
+    token?: string;
+    onSuccess?: (token: string) => void;
+  };
 };
 
 type BridgeStore = {
@@ -71,6 +76,9 @@ const store = new StoreLib<Store>({
           type: undefined
         }
       }
+    },
+    turnstile: {
+      isOpen: false
     }
   },
   bridge: {