Giter Club home page Giter Club logo

cosmes's Introduction

CosmES

npm version

A tree-shakeable, framework agnostic, pure ESM alternative of CosmJS and Cosmos Kit (generate bundles up to 10x smaller than Cosmos Kit).

Features

Warning

This is still a work in progress. Before v1 is reached, the API is not guaranteed to be semver compatible - patch releases may break everything. See the changelog for notable changes.

  • Fully tree-shakeable: import and bundle only the modules you need
  • Framework agnostic: integrate with any web framework (React, Vue, Svelte, Solid, etc.)
  • Lightweight and minimal: 146 KB gzipped to connect a React app to Keplr via browser extension or WalletConnect, 10x smaller than Cosmos Kit (see benchmarks)
  • Uses modern web APIs: no dependencies on Node.js and minimal dependencies on third-party libraries where possible
  • Supports modern bundlers: works with Vite, SWC, Rollup, etc.
  • Fully typed: written in TypeScript and ships with type definitions

Installing

npm install cosmes

pnpm add cosmes

yarn add cosmes

Using with TypeScript

This library only exports ES modules. To ensure imports from this library work correctly, the following configuration is required in tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "bundler", // recommended if using modern bundlers
    // or "node16" 
    // or "nodenext"
    // but NOT "node"
  }
}

Using with Vite

If you are using Vite, the following configuration is required in vite.config.ts:

export default defineConfig({
  define: {
    global: "window",
  },
});

This can be removed once support for WalletConnect v1 is no longer required.

Using Station wallet

The Station wallet currently relies on WalletConnect v1. If you want to import and use StationController, a polyfill for Buffer is required:

// First, install the buffer package
npm install buffer

// Then, create a new file 'polyfill.ts'
import { Buffer } from "buffer";
(window as any).Buffer = Buffer;

// Finally, import the above file in your entry file
import "./polyfill";

See examples/solid-vite for a working example.

This can be removed once support for WalletConnect v1 is no longer required.

Examples

Docs do not exist yet - see the examples folder for various working examples:

  1. How do I connect to third party wallets via browser extension or WalletConnect? How do I create, sign, and broadcast transactions?
  2. How do I programmatically sign and broadcast transactions without relying on a third party wallet?
  3. How do I verify signatures signed using the signArbitrary function?
  4. How do I batch queries to the blockchain?

Modules

This package is split into multiple subdirectories, with each subdirectory having their own set of functionalities. The root directory does not contain any exports, and all exports are exported from the subdirectories. Thus, imports must be done by referencing the subdirectories (ie. import { ... } from "cosmes/client").

cosmes/client

This directory contains models and helper functions to interact with Cosmos SDK via the CometBFT RPC.

cosmes/codec

This directory contains various encoding and decoding functions that relies solely on Web APIs and has no dependencies on Node.js. For modern browsers and Node v16+, this should work out of the box.

cosmes/protobufs

This directory contains the auto-generated code for various Cosmos SDK based protobufs. See scripts/gen-protobufs.mjs for the script that generates the code.

cosmes/registry

This directory contains various APIs, data, and types needed for wallet interactions (ie. Keplr). Some types are auto-generated, see scripts/gen-registry.mjs for the script that generates the types.

cosmes/wallet

This directory is a Cosmos Kit alternative to interact with wallets across all Cosmos SDK based blockchains. See examples/solid-vite for a working example.

Wallets supported:

Features:

  • Supports both browser extension (desktop) and WalletConnect (mobile)
  • Unified interface for connecting, signing, broadcasting, and event handling
  • Signing of arbitrary messages (for wallets that support it)
  • Simultaneous connections to multiple WalletConnect wallets

Benchmarks

See the benchmarks folder, where the JS bundle size of CosmES is compared against Cosmos Kit. The following are adhered to:

  • Apps should only contain the minimal functionality of connecting to Osmosis via Keplr using both the browser extension and WalletConnect wallets
  • Apps should be built using React 18 (as Cosmos Kit has a hard dependency) and Vite
  • Use the bundle size as reported by Vite after running the vite build command (including the size of all other dependencies like React)

Results

Package Minified Gzipped
CosmES 537 KB 147 KB
Cosmos Kit v1 6004 KB 1392 KB
Cosmos Kit v2 6273 KB 1453 KB

See More

cosmes's People

Contributors

aaroncql avatar ryoid avatar khiemsoft avatar przmyst avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.