React MultiversX EGLD App

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.

Step 1: Create a New React App

First, create a new React application using Create React App:

bash
DownloadCopy code
1npx create-react-app multiversx-app
2cd multiversx-app

Step 2: Install useElven Dependency

Install @useelven/core to integrate with MultiversX:

bash
DownloadCopy code
1npm install @useelven/core

Step 3: Set Up useElven

In your App.js, import and initialize useElven:

jsx
DownloadCopy code
1import React from 'react';
2import { useLogin, useTransaction } from '@useelven/core';
3
4function App() {
5  const { login, isLoggedIn, logout } = useLogin();
6  const { triggerTx, pending } = useTransaction();
7
8  // UI states (e.g., showing pending state, handling form submission)
9  // ...
10
11  return (
12    <div className="App">
13      {
14        isLoggedIn ?
15          <LoggedInView
16            onSendEgld={handleSendEgld}
17            onLogout={logout}
18            isLoading={pending}
19          /> :
20          <LoginView onLogin={login} />
21      }
22    </div>
23  );
24}
25
26// Components for LoggedInView and LoginView
27// ...
28
29export default App;

Step 4: Implement Login and Logout UI

Create components for login and logout views:

jsx
DownloadCopy code
1function LoginView({ onLogin }) {
2  return (
3    <div>
4      <button onClick={() => onLogin()}>Login</button>
5    </div>
6  );
7}
8
9function LoggedInView({ onSendEgld, onLogout, isLoading }) {
10  // Form submission logic and UI
11  // ...
12
13  return (
14    <div>
15      <button onClick={onLogout}>Logout</button>
16      {/* Form for EGLD transfer */}
17      {/* Loading indicator if isLoading is true */}
18    </div>
19  );
20}

Step 5: Implement EGLD Transfer Functionality

In the LoggedInView, add a form to accept the address and amount, and handle submission:

jsx
DownloadCopy code
1// Inside LoggedInView component
2const handleFormSubmit = (event) => {
3  event.preventDefault();
4  const address = event.target.address.value;
5  const amount = event.target.amount.value;
6  onSendEgld(address, amount);
7};
8
9return (
10  <form onSubmit={handleFormSubmit}>
11    <input name="address" type="text" placeholder="Address" required />
12    <input name="amount" type="number" placeholder="Amount" required />
13    <button type="submit">Send EGLD</button>
14  </form>
15);

Step 6: Sending EGLD Transaction

Implement the handleSendEgld function in App.js to create and send the EGLD transaction:

jsx
DownloadCopy code
1const handleSendEgld = async (address, amount) => {
2  // Use triggerTx from useTransaction to send EGLD
3  // ...
4
5  try {
6    await triggerTx({
7      address,
8      value: amount,
9      // Additional parameters like gasLimit, data, etc.
10    });
11  } catch (error) {
12    console.error('Transaction failed:', error);
13  }
14};

Step 7: Managing UI States

Handle different UI states (e.g., pending, error) using React state hooks. Show appropriate messages or loaders based on these states.

Step 8: Run the App

Finally, start your React application:

bash
DownloadCopy code
1npm 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.

Step 1: Create React App and Install Dependencies

1. Create a new React app:

   bash
   DownloadCopy code
   1npx create-react-app multiversx-app
   2cd multiversx-app

2. Install @useelven/core:

   bash
   DownloadCopy code
   1npm install @useelven/core

Step 2: Initialize useElven in React

In your src/App.js, set up the basic structure:

jsx
DownloadCopy code
1import React, { useState } from 'react';
2import { useLogin, useTransaction } from '@useelven/core';
3
4function App() {
5  const { login, isLoggedIn, logout } = useLogin();
6  const { triggerTx, pending } = useTransaction();
7  const [transactionStatus, setTransactionStatus] = useState('');
8
9  const handleSendEgld = async (address, amount) => {
10    try {
11      await triggerTx({
12        address,
13        value: amount,
14        data: '', // Transaction data (if any)
15        gasLimit: 50000, // Adjust as necessary
16      });
17      setTransactionStatus('Transaction sent successfully');
18    } catch (error) {
19      console.error('Transaction failed:', error);
20      setTransactionStatus('Transaction failed');
21    }
22  };
23
24  return (
25    <div className="App">
26      {
27        isLoggedIn ?
28          <LoggedInView
29            onSendEgld={handleSendEgld}
30            onLogout={logout}
31            isLoading={pending}
32            transactionStatus={transactionStatus}
33          /> :
34          <LoginView onLogin={login} />
35      }
36    </div>
37  );
38}
39
40export default App;

Step 3: Create Login and Logout Components

Create two components, LoginView and LoggedInView, in separate files or within App.js:

jsx
DownloadCopy code
1function LoginView({ onLogin }) {
2  return (
3    <div>
4      <button onClick={() => onLogin()}>Login</button>
5    </div>
6  );
7}
8
9function LoggedInView({ onSendEgld, onLogout, isLoading, transactionStatus }) {
10  const [address, setAddress] = useState('');
11  const [amount, setAmount] = useState('');
12
13  const handleSubmit = (e) => {
14    e.preventDefault();
15    onSendEgld(address, amount);
16  };
17
18  return (
19    <div>
20      <form onSubmit={handleSubmit}>
21        <input
22          type="text"
23          value={address}
24          onChange={(e) => setAddress(e.target.value)}
25          placeholder="Recipient Address"
26          required
27        />
28        <input
29          type="number"
30          value={amount}
31          onChange={(e) => setAmount(e.target.value)}
32          placeholder="Amount of EGLD"
33          required
34        />
35        <button type="submit" disabled={isLoading}>Send EGLD</button>
36      </form>
37      <button onClick={onLogout}>Logout</button>
38      {isLoading && <p>Sending transaction...</p>}
39      {transactionStatus && <p>{transactionStatus}</p>}
40    </div>
41  );
42}

Step 4: Styling (Optional)

For a basic styling, you can add CSS in src/App.css.

Step 5: Run Your Application

Start your app:

bash
DownloadCopy code
1npm 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.