useElven / core

A set of tools for React-based apps using MultiversX JS SDK

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

• useElven.com

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:

• Next.js Dapp Template (App Router with Shadcn UI, Tailwind, Radix UI)
• React + Vite Dapp Template (with Chakra UI)

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

• @theJulianIo