useElven is a set of hooks and tools designed to work with React-base applications.
The tool is a wrapper for sdk-js - a set of Typescript/Javascript libraries.
The fundamental functionality is connecting and logging the user using auth providers. useElven supports all of 4 signing providers.
By default useElven uses @multiversx/sdk-native-auth-client under the hood.
Besides authentication, useElven will also help with all the interactions, like sending native $EGLD tokens or even ESDT tokens. It will allow you to make most transactions, including interactions with custom smart contracts. There is also a possibility to query smart contracts. With an ABI file, you can also decode returned data using React hooks.
Add useElven to your project:
npm install @useelven/core --save
Then import in React app. For example:
import { useNetworkSync } from '@useelven/core';
Initialize:
import { useNetworkSync } from '@useelven/core';
const NextJSDappTemplate = ({ Component, pageProps }: AppProps) => {
useNetworkSync({ chainType: 'devnet' });
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
);
};
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.....',
// you will need additional 50000 when working with guarded accounts
gasLimit: 50000 + 1500 * demoMessage.length,
data: new TransactionPayload(demoMessage),
value: TokenTransfer.egldFromBigInteger(1_000_000_000_000_000_000),
});
};
The tools should work with most React setups. For example, with Next.js or React + Vite. But each of the setups requires some additional configuration. This is why there are demo templates that you can clone and treat as a base for your app.
Okay, so you know what useElven is and how to start using it. You are now ready to look at the SDK reference.