Hello World Ethereum React Dapp Tutorial. React, Ethers.js, & MetaMask.

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ธ.ค. 2024

ความคิดเห็น •

  • @adarshmore998
    @adarshmore998 2 ปีที่แล้ว +1

    the only video that showed how all of it (the files) is connected
    thankyou so much

  • @TylerShawful
    @TylerShawful 3 ปีที่แล้ว +3

    I've only played with web3 front end some, about a year ago, and this was a great refresher, thanks.

    • @zes7215
      @zes7215 2 ปีที่แล้ว

      wrg, no such thign as hx worlx about it, ts just macx, no nerx

  • @abhinavkant
    @abhinavkant 2 ปีที่แล้ว

    bro your channel deserves 1 million subs

  • @Brandon-xe7vy
    @Brandon-xe7vy 3 ปีที่แล้ว +3

    Awesome video. I would love to see more react and ethers.js content.

    • @michael_couch
      @michael_couch  3 ปีที่แล้ว +1

      Thanks! Anything in particular?

    • @Brandon-xe7vy
      @Brandon-xe7vy 3 ปีที่แล้ว +1

      @@michael_couch I would love to see a tutorial on how to make a react page where you can mint a nft from a contract.
      Thanks

    • @d2vin
      @d2vin 3 ปีที่แล้ว

      @@michael_couch Would be cool to see how you can connect and disconnect metamask wallets.

    • @d2vin
      @d2vin 3 ปีที่แล้ว

      In addition to my previous comment, if you could make it so the button is updated if a wallet is already connected to the website.

  • @realbotix
    @realbotix ปีที่แล้ว +2

    Awesome tutorial. Thank you.

  • @adi_trades99
    @adi_trades99 ปีที่แล้ว

    I like that you didn't edit out the parts where you didn't do it correctly the first time, because then we can see some possible ways we can mess things up and know how to fix them.
    Good stuff!

  • @bestbefore77
    @bestbefore77 3 ปีที่แล้ว +2

    This was very helpful! Thank you for making this:)

  • @jinyoucheng8114
    @jinyoucheng8114 3 ปีที่แล้ว +1

    Thank you so much. It helped me so much.
    Please keep going ❤

  • @jacob_dmn
    @jacob_dmn 2 ปีที่แล้ว

    Amazing man, please keep it up 🚀

  • @ilovebayern134
    @ilovebayern134 2 ปีที่แล้ว

    you deserve a subscribe and damn, you're funny.

  • @urumat
    @urumat 7 หลายเดือนก่อน

    Hello, why doesn't the Metamask pop up to ask for connection?

  • @RossPfeiffer
    @RossPfeiffer 2 ปีที่แล้ว

    okay. I'm looking at that updateEthers function and I think that's the point where I got deprecated. I tried to use the old method of signing and connecting.
    Eventually I couldn't read events anymore and my code just became a mess. this is a fresh start. I was also using vuejs before.
    21:15 the moment I've been waiting for all day sifting through everything. I'm almost invincible again.

  • @fasakinadekunle333
    @fasakinadekunle333 2 ปีที่แล้ว

    Hello there
    I’m having issues connecting with Metamask
    After connecting my react-app to the metamask, my page renders nothing

  • @WeirdDev69
    @WeirdDev69 2 ปีที่แล้ว +1

    What to do if I wants to show all the messages in the screen

  • @equious8413
    @equious8413 2 ปีที่แล้ว

    Man. I'm struggling so much to implement React with my brownie project :( the app won't recognize the contract address for some reason.

  • @akiratoriyama1320
    @akiratoriyama1320 2 ปีที่แล้ว

    Great tutorial!!! Thank you!!

  • @Seigo
    @Seigo 3 ปีที่แล้ว +1

    12:30 made my day.

  • @josegrillo6867
    @josegrillo6867 3 ปีที่แล้ว +4

    HELP?????
    Unhandled Rejection (Error): call revert exception (method="get()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.5.0)

    • @michael_couch
      @michael_couch  3 ปีที่แล้ว

      Can you link to your code?

    • @oleksii.shkulipa
      @oleksii.shkulipa 2 ปีที่แล้ว

      @@michael_couch l have the same problem, last your version code.
      I have tried create a new contract, but it was flop

    • @moazali9857
      @moazali9857 2 ปีที่แล้ว

      I am also facing the same issue, how did you fixed your issue?

  • @manavkampani8367
    @manavkampani8367 2 ปีที่แล้ว

    why type = { 'submit' } with curly brackets and not straightaway?

  • @regulardev
    @regulardev 3 ปีที่แล้ว +1

    Also Query 2- Why ethers Contract creation needs both abi_json and contract address? Isn't contract address alone good enough here as ethers could get the contract from blockchain?

    • @michael_couch
      @michael_couch  3 ปีที่แล้ว

      You need to give it the abi because Ethers.js doesn't look up the method structures for you.

  • @diogorodrigues9985
    @diogorodrigues9985 ปีที่แล้ว

    Right now when i am going to deploy the smart contract. On the environment selection is not available Web3 Provider. Each one should i choose at the moment?

  • @jonathansanchez5091
    @jonathansanchez5091 2 ปีที่แล้ว +1

    12:29 was GOLDEN lmaoo

  • @erick-llerenas
    @erick-llerenas 2 ปีที่แล้ว

    I would love to see a tutorial about payments and withdraws functionalities!!

  • @davidkulman2291
    @davidkulman2291 2 ปีที่แล้ว

    Thanks a lot this is a great tutorial!

  • @adeleyeoreoluwa5979
    @adeleyeoreoluwa5979 ปีที่แล้ว

    I'm getting "TypeError: Cannot read properties of undefined (reading 'web3Provider')" from trying to use ethers.providers.Web3Provider(windows.ethereum). any help please? I think it has to do with remix changing the web 3 provider environment to custom - external HTTP provider

  • @newborn7850
    @newborn7850 2 ปีที่แล้ว +1

    Sir is ether js and web3 js same , becasue i have seen here also you are writing window.ethereum

  • @Tassaczek
    @Tassaczek ปีที่แล้ว

    Nice tutorial! Learn a lot. I just do not understand why web3 is React oriented. Vue is so much nicer xD

  • @clydedavidson9272
    @clydedavidson9272 2 ปีที่แล้ว

    This was super easy to follow but I am finding when passing the newAccount to my useState to setCurrentAccount its not actually updating the stake... is useStake asynchronous? I tried doing away setCurrentAccount(newAccount) but it says an await call has no effect on the useState call

  • @Banksy_said_hi
    @Banksy_said_hi 2 ปีที่แล้ว

    LOLLLL :)) That scream made my day!

  • @denesfekete4435
    @denesfekete4435 2 ปีที่แล้ว

    you are the best dude

  • @akeemabdulhamid4188
    @akeemabdulhamid4188 ปีที่แล้ว

    Good job
    I really appreciate bro
    Is there any way I can reduce the display of the MetaMask address
    When I am connected

  • @ScottDMacLeod
    @ScottDMacLeod 2 ปีที่แล้ว +6

    I have to say this was the best basic explanation of using react and ethers to interact with a smart contract, it was simple and concise. I haven't found one better. I do have a quick question. Is there a reason you added a "get" function to the smart contract? my understanding is that all public variables (ie, storedData in this case) automatically have get functionality added by the compiler, so instead of "let val = await contract.get();" we could just use "let val = await contract.storedData();". Am I missing a nuance here?

  • @regulardev
    @regulardev 3 ปีที่แล้ว

    Also Query 3 Is there a reason why then was preferred over await on the call to window ethereum request in connectWalletHander method?

    • @michael_couch
      @michael_couch  3 ปีที่แล้ว

      That's just my bad practice of me mixing async/await with .then promise handling. I mix them arbitrarily, mostly for practice.

  • @ferielbenali7823
    @ferielbenali7823 9 หลายเดือนก่อน

    Thank you so much

  • @manjotsinghsran5624
    @manjotsinghsran5624 2 ปีที่แล้ว

    Thanks man.

  • @tridungbk2010
    @tridungbk2010 3 ปีที่แล้ว +1

    Great tutorial, my question: how do i connect on mobile app from web (if i already installed metamask). Thanks!

    • @michael_couch
      @michael_couch  3 ปีที่แล้ว

      Are you saying that you made a React front end but it won't connect to MetaMask on mobile?

    • @tridungbk2010
      @tridungbk2010 3 ปีที่แล้ว

      @@michael_couch yep, i mean is there any way when i click connect wallet on web that showing on mobile browser and link to mobile app

    • @mattmcmullen8540
      @mattmcmullen8540 3 ปีที่แล้ว +1

      @@tridungbk2010 if you use the meta mask explorer, it should work

  • @thattablebloke
    @thattablebloke 3 ปีที่แล้ว +1

    Lol you skipped the part I'm stuck on - importing ethers.js to the files - I get an error 'cannot use import outside of a module'

    • @michael_couch
      @michael_couch  3 ปีที่แล้ว

      Are you inside your newly created React app directory when attempting to import?

  • @pankajjoshi8292
    @pankajjoshi8292 3 ปีที่แล้ว +1

    Great sir , How to develop our own wallet like metamask so that we can transfer ether from our own front end. Liked subscribed referred

  • @kirill632
    @kirill632 3 ปีที่แล้ว +1

    🔥🔥🔥

  • @adi_trades99
    @adi_trades99 ปีที่แล้ว

    You don't like vscode?

  • @regulardev
    @regulardev 3 ปีที่แล้ว

    Thanks a lot for this. Query 1- For contract.get() await was used. But for contract.set(), there is no await. Both are calls on the blockchain. Still why the difference.?

    • @TylerShawful
      @TylerShawful 3 ปีที่แล้ว

      Ya good point, also curious

    • @michael_couch
      @michael_couch  3 ปีที่แล้ว

      We didn't use an await on the .set() because I didn't do any proper error checking. We could have treated it similar to .get() and checked the promise object, but we're blindly calling the method and assuming it executed correctly.

  • @matthewmcmullen2752
    @matthewmcmullen2752 3 ปีที่แล้ว +2

    Hey would you be interested in a little gig work?

  • @chakinizam1745
    @chakinizam1745 2 ปีที่แล้ว

    Please can you react with html.

  • @adjanat8830
    @adjanat8830 3 ปีที่แล้ว +1

    Great tutorial thank you so much, am learning the decentralized applications and your tuto helped me a lot. Could you please make a new tutorial about how to make a minting Nft website and connect the collections to metamask wallet. Am newbie at the blockchain development and nft world that’s why am asking. And thank you again for your effort

  • @ozodbekxomidbekov8320
    @ozodbekxomidbekov8320 3 ปีที่แล้ว

    Can you make a video about creating a more complicated dapp?

  • @blankslate6393
    @blankslate6393 3 ปีที่แล้ว

    Actually remix does not show abi anymore (or I could not find it). Great tutorial. Would be great if you make one with hardhat, which is a more serious workspace.

    • @davidkulman2291
      @davidkulman2291 2 ปีที่แล้ว +1

      It still does. It will always show abi since the whole point of deploying the contract is to get the abi

  • @andrewiyer
    @andrewiyer ปีที่แล้ว

    i went to the git library, and its honestly not clear where you run the npx create-react-app command from. i think you need to address this in your git directory and not hand-wave it away. this is probably why an otherwise good tutorial is lacking - because you're assuming too much.

  • @Hellokelly622
    @Hellokelly622 2 ปีที่แล้ว

    Hello, how can we reach you for a consultation?

  • @patricijo
    @patricijo 2 ปีที่แล้ว

    get vscode ffs