I would like a simple starter for an app that will integrate with MultiversX. It should sign and sign out the user. After the user is signed in, there is a form with two fields, the address and amount of EGLD to send to this address. I would like to have all UI states, like pending, and also hide/show parts of the UI for logged-in users. It should use React js
Creating a simple React application that integrates with MultiversX, allows user sign-in/sign-out, and facilitates sending EGLD transactions involves several steps. I'll outline the process and provide code snippets for each part of the application.
This React app will utilize useElven for connecting to MultiversX and handling authentication and transactions. You'll need to have Node.js and npm installed on your system to follow along.
First, create a new React application using Create React App:
npx create-react-app multiversx-app
cd multiversx-app
useElven DependencyInstall @useelven/core to integrate with MultiversX:
npm install @useelven/core
useElvenIn your App.js, import and initialize useElven:
import React from 'react';
import { useLogin, useTransaction } from '@useelven/core';
function App() {
const { login, isLoggedIn, logout } = useLogin();
const { triggerTx, pending } = useTransaction();
// UI states (e.g., showing pending state, handling form submission)
// ...
return (
<div className="App">
{
isLoggedIn ?
<LoggedInView
onSendEgld={handleSendEgld}
onLogout={logout}
isLoading={pending}
/> :
<LoginView onLogin={login} />
}
</div>
);
}
// Components for LoggedInView and LoginView
// ...
export default App;
Create components for login and logout views:
function LoginView({ onLogin }) {
return (
<div>
<button onClick={() => onLogin()}>Login</button>
</div>
);
}
function LoggedInView({ onSendEgld, onLogout, isLoading }) {
// Form submission logic and UI
// ...
return (
<div>
<button onClick={onLogout}>Logout</button>
{/* Form for EGLD transfer */}
{/* Loading indicator if isLoading is true */}
</div>
);
}
In the LoggedInView, add a form to accept the address and amount, and handle submission:
// Inside LoggedInView component
const handleFormSubmit = (event) => {
event.preventDefault();
const address = event.target.address.value;
const amount = event.target.amount.value;
onSendEgld(address, amount);
};
return (
<form onSubmit={handleFormSubmit}>
<input name="address" type="text" placeholder="Address" required />
<input name="amount" type="number" placeholder="Amount" required />
<button type="submit">Send EGLD</button>
</form>
);
Implement the handleSendEgld function in App.js to create and send the EGLD transaction:
const handleSendEgld = async (address, amount) => {
// Use triggerTx from useTransaction to send EGLD
// ...
try {
await triggerTx({
address,
value: amount,
// Additional parameters like gasLimit, data, etc.
});
} catch (error) {
console.error('Transaction failed:', error);
}
};
Handle different UI states (e.g., pending, error) using React state hooks. Show appropriate messages or loaders based on these states.
Finally, start your React application:
npm start
This app will now let users log in, send EGLD to a specified address, and log out. Remember to handle errors and edge cases appropriately for a production-level application. This example provides a basic structure and may require further customization based on your specific requirements.
could you be more specific with the code?
Certainly! Let's create a more detailed React application that integrates with MultiversX. This app will include user authentication and a form for sending EGLD transactions. We'll use useElven for authentication and transaction handling.
Create a new React app:
npx create-react-app multiversx-app
cd multiversx-app
Install @useelven/core:
npm install @useelven/core
useElven in ReactIn your src/App.js, set up the basic structure:
import React, { useState } from 'react';
import { useLogin, useTransaction } from '@useelven/core';
function App() {
const { login, isLoggedIn, logout } = useLogin();
const { triggerTx, pending } = useTransaction();
const [transactionStatus, setTransactionStatus] = useState('');
const handleSendEgld = async (address, amount) => {
try {
await triggerTx({
address,
value: amount,
data: '', // Transaction data (if any)
gasLimit: 50000, // Adjust as necessary
});
setTransactionStatus('Transaction sent successfully');
} catch (error) {
console.error('Transaction failed:', error);
setTransactionStatus('Transaction failed');
}
};
return (
<div className="App">
{
isLoggedIn ?
<LoggedInView
onSendEgld={handleSendEgld}
onLogout={logout}
isLoading={pending}
transactionStatus={transactionStatus}
/> :
<LoginView onLogin={login} />
}
</div>
);
}
export default App;
Create two components, LoginView and LoggedInView, in separate files or within App.js:
function LoginView({ onLogin }) {
return (
<div>
<button onClick={() => onLogin()}>Login</button>
</div>
);
}
function LoggedInView({ onSendEgld, onLogout, isLoading, transactionStatus }) {
const [address, setAddress] = useState('');
const [amount, setAmount] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
onSendEgld(address, amount);
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
value={address}
onChange={(e) => setAddress(e.target.value)}
placeholder="Recipient Address"
required
/>
<input
type="number"
value={amount}
onChange={(e) => setAmount(e.target.value)}
placeholder="Amount of EGLD"
required
/>
<button type="submit" disabled={isLoading}>Send EGLD</button>
</form>
<button onClick={onLogout}>Logout</button>
{isLoading && <p>Sending transaction...</p>}
{transactionStatus && <p>{transactionStatus}</p>}
</div>
);
}
For a basic styling, you can add CSS in src/App.css.
Start your app:
npm start
This setup provides a basic React application integrated with MultiversX using useElven. Users can log in, send EGLD, and log out. Make sure to handle errors and edge cases for a more robust application. This code serves as a starting point and might need adjustments based on your specific requirements and the useElven version.