build: lint for unused exports (#5513)

* build: fail on unused exports

* fix

* dedupe

* add unused export to test

* fix

* some fixes

* unused

* rm unresolved

* add .eslintignore

* rm

* unused modal

* unused useragent

.eslintignore

+*.config.ts
+*.d.ts

.eslintrc.json

@@ -11,6 +11,14 @@
   "settings": {
     "react": {
       "version": "detect"
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
     }
   },
   "ignorePatterns": [
@@ -38,10 +46,12 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
     "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:import/typescript"
   ],
-  "plugins": ["simple-import-sort", "unused-imports"],
+  "plugins": ["import", "simple-import-sort", "unused-imports"],
   "rules": {
+    "import/no-unused-modules": [2, { "unusedExports": true }],
     "unused-imports/no-unused-imports": "error",
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
@@ -52,7 +62,7 @@
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "react/react-in-jsx-scope": "off",
-    "react/jsx-curly-brace-presence": ["error", {"props": "never", "children": "never" }],
+    "react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "never" }],
     "object-shorthand": ["error", "always"],
     "no-restricted-imports": [
       "error",

package.json

@@ -99,7 +99,9 @@
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-better-styled-components": "^1.1.2",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.6.0",

src/components/claim/ClaimModal.tsx

-import { isAddress } from '@ethersproject/address'
-import { Trans } from '@lingui/macro'
-import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { useWeb3React } from '@web3-react/core'
-import JSBI from 'jsbi'
-import { useEffect, useState } from 'react'
-import { Text } from 'rebass'
-import styled from 'styled-components/macro'
-
-import Circle from '../../assets/images/blue-loader.svg'
-import tokenLogo from '../../assets/images/token-logo.png'
-import { useModalIsOpen, useToggleSelfClaimModal } from '../../state/application/hooks'
-import { ApplicationModal } from '../../state/application/reducer'
-import { useClaimCallback, useUserClaimData, useUserUnclaimedAmount } from '../../state/claim/hooks'
-import { useUserHasSubmittedClaim } from '../../state/transactions/hooks'
-import { CloseIcon, CustomLightSpinner, ExternalLink, ThemedText, UniTokenAnimated } from '../../theme'
-import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
-import { ButtonPrimary } from '../Button'
-import { AutoColumn, ColumnCenter } from '../Column'
-import { Break, CardBGImage, CardBGImageSmaller, CardNoise, CardSection, DataCard } from '../earn/styled'
-import Modal from '../Modal'
-import { RowBetween } from '../Row'
-
-const ContentWrapper = styled(AutoColumn)`
-  width: 100%;
-`
-
-const ModalUpper = styled(DataCard)`
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-  background: radial-gradient(76.02% 75.41% at 1.84% 0%, #ff007a 0%, #021d43 100%);
-`
-
-const ConfirmOrLoadingWrapper = styled.div<{ activeBG: boolean }>`
-  width: 100%;
-  padding: 24px;
-  position: relative;
-  background: ${({ activeBG }) =>
-    activeBG &&
-    'radial-gradient(76.02% 75.41% at 1.84% 0%, rgba(255, 0, 122, 0.2) 0%, rgba(33, 114, 229, 0.2) 100%), #FFFFFF;'};
-`
-
-const ConfirmedIcon = styled(ColumnCenter)`
-  padding: 60px 0;
-`
-
-const SOCKS_AMOUNT = 1000
-const USER_AMOUNT = 400
-
-export default function ClaimModal() {
-  const isOpen = useModalIsOpen(ApplicationModal.SELF_CLAIM)
-  const toggleClaimModal = useToggleSelfClaimModal()
-
-  const { account, chainId } = useWeb3React()
-
-  // used for UI loading states
-  const [attempting, setAttempting] = useState<boolean>(false)
-
-  // get user claim data
-  const userClaimData = useUserClaimData(account)
-
-  // monitor the status of the claim from contracts and txns
-  const { claimCallback } = useClaimCallback(account)
-  const unclaimedAmount: CurrencyAmount<Token> | undefined = useUserUnclaimedAmount(account)
-  const { claimSubmitted, claimTxn } = useUserHasSubmittedClaim(account ?? undefined)
-  const claimConfirmed = Boolean(claimTxn?.receipt)
-
-  function onClaim() {
-    setAttempting(true)
-    claimCallback()
-      // reset modal and log error
-      .catch((error) => {
-        setAttempting(false)
-        console.log(error)
-      })
-  }
-
-  // once confirmed txn is found, if modal is closed open, mark as not attempting regradless
-  useEffect(() => {
-    if (claimConfirmed && claimSubmitted && attempting) {
-      setAttempting(false)
-      if (!isOpen) {
-        toggleClaimModal()
-      }
-    }
-  }, [attempting, claimConfirmed, claimSubmitted, isOpen, toggleClaimModal])
-
-  const nonLPAmount = JSBI.multiply(
-    JSBI.BigInt((userClaimData?.flags?.isSOCKS ? SOCKS_AMOUNT : 0) + (userClaimData?.flags?.isUser ? USER_AMOUNT : 0)),
-    JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(18))
-  )
-
-  return (
-    <Modal isOpen={isOpen} onDismiss={toggleClaimModal} maxHeight={90}>
-      {!attempting && !claimConfirmed && (
-        <ContentWrapper gap="lg">
-          <ModalUpper>
-            <CardBGImage />
-            <CardNoise />
-            <CardSection gap="md">
-              <RowBetween>
-                <ThemedText.DeprecatedWhite fontWeight={500}>
-                  <Trans>Claim UNI</Trans>
-                </ThemedText.DeprecatedWhite>
-                <CloseIcon onClick={toggleClaimModal} style={{ zIndex: 99 }} color="white" />
-              </RowBetween>
-              <ThemedText.DeprecatedWhite fontWeight={700} fontSize={36}>
-                <Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans>
-              </ThemedText.DeprecatedWhite>
-            </CardSection>
-            <Break />
-            <CardSection gap="sm">
-              {userClaimData?.flags?.isSOCKS && (
-                <RowBetween>
-                  <ThemedText.DeprecatedSubHeader color="white">SOCKS</ThemedText.DeprecatedSubHeader>
-                  <ThemedText.DeprecatedSubHeader color="white">
-                    <Trans>{SOCKS_AMOUNT} UNI</Trans>
-                  </ThemedText.DeprecatedSubHeader>
-                </RowBetween>
-              )}
-              {userClaimData?.flags?.isLP &&
-                unclaimedAmount &&
-                JSBI.greaterThanOrEqual(unclaimedAmount.quotient, nonLPAmount) && (
-                  <RowBetween>
-                    <ThemedText.DeprecatedSubHeader color="white">
-                      <Trans>Liquidity</Trans>
-                    </ThemedText.DeprecatedSubHeader>
-                    <ThemedText.DeprecatedSubHeader color="white">
-                      <Trans>
-                        {unclaimedAmount
-                          .subtract(CurrencyAmount.fromRawAmount(unclaimedAmount.currency, nonLPAmount))
-                          .toFixed(0, { groupSeparator: ',' })}{' '}
-                        UNI
-                      </Trans>
-                    </ThemedText.DeprecatedSubHeader>
-                  </RowBetween>
-                )}
-              {userClaimData?.flags?.isUser && (
-                <RowBetween>
-                  <ThemedText.DeprecatedSubHeader color="white">
-                    <Trans>User</Trans>
-                  </ThemedText.DeprecatedSubHeader>
-                  <ThemedText.DeprecatedSubHeader color="white">
-                    <Trans>{USER_AMOUNT} UNI</Trans>
-                  </ThemedText.DeprecatedSubHeader>
-                </RowBetween>
-              )}
-            </CardSection>
-          </ModalUpper>
-          <AutoColumn gap="md" style={{ padding: '1rem', paddingTop: '0' }} justify="center">
-            <ThemedText.DeprecatedSubHeader fontWeight={500}>
-              <Trans>
-                As a member of the Uniswap community you may claim UNI to be used for voting and governance.
-                <br />
-                <br />
-                <ExternalLink href="https://uniswap.org/blog/uni">Read more about UNI</ExternalLink>
-              </Trans>
-            </ThemedText.DeprecatedSubHeader>
-            <ButtonPrimary
-              disabled={!isAddress(account ?? '')}
-              padding="16px 16px"
-              width="100%"
-              $borderRadius="12px"
-              mt="1rem"
-              onClick={onClaim}
-            >
-              <Trans>Claim UNI</Trans>
-            </ButtonPrimary>
-          </AutoColumn>
-        </ContentWrapper>
-      )}
-      {(attempting || claimConfirmed) && (
-        <ConfirmOrLoadingWrapper activeBG={true}>
-          <CardNoise />
-          <CardBGImageSmaller desaturate />
-          <RowBetween>
-            <div />
-            <CloseIcon onClick={toggleClaimModal} style={{ zIndex: 99 }} stroke="black" />
-          </RowBetween>
-          <ConfirmedIcon>
-            {!claimConfirmed ? (
-              <CustomLightSpinner src={Circle} alt="loader" size="90px" />
-            ) : (
-              <UniTokenAnimated width="72px" src={tokenLogo} alt="UNI" />
-            )}
-          </ConfirmedIcon>
-          <AutoColumn gap="100px" justify="center">
-            <AutoColumn gap="md" justify="center">
-              <ThemedText.DeprecatedLargeHeader fontWeight={600} color="black">
-                {claimConfirmed ? <Trans>Claimed!</Trans> : <Trans>Claiming</Trans>}
-              </ThemedText.DeprecatedLargeHeader>
-              {!claimConfirmed && (
-                <Text fontSize={36} color="#ff007a" fontWeight={800}>
-                  <Trans>{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI</Trans>
-                </Text>
-              )}
-            </AutoColumn>
-            {claimConfirmed && (
-              <>
-                <ThemedText.DeprecatedSubHeader fontWeight={500} color="black">
-                  <Trans>
-                    <span role="img" aria-label="party-hat">
-                      🎉{' '}
-                    </span>
-                    Welcome to team Unicorn :){' '}
-                    <span role="img" aria-label="party-hat">
-                      🎉
-                    </span>
-                  </Trans>
-                </ThemedText.DeprecatedSubHeader>
-              </>
-            )}
-            {attempting && !claimSubmitted && (
-              <ThemedText.DeprecatedSubHeader color="black">
-                <Trans>Confirm this transaction in your wallet</Trans>
-              </ThemedText.DeprecatedSubHeader>
-            )}
-            {attempting && claimSubmitted && !claimConfirmed && chainId && claimTxn?.hash && (
-              <ExternalLink
-                href={getExplorerLink(chainId, claimTxn?.hash, ExplorerDataType.TRANSACTION)}
-                style={{ zIndex: 99 }}
-              >
-                <Trans>View transaction on Explorer</Trans>
-              </ExternalLink>
-            )}
-          </AutoColumn>
-        </ConfirmOrLoadingWrapper>
-      )}
-    </Modal>
-  )
-}

src/graphql/data/TopTokens.ts

@@ -62,8 +62,6 @@ const tokenSparklineQuery = graphql`
   }
 `
 
-export type PrefetchedTopToken = NonNullable<TopTokens100Query['response']['topTokens']>[number]
-
 function useSortedTokens(tokens: NonNullable<TopTokens100Query['response']['topTokens']>) {
   const sortMethod = useAtomValue(sortMethodAtom)
   const sortAscending = useAtomValue(sortAscendingAtom)

src/state/claim/hooks.ts

@@ -99,7 +99,7 @@ function fetchClaim(account: string): Promise<UserClaimData> {
 
 // parse distributorContract blob and detect if user has claim data
 // null means we know it does not
-export function useUserClaimData(account: string | null | undefined): UserClaimData | null {
+function useUserClaimData(account: string | null | undefined): UserClaimData | null {
   const { chainId } = useWeb3React()
 
   const [claimInfo, setClaimInfo] = useState<{ [account: string]: UserClaimData | null }>({})

src/state/transactions/hooks.tsx

@@ -90,23 +90,3 @@ export function useHasPendingApproval(token?: Token, spender?: string): boolean
     [allTransactions, spender, token?.address]
   )
 }
-
-// watch for submissions to claim
-// return null if not done loading, return undefined if not found
-export function useUserHasSubmittedClaim(account?: string): {
-  claimSubmitted: boolean
-  claimTxn: TransactionDetails | undefined
-} {
-  const allTransactions = useAllTransactions()
-
-  // get the txn if it has been submitted
-  const claimTxn = useMemo(() => {
-    const txnIndex = Object.keys(allTransactions).find((hash) => {
-      const tx = allTransactions[hash]
-      return tx.info.type === TransactionType.CLAIM && tx.info.recipient === account
-    })
-    return txnIndex && allTransactions[txnIndex] ? allTransactions[txnIndex] : undefined
-  }, [account, allTransactions])
-
-  return { claimSubmitted: Boolean(claimTxn), claimTxn }
-}

src/state/user/reducer.ts

@@ -117,9 +117,6 @@ const userSlice = createSlice({
     updateHideClosedPositions(state, action) {
       state.userHideClosedPositions = action.payload.userHideClosedPositions
     },
-    updateShowSurveyPopup(state, action) {
-      state.showSurveyPopup = action.payload.showSurveyPopup
-    },
     updateHideNFTWelcomeModal(state, action) {
       state.hideNFTWelcomeModal = action.payload.hideNFTWelcomeModal
     },
@@ -189,7 +186,6 @@ export const {
   addSerializedToken,
   updateHideClosedPositions,
   updateMatchesDarkMode,
-  updateShowSurveyPopup,
   updateUserClientSideRouter,
   updateHideNFTWelcomeModal,
   updateUserDarkMode,

src/theme/index.tsx

@@ -88,7 +88,7 @@ function getSettings(darkMode: boolean) {
   }
 }
 
-export function getTheme(darkMode: boolean) {
+function getTheme(darkMode: boolean) {
   return {
     darkMode,
     ...(darkMode ? darkTheme : lightTheme),

src/utils/userAgent.ts

@@ -3,6 +3,4 @@ import { UAParser } from 'ua-parser-js'
 const parser = new UAParser(window.navigator.userAgent)
 const { type } = parser.getDevice()
 
-export const userAgent = parser.getResult()
-
 export const isMobile = type === 'mobile' || type === 'tablet'