Xellar Kit

https://github.com/xellar-protocol/xellar-kit
Admin
Xellar-kit is a plug-and-play wallet connection solution for dApps, offering seamless integration...
Tokens:2,795
Snippets:9
Trust Score:3.4
License:Apache-2.0
Update:1 year ago
Show doc for...
Tokens:
Raw
### Run Next.js Development Server

Source: https://github.com/xellar-protocol/xellar-kit/blob/main/apps/next-app/README.md

Provides commands to start the Next.js development server using different package managers like npm, yarn, pnpm, and bun. This allows for local development and testing of the Next.js application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install Xellar-kit

Source: https://github.com/xellar-protocol/xellar-kit/blob/main/packages/xellar-kit/README.md

Install the xellar-kit package using npm or yarn.

```sh
npm install xellar-kit
# or
yarn add xellar-kit
```

--------------------------------

### Basic Setup with XellarKitProvider

Source: https://github.com/xellar-protocol/xellar-kit/blob/main/packages/xellar-kit/README.md

Demonstrates how to set up XellarKitProvider in a React application using Wagmi and React Query for wallet connection. It includes configuring default settings and wrapping the application with the provider.

```tsx
import { XellarKitProvider, defaultConfig,ConnectButton } from "@xellar/kit";
import { Config, WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

function App() {

const config = defaultConfig({
  appName: "<your_app_name>",
  walletConnectProjectId: "<your_wallet_connect_project_id>",
  xellarAppId: "<your_xellar_app_id>",
}) as Config;

const queryClient = new QueryClient();


  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <XellarKitProvider theme="dark">
          <MyComponent />
        </XellarKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

function MyComponent() {


  return (
    <div>
    <ConnectButton.Custom>
        {({ openConnectModal, disconnect, isConnected, openChainModal, openProfileModal, account, chain }) => (
          <button onClick={openConnectModal}>Connect</button>
        )}
      </ConnectButton.Custom>
    </div>
  );
}

```

--------------------------------

### Install @xellar/kit using npm or yarn

Source: https://github.com/xellar-protocol/xellar-kit/blob/main/README.md

Instructions for installing the @xellar/kit package using either npm or yarn package managers. This is the first step to integrate Xellar-kit into your project.

```sh
npm install @xellar/kit
# or
yarn add @xellar/kit
```

--------------------------------

### Basic Xellar-kit Setup with Wagmi and React

Source: https://github.com/xellar-protocol/xellar-kit/blob/main/README.md

Demonstrates how to set up Xellar-kit within a React application using Wagmi for blockchain interaction and TanStack Query for state management. It shows the necessary provider wrapping and the usage of the ConnectButton component.

```tsx
import React from "react";
import { Config, WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { XellarKitProvider, defaultConfig, ConnectButton } from "@xellar/kit";

const walletConnectProjectId = process.env.VITE_WALLET_CONNECT_PROJECT_ID;

const config = defaultConfig({
  appName: "Xellar",
  walletConnectProjectId,
  xellarAppId: process.env.VITE_XELLAR_APP_ID,
  xellarEnv: "sandbox",
}) as Config;

const queryClient = new QueryClient();

export const Provider = ({ children }: { children: React.ReactNode }) => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <XellarKitProvider>
          {children}
        </XellarKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};


function MyComponent() {

  return (
    <div>
      <ConnectButton />
    </div>
  );
}
```

--------------------------------

### Integrate ESLint React Plugin in Vite Configuration

Source: https://github.com/xellar-protocol/xellar-kit/blob/main/apps/react-vite/README.md

This snippet shows how to integrate the `eslint-plugin-react` into your ESLint configuration for a Vite project. It includes setting the React version and enabling recommended rules from the plugin.

```javascript
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})
```

--------------------------------

### Configure ESLint for Type-Aware Rules in Vite

Source: https://github.com/xellar-protocol/xellar-kit/blob/main/apps/react-vite/README.md

This snippet demonstrates how to configure ESLint for type-aware linting in a Vite project using TypeScript. It involves setting `parserOptions.project` and choosing appropriate `tseslint.configs` for enhanced code quality.

```javascript
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})
```

--------------------------------

### XellarKitProvider Component API

Source: https://github.com/xellar-protocol/xellar-kit/blob/main/README.md

Documentation for the XellarKitProvider component. This component is essential for enabling wallet connection features across your dApp. It requires wrapping the application to provide context for wallet interactions.

```APIDOC
<XellarKitProvider>
  Wrap your application with `XellarKitProvider` to enable wallet connection features.
```

--------------------------------

### <XellarKitProvider>

Source: https://github.com/xellar-protocol/xellar-kit/blob/main/packages/xellar-kit/README.md

The XellarKitProvider component is essential for enabling wallet connection features within your application. It should wrap your application's root or relevant sections to manage wallet states and interactions.

```APIDOC
<XellarKitProvider>
  Props:
    theme: string (e.g., 'dark', 'light') - Controls the visual theme of the wallet connection modal.
    children: ReactNode - The content of your application to be rendered within the provider.

  Description:
    Wrap your application with XellarKitProvider to enable wallet connection features.
    It manages the state for connecting to Xellar Passport, MetaMask, and WalletConnect.
    Customization options for theming are available via the 'theme' prop.

  Usage Example:
    <XellarKitProvider theme="dark">
      {/* Your app content */}
    </XellarKitProvider>

  Related Components:
    - ConnectButton: A pre-built component to trigger wallet connection.

```
Tokens:
Raw