Send ETH payments using React.js / MetaMask

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

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

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

    🎁 Web3 Starter for JS Devs (free email course): @t

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

    Super materiał! IMO niedługo będzie "boom" na dapps/blochain developers! Czekam na kolejny materiał! Pozdrawiam

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

    Artur, więcej takich poradników blockchain-related! Złoto.

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

      Będzie dużo, don't worry :) Mój angielski chyba aż tak nie przeszkadza w odbiorze, bo sporo ludzi korzysta z tych materiałów

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

    my wallet metamask account has been hacked, all my BNB is gone.
    But I still have NFT locking. around 2000$ there
    I'm trying to deposit on BNB trying to revoke all the coins that exist. and wished I could transfer my funds to pay the gas fee but
    the funds "automatically" moved to another wallet
    looks like the hacker has installed a bot on my metmask wallet
    Do you have any other solution?
    I have complete data
    Please help me

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

    Love you brother for making this great tutorial. I hope you will keep providing us Web3.0 , solidity or react good content in english

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

      Will do my best! Thanks for kind words buddy :)

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

    What if I want to programmatically send money to an address? Without manually interacting with metamask?
    For example, I have an application where the user can claim some money after performing an action. How would the application send the money to that user address ?

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

      Two ways:
      1. You can write a script that sends money from wallet (in Node.js or any other programming language)
      2. You can prepare smart contract that acts as a vault. Inside the logic of the contract you can whitelist somebody to claim their funds.

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

    Hello, how do I make the payment through a imported token

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

    Thanks Artur for the great tutorial. I would like to ask, if I am selling my token (a smart contract) to the buyer and I need to verify the amount of payment is enough for the tokens, how can I do that?
    In my smart contract, I have a function that verifies the payment amount (and all the logic). But how can we combine the payment transaction (sent by the buyer) AND call that function at the same time ?
    Thank you a lot

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

    Excellent English!

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

    Is it possible buy tokens nft by code? There is any video on your channel about this?

  • @HarshRajput-jr7qp
    @HarshRajput-jr7qp 2 ปีที่แล้ว

    how can we send different tokens from same method for example what if I want to make transaction through stable coins

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

    sir can u explain how to handle logout in metamask. (my problem is even after clearing the local storage when logout but still metamask is not locked) ?

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

    is there a way to automate it?

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

    does it work with other currencies or just eht

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

    Best demonstration

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

    Hey,do you have video about staking smart conract,thanke you

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

      Got one video about NFT staking. Check my channel videos ;)

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

    Very nice and useful video!

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

      Glad it was helpful!

  • @DarKayserLeo
    @DarKayserLeo 11 หลายเดือนก่อน

    Hi I want to do the same to transfer SepoliaETH to a recipient address, do I need to change something in the code? thanks!

    • @ArturChmaro
      @ArturChmaro  11 หลายเดือนก่อน

      Everything remains the same. Just make sure that provider is configured for Sepolia ;)

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

    hey thank you for this video, Artur

  • @tabaraksohail7764
    @tabaraksohail7764 2 หลายเดือนก่อน

    Don't we need any type of token or anything to send transactions?

    • @ArturChmaro
      @ArturChmaro  2 หลายเดือนก่อน

      Yes, you need to cover gas fees

    • @tabaraksohail7764
      @tabaraksohail7764 2 หลายเดือนก่อน

      @@ArturChmaro no i mean like authentication token type thing

    • @tabaraksohail7764
      @tabaraksohail7764 2 หลายเดือนก่อน

      @@ArturChmaro and what if i want to use it to pay subscription of something so I can't put the amount of Ethereum by myself how can I calculate it according to the current price of Ethereum

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

    Great video

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

    Hey Artur. Great video! What's the advantage of ethers over web3? Should I convince my team to move into ethers from web3? Is it a challenge?

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

      Thanks for a great question. Both libraries basically do the same thing. Migrating shouldn't be hard because usually you just do the setup for provider/signer and calling smart contracts or sign transactions. I personally prefer ethers over web3 because:
      - ethers has clearer syntax (for me at least)
      - ~3x smaller than web3
      - better abstraction over wallet and signer
      - more friendly maintainer
      - better docs (still not perfect though)
      Here is a cheatsheet with differences between web3 and ethers: github.com/adrianmcli/web3-vs-ethers

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

      @@ArturChmaro Thanks!

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

      Isn't web3 going to be deprecated?

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

      @@papitomyking dunno tbh, still a lot of folks uses it 🤷‍♂️

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

      great question Artur

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

    Thanks for the video! In case I want to build a marketplace, how can I prevent attacker to change the value on "debug mode" and send different amount? I can't do it on server unless they send me their private key (which is not something I want)

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

      Contract may validate amount sent along with transaction. If funds are not enough contract will revert the transaction.

  • @hector-j1v8c
    @hector-j1v8c 3 ปีที่แล้ว

    As it is on the site, nothing comes out to run. In index.html there is no link to .js files and package.json. What files should be on the hosting?

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

      That's a regular React.js project. All you have to do is build it using "build" command (included in the package.json) and then you would get "dist" folder with a package of HTML/CSS/js files ready to be deployed. Just upload this files to your HTTP server via FTP and you are done.
      You can also use tools like netlify/vercel/firebase that can host it for you.

    • @hector-j1v8c
      @hector-j1v8c 3 ปีที่แล้ว +2

      @@ArturChmaro Unfortunately, it is not clear how to make the "build" command to get the files for uploading to the hosting. Please tell us more for beginners, or better record a video. Thanks for the dialogue!

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

      @@hector-j1v8c if you are using npm as a package manager do "npm rub build " for react to get your build ready . If it is yarn you are using as a package manager then do "yarn build " to get your build running. when the build is ready, get your build file (dist) and upload it to your HTTP sever.

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

    I was wondering if it's possible to use BSC with this and send custom tokens?

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

      Sure, however than you have to interact with ERC20 smart contracts (standard for most of tokens). Then instead of moving ether you are just moving ERC20 coins.

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

    Great video. How do I get the web3 starter for JS devs email course

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

      Here bit.ly/web3starter 😊

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

      @@ArturChmaro Done. Thank you

  • @donmikkodanm.olmillo8154
    @donmikkodanm.olmillo8154 2 ปีที่แล้ว

    Hello, thank you and you're the best lifesaver
    I would love to ask for some suggestion on how to do with minting and on the whitelist part, revealing that stuff.
    I am currenctly working on a start up company and I'm still overwhelmed on this ethereum and other crypto stuffs. thank you

    • @donmikkodanm.olmillo8154
      @donmikkodanm.olmillo8154 2 ปีที่แล้ว

      also would love to learn about smart contracts and other technical term and how to code them. thank you !

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

    life save count : 3. thanks man

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

    Great video! How can you prevent people from trying to pay with test coins just like you do in the test environment and only allow them to submit payments from the official blockchain? In the metamask account?

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

      You don't have to do much about it. Testnet & mainnet addresses are different, so it's impossible to call testnet by mistake. Secondly you control the provider object inside your dapp and you can force (or check) there to which network metamask user is connected.

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

    how can I specify the network that I want the TX to be with?

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

      Force provider network on UI side :) or just check it before actually asking for a transaction

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

    if I want to send usdc , what I want to change

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

      Different flow. You need to call erc20 (usdc) contract. I guess I have to record another video...

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

    do you know some payment gateway where the client pays normally by credit/debit card and I(owner of the store) receive automatically money converted to cryptocurrencie?

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

      Haven't used any service like that. I can only recommend something similar: ramp.network/ This service allows user to quickly swap regular currencies (EUR/USD/GBP/PLN and other fiats) to any crypto. The process is straightforward and can be used via a special widget (without leaving your app)

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

    Hello Sir, at the final of this video when I try to show the trasaction id by putting the (setTxs([tx]) line of code I get this error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    Any help please? Thanks a lot

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

      Hello Mohamed! Please check the live version of this code. It works :) codesandbox.io/s/react-eth-metamask-7vuy7

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

    how would you determine after the await signer.sendTransaction if the Eth sent is Ethereum Mainnet or Ropsten Test Network ethereum? as i would like to log in my database that a real transaction has been sent? also can you get a receipt for when the transaction has officially mined and reach your account?

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

      After issuing a transaction you can store txHash, pass it to the backend and double-check whether the funds were sent on the mainnet. You may also check how much confirmation did transaction get on-chain

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

      @@ArturChmaro So i can't just do something like if tx.network !== "mainnet". {. deny transaction- no real funds paid? }. and i have to do some sort of api request to eth scan? is that correct ?

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

    Is it possible with smart chain instead of ethereum?

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

      Of course, however then native coin is BNB, not ETH :)

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

      @@ArturChmaro there is an API to Smart chain to? I'm Brazilian beginner developer. In Brazil, there is no information about that.

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

    How to display wallet balance ?

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

      Use getBalance function from ethers: provider.getBalance("your_addr")

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

    Can you do this for angular?

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

      No plans for it as I have no Angular experience 😅

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

    sir pls teach us how to write ether " transfer code in Solidity " and Front end in React js

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

    i'd like to see the code in git hub\

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

    Hello Artur! It's awesome lesson. There is 1 question left: is it possible to generate 2 signatures from 2 different keys and combine their transaction into 1? So one of them will pay gas for both.

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

      You can pay gas for other addresses transaction. Google for "ethereum gas stations". I'm using Biconomy in my projects for exactly it.

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

      @@ArturChmaro Thanks! I can see that contracts can pay fees on their behalf. But what about user A pays for user B to send as combined transaction into a contract?

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

    great video

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

    thank u

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

    How secure is this

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

      It's secure :) Wallet app is responsible for signing the transaction. Private key never leave it.

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

      @@ArturChmaro thanks bro