npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tulipe

v1.11.0

Published

A DApp frontend framework for Vue3 built with Ethers.js 🌷

Downloads

16

Readme

Tulipe

  • 💡 Intuitive Design : Tulipe abstracts a lot of repetitive and heavy tasks but has been thought to always let developers feel what happens under the hood.

  • 🦥 Ready-to-use : Tulipe comes with +20 EVM chains and +5 wallets pre-configured. Give it a chain's ID and a wallet name, and your DApp is ready to run !

  • 🖖 Flexible styling : Tulipe comes with 3 levels of styling, from unstylized to opinionated, so you can choose your level of customization.

  • 📦 Extremely minimal : Tulipe weight less than 15kB gzipped and relies on only 2 top-level dependencies : Vue3 and Ethers.js

Alpha warning

This library is currently in development and not suitable yet for production environment, use at your own risks.

Please :star: this repository to show us your interest in a future stable release.

Beta and stable versions should be released by the end of 2022.

How does it tastes ? :yum:

Easy configurations

Firstly, you can configure your entire DApp frontend in a single file called tulipe.config.js.

export const tulipeConfig = {
  networks: [
    {
      id: 1,
      contracts: {
        "MyToken": import("./MyToken.json")
      }
    }
  ],
  wallets: [
    {id: "metamask"}
  ],
}

With this minimal configuration, your DApp frontend will :

  • support the Ethereum Mainnet network (id: 1)
  • will be able to interact with the MyToken contract
  • and allows users to connect to it using the Metamask wallet (id: "metamask").

The dapp object

Most of the things you need to built are available through the dapp object, which can be simply imported from the tulipe package.

import { dapp } from "tulipe";

Auto-instantiations

When your DApp loads, Tulipe will read your tulipe.config.js file and populates, if possible, the dapp object with all the Ethers.js instances your DApp requires.

import { dapp } from "tulipe";

dapp.provider            // An Ethers.js Provider instance
dapp.signer              // An Ethers.js Signer instance
dapp.contracts.MyToken   // An Ethers.js Contract instance

// They can be used normally
const userAddress = "0xf39Fd6e5..."
const userBalance = dapp.contracts.MyToken.balanceOf(userAddress)

You don't have anymore to deal with multiple manual instantiations.

ARS (Automated Relations Safety)

While a DApp has a very unstable context (eg. a user can connect/deconnect a wallet, chain connection can be lost, etc.) it may be difficult to always write safe code.

Tulipe comes with ARS, an internal system that ensure that your DApp instances always remain safe to use.

For example, if the signer of your DApp has changed, all the contracts instances will be automatically updated with the new signer.

With the ARS you don't have anymore to think about "Have I updated my contract with the new signer ?" or "What should I do if the network changes ?" all those problems are internally and transparently managed by Tulipe.

Safers

Also, in such an unstable context, writing safe code may became quickly complex.

To help developers always writing safe code, Tulipe provides many safers methods and components.

Making your code safe has never been so easy !

dapp.contracts.MyToken.onReadSafe(() => {
  // Code here will be executed when MyToken contract is safe to be read
  const userBalance = dapp.contracts.MyToken.balanceOf(userAddress)
})
dapp.provider.onSafe(() => {
  // Code here will be executed when the DApp provider is safe to use
  const block = dapp.provider.getBlock(123456)
})
<template>
  <dapp.signer.OnSafe>
    <p>A wallet is connected to this DApp !</p>
  </dapp.signer.OnSafe>
</template>

Chain watchers

When developing reactive web DApps frontends we need to regularly fetch on-chain datas to always display the most up-to-date ones to the users.

Tulipe provides chain watchers to efficiently watch for mutations of an on-chain data and to run a given callback each time it occurs.

Here is how we can track and display an always up-to-date ERC20 balance to the user :

<script setup>
import { dapp } from "tulipe";

const userAddress = "0xf39Fd6e5..."
let userBalance = $ref(null);

dapp.contracts.MyToken.watch("balanceOf", [userAddress], (newValue) => {
  // Will be executed each time 'balanceOf' of 'userAddress' changes
  userBalance = newValue;
})
</script>

<template>
  <p>Your balance is : {{ userBalance }} MTK</p>
</template>

Final words

Tulipe offers a lot more things to makes safe DApp frontend development a real piece of cake.

You can find them all by reading its documentations.

Contributions

See : CONTRIBUTING