Merge pull request #145 from lidofinance/feature/si-1058-fix-reef-kno…

…t-deps-on-lido-ethereum-sdk-playground

Update reef  knot on playground

docs/package.json

@@ -21,8 +21,8 @@
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.4.0",

package.json

@@ -46,7 +46,7 @@
     "husky": "^8.0.3",
     "prettier": "^3.0.1",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.4.5"
   },
   "resolutions": {
     "postcss": "8.4.31",

packages/sdk/package.json

@@ -134,9 +134,9 @@
   "scripts": {
     "build": "yarn clean && yarn build:cjs && yarn build:esm && yarn build:types",
     "types": "tsc --noEmit",
-    "build:cjs": "tsc --project tsconfig.build.json --module commonjs --outDir ./dist/cjs --removeComments --verbatimModuleSyntax false && echo > ./dist/cjs/package.json '{\"type\":\"commonjs\"}'",
-    "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir ./dist/esm && echo > ./dist/esm/package.json '{\"type\":\"module\",\"sideEffects\":false}'",
-    "build:types": "tsc --project tsconfig.build.json --module esnext --declarationDir ./dist/types --emitDeclarationOnly --declaration --declarationMap",
+    "build:cjs": "tsc --project tsconfig.build.json --module commonjs --moduleResolution node10 --outDir ./dist/cjs --removeComments --verbatimModuleSyntax false && echo > ./dist/cjs/package.json '{\"type\":\"commonjs\"}'",
+    "build:esm": "tsc --project tsconfig.build.json --module nodenext --outDir ./dist/esm && echo > ./dist/esm/package.json '{\"type\":\"module\",\"sideEffects\":false}'",
+    "build:types": "tsc --project tsconfig.build.json --module nodenext --declarationDir ./dist/types --emitDeclarationOnly --declaration --declarationMap",
     "test": "jest",
     "prepublishOnly": "node scripts/updateVersion.cjs",
     "lint": "eslint . --ext .ts --max-warnings 0",
@@ -157,6 +157,6 @@
     "jest": "^29.7.0",
     "rimraf": "^5.0.1",
     "ts-jest": "^29.1.2",
-    "typescript": "5.1.6"
+    "typescript": "^5.4.5"
   }
 }

playground/components/action/action.tsx

@@ -14,7 +14,7 @@ import {
   ResultCode,
   SuccessMessage,
 } from './styles';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 
 type ActionProps<TResult> = PropsWithChildren<{
   action: () => Promise<TResult> | TResult;

playground/components/connection-error/index.tsx

@@ -1,8 +1,9 @@
 import { CHAINS } from '@lido-sdk/constants';
 import { Block } from '@lidofinance/lido-ui';
-import { useConnectorError, useSupportedChains } from '@reef-knot/web3-react';
+import { useSupportedChains, useWeb3 } from 'reef-knot/web3-react';
 import { useMemo } from 'react';
 import styled from 'styled-components';
+import { useAccount } from 'wagmi';
 
 const ErrorBlock = styled(Block)`
   text-align: center;
@@ -12,7 +13,8 @@ const ErrorBlock = styled(Block)`
 `;
 
 export const ConnectionError = () => {
-  let errorMessage = useConnectorError()?.message;
+  const { error } = useWeb3();
+  const { isConnected } = useAccount();
   const { isUnsupported, supportedChains } = useSupportedChains();
 
   const chains = useMemo(() => {
@@ -24,10 +26,13 @@ export const ConnectionError = () => {
     return [chains.join(', '), lastChain].filter((chain) => chain).join(' or ');
   }, [supportedChains]);
 
-  if (isUnsupported) {
-    errorMessage = `Unsupported chain. Please switch to ${chains} in your wallet and restart the page.`;
+  if (isConnected && isUnsupported) {
+    return `Unsupported chain. Please switch to ${chains} in your wallet and restart the page.`;
   }
 
-  if (!errorMessage) return null;
-  return <ErrorBlock color="accent">{errorMessage}</ErrorBlock>;
+  if (!error) {
+    return;
+  }
+
+  return <ErrorBlock color="accent">{error.message}</ErrorBlock>;
 };

playground/components/custom-rpc-input/custom-rpc-input.tsx

@@ -1,11 +1,12 @@
-import { useSDK } from '@lido-sdk/react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { Accordion, Button, DataTableRow, Input } from '@lidofinance/lido-ui';
 import { useCustomRpc } from 'providers/web3';
 import { useEffect, useState } from 'react';
 import { Controls, StyledBlock } from './styles';
+import { dynamics } from 'config';
 
 export const CustomRpcInput = () => {
-  const { chainId } = useSDK();
+  const { chainId = dynamics.defaultChain } = useWeb3();
   const { activeRpc, setCustomRpcUrl, customRpc } = useCustomRpc();
   const [url, setUrl] = useState('');
 

playground/components/layout/header/headerWallet.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { CHAINS, getChainColor } from '@lido-sdk/constants';
 
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { ThemeToggler } from '@lidofinance/lido-ui';
 
 import WalletButton from 'components/layout/header/walletButton';

playground/components/layout/header/walletButton/walletButton.tsx

@@ -5,14 +5,14 @@ import {
   WalledButtonStyle,
   WalledButtonWrapperStyle,
 } from './walletButtonStyles';
+import { useAccount } from 'wagmi';
 import { useModal } from 'hooks/useModal';
 import { MODAL } from 'providers';
-import { useWeb3 } from '@reef-knot/web3-react';
 
 const WalletButton: FC<ButtonProps> = (props) => {
   const { onClick, ...rest } = props;
+  const { address } = useAccount();
   const { openModal } = useModal(MODAL.wallet);
-  const { account } = useWeb3();
 
   return (
     <WalledButtonStyle
@@ -23,7 +23,7 @@ const WalletButton: FC<ButtonProps> = (props) => {
       {...rest}
     >
       <WalledButtonWrapperStyle>
-        <AddressBadge address={account} />
+        <AddressBadge address={address} />
       </WalledButtonWrapperStyle>
     </WalledButtonStyle>
   );

playground/components/layout/header/walletConnect/walletConnect.tsx

@@ -1,14 +1,13 @@
 import { FC } from 'react';
 import { Button, ButtonProps } from '@lidofinance/lido-ui';
-import { useModal } from 'hooks/useModal';
-import { MODAL } from 'providers';
+import { useConnect } from 'reef-knot/core-react';
 
 const WalletConnect: FC<ButtonProps> = (props) => {
   const { onClick, ...rest } = props;
-  const { openModal } = useModal(MODAL.connect);
+  const { connect } = useConnect();
 
   return (
-    <Button onClick={openModal} {...rest}>
+    <Button onClick={connect} {...rest}>
       Connect wallet
     </Button>
   );

playground/components/no-ssr-wrapper/index.ts

@@ -0,0 +1 @@
+export { default as default } from './no-ssr-wrapper';

playground/components/no-ssr-wrapper/no-ssr-wrapper.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+
+const NoSSRWrapper = (props: { children: React.ReactNode }) => (
+  <>{props.children}</>
+);
+
+export default dynamic(() => Promise.resolve(NoSSRWrapper), {
+  ssr: false,
+});

playground/components/walletModal/walletModal.tsx

@@ -7,9 +7,10 @@ import {
   External,
   Copy,
 } from '@lidofinance/lido-ui';
-import { useEtherscanOpen } from '@lido-sdk/react';
-import { useConnectorInfo, useDisconnect, useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
+import { useConnectorInfo, useDisconnect } from 'reef-knot/core-react';
 import { useCopyToClipboard } from 'hooks/useCopyToClipboard';
+import { useEtherscanOpen } from 'hooks/useEtherscanOpen';
 import { FC, useCallback } from 'react';
 import {
   WalletModalContentStyle,
@@ -21,11 +22,11 @@ import {
   WalletModalActionsStyle,
 } from './walletModalStyles';
 
-const WalletModal: FC<ModalProps> = (props) => {
-  const { onClose } = props;
+const WalletModal: FC<ModalProps> = ({ onClose, ...props }) => {
   const { account } = useWeb3();
-  const { providerName } = useConnectorInfo();
+  const { connectorName } = useConnectorInfo();
   const { disconnect } = useDisconnect();
+
   const handleDisconnect = useCallback(() => {
     disconnect?.();
     onClose?.();
@@ -38,9 +39,9 @@ const WalletModal: FC<ModalProps> = (props) => {
     <Modal title="Account" {...props}>
       <WalletModalContentStyle>
         <WalletModalConnectedStyle>
-          {providerName && (
+          {connectorName && (
             <WalletModalConnectorStyle>
-              Connected with {providerName}
+              Connected with {connectorName}
             </WalletModalConnectorStyle>
           )}
 

playground/config/index.ts

@@ -3,5 +3,4 @@ export const { serverRuntimeConfig } = getConfig();
 export { default as dynamics } from './dynamics';
 export * from './api';
 export * from './locale';
-export * from './rpc';
 export * from './storage';

playground/demo/core/index.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { Input, Accordion } from '@lidofinance/lido-ui';
 import { Action, renderTokenResult } from 'components/action';
 import { useLidoSDK } from 'providers/sdk';
 import { renderBlockResult } from 'components/action/render-block-result';
+import NoSsrWrapper from '../../components/no-ssr-wrapper/no-ssr-wrapper';
 
 const locale = new Intl.Locale('en', { hourCycle: 'h24' });
 
@@ -65,11 +66,13 @@ export const CoreDemo = () => {
           core.getLatestBlockToTimestamp(BigInt(timestampSeconds))
         }
       >
-        <Input
-          label={`timestamp at ${dateAtTimestamp}`}
-          value={timestampSeconds}
-          onChange={(e) => setTimestampSeconds(e.currentTarget.value)}
-        />
+        <NoSsrWrapper>
+          <Input
+            label={`timestamp at ${dateAtTimestamp}`}
+            value={timestampSeconds}
+            onChange={(e) => setTimestampSeconds(e.currentTarget.value)}
+          />
+        </NoSsrWrapper>
       </Action>
     </Accordion>
   );

playground/demo/shares/index.tsx

@@ -1,5 +1,5 @@
 import { Input, Accordion } from '@lidofinance/lido-ui';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { Action, renderTokenResult } from 'components/action';
 import { DEFAULT_VALUE, ValueType } from 'components/tokenInput';
 import TokenInput from 'components/tokenInput/tokenInput';

playground/demo/stake/index.tsx

@@ -1,5 +1,5 @@
 import { Input, Accordion } from '@lidofinance/lido-ui';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { Action } from 'components/action';
 import { DEFAULT_VALUE, ValueType } from 'components/tokenInput';
 import TokenInput from 'components/tokenInput/tokenInput';

playground/demo/tokens/index.tsx

@@ -1,6 +1,6 @@
 import { AbstractLidoSDKErc20 } from '@lidofinance/lido-ethereum-sdk/dist/types/erc20';
 import { Input, Accordion } from '@lidofinance/lido-ui';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { Action, renderTokenResult } from 'components/action';
 import { DEFAULT_VALUE, ValueType } from 'components/tokenInput';
 import TokenInput from 'components/tokenInput/tokenInput';

playground/demo/unsteth/index.tsx

@@ -1,5 +1,5 @@
 import { Input, Accordion } from '@lidofinance/lido-ui';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { Action } from 'components/action';
 import { ToggleButton } from 'components/toggle-button';
 

playground/demo/withdrawals/claim.tsx

@@ -1,5 +1,5 @@
 import { Checkbox, Accordion } from '@lidofinance/lido-ui';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { RequestStatusWithId } from '@lidofinance/lido-ethereum-sdk';
 import { Action } from 'components/action';
 import { RequestsWrapper } from 'components/requestsWrapper';

playground/demo/withdrawals/request.tsx

@@ -1,5 +1,5 @@
 import { Accordion, Select, Option } from '@lidofinance/lido-ui';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { Action, renderTokenResult } from 'components/action';
 import TokenInput from 'components/tokenInput/tokenInput';
 import { useLidoSDK } from 'providers/sdk';

playground/demo/withdrawals/views.tsx

@@ -1,5 +1,5 @@
 import { Accordion } from '@lidofinance/lido-ui';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { Action, renderTokenResult } from 'components/action';
 import { useLidoSDK } from 'providers/sdk';
 

playground/demo/wrap/index.tsx

@@ -1,5 +1,5 @@
 import { Accordion } from '@lidofinance/lido-ui';
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { Action, renderTokenResult } from 'components/action';
 import { DEFAULT_VALUE, ValueType } from 'components/tokenInput';
 import TokenInput from 'components/tokenInput/tokenInput';

playground/hooks/useAddressState.ts

@@ -1,4 +1,4 @@
-import { useWeb3 } from '@reef-knot/web3-react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { useEffect, useState } from 'react';
 import { Address } from 'viem';
 

playground/hooks/useEtherscanOpen.ts

@@ -0,0 +1,20 @@
+import {
+  getEtherscanLink,
+  openWindow,
+  EtherscanEntities,
+} from '@lido-sdk/helpers';
+import { useCallback } from 'react';
+import { useAccount } from 'wagmi';
+
+export const useEtherscanOpen = (
+  hash: string,
+  entity: EtherscanEntities,
+): (() => void) => {
+  const { chainId } = useAccount();
+
+  return useCallback(() => {
+    if (chainId === undefined) return;
+    const link = getEtherscanLink(chainId, hash, entity);
+    openWindow(link);
+  }, [chainId, entity, hash]);
+};

playground/package.json

@@ -17,42 +17,33 @@
     "@ethersproject/constants": "^5.5.0",
     "@ethersproject/units": "^5.6.1",
     "@lido-sdk/constants": "^3.3.0",
-    "@lido-sdk/providers": "^1.4.14",
-    "@lido-sdk/react": "^2.0.6",
+    "@lido-sdk/helpers": "^1.6.0",
     "@lidofinance/lido-ethereum-sdk": "workspace:*",
     "@lidofinance/lido-ui": "^3.10.1",
     "@lidofinance/next-cache-files-middleware": "^0.35.0",
-    "@reef-knot/connect-wallet-modal": "1.6.2",
-    "@reef-knot/core-react": "1.6.0",
-    "@reef-knot/ledger-connector": "1.0.1",
-    "@reef-knot/types": "1.3.0",
-    "@reef-knot/ui-react": "1.0.7",
-    "@reef-knot/wallets-helpers": "1.1.5",
-    "@reef-knot/wallets-icons": "1.0.0",
-    "@reef-knot/wallets-list": "1.4.5",
-    "@reef-knot/web3-react": "1.5.0",
+    "@tanstack/react-query": "^5.51.1",
     "copy-to-clipboard": "^3.3.1",
     "fs-extra": "^10.1.0",
     "next": "^13.5.1",
     "next-logger": "^3.0.0",
     "prom-client": "^14.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-json-view": "^1.21.3",
+    "reef-knot": "^5.3.1",
     "styled-components": "^5.3.5",
     "swr": "^1.3.0",
     "tiny-invariant": "^1.3.1",
     "viem": "^2.0.6",
-    "wagmi": "^0.12.19"
+    "wagmi": "2.11.2"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^13.4.19",
     "@svgr/webpack": "^6.5.1",
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
     "@types/styled-components": "^5.1.23",
-    "typescript": "5.1.6",
+    "typescript": "^5.4.5",
     "url-loader": "^4.1.1"
   },
   "lint-staged": {