Web sitesine Metamask ile bağlan butonu eklemek

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;

  1. Cüzdan eklentisini açın,
  2. sağ üst köşedeki 3 nokta ile menüyü açın,
  3. “Connected sites” yazısına tıklayın,
  4. 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.

“Web sitesine Metamask ile bağlan butonu eklemek” üzerine 9 yorum

  1. Merhaba hocam bir size ulaşabileceğim bir irtibat no veya mail adresi gönderebilirmisiniz.

  2. 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 !

    1. Selamlar, XAMPP ile localhost oluşturup Local’de de çalıştırabilirsiniz sunucu şart değil. Ben teşekkür ederim, iyi çalışmalar 🙂

  3. 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

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir