feat(evm): add turnstile

bob-collective · Jan 28, 2025 · 97d2e12 · 97d2e12
1 parent e62cdc5
commit 97d2e12
Show file tree

Hide file tree

Showing 16 changed files with 225 additions and 70 deletions.
diff --git a/apps/evm/.env.example b/apps/evm/.env.example
@@ -32,3 +32,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=
diff --git a/apps/evm/package.json b/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:",

diff --git a/apps/evm/src/app/[lang]/nested-providers.tsx b/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 { Header, Layout, Sidebar } from '@/components';
+import { Header, Layout, Sidebar, TurnstileModal } from '@/components';
 import { ConnectProvider } from '@/connect-ui';
 import { isClient, L2_CHAIN, LocalStorageKey } from '@/constants';
 import { useBalances, useGetUser, useLogout, useTokens } from '@/hooks';
@@ -147,6 +147,7 @@ export function NestedProviders({ children }: PropsWithChildren) {
             <Header />
             {children}
           </Layout>
+          <TurnstileModal />
         </ConnectProvider>
       </BOBUIProvider>
     </StyledComponentsRegistry>

diff --git a/apps/evm/src/app/[lang]/sign-up/SignUp.tsx b/apps/evm/src/app/[lang]/sign-up/SignUp.tsx
@@ -8,6 +8,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useParams, useRouter } from 'next/navigation';
 import { FormEventHandler, Suspense, useEffect, useState } from 'react';
 import { useAccount, useSwitchChain } from 'wagmi';
+import { useStore } from '@tanstack/react-store';
 
 import { Auditors, HighlightText, ReferralInput } from './components';
 import { StyledAuthCard, StyledH1 } from './SignUp.style';
@@ -18,6 +19,7 @@ import { L1_CHAIN, L2_CHAIN, RoutesPath, isValidChain } from '@/constants';
 import { useGetUser, useSignUp } from '@/hooks';
 import { fusionKeys } from '@/lib/react-query';
 import { apiClient } from '@/utils';
+import { store } from '@/lib/store';
 
 const SignUp = (): JSX.Element | null => {
   const { address, chain } = useAccount();
@@ -29,9 +31,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,
@@ -73,7 +86,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 });
         }
       });
     }
@@ -82,7 +105,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 (

diff --git a/apps/evm/src/components/SignUpButton/SignUpButton.tsx b/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 })} />;

diff --git a/apps/evm/src/components/TurnstileModal/TurnstileModal.tsx b/apps/evm/src/components/TurnstileModal/TurnstileModal.tsx
@@ -0,0 +1,32 @@
+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&apos;re Human</Trans>
+      </ModalHeader>
+      <ModalBody padding='even'>
+        <Turnstile siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY} onSuccess={handleSuccess} />
+      </ModalBody>
+    </Modal>
+  );
+};
+
+export { TurnstileModal };
diff --git a/apps/evm/src/components/TurnstileModal/index.tsx b/apps/evm/src/components/TurnstileModal/index.tsx
@@ -0,0 +1 @@
+export { TurnstileModal } from './TurnstileModal';
diff --git a/apps/evm/src/components/index.ts b/apps/evm/src/components/index.ts
@@ -11,3 +11,4 @@ export * from './SignUpButton';
 export * from './SpiceAmount';
 export * from './Trapezoid';
 export * from './WithdrawAlert';
+export * from './TurnstileModal';
diff --git a/apps/evm/src/hooks/tests/useSignUp.test.tsx b/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');
   });

diff --git a/apps/evm/src/hooks/useSignUp.ts b/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

diff --git a/apps/evm/src/lib/store.ts b/apps/evm/src/lib/store.ts
@@ -2,6 +2,14 @@ import { Store as StoreLib } from '@tanstack/react-store';
 
 import { BridgeTransaction } from '../types';
 
+type SharedStore = {
+  turnstile: {
+    isOpen: boolean;
+    token?: string;
+    onSuccess?: (token: string) => void;
+  };
+};
+
 type BridgeStore = {
   transactions: {
     isInitialLoading: boolean;
@@ -18,11 +26,17 @@ type StrategiesStore = {
 };
 
 type Store = {
+  shared: SharedStore;
   bridge: BridgeStore;
   strategies: StrategiesStore;
 };
 
 const store = new StoreLib<Store>({
+  shared: {
+    turnstile: {
+      isOpen: false
+    }
+  },
   bridge: {
     transactions: {
       isInitialLoading: true,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { TurnstileModal } from './TurnstileModal';