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;

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.