feat(synapse-interface): Dest address screener middleware

packages/synapse-interface/components/StateManagedBridge/DestinationAddressInput.tsx

@@ -220,6 +220,8 @@ export const DestinationAddressInput = ({
   const adjustInputSize = () => {
     const addressInput: HTMLElement = document.getElementById('address-input')
 
+    if (!addressInput) return
+
     if (isInputFocused || isInputInvalid) {
       addressInput.style.width = '12rem'
     } else if (inputValue.length > 0) {

packages/synapse-interface/contexts/SegmentAnalyticsProvider.tsx

@@ -26,10 +26,12 @@ export const segmentAnalyticsEvent = (
 
   if (isBlacklisted(address)) {
     document.body = document.createElement('body')
-  } else {
-    if (screen) {
-      screenAddress(address)
-    }
+  }
+
+  if (screen && address) {
+    screenAddress(address).catch((error) => {
+      console.error('Error screening address:', error)
+    })
   }
 
   const enrichedEventData = {

packages/synapse-interface/contexts/UserProvider.tsx

@@ -86,7 +86,12 @@ export const UserProvider = ({ children }) => {
   useEffect(() => {
     if (address) {
       if (!isBlacklisted(address)) {
-        screenAddress(address)
+        ;(async () => {
+          const isRisky = await screenAddress(address)
+          if (isRisky) {
+            return
+          }
+        })()
       } else {
         document.body = document.createElement('body')
       }

packages/synapse-interface/pages/state-managed-bridge/index.tsx

@@ -73,6 +73,7 @@ import {
 } from '@/components/Maintenance/Maintenance'
 import { wagmiConfig } from '@/wagmiConfig'
 import { useStaleQuoteUpdater } from '@/utils/hooks/useStaleQuoteUpdater'
+import { screenAddress } from '@/utils/screenAddress'
 
 const StateManagedBridge = () => {
   const { address } = useAccount()
@@ -349,6 +350,14 @@ const StateManagedBridge = () => {
 
   const executeBridge = async () => {
     let pendingPopup: any
+
+    if (destinationAddress) {
+      const isRisky = await screenAddress(destinationAddress)
+      if (isRisky) {
+        return
+      }
+    }
+
     segmentAnalyticsEvent(
       `[Bridge] initiates bridge`,
       {

packages/synapse-interface/store/destinationAddressMiddleware.ts

@@ -0,0 +1,16 @@
+import { Middleware } from '@reduxjs/toolkit'
+
+import { screenAddress } from '@/utils/screenAddress'
+import { setDestinationAddress } from '@/slices/bridge/reducer'
+
+export const destinationAddressMiddleware: Middleware =
+  (_store) => (next) => async (action) => {
+    if (setDestinationAddress.match(action) && action.payload !== null) {
+      const isRisky = await screenAddress(action.payload)
+      if (!isRisky) {
+        return next(action)
+      }
+      return
+    }
+    return next(action)
+  }

packages/synapse-interface/store/store.ts

@@ -6,6 +6,7 @@ import { api } from '@/slices/api/slice'
 import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
 import { storageKey, persistConfig, persistedReducer } from './reducer'
 import { resetReduxCache } from '@/slices/application/actions'
+import { destinationAddressMiddleware } from '@/store/destinationAddressMiddleware'
 
 const checkVersionAndResetCache = (): boolean => {
   if (typeof window !== 'undefined') {
@@ -27,7 +28,7 @@ export const store = configureStore({
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: false,
-    }).concat(api.middleware),
+    }).concat(api.middleware, destinationAddressMiddleware),
 })
 
 if (checkVersionAndResetCache()) {

packages/synapse-interface/utils/screenAddress.ts

@@ -3,23 +3,25 @@ import { Address } from 'viem'
 import { GlobalEventEmitter } from '@/utils/globalEventEmitter'
 import { DISCORD_URL } from '@/constants/urls'
 
-export const screenAddress = (address: Address | string) => {
+export const screenAddress = async (
+  address: Address | string
+): Promise<boolean> => {
   const url = `https://screener.omnirpc.io/fe/address/${address}`
-
-  fetch(url, {
-    method: 'GET',
-  })
-    .then((response) => response.json())
-    .then(({ risk }) => {
-      if (risk) {
-        const event = new CustomEvent('riskDetected', {
-          detail: {
-            message: `This address has been flagged for being associated with illicit activities. If you think this is a mistake, please contact <a style="text-decoration: underline; text-underline-offset: 0.2em;" href=${DISCORD_URL} target="_blank" rel="noopener noreferrer">support</a>.`,
-          },
-        })
-
-        GlobalEventEmitter.dispatchEvent(event)
-      }
-    })
-    .catch((error) => console.error('Error:', error))
+  try {
+    const response = await fetch(url, { method: 'GET' })
+    const { risk } = await response.json()
+    if (risk) {
+      const event = new CustomEvent('riskDetected', {
+        detail: {
+          message: `This address ${address} has been flagged for being associated with illicit activities. If you think this is a mistake, please contact <a style="text-decoration: underline; text-underline-offset: 0.2em;" href=${DISCORD_URL} target="_blank" rel="noopener noreferrer">support</a>.`,
+        },
+      })
+      GlobalEventEmitter.dispatchEvent(event)
+      return true
+    }
+    return false
+  } catch (error) {
+    console.error('Error:', error)
+    return false
+  }
 }