{"id":35225417,"url":"https://github.com/lidofinance/reef-knot","last_synced_at":"2026-04-27T12:01:40.377Z","repository":{"id":62944066,"uuid":"557286628","full_name":"lidofinance/reef-knot","owner":"lidofinance","description":"Web3 Wallets Connection Library","archived":false,"fork":false,"pushed_at":"2026-04-24T09:29:16.000Z","size":8740,"stargazers_count":19,"open_issues_count":1,"forks_count":8,"subscribers_count":9,"default_branch":"develop","last_synced_at":"2026-04-24T11:31:51.446Z","etag":null,"topics":["ui","wallets","web3"],"latest_commit_sha":null,"homepage":"https://lidofinance.github.io/reef-knot/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lidofinance.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-10-25T12:16:01.000Z","updated_at":"2026-04-24T09:29:19.000Z","dependencies_parsed_at":"2024-01-26T14:41:55.405Z","dependency_job_id":"2bd14d6c-8869-4a71-b1fe-eadbbca941d1","html_url":"https://github.com/lidofinance/reef-knot","commit_stats":{"total_commits":804,"total_committers":13,"mean_commits":61.84615384615385,"dds":0.2798507462686567,"last_synced_commit":"d1b1377fa0b3d6aa2a669eb6641a6afaee826b47"},"previous_names":[],"tags_count":222,"template":false,"template_full_name":null,"purl":"pkg:github/lidofinance/reef-knot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidofinance%2Freef-knot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidofinance%2Freef-knot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidofinance%2Freef-knot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidofinance%2Freef-knot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lidofinance","download_url":"https://codeload.github.com/lidofinance/reef-knot/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lidofinance%2Freef-knot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32335297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ui","wallets","web3"],"created_at":"2025-12-30T01:03:39.934Z","updated_at":"2026-04-27T12:01:40.340Z","avatar_url":"https://github.com/lidofinance.png","language":"HTML","readme":"# Reef Knot \u0026nbsp; \u003cimg src=\"logo.svg\" alt='Reef Knot logo' height='45' align='top'/\u003e \u0026nbsp;\n\n[![NPM Version](https://img.shields.io/npm/v/reef-knot)](https://www.npmjs.com/package/reef-knot)\n\nWeb3 Wallets Connection Library\n\n---\n\n## Documentation\n\n- [How to add a wallet](docs/how-to-add-a-wallet.md)\n- [Migration guide](docs/migration-guide.md)\n\n---\n\n## Installation\n\n### Add the reef-knot package\n\n#### Using NPM\n\n```bash\nnpm install reef-knot\n```\n\n#### Using Yarn\n\n```bash\nyarn add reef-knot\n```\n\n### Wagmi and Viem\n\nReef Knot relies on the `wagmi` and `viem` libraries as peer dependencies. To install these libraries, follow the [\"Getting Started\"](https://wagmi.sh/react/getting-started) guide in the wagmi documentation.\n\n### Example Setup\n\nFor an example of Reef Knot setup and configuration, check out [this demo app](https://github.com/lidofinance/reef-knot/blob/main/apps/demo-react/providers/web3.tsx).\n\n### Required Imports\n\nTo set up Reef Knot, you’ll need the following imports:\n\n```typescript\nimport { ReefKnotProvider, getDefaultConfig } from 'reef-knot/core-react';\nimport {\n  ReefKnotWalletsModal,\n  getDefaultWalletsModalConfig,\n} from 'reef-knot/connect-wallet-modal';\nimport { WalletsListEthereum } from 'reef-knot/wallets';\n```\n\n### Setting Up Providers\n\n1. Place the `\u003cReefKnotProvider\u003e` inside the Wagmi Context Provider.\n2. Place the `\u003cReefKnotWalletsModal\u003e` component inside the `\u003cReefKnotProvider\u003e`. This component manages the Wallet Connection Modal.\n\n### Configuration\n\n#### Example\n\nYou can refer to [the code of the Reef Knot demo app](https://github.com/lidofinance/reef-knot/blob/main/apps/demo-react/providers/web3.tsx) as a reference for setting up the configuration.\n\n#### Description\n\nReef Knot provides the `getDefaultConfig` helper function, which acts as a single entry point for configuring both `wagmi` and Reef Knot:\n\n```typescript\nconst { wagmiConfig, reefKnotConfig, walletsModalConfig } = getDefaultConfig({\nwalletsList: WalletsListEthereum,\n// Other config options\n...\n\n// Wallets configuration\n...getDefaultWalletsModalConfig(),\n});\n```\n\nThe `getDefaultWalletsModalConfig` function provides default configuration options for the Wallet Connection Modal, such as:\n\n- The wallets to display or pin\n- Links to the terms of service and privacy policy\n\nFor more details, refer to the `connect-wallet-modal` package's [README](packages/connect-wallet-modal/README.md)\n\n### WalletsListEthereum\n\n`WalletsListEthereum` is a default list of wallet adapters.  \nA wallet adapter is a package dedicated to a specific wallet.  \nEach adapter exports an object that specifies the wallet's name,\nits icon, how the wallet should be detected and connected, additional metadata and configuration.\n\nYou can import the default `WalletsListEthereum`, or create a custom list of wallet adapters by including only the wallets you need and excluding the unnecessary ones.\n\n### How to Hide a Wallet\n\nTo hide a wallet from the Wallet Connection Modal, use the `walletsShown` prop, which is included by default in the configuration returned by `...getDefaultWalletsModalConfig()`.\n\nThe `walletsShown` prop is an array of wallet IDs. Simply remove the desired wallet ID from this array to hide the corresponding wallet in the modal.\n\n### Passing Configurations\n\n- Pass the `wagmiConfig` and `reefKnotConfig` objects from `getDefaultConfig` to the `config` props of their respective Context Providers.\n- Pass the `walletsModalConfig` object to the `\u003cReefKnotWalletsModal\u003e` component.\n\n#### Dark Theme\n\nTo enable a dark theme for the Wallet Connection Modal, use the `darkThemeEnabled` prop on the `\u003cReefKnotWalletsModal\u003e` component.\n\n### Triggering the Wallet Connection Modal\n\nTo open the Wallet Connection Modal, use the `useConnect` hook provided by Reef Knot.\n\n#### Import the Hook\n\n```typescript\nimport { useConnect } from 'reef-knot/core-react';\n```\n\n#### Use the Hook\n\nCall the `useConnect` hook to get the `connect` callback:\n\n```typescript\nconst { connect } = useConnect();\n```\n\n#### How `connect` Works\n\nThe `connect` callback determines the current environment (e.g., desktop browser, mobile wallet app, iframe) and behaves accordingly:\n\n- If the dApp is opened inside a wallet's dApp browser, it attempts an automatic connection with this specific wallet.\n- Otherwise, it opens the Wallet Connection Modal for manual wallet selection.\n\n---\n\n## Troubleshooting\n\n### NoSSRWrapper\n\nIf you encounter errors during server-side rendering, you may need to wrap certain parts of your code in a `NoSSRWrapper`. This wrapper disables server-side rendering for the specified area, helping to avoid SSR-related issues.\nHere is an example of what the `NoSSRWrapper` code might look like:\n\n```ts\nimport React from 'react';\nimport dynamic from 'next/dynamic';\n\nconst NoSSRWrapper = (props: { children: React.ReactNode }) =\u003e (\n  \u003c\u003e{props.children}\u003c/\u003e\n);\n\nexport default dynamic(() =\u003e Promise.resolve(NoSSRWrapper), {\n  ssr: false,\n});\n```\n\nThis restriction comes from early versions of wagmi library, which had limitations with SSR.\nIt is a known issue, and we are working on removing the need for such wrapping.\n\n---\n\n## Development\n\n### Project structure\n\n- The project is organized as monorepo using [turborepo](https://turbo.build/repo) tools.\n- The `packages` dir contains packages, most of them are published to npm, but some are not.\n- The `apps` dir contains an example application, which uses the packages to demonstrate wallets connection.\n\n### Initial setup\n\nInstall the dependencies, build everything:\n\n```\nyarn install \u0026 yarn build\n```\n\n### Commands\n\n- `yarn dev` runs the `dev` script for all apps and packages.\n  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.\n- `yarn build` - Build all apps and packages.\n- `yarn build-apps` - Build apps only.\n- `yarn build-packages` - Build packages only.\n\n### How to release a new version\n\nThe [Changesets](https://github.com/changesets/changesets) tool is used for publishing new versions.  \nTo release a new version, see [the instruction in the docs](docs/how-to-release.md).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flidofinance%2Freef-knot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flidofinance%2Freef-knot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flidofinance%2Freef-knot/lists"}