Como implementar a API de Gas do MetaMask em um Dapp de venda de ingressos

Entender o preço do gas antes de comprar ingressos para eventos baseados em blockchain é essencial tanto para a transparência de custos quanto para um planejamento financeiro eficaz. No contexto de transações em blockchain, "gas" refere-se à taxa necessária para realizar com sucesso uma transação ou executar um contrato na blockchain.

Essa taxa varia de acordo com a demanda da rede. Ao conhecer o preço do gas com antecedência, os compradores de ingressos podem tomar decisões mais informadas sobre o custo total de sua compra. Isso é especialmente importante porque a taxa de gas pode aumentar significativamente o custo total do ingresso, principalmente em períodos de alta congestionamento da rede.

Neste tutorial, vamos implementar a Gas API da MetaMask em um dapp de venda de ingressos para eventos já existente, permitindo que os usuários visualizem os preços do gas ao comprar ingressos para eventos.

Pré-requisitos e dependências

• Uma chave de API Web3 e um segredo de chave de API válidos.

• Node.js e npm ou yarn instalados.

• Familiaridade com Next.js e React.

Para o framework de frontend, utilizaremos o Next.js, e para a interface, usaremos o ShadcnUI. Vamos instalar os seguintes componentes do ShadcnUI:

npx shadcn-ui@latest add hover-card
npm i swr
Copiar

O código acima adicionará o componente hover-card, que usaremos para exibir os preços do gas, e instalará a biblioteca de hooks React SWR. A biblioteca Stale-While-Revalidate (SWR) facilita a busca de dados na internet. Ela funciona utilizando primeiro os dados salvos anteriormente, depois solicitando novos dados e, por fim, substituindo os dados antigos pelas novas informações. Isso torna os sites mais rápidos e atualizados.

Em seguida, instalaremos o componente react-circular-progressbar para exibir indicadores de progresso circulares, úteis para mostrar o andamento de tarefas ou estados de carregamento em aplicações web. É personalizável e implementado com SVG para gráficos de alta qualidade.

Implementando a Gas API

No diretório app/web, vamos criar a seguinte pasta: app/api/gas. Dentro dela, vamos criar um arquivo route.ts e adicionar o seguinte código:

import { NextResponse } from "next/server";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const chainId = searchParams.get("chainId");

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

  const gasPricesResp = await fetch(
    `https://gas.api.infura.io/networks/${chainId}/suggestedGasFees`,
    {
      headers: {
        Authorization: `Basic ${Auth}`,
      },
    }
  );

  const baseFeePercentileRes = await fetch(
    `https://gas.api.infura.io/networks/${chainId}/baseFeePercentile`,
    {
      headers: {
        Authorization: `Basic ${Auth}`,
      },
    }
  );

  const gasPricesData = await gasPricesResp.json();
  const baseFeePercentileData = await baseFeePercentileRes.json();

  return NextResponse.json({
    estimatedBaseFee: gasPricesData.estimatedBaseFee,
    baseFeeTrend: gasPricesData.baseFeeTrend,
    baseFeePercentile: baseFeePercentileData.baseFeePercentile,
  });
}
Copiar

Veja o que fizemos aqui:

1. Extração dos Parâmetros de Consulta:- const { searchParams } = new URL(request.url);: Extrai os parâmetros de busca da URL da requisição.

• const chainId = searchParams.get("chainId");: Recupera o parâmetro chainId da URL, utilizado para especificar a rede Ethereum.

1. Configuração da Autorização:- As variáveis de ambiente INFURA_API_KEY e INFURA_API_SECRET são combinadas em um Buffer e, em seguida, codificadas em uma string Base64. Essa string é usada para autenticação HTTP básica ao fazer requisições à API da Infura.

2. Busca de Preços de Gas e Dados de Percentil da Taxa Base:- Duas requisições fetch assíncronas são feitas à API da Infura:- gasPricesResp busca as taxas de gas sugeridas para a rede Ethereum especificada (chainId).

• baseFeePercentileRes busca o percentil da taxa base para a mesma rede.

• O cabeçalho Authorization é definido com as credenciais codificadas em Base64.

1. Análise e Retorno dos Dados:- As respostas de ambas as requisições fetch são convertidas para JSON.

• NextResponse.json({...}) cria e retorna uma resposta JSON contendo os seguintes dados:- estimatedBaseFee: A taxa base estimada para transações.

• baseFeeTrend: A tendência da taxa base (por exemplo, em alta ou em queda).

• baseFeePercentile: A distribuição percentual das taxas base.

Criando a interface do usuário

Vamos criar um componente chamado GasFeeCard.tsx e adicionar o seguinte código:

import useSWR, { mutate } from "swr";
import {
  CircularProgressbarWithChildren,
  buildStyles,
} from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";
import { useEffect, useState } from "react";
import { ArrowUp, ArrowDown, InfoIcon } from "lucide-react";
import { useSDK } from "@metamask/sdk-react";

const REFETCH_INTERVAL = 10000;
const STEP_INTERVAL = 1000;
const NETWORK_LATENCY = 2000; // rough estimate of network latency to consider when refetching

// format the gas price nicely for small values
const formatGweiValues = (value: string) => {
  const gwei = parseFloat(value);

  if (gwei < 0.01) {
    return gwei.toExponential(2);
  } else {
    return gwei.toFixed(2);
  }
};

export function GasFeeCard() {
  const { chainId } = useSDK();

  const [countdown, setCountdown] = useState(REFETCH_INTERVAL);
  const [currentChainId, setCurrentChainId] = useState(chainId);

  useEffect(() => {
    if (chainId !== currentChainId) {
      setCurrentChainId(chainId);
      mutate("gas-data");
      if (countdown < NETWORK_LATENCY) {
        setCountdown(REFETCH_INTERVAL + NETWORK_LATENCY);
      }
      setCountdown(REFETCH_INTERVAL);
    }
  }, [countdown, chainId, currentChainId, mutate]);

  useEffect(() => {
    const interval = setInterval(() => {
      setCountdown((oldCountdown) => {
        if (oldCountdown <= 0) {
          mutate("gas-data");
          return REFETCH_INTERVAL;
        } else {
          return oldCountdown - STEP_INTERVAL;
        }
      });
    }, STEP_INTERVAL);

    return () => clearInterval(interval);
  }, [chainId]);

  const fetcher = () =>
    fetch(`/api/gas?&chainId=${parseInt(chainId || "0xe704")}`).then((res) =>
      res.json()
    );

  const {
    data: gasData,
    error: gasDataError,
    isLoading: gasDataLoading,
  } = useSWR("gas-data", fetcher);

  if (gasDataLoading) {
    return <p>loading</p>;
  }

  if (gasDataError) {
    return <p className="text-red-500">error</p>;
  }

  const trendingUp = gasData?.baseFeeTrend === "up";
  const trendingDown = gasData?.baseFeeTrend === "down";

  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <div className="cursor-pointer">
          <div className="flex space-x-1">
            <div className="w-6 h-6">
              <CircularProgressbarWithChildren
                strokeWidth={12}
                styles={buildStyles({
                  pathColor: trendingUp ? "red" : "green",
                })}
                value={
                  ((REFETCH_INTERVAL - countdown) / REFETCH_INTERVAL) * 100
                }
              >
                <>
                  {trendingUp && (
                    <ArrowUp
                      className="animate-bounceUp"
                      color="red"
                      size={14}
                    />
                  )}
                  {trendingDown && (
                    <ArrowDown
                      className="animate-bounceDown"
                      color="green "
                      size={14}
                    />
                  )}
                </>
              </CircularProgressbarWithChildren>
            </div>
            <p>
              ~{formatGweiValues(gasData?.estimatedBaseFee)}
              Gwei
            </p>
            <InfoIcon size={14} />
          </div>
        </div>
      </HoverCardTrigger>
      <HoverCardContent className="p-0 w-80">
        <div className="p-2 space-y-4">
          <p>
            This is an <strong>estimated base gas fee.</strong>
          </p>
          <p>
            50% of the historical base fees are less then or equal to{" "}
            <strong>
              ~{formatGweiValues(gasData?.baseFeePercentile)} Gwei
            </strong>
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}
Copiar

Veja o que fizemos aqui:

1. Constantes:- REFETCH_INTERVAL, STEP_INTERVAL, NETWORK_LATENCY: Constantes para gerenciar o intervalo de busca de dados, o intervalo de etapas para atualizações de contagem regressiva e a latência estimada da rede.

2. Função Utilitária:- formatGweiValues: Uma função para formatar os valores de preço do gas em um formato legível, usando notação exponencial para valores pequenos ou notação de ponto fixo para valores maiores.

3. Componente GasFeeCard:- Usa useSDK para obter o chainId atual do Ethereum.

• As variáveis de estado countdown e currentChainId são inicializadas.

• O primeiro hook useEffect atualiza o ID da chain atual e aciona a nova busca de dados (mutate) quando o ID da chain muda. Ele também reinicia o temporizador de contagem regressiva.

• O segundo useEffect configura um intervalo que decrementa a contagem regressiva e aciona uma nova busca de dados quando ela chega a zero. O intervalo é limpo ao desmontar o componente.

• fetcher: Uma função que busca dados de gas em um endpoint de API do lado do servidor, passando o ID da chain atual como parâmetro de consulta.

• useSWR: Este hook é usado para buscar dados de gas com a função fetcher e fornece os estados de dados, carregamento e erro.

1. Lógica de Renderização:- O componente renderiza condicionalmente os estados de carregamento e erro.

• trendingUp e trendingDown são booleanos determinados pelo baseFeeTrend dos dados de gas obtidos.

• A interface principal consiste em um HoverCard com um CircularProgressbarWithChildren indicando o progresso da contagem regressiva e um ícone de seta mostrando a tendência do preço do gas. Ele exibe a taxa base estimada em Gwei.

• O HoverCardContent exibe informações mais detalhadas sobre a taxa base estimada e o percentil histórico da taxa base.

1. Estilização:- O código usa classes do Tailwind CSS para estilização (por exemplo, text-red-500, cursor-pointer).

• O CircularProgressbarWithChildren é estilizado para mudar de cor com base na tendência do preço do gas (vermelho para alta, verde para queda).

Também utilizamos os ícones ArrowUp, ArrowDown e InfoIcon do lucide-react. Agora, basta importar este componente no componente GetTicket.tsx para que ele seja exibido abaixo do preço total dos ingressos.

Continue desenvolvendo com a Gas API da MetaMask

Conhecer o preço do gas permite que os compradores escolham o momento mais econômico para realizar sua compra, podendo economizar dinheiro ao transacionar em períodos de gas mais baixo. Para uma plataforma de venda de ingressos para eventos, fornecer essa informação aumenta a transparência e a satisfação dos clientes, pois os usuários se sentem mais no controle de seus gastos e podem evitar taxas inesperadas.

Implementamos a Gas API em um dapp de venda de ingressos para eventos já existente. Você pode encontrar o código deste tutorial aqui

Também recomendo conferir os seguintes recursos:

Documentação da Gas API: https://docs.infura.io/infura-expansion-apis/gas-api

Template da Gas API: https://github.com/meowyx/GasAPI-Template

Bons projetos! 🚀