Add improvements for typings

.github/workflows/deploy.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
         REPO_NAME_SLUG: idoux
-
+        CI: false
     steps:
       - name: Checkout code
         uses: actions/checkout@v2

src/api/AdditionalServicesApi.ts

@@ -147,7 +147,7 @@ export class AdditionalServicesApiImpl implements AdditionalServicesApi {
     return url
   }
 
-  public async getAllAuctionDetails(): Promise<AuctionInfo[] | null> {
+  public async getAllAuctionDetails(): Promise<Maybe<AuctionInfo[]>> {
     try {
       const promises: Promise<Response>[] = []
       for (const networkId in this.urlsByNetwork) {
@@ -174,7 +174,7 @@ export class AdditionalServicesApiImpl implements AdditionalServicesApi {
   }
   public async getMostInterestingAuctionDetails(
     params: InterestingAuctionParams,
-  ): Promise<AuctionInfo[] | null> {
+  ): Promise<Maybe<AuctionInfo[]>> {
     try {
       const url = await this.getMostInterestingAuctionDetailsUrl(params)
 
@@ -314,7 +314,7 @@ export class AdditionalServicesApiImpl implements AdditionalServicesApi {
     }
   }
 
-  private async query<T>(networkId: number, queryString: string): Promise<T | null> {
+  private async query<T>(networkId: number, queryString: string): Promise<Maybe<T>> {
     const baseUrl = this._getBaseUrl(networkId)
 
     const url = baseUrl + queryString

src/components/AuctionHeader/index.tsx

@@ -75,8 +75,8 @@ const renderAuctionStatus = ({
   initialAuctionOrder,
 }: {
   auctionState: AuctionState
-  auctioningToken: Token | null
-  initialAuctionOrder: SellOrder | null
+  auctioningToken: Maybe<Token>
+  initialAuctionOrder: Maybe<SellOrder>
 }) => {
   switch (auctionState) {
     case AuctionState.ORDER_PLACING:

src/components/CurrencyInputPanel/index.tsx

@@ -112,14 +112,14 @@ interface CurrencyInputPanelProps {
   showMaxButton: boolean
   label?: string
   onTokenSelection?: (tokenAddress: string) => void
-  token?: Token | null
+  token?: Maybe<Token>
   disableTokenSelect?: boolean
   hideBalance?: boolean
   isExchange?: boolean
-  pair?: Pair | null
+  pair?: Maybe<Pair>
   hideInput?: boolean
   showSendWithSwap?: boolean
-  otherSelectedTokenAddress?: string | null
+  otherSelectedTokenAddress?: Maybe<string>
   id: string
 }
 

src/components/OrderbookChart.tsx

@@ -22,7 +22,7 @@ export interface OrderBookChartProps {
   /**
    * price/volume data with asks and bids
    */
-  data: PricePointDetails[] | null
+  data: Maybe<PricePointDetails[]>
 }
 
 const Wrapper = styled.div`
@@ -94,10 +94,10 @@ export interface PricePointDetails {
   priceFormatted: string
   totalVolumeNumber: number
   totalVolumeFormatted: string
-  askValueY: number | null
-  bidValueY: number | null
-  newOrderValueY: number | null
-  clearingPriceValueY: number | null
+  askValueY: Maybe<number>
+  bidValueY: Maybe<number>
+  newOrderValueY: Maybe<number>
+  clearingPriceValueY: Maybe<number>
 }
 
 export const createChart = (chartElement: HTMLElement): am4charts.XYChart => {
@@ -224,7 +224,7 @@ export const drawLabels = ({ baseToken, chart, quoteToken }: DrawLabelsParams):
 const OrderBookChart: React.FC<OrderBookChartProps> = (props: OrderBookChartProps) => {
   const { baseToken, data, networkId, quoteToken } = props
   const mountPoint = useRef<HTMLDivElement>(null)
-  const chartRef = useRef<am4charts.XYChart | null>(null)
+  const chartRef = useRef<Maybe<am4charts.XYChart>>(null)
 
   useEffect(() => {
     if (!mountPoint.current) return

src/components/OrderbookChartSmall.tsx

@@ -77,7 +77,7 @@ const Wrapper = styled.div`
 const OrderBookChartSmall: React.FC<OrderBookChartProps> = (props: OrderBookChartProps) => {
   const { baseToken, data, networkId, quoteToken } = props
   const mountPoint = useRef<HTMLDivElement>(null)
-  const chartRef = useRef<am4charts.XYChart | null>(null)
+  const chartRef = useRef<Maybe<am4charts.XYChart>>(null)
 
   useEffect(() => {
     if (!mountPoint.current) return

src/components/Popups/index.tsx

@@ -80,7 +80,7 @@ function PoolPopup({
   token0: { address?: string; symbol?: string }
   token1: { address?: string; symbol?: string }
 }) {
-  const pairAddress: string | null = useMemo(() => {
+  const pairAddress: Maybe<string> = useMemo(() => {
     if (!token0 || !token1) return null
     // just mock it out
     return Pair.getAddress(

src/components/PriceInputPanel/index.tsx

@@ -77,15 +77,15 @@ interface CurrencyInputPanelProps {
   showMaxButton: boolean
   label?: string
   onTokenSelection?: (tokenAddress: string) => void
-  biddingToken: Token | null
-  auctioningToken: Token | null
+  biddingToken: Maybe<Token>
+  auctioningToken: Maybe<Token>
   disableTokenSelect?: boolean
   hideBalance?: boolean
   isExchange?: boolean
-  pair?: Pair | null
+  pair?: Maybe<Pair>
   hideInput?: boolean
   showSendWithSwap?: boolean
-  otherSelectedTokenAddress?: string | null
+  otherSelectedTokenAddress?: Maybe<string>
   id: string
 }
 

src/components/modals/TransactionsModal/index.tsx

@@ -82,7 +82,7 @@ const TransactionListWrapper = styled.div`
 interface Props {
   isOpen: boolean
   maxHeight?: number
-  minHeight?: number | null
+  minHeight?: Maybe<number>
   onDismiss: () => void
 }
 

src/components/modals/WalletModal/Option.tsx

@@ -101,13 +101,13 @@ export default function Option({
   size = null,
   subheader = null,
 }: {
-  link?: string | null
+  link?: Maybe<string>
   clickable?: boolean
-  size?: number | null
+  size?: Maybe<number>
   onClick?: null | (() => void)
   color: string
   header: React.ReactNode
-  subheader: React.ReactNode | null
+  subheader: Maybe<React.ReactNode>
   icon: string
   active?: boolean
   id: string

src/hooks/useAllAuctionInfos.ts

@@ -16,9 +16,9 @@ export interface AuctionInfo {
   chainId: String
 }
 
-export function useAllAuctionInfo(): AuctionInfo[] | null {
-  const [auctionInfo, setAllAuctions] = useState<AuctionInfo[] | null>(null)
-  const [error, setError] = useState<Error | null>(null)
+export function useAllAuctionInfo(): Maybe<AuctionInfo[]> {
+  const [auctionInfo, setAllAuctions] = useState<Maybe<AuctionInfo[]>>(null)
+  const [error, setError] = useState<Maybe<Error>>(null)
 
   useEffect(() => {
     let cancelled = false

src/hooks/useCancelOrderCallback.ts

@@ -28,7 +28,7 @@ export function useCancelOrderCallback(
         library,
         account,
       )
-      let estimate, method: Function, args: Array<number | string[]>, value: BigNumber | null
+      let estimate, method: Function, args: Array<number | string[]>, value: Maybe<BigNumber>
       {
         estimate = easyAuctionContract.estimateGas.cancelSellOrders
         method = easyAuctionContract.cancelSellOrders

src/hooks/useClaimOrderCallback.ts

@@ -16,17 +16,17 @@ export const queueStartElement =
 export const queueLastElement = '0xffffffffffffffffffffffffffffffffffffffff000000000000000000000001'
 
 export interface AuctionProceedings {
-  claimableBiddingToken: TokenAmount | null
-  claimableAuctioningToken: TokenAmount | null
+  claimableBiddingToken: Maybe<TokenAmount>
+  claimableAuctioningToken: Maybe<TokenAmount>
 }
 
 export interface ClaimInformation {
   sellOrdersFormUser: string[]
 }
-export function useGetClaimInfo(): ClaimInformation | null {
+export function useGetClaimInfo(): Maybe<ClaimInformation> {
   const { account, chainId, library } = useActiveWeb3React()
-  const [claimInfo, setClaimInfo] = useState<ClaimInformation | null>(null)
-  const [error, setError] = useState<Error | null>(null)
+  const [claimInfo, setClaimInfo] = useState<Maybe<ClaimInformation>>(null)
+  const [error, setError] = useState<Maybe<Error>>(null)
   const { auctionId } = useSwapState()
 
   useMemo(() => {
@@ -157,7 +157,7 @@ export function useClaimOrderCallback(): null | (() => Promise<string>) {
       let estimate,
         method: Function,
         args: Array<string | string[] | number>,
-        value: BigNumber | null
+        value: Maybe<BigNumber>
       {
         estimate = easyAuctionContract.estimateGas.claimFromParticipantOrder
         method = easyAuctionContract.claimFromParticipantOrder

src/hooks/useContract.ts

@@ -15,7 +15,7 @@ export function useContract(
   address?: string,
   ABI?: any,
   withSignerIfPossible = true,
-): Contract | null {
+): Maybe<Contract> {
   const { account, library } = useActiveWeb3React()
 
   return useMemo(() => {
@@ -34,30 +34,30 @@ export function useContract(
   }, [address, ABI, library, withSignerIfPossible, account])
 }
 
-export function useV1FactoryContract(): Contract | null {
+export function useV1FactoryContract(): Maybe<Contract> {
   const { chainId } = useActiveWeb3React()
   return useContract(chainId === 1 ? V1_FACTORY_ADDRESS : undefined, V1_FACTORY_ABI, false)
 }
 
-export function useV1ExchangeContract(address: string): Contract | null {
+export function useV1ExchangeContract(address: string): Maybe<Contract> {
   return useContract(address, V1_EXCHANGE_ABI, false)
 }
 
 export function useTokenContract(
   tokenAddress?: string,
   withSignerIfPossible = true,
-): Contract | null {
+): Maybe<Contract> {
   return useContract(tokenAddress, ERC20_ABI, withSignerIfPossible)
 }
 
 export function usePairContract(
   pairAddress?: string,
   withSignerIfPossible = true,
-): Contract | null {
+): Maybe<Contract> {
   return useContract(pairAddress, IUniswapV2PairABI, withSignerIfPossible)
 }
 
-export function useMulticallContract(): Contract | null {
+export function useMulticallContract(): Maybe<Contract> {
   const { chainId } = useActiveWeb3React()
   return useContract(MULTICALL_NETWORKS[chainId as ChainId], MULTICALL_ABI, false)
 }

src/hooks/useCurrentClearingOrderAndVolumeCallback.ts

@@ -5,19 +5,20 @@ import { useSwapState } from '../state/orderPlacement/hooks'
 import { additionalServiceApi } from './../api'
 import { useActiveWeb3React } from './index'
 
-export function useClearingPriceInfo(): ClearingPriceAndVolumeData | null {
+export function useClearingPriceInfo(): Maybe<ClearingPriceAndVolumeData> {
   const { account, chainId, library } = useActiveWeb3React()
-  const [clearingInfo, setClearingPriceAndVolume] = useState<ClearingPriceAndVolumeData | null>(
+  const [clearingInfo, setClearingPriceAndVolume] = useState<Maybe<ClearingPriceAndVolumeData>>(
     null,
   )
-  const [error, setError] = useState<Error | null>(null)
+  const [error, setError] = useState<Maybe<Error>>(null)
   const { auctionId } = useSwapState()
 
   useMemo(() => {
     setClearingPriceAndVolume(null)
     setError(null)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [auctionId, chainId])
+
   useEffect(() => {
     let cancelled = false
 

src/hooks/useENSName.ts

@@ -7,10 +7,10 @@ import { useActiveWeb3React } from './index'
  * Does a reverse lookup for an address to find its ENS name.
  * Note this is not the same as looking up an ENS name to find an address.
  */
-export default function useENSName(address?: string): string | null {
+export default function useENSName(address?: string): Maybe<string> {
   const { library } = useActiveWeb3React()
 
-  const [ENSName, setENSName] = useState<string | null>(null)
+  const [ENSName, setENSName] = useState<Maybe<string>>(null)
 
   useEffect(() => {
     if (!library || !address) return

src/hooks/useInterestingAuctionDetails.ts

@@ -6,9 +6,9 @@ import { AuctionInfo } from './useAllAuctionInfos'
 export function useInterestingAuctionInfo(
   numberOfItems: number,
   chainId: number,
-): AuctionInfo[] | null {
-  const [auctionInfo, setMostInterestingAuctions] = useState<AuctionInfo[] | null>(null)
-  const [error, setError] = useState<Error | null>(null)
+): Maybe<AuctionInfo[]> {
+  const [auctionInfo, setMostInterestingAuctions] = useState<Maybe<AuctionInfo[]>>(null)
+  const [error, setError] = useState<Maybe<Error>>(null)
 
   useMemo(() => {
     setMostInterestingAuctions(null)

src/hooks/usePlaceOrderCallback.ts

@@ -35,7 +35,7 @@ export function usePlaceOrderCallback(
   const { auctionId, price, sellAmount } = useSwapState()
   const { onNewBid } = useOrderbookActionHandlers()
 
-  const easyAuctionInstance: Contract | null = useContract(
+  const easyAuctionInstance: Maybe<Contract> = useContract(
     EASY_AUCTION_NETWORKS[chainId as ChainId],
     easyAuctionABI,
   )
@@ -74,7 +74,7 @@ export function usePlaceOrderCallback(
       let estimate,
         method: Function,
         args: Array<string | string[] | number>,
-        value: BigNumber | null
+        value: Maybe<BigNumber>
       {
         estimate = easyAuctionContract.estimateGas.placeSellOrders
         method = easyAuctionContract.placeSellOrders

src/state/application/updater.ts

@@ -12,10 +12,10 @@ export default function Updater() {
   const dispatch = useDispatch()
 
   const windowVisible = useIsWindowVisible()
-  const [maxBlockNumber, setMaxBlockNumber] = useState<number | null>(null)
+  const [maxBlockNumber, setMaxBlockNumber] = useState<Maybe<number>>(null)
   // because blocks arrive in bunches with longer polling periods, we just want
   // to process the latest one.
-  const debouncedMaxBlockNumber = useDebounce<number | null>(maxBlockNumber, 100)
+  const debouncedMaxBlockNumber = useDebounce<Maybe<number>>(maxBlockNumber, 100)
 
   // update block number
   useEffect(() => {

src/state/multicall/actions.ts

@@ -60,6 +60,6 @@ export const updateMulticallResults = createAction<{
   chainId: number
   blockNumber: number
   results: {
-    [callKey: string]: string | null
+    [callKey: string]: Maybe<string>
   }
 }>('updateMulticallResults')

src/state/multicall/reducer.ts

@@ -24,7 +24,7 @@ export interface MulticallState {
   callResults: {
     [chainId: number]: {
       [callKey: string]: {
-        data?: string | null
+        data?: Maybe<string>
         blockNumber?: number
         fetchingBlockNumber?: number
       }

src/state/multicall/updater.tsx

@@ -138,7 +138,7 @@ export default function Updater() {
               chainId,
               results: outdatedCallKeys
                 .slice(firstCallKeyIndex, lastCallKeyIndex)
-                .reduce<{ [callKey: string]: string | null }>((memo, callKey, i) => {
+                .reduce<{ [callKey: string]: Maybe<string> }>((memo, callKey, i) => {
                   memo[callKey] = returnData[i] ?? null
                   return memo
                 }, {}),