Merhaba, bu yazıda web sitenizi Metamask ile ilişkilendirmeyi, cüzdan bağlamayı ele alacağım.
Web sitesine neden Metamask Eklenir ki?
Konuyu daha iyi anlamak için; Web sitemize ekleyeceğimiz kodlar sayesinde ziyaretçiler cüzdanını bağlayabilir, ödeme yapabilir ya da daha ileri gidersek swap bile gerçekleştirebilir. Bu sayede siz de ETH ile ödeme alabilirsiniz.
Metamask Cüzdan Bağlama Butonu
Önce butonu ekleyelim;
<button class=”enableEthereumButton”>Enable Ethereusm</button>
Ardından Js kodumuz;
const ethereumButton = document.querySelector('.enableEthereumButton'); ethereumButton.addEventListener('click', () => { ethereum.request({ method: 'eth_requestAccounts' }); });
Gördüğünüz gibi oldukça basit. Bir o kadar da işe yaramaz bu haliyle. Şimdi bunu biraz daha geliştirip bağladığımız cüzdan adresini çekelim;
Cüzdan Adresini Gösterme
HTML
<button class=”enableEthereumButton”>Login with Metamask</button>
<h2>Wallet Address: <span class=”showAccount”></span></h2>
Javascript
const ethereumButton = document.querySelector('.enableEthereumButton'); const showAccount = document.querySelector('.showAccount'); ethereumButton.addEventListener('click', () => { getAccount(); }); async function getAccount() { const accounts = await ethereum.request({ method: 'eth_requestAccounts' }); const account = accounts[0]; showAccount.innerHTML = account; }
See the Pen
Simple Login with Metamask by Onur ALAS (@onur)
on CodePen.
Gelişmiş Haliyle ‘Metamask ile bağlan’ butonu
Yazıyı bitirirken son olarak biraz daha geliştirilmiş bir js kodu bırakmak istiyorum. Bu haliyle Metamask yüklü mü değil mi algılıyor, bağlandıktan sonra çıkış yapılabiliyor ve cüzdan adresini gösterebiliyor. Ayrıca tailwind ile daha havalı gözüküyor.
HTML
<head>
<link href=”https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css” rel=”stylesheet”>
</head><body class=”flex w-screen h-screen justify-center items-center”>
<div class=”flex-col space-y-2 justify-center items-center”>
<button id=’loginButton’ onclick=”” class=”mx-auto rounded-md p-2 bg-purple-500 text-white”>
Login with MetaMask
</button>
<p id=’userWallet’ class=’text-lg text-gray-600 my-2′></p>
</div>
</body>
Javascript
window.userWalletAddress = null const loginButton = document.getElementById('loginButton') const userWallet = document.getElementById('userWallet') function toggleButton() { if (!window.ethereum) { loginButton.innerText = 'MetaMask is not installed' loginButton.classList.remove('bg-purple-500', 'text-white') loginButton.classList.add('bg-gray-500', 'text-gray-100', 'cursor-not-allowed') return false } loginButton.addEventListener('click', loginWithMetaMask) } async function loginWithMetaMask() { const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }) .catch((e) => { console.error(e.message) return }) if (!accounts) { return } window.userWalletAddress = accounts[0] userWallet.innerText = window.userWalletAddress loginButton.innerText = 'Sign out of MetaMask' loginButton.removeEventListener('click', loginWithMetaMask) setTimeout(() => { loginButton.addEventListener('click', signOutOfMetaMask) }, 200) } function signOutOfMetaMask() { window.userWalletAddress = null userWallet.innerText = '' loginButton.innerText = 'Sign in with MetaMask' loginButton.removeEventListener('click', signOutOfMetaMask) setTimeout(() => { loginButton.addEventListener('click', loginWithMetaMask) }, 200) } window.addEventListener('DOMContentLoaded', () => { toggleButton() });
See the Pen
Login with Metamask Button by Onur ALAS (@onur)
on CodePen.
Metamask Cüzdanın Bağlı Olduğu Siteleri Görmek ve Kaldırmak
Bağlı olduğunuz tüm siteleri görmek ve kaldırmak için;
- Cüzdan eklentisini açın,
- sağ üst köşedeki 3 nokta ile menüyü açın,
- “Connected sites” yazısına tıklayın,
- açılan pencerede bağlı olduğunuz tüm siteleri görebilir, çöp kutusu ikonuna tıklayarak bağlantıyı kaldırabilirsiniz.
Bazen birden fazla cüzdanınız olabilir, bu yüzden tüm cüzdanlarınızı tek tek kontrol etmek yerine çöp kutusu ikonuna tıkladıktan sonra açılan pencerede “Disconnect all accounts” yazısına tıklayarak tüm hesaplarınızın bağlantısını tek seferde koparabilirsiniz.
Merhaba hocam bir size ulaşabileceğim bir irtibat no veya mail adresi gönderebilirmisiniz.
iletişim sayfasındaki mail adresimden bana ulaşabilirsiniz.
Yazı çok güzel olmuş inşallah devamı da gelir
Hocam öncelikle selamlar yazınız açıklayıcı olmuş ve türkçe kaynak yokluğunda gayet ilaç gibi gelmiş fakat bende bir sorun oluşuyor. Uzun zamandır web3 ile ilgilenen ve web3 te oyun yapan biri olmak istiyorum fakat server kurmak ile ilgili pek bir deneyimim yok veya websitesi kurmakla ilgili, Bu metamask bağlantı butonu sadece server üzerinde mi çalışıyor yoksa local olarak da çalıştırabilirmiyiz eğer çalıştırabiliyorsak nasıl yaparız çünkü buradaki adımları uygulamama rağmen bağlantı butonu gelmiyor, Şimdiden teşekkürler !
Selamlar, XAMPP ile localhost oluşturup Local’de de çalıştırabilirsiniz sunucu şart değil. Ben teşekkür ederim, iyi çalışmalar 🙂
Hocam merhaba anlatımınız için teşekkürler, soracağım soru şudur, ben bu kodları kendi internet sitemde wordpress düzenleme bölümünde eklenti ekle yerine yazacağım dimi? Ve ben internet sitemde birşeyi token.ile satmak istersem.hangi kodları ekleyeceğim yardımcı olur musunuz
Merhabalar, ilk soruya yanıtım “hayır”. İkinci sorunuzu cevaplamam için benim size 2-3 soru sormam lazım.
WordPresste alınan temaya bu aşamaları uygularsak sonuç elde edebilir miyiz ayrıca trustwallet için ne yapmamız gerekiyor
Evet, çalışır. Trustwallet için dee bir rehber hazırlayacağım, yazı taslağını oluşturdum.