Merge pull request #626 from blockscout/csv-download

csv export

.env.template

@@ -54,6 +54,7 @@ NEXT_PUBLIC_API_SPEC_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_SPEC_URL__
 NEXT_PUBLIC_SENTRY_DSN=__PLACEHOLDER_FOR_NEXT_PUBLIC_SENTRY_DSN__
 NEXT_PUBLIC_AUTH0_CLIENT_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_AUTH0_CLIENT_ID__
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID__
+NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=__PLACEHOLDER_FOR_NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY__
 
 # l2 config
 NEXT_PUBLIC_IS_L2_NETWORK=__PLACEHOLDER_FOR_NEXT_PUBLIC_IS_L2_NETWORKL__

README.md

@@ -126,8 +126,9 @@ The app instance could be customized by passing following variables to NodeJS en
 | --- | --- | --- | --- |
 | NEXT_PUBLIC_SENTRY_DSN | `string` *(optional)* | Client key for your Sentry.io app | `<secret>` |
 | SENTRY_CSP_REPORT_URI | `string` *(optional)* | URL for sending CSP-reports to your Sentry.io app | `<secret>` |
-| NEXT_PUBLIC_AUTH0_CLIENT_ID | `string` *(optional)* | Client id for [Auth0](https://auth0.com/) provider | `<secret>` |
+| NEXT_PUBLIC_AUTH0_CLIENT_ID | `string` | Client id for [Auth0](https://auth0.com/) provider | `<secret>` |
 | NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID | `string` | Project id for [WalletConnect](https://docs.walletconnect.com/2.0/web3modal/react/installation#obtain-project-id) integration | `<secret>` |
+| NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | Site key for [reCAPTCHA](https://developers.google.com/recaptcha) service | `<secret>` |
 
 ### L2 configuration
 | Variable | Type | Description | Default value

configs/app/config.ts

@@ -129,6 +129,9 @@ const config = Object.freeze({
   apiDoc: {
     specUrl: getEnvValue(process.env.NEXT_PUBLIC_API_SPEC_URL),
   },
+  reCaptcha: {
+    siteKey: getEnvValue(process.env.NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY) || '',
+  },
 });
 
 export default config;

configs/envs/.env.common

@@ -15,4 +15,4 @@ NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout
 # api config
 NEXT_PUBLIC_API_HOST=blockscout.com
 NEXT_PUBLIC_STATS_API_HOST=https://stats-test.aws-k8s.blockscout.com
-NEXT_PUBLIC_VISUALIZE_API_HOST=http://94.131.100.174:8050
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.aws-k8s.blockscout.com

deploy/values/main/values.yaml

@@ -492,6 +492,7 @@ frontend:
         - "/accounts"
         - "/visualize"
         - "/api-docs"
+        - "/csv-export"
 
   resources:
     limits:

deploy/values/review/values.yaml

@@ -328,6 +328,7 @@ frontend:
         - "/accounts"
         - "/visualize"
         - "/api-docs"
+        - "/csv-export"
 
   resources:
     limits:

lib/api/nodeFetch.ts

@@ -13,10 +13,9 @@ export default function fetchFactory(
   // first arg can be only a string
   // FIXME migrate to RequestInfo later if needed
   return function fetch(url: string, init?: RequestInit): Promise<Response> {
-    const incomingContentType = _req.headers['content-type'];
     const headers = {
-      accept: 'application/json',
-      'content-type': incomingContentType?.match(/^multipart\/form-data/) ? incomingContentType : 'application/json',
+      accept: _req.headers['accept'] || 'application/json',
+      'content-type': _req.headers['content-type'] || 'application/json',
       cookie: `${ cookies.NAMES.API_TOKEN }=${ _req.cookies[cookies.NAMES.API_TOKEN] }`,
     };
 

lib/api/resources.ts

@@ -351,6 +351,15 @@ export const RESOURCES = {
   old_api: {
     path: '/api',
   },
+  csv_export_txs: {
+    path: '/transactions-csv',
+  },
+  csv_export_internal_txs: {
+    path: '/internal-transactions-csv',
+  },
+  csv_export_token_transfers: {
+    path: '/token-transfers-csv',
+  },
 };
 
 export type ResourceName = keyof typeof RESOURCES;

lib/csp/getCspPolicy.ts

@@ -96,6 +96,11 @@ function makePolicyMap() {
       'servedbyadbutler.com',
       '\'sha256-wMOeDjJaOTjCfNjluteV+tSqHW547T89sgxd8W6tQJM=\'',
       '\'sha256-FcyIn1h7zra8TVnnRhYrwrplxJW7dpD5TV7kP2AG/kI=\'',
+
+      // reCAPTCHA from google
+      'https://www.google.com/recaptcha/api.js',
+      'https://www.gstatic.com',
+      '\'sha256-FDyPg8CqqIpPAfGVKx1YeKduyLs0ghNYWII21wL+7HM=\'',
     ],
 
     'style-src': [
@@ -149,7 +154,7 @@ function makePolicyMap() {
       KEY_WORDS.DATA,
 
       // google fonts
-      '*.gstatic.com',
+      'fonts.gstatic.com',
       'fonts.googleapis.com',
     ],
 
@@ -170,6 +175,11 @@ function makePolicyMap() {
 
       // ad
       'request-global.czilladx.com',
+
+      // reCAPTCHA from google
+      // 'https://www.google.com/',
+      'https://www.google.com/recaptcha/api2/anchor',
+      'https://www.google.com/recaptcha/api2/bframe',
     ],
 
     ...(REPORT_URI ? {

lib/downloadBlob.ts

+export default function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', filename);
+  link.click();
+
+  link.remove();
+  URL.revokeObjectURL(url);
+}

lib/saveAsCSV.ts

 import { unparse } from 'papaparse';
 
+import downloadBlob from 'lib/downloadBlob';
+
 export default function saveAsCSV(headerRows: Array<string>, dataRows: Array<Array<string>>, filename: string) {
   const csv = unparse([
     headerRows,
@@ -8,12 +10,5 @@ export default function saveAsCSV(headerRows: Array<string>, dataRows: Array<Arr
 
   const blob = new Blob([ csv ], { type: 'text/csv;charset=utf-8;' });
 
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.setAttribute('href', url);
-  link.setAttribute('download', filename);
-  link.click();
-
-  link.remove();
-  URL.revokeObjectURL(url);
+  downloadBlob(blob, filename);
 }

package.json

@@ -65,6 +65,7 @@
     "react": "18.2.0",
     "react-ace": "^10.1.0",
     "react-dom": "18.2.0",
+    "react-google-recaptcha": "^2.1.0",
     "react-hook-form": "^7.33.1",
     "react-identicons": "^1.2.5",
     "react-jazzicon": "^1.0.4",
@@ -87,6 +88,7 @@
     "@types/react": "18.0.9",
     "@types/react-dom": "18.0.5",
     "@types/swagger-ui-react": "^4.11.0",
+    "@types/react-google-recaptcha": "^2.1.5",
     "@types/ws": "^8.5.3",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "dotenv-cli": "^6.0.0",

pages/csv-export.tsx

 import type { NextPage } from 'next';
+import Head from 'next/head';
+import React from 'react';
+
+import getNetworkTitle from 'lib/networks/getNetworkTitle';
+import CsvExport from 'ui/pages/CsvExport';
 
 const CsvExportPage: NextPage = () => {
-  return null;
+  const title = getNetworkTitle();
+  return (
+    <>
+      <Head>
+        <title>{ title }</title>
+      </Head>
+      <CsvExport/>
+    </>
+  );
 };
 
 export default CsvExportPage;
 
-export async function getServerSideProps() {
-  return {
-    notFound: true,
-  };
-}
+export { getServerSideProps } from 'lib/next/getServerSideProps';

types/client/address.ts

+export type CsvExportType = 'transactions' | 'internal-transactions' | 'token-transfers';

ui/address/AddressCsvExportLink.tsx

-import { chakra, Icon, Link, Tooltip, Hide } from '@chakra-ui/react';
+import { chakra, Icon, Tooltip, Hide } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
+import type { CsvExportType } from 'types/client/address';
+
 import svgFileIcon from 'icons/files/csv.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import LinkInternal from 'ui/shared/LinkInternal';
 
 interface Props {
   address: string;
-  type: 'transactions' | 'internal-transactions' | 'token-transfers';
+  type: CsvExportType;
   className?: string;
 }
 
@@ -16,7 +19,7 @@ const AddressCsvExportLink = ({ className, address, type }: Props) => {
 
   return (
     <Tooltip isDisabled={ !isMobile } label="Download CSV">
-      <Link
+      <LinkInternal
         className={ className }
         display="inline-flex"
         alignItems="center"
@@ -26,7 +29,7 @@ const AddressCsvExportLink = ({ className, address, type }: Props) => {
       >
         <Icon as={ svgFileIcon } boxSize={{ base: '30px', lg: 6 }}/>
         <Hide ssr={ false } below="lg"><chakra.span ml={ 1 }>Download CSV</chakra.span></Hide>
-      </Link>
+      </LinkInternal>
     </Tooltip>
   );
 };

ui/csvExport/CsvExportForm.tsx

+import { Button, chakra, Flex } from '@chakra-ui/react';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
+
+import type { FormFields } from './types';
+
+import buildUrl from 'lib/api/buildUrl';
+import type { ResourceName } from 'lib/api/resources';
+import dayjs from 'lib/date/dayjs';
+import downloadBlob from 'lib/downloadBlob';
+import useToast from 'lib/hooks/useToast';
+
+import CsvExportFormField from './CsvExportFormField';
+import CsvExportFormReCaptcha from './CsvExportFormReCaptcha';
+
+interface Props {
+  hash: string;
+  resource: ResourceName;
+  fileNameTemplate: string;
+}
+
+const CsvExportForm = ({ hash, resource, fileNameTemplate }: Props) => {
+  const formApi = useForm<FormFields>({
+    mode: 'onBlur',
+    defaultValues: {
+      from: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
+      to: dayjs().format('YYYY-MM-DD'),
+    },
+  });
+  const { handleSubmit, formState } = formApi;
+  const toast = useToast();
+
+  const onFormSubmit: SubmitHandler<FormFields> = React.useCallback(async(data) => {
+    try {
+      const url = buildUrl(resource, undefined, {
+        address_id: hash,
+        from_period: data.from,
+        to_period: data.to,
+        recaptcha_response: data.reCaptcha,
+      });
+
+      const response = await fetch(url, {
+        headers: {
+          'content-type': 'application/octet-stream',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error();
+      }
+
+      const blob = await response.blob();
+      downloadBlob(blob, `${ fileNameTemplate }_${ hash }_${ data.from }_${ data.to }.csv`);
+
+    } catch (error) {
+      toast({
+        position: 'top-right',
+        title: 'Error',
+        description: (error as Error)?.message || 'Something went wrong. Try again later.',
+        status: 'error',
+        variant: 'subtle',
+        isClosable: true,
+      });
+    }
+
+  }, [ fileNameTemplate, hash, resource, toast ]);
+
+  return (
+    <FormProvider { ...formApi }>
+      <chakra.form
+        noValidate
+        onSubmit={ handleSubmit(onFormSubmit) }
+      >
+        <Flex columnGap={ 5 } rowGap={ 3 } flexDir={{ base: 'column', lg: 'row' }} alignItems={{ base: 'flex-start', lg: 'center' }}>
+          <CsvExportFormField name="from" formApi={ formApi }/>
+          <CsvExportFormField name="to" formApi={ formApi }/>
+          <CsvExportFormReCaptcha formApi={ formApi }/>
+        </Flex>
+        <Button
+          variant="solid"
+          size="lg"
+          type="submit"
+          mt={ 8 }
+          isLoading={ formState.isSubmitting }
+          loadingText="Download"
+          isDisabled={ !formState.isValid }
+        >
+          Download
+        </Button>
+      </chakra.form>
+    </FormProvider>
+  );
+};
+
+export default React.memo(CsvExportForm);

ui/csvExport/CsvExportFormField.tsx

+import { FormControl, Input } from '@chakra-ui/react';
+import _capitalize from 'lodash/capitalize';
+import React from 'react';
+import type { ControllerRenderProps, UseFormReturn } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import type { FormFields } from './types';
+
+import dayjs from 'lib/date/dayjs';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+interface Props {
+  formApi: UseFormReturn<FormFields>;
+  name: 'from' | 'to';
+}
+
+const CsvExportFormField = ({ formApi, name }: Props) => {
+  const { formState, control, getValues, trigger } = formApi;
+
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'from' | 'to'>}) => {
+    const error = field.name in formState.errors ? formState.errors[field.name] : undefined;
+
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }} maxW={{ base: 'auto', lg: '220px' }}>
+        <Input
+          { ...field }
+          required
+          isInvalid={ Boolean(error) }
+          type="date"
+          isDisabled={ formState.isSubmitting }
+          autoComplete="off"
+          max={ dayjs().format('YYYY-MM-DD') }
+        />
+        <InputPlaceholder text={ _capitalize(field.name) } error={ error }/>
+      </FormControl>
+    );
+  }, [ formState.errors, formState.isSubmitting ]);
+
+  const validate = React.useCallback((newValue: string) => {
+    if (name === 'from') {
+      const toValue = getValues('to');
+      if (toValue && dayjs(newValue) > dayjs(toValue)) {
+        return 'Incorrect date';
+      }
+      if (formState.errors.to) {
+        trigger('to');
+      }
+    } else {
+      const fromValue = getValues('from');
+      if (fromValue && dayjs(fromValue) > dayjs(newValue)) {
+        return 'Incorrect date';
+      }
+      if (formState.errors.from) {
+        trigger('from');
+      }
+    }
+  }, [ formState.errors.from, formState.errors.to, getValues, name, trigger ]);
+
+  return (
+    <Controller
+      name={ name }
+      control={ control }
+      render={ renderControl }
+      rules={{ required: true, validate }}
+    />
+  );
+};
+
+export default React.memo(CsvExportFormField);

ui/csvExport/CsvExportFormReCaptcha.tsx

+import React from 'react';
+import ReCaptcha from 'react-google-recaptcha';
+import type { UseFormReturn } from 'react-hook-form';
+
+import type { FormFields } from './types';
+
+import appConfig from 'configs/app/config';
+
+interface Props {
+  formApi: UseFormReturn<FormFields>;
+}
+
+const CsvExportFormReCaptcha = ({ formApi }: Props) => {
+
+  const ref = React.useRef<ReCaptcha>(null);
+
+  React.useEffect(() => {
+    formApi.register('reCaptcha', { required: true, shouldUnregister: true });
+
+    return () => {
+      formApi.unregister('reCaptcha');
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    ref.current?.reset();
+    formApi.trigger('reCaptcha');
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ formApi.formState.submitCount ]);
+
+  const handleReCaptchaChange = React.useCallback((token: string | null) => {
+    if (token) {
+      formApi.clearErrors('reCaptcha');
+      formApi.setValue('reCaptcha', token, { shouldValidate: true });
+    }
+  }, [ formApi ]);
+
+  const handleReCaptchaExpire = React.useCallback(() => {
+    formApi.resetField('reCaptcha');
+    formApi.setError('reCaptcha', { type: 'required' });
+  }, [ formApi ]);
+
+  return (
+    <ReCaptcha
+      ref={ ref }
+      sitekey={ appConfig.reCaptcha.siteKey }
+      onChange={ handleReCaptchaChange }
+      onExpired={ handleReCaptchaExpire }
+    />
+  );
+};
+
+export default CsvExportFormReCaptcha;

ui/csvExport/types.ts

+export interface FormFields {
+  from: string;
+  to: string;
+  reCaptcha: string;
+}

ui/pages/ContractVerification.tsx

@@ -6,7 +6,6 @@ import type { SmartContractVerificationConfigRaw, SmartContractVerificationMetho
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/appContext';
-import isBrowser from 'lib/isBrowser';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import ContractVerificationForm from 'ui/contractVerification/ContractVerificationForm';
 import { isValidVerificationMethod, sortVerificationMethods } from 'ui/contractVerification/utils';
@@ -21,9 +20,7 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 
 const ContractVerification = () => {
   const appProps = useAppContext();
-  const isInBrowser = isBrowser();
-  const referrer = isInBrowser ? window.document.referrer : appProps.referrer;
-  const hasGoBackLink = referrer && referrer.includes('/address');
+  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
   const router = useRouter();
 
   const hash = getQueryParamString(router.query.hash);
@@ -91,7 +88,7 @@ const ContractVerification = () => {
     <Page>
       <PageTitle
         text="New smart contract verification"
-        backLinkUrl={ hasGoBackLink ? referrer : undefined }
+        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
         backLinkLabel="Back to contract"
       />
       { hash && (

ui/pages/CsvExport.tsx

+import { Flex } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { CsvExportType } from 'types/client/address';
+
+import type { ResourceName } from 'lib/api/resources';
+import useApiQuery from 'lib/api/useApiQuery';
+import { useAppContext } from 'lib/appContext';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import CsvExportForm from 'ui/csvExport/CsvExportForm';
+import Address from 'ui/shared/address/Address';
+import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import Page from 'ui/shared/Page/Page';
+import PageTitle from 'ui/shared/Page/PageTitle';
+
+interface ExportTypeEntity {
+  text: string;
+  resource: ResourceName;
+  fileNameTemplate: string;
+}
+
+const EXPORT_TYPES: Record<CsvExportType, ExportTypeEntity> = {
+  transactions: {
+    text: 'transactions',
+    resource: 'csv_export_txs',
+    fileNameTemplate: 'transactions',
+  },
+  'internal-transactions': {
+    text: 'internal transactions',
+    resource: 'csv_export_internal_txs',
+    fileNameTemplate: 'internal_transactions',
+  },
+  'token-transfers': {
+    text: 'token transfers',
+    resource: 'csv_export_token_transfers',
+    fileNameTemplate: 'token_transfers',
+  },
+};
+
+const isCorrectExportType = (type: string): type is CsvExportType => Object.keys(EXPORT_TYPES).includes(type);
+
+const CsvExport = () => {
+  const router = useRouter();
+  const isMobile = useIsMobile();
+  const appProps = useAppContext();
+
+  const addressHash = router.query.address?.toString() || '';
+  const exportType = router.query.type?.toString() || '';
+  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
+
+  const addressQuery = useApiQuery('address', {
+    pathParams: { hash: addressHash },
+    queryOptions: {
+      enabled: Boolean(addressHash),
+    },
+  });
+
+  if (!isCorrectExportType(exportType) || !addressHash || addressQuery.error?.status === 400) {
+    throw Error('Not found', { cause: { status: 404 } });
+  }
+
+  const content = (() => {
+    if (addressQuery.isError) {
+      return <DataFetchAlert/>;
+    }
+
+    if (addressQuery.isLoading) {
+      return <ContentLoader/>;
+    }
+
+    return <CsvExportForm hash={ addressHash } resource={ EXPORT_TYPES[exportType].resource } fileNameTemplate={ EXPORT_TYPES[exportType].fileNameTemplate }/>;
+  })();
+
+  return (
+    <Page>
+      <PageTitle
+        text="Export data to CSV file"
+        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
+        backLinkLabel="Back to address"
+      />
+      <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
+        <span>Export { EXPORT_TYPES[exportType].text } for address </span>
+        <Address>
+          <AddressIcon address={{ hash: addressHash, is_contract: true, implementation_name: null }}/>
+          <AddressLink hash={ addressHash } type="address" ml={ 2 } truncation={ isMobile ? 'constant' : 'dynamic' }/>
+        </Address>
+        <span> to CSV file</span>
+      </Flex>
+      { content }
+    </Page>
+  );
+};
+
+export default CsvExport;

ui/pages/Sol2Uml.tsx

@@ -2,6 +2,7 @@ import { Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import { useAppContext } from 'lib/appContext';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -13,12 +14,18 @@ import Sol2UmlDiagram from 'ui/sol2uml/Sol2UmlDiagram';
 const Sol2Uml = () => {
   const router = useRouter();
   const isMobile = useIsMobile();
+  const appProps = useAppContext();
 
   const addressHash = router.query.address?.toString() || '';
+  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
 
   return (
     <Page>
-      <PageTitle text="Solidity UML diagram"/>
+      <PageTitle
+        text="Solidity UML diagram"
+        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
+        backLinkLabel="Back to address"
+      />
       <Flex mb={ 10 }>
         <span>For contract</span>
         <Address ml={ 3 }>

yarn.lock

@@ -4080,6 +4080,13 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-google-recaptcha@^2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.5.tgz#af157dc2e4bde3355f9b815a64f90e85cfa9df8b"
+  integrity sha512-iWTjmVttlNgp0teyh7eBXqNOQzVq2RWNiFROWjraOptRnb1OcHJehQnji0sjqIRAk9K0z8stjyhU+OLpPb0N6w==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-scroll@^1.8.4":
   version "1.8.4"
   resolved "https://registry.yarnpkg.com/@types/react-scroll/-/react-scroll-1.8.4.tgz#2b6258fb34104d3fcc7a22e8eceaadc669ba3ad1"
@@ -10034,7 +10041,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.0, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10183,6 +10190,14 @@ react-ace@^10.1.0:
     lodash.isequal "^4.5.0"
     prop-types "^15.7.2"
 
+react-async-script@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-async-script/-/react-async-script-1.2.0.tgz#ab9412a26f0b83f5e2e00de1d2befc9400834b21"
+  integrity sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+    prop-types "^15.5.0"
+
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
@@ -10231,6 +10246,14 @@ react-focus-lock@^2.9.1:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-google-recaptcha@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz#9f6f4954ce49c1dedabc2c532347321d892d0a16"
+  integrity sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==
+  dependencies:
+    prop-types "^15.5.0"
+    react-async-script "^1.1.1"
+
 react-hook-form@^7.33.1:
   version "7.37.0"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.37.0.tgz#4d1738f092d3d8a3ade34ee892d97350b1032b19"