Build and Deploy a Modern Web 3.0 Blockchain App | Solidity, Smart Contracts

backendPackages

npm install --save-dev hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

commonStylesWelcome.js

const commonStyles = "min-h-[70px] sm:px-0 px-2 sm:min-w-[120px] flex justify-center items-center border-[0.5px] border-gray-400 text-sm font-light text-white";

deploy.js

const main = async () => {
  const transactionsFactory = await hre.ethers.getContractFactory("Transactions");
  const transactionsContract = await transactionsFactory.deploy({ value: hre.ethers.utils.parseEther("0.001") });

  await transactionsContract.deployed();

  console.log("Transactions address: ", transactionsContract.address);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.error(error);
    process.exit(1);
  }
};

runMain();

index.css

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");

* html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gradient-bg-welcome {
  background-color:#0f0e13;
  background-image: 
    radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
}

.gradient-bg-services {
  background-color:#0f0e13;
  background-image: 
    radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
    radial-gradient(at 50% 100%, hsla(225,39%,25%,1) 0, transparent 50%);
}

.gradient-bg-transactions {
  background-color: #0f0e13;
  background-image: 
    radial-gradient(at 0% 100%, hsla(253,16%,7%,1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(225,39%,25%,1) 0, transparent 50%);
}

.gradient-bg-footer {
  background-color: #0f0e13;
  background-image: 
    radial-gradient(at 0% 100%, hsla(253,16%,7%,1) 0, transparent 53%), 
    radial-gradient(at 50% 150%, hsla(339,49%,30%,1) 0, transparent 50%);
}

.blue-glassmorphism {
  background: rgb(39, 51, 89, 0.4);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.3);
}

/* white glassmorphism */
.white-glassmorphism {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.eth-card {
  background-color:#a099ff;
  background-image: 
    radial-gradient(at 83% 67%, rgb(152, 231, 156) 0, transparent 58%), 
    radial-gradient(at 67% 20%, hsla(357,94%,71%,1) 0, transparent 59%), 
    radial-gradient(at 88% 35%, hsla(222,81%,65%,1) 0, transparent 50%), 
    radial-gradient(at 31% 91%, hsla(9,61%,61%,1) 0, transparent 52%), 
    radial-gradient(at 27% 71%, hsla(336,91%,65%,1) 0, transparent 49%), 
    radial-gradient(at 74% 89%, hsla(30,98%,65%,1) 0, transparent 51%), 
    radial-gradient(at 53% 75%, hsla(174,94%,68%,1) 0, transparent 45%);
}

.text-gradient {
  background-color: #fff;
  background-image: radial-gradient(at 4% 36%, hsla(0,0%,100%,1) 0, transparent 53%), radial-gradient(at 100% 60%, rgb(0, 0, 0) 0, transparent 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  mode: "jit",
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      display: ["Open Sans", "sans-serif"],
      body: ["Open Sans", "sans-serif"],
    },
    extend: {
      screens: {
        mf: "990px",
      },
      keyframes: {
        "slide-in": {
          "0%": {
            "-webkit-transform": "translateX(120%)",
            transform: "translateX(120%)",
          },
          "100%": {
            "-webkit-transform": "translateX(0%)",
            transform: "translateX(0%)",
          },
        },
      },
      animation: {
        "slide-in": "slide-in 0.5s ease-out",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/forms")],
};

Transactions.sol

// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract Transactions {
    uint256 transactionCount;

    event Transfer(address from, address receiver, uint amount, string message, uint256 timestamp,  string account, string keyword);
  
    struct TransferStruct {
        address sender;
        address receiver;
        uint amount;
        string message;
        uint256 timestamp;
        string account;
        string keyword;
    }

    TransferStruct[] transactions;

    function transfer(address payable receiver, uint amount, string memory message, string memory account, string memory keyword) public {
        transactionCount += 1;
        transactions.push(TransferStruct(msg.sender, receiver, amount, message, block.timestamp, account, keyword));

        emit Transfer(msg.sender, receiver, amount, message, block.timestamp, account, keyword);

        receiver.transfer(amount);
    }

    function getAllTransactions() public view returns (TransferStruct[] memory) {
        return transactions;
    }

    function getTransactionCount() public view returns (uint256) {
        return transactionCount;
    }
}

@Dimokrati

I have the exact same one, any solutions?

waiting for someone to answer. if you found the solution first please do share here

I couldn't find a solution, so I went with Web3.js instead of ethers.js, which works fine.
I didn't understand what you mean by I went with Web3.js instead of ethers.js, .can you please elaborate it.

Hey, I'm sepolia and I followed the project properly and also carried out the changes mentioned above, my transactions are working correctly. But the loader isn't working and the latest transactions are also not displayed.

I'm getting the above errors in the console.

And this is my code:-

Transaction Context--------------

Transaction.jsx--------------

Welcome.jsx--------------

If anyone knows the solutions, kindly please help!

I tried everything that gavortex recommended. Still not working. This is what I'm getting:

@BitBeholder heyy...am getting same error any idea how to solve this?

Hey, I'm sepolia and I followed the project properly and also carried out the changes mentioned above, my transactions are working correctly. But the loader isn't working and the latest transactions are also not displayed.

I'm getting the above errors in the console.

And this is my code:-

Transaction Context--------------

Transaction.jsx--------------

Welcome.jsx--------------

If anyone knows the solutions, kindly please help!

@RohitMangale heyy.. am getting same error ...any idea how to solve this??

TransactionContract is not a function On Monday, August 7, 2023 at 07:03:53 AM EDT, rohit ***@***.***> wrote: @RohitMangale commented on this gist. Hey, I'm sepolia and I followed the project properly and also carried out the changes mentioned above, my transactions are working correctly. But the loader isn't working and the latest transactions are also not displayed. I'm getting the above errors in the console. And this is my code:- Transaction Context-------------- Transaction.jsx-------------- Welcome.jsx-------------- If anyone knows the solutions, kindly please help! — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS or Android.                                                            

TransactionContract is not a function

@gavortex can you please elaborate it, then how do I use the methods from the smart contract?

await ethereum.request ({
method: "eth_senTransaction",
params: [{
from: '0x05596668000000000000000000000000000',
to: adressTo,
gas: "0x5208",
value: parsedAmount._hex,
}],
});

await ethereum.request ({
method: "eth_senTransaction",
params: [{ from: '0x05596668000000000000000000000000000',
to: adressTo,
gas: "0x5208",
value: parsedAmount._hex,
}],
});

The sendTransaction function works correctly , I'm having errors regarding the transactionContract... Does anyone know how to solve these errors? please help me!

try that: wallet.provider = new ethers.providers.InfuraProvider('rinkeby','rinkebyKeyAPI');change your provider On Wednesday, August 9, 2023 at 02:34:08 PM EDT, rohit ***@***.***> wrote: @RohitMangale commented on this gist. await ethereum.request ({ method: "eth_senTransaction", params: [{ from: '0x05596668000000000000000000000000000', to: adressTo, gas: "0x5208", value: parsedAmount._hex, }], }); The sendTransaction function works correctly , I'm having errors regarding the transactionContract... Does anyone know how to solve these errors? please help me! — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS or Android.                                                            

@gavortex as you suggested i have changed my provider to sepolia but now am getting this error .Please suggest some solution as am stucked on this error since last week.

import React, { useEffect, useState } from 'react';
import { ethers } from 'ethers';
import { contractABI, contractAddress } from '../utils/constants';

export const TransactionContext = React.createContext();

//const ethereum = window.ethereum;
const {ethereum}=window;
const getEthereumContract = async() => {
//const provider = new ethers.providers.Web3Provider(ethereum);
//const provider = new ethers.BrowserProvider(ethereum);
const sepoliaRpcUrl = 'https://eth-sepolia.g.alchemy.com/v2/################';

const provider = new ethers.providers.JsonRpcProvider(sepoliaRpcUrl);
//wallet.provider = new ethers.providers.InfuraProvider('sepolia','https://eth-sepolia.g.alchemy.com/v2/r_Bl8P01b-sfe33LylTcxL2bBU_HJkow');

const signer = await provider.getSigner();
const transactionContract = new ethers.Contract(contractAddress, contractABI, signer);

return transactionContract;
};

export const TransactionProvider = ({ children }) => {

const [currentAccount, setCurrentAccount] = useState()
const [formData, setFormData] = useState({ addressTo: '', amount: '', keyword: '', message: '' });
const [isLoading, setisLoading] = useState(false);
const [transactionCount, setTransactionCount] = useState(localStorage.getItem('transactionCount'));
const [transactions,setTransactions] =useState([]);

const handleChange = (e, name) => {
setFormData((prevState) => ({ ...prevState, [name]: e.target.value }));
}

const getAllTransactions = async () => {
try {
if(!ethereum) return alert("Please install MetaMask");
const transactionContract = getEthereumContract();
const availableTransactions = await transactionContract.getAllTransactions();

  const structuredTransactions = availableTransactions.map((transaction) => ({
    addressTo: transaction.receiver,
    addressFrom: transaction.sender,
    timestamp: new Date(transaction.timestamp.toNumber() * 1000).toLocaleString(),
    message: transaction.message,
    keyword: transaction.keyword,
    amount: parseInt(transaction.amount._hex) / (10 ** 18)
  }));
  
  console.log(structuredTransactions);
  setTransaction(structuredTransactions);
} catch (error) {
  console.log(error);
}

};

const checkIfWalletIsConnected = async () => {

try {
  if (!ethereum) return alert('Please install MetaMask');

  const accounts = await ethereum.request({ method: 'eth_accounts' });

  if (accounts.length) {
    setCurrentAccount(accounts[0]);

     getAllTransactions();
  }
  else {
    console.log("No accounts found")
  }
} catch (error) {
  console.log(error);

  throw new Error("No ethereum object.")
}


//console.log(accounts);

};

const checkIfTransactionsExists = async () => {
try {
if (ethereum) {
const transactionContract = getEthereumContract();
const transactionCount = await transactionContract.getTransactionCount();

        window.localStorage.setItem("transactionCount", transactionCount);
    }
} catch (error) {
    console.log(error);

    throw new Error("No ethereum object");
}

};

const connectWallet = async () => {
try {
if (!ethereum) return alert('Please install MetaMask');
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
setCurrentAccount(accounts[0]);
} catch (error) {
console.log(error);

  throw new Error("No ethereum object.")
}

}

const sendTransaction = async () => {
try {
if (!ethereum) return alert('Please install MetaMask');

  const { addressTo, amount, keyword, message } = formData;
  const transactionContract = getEthereumContract();
  const parsedAmount = ethers.parseEther(amount);

  await ethereum.request({
    method: 'eth_sendTransaction',
    params: [
      {
        from: currentAccount,
        to: addressTo,
        gas: '0x5208', // 21000 GWEI
        value: parsedAmount.toString(16), //0.00001
      },
    ],
  });

  const transactionHash = await transactionContract.addToBlockchain(addressTo, parsedAmount, message, keyword);
  setisLoading(true);
  console.log('Loading - $(transactionHash.hash)');
  await transactionHash.wait();
  setisLoading(false);
  console.log('Success - $(transactionHash.hash)');

  const transactionCount = await transactionContract.getTransactionCount();
  setTransactionCount(transactionCount.toNumber());

} catch (error) {
  console.log(error);

  throw new Error("No ethereum object.")
}

}

useEffect(() => {
checkIfWalletIsConnected();
checkIfTransactionsExists();
}, []);

return (
<TransactionContext.Provider value={{ connectWallet, currentAccount, formData, setFormData, handleChange, sendTransaction }}>
{children}
</TransactionContext.Provider>
);
};

i get that same

TransactionContext.jsx:98 Uncaught (in promise) Error: No Ethereum object found.
at sendTransaction (TransactionContext.jsx:98:19)
at handleSubmit (Welcome.jsx:35:9)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:25)
at executeDispatch (react-dom.development.js:9041:3)
at processDispatchQueueItemsInOrder (react-dom.development.js:9073:7)
at processDispatchQueue (react-dom.development.js:9086:5)
at dispatchEventsForPlugins (react-dom.development.js:9097:3)

and still can't fix it

I am getting this error whenever I am trying to run this command can someone help me out with this

~/Desktop/Projects/Web 3.0/smart_contract$ npx hardhat
888 888 888 888 888
888 888 888 888 888
888 888 888 888 888
8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888
888 888 "88b 888P" d88" 888 888 "88b "88b 888
888 888 .d888888 888 888 888 888 888 .d888888 888
888 888 888 888 888 Y88b 888 888 888 888 888 Y88b.
888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888

Welcome to Hardhat v2.19.4

✔ What do you want to do? · Create a JavaScript project
✔ Hardhat project root: · /home/shounak/Desktop/Projects/Web 3.0/smart_contract
✔ Do you want to add a .gitignore? (Y/n) · y
✔ Do you want to install this sample project's dependencies with npm (@nomicfoundation/hardhat-toolbox)? (Y/n) · y

npm install --save-dev @nomicfoundation/hardhat-toolbox@^4.0.0
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: test3@1.0.0
npm ERR! Found: ethers@5.7.2
npm ERR! node_modules/ethers
npm ERR! dev ethers@"^5.7.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer ethers@"^6.1.0" from @nomicfoundation/hardhat-ethers@3.0.5
npm ERR! node_modules/@nomicfoundation/hardhat-ethers
npm ERR! peer @nomicfoundation/hardhat-ethers@"^3.0.0" from @nomicfoundation/hardhat-toolbox@4.0.0
npm ERR! node_modules/@nomicfoundation/hardhat-toolbox
npm ERR! dev @nomicfoundation/hardhat-toolbox@"^4.0.0" from the root project
npm ERR! peer @nomicfoundation/hardhat-ethers@"^3.0.0" from @nomicfoundation/hardhat-chai-matchers@2.0.3
npm ERR! node_modules/@nomicfoundation/hardhat-chai-matchers
npm ERR! peer @nomicfoundation/hardhat-chai-matchers@"^2.0.0" from @nomicfoundation/hardhat-toolbox@4.0.0
npm ERR! node_modules/@nomicfoundation/hardhat-toolbox
npm ERR! dev @nomicfoundation/hardhat-toolbox@"^4.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /home/shounak/.npm/_logs/2024-01-10T16_25_39_454Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/shounak/.npm/_logs/2024-01-10T16_25_39_454Z-debug-0.log
An unexpected error occurred.

false

Please read past solutions about the same issue. Sent from Yahoo Mail for iPhone On Thursday, September 28, 2023, 7:06 PM, Filip Oroz ***@***.***> wrote: Re: ***@***.*** commented on this gist. i get that same TransactionContext.jsx:98 Uncaught (in promise) Error: No Ethereum object found. at sendTransaction (TransactionContext.jsx:98:19) at handleSubmit (Welcome.jsx:35:9) at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16) at invokeGuardedCallback (react-dom.development.js:4277:31) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:25) at executeDispatch (react-dom.development.js:9041:3) at processDispatchQueueItemsInOrder (react-dom.development.js:9073:7) at processDispatchQueue (react-dom.development.js:9086:5) at dispatchEventsForPlugins (react-dom.development.js:9097:3) and still can't fix it — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS or Android.                                                            

working on the ether.js v6 version, getting errors as above,

here are a few screenshots.

error

code

@Shounak2003

paste this into package.json

{
"name": "wave-app",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"@tailwindcss/forms": "^0.3.4",
"autoprefixer": "^10.4.0",
"eth-revert-reason": "^1.0.3",
"ethers": "^5.5.1",
"framer-motion": "^5.3.1",
"postcss": "^8.3.11",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-icons": "^4.3.1"
},
"devDependencies": {
"@vitejs/plugin-react": "^1.0.0",
"eslint": "^8.4.1",
"eslint-config-airbnb": "^19.0.2",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"tailwindcss": "^2.2.19",
"vite": "^2.6.4"
}
}

and run > npm install
( from root file)

Should work

@gavortex
check which version you have installed for a hardhat?

I am having difficulties running the installation packages:
npm install --save-dev hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

I am getting this error whenever I am trying to run this command can someone help me out with this

~/Desktop/Projects/Web 3.0/smart_contract$ npx hardhat 888 888 888 888 888 888 888 888 888 888 888 888 888 888 888 8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888 888 888 "88b 888P" d88" 888 888 "88b "88b 888 888 888 .d888888 888 888 888 888 888 .d888888 888 888 888 888 888 888 Y88b 888 888 888 888 888 Y88b. 888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888

Welcome to Hardhat v2.19.4

✔ What do you want to do? · Create a JavaScript project ✔ Hardhat project root: · /home/shounak/Desktop/Projects/Web 3.0/smart_contract ✔ Do you want to add a .gitignore? (Y/n) · y ✔ Do you want to install this sample project's dependencies with npm (@nomicfoundation/hardhat-toolbox)? (Y/n) · y

npm install --save-dev @nomicfoundation/hardhat-toolbox@^4.0.0 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: test3@1.0.0 npm ERR! Found: ethers@5.7.2 npm ERR! node_modules/ethers npm ERR! dev ethers@"^5.7.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer ethers@"^6.1.0" from @nomicfoundation/hardhat-ethers@3.0.5 npm ERR! node_modules/@nomicfoundation/hardhat-ethers npm ERR! peer @nomicfoundation/hardhat-ethers@"^3.0.0" from @nomicfoundation/hardhat-toolbox@4.0.0 npm ERR! node_modules/@nomicfoundation/hardhat-toolbox npm ERR! dev @nomicfoundation/hardhat-toolbox@"^4.0.0" from the root project npm ERR! peer @nomicfoundation/hardhat-ethers@"^3.0.0" from @nomicfoundation/hardhat-chai-matchers@2.0.3 npm ERR! node_modules/@nomicfoundation/hardhat-chai-matchers npm ERR! peer @nomicfoundation/hardhat-chai-matchers@"^2.0.0" from @nomicfoundation/hardhat-toolbox@4.0.0 npm ERR! node_modules/@nomicfoundation/hardhat-toolbox npm ERR! dev @nomicfoundation/hardhat-toolbox@"^4.0.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! /home/shounak/.npm/_logs/2024-01-10T16_25_39_454Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/shounak/.npm/_logs/2024-01-10T16_25_39_454Z-debug-0.log An unexpected error occurred.

false

Hi, did you find any solution to this?? I am having the same issue

@Isaiah-Essien

check this

https://gist.github.com/adrianhajdin/5f6cc61fa04de7b8fa250eb295db62fd?permalink_comment_id=4830795#gistcomment-4830795

@Isaiah-Essien

check this

https://gist.github.com/adrianhajdin/5f6cc61fa04de7b8fa250eb295db62fd?permalink_comment_id=4830795#gistcomment-4830795

I copied and pasted the Package.json file, ran npm, and ran the installation command, but it still did


not work. I am still having the same issue:

I get this error after trying to confirm the transaction in Metamask's mini window that pops up after clicking Send Now.

Anyone else know how to fix this??? No amount of googling has resulted in finding anything about not supporting sending transactions

@Isaiah-Essien
check this
https://gist.github.com/adrianhajdin/5f6cc61fa04de7b8fa250eb295db62fd?permalink_comment_id=4830795#gistcomment-4830795

I copied and pasted the Package.json file, ran npm, and ran the installation command, but it still did not work. I am still having the same issue:

Hey, I'm sepolia and I followed the project properly and also carried out the changes mentioned above, my transactions are working correctly. But the loader isn't working and the latest transactions are also not displayed.

I'm getting the above errors in the console.

And this is my code:-

Transaction Context--------------

Transaction.jsx--------------

Welcome.jsx--------------

If anyone knows the solutions, kindly please help!

Hey..!!
When i click send now button i also getting the same kind of error have you solved it..
if yes please reply me...

this is the screenshot of my errors..!!

I am getting the same error

The main issue is version compatibility, when you are trying to call sendTransaction( ) function, This will not work because you have not found the Ethereum object.

First, you must check which version of ether.js is installed in your application.

if you are using the latest version like - 6.1 or something, then your code will not work, because you have done it in TransactionContext.js according to version 5.0 of ether.js.

Check Package.json first, then install the version the same as the YouTube tutorial video is referring to.

as you can see down below packege.json of the tutorial GitHub repo...
you have to install the same version as the one given in package.json for ether.js

Second way: you have to do the change in TrasactionContext.js according to your installed version of ether.js (6.10 version)

Follow the documentation as given below.

for version v5

https://docs.ethers.org/v5/

for version v6

https://docs.ethers.org/v6/

@Isaiah-Essien @coderpratuu @Shounak2003

https://gist.github.com/adrianhajdin/5f6cc61fa04de7b8fa250eb295db62fd?permalink_comment_id=4843314#gistcomment-4843314

Can you please refer the YouTube video to change the version of ether js 6.0 to ether js 5.0

…

On Mon, 22 Jan, 2024, 2:57 pm Arpit Singh, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ The main issue is version compatibility, when you are trying to call sendTransaction( ) function, This will not work because you have not found the Ethereum object. First, you must check which version of ether.js is installed in your application. if you are using the latest version like - 6.1 or something, then your code will not work, because you have done it in TransactionContext.js according to version 5.0 of ether.js. Check Package.json first, then install the version the same as the YouTube tutorial video is referring to. as you can see down below packege.json of the tutorial GitHub repo... you have to install the same version as the one given in package.json for ether.js image.png (view on web) <https://gist.github.com/assets/75988023/8986bbf3-cd98-447c-b4a5-cbfe417d70a9> Second way: you have to do the change in TrasactionContext.js according to your installed version of ether.js (6.10 version) Follow the documentation as given below. for version v5 https://docs.ethers.org/v5/ image.png (view on web) <https://gist.github.com/assets/75988023/18517457-296c-448e-a053-fe5c9041ac73> for version v6 https://docs.ethers.org/v6/ image.png (view on web) <https://gist.github.com/assets/75988023/5016a5ab-2b19-4687-942b-2facd1802162> — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/5f6cc61fa04de7b8fa250eb295db62fd#gistcomment-4843314> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFJWORHDOW6P2HKYWOKXX5LYPYWHZBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCMZYGI3TGMZXU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

@Isaiah-Essien @coderpratuu @Shounak2003

https://gist.github.com/adrianhajdin/5f6cc61fa04de7b8fa250eb295db62fd?permalink_comment_id=4843314#gistcomment-4843314

Hi, @arpit3210. I'm afraid you keep giving me vague answers. I currently have the version of ethers 5.7 in my package.json. But still, the issue is persisting.

I have the exact same one, any solutions?

waiting for someone to answer. if you found the solution first please do share here

I couldn't find a solution, so I went with Web3.js instead of ethers.js, which works fine.

Hey...!!
I'm getting the same error in my console so can you please guide me to convert ethers.js to Web3.js
Or any another kind of solution

Hey... I was recreating this application by following the tutorial but I keep getting the following error message in the final stage of the project:

Here is the code:

Could someone help me please?

Hey... I was recreating this application by following the tutorial but I keep getting the following error message in the final stage of the project:

Here is the code:

Could someone help me please?

Hello, Man. Please can you book a session with me and have a look at my project? I have not been able to get past the Hardhat installation phase. God bless you.

My email is : i.essien@alustudent.com

why my css copy paste code is not working?

I have the same problem, can someone help???

@danielzx600 I know it's a long time ago but how did you solve this problem, i am stuck in it