Ganache Development Tutorials, Guides & Insights

• Description: A decentralized key management solution for frictionless login to DApps.
• Key Features:
• Enables one-click login to DApps using OAuth providers like Google and Facebook.
• Securely manages private keys in a decentralized manner.
• Provides a seamless user experience for onboarding non-crypto users.
• Integrates easily with Ethereum and other blockchains.
• Website: Torus

• Description: A decentralized storage network built on top of IPFS.
• Key Features:
• Provides verifiable, decentralized storage with economic incentives.
• Allows users to rent out unused storage space.
• Integrates seamlessly with IPFS for decentralized file storage.
• Ideal for storing large datasets and DApp data.
• Website: Filecoin

To build a DApp, you first need a smart contract that will serve as the backend logic. Let’s create a simple smart contract that allows users to store and retrieve a message on the blockchain.

Example Contract:

In your React application, create a component Dapp.js that connects to the smart contract:

import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import MyDapp from './contracts/MyDapp.json';

function Dapp() {
  const [message, setMessage] = useState('');
  const [newMessage, setNewMessage] = useState('');
  const [web3, setWeb3] = useState(null);
  const [contract, setContract] = useState(null);
  const [account, setAccount] = useState('');

  useEffect(() => {
    const init = async () => {
      const web3 = new Web3(Web3.givenProvider || 'http://localhost:7545');
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = MyDapp.networks[networkId];
      const contractInstance = new web3.eth.Contract(
        MyDapp.abi,
        deployedNetwork && deployedNetwork.address,
      );
      const accounts = await web3.eth.getAccounts();
      setWeb3(web3);
      setContract(contractInstance);
      setAccount(accounts[0]);
      const initialMessage = await contractInstance.methods.getMessage().call();
      setMessage(initialMessage);
    };
    init();
  }, []);

  const updateMessage = async () => {
    await contract.methods.setMessage(newMessage).send({ from: account });
    const updatedMessage = await contract.methods.getMessage().call();
    setMessage(updatedMessage);
    setNewMessage('');
  };

  return (
    <div>
      <h1>Current Message: {message}</h1>
      <input
        type="text"
        value={newMessage}
        onChange={(e) => setNewMessage(e.target.value)}
      />
      <button onClick={updateMessage}>Update Message</button>
    </div>
  );
}

export default Dapp;