Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maintenance #37

Open
elicharlese opened this issue Feb 6, 2023 · 0 comments
Open

Maintenance #37

elicharlese opened this issue Feb 6, 2023 · 0 comments
Assignees
Labels
bug Something isn't working

Comments

@elicharlese
Copy link
Member

elicharlese commented Feb 6, 2023

Set up a new React app using Create React App.

npx create-react-app maintenance-dapp

Install Material-UI and Ethereum libraries.

npm install @material-ui/core @material-ui/icons web3 ethers

Create a new component for the Maintenance Dapp.

import { useState } from 'react';
import { Grid, Typography, TextField, Button } from '@material-ui/core';
import { Send } from '@material-ui/icons';
import Web3 from 'web3';
import { ethers } from 'ethers';

const web3 = new Web3(Web3.givenProvider);
const contractAddress = 'CONTRACT_ADDRESS';
const abi = [ABI];

function MaintenanceDapp() {
  const [request, setRequest] = useState('');
  const [isLoading, setLoading] = useState(false);

  const handleRequest = async () => {
    setLoading(true);
    const accounts = await window.ethereum.enable();
    const account = accounts[0];
    const contract = new web3.eth.Contract(abi, contractAddress);
    const tx = await contract.methods.requestMaintenance(request).send({ from: account });
    console.log(tx);
    setLoading(false);
  };

  return (
    <Grid container spacing={3}>
      <Grid item xs={12}>
        <Typography variant="h4">Maintenance Dapp</Typography>
      </Grid>
      <Grid item xs={12}>
        <TextField
          label="Maintenance Request"
          fullWidth
          value={request}
          onChange={(e) => setRequest(e.target.value)}
        />
      </Grid>
      <Grid item xs={12}>
        <Button variant="contained" color="primary" startIcon={<Send />} onClick={handleRequest} disabled={isLoading}>
          Request
        </Button>
      </Grid>
    </Grid>
  );
}

export default MaintenanceDapp;

In this code, we're using Material-UI components like Grid, Typography, TextField, and Button to build the UI for the Maintenance Dapp. We're also using the Web3 and ethers libraries to interact with the Ethereum blockchain.

Update the index.js file to render the MaintenanceDapp component.

import React from 'react';
import ReactDOM from 'react-dom';
import MaintenanceDapp from './MaintenanceDapp';

ReactDOM.render(
  <React.StrictMode>
    <MaintenanceDapp />
  </React.StrictMode>,
  document.getElementById('root')
);

In this code, we're rendering the MaintenanceDapp component in the root element of the HTML document.

Replace the CONTRACT_ADDRESS and ABI variables with the actual contract address and ABI for your maintenance contract.

This code assumes that you have a smart contract with a requestMaintenance function that takes a string parameter. You'll need to replace the CONTRACT_ADDRESS and ABI variables with the actual values for your contract.

Start the development server.

npm start

This will start the development server and open the Maintenance Dapp in your default web browser. You can now enter a maintenance request and submit it to the blockchain.

@elicharlese elicharlese added the bug Something isn't working label Feb 6, 2023
@elicharlese elicharlese self-assigned this Feb 6, 2023
@elicharlese elicharlese added this to the Front-End base for all dapps in Framer milestone Feb 6, 2023
@elicharlese elicharlese removed this from the Front-End base for all dapps in Framer milestone Aug 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant