lidofinance · alx-khramov · Mar 20, 2023 · Mar 17, 2023 · Mar 17, 2023
@@ -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';

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 
 const LidoModalLogo = (): ReactElement => {
   return (

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Modal } from '@reef-knot/ui-react';
 import {
   WalletsModalProps,

@@ -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';

@@ -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';

@@ -1,4 +1,4 @@
-import { FC, useCallback } from 'react';
+import React, { FC, useCallback } from 'react';
 import {
   Blockchaincom,
   BlockchaincomInversion,

@@ -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';

@@ -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';

@@ -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';

@@ -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';

@@ -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';

@@ -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';

@@ -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';

@@ -1,4 +1,4 @@
-import { FC, useCallback } from 'react';
+import React, { FC, useCallback } from 'react';
 import {
   MathWallet,
   MathWalletInversion,

@@ -1,4 +1,4 @@
-import { FC, useCallback } from 'react';
+import React, { FC, useCallback } from 'react';
 import { useConnectorMetamask } from '@reef-knot/web3-react';
 import {
   MetaMaskCircle,

@@ -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';

@@ -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';

@@ -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';

@@ -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';

@@ -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';

@@ -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';

@@ -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';

@@ -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
@@ -5,7 +5,7 @@
   "compilerOptions": {
     "target": "ES6",
     "module": "ES2020",
-    "jsx": "react-jsx",
+    "jsx": "react",
     "lib": ["dom", "dom.iterable", "esnext"],
     "noImplicitReturns": true,
     "noImplicitThis": true,

@@ -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';

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from 'react';
+import React, { ForwardedRef, forwardRef } from 'react';
 import {
   ButtonWrapperStyle,
   ButtonIconStyle,

@@ -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 {

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from 'react';
+import React, { ForwardedRef, forwardRef } from 'react';
 import { LinkStyle } from './LinkStyles';
 import { LinkProps } from './types';
 

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from 'react';
+import React, { ForwardedRef, forwardRef } from 'react';
 
 import { ModalExtraStyle } from './ModalExtraStyles';
 import { ModalExtraProps } from './types';

@@ -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';

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled, { css } from '../../utils/styledWrapper.js';
 import { Close, ArrowBack } from '../../icons';
 import { ButtonIcon } from '../button';

@@ -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';

@@ -1,4 +1,4 @@
-import { memo, FC } from 'react';
+import React, { memo, FC } from 'react';
 import invariant from 'tiny-invariant';
 import {
   Web3Provider,