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

@useelven/core

v0.22.0

Published

Core React hooks for MultiversX DApps

Downloads

63

Readme

useElven core

[!NOTE]
Please be aware that versions below 1.0.0 will still have breaking changes. Till then, please 'freeze' the version of useElven in your app, and decide when to upgrade.

[!NOTE]
Please remember that the scope of functionality is limited and does not correspond to that of sdk-dapp. But over time, functionalities are added. Check the docs for more info

[!NOTE]
It incorporates sdk-js - a set of MultiversX Typescript/Javascript libraries.

Docs

Below are a couple of steps for a quick start, but please check the docs and example apps.

Usage examples

npm install @useelven/core --save

Initialize:

import { useNetworkSync } from '@useelven/core';

const NextJSDappTemplate = ({ Component, pageProps }: AppProps) => {

  useNetworkSync({
    chainType: 'devnet',
    // If you want to use xPortal signing, 
    // you would need to configure your Wallet Connect project id here: https://cloud.walletconnect.com
    walletConnectV2ProjectId: '<your_wallet_connect_project_id_here>'
    // Check for all configuration options in the docs
  });

  return (
    <Component {...pageProps} />
  );
};

Login:

import { useLogin } from '@useelven/core';

(...)

const { login, isLoggedIn, error } = useLogin();

Sign and send transaction:

import { useTransaction } from '@useelven/core';
import { TransactionPayload, TokenTransfer } from '@multiversx/sdk-core';

(...)

const { pending, triggerTx, transaction, txResult, error } = useTransaction();

const handleSendTx = () => {
  const demoMessage = 'Transaction demo!';
  triggerTx({
    address: 'erd123.....',
    gasLimit: 50000 + 1500 * demoMessage.length, // When guarded additional 50000 will be added internally
    data: new TransactionPayload(demoMessage),
    value: BigInt('1000000000000000000'),
  });
};

Check all of the hooks here: SDK Reference

UI

Components required in every dapp. Like auth button, QR code, WC pairings list, ProtectedRoute, Authenticated, etc. are implemented in Next.js Dapp Template and React + Vite Dapp Template.

To do

useElven lacks some functionalities and needs improvements in code structure and testing. To monitor the progress, please refer to the project's Kanban board.

Examples

See ready to use demo templates:

Check buildo.dev as a real world app that uses useElven lib.

Development

  • npm install
  • npm run build - after each change
  • npm link or npm pack
  • npm link @useelven/core or npm install ./link/to/the/package.gz

More tools

  • Buildo.dev - Buildo.dev is a MultiversX app that helps with blockchain interactions, like issuing tokens and querying smart contracts.
  • Elven Tools - a set of tools for running your PFP NFT collection on the MultiversX blockchain
  • Elven.js - compact browser only SDK for MultiversX blockchain interaction - no build steps

Contact me