feat: address screening

.env.development

@@ -1 +1,2 @@
-NEXT_PUBLIC_ENV=prod
+NEXT_PUBLIC_ENV=prod
+NEXT_PUBLIC_SCREENING_URL=https://aave-api-v2.aave.com

.env.example

@@ -4,4 +4,5 @@ TENDERLY_ACCOUNT=
 TENDERLY_PROJECT=
 NEXT_PUBLIC_ENV=prod
 NEXT_PUBLIC_ENABLE_GOVERNANCE=true
-NEXT_PUBLIC_ENABLE_STAKING=true
+NEXT_PUBLIC_ENABLE_STAKING=true
+NEXT_PUBLIC_SCREENING_URL=https://aave-api-v2.aave.com

.github/actions/build/action.yml

@@ -44,3 +44,4 @@ runs:
         NEXT_PUBLIC_ENV: '${{ inputs.NEXT_PUBLIC_ENV }}'
         NEXT_PUBLIC_ENABLE_GOVERNANCE: 'true'
         NEXT_PUBLIC_ENABLE_STAKING: 'true'
+        NEXT_PUBLIC_SCREENING_URL: 'https://aave-api-v2.aave.com'

custom.d.ts

@@ -8,5 +8,6 @@ namespace NodeJS {
     NEXT_PUBLIC_ENABLE_GOVERNANCE: string;
     NEXT_PUBLIC_ENABLE_STAKING: string;
     NEXT_PUBLIC_ENV: string;
+    NEXT_PUBLIC_SCREENING_URL: string;
   }
 }

pages/_app.page.tsx

@@ -36,6 +36,7 @@ import { WalletModalContextProvider } from 'src/hooks/useWalletModal';
 import { PermissionProvider } from 'src/hooks/usePermissions';
 import AaveMetaImage from 'public/aaveMetaLogo.png';
 import { FaucetModal } from 'src/components/transactions/Faucet/FaucetModal';
+import { AddressBlocked } from 'src/components/AddressBlocked';
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
@@ -78,31 +79,33 @@ export default function MyApp(props: MyAppProps) {
               <ProtocolDataProvider>
                 <ConnectionStatusProvider>
                   <AppGlobalStyles>
-                    <PermissionProvider>
-                      <ModalContextProvider>
-                        <BackgroundDataProvider>
-                          <AppDataProvider>
-                            <TxBuilderProvider>
-                              <WalletModalContextProvider>
-                                <GasStationProvider>
-                                  {getLayout(<Component {...pageProps} />)}
-                                  <SupplyModal />
-                                  <WithdrawModal />
-                                  <BorrowModal />
-                                  <RepayModal />
-                                  <CollateralChangeModal />
-                                  <RateSwitchModal />
-                                  <ClaimRewardsModal />
-                                  <EmodeModal />
-                                  <SwapModal />
-                                  <FaucetModal />
-                                </GasStationProvider>
-                              </WalletModalContextProvider>
-                            </TxBuilderProvider>
-                          </AppDataProvider>
-                        </BackgroundDataProvider>
-                      </ModalContextProvider>
-                    </PermissionProvider>
+                    <AddressBlocked>
+                      <PermissionProvider>
+                        <ModalContextProvider>
+                          <BackgroundDataProvider>
+                            <AppDataProvider>
+                              <TxBuilderProvider>
+                                <WalletModalContextProvider>
+                                  <GasStationProvider>
+                                    {getLayout(<Component {...pageProps} />)}
+                                    <SupplyModal />
+                                    <WithdrawModal />
+                                    <BorrowModal />
+                                    <RepayModal />
+                                    <CollateralChangeModal />
+                                    <RateSwitchModal />
+                                    <ClaimRewardsModal />
+                                    <EmodeModal />
+                                    <SwapModal />
+                                    <FaucetModal />
+                                  </GasStationProvider>
+                                </WalletModalContextProvider>
+                              </TxBuilderProvider>
+                            </AppDataProvider>
+                          </BackgroundDataProvider>
+                        </ModalContextProvider>
+                      </PermissionProvider>
+                    </AddressBlocked>
                   </AppGlobalStyles>
                 </ConnectionStatusProvider>
               </ProtocolDataProvider>

src/components/AddressBlocked.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { useAddressAllowed } from 'src/hooks/useAddressAllowed';
+import { MainLayout } from 'src/layouts/MainLayout';
+import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
+import { AddressBlockedModal } from './AddressBlockedModal';
+
+export const AddressBlocked = ({ children }: { children: ReactNode }) => {
+  const { currentAccount, disconnectWallet } = useWeb3Context();
+  const { isAllowed } = useAddressAllowed(currentAccount);
+
+  if (!isAllowed) {
+    return (
+      <MainLayout>
+        <AddressBlockedModal address={currentAccount} onDisconnectWallet={disconnectWallet} />;
+      </MainLayout>
+    );
+  }
+
+  return <>{children}</>;
+};

src/components/AddressBlockedModal.tsx

@@ -0,0 +1,53 @@
+import { ExclamationCircleIcon, LogoutIcon } from '@heroicons/react/outline';
+import { Trans } from '@lingui/macro';
+import { Box, Button, SvgIcon, Typography } from '@mui/material';
+import { BasicModal } from './primitives/BasicModal';
+import { Link } from './primitives/Link';
+
+export interface AddressBlockedProps {
+  address: string;
+  onDisconnectWallet: () => void;
+}
+
+export const AddressBlockedModal = ({ address, onDisconnectWallet }: AddressBlockedProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+  const setOpen = (_value: boolean) => {}; // ignore, we want the modal to not be dismissable
+
+  return (
+    <BasicModal open={true} withCloseButton={false} setOpen={setOpen}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <SvgIcon sx={{ fontSize: '24px', color: 'warning.main', mb: 2 }}>
+          <ExclamationCircleIcon />
+        </SvgIcon>
+        <Typography variant="h2">
+          <Trans>Blocked Address</Trans>
+        </Typography>
+        <Typography variant="helperText" sx={{ my: 4 }}>
+          {address}
+        </Typography>
+        <Typography variant="description" sx={{ textAlign: 'center', mb: 4 }}>
+          <Trans>
+            This address is blocked on app.aave.com because it is associated with one or more
+          </Trans>{' '}
+          <Link href="https://docs.aave.com/faq/#address-screening" underline="always">
+            <Trans>blocked activities</Trans>
+          </Link>
+          {'.'}
+        </Typography>
+        <Button variant="contained" onClick={onDisconnectWallet}>
+          <SvgIcon fontSize="small" sx={{ mx: 1 }}>
+            <LogoutIcon />
+          </SvgIcon>
+          <Trans>Disconnect Wallet</Trans>
+        </Button>
+      </Box>
+    </BasicModal>
+  );
+};

src/hooks/useAddressAllowed.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { usePolling } from './usePolling';
+
+export interface AddressAllowedResult {
+  isAllowed: boolean;
+}
+
+const TWO_MINUTES = 2 * 60 * 1000;
+
+export const useAddressAllowed = (address: string): AddressAllowedResult => {
+  const [isAllowed, setIsAllowed] = useState(true);
+
+  const screeningUrl = process.env.NEXT_PUBLIC_SCREENING_URL;
+
+  const getIsAddressAllowed = async () => {
+    if (screeningUrl && address) {
+      try {
+        const response = await fetch(`${screeningUrl}/addresses/status?address=${address}`);
+        const data: { addressAllowed: boolean } = await response.json();
+        setIsAllowed(data.addressAllowed);
+      } catch (e) {}
+    } else {
+      setIsAllowed(true);
+    }
+  };
+
+  usePolling(getIsAddressAllowed, TWO_MINUTES, false, [address]);
+
+  return {
+    isAllowed,
+  };
+};

src/locales/en/messages.po

@@ -266,6 +266,10 @@ msgstr "Before supplying"
 msgid "Before supplying, you need to approve its usage by the Aave protocol. You can learn more in our<0>FAQ</0>"
 msgstr "Before supplying, you need to approve its usage by the Aave protocol. You can learn more in our<0>FAQ</0>"
 
+#: src/components/AddressBlockedModal.tsx
+msgid "Blocked Address"
+msgstr "Blocked Address"
+
 #: pages/index.page.tsx
 #: src/components/transactions/Borrow/BorrowModal.tsx
 #: src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListItem.tsx
@@ -587,6 +591,7 @@ msgstr "Disabling E-Mode"
 msgid "Disabling this asset as collateral affects your borrowing power and Health Factor."
 msgstr "Disabling this asset as collateral affects your borrowing power and Health Factor."
 
+#: src/components/AddressBlockedModal.tsx
 #: src/layouts/WalletWidget.tsx
 msgid "Disconnect Wallet"
 msgstr "Disconnect Wallet"
@@ -1561,6 +1566,10 @@ msgstr "There was some error. Please try changing the parameters or <0><1>copy t
 msgid "These funds have been borrowed and are not available for withdrawal at this time."
 msgstr "These funds have been borrowed and are not available for withdrawal at this time."
 
+#: src/components/AddressBlockedModal.tsx
+msgid "This address is blocked on app.aave.com because it is associated with one or more"
+msgstr "This address is blocked on app.aave.com because it is associated with one or more"
+
 #: src/components/caps/CapsTooltip.tsx
 msgid "This asset has almost reached its borrow cap. There is only {messageValue} available to be borrowed from this market."
 msgstr "This asset has almost reached its borrow cap. There is only {messageValue} available to be borrowed from this market."
@@ -1992,6 +2001,10 @@ msgstr "Zero address not valid"
 msgid "assets"
 msgstr "assets"
 
+#: src/components/AddressBlockedModal.tsx
+msgid "blocked activities"
+msgstr "blocked activities"
+
 #: src/components/transactions/FlowCommons/GasEstimationError.tsx
 msgid "copy the error"
 msgstr "copy the error"