When Modal is Open Dont Allow Background to scroll

packages/react-celo/src/modals/action.tsx

@@ -7,6 +7,7 @@ import useTheme from '../hooks/use-theme';
 import { Theme } from '../types';
 import { useCeloInternal } from '../use-celo';
 import { hexToRGB } from '../utils/colors';
+import { useFixedBody } from '../utils/helpers';
 import cls from '../utils/tailwind';
 import { styles as modalStyles } from './connect';
 
@@ -90,6 +91,7 @@ export const ActionModal: React.FC<Props> = ({
 }: Props) => {
   const theme = useTheme();
   const { pendingActionCount, dapp } = useCeloInternal();
+  useFixedBody(pendingActionCount > 0);
 
   return (
     <ReactModal

packages/react-celo/src/modals/connect.tsx

@@ -24,6 +24,7 @@ import {
 } from '../types';
 import { useCeloInternal } from '../use-celo';
 import { hexToRGB } from '../utils/colors';
+import { useFixedBody } from '../utils/helpers';
 import { defaultProviderSort, SortingPredicate } from '../utils/sort';
 import cls from '../utils/tailwind';
 
@@ -175,6 +176,8 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
     <Placeholder />
   );
 
+  useFixedBody(!!connectionCallback);
+
   return (
     <ReactModal
       portalClassName={styles.portal}

packages/react-celo/src/utils/helpers.ts

@@ -1,4 +1,5 @@
 import { CeloContract, CeloTokenContract } from '@celo/contractkit/lib/base';
+import { useEffect } from 'react';
 
 import { CONNECTOR_TYPES, UnauthenticatedConnector } from '../connectors';
 import { localStorageKeys, WalletTypes } from '../constants';
@@ -92,3 +93,15 @@ export function isValidFeeCurrency(currency: Maybe<string>): boolean {
       return false;
   }
 }
+
+export function useFixedBody(isOpen: boolean) {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      document.body.style.paddingRight = '15px';
+    } else {
+      document.body.style.overflow = 'unset';
+      document.body.style.paddingRight = '0px';
+    }
+  }, [isOpen]);
+}