Building an Ethereum Transaction App with React and Solidity

Read the full tutorial here: >> Building an Ethereum Transaction App with React and Solidity

This example shows Building an Ethereum Transaction App with React and Solidity:

Dalto Interface

Technology

This demo uses:

• Metamask
• Remix Editor
• Hardhat
• Alchamy
• ReactJs
• Tailwind CSS
• Solidity
• EthersJs
• Faucet
• Vite

Running the demo

To run the demo follow these steps:

1. Clone the github project on the terminal git clone https://github.com/Daltonic/dalto.

2. Follow this tutorial get your keys together.

3. Open the project in VS Code >> smart_contract >> hardhat.config.js and replace its content with the codes below.

   require('@nomiclabs/hardhat-waffle')
    module.exports = {
    solidity: '0.8.0',
    networks: {
        rinkeby: {
        url: '<YOUR_ALCHEMY_APP_URL_GOES_HERE>',
        accounts: [
            '<YOUR_RINKEBY_ACCOUNT_PRIVATE_KEY_GOES_HERE>',
        ],
        },
    },
   }

4. Open client >> src >> utils >> constants.js and replace the content with yours.

5.  import abi from './Transactions.json'
    export const contractAbi = abi.abi
    export const contractAddress = '<YOUR_DEPLOYED_SMART_CONTRACT_ADDRESS_GOES_HERE>'

6. On the terminal, CD to the smart_contract directory and run the following code.

   yarn install
   yarn hardhat run scripts/deploy.js --network rinkeby

7. On the smart_contract directory goto smart_contract >> artifacts >> contracts >> Transactions.sol >> Transactions.json. Copy the entire code and paste them in client >> src >> utils >> Transactions.json file.

8. On the terminal, CD to the client directory and run the following code.

   yarn install
   yarn dev
   # spins it up on the browser...

9. Open the browser and visit the url on the terminal.

Questions about running the demo? Open an issue. We're here to help ✌️

Useful links

• 🏠 Website
• ⚽ Metamask
• 🚀 Remix Editor
• 💡 Hardhat
• 📈 Alchamy
• 🔥 ReactJs
• 😊 Tailwind CSS
• 🐻 Solidity
• 👀 EthersJs
• 🎅 Faucet
• 🤖 Vite
• ✨ Live Demo