API de contexto

Proveedores que necesitarás.

Resumen

Esta sección mostrará el código para los providers que usaremos, como para pestañas, wallet y escrow.

Gestión global del estado de Pestañas

La gestión global del estado de las pestañas implica mantener y sincronizar el estado de los componentes de pestañas en toda la aplicación para asegurar coherencia y eficiencia.

"use client";

import { createContext, useContext, useState, ReactNode } from "react";

type Tabs = "deploy" | "escrow" | "helper";

interface TabsContextType {
  activeTab: Tabs;
  setActiveTab: (tab: Tabs) => void;
}

const TabsContext = createContext<TabsContextType | undefined>(undefined);

export function useTabsContext() {
  const context = useContext(TabsContext);
  if (!context) {
    throw new Error("useTabsContext must be used within TabsProvider");
  }
  return context;
}

export function TabsProvider({ children }: { children: ReactNode }) {
  const [activeTab, setActiveTab] = useState<Tabs>("deploy");

  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabsContext.Provider>
  );
}

Gestión global del estado de Escrow

La gestión global del estado de escrow implica manejar el estado relacionado con las funcionalidades de escrow dentro de una aplicación. Asegura que todos los componentes que interactúan con operaciones de escrow mantengan un estado sincronizado.

"use client";

import { Escrow } from "@/@types/escrows/escrow.entity";
import { createContext, useContext, useState, ReactNode } from "react";

/**
 *
 * Escrow Context
 *
 */
interface EscrowContextProps {
  escrow: Escrow | null;
  setEscrow: (escrow: Escrow) => void;
  resetEscrow: () => void;
}

const EscrowContext = createContext<EscrowContextProps | undefined>(undefined);

/**
 * Escrow Provider
 *
 * @Note:
 * - Estamos usando useContext para proporcionar el escrow único en todo el proyecto. Pero en tu caso, tú
 *   puedes usar Redux o Zustand para almacenar el escrow.
 *
 */
export const EscrowProvider = ({ children }: { children: ReactNode }) => {
  const [escrow, setEscrowState] = useState<Escrow | null>(null);

  /**
   * Set Escrow
   *
   * @param newEscrow - New escrow
   */
  const setEscrow = (newEscrow: Escrow) => {
    setEscrowState(newEscrow);
  };

  /**
   * Reset Escrow
   */
  const resetEscrow = () => {
    setEscrowState(null);
  };

  return (
    <EscrowContext.Provider value={{ escrow, setEscrow, resetEscrow }}>
      {children}
    </EscrowContext.Provider>
  );
};

export const useEscrowContext = () => {
  const context = useContext(EscrowContext);
  if (!context) {
    throw new Error("useEscrowContext must be used within EscrowProvider");
  }
  return context;
};

Gestión global del estado de Wallet

La gestión global del estado de la wallet asegura el manejo consistente de los estados relacionados con la wallet en toda la aplicación.

"use client";

import {
  createContext,
  useContext,
  useState,
  useEffect,
  ReactNode,
} from "react";

type WalletContextType = {
  walletAddress: string | null;
  walletName: string | null;
  setWalletInfo: (address: string, name: string) => void;
  clearWalletInfo: () => void;
};

const WalletContext = createContext<WalletContextType | undefined>(undefined);

export const WalletProvider = ({ children }: { children: ReactNode }) => {
  const [walletAddress, setWalletAddress] = useState<string | null>(null);
  const [walletName, setWalletName] = useState<string | null>(null);

  // Cargar o establecer información de la wallet desde localStorage
  useEffect(() => {
    const storedAddress = localStorage.getItem("walletAddress");
    const storedName = localStorage.getItem("walletName");

    if (storedAddress) setWalletAddress(storedAddress);
    if (storedName) setWalletName(storedName);
  }, []);

  /**
   * Set wallet info
   *
   * @param address - Wallet address
   * @param name - Wallet name
   */
  const setWalletInfo = (address: string, name: string) => {
    setWalletAddress(address);
    setWalletName(name);
    localStorage.setItem("walletAddress", address);
    localStorage.setItem("walletName", name);
  };

  /**
   * Clear wallet info
   */
  const clearWalletInfo = () => {
    setWalletAddress(null);
    setWalletName(null);
    localStorage.removeItem("walletAddress");
    localStorage.removeItem("walletName");
  };

  return (
    <WalletContext.Provider
      value={{ walletAddress, walletName, setWalletInfo, clearWalletInfo }}
    >
      {children}
    </WalletContext.Provider>
  );
};

export const useWalletContext = () => {
  const context = useContext(WalletContext);
  if (!context) {
    throw new Error("useWalletContext must be used within WalletProvider");
  }
  return context;
};

Global Provider

Construimos un provider global para gestionar los providers.

import { EscrowProvider } from "./escrow.provider";
import { WalletProvider } from "./wallet.provider";
import { TabsProvider } from "./tabs.provider";

export const GlobalProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <WalletProvider>
      <TabsProvider>
        <EscrowProvider>{children}</EscrowProvider>
      </TabsProvider>
    </WalletProvider>
  );
};