lynx-reown-dapp-kit

v1.0.8

Published

a year ago

A unified Frontend SDK for multichain (EVM & Solana) dApps, providing a standardized interface for wallet connection, contract interaction, and network management. Built for easy integration and extension.

0High
0Medium
0Low

andreinnguyen

Lynx Reown Dapp Kit

Features

Multichain Support: EVM (Ethereum, Arbitrum, etc.) & Solana
Unified Abstractions: Wallet, Contract, Network
Separation of Concerns: Distinct logic for signTransaction, sendTransaction, callContract
Custom Signer Injection: Use AppKit or your own provider
Frontend-only: No backend dependency
Modular & Testable: Easy to extend and mock

Installation

pnpm add lynx-reown-dapp-kit @reown/appkit @reown/appkit-adapter-wagmi @reown/appkit-adapter-solana @tanstack/react-query wagmi @solana/web3.js react react-dom next

If you use Tailwind CSS (recommended for Next.js example):

pnpm add -D tailwindcss @tailwindcss/postcss

Next.js Integration Example

1. Setup Provider in `app/layout.tsx`

Create a ClientProviders component:

// components/ClientProviders.tsx
"use client";
import { LynxReownProvider } from "lynx-reown-dapp-kit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { SolanaAdapter } from "@reown/appkit-adapter-solana";

const wagmiAdapter = new WagmiAdapter({ /* ... */ });
const solanaAdapter = new SolanaAdapter();
const queryClient = new QueryClient();

const chains = [
  { chainId: "84532", chainType: "evm", rpc: "...", explorerUrl: "...", chainName: "Base Sepolia" },
  { chainId: "EtWTRABZaYq6iMfeYKouRu166VU2xqa1", chainType: "sol", rpc: "...", explorerUrl: "...", chainName: "Solana Devnet" },
  { chainId: "5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp", chainType: "sol", rpc: "...", explorerUrl: "...", chainName: "Solana Mainnet" },
  // ...add more chains
];

export default function ClientProviders({ children }) {
  return (
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <LynxReownProvider chains={chains} defaultChain={chains[0]}>
          {children}
        </LynxReownProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Wrap your app in ClientProviders in app/layout.tsx:

import ClientProviders from "../components/ClientProviders";
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ClientProviders>{children}</ClientProviders>
      </body>
    </html>
  );
}

2. Use the SDK in Your Page

"use client";
import { useWallet } from "lynx-reown-dapp-kit";
import { Erc20Contract } from "../contracts/erc20-contract";
import { Transaction, SystemProgram, PublicKey } from "@solana/web3.js";

export default function Home() {
  const walletEvm = useWallet("84532");
  const walletSol = useWallet("EtWTRABZaYq6iMfeYKouRu166VU2xqa1");

  const transferEvm = async () => {
    const txData = new Erc20Contract("0x...").transfer("0x...", 1);
    const tx = await walletEvm?.sendTransaction(txData);
    console.log(tx, "tx");
  };

  const transferSol = async () => {
    if (!walletSol) return;
    const transaction = new Transaction();
    const lamports = 0.0001 * 1e9;
    const transferIx = SystemProgram.transfer({
      fromPubkey: new PublicKey(walletSol.address),
      toPubkey: new PublicKey(walletSol.address),
      lamports,
    });
    transaction.add(transferIx);
    const tx = await walletSol.sendTransaction(transaction);
    console.log("Solana transfer signature:", tx);
  };

  // ...UI code
}

3. EVM Contract Example

import { EvmContract } from "lynx-reown-dapp-kit";
const abi = [ /* ... */ ];
export class Erc20Contract extends EvmContract {
  constructor(address: string) {
    super({ address, abi });
  }
  transfer(to: string, value: number) {
    return this.build({ method: "transfer", params: [to, value] });
  }
}

4. Tailwind & CSS

Import Tailwind in your globals.css and ensure you have postcss.config.mjs with @tailwindcss/postcss.
No special config needed for SDK.

Development

Clone the repo
Install dependencies:
```
pnpm install
```
Build:
```
pnpm build
```
Run example:
```
cd examples/nextjs
pnpm dev
```

Project Structure

src/core/: Abstract interfaces and context
src/evm/: EVM-specific logic
src/solana/: Solana-specific logic
src/types/: Shared types
examples/nextjs/: Example Next.js dApp

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme