From 2822feb4df488453462fd4343b206e12d7c42efe Mon Sep 17 00:00:00 2001 From: Alexander Khramov Date: Fri, 17 Mar 2023 18:11:00 +0300 Subject: [PATCH 1/2] fix: use "jsx": "react" for react-library compilerOptions --- packages/tsconfig/README.md | 16 +++++++++++++++- packages/tsconfig/react-library.json | 2 +- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/tsconfig/README.md b/packages/tsconfig/README.md index 0da79cf2..5e45aa5a 100644 --- a/packages/tsconfig/README.md +++ b/packages/tsconfig/README.md @@ -1,3 +1,17 @@ -# `tsconfig` +# tsconfig These are base shared `tsconfig.json`s from which all other `tsconfig.json`'s inherit from. + +## Notes + +### `react-library.json` +#### react-jsx +The legacy `react` option instead of `react-jsx` is being used +for the `compilerOptions.jsx` field. + +_Reason:_ +reef-knot supports react v17 at the moment of writing. +It has an issue with ESM because it has no `exports` +field in the `package.json`. It is fixed in react v18, and we +can switch to `react-jsx` option after migrating to react v18. +More info: https://github.com/facebook/react/issues/20235 diff --git a/packages/tsconfig/react-library.json b/packages/tsconfig/react-library.json index b0b65fdf..01c82859 100644 --- a/packages/tsconfig/react-library.json +++ b/packages/tsconfig/react-library.json @@ -5,7 +5,7 @@ "compilerOptions": { "target": "ES6", "module": "ES2020", - "jsx": "react-jsx", + "jsx": "react", "lib": ["dom", "dom.iterable", "esnext"], "noImplicitReturns": true, "noImplicitThis": true, From b1a5427ce8e2c9b9dc6a606ca6c0620ca4752bd3 Mon Sep 17 00:00:00 2001 From: Alexander Khramov Date: Fri, 17 Mar 2023 18:12:01 +0300 Subject: [PATCH 2/2] fix: add explicit React imports --- packages/connect-wallet-modal/src/components/Terms/Terms.tsx | 2 +- .../src/components/WalletsModal/LidoModalLogo.tsx | 2 +- .../src/components/WalletsModal/WalletsModal.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/ConnectInjected.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectAmbire.tsx | 2 +- .../src/connectButtons/connectBlockchaincom.tsx | 2 +- .../src/connectButtons/connectBraveWallet.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectCoin98.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectCoinbase.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectExodus.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectGamestop.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectImToken.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectLedger.tsx | 2 +- .../src/connectButtons/connectMathWallet.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectMetamask.tsx | 2 +- .../src/connectButtons/connectOperaWallet.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectTally.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectTrust.tsx | 2 +- .../src/connectButtons/connectWalletConnect.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectXdefi.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectZenGo.tsx | 2 +- .../connect-wallet-modal/src/connectButtons/connectZerion.tsx | 2 +- packages/ui-react/src/components/button/Button.tsx | 2 +- packages/ui-react/src/components/button/ButtonIcon.tsx | 2 +- packages/ui-react/src/components/checkbox/Checkbox.tsx | 2 +- packages/ui-react/src/components/link/Link.tsx | 2 +- packages/ui-react/src/components/modal/ModalExtra.tsx | 2 +- packages/ui-react/src/components/modal/ModalOverlay.tsx | 2 +- packages/ui-react/src/components/modal/ModalStyles.tsx | 1 + packages/web3-react/src/context/connectors.tsx | 2 +- packages/web3-react/src/context/web3.tsx | 2 +- 31 files changed, 31 insertions(+), 30 deletions(-) diff --git a/packages/connect-wallet-modal/src/components/Terms/Terms.tsx b/packages/connect-wallet-modal/src/components/Terms/Terms.tsx index 41826d25..7d45eddd 100644 --- a/packages/connect-wallet-modal/src/components/Terms/Terms.tsx +++ b/packages/connect-wallet-modal/src/components/Terms/Terms.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, FC } from 'react'; +import React, { ChangeEvent, FC } from 'react'; import { Checkbox, CheckboxProps, Link } from '@reef-knot/ui-react'; import { TermsStyle, TermsTextStyle } from './styles'; import { Metrics } from '../WalletsModal'; diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/LidoModalLogo.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/LidoModalLogo.tsx index 844d6e89..72165adc 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/LidoModalLogo.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/LidoModalLogo.tsx @@ -1,4 +1,4 @@ -import { ReactElement } from 'react'; +import React, { ReactElement } from 'react'; const LidoModalLogo = (): ReactElement => { return ( diff --git a/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModal.tsx b/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModal.tsx index d583b0bb..653d511a 100644 --- a/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModal.tsx +++ b/packages/connect-wallet-modal/src/components/WalletsModal/WalletsModal.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { Modal } from '@reef-knot/ui-react'; import { WalletsModalProps, diff --git a/packages/connect-wallet-modal/src/connectButtons/ConnectInjected.tsx b/packages/connect-wallet-modal/src/connectButtons/ConnectInjected.tsx index 937be502..c256f3fc 100644 --- a/packages/connect-wallet-modal/src/connectButtons/ConnectInjected.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/ConnectInjected.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnect, useDisconnect } from 'wagmi'; import { ConnectButton } from '../components'; import { capitalize } from '../helpers'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectAmbire.tsx b/packages/connect-wallet-modal/src/connectButtons/connectAmbire.tsx index 1e394f5d..17c749d4 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectAmbire.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectAmbire.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useEffect } from 'react'; +import React, { FC, useCallback, useEffect } from 'react'; import WalletConnectProvider from '@walletconnect/ethereum-provider'; import { Ambire } from '@reef-knot/wallets-icons/react'; import { useConnect, useDisconnect } from 'wagmi'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectBlockchaincom.tsx b/packages/connect-wallet-modal/src/connectButtons/connectBlockchaincom.tsx index 5a8d1443..4633dc15 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectBlockchaincom.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectBlockchaincom.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { Blockchaincom, BlockchaincomInversion, diff --git a/packages/connect-wallet-modal/src/connectButtons/connectBraveWallet.tsx b/packages/connect-wallet-modal/src/connectButtons/connectBraveWallet.tsx index 336c7cac..71af96ba 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectBraveWallet.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectBraveWallet.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorBraveWallet, helpers } from '@reef-knot/web3-react'; import { Brave as WalletIcon } from '@reef-knot/wallets-icons/react'; import { CONFLICTS } from '../constants/conflictChecks'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectCoin98.tsx b/packages/connect-wallet-modal/src/connectButtons/connectCoin98.tsx index 1047a453..bfbf9579 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectCoin98.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectCoin98.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorCoin98 } from '@reef-knot/web3-react'; import { Coin98 } from '@reef-knot/wallets-icons/react'; import { CONFLICTS } from '../constants/conflictChecks'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectCoinbase.tsx b/packages/connect-wallet-modal/src/connectButtons/connectCoinbase.tsx index 1820919b..c7d5aced 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectCoinbase.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectCoinbase.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorCoinbase } from '@reef-knot/web3-react'; import { Coinbase } from '@reef-knot/wallets-icons/react'; import { ConnectWalletProps } from './types'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectExodus.tsx b/packages/connect-wallet-modal/src/connectButtons/connectExodus.tsx index 2f84fdbb..fed30de1 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectExodus.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectExodus.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorExodus, helpers } from '@reef-knot/web3-react'; import { Link } from '@reef-knot/ui-react'; import { Exodus as WalletIcon } from '@reef-knot/wallets-icons/react'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectGamestop.tsx b/packages/connect-wallet-modal/src/connectButtons/connectGamestop.tsx index 09dc24f1..8b551af6 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectGamestop.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectGamestop.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorGamestop, helpers } from '@reef-knot/web3-react'; import { Gamestop as WalletIcon } from '@reef-knot/wallets-icons/react'; import { CONFLICTS } from '../constants/conflictChecks'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectImToken.tsx b/packages/connect-wallet-modal/src/connectButtons/connectImToken.tsx index 9227b19c..08b6f7e6 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectImToken.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectImToken.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorImToken } from '@reef-knot/web3-react'; import { ImToken as WalletIcon } from '@reef-knot/wallets-icons/react'; import { ConnectWalletProps } from './types'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectLedger.tsx b/packages/connect-wallet-modal/src/connectButtons/connectLedger.tsx index 063f37e4..f05cd95a 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectLedger.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectLedger.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorLedger } from '@reef-knot/web3-react'; import { Ledger, LedgerInversion } from '@reef-knot/wallets-icons/react'; import { ConnectWalletProps } from './types'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectMathWallet.tsx b/packages/connect-wallet-modal/src/connectButtons/connectMathWallet.tsx index c0797b35..173a419b 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectMathWallet.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectMathWallet.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { MathWallet, MathWalletInversion, diff --git a/packages/connect-wallet-modal/src/connectButtons/connectMetamask.tsx b/packages/connect-wallet-modal/src/connectButtons/connectMetamask.tsx index 4d60661e..640c0166 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectMetamask.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectMetamask.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorMetamask } from '@reef-knot/web3-react'; import { MetaMaskCircle, diff --git a/packages/connect-wallet-modal/src/connectButtons/connectOperaWallet.tsx b/packages/connect-wallet-modal/src/connectButtons/connectOperaWallet.tsx index 90bd8656..4d2f3a41 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectOperaWallet.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectOperaWallet.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorOperaWallet } from '@reef-knot/web3-react'; import { OperaWallet as WalletIcon } from '@reef-knot/wallets-icons/react'; import { ConnectWalletProps } from './types'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectTally.tsx b/packages/connect-wallet-modal/src/connectButtons/connectTally.tsx index 0e3997b3..9d5b3e4a 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectTally.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectTally.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorTally } from '@reef-knot/web3-react'; import { Tally } from '@reef-knot/wallets-icons/react'; import { ConnectWalletProps } from './types'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectTrust.tsx b/packages/connect-wallet-modal/src/connectButtons/connectTrust.tsx index b7540cb3..1f0db9c3 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectTrust.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectTrust.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorTrust } from '@reef-knot/web3-react'; import { Trust as WalletIcon } from '@reef-knot/wallets-icons/react'; import { ConnectWalletProps } from './types'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectWalletConnect.tsx b/packages/connect-wallet-modal/src/connectButtons/connectWalletConnect.tsx index f2680a6d..ebb5baee 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectWalletConnect.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectWalletConnect.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { WalletConnect } from '@reef-knot/wallets-icons/react'; import { useConnect, useDisconnect } from 'wagmi'; import { RKConnectorWalletConnect } from '@reef-knot/core-react'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectXdefi.tsx b/packages/connect-wallet-modal/src/connectButtons/connectXdefi.tsx index 905fc669..8758d44f 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectXdefi.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectXdefi.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback } from 'react'; +import React, { FC, useCallback } from 'react'; import { useConnectorXdefi } from '@reef-knot/web3-react'; import { XDEFI as WalletIcon } from '@reef-knot/wallets-icons/react'; import { CONFLICTS } from '../constants/conflictChecks'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectZenGo.tsx b/packages/connect-wallet-modal/src/connectButtons/connectZenGo.tsx index 317c5386..df95d37e 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectZenGo.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectZenGo.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useEffect } from 'react'; +import React, { FC, useCallback, useEffect } from 'react'; import { ZenGo as WalletIcon } from '@reef-knot/wallets-icons/react'; import WalletConnectProvider from '@walletconnect/ethereum-provider'; import { useConnect, useDisconnect } from 'wagmi'; diff --git a/packages/connect-wallet-modal/src/connectButtons/connectZerion.tsx b/packages/connect-wallet-modal/src/connectButtons/connectZerion.tsx index b6adf5c7..14f25992 100644 --- a/packages/connect-wallet-modal/src/connectButtons/connectZerion.tsx +++ b/packages/connect-wallet-modal/src/connectButtons/connectZerion.tsx @@ -1,4 +1,4 @@ -import { FC, useCallback, useEffect } from 'react'; +import React, { FC, useCallback, useEffect } from 'react'; import { Zerion as WalletIcon } from '@reef-knot/wallets-icons/react'; import WalletConnectProvider from '@walletconnect/ethereum-provider'; import { useConnect, useDisconnect } from 'wagmi'; diff --git a/packages/ui-react/src/components/button/Button.tsx b/packages/ui-react/src/components/button/Button.tsx index 0e800be9..960aa88b 100644 --- a/packages/ui-react/src/components/button/Button.tsx +++ b/packages/ui-react/src/components/button/Button.tsx @@ -1,4 +1,4 @@ -import { ForwardedRef, forwardRef } from 'react'; +import React, { ForwardedRef, forwardRef } from 'react'; import { ButtonStyle, ButtonContentStyle } from './ButtonStyles'; import { ButtonProps } from './types'; import { useRipple } from './useRipple'; diff --git a/packages/ui-react/src/components/button/ButtonIcon.tsx b/packages/ui-react/src/components/button/ButtonIcon.tsx index 982a2200..cf849715 100644 --- a/packages/ui-react/src/components/button/ButtonIcon.tsx +++ b/packages/ui-react/src/components/button/ButtonIcon.tsx @@ -1,4 +1,4 @@ -import { ForwardedRef, forwardRef } from 'react'; +import React, { ForwardedRef, forwardRef } from 'react'; import { ButtonWrapperStyle, ButtonIconStyle, diff --git a/packages/ui-react/src/components/checkbox/Checkbox.tsx b/packages/ui-react/src/components/checkbox/Checkbox.tsx index c14a1969..6ed08241 100644 --- a/packages/ui-react/src/components/checkbox/Checkbox.tsx +++ b/packages/ui-react/src/components/checkbox/Checkbox.tsx @@ -1,4 +1,4 @@ -import { ForwardedRef, forwardRef } from 'react'; +import React, { ForwardedRef, forwardRef } from 'react'; import styled from '../../utils/styledWrapper.js'; import { CheckboxProps } from './types'; import { diff --git a/packages/ui-react/src/components/link/Link.tsx b/packages/ui-react/src/components/link/Link.tsx index 0a289242..7c6ac8c6 100644 --- a/packages/ui-react/src/components/link/Link.tsx +++ b/packages/ui-react/src/components/link/Link.tsx @@ -1,4 +1,4 @@ -import { ForwardedRef, forwardRef } from 'react'; +import React, { ForwardedRef, forwardRef } from 'react'; import { LinkStyle } from './LinkStyles'; import { LinkProps } from './types'; diff --git a/packages/ui-react/src/components/modal/ModalExtra.tsx b/packages/ui-react/src/components/modal/ModalExtra.tsx index 5ad38952..d6af3711 100644 --- a/packages/ui-react/src/components/modal/ModalExtra.tsx +++ b/packages/ui-react/src/components/modal/ModalExtra.tsx @@ -1,4 +1,4 @@ -import { ForwardedRef, forwardRef } from 'react'; +import React, { ForwardedRef, forwardRef } from 'react'; import { ModalExtraStyle } from './ModalExtraStyles'; import { ModalExtraProps } from './types'; diff --git a/packages/ui-react/src/components/modal/ModalOverlay.tsx b/packages/ui-react/src/components/modal/ModalOverlay.tsx index 183fb3be..d4485a8d 100644 --- a/packages/ui-react/src/components/modal/ModalOverlay.tsx +++ b/packages/ui-react/src/components/modal/ModalOverlay.tsx @@ -1,4 +1,4 @@ -import { ForwardedRef, forwardRef } from 'react'; +import React, { ForwardedRef, forwardRef } from 'react'; import ReactDOM from 'react-dom'; import modalRoot from './modalRoot'; import { useMergeRefs, useEscape, useLockScroll } from '../../hooks'; diff --git a/packages/ui-react/src/components/modal/ModalStyles.tsx b/packages/ui-react/src/components/modal/ModalStyles.tsx index 9d22908d..8e3e0b1b 100644 --- a/packages/ui-react/src/components/modal/ModalStyles.tsx +++ b/packages/ui-react/src/components/modal/ModalStyles.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import styled, { css } from '../../utils/styledWrapper.js'; import { Close, ArrowBack } from '../../icons'; import { ButtonIcon } from '../button'; diff --git a/packages/web3-react/src/context/connectors.tsx b/packages/web3-react/src/context/connectors.tsx index eb8cf8da..86faa6bb 100644 --- a/packages/web3-react/src/context/connectors.tsx +++ b/packages/web3-react/src/context/connectors.tsx @@ -1,4 +1,4 @@ -import { createContext, FC, memo, useMemo } from 'react'; +import React, { createContext, FC, memo, useMemo } from 'react'; import { InjectedConnector } from '@web3-react/injected-connector'; import { WalletLinkConnector } from '@web3-react/walletlink-connector'; import { SafeAppConnector } from '@gnosis.pm/safe-apps-web3-react'; diff --git a/packages/web3-react/src/context/web3.tsx b/packages/web3-react/src/context/web3.tsx index 9f00989b..51909975 100644 --- a/packages/web3-react/src/context/web3.tsx +++ b/packages/web3-react/src/context/web3.tsx @@ -1,4 +1,4 @@ -import { memo, FC } from 'react'; +import React, { memo, FC } from 'react'; import invariant from 'tiny-invariant'; import { Web3Provider,