https://github.com/kheopskit/kheopskit
Library for connecting dapps to multiple platforms & wallets
https://github.com/kheopskit/kheopskit
ethereum polkadot wallets
Last synced: 3 months ago
JSON representation
Library for connecting dapps to multiple platforms & wallets
- Host: GitHub
- URL: https://github.com/kheopskit/kheopskit
- Owner: kheopskit
- Created: 2025-06-02T13:07:12.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-06-27T12:43:25.000Z (10 months ago)
- Last Synced: 2025-06-27T12:58:34.300Z (10 months ago)
- Topics: ethereum, polkadot, wallets
- Language: TypeScript
- Homepage:
- Size: 565 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-dot - Kheopskit - Library for connecting dapps to multiple platforms & wallets. (Libraries / Multisig Wallets)
README
# Kheopskit
Kheopskit is a library designed to simplify the development of Polkadot DApps. It provides tools to:
- List all installed wallets and connect/disconnect them.
- List all accounts from those wallets.
- Support both Polkadot and Ethereum wallets.
- Handle identical accounts injected by multiple wallets.
Try it on the [interactive playground](https://Kheopskit.pages.dev/)
## Features
- **Multi-wallet support**: Easily interact with both Polkadot and Ethereum wallets.
- **Account management**: Manage accounts from all connected wallets in a single list.
- **Modern tech stack**: Designed for use with polkadot-api (PAPI) and viem.
---
## Installation
Install the required packages using `pnpm`:
```bash
pnpm add @kheopskit/core @kheopskit/react
```
---
## Usage
### With React
1. Import the required packages.
2. Wrap your app with `KheopskitProvider`.
3. Use the `useWallets` hook to access wallets and accounts.
```tsx
import React from "react";
import { KheopskitProvider, useWallets } from "@kheopskit/react";
const App = () => {
const { wallets, accounts } = useWallets();
return (
Wallets
{wallets.map((wallet) => (
[{wallet.platform}] {wallet.name}
{wallet.isConnected ? (
Disconnect
) : (
Connect
)}
))}
Accounts
{accounts.map((account) => (
[{wallet.platform}] {account.name} (account.) - {account.address}
))}
);
};
const config = {
platforms: ["polkadot", "ethereum"],
autoReconnect: true,
};
const Root = () => (
);
export default Root;
```
### With Vanilla JavaScript and RxJS
1. Instantiate a Kheopskit observable with `getKheopskit$(config)`.
2. Subscribe to the observable to access wallets and accounts.
```javascript
import { getKheopskit$ } from "@kheopskit/core";
const config = {
platforms: ["polkadot", "ethereum"],
autoReconnect: true,
};
const kheopskit$ = getKheopskit$(config);
kheopskit$.subscribe(({ wallets, accounts }) => {
console.log("Wallets:", wallets);
console.log("Accounts:", accounts);
});
```
### Server-Side Rendering (SSR)
Kheopskit supports SSR with frameworks like Next.js and TanStack Start. Pass the `ssrCookies` prop to enable cookie-based storage that works on the server.
When you pass `ssrCookies`:
- Storage switches from localStorage to cookies
- Server can read initial state from request headers
- No hydration mismatch between server and client
#### Next.js (App Router)
```tsx
// app/layout.tsx
import { cookies } from "next/headers";
import { App } from "./app";
const config = { platforms: ["polkadot", "ethereum"], autoReconnect: true };
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const cookieStore = await cookies();
const ssrCookies = cookieStore.toString();
return (
{children}
);
}
```
#### TanStack Start
```tsx
// routes/__root.tsx
import { createRootRoute, Outlet } from "@tanstack/react-router";
import { createServerFn, Meta, Scripts } from "@tanstack/start";
import { getRequest } from "@tanstack/start/server";
import { KheopskitProvider } from "@kheopskit/react";
const config = { platforms: ["polkadot", "ethereum"], autoReconnect: true };
const getSSRCookies = createServerFn({ method: "GET" }).handler(async () => {
const request = getRequest();
return request?.headers.get("cookie") ?? undefined;
});
export const Route = createRootRoute({
loader: async () => ({ ssrCookies: await getSSRCookies() }),
component: RootComponent,
});
function RootComponent() {
const { ssrCookies } = Route.useLoaderData();
return (
);
}
```
#### SSR Considerations
| Feature | Client-Only | SSR (with `ssrCookies`) |
|---------|-------------|-------------------------|
| Storage | localStorage | Cookies |
| Server access | ❌ | ✅ |
| Hydration match | ⚠️ Flash possible | ✅ No flash |
| Size limit | ~5MB | ~4KB |
| Cross-tab sync | `storage` event | BroadcastChannel |
**Cookie attributes**: Kheopskit uses `SameSite=Lax`, `Secure` (on HTTPS), `path=/`, and 1-year expiry.
**Cookie size limit (compact format)**: Cookie storage uses a compact JSON schema to stay under the ~4KB limit. As a rule of thumb, with 6 connected wallets you can fit about 30-40 accounts when most accounts do not include a name. If many accounts have names, expect closer to 25-30. When the cookie grows too large, browsers may reject it.
---
## Roadmap
- [ ] Initial release with injected accounts support
- [ ] Support for WalletConnect
- [ ] UI components
- [ ] Documentation