feat: don't allow empty string destination address

packages/arb-token-bridge-ui/src/components/TransferPanel/SettingsDialog.tsx

@@ -24,6 +24,7 @@ import { useDestinationAddressError } from './hooks/useDestinationAddressError'
 import { useAccountType } from '../../hooks/useAccountType'
 import { Dialog, UseDialogProps } from '../common/Dialog'
 import { isLifiTransferAllowed } from './Routes/isLifiTransferAllowed'
+import { sanitizeDestinationAddress } from '../../util'
 
 function useTools() {
   const [{ sourceChain, destinationChain }] = useNetworks()
@@ -185,7 +186,10 @@ export const SettingsDialog = React.memo((props: UseDialogProps) => {
           setQueryParams({ destinationAddress: undefined })
           setDestinationAddress(undefined)
         } else {
-          setQueryParams({ destinationAddress })
+          const sanitizedDestinationAddress =
+            sanitizeDestinationAddress(destinationAddress)
+          setDestinationAddress(sanitizedDestinationAddress)
+          setQueryParams({ destinationAddress: sanitizedDestinationAddress })
         }
       }}
       isFooterHidden

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx

@@ -233,6 +233,13 @@ export function TransferPanel() {
     [setQueryParams]
   )
 
+  // if the destination address in the query params has an error on load, open settings so the user sees the error
+  useEffect(() => {
+    if (destinationAddressError) {
+      openDialog('settings')
+    }
+  }, [destinationAddressError, openDialog])
+
   useEffect(() => {
     if (importTokenModalStatus !== ImportTokenModalStatus.IDLE) {
       return

packages/arb-token-bridge-ui/src/pages/index.tsx

@@ -19,7 +19,10 @@ import {
   TabParamEnum,
   DisabledFeaturesParam
 } from '../hooks/useArbQueryParams'
-import { sanitizeExperimentalFeaturesQueryParam } from '../util'
+import {
+  sanitizeDestinationAddress,
+  sanitizeExperimentalFeaturesQueryParam
+} from '../util'
 import {
   isE2eTestingEnvironment,
   isProductionEnvironment
@@ -101,6 +104,7 @@ function getDestinationWithSanitizedQueryParams(
     token: string | undefined
     tab: string
     disabledFeatures: string[] | undefined
+    destinationAddress: string | undefined
   },
   query: GetServerSidePropsContext['query']
 ) {
@@ -114,7 +118,8 @@ function getDestinationWithSanitizedQueryParams(
       key === 'experiments' ||
       key === 'token' ||
       key === 'tab' ||
-      key === 'disabledFeatures'
+      key === 'disabledFeatures' ||
+      key === 'destinationAddress'
     ) {
       continue
     }
@@ -132,6 +137,7 @@ function getDestinationWithSanitizedQueryParams(
   const encodedExperiments = encodeString(sanitized.experiments)
   const encodedToken = encodeString(sanitized.token)
   const encodedTab = encodeString(sanitized.tab)
+  const encodedDestinationAddress = encodeString(sanitized.destinationAddress)
 
   if (encodedSource) {
     params.set('sourceChain', encodedSource)
@@ -159,6 +165,10 @@ function getDestinationWithSanitizedQueryParams(
     }
   }
 
+  if (encodedDestinationAddress) {
+    params.set('destinationAddress', encodedDestinationAddress)
+  }
+
   return `/?${params.toString()}`
 }
 
@@ -190,6 +200,7 @@ export async function getServerSideProps({
     typeof query.disabledFeatures === 'string'
       ? [query.disabledFeatures]
       : query.disabledFeatures
+  const destinationAddress = decodeString(query.destinationAddress)
 
   // If both sourceChain and destinationChain are not present, let the client sync with Metamask
   if (!sourceChainId && !destinationChainId) {
@@ -217,7 +228,8 @@ export async function getServerSideProps({
       destinationChainId: sanitizedChainIds.destinationChainId
     }),
     tab: sanitizeTabQueryParam(tab),
-    disabledFeatures: DisabledFeaturesParam.decode(disabledFeatures)
+    disabledFeatures: DisabledFeaturesParam.decode(disabledFeatures),
+    destinationAddress: sanitizeDestinationAddress(destinationAddress)
   }
 
   // if the sanitized query params are different from the initial values, redirect to the url with sanitized query params
@@ -227,14 +239,15 @@ export async function getServerSideProps({
     experiments !== sanitized.experiments ||
     token !== sanitized.token ||
     tab !== sanitized.tab ||
-    (disabledFeatures?.length || 0) !== sanitized.disabledFeatures.length
+    (disabledFeatures?.length || 0) !== sanitized.disabledFeatures.length ||
+    destinationAddress !== sanitized.destinationAddress
   ) {
     console.log(`[getServerSideProps] sanitizing query params`)
     console.log(
-      `[getServerSideProps]     sourceChain=${sourceChainId}&destinationChain=${destinationChainId}&experiments=${experiments}&token=${token}&tab=${tab}&disabledFeatures=${disabledFeatures} (before)`
+      `[getServerSideProps]     sourceChain=${sourceChainId}&destinationChain=${destinationChainId}&experiments=${experiments}&token=${token}&tab=${tab}&disabledFeatures=${disabledFeatures}&destinationAddress=${destinationAddress} (before)`
     )
     console.log(
-      `[getServerSideProps]     sourceChain=${sanitized.sourceChainId}&destinationChain=${sanitized.destinationChainId}&experiments=${sanitized.experiments}&token=${sanitized.token}&tab=${sanitized.tab}&disabledFeatures=${sanitized.disabledFeatures} (after)`
+      `[getServerSideProps]     sourceChain=${sanitized.sourceChainId}&destinationChain=${sanitized.destinationChainId}&experiments=${sanitized.experiments}&token=${sanitized.token}&tab=${sanitized.tab}&disabledFeatures=${sanitized.disabledFeatures}&destinationAddress=${sanitized.destinationAddress} (after)`
     )
     return {
       redirect: {

packages/arb-token-bridge-ui/src/util/index.ts

@@ -86,3 +86,19 @@ export const sanitizeExperimentalFeaturesQueryParam = (
 
   return validFlagsArray.join(',')
 }
+
+export const sanitizeDestinationAddress = (
+  destinationAddress: string | null | undefined
+) => {
+  if (!destinationAddress) {
+    return undefined
+  }
+
+  const destinationAddressTrimmed = destinationAddress.trim()
+
+  if (destinationAddressTrimmed === '') {
+    return undefined
+  }
+
+  return destinationAddressTrimmed
+}