Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
tulipe
Advanced tools
Changelog
Readme
💡 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
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.
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 :
id: 1
)MyToken
contractid: "metamask"
).dapp
objectMost 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";
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.
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.
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>
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>
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.
See : CONTRIBUTING
FAQs
A DApp frontend framework for Vue3 built with Ethers.js 🌷
The npm package tulipe receives a total of 0 weekly downloads. As such, tulipe popularity was classified as not popular.
We found that tulipe demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.