Tampa berpanjang lebar, oke kita langsung praktek, peralatan yang diperlukan VSCode, untuk pengguna OS Windows disarankan untuk install GIT Bash, karena tidak semua perintah console bisa dilakukan di terminal command OS Windows.
jika sudah diinstal GIT Bash, kemudian ketikan perintah-perintah berikut ini di terminal Git Bash.
membuat proyek react js dengan nama proyek react-connect-metamask, dan otomatis menjadi nama direktori.
npx create-react-app react-connect-metamask
pindah direktori ke proyek react yang sebelumnya diberi nama react-connect-metamask
cd react-connect-metamask
selanjutnya lakukan perintah console untuk menjalankan serangkaian tugas yang sudah ditentukan dalam file package.json proyek.
npm run build
kemudian jalankan perintah console ini di terminal git bash.
npm run start
selanjutnya otomatis akan muncul pada halaman browser, atau bisa dipanggil melalui browser di url http://localhost:3000 seperti pada gambar berikut ini :
untuk dapat terhubung dengan wallet Metamask, terlebih dahulu download wallet metamask disini , pilih untuk plugin browser misalkan chrome, dan ikuti petunjuk installasinya sampai dengan selesai, kemudian setup konfigurasi metamask untuk menambahkan network Gnosis, untuk tahapan konfigurasi bisa melihat tutorial dokumentasi dari gnosis disini.
selanjutnya untuk dapat menggunakan perintah yang terhubung ke ethereum blockchain, ketikan perintah console berikut ini.
npm i -S ethers@5.7.2
memakai ethers versi 5.7.2 supaya bisa mendeteksi web3provider, karena di versi terbaru web3provider tidak terdeteksi.
selanjutnya di file App.js yang ada di path src/App.js ketikan perintah berikut ini :
import logo from './logo.svg';import './App.css';import { useState } from 'react';import { ethers } from 'ethers';function App() { //properties const [walletAddress, setWalletAddress] = useState(""); const ethers = require("ethers"); async function requestAccount() { console.log('request account..'); if (window.ethereum){ console.log('detected'); try{ const accounts = await window.ethereum.request({ method: "eth_requestAccounts", }); //console.log(accounts); setWalletAddress(accounts[0]); }catch (error){ console.log('error connection'); } }else{ console.log('Meta mask not detected'); } } async function connectWallet() { if(typeof window.ethereum !== 'undefined'){ await requestAccount(); const provider = new ethers.providers.Web3Provider(window.ethereum); } } return (<div className="App"><header className="App-header"><button onClick={requestAccount}>Request Account</button><button style={{backgroundColor: 'green'}} onClick={connectWallet}>Connect Wallet</button><h3>Wallet address: {walletAddress}</h3></header></div> );}export default App;
setelah melakukan modifikasi pada file App.js , ketikan perintah npm run start kembali.
npm run start
jika berhasil, maka akan muncul halaman seperti berikut :
klik tombol “connect Wallet” untuk mendeteksi wallet Metamask.
masukan password metamask yang sebelumnya sudah disetup pada saat instalasi, jika sudah berhasil maka address wallet metamask anda akan terdeteksi di wallet address.
untuk improvisasi, anda bisa merubah-rubah syntax pada file App.js
sampai ketemu di tutorial selanjutnya.
terimakasih.
GitHub:
https://github.com/dikikarim2004/react-ether-metamask
Written by: Diki K.
---
Join the Gnosis Builders Indonesia community: https://t.me/GnosisBuildersIndonesia
Join the global Gnosis Builders community: t.me/GnosisBuildersCommunity
Reach out for support & resources: gnosis.builders/contact-us
Use Gnosis Chain apps: gnosis.builders/users
Find the right wallet for you: gnosiswallets.com
Get free xDai: gnosisfaucet.com
Build on Gnosis Chain: gnosis.builders/developers
Become a validator: validategnosis.com
Monitor validators: gnosispools.info
Gnosis Chain Stats: gnosismetrics.com
Follow us on social media to be updated on our upcoming projects and progress: Gnosis Builders Twitter, Gnosis Builders Indonesia Twitter
