Gas API ve Next.js ile Basit Bir Gas Takip Uygulaması Nasıl Oluşturulur

'Gas', işlem yapmak veya akıllı sözleşmeleri çalıştırmak gibi operasyonları gerçekleştirmek için gereken hesaplama çabasının miktarını ölçen bir birimdir. Tıpkı bir arabanın yakıtı gibi – ağın operasyonları işlemesi ve doğrulaması için gereklidir. Ethereum üzerindeki her işlem, karmaşıklığına göre belirlenen belirli bir miktarda gas gerektirir. Kullanıcılar, gas birimi başına ödemeye razı oldukları Ether miktarını temsil eden Gwei (1 Gwei = 1 Ether'in milyarda biri) cinsinden bir gas fiyatı belirler.

Gas fiyatlarını anlamak, kullanıcıların işlem maliyetlerini yönetmelerine yardımcı olduğundan blockchain ağlarında kritik öneme sahiptir. Güncel gas fiyatları hakkında bilgi sahibi olmak, kullanıcıların işlem başlatmak için en ekonomik zamanı seçmelerine ve işlem hızını belirlemelerine olanak tanır. Gas fiyatlarının farkında olmak; başarısız işlemleri önlemek, bütçe planlamak, ağ yoğunluğunu anlamak ve bilinçli yatırım kararları almak açısından da büyük önem taşır.

MetaMask Gas API'si

Infura aracılığıyla erişilebilen MetaMask Gas API'si, Ethereum Virtual Machine (EVM) uyumlu ağlar için gerçek zamanlı gas fiyatı bilgisi sağlamak amacıyla tasarlanmış özel bir araçtır. Bir oracle işlevi görerek bu ağlarda operasyon veya işlem gerçekleştirmek için gereken hesaplama maliyetlerine ilişkin güncel veriler sunar. API, geliştiricilerin gelişmiş gas tahmin özellikleri oluşturmasını sağlar; bu da arka uç işlem operasyonlarında maliyet tasarrufu sağlayabilir veya kullanıcılar için arayüzü iyileştirebilir.

Bu eğitimde, Gas API, Next.js ve ShadcnUI kullanarak bir Gas Tracker Uygulaması oluşturmayı öğreneceğiz. Bu uygulama, dapp kullanıcılarının işlem önceliklerine göre özelleştirilmiş önerilen gas fiyatlarına erişmesini sağlayacak ve bu işlemlerin bir blockchain bloğuna verimli şekilde dahil edilmesine yardımcı olacaktır.

Ön Koşullar

• Geçerli bir Web3 API anahtarı ve API anahtarı gizli bilgisi.

• Node.js ve npm ya da yarn kurulu olmalıdır.

• Next.js ve React konusunda temel bilgi.

Next.js + ShadcnUI Kurulumu

Öncelikle makinenizde Node.js'in kurulu olduğundan emin olun. Node.js kurulumunu tamamladıktan sonra terminalinizi açarak aşağıdaki komutu çalıştırın ve yeni bir Next.js uygulaması başlatın:

Komutu çalıştırdıktan sonra birkaç istem görünecek ve belirlediğiniz proje adıyla – ben gastracker-app kullandım – yeni bir dizin oluşturulacaktır. Bu işlem, Next.js'in temel yapısını kurar ve gerekli bağımlılıkları yükler. Şimdi proje dizininize geçin:

npx create-next-app@latest
✔ What is your project named? … gastracker-app
✔ 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

Yeni proje dizininize girin ve aşağıdaki komutu kullanarak Next.js uygulamasını geliştirme modunda başlatın. Ardından tarayıcınızda http://localhost:3000 adresine giderek uygulamanızı inceleyebilirsiniz.

cd gastracker-app
npm run dev
Kopyala

Kullanıcı Arayüzünün Oluşturulması

Uygulamamız için bir bileşen kütüphanesi kullanacağız. ShadcnUI'yi kurarak başlayalım:

Kurulum sırasında, aşağıdaki istemlerle components.json dosyasını yapılandırma konusunda yönlendirileceksiniz:

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

Bunu hallettikten sonra Shadcn UI'nin Card bileşenini de yükleyelim:

Bu eğitimde Shadcn UI'den Card bileşenini kullanmaya odaklanacağız. Bu bileşenler hakkında daha fazla bilgi edinmek için Shadcn UI web sitesini ziyaret edin. Ön uç kurulumumuz tamamlandığına göre Gas API ile çalışmaya başlamaya hazırız.

Kök dizinde, aşağıdaki kimlik bilgilerini depolayacağımız .env adlı bir dosya oluşturun:

INFURA_API_KEY=
INFURA_API_KEY_SECRET=
Kopyala

API_KEY ve API_KEY_SECRET bilgilerini Infura panonuzdan aldığınızdan emin olun. API anahtarını GitHub'a göndermekten kaçınmak son derece önemlidir. Kök dizinde, gerekli satırların dahil edildiğini doğrulamak için .gitignore dosyasını kontrol edin.

# Ignore environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
Kopyala

Ayrıca axios ve dotenv paketlerine de ihtiyacımız olacak:

npm install axios
npm install dotenv
Kopyala

Şimdi gastracker-app'in kök dizininde 'index.js' adlı bir dosya oluşturun ve aşağıdaki kodu içine kopyalayın:

const axios = require("axios");
require("dotenv").config();

const Auth = Buffer.from(
  process.env.INFURA_API_KEY + ":" + process.env.INFURA_API_KEY_SECRET,
).toString("base64");

// The chain ID of the supported network
const chainId = 1;

(async () => {
  try {
    const { data } = await axios.get(
      `https://gas.api.infura.io/networks/${chainId}/suggestedGasFees`,
      {
        headers: {
          Authorization: `Basic ${Auth}`,
        },
      },
    );
    console.log("Suggested gas fees:", data);
  } catch (error) {
    console.log("Server responded with:", error);
  }
})();
Kopyala

Başka bir terminal penceresinde aşağıdaki komutu çalıştırın.

Aşağıdakileri görmeniz gerekir:

Suggested gas fees: {
  low: {
    suggestedMaxPriorityFeePerGas: '0.05',
    suggestedMaxFeePerGas: '28.501086221',
    minWaitTimeEstimate: 15000,
    maxWaitTimeEstimate: 30000
  },
  medium: {
    suggestedMaxPriorityFeePerGas: '0.1',
    suggestedMaxFeePerGas: '38.508966399',
    minWaitTimeEstimate: 15000,
    maxWaitTimeEstimate: 45000
  },
  high: {
    suggestedMaxPriorityFeePerGas: '0.3',
    suggestedMaxFeePerGas: '48.666846576',
    minWaitTimeEstimate: 15000,
    maxWaitTimeEstimate: 60000
  },
  estimatedBaseFee: '28.451086221',
  networkCongestion: 0.7718,
  latestPriorityFeeRange: [ '0.05', '9.249760902' ],
  historicalPriorityFeeRange: [ '0.023435712', '56.009283908' ],
  historicalBaseFeeRange: [ '19.277073248', '31.361941035' ],
  priorityFeeTrend: 'down',
  baseFeeTrend: 'up'
}
Kopyala

Terminalde görüntülenen verileri gözlemlerseniz, API'den başarıyla yanıt aldığımızı gösterir. Bir sonraki adım, bu verileri ön uçta sunmaktır. index.js dosyasını artık silebilirsiniz.

Gas Verilerinin Ön Uçta Görüntülenmesi

Proje genelinde kullanılacak özel türler tanımlamak için kök dizinde 'index.d.ts' adlı bir dosya oluşturun ve aşağıdaki satırları ekleyin:

interface GasFeeEstimate {
    suggestedMaxPriorityFeePerGas: string;
    suggestedMaxFeePerGas: string;
    minWaitTimeEstimate: number;
    maxWaitTimeEstimate: number;
  }

  interface GasFeesApiResponse {
    low: GasFeeEstimate;
    medium: GasFeeEstimate;
    high: GasFeeEstimate;
    estimatedBaseFee: string;
    networkCongestion: number;
    latestPriorityFeeRange: string[];
    historicalPriorityFeeRange: string[];
    historicalBaseFeeRange: string[];
    priorityFeeTrend: 'up' | 'down';
    baseFeeTrend: 'up' | 'down';
  }
Kopyala

Global bir dosyadaki bu TypeScript arayüz bildirimleri, gas ücreti tahminleri ve API yanıtları için yapılar tanımlar. Bir blockchain ağında farklı işlem öncelik seviyeleri için ücret önerileri, bekleme süreleri, ağ yoğunluğu ve ücret trendleri gibi ayrıntıları kapsar.

'lib' klasöründe 'getData.ts' adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin:

const Auth = Buffer.from(
  process.env["INFURA_API_KEY"] + ":" + process.env["INFURA_API_KEY_SECRET"]
).toString("base64");

// The chain ID of the supported network
const chainId = 1;

export const getData = async () => {
  try {
    const res = await fetch(
      `https://gas.api.infura.io/networks/${chainId}/suggestedGasFees`,
      {
        headers: {
          Authorization: `Basic ${Auth}`,
        },
      }
    );

    const data = await res.json();

    return data as GasFeesApiResponse;
  } catch (error) {
    console.log("Server responded with:", error);
  }
};
Kopyala

Bu kodlar, Gas API'sinden gas ücreti verilerini çeker:

1. Kimlik Doğrulama Kurulumu: Ortam değişkenleri olarak ayarlanan INFURA_API_KEY ve INFURA_API_KEY_SECRET'ten bir Buffer oluşturur. Bu Buffer, API isteklerinde temel kimlik doğrulama için base64 dizesine ('Auth' olarak adlandırılır) dönüştürülür.

2. Chain ID Belirleme: chainId değişkenini, blockchain bağlamında genellikle Ethereum mainnet'i temsil eden 1 olarak ayarlar.

3. getData Fonksiyonu: Gas ücreti verilerini çekmek için tasarlanmış asenkron bir fonksiyon:

• Belirtilen chainId için önerilen gas ücretlerini almak amacıyla Infura API uç noktasına GET isteği yapmak için fetch kullanır.

• İstekte daha önce oluşturulan Auth token'ını kullanarak Authorization başlığını ayarlar.

• Başarılı olursa, yanıtı JSON olarak ayrıştırır ve önceden tanımlanmış arayüzle uyumlu şekilde GasFeesApiResponse olarak döndürür.

• Ağ sorunları veya sunucu hataları gibi hataları konsola kaydeder.

Chain ID Değişkenliği: chainId, uygulamanın hangi ağ için oluşturulduğuna bağlı olarak ayarlanabilir. Infura'daki Gas API, başlıca EVM ağlarının çoğunu destekler. Desteklenen ağlar hakkında daha fazla bilgi için dokümantasyonu ziyaret edin.

Kullanıcı Arayüzü Üzerinde Çalışma

Artık verileri görüntülemek için kullanıcı arayüzüne odaklanacağımız heyecan verici kısma geldik. Components klasörüne gidip 'GasCard.tsx' adlı bir bileşen oluşturalım.

import { getData } from "@/lib/getData";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export const GasCard = async () => {
  const data = await getData();

  const renderGasFeeEstimateCard = (
    estimate: GasFeeEstimate,
    title: string
  ) => (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Max Priority Fee: {estimate.suggestedMaxPriorityFeePerGas}</p>
        <p>Max Fee Per Gas: {estimate.suggestedMaxFeePerGas}</p>
        <p>Min Wait Time: {estimate.minWaitTimeEstimate} seconds</p>
        <p>Max Wait Time: {estimate.maxWaitTimeEstimate} seconds</p>
      </CardContent>
    </Card>
  );

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {data?.low &&
          renderGasFeeEstimateCard(data.low, "Low Gas Fee Estimate")}
        {data?.medium &&
          renderGasFeeEstimateCard(data.medium, "Medium Gas Fee Estimate")}
        {data?.high &&
          renderGasFeeEstimateCard(data.high, "High Gas Fee Estimate")}
      </div>
      <Card>
        <CardContent>
          <h2 className="font-semibold">Estimated Base Fee</h2>
          <p>Gas Price: {data?.estimatedBaseFee}</p>
          <h2 className="font-semibold">Network Congestion</h2>
          <p>{data?.networkCongestion}</p>
          <h2 className="font-semibold">Latest Priority Fee Range</h2>
          <p>{data?.latestPriorityFeeRange.join(" - ")}</p>
          <h2 className="font-semibold">Historical Priority Fee Range</h2>
          <p>{data?.historicalPriorityFeeRange.join(" - ")}</p>
          <h2 className="font-semibold">Historical Base Fee Range</h2>
          <p>{data?.historicalBaseFeeRange.join(" - ")}</p>
          <h2 className="font-semibold">Priority Fee Trend</h2>
          <p>{data?.priorityFeeTrend}</p>
          <h2 className="font-semibold">Base Fee Trend</h2>
          <p>{data?.baseFeeTrend}</p>
        </CardContent>
      </Card>
    </div>
  );
};
Kopyala

Burada neler olduğuna bakalım:

1. İçe Aktarmalar ve Veri Çekme:

• Bileşen, gas ücreti verilerini çekmek için getData fonksiyonunu ve daha önce kurduğumuz Shadcn UI'nin parçası olan Card, CardContent, CardHeader ve CardTitle gibi çeşitli UI bileşenlerini içe aktarır.

• GasCard bileşeninin içinde, gas ücreti verilerini almak için getData fonksiyonu çağrılır.

1. Gas Ücreti Tahminlerinin Görüntülenmesi:

• Belirli bir gas ücreti tahmini (GasFeeEstimate) ve başlık (title) için bir kart kullanıcı arayüzü oluşturan renderGasFeeEstimateCard adlı bir fonksiyon tanımlanır.

• Bu fonksiyon, maksimum öncelik ücreti, gas başına maksimum ücret ve tahmini bekleme süreleri gibi ayrıntıları gösteren bir Card bileşeni oluşturur.

1. Bileşen Yapısı:

• GasCard bileşeninin JSX yapısı, return ifadesinde özetlenmiştir. Veri kullanılabilirliğine bağlı olarak koşullu biçimde görüntülenen düşük, orta ve yüksek gas ücreti tahminleri için kartları sergilemek amacıyla bir grid düzeni kullanır.

• Ek bir kart; tahmini temel ücret, ağ yoğunluğu, öncelik ücreti aralıkları (güncel ve geçmiş) ile öncelik ve temel ücretlerdeki trendler gibi daha fazla bilgiyi gösterir.

Geriye kalan tek adım, GasCard.tsx'i page.tsx dosyasına aktarmaktır. Bunun ardından tüm veriler ön uçta görünür hale gelecektir.

Gas API'sini Kullanmaya Başlayın

Infura'daki Gas API'sini kullanmak, EVM uyumlu ağlarla çalışan geliştiricilere önemli avantajlar sunar. Dalgalanan gas piyasasına ilişkin gerçek zamanlı içgörüler sağlayarak kullanıcıların işlem ücretleri hakkında bilinçli kararlar almasına olanak tanır. Bu durum, özellikle işlemlerin hem hızını hem de maliyet etkinliğini optimize etmek açısından faydalıdır.

Bu eğitim, GasAPI ile nasıl başlanacağını ve basit bir Gas Tracker Uygulamasının nasıl oluşturulacağını kapsamaktadır. Koda buradan ulaşabilirsiniz: GitHub'da GasAPI-Template.

Ancak bununla çok daha eğlenceli şeyler yapabiliriz; belirli aralıklarda geri sayım ile GasData'yı yenileme yöntemleri ekleyebilir ve GasAPI'yi mevcut herhangi bir uygulamaya entegre edebiliriz. Aşağıdaki kaynakları incelemenizi öneririm:

Gas API Belgeleri: Infura Gas API Dokümantasyonu

EventSea: GasAPI'yi yaratıcı biçimde kullanan tam yığın bir Events Dapp'i: GitHub'da EventSea

Keyifli Geliştirmeler! 🚀