MetaMask SDK'yı Next.js ile Nasıl Entegre Edilir

Web3'te cüzdan, kullanıcıların blockchain ağlarıyla etkileşime girmesini sağlayan dijital bir uygulamayı ifade eder. Cüzdanlar, kullanıcılar ile blockchain'in merkeziyetsiz dünyası arasında köprü görevi görür. Kimlik doğrulama için e-posta ve şifre kombinasyonları ya da OAuth hizmetleri kullanan geleneksel web uygulamalarının aksine, web3 uygulamaları kullanıcıları bir cüzdanın ve ilişkili private key'lerin sahipliğine göre doğrular. "Cüzdan Bağla" düğmesi bu kimlik doğrulama sürecini başlatır.

Bu eğitimde, MetaMask cüzdanıyla kimlik doğrulama sürecini başlatan bir "Cüzdan Bağla" düğmesini Next.js uygulamasına nasıl ekleyeceğimizi öğreneceğiz.

Ön Koşullar:

• Next.js ve React'e aşinalık.

• Node.js ve npm/yarn kurulu olmalı.

• Tarayıcınızda MetaMask eklentisi kurulu olmalı.

Bunlar bu eğitim için bazı ön koşullar olsa da öğrenmenin en iyi yolu başlayıp yol boyunca öğrenmektir.

Next.js Projesini Kurma:

Bir Next.js projesi kurmak için makinenizde Node.js'in kurulu olması gerekir. Node.js kurulduktan sonra terminalinizi açıp aşağıdaki komutu çalıştırarak yeni bir Next.js uygulaması oluşturabilirsiniz:

Aşağıdaki yönlendirmeleri göreceğiz:

npx create-next-app@latest
✔ What is your project named? … next-metamask-template
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Kopyala

Bu komut, belirtilen proje adıyla yeni bir klasör oluşturur, başlangıç Next.js yapısını kurar ve gerekli tüm bağımlılıkları yükler. Klasörünüze gidin.

ve npm run dev komutunu çalıştırın; bu komut Next.js uygulamasını geliştirme modunda başlatır. Web tarayıcınızda http://localhost:3000 adresine giderek uygulamanızı görüntüleyebilirsiniz.

Kullanıcı Arayüzü Oluşturma

Uygulamamıza bir bileşen kütüphanesi ekleyeceğiz. Hemen ShadcnUI kurulumuna geçelim.

components.json dosyasını yapılandırmak için aşağıdaki yönlendirmeleri göreceğiz:

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes
Kopyala

ShadcnUI bileşen kütüphanesinden bu eğitimde iki bileşen kullanacağız: Button ve Popover.

Ayrıca @metamask/sdk-react kullanacağız; bu konuda daha fazla bilgiyi MetaMask belgelerinden okuyabilirsiniz.

SDK'yı kuralım:

NavBar.tsx adında yeni bir bileşen oluşturacak ve "Cüzdan Bağla" düğmesini ile SDK'yı ekleyeceğiz. Bileşenimiz başlangıçta şöyle görünmelidir:

"use client";

import Link from "next/link";

import WalletIcon from "../public/icons/WalletIcon";

import { Button } from "./ui/button";

import { useSDK, MetaMaskProvider } from "@metamask/sdk-react";
import { formatAddress } from "../lib/utils";
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/ui/popover";

export const ConnectWalletButton = () => {
  const { sdk, connected, connecting, account } = useSDK();

  const connect = async () => {
    try {
      await sdk?.connect();
    } catch (err) {
      console.warn(`No accounts found`, err);
    }
  };

  const disconnect = () => {
    if (sdk) {
      sdk.terminate();
    }
  };

  return (
    <div className="relative">
      {connected ? (
        <Popover>
          <PopoverTrigger>
            <Button>{formatAddress(account)}</Button>
          </PopoverTrigger>
          <PopoverContent className="mt-2 w-44 bg-gray-100 border rounded-md shadow-lg right-0 z-10 top-10">
            
              Disconnect
            
          </PopoverContent>
        </Popover>
      ) : (
        <Button disabled={connecting} onClick={connect}>
          <WalletIcon className="mr-2 h-4 w-4" /> Connect Wallet
        </Button>
      )}
    </div>
  );
};
Kopyala

Burada neler yaptığımıza bakalım:

1. useSDK hook'u: Öncelikle odak noktamız, MetaMask SDK'sının işlevlerine erişim sağlayan useSDK hook'udur. Bu hook; MetaMask ile etkileşim için bir SDK nesnesi, cüzdanın bağlı olup olmadığını doğrulamak için bir connected boolean değeri, bağlantı durumunu kontrol etmek için bir connecting boolean değeri ve kullanıcının hesap adresine erişmek için bir account değeri sağlar.

2. Bağlan ve bağlantıyı kes fonksiyonları: Kurulum iki temel fonksiyon içerir: connect ve disconnect. Connect fonksiyonu, SDK'yı kullanarak MetaMask cüzdanıyla bağlantı kurmaya çalışan asenkron bir işlemdir. Başarılı bir bağlantıda useSDK hook'undaki connected ve account değerlerini günceller. Disconnect fonksiyonu ise sdk.terminate() çağrısıyla cüzdanın bağlantısını kesmek için kullanılır.

3. UI öğeleri: Uygulamamız iki UI öğesi içerir: bir button ve bir popover. Bileşenin görünümü bağlantı durumuna göre değişir. Bağlıyken, biçimlendirilmiş hesap adresini ve bağlantıyı kesme seçeneğini gösteren bir Popover bileşeni görüntülenir. Bağlı değilken ise bir "Cüzdan Bağla" düğmesi gösterilir; bu düğme, devam eden bir bağlantı girişimi sırasında devre dışı kalır.

Şimdi NavBar için kodu ekleyelim:

export const NavBar = () => {
  const host =
    typeof window !== "undefined" ? window.location.host : "defaultHost";

  const sdkOptions = {
    logging: { developerMode: false },
    checkInstallationImmediately: false,
    dappMetadata: {
      name: "Next-Metamask-Boilerplate",
      url: host, // using the host constant defined above
    },
  };

  return (
    <nav className="flex items-center justify-between max-w-screen-xl px-6 mx-auto py-7 rounded-xl">
      <Link href="/" className="flex gap-1 px-6">
        <span className="hidden text-2xl font-bold sm:block">
          <span className="text-gray-900">Template</span>
        </span>
      </Link>
      <div className="flex gap-4 px-6">
        <MetaMaskProvider debug={false} sdkOptions={sdkOptions}>
          <ConnectWalletButton />
        </MetaMaskProvider>
      </div>
    </nav>
  );
};

export default NavBar;
Kopyala

Burada neler yaptığımıza bakalım:

1. Host değişkeni: Bu değişken, SDK seçeneklerinde kullanılmak üzere mevcut pencerenin host adresini belirler. Tarayıcı ortamında çalışıp çalışmadığını doğrulamak için koşullu bir kontrol içerir.

2. SDK seçenekleri: Bunlar MetaMask SDK'sının yapılandırma seçenekleridir; loglama ve kurulum kontrolleri için tercihleri ayarlar ve dapp hakkında meta veri içerir.

3. NavBar bileşeni: NavBar, ana sayfaya bir bağlantı içerir ve ConnectWalletButton bileşenini barındırır. MetaMask SDK'sından gerekli bağlamı sağlamak için ConnectWalletButton'ı, @metamask/sdk-react'ten içe aktarılan MetaMaskProvider bileşeniyle sarar.

• Cüzdan İkonu: Cüzdan ikonunu elde etmek için SVG görsellerini React bileşenlerine dönüştüren bir araç olan SVGR'yi kullandık.

Tam cüzdan adresinin NavBar'da çok fazla yer kaplamasını önlemek için lib klasöründeki utils.ts dosyasında düzenlemeler yapacağız. Bu, adresin daha kısa bir biçimde görüntülenmesini sağlar.

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
Kopyala

Aşağıdaki satırları ekleyin:

export const formatBalance = (rawBalance: string) => {
  const balance = (parseInt(rawBalance) / 1000000000000000000).toFixed(2);
  return balance;
};

export const formatChainAsNum = (chainIdHex: string) => {
  const chainIdNum = parseInt(chainIdHex);
  return chainIdNum;
};

export const formatAddress = (addr: string | undefined) => {
  return `${addr?.substring(0, 8)}...`;
};
Kopyala

Yukarıdaki fonksiyonlar — formatBalance, formatChainAsNum ve formatAddress — bir dApp genelinde blockchain verilerini tutarlı biçimde biçimlendirmek ve kullanıcılara göstermek amacıyla içe aktarılıp kullanılmak üzere tasarlanmıştır.

NavBar Bileşeninde şu şekilde içe aktaracağız:

Ve burada düğmede kullandık:

Geriye kalan tek şey NavBar.tsx'i layout.tsx bileşenimize içe aktarmak.

Geliştirme sunucumuzu çalıştırırsak uygulamamızda yaptığımız değişiklikleri göreceğiz.

Sonuç

MetaMask SDK, DApp geliştirme söz konusu olduğunda gerçekten kullanışlı ve oyun değiştirici bir araçtır. Kullanıcıların MetaMask tarayıcı eklentisine ve MetaMask Mobile'a kolayca bağlanmasını sağlar.

Bu, MetaMask SDK ile nasıl başlanacağına dair bir girişti; ancak bununla çok daha fazlasını yapabilir ve full-stack uygulamalarda da kullanabilirsiniz. Bu projenin kodunu buradaki repoda bulabilirsiniz.

Ayrıca aşağıdaki kaynakları incelemenizi öneririm:

• MetaMask Belgeleri: https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/react/

• EventSea: MetaMask SDK kullanan Full-Stack bir Etkinlik Dapp'i: https://github.com/Consensys/eventsea

Keyifli Geliştirmeler. 🚀