alx-khramov · Nov 6, 2026 · Oct 6, 2026 · Oct 9, 2026 · Oct 12, 2026 · Oct 10, 2026
@@ -48,7 +48,6 @@ jobs:
           ALCHEMY_API_KEY: ${{ secrets.ALCHEMY_API_KEY }}
           WALLETCONNECT_PROJECT_ID: ${{ vars.WALLETCONNECT_PROJECT_ID }}
           RPC_PROVIDER_URL_1: ${{ vars.RPC_PROVIDER_URL_1 }}
-          RPC_PROVIDER_URL_17000: ${{ vars.RPC_PROVIDER_URL_17000 }}
           RPC_PROVIDER_URL_560048: ${{ vars.RPC_PROVIDER_URL_560048 }}
           SUPPORTED_CHAINS: ${{ vars.SUPPORTED_CHAINS }}
           DEFAULT_CHAIN: ${{ vars.DEFAULT_CHAIN }}

@@ -1,3 +1,5 @@
 # Changelog
 
-The actual changelog is located at [`packages/reef-knot/CHANGELOG.md`](packages/reef-knot/CHANGELOG.md).
+For the main package, see [`packages/reef-knot/CHANGELOG.md`](packages/reef-knot/CHANGELOG.md).
+
+The UI packages, wallet adapters, Ledger connector and shared helpers have their own `CHANGELOG.md` files.
@@ -9,7 +9,8 @@ Web3 Wallets Connection Library
 ## Documentation
 
 - [How to add a wallet](docs/how-to-add-a-wallet.md)
-- [Migration guide](docs/migration-guide.md)
+- [Migration guide: 0.x → latest](docs/migration-guide-0.x-to-latest.md)
+- [Migration guide: 8.x → 9](docs/migration-guide-8.x-to-9.md)
 
 ---
 
@@ -20,13 +21,13 @@ Web3 Wallets Connection Library
 #### Using NPM
 
 ```bash
-npm install reef-knot
+npm install reef-knot @reef-knot/ui-lido-legacy
 ```
 
 #### Using Yarn
 
 ```bash
-yarn add reef-knot
+yarn add reef-knot @reef-knot/ui-lido-legacy
 ```
 
 ### Wagmi and Viem
@@ -42,12 +43,13 @@ For an example of Reef Knot setup and configuration, check out [this demo app](h
 To set up Reef Knot, you’ll need the following imports:
 
 ```typescript
-import { ReefKnotProvider, getDefaultConfig } from 'reef-knot/core-react';
 import {
-  ReefKnotWalletsModal,
+  ReefKnotProvider,
+  WalletsListEthereum,
+  getDefaultConfig,
   getDefaultWalletsModalConfig,
-} from 'reef-knot/connect-wallet-modal';
-import { WalletsListEthereum } from 'reef-knot/wallets';
+} from 'reef-knot';
+import { ReefKnotWalletsModal } from '@reef-knot/ui-lido-legacy';
 ```
 
 ### Setting Up Providers
@@ -81,7 +83,7 @@ The `getDefaultWalletsModalConfig` function provides default configuration optio
 - The wallets to display or pin
 - Links to the terms of service and privacy policy
 
-For more details, refer to the `connect-wallet-modal` package's [README](packages/connect-wallet-modal/README.md)
+Providers, headless hooks, configuration types and the default wallet list are exported from `reef-knot`. UI components are exported from `@reef-knot/ui-lido-legacy` or `@reef-knot/ui-lido`. See [headless UI and migration](docs/headless-ui.md).
 
 ### WalletsListEthereum
 
@@ -105,29 +107,29 @@ The `walletsShown` prop is an array of wallet IDs. Simply remove the desired wal
 
 #### Dark Theme
 
-To enable a dark theme for the Wallet Connection Modal, use the `darkThemeEnabled` prop on the `<ReefKnotWalletsModal>` component.
+The legacy UI skin accepts `darkThemeEnabled`. The Lido App UI skin accepts `theme="light"` or `theme="dark"`.
 
-### Triggering the Wallet Connection Modal
+### Starting the Wallet Connection Flow
 
-To open the Wallet Connection Modal, use the `useConnect` hook provided by Reef Knot.
+To start eager connection or open the wallet picker, use the `useConnectionFlow` hook provided by Reef Knot.
 
 #### Import the Hook
 
 ```typescript
-import { useConnect } from 'reef-knot/core-react';
+import { useConnectionFlow } from 'reef-knot';
 ```
 
 #### Use the Hook
 
-Call the `useConnect` hook to get the `connect` callback:
+Call the `useConnectionFlow` hook to get the `startConnection` callback:
 
 ```typescript
-const { connect } = useConnect();
+const { startConnection } = useConnectionFlow();
 ```
 
-#### How `connect` Works
+#### How `startConnection` Works
 
-The `connect` callback determines the current environment (e.g., desktop browser, mobile wallet app, iframe) and behaves accordingly:
+The `startConnection` callback determines the current environment (e.g., desktop browser, mobile wallet app, iframe) and behaves accordingly:
 
 - If the dApp is opened inside a wallet's dApp browser, it attempts an automatic connection with this specific wallet.
 - Otherwise, it opens the Wallet Connection Modal for manual wallet selection.
@@ -169,16 +171,26 @@ It is a known issue, and we are working on removing the need for such wrapping.
 
 ### Initial setup
 
-Install the dependencies, build everything:
+Use Node.js 24.11 or later within the 24.x line (or Node.js 26+) and the pinned Yarn 4.17.1 through Corepack. Install the dependencies and build everything:
 
+```bash
+yarn install --immutable && yarn build
 ```
-yarn install & yarn build
-```
+
+### TypeScript and bundling
+
+Packages and the separate `playwright-tests/` project use the native TypeScript 7.0.2 compiler (`tsc`). The `@typescript/native` dependency aliases the stable `typescript` package. The `typescript` dependency aliases `@typescript/typescript6`, preserving the TypeScript 6 JS Compiler API for ESLint and Next.js and providing `tsc6` without a binary-name collision.
+
+The Next.js 12 demo uses `tsc6` for its CLI check and TypeScript 6 for `next build`. Its `ignoreDeprecations: "6.0"` is local: Next.js 12 requires legacy module resolution, and the demo still uses `baseUrl` imports. Packages use `bundler` resolution; Playwright uses `NodeNext` with its existing CommonJS package scope. `types: ["*"]` preserves the global types loaded before TypeScript 6 changed the default.
+
+tsdown 0.23.1 builds ES2020 ESM with external dependencies and unbundled output. Its built-in `tsgo` generator emits declarations and declaration maps through native TypeScript 7. The compiler path is resolved explicitly from `@typescript/native` because `typescript` supplies the TS 6 API. Declaration-generation failures fail the build; `yarn typecheck` remains the type-error gate. Legacy UI checks map `@lidofinance/lido-ui` to its existing declarations because that dependency's exports omit its types. tslib remains at 2.8.1.
+
+Validation covered a clean build of all 18 packages, package type/lint/test gates, UI/configuration type checks, the Next.js demo build, watch rebuilding, and Playwright type/lint/test discovery (28 tests; no transactions executed). All 18 declaration entrypoints compile with TypeScript 5.9.3 using both `node10` and `bundler` resolution; the latter needs the same legacy Lido UI type mapping. Declaration maps, default exports, SVG output and UI CSS/assets were checked. The built-in generator preserves public entrypoint exports and default exports. Re-export-only declaration files do not require maps; concrete declarations retain source maps. OKX uses an explicit `rootDir: "src"` to preserve its declaration entrypoint. This development-tool upgrade does not raise the consumer TypeScript minimum (5.9.3).
 
 ### Commands
 
 - `yarn dev` runs the `dev` script for all apps and packages.
-  Usually apps are launched using `next dev` and packages are built using rollup with `--watch` flag, which rebuilds the bundle when its source files change on disk.
+  Usually apps are launched using `next dev` and packages are built using tsdown with `--watch`, which rebuilds the bundle when its source files change on disk.
 - `yarn build` - Build all apps and packages.
 - `yarn build-apps` - Build apps only.
 - `yarn build-packages` - Build packages only.

@@ -1,10 +1,9 @@
 # Public rpc urls
 RPC_PROVIDER_URL_1=https://rpc.ankr.com/eth
-RPC_PROVIDER_URL_17000=https://1rpc.io/holesky
 RPC_PROVIDER_URL_560048=
 
 # supported networks for connecting wallet
-SUPPORTED_CHAINS=1,17000,560048
+SUPPORTED_CHAINS=1,560048
 
 # this chain uses when a wallet is not connected
 DEFAULT_CHAIN=560048

@@ -12,7 +12,12 @@ export const ActionItem: FC<PropsWithChildren<ActionItemProps>> = (props) => {
 
   return (
     <WrapperStyle>
-      <ActionStyle title={title} walletAction action={action} data-testid={title+'Block'}>
+      <ActionStyle
+        title={title}
+        walletAction
+        action={action}
+        data-testid={title + 'Block'}
+      >
         {children}
       </ActionStyle>
     </WrapperStyle>

@@ -4,7 +4,8 @@ import { Button } from '@lidofinance/lido-ui';
 import { PropsWithChildren, useReducer } from 'react';
 import { type SDKError } from '@lidofinance/lido-ethereum-sdk';
 
-import { useWeb3 } from 'reef-knot/web3-react';
+import { useConnection } from 'wagmi';
+import { useSupportedChains } from 'hooks/useSupportedChains';
 import { Accordion } from 'components';
 import {
   ActionBlock,
@@ -101,7 +102,8 @@ const defaultRenderError = (error: SDKError) => {
 const defaultRenderResult = <TResult,>(result: TResult) => {
   const stringfyed = JSON.stringify(
     result,
-    (_, value) => (typeof value === 'bigint' ? value.toString() : value),
+    (_, value: unknown) =>
+      typeof value === 'bigint' ? value.toString() : value,
     2,
   );
 
@@ -114,7 +116,7 @@ const defaultRenderResult = <TResult,>(result: TResult) => {
         theme="pop"
         name={null}
         displayDataTypes={false}
-        src={JSON.parse(stringfyed)}
+        src={JSON.parse(stringfyed) as object}
         collapseStringsAfterLength={30}
       />
     </Accordion>
@@ -130,7 +132,9 @@ export const Action = <TResult,>({
   children,
   ...rest
 }: ActionProps<TResult>) => {
-  const { active } = useWeb3();
+  const { isConnected } = useConnection();
+  const { isUnsupported } = useSupportedChains();
+  const active = isConnected && !isUnsupported;
   const [{ result, error, loading }, dispatch] = useReducer(
     reducer<TResult>,
     {
@@ -144,10 +148,9 @@ export const Action = <TResult,>({
   const startLoading = async () => {
     try {
       dispatch({ type: 'loading' });
-      const result = await action();
+      const actionResult = await action();
 
-      dispatch({ type: 'success', result });
-      // eslint-disable-next-line @typescript-eslint/no-shadow
+      dispatch({ type: 'success', result: actionResult });
     } catch (error) {
       console.error(error);
       dispatch({ type: 'error', error: error as SDKError });
@@ -162,7 +165,9 @@ export const Action = <TResult,>({
           <Button
             disabled={walletAction && !active}
             loading={loading}
-            onClick={startLoading}
+            onClick={() => {
+              void startLoading();
+            }}
             fullwidth
           >
             {title}

@@ -3,11 +3,7 @@ import React from 'react';
 export class ErrorBoundary extends React.Component<{
   children: React.ReactNode;
 }> {
-  constructor(props: any) {
-    super(props);
-  }
-
-  componentDidCatch(error: any, info: any) {
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
     console.error(
       'ErrorBoundary catched an error:',
       error,

@@ -7,7 +7,10 @@ export const HeaderWalletInfoButton = () => {
   const { setIsWalletInfoIsOpen } = useClientConfig();
 
   return (
-    <HeaderControlButton onClick={() => setIsWalletInfoIsOpen(true)} data-testid='walletInfoBtn'>
+    <HeaderControlButton
+      onClick={() => setIsWalletInfoIsOpen(true)}
+      data-testid="walletInfoBtn"
+    >
       <GearIcon />
     </HeaderControlButton>
   );

@@ -3,7 +3,7 @@ import { ButtonProps } from '@lidofinance/lido-ui';
 
 import { useModal } from 'hooks/useModal';
 import { MODAL } from 'providers';
-import { useWeb3 } from 'reef-knot/web3-react';
+import { useConnection } from 'wagmi';
 import AddressBadge from 'components/layout/header/walletButton/addressBadge';
 
 import {
@@ -14,7 +14,7 @@ import {
 const WalletButton: FC<ButtonProps> = (props) => {
   const { onClick, ...rest } = props;
   const { openModal } = useModal(MODAL.wallet);
-  const { account } = useWeb3();
+  const { address } = useConnection();
 
   return (
     <WalletButtonStyle
@@ -26,7 +26,7 @@ const WalletButton: FC<ButtonProps> = (props) => {
       {...rest}
     >
       <WalletButtonWrapperStyle>
-        <AddressBadge address={account} />
+        <AddressBadge address={address} />
       </WalletButtonWrapperStyle>
     </WalletButtonStyle>
   );