fix: no-undefined-or in object field types (#6640)

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
       rules: {
         'multiline-comment-style': ['error', 'separate-lines'],
         'rulesdir/enforce-retry-on-import': 'error',
+        'rulesdir/no-undefined-or': 'error',
       },
     },
     {

eslint_rules/no-undefined-or.js

+/* eslint-env node */
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Enforce the use of optional object fields',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: 'code',
+    schema: [],
+  },
+  create(context) {
+    return {
+      'TSPropertySignature > TSTypeAnnotation > TSUnionType': (node) => {
+        const types = node.types
+        const hasUndefined = types.some((typeNode) => typeNode.type === 'TSUndefinedKeyword')
+
+        if (hasUndefined) {
+          const typesWithoutUndefined = types.filter((typeNode) => typeNode.type !== 'TSUndefinedKeyword')
+
+          // If there is more than one type left after removing 'undefined',
+          // join them together with ' | ' to create a new union type.
+          const newTypeSource =
+            typesWithoutUndefined.length > 1
+              ? typesWithoutUndefined.map((typeNode) => context.getSourceCode().getText(typeNode)).join(' | ')
+              : context.getSourceCode().getText(typesWithoutUndefined[0])
+
+          context.report({
+            node,
+            message: `Prefer optional properties to "Type | undefined".`,
+            fix(fixer) {
+              const propertySignature = node.parent.parent
+              const isAlreadyOptional = propertySignature.optional
+              const newTypeAnnotation = isAlreadyOptional ? `: ${newTypeSource}` : `?: ${newTypeSource}`
+              return fixer.replaceText(node.parent, newTypeAnnotation)
+            },
+          })
+        }
+      },
+    }
+  },
+}

src/components/AccountDrawer/MiniPortfolio/Pools/useMultiChainPositions.tsx

@@ -49,7 +49,7 @@ const DEFAULT_CHAINS = [
   SupportedChainId.CELO,
 ]
 
-type UseMultiChainPositionsData = { positions: PositionInfo[] | undefined; loading: boolean }
+type UseMultiChainPositionsData = { positions?: PositionInfo[]; loading: boolean }
 
 /**
  * Returns all positions for a given account on multiple chains.

src/components/Badge/RangeBadge.tsx

@@ -32,13 +32,7 @@ const LabelText = styled.div<{ color: string }>`
   justify-content: flex-end;
 `
 
-export default function RangeBadge({
-  removed,
-  inRange,
-}: {
-  removed: boolean | undefined
-  inRange: boolean | undefined
-}) {
+export default function RangeBadge({ removed, inRange }: { removed?: boolean; inRange?: boolean }) {
   const theme = useTheme()
   return (
     <BadgeWrapper>

src/components/Charts/SparklineChart.tsx

@@ -19,7 +19,7 @@ interface SparklineChartProps {
   width: number
   height: number
   tokenData: TopToken
-  pricePercentChange: number | undefined | null
+  pricePercentChange?: number | null
   sparklineMap: SparklineMap
 }
 

src/components/ConnectedAccountBlocked/index.tsx

@@ -14,7 +14,7 @@ const ContentWrapper = styled(Column)`
   font-size: 12px;
 `
 interface ConnectedAccountBlockedProps {
-  account: string | null | undefined
+  account?: string | null
   isOpen: boolean
 }
 

src/components/FeeSelector/index.tsx

@@ -56,8 +56,8 @@ export default function FeeSelector({
   disabled?: boolean
   feeAmount?: FeeAmount
   handleFeePoolSelect: (feeAmount: FeeAmount) => void
-  currencyA?: Currency | undefined
-  currencyB?: Currency | undefined
+  currencyA?: Currency
+  currencyB?: Currency
 }) {
   const { chainId } = useWeb3React()
 

src/components/InputStepCounter/InputStepCounter.tsx

@@ -79,8 +79,8 @@ interface StepCounterProps {
   width?: string
   locked?: boolean // disable input
   title: ReactNode
-  tokenA: string | undefined
-  tokenB: string | undefined
+  tokenA?: string
+  tokenB?: string
 }
 
 const StepCounter = ({

src/components/LiquidityChartRangeInput/Area.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components/macro'
 
 import { ChartEntry } from './types'
 
-const Path = styled.path<{ fill: string | undefined }>`
+const Path = styled.path<{ fill?: string }>`
   opacity: 0.5;
   stroke: ${({ fill, theme }) => fill ?? theme.accentAction};
   fill: ${({ fill, theme }) => fill ?? theme.accentAction};
@@ -23,7 +23,7 @@ export const Area = ({
   yScale: ScaleLinear<number, number>
   xValue: (d: ChartEntry) => number
   yValue: (d: ChartEntry) => number
-  fill?: string | undefined
+  fill?: string
 }) =>
   useMemo(
     () => (

src/components/LiquidityChartRangeInput/hooks.ts

@@ -10,9 +10,9 @@ export function useDensityChartData({
   currencyB,
   feeAmount,
 }: {
-  currencyA: Currency | undefined
-  currencyB: Currency | undefined
-  feeAmount: FeeAmount | undefined
+  currencyA?: Currency
+  currencyB?: Currency
+  feeAmount?: FeeAmount
 }) {
   const { isLoading, error, data } = usePoolActiveLiquidity(currencyA, currencyB, feeAmount)
 

src/components/LiquidityChartRangeInput/index.tsx

@@ -76,11 +76,11 @@ export default function LiquidityChartRangeInput({
   onRightRangeInput,
   interactive,
 }: {
-  currencyA: Currency | undefined
-  currencyB: Currency | undefined
+  currencyA?: Currency
+  currencyB?: Currency
   feeAmount?: FeeAmount
   ticksAtLimit: { [bound in Bound]?: boolean | undefined }
-  price: number | undefined
+  price?: number
   priceLower?: Price<Token, Token>
   priceUpper?: Price<Token, Token>
   onLeftRangeInput: (typedValue: string) => void

src/components/LiquidityChartRangeInput/types.ts

@@ -54,7 +54,7 @@ export interface LiquidityChartRangeInputProps {
   interactive?: boolean
 
   brushLabels: (d: 'w' | 'e', x: number) => string
-  brushDomain: [number, number] | undefined
+  brushDomain?: [number, number]
   onBrushDomainChange: (domain: [number, number], mode: string | undefined) => void
 
   zoomLevels: ZoomLevels

src/components/ModalViews/index.tsx

@@ -39,15 +39,7 @@ export function LoadingView({ children, onDismiss }: { children: any; onDismiss:
   )
 }
 
-export function SubmittedView({
-  children,
-  onDismiss,
-  hash,
-}: {
-  children: any
-  onDismiss: () => void
-  hash: string | undefined
-}) {
+export function SubmittedView({ children, onDismiss, hash }: { children: any; onDismiss: () => void; hash?: string }) {
   const theme = useTheme()
   const { chainId } = useWeb3React()
 

src/components/NavBar/SearchBarDropdown.tsx

@@ -33,7 +33,7 @@ interface SearchBarDropdownSectionProps {
   suggestions: (GenieCollection | SearchToken)[]
   header: JSX.Element
   headerIcon?: JSX.Element
-  hoveredIndex: number | undefined
+  hoveredIndex?: number
   startingIndex: number
   setHoveredIndex: (index: number | undefined) => void
   isLoading?: boolean

src/components/NavigationTabs/index.tsx

@@ -21,7 +21,7 @@ const Tabs = styled.div`
   justify-content: space-evenly;
 `
 
-const StyledHistoryLink = styled(HistoryLink)<{ flex: string | undefined }>`
+const StyledHistoryLink = styled(HistoryLink)<{ flex?: string }>`
   flex: ${({ flex }) => flex ?? 'none'};
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
@@ -64,9 +64,9 @@ export function AddRemoveTabs({
   adding: boolean
   creating: boolean
   autoSlippage: Percent
-  positionID?: string | undefined
+  positionID?: string
   showBackLink?: boolean
-  children?: ReactNode | undefined
+  children?: ReactNode
 }) {
   const theme = useTheme()
   // reset states on back

src/components/NumericalInput/index.tsx

@@ -53,7 +53,7 @@ export const Input = React.memo(function InnerInput({
   error?: boolean
   fontSize?: string
   align?: 'right' | 'left'
-  prependSymbol?: string | undefined
+  prependSymbol?: string
 } & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'as'>) {
   const enforcer = (nextUserInput: string) => {
     if (nextUserInput === '' || inputRegex.test(escapeRegExp(nextUserInput))) {

src/components/PositionPreview/index.tsx

@@ -27,7 +27,7 @@ export const PositionPreview = ({
   position: Position
   title?: ReactNode
   inRange: boolean
-  baseCurrencyDefault?: Currency | undefined
+  baseCurrencyDefault?: Currency
   ticksAtLimit: { [bound: string]: boolean | undefined }
 }) => {
   const theme = useTheme()

src/components/Tokens/TokenDetails/About.tsx

@@ -68,9 +68,9 @@ const ResourcesContainer = styled.div`
 type AboutSectionProps = {
   address: string
   chainId: SupportedChainId
-  description?: string | null | undefined
-  homepageUrl?: string | null | undefined
-  twitterName?: string | null | undefined
+  description?: string | null
+  homepageUrl?: string | null
+  twitterName?: string | null
 }
 
 export function AboutSection({ address, chainId, description, homepageUrl, twitterName }: AboutSectionProps) {

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -64,7 +64,7 @@ export function formatDelta(delta: number | null | undefined) {
   return formattedDelta
 }
 
-export const DeltaText = styled.span<{ delta: number | undefined }>`
+export const DeltaText = styled.span<{ delta?: number }>`
   color: ${({ theme, delta }) =>
     delta !== undefined ? (Math.sign(delta) < 0 ? theme.accentFailure : theme.accentSuccess) : theme.textPrimary};
 `
@@ -124,7 +124,7 @@ const timeOptionsHeight = 44
 interface PriceChartProps {
   width: number
   height: number
-  prices: PricePoint[] | undefined | null
+  prices?: PricePoint[] | null
   timePeriod: TimePeriod
 }
 

src/components/Tokens/TokenDetails/index.tsx

@@ -87,11 +87,11 @@ function useRelevantToken(
 }
 
 type TokenDetailsProps = {
-  urlAddress: string | undefined
+  urlAddress?: string
   inputTokenAddress?: string
   chain: Chain
   tokenQuery: TokenQuery
-  tokenPriceQuery: TokenPriceQuery | undefined
+  tokenPriceQuery?: TokenPriceQuery
   onChangeTimePeriod: OnChangeTimePeriod
 }
 export default function TokenDetails({

src/components/TransactionConfirmationModal/index.tsx

@@ -94,9 +94,9 @@ function TransactionSubmittedContent({
   inline,
 }: {
   onDismiss: () => void
-  hash: string | undefined
+  hash?: string
   chainId: number
-  currencyToAdd?: Currency | undefined
+  currencyToAdd?: Currency
   inline?: boolean // not in modal
 }) {
   const theme = useTheme()
@@ -229,9 +229,9 @@ function L2Content({
   inline,
 }: {
   onDismiss: () => void
-  hash: string | undefined
+  hash?: string
   chainId: SupportedL2ChainId
-  currencyToAdd?: Currency | undefined
+  currencyToAdd?: Currency
   pendingText: ReactNode
   inline?: boolean // not in modal
 }) {
@@ -324,11 +324,11 @@ function L2Content({
 interface ConfirmationModalProps {
   isOpen: boolean
   onDismiss: () => void
-  hash: string | undefined
+  hash?: string
   content: () => ReactNode
   attemptingTxn: boolean
   pendingText: ReactNode
-  currencyToAdd?: Currency | undefined
+  currencyToAdd?: Currency
 }
 
 export default function TransactionConfirmationModal({

src/components/swap/ConfirmSwapModal.tsx

@@ -30,15 +30,15 @@ export default function ConfirmSwapModal({
   fiatValueOutput,
 }: {
   trade: InterfaceTrade
-  originalTrade: InterfaceTrade | undefined
+  originalTrade?: InterfaceTrade
   attemptingTxn: boolean
-  txHash: string | undefined
+  txHash?: string
   allowedSlippage: Percent
   onAcceptChanges: () => void
   onConfirm: () => void
-  swapErrorMessage: ReactNode | undefined
+  swapErrorMessage?: ReactNode
   onDismiss: () => void
-  swapQuoteReceivedDate: Date | undefined
+  swapQuoteReceivedDate?: Date
   fiatValueInput: { data?: number; isLoading: boolean }
   fiatValueOutput: { data?: number; isLoading: boolean }
 }) {

src/components/swap/SwapDetailsDropdown.tsx

@@ -92,7 +92,7 @@ const Wrapper = styled(Column)`
 `
 
 interface SwapDetailsInlineProps {
-  trade: InterfaceTrade | undefined
+  trade?: InterfaceTrade
   syncing: boolean
   loading: boolean
   allowedSlippage: Percent

src/components/swap/SwapModalFooter.tsx

@@ -58,12 +58,12 @@ export default function SwapModalFooter({
   onAcceptChanges,
 }: {
   trade: InterfaceTrade
-  hash: string | undefined
+  hash?: string
   allowedSlippage: Percent
   onConfirm: () => void
-  swapErrorMessage: ReactNode | undefined
+  swapErrorMessage?: ReactNode
   disabledConfirm: boolean
-  swapQuoteReceivedDate: Date | undefined
+  swapQuoteReceivedDate?: Date
   fiatValueInput: { data?: number; isLoading: boolean }
   fiatValueOutput: { data?: number; isLoading: boolean }
   showAcceptChanges: boolean

src/components/swap/SwapModalHeaderAmount.tsx

@@ -33,7 +33,7 @@ interface AmountProps {
   field: Field
   tooltipText?: ReactNode
   label: ReactNode
-  amount: CurrencyAmount<Currency> | undefined
+  amount?: CurrencyAmount<Currency>
   usdAmount?: number
 }
 

src/components/swap/styleds.tsx

@@ -22,7 +22,7 @@ export const PageWrapper = styled.div`
 `
 
 // Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
-export const SwapWrapper = styled.main<{ chainId: number | undefined }>`
+export const SwapWrapper = styled.main<{ chainId?: number }>`
   position: relative;
   background: ${({ theme }) => theme.backgroundSurface};
   border-radius: 16px;

src/components/vote/ExecuteModal.tsx

@@ -37,7 +37,7 @@ const ConfirmedIcon = styled(ColumnCenter)`
 interface ExecuteModalProps {
   isOpen: boolean
   onDismiss: () => void
-  proposalId: string | undefined // id for the proposal to execute
+  proposalId?: string // id for the proposal to execute
 }
 
 export default function ExecuteModal({ isOpen, onDismiss, proposalId }: ExecuteModalProps) {

src/components/vote/QueueModal.tsx

@@ -37,7 +37,7 @@ const ConfirmedIcon = styled(ColumnCenter)`
 interface QueueModalProps {
   isOpen: boolean
   onDismiss: () => void
-  proposalId: string | undefined // id for the proposal to queue
+  proposalId?: string // id for the proposal to queue
 }
 
 export default function QueueModal({ isOpen, onDismiss, proposalId }: QueueModalProps) {

src/components/vote/VoteModal.tsx

@@ -39,8 +39,8 @@ const ConfirmedIcon = styled(ColumnCenter)`
 interface VoteModalProps {
   isOpen: boolean
   onDismiss: () => void
-  voteOption: VoteOption | undefined
-  proposalId: string | undefined // id for the proposal to vote on
+  voteOption?: VoteOption
+  proposalId?: string // id for the proposal to vote on
 }
 
 export default function VoteModal({ isOpen, onDismiss, proposalId, voteOption }: VoteModalProps) {

src/graphql/data/TopTokens.ts

@@ -140,7 +140,7 @@ export type SparklineMap = { [key: string]: PricePoint[] | undefined }
 export type TopToken = NonNullable<NonNullable<TopTokens100Query>['topTokens']>[number]
 
 interface UseTopTokensReturnValue {
-  tokens: TopToken[] | undefined
+  tokens?: TopToken[]
   tokenSortRank: Record<string, number>
   loadingTokens: boolean
   sparklines: SparklineMap

src/graphql/data/util.tsx

@@ -153,7 +153,7 @@ export function getTokenDetailsURL({
 
 export function unwrapToken<
   T extends {
-    address?: string | null | undefined
+    address?: string | null
   } | null
 >(chainId: number, token: T): T {
   if (!token?.address) return token

src/graphql/thegraph/FeeTierDistributionQuery.ts

@@ -37,7 +37,7 @@ export default function useFeeTierDistributionQuery(
   token0: string | undefined,
   token1: string | undefined,
   interval: number
-): { error: ApolloError | undefined; isLoading: boolean; data: FeeTierDistributionQuery } {
+): { error?: ApolloError; isLoading: boolean; data: FeeTierDistributionQuery } {
   const {
     data,
     loading: isLoading,

src/hooks/useClientSideV3Trade.ts

@@ -33,7 +33,7 @@ export function useClientSideV3Trade<TTradeType extends TradeType>(
   tradeType: TTradeType,
   amountSpecified?: CurrencyAmount<Currency>,
   otherCurrency?: Currency
-): { state: TradeState; trade: InterfaceTrade | undefined } {
+): { state: TradeState; trade?: InterfaceTrade } {
   const [currencyIn, currencyOut] =
     tradeType === TradeType.EXACT_INPUT
       ? [amountSpecified?.currency, otherCurrency]

src/hooks/useDerivedPositionInfo.ts

@@ -5,8 +5,8 @@ import { PositionDetails } from 'types/position'
 import { useCurrency } from './Tokens'
 
 export function useDerivedPositionInfo(positionDetails: PositionDetails | undefined): {
-  position: Position | undefined
-  pool: Pool | undefined
+  position?: Position
+  pool?: Pool
 } {
   const currency0 = useCurrency(positionDetails?.token0)
   const currency1 = useCurrency(positionDetails?.token1)

src/hooks/useFeeTierDistribution.ts

@@ -13,7 +13,7 @@ const MAX_DATA_BLOCK_AGE = 20
 interface FeeTierDistribution {
   isLoading: boolean
   isError: boolean
-  largestUsageFeeTier?: FeeAmount | undefined
+  largestUsageFeeTier?: FeeAmount
 
   // distributions as percentages of overall liquidity
   distributions?: Record<FeeAmount, number | undefined>

src/hooks/usePoolTickData.ts

@@ -174,7 +174,7 @@ function useAllV3Ticks(
 ): {
   isLoading: boolean
   error: unknown
-  ticks: TickData[] | undefined
+  ticks?: TickData[]
 } {
   const useSubgraph = currencyA ? !CHAIN_IDS_MISSING_SUBGRAPH_DATA.includes(currencyA.chainId) : true
 
@@ -213,8 +213,8 @@ export function usePoolActiveLiquidity(
 ): {
   isLoading: boolean
   error: any
-  activeTick: number | undefined
-  data: TickProcessed[] | undefined
+  activeTick?: number
+  data?: TickProcessed[]
 } {
   const pool = usePool(currencyA, currencyB, feeAmount)
 

src/hooks/useSwapCallback.tsx

@@ -13,7 +13,7 @@ import { useUniversalRouterSwapCallback } from './useUniversalRouter'
 // and the user has approved the slippage adjusted input amount for the trade
 export function useSwapCallback(
   trade: Trade<Currency, Currency, TradeType> | undefined, // trade to execute, required
-  fiatValues: { amountIn: number | undefined; amountOut: number | undefined }, // usd values for amount in and out, logged for analytics
+  fiatValues: { amountIn?: number; amountOut?: number }, // usd values for amount in and out, logged for analytics
   allowedSlippage: Percent, // in bips
   permitSignature: PermitSignature | undefined
 ): { callback: null | (() => Promise<string>) } {

src/hooks/useTokenAllowance.ts

@@ -11,7 +11,7 @@ export function useTokenAllowance(
   owner?: string,
   spender?: string
 ): {
-  tokenAllowance: CurrencyAmount<Token> | undefined
+  tokenAllowance?: CurrencyAmount<Token>
   isSyncing: boolean
 } {
   const contract = useTokenContract(token?.address, false)
@@ -21,7 +21,7 @@ export function useTokenAllowance(
   // This guarantees that the tokenAllowance is marked isSyncing upon approval and updated upon being synced.
   const [blocksPerFetch, setBlocksPerFetch] = useState<1>()
   const { result, syncing: isSyncing } = useSingleCallResult(contract, 'allowance', inputs, { blocksPerFetch }) as {
-    result: Awaited<ReturnType<NonNullable<typeof contract>['allowance']>> | undefined
+    result?: Awaited<ReturnType<NonNullable<typeof contract>['allowance']>>
     syncing: boolean
   }
 

src/hooks/useUSDPrice.ts

@@ -21,7 +21,7 @@ const ETH_AMOUNT_OUT: { [chainId: number]: CurrencyAmount<Currency> } = {
 }
 
 function useETHValue(currencyAmount?: CurrencyAmount<Currency>): {
-  data: CurrencyAmount<Currency> | undefined
+  data?: CurrencyAmount<Currency>
   isLoading: boolean
 } {
   const chainId = currencyAmount?.currency?.chainId
@@ -51,7 +51,7 @@ function useETHValue(currencyAmount?: CurrencyAmount<Currency>): {
 }
 
 export function useUSDPrice(currencyAmount?: CurrencyAmount<Currency>): {
-  data: number | undefined
+  data?: number
   isLoading: boolean
 } {
   const chain = currencyAmount?.currency.chainId ? chainIdToBackendName(currencyAmount?.currency.chainId) : undefined

src/hooks/useUniversalRouter.ts

@@ -45,7 +45,7 @@ interface SwapOptions {
 
 export function useUniversalRouterSwapCallback(
   trade: Trade<Currency, Currency, TradeType> | undefined,
-  fiatValues: { amountIn: number | undefined; amountOut: number | undefined },
+  fiatValues: { amountIn?: number; amountOut?: number },
   options: SwapOptions
 ) {
   const { account, chainId, provider } = useWeb3React()

src/hooks/useV3Positions.ts

@@ -7,7 +7,7 @@ import { useV3NFTPositionManagerContract } from './useContract'
 
 interface UseV3PositionsResults {
   loading: boolean
-  positions: PositionDetails[] | undefined
+  positions?: PositionDetails[]
 }
 
 function useV3PositionsFromTokenIds(tokenIds: BigNumber[] | undefined): UseV3PositionsResults {
@@ -51,7 +51,7 @@ function useV3PositionsFromTokenIds(tokenIds: BigNumber[] | undefined): UseV3Pos
 
 interface UseV3PositionResults {
   loading: boolean
-  position: PositionDetails | undefined
+  position?: PositionDetails
 }
 
 export function useV3PositionFromTokenId(tokenId: BigNumber | undefined): UseV3PositionResults {

src/hooks/useWrapCallback.tsx

@@ -60,7 +60,7 @@ export default function useWrapCallback(
   inputCurrency: Currency | undefined | null,
   outputCurrency: Currency | undefined | null,
   typedValue: string | undefined
-): { wrapType: WrapType; execute?: undefined | (() => Promise<void>); inputError?: WrapInputError } {
+): { wrapType: WrapType; execute?: () => Promise<void>; inputError?: WrapInputError } {
   const { chainId, account } = useWeb3React()
   const wethContract = useWETHContract()
   const balance = useCurrencyBalance(account ?? undefined, inputCurrency ?? undefined)

src/lib/hooks/routing/useRoutingAPIArguments.ts

@@ -15,9 +15,9 @@ export function useRoutingAPIArguments({
   tradeType,
   routerPreference,
 }: {
-  tokenIn: Currency | undefined
-  tokenOut: Currency | undefined
-  amount: CurrencyAmount<Currency> | undefined
+  tokenIn?: Currency
+  tokenOut?: Currency
+  amount?: CurrencyAmount<Currency>
   tradeType: TradeType
   routerPreference: RouterPreference | typeof INTERNAL_ROUTER_PREFERENCE_PRICE
 }) {

src/lib/utils/analytics.ts

@@ -40,7 +40,7 @@ export const formatSwapSignedAnalyticsEventProperties = ({
   txHash,
 }: {
   trade: InterfaceTrade | Trade<Currency, Currency, TradeType>
-  fiatValues: { amountIn: number | undefined; amountOut: number | undefined }
+  fiatValues: { amountIn?: number; amountOut?: number }
   txHash: string
 }) => ({
   transaction_hash: txHash,

src/lib/utils/formatLocaleNumber.ts

@@ -3,7 +3,7 @@ import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from 'constants/locales'
 
 interface FormatLocaleNumberArgs {
   number: CurrencyAmount<Currency> | Price<Currency, Currency> | number
-  locale: string | null | undefined
+  locale?: string | null
   options?: Intl.NumberFormatOptions
   sigFigs?: number
   fixedDecimals?: number

src/lib/utils/parseENSAddress.ts

 const ENS_NAME_REGEX = /^(([a-zA-Z0-9]+(-[a-zA-Z0-9]+)*\.)+)eth(\/.*)?$/
 
-export default function parseENSAddress(
-  ensAddress: string
-): { ensName: string; ensPath: string | undefined } | undefined {
+export default function parseENSAddress(ensAddress: string): { ensName: string; ensPath?: string } | undefined {
   const match = ensAddress.match(ENS_NAME_REGEX)
   if (!match) return undefined
   return { ensName: `${match[1].toLowerCase()}eth`, ensPath: match[4] }

src/nft/components/bag/BagFooter.tsx

@@ -206,9 +206,9 @@ const InputCurrencyValue = ({
 }: {
   usingPayWithAnyToken: boolean
   totalEthPrice: BigNumber
-  activeCurrency: Currency | undefined | null
+  activeCurrency?: Currency | null
   tradeState: TradeState
-  trade: InterfaceTrade | undefined
+  trade?: InterfaceTrade
 }) => {
   if (!usingPayWithAnyToken) {
     return (
@@ -241,7 +241,7 @@ const FiatValue = ({
   usingPayWithAnyToken,
 }: {
   usdcValue: CurrencyAmount<Token> | null
-  priceImpact: PriceImpact | undefined
+  priceImpact?: PriceImpact
   tradeState: TradeState
   usingPayWithAnyToken: boolean
 }) => {

src/nft/components/bag/BagRow.tsx

@@ -82,7 +82,7 @@ const NoContentContainer = () => (
 
 interface BagRowProps {
   asset: UpdatedGenieAsset
-  usdPrice: number | undefined
+  usdPrice?: number
   removeAsset: (assets: GenieAsset[]) => void
   showRemove?: boolean
   grayscale?: boolean
@@ -168,7 +168,7 @@ export const BagRow = ({ asset, usdPrice, removeAsset, showRemove, grayscale, is
 
 interface PriceChangeBagRowProps {
   asset: UpdatedGenieAsset
-  usdPrice: number | undefined
+  usdPrice?: number
   markAssetAsReviewed: (asset: UpdatedGenieAsset, toKeep: boolean) => void
   top?: boolean
   isMobile: boolean
@@ -219,7 +219,7 @@ export const PriceChangeBagRow = ({ asset, usdPrice, markAssetAsReviewed, top, i
 
 interface UnavailableAssetsHeaderRowProps {
   assets?: UpdatedGenieAsset[]
-  usdPrice: number | undefined
+  usdPrice?: number
   clearUnavailableAssets: () => void
   didOpenUnavailableAssets: boolean
   setDidOpenUnavailableAssets: (didOpen: boolean) => void

src/nft/components/collection/Sweep.tsx

@@ -111,7 +111,7 @@ const NftDisplayContainer = styled.div`
   height: 34px;
 `
 
-const NftHolder = styled.div<{ index: number; src: string | undefined }>`
+const NftHolder = styled.div<{ index: number; src?: string }>`
   position: absolute;
   top: 50%;
   left: 50%;

src/nft/components/details/AssetActivity.tsx

@@ -147,7 +147,7 @@ export const LoadingAssetActivity = ({ rowCount }: { rowCount: number }) => {
   )
 }
 
-const AssetActivity = ({ events }: { events: ActivityEvent[] | undefined }) => {
+const AssetActivity = ({ events }: { events?: ActivityEvent[] }) => {
   return (
     <ActivityTable>
       {events &&

src/nft/components/details/detailsV2/MediaRenderer.tsx

@@ -128,7 +128,7 @@ function assetMediaType(asset: GenieAsset): MediaType {
   return MediaType.Image
 }
 
-const RenderMediaShadow = ({ imageUrl }: { imageUrl: string | undefined }) => {
+const RenderMediaShadow = ({ imageUrl }: { imageUrl?: string }) => {
   const [contentNotAvailable, setContentNotAvailable] = useState(false)
 
   if (!imageUrl || contentNotAvailable) {

src/nft/components/profile/list/PriceTextInput.tsx

@@ -32,7 +32,7 @@ const InputWrapper = styled(Row)<{ borderColor: string }>`
   box-sizing: border-box;
 `
 
-const CurrencyWrapper = styled.div<{ listPrice: number | undefined }>`
+const CurrencyWrapper = styled.div<{ listPrice?: number }>`
   color: ${({ listPrice, theme }) => (listPrice ? theme.textPrimary : theme.textSecondary)};
 `
 

src/nft/components/profile/view/ProfilePage.tsx

@@ -313,7 +313,7 @@ const CollectionFilterItem = ({
   collection,
   setCollectionFilters,
 }: {
-  collection: WalletCollection | undefined
+  collection?: WalletCollection
   setCollectionFilters: (address: string) => void
 }) => {
   if (!collection) return null

src/nft/hooks/useDerivedPayWithAnyTokenSwapInfo.ts

@@ -9,8 +9,8 @@ export default function useDerivedPayWithAnyTokenSwapInfo(
   parsedOutputAmount?: CurrencyAmount<NativeCurrency | Token>
 ): {
   state: TradeState
-  trade: InterfaceTrade | undefined
-  maximumAmountIn: CurrencyAmount<Token> | undefined
+  trade?: InterfaceTrade
+  maximumAmountIn?: CurrencyAmount<Token>
   allowedSlippage: Percent
 } {
   const { state, trade } = useBestTrade(TradeType.EXACT_OUTPUT, parsedOutputAmount, inputCurrency ?? undefined)

src/nft/hooks/useTokenInput.ts

@@ -4,10 +4,10 @@ import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
 
 interface TokenInputState {
-  inputCurrency: Currency | undefined
+  inputCurrency?: Currency
   setInputCurrency: (currency: Currency | undefined) => void
   clearInputCurrency: () => void
-  tokenTradeInput: TokenTradeInput | undefined
+  tokenTradeInput?: TokenTradeInput
   setTokenTradeInput: (tokenTradeInput: TokenTradeInput | undefined) => void
 }
 

src/nft/hooks/useWalletBalance.ts

@@ -8,7 +8,7 @@ interface WalletBalanceProps {
   address: string
   balance: string
   weiBalance: BigNumber
-  provider: Web3Provider | undefined
+  provider?: Web3Provider
 }
 
 export function useWalletBalance(): WalletBalanceProps {

src/nft/types/sell/sell.ts

@@ -88,7 +88,7 @@ export enum ListingStatus {
 }
 
 export interface AssetRow {
-  image: string | undefined
+  image?: string
   name?: string
   status: ListingStatus
   marketplace: ListingMarket

src/nft/utils/tokenRoutes.ts

@@ -109,9 +109,9 @@ function buildTradeRouteInput(swap: Swap): TokenTradeRouteInput {
 }
 
 export function buildAllTradeRouteInputs(trade: InterfaceTrade): {
-  mixedTokenTradeRouteInputs: TokenTradeRouteInput[] | undefined
-  v2TokenTradeRouteInputs: TokenTradeRouteInput[] | undefined
-  v3TokenTradeRouteInputs: TokenTradeRouteInput[] | undefined
+  mixedTokenTradeRouteInputs?: TokenTradeRouteInput[]
+  v2TokenTradeRouteInputs?: TokenTradeRouteInput[]
+  v3TokenTradeRouteInputs?: TokenTradeRouteInput[]
 } {
   const mixedTokenTradeRouteInputs: TokenTradeRouteInput[] = []
   const v2TokenTradeRouteInputs: TokenTradeRouteInput[] = []

src/pages/CreateProposal/ProposalActionDetail.tsx

@@ -31,7 +31,7 @@ export const ProposalActionDetail = ({
 }: {
   className?: string
   proposalAction: ProposalAction
-  currency: Currency | undefined
+  currency?: Currency
   amount: string
   toAddress: string
   onCurrencySelect: (currency: Currency) => void

src/pages/CreateProposal/ProposalSubmissionModal.tsx

@@ -15,7 +15,7 @@ export const ProposalSubmissionModal = ({
   onDismiss,
 }: {
   isOpen: boolean
-  hash: string | undefined
+  hash?: string
   onDismiss: () => void
 }) => {
   const theme = useTheme()

src/pages/Swap/index.tsx

@@ -172,7 +172,7 @@ export function Swap({
 }: {
   className?: string
   prefilledState?: Partial<SwapState>
-  chainId: SupportedChainId | undefined
+  chainId?: SupportedChainId
   onCurrencyChange?: (selected: Pick<SwapState, Field.INPUT | Field.OUTPUT>) => void
   disableTokenInputs?: boolean
 }) {
@@ -334,10 +334,10 @@ export function Swap({
   // modal and loading
   const [{ showConfirm, tradeToConfirm, swapErrorMessage, attemptingTxn, txHash }, setSwapState] = useState<{
     showConfirm: boolean
-    tradeToConfirm: InterfaceTrade | undefined
+    tradeToConfirm?: InterfaceTrade
     attemptingTxn: boolean
-    swapErrorMessage: string | undefined
-    txHash: string | undefined
+    swapErrorMessage?: string
+    txHash?: string
   }>({
     showConfirm: false,
     tradeToConfirm: undefined,

src/state/connection/reducer.ts

@@ -22,7 +22,7 @@ const connectionSlice = createSlice({
   reducers: {
     updateConnectionError(
       state,
-      { payload: { connectionType, error } }: { payload: { connectionType: ConnectionType; error: string | undefined } }
+      { payload: { connectionType, error } }: { payload: { connectionType: ConnectionType; error?: string } }
     ) {
       state.errorByConnectionType[connectionType] = error
     },

src/state/governance/hooks.ts

@@ -362,7 +362,7 @@ export function useUserDelegatee(): string {
 }
 
 // gets the users current votes
-export function useUserVotes(): { loading: boolean; votes: CurrencyAmount<Token> | undefined } {
+export function useUserVotes(): { loading: boolean; votes?: CurrencyAmount<Token> } {
   const { account, chainId } = useWeb3React()
   const uniContract = useUniContract()
 

src/state/logs/hooks.ts

@@ -21,7 +21,7 @@ enum LogsState {
 }
 
 interface UseLogsResult {
-  logs: Log[] | undefined
+  logs?: Log[]
   state: LogsState
 }
 

src/state/mint/v3/hooks.tsx

@@ -126,7 +126,7 @@ export function useV3DerivedMintInfo(
   currencyBalances: { [field in Field]?: CurrencyAmount<Currency> }
   dependentField: Field
   parsedAmounts: { [field in Field]?: CurrencyAmount<Currency> }
-  position: Position | undefined
+  position?: Position
   noLiquidity?: boolean
   errorMessage?: ReactNode
   invalidPool: boolean

src/state/stake/hooks.tsx

@@ -58,7 +58,7 @@ interface StakingInfo {
   // equivalent to percent of total supply * reward rate
   rewardRate: CurrencyAmount<Token>
   // when the period ends
-  periodFinish: Date | undefined
+  periodFinish?: Date
   // if pool is active
   active: boolean
   // calculates a hypothetical amount of token distributed to the active account per second.

src/state/swap/hooks.tsx

@@ -78,7 +78,7 @@ export function useDerivedSwapInfo(
 ): {
   currencies: { [field in Field]?: Currency | null }
   currencyBalances: { [field in Field]?: CurrencyAmount<Currency> }
-  parsedAmount: CurrencyAmount<Currency> | undefined
+  parsedAmount?: CurrencyAmount<Currency>
   inputError?: ReactNode
   trade: {
     trade?: InterfaceTrade

src/state/swap/reducer.ts

@@ -8,10 +8,10 @@ export interface SwapState {
   readonly independentField: Field
   readonly typedValue: string
   readonly [Field.INPUT]: {
-    readonly currencyId: string | undefined | null
+    readonly currencyId?: string | null
   }
   readonly [Field.OUTPUT]: {
-    readonly currencyId: string | undefined | null
+    readonly currencyId?: string | null
   }
   // the typed recipient address or ENS name, or null if swap should go to sender
   readonly recipient: string | null

src/state/user/reducer.ts

@@ -10,7 +10,7 @@ import { SerializedPair, SerializedToken, SlippageTolerance } from './types'
 const currentTimestamp = () => new Date().getTime()
 
 export interface UserState {
-  buyFiatFlowCompleted: boolean | undefined
+  buyFiatFlowCompleted?: boolean
 
   selectedWallet?: ConnectionType
 
@@ -53,7 +53,7 @@ export interface UserState {
   URLWarningVisible: boolean
   hideUniswapWalletBanner: boolean
   // undefined means has not gone through A/B split yet
-  showSurveyPopup: boolean | undefined
+  showSurveyPopup?: boolean
 }
 
 function pairKey(token0Address: string, token1Address: string) {

src/utils/formatNumbers.ts

@@ -24,7 +24,7 @@ export const priceToPreciseFloat = (price: Price<Currency, Currency> | undefined
 }
 
 interface FormatDollarArgs {
-  num: number | undefined | null
+  num?: number | null
   isPrice?: boolean
   lessPreciseStablecoinValues?: boolean
   digits?: number

src/utils/formatTickPrice.ts

@@ -4,7 +4,7 @@ import { Price, Token } from '@uniswap/sdk-core'
 import { Bound } from '../state/mint/v3/actions'
 
 interface FormatTickPriceArgs {
-  price: Price<Token, Token> | undefined
+  price?: Price<Token, Token>
   atLimit: { [bound in Bound]?: boolean | undefined }
   direction: Bound
   placeholder?: string

src/utils/loggingFormatters.ts

@@ -57,12 +57,12 @@ export const formatSwapPriceUpdatedEventProperties = (
 
 interface AnalyticsEventProps {
   trade: InterfaceTrade
-  hash: string | undefined
+  hash?: string
   allowedSlippage: Percent
-  transactionDeadlineSecondsSinceEpoch: number | undefined
+  transactionDeadlineSecondsSinceEpoch?: number
   isAutoSlippage: boolean
   isAutoRouterApi: boolean
-  swapQuoteReceivedDate: Date | undefined
+  swapQuoteReceivedDate?: Date
   routes: RoutingDiagramEntry[]
   fiatValueInput?: number
   fiatValueOutput?: number