Andino recursos
  • Andino recursos
    • ⛓️Glosario Blockchain Web3
      • 🦊Metamask Learing
      • Ecosistemas Layer 2
      • Gobernanza
        • ¿Qué es una DAO?
      • Recompenzas en proyectos codigo abierto
  • 🔴Optimism
    • Introducción a Optimism
    • Gobernanza en Optimism
    • RETROPGF
    • Construye en Optimism
      • OP Stack
  • 🔵Base
    • Base y OP Stack
  • 🔷Arbitrum
    • ¿Qué es Arbitrum?
    • Arbitrum One y Arbitrum Nova
  • 🟪Polygon
    • ¿Qué es Polygon?
    • Desarrollar dApps en Polygon
      • Requisitos para desarrollar dapps en polygon
  • 🟡Celo
    • ¿Qué es Celo?
      • dApps en Celo
    • ReFi : Finanzas regenerativas
    • Construir en Celo
      • Herramientas para desarrolladores
        • Recursos para desarrolladores
        • Contract Kit
          • Configuración Contract Kit
          • Usando el Contract Kit
          • Hola - Contrato (Trufa + Nodo Remoto)
        • Celo Librerías & SDKs
          • Thirdweb SDK
  • ⛓️POKT
    • ¿Qué es POKT?
    • ¿Cómo funciona una dApp?
    • ¿Cómo funciona PKT Network?
    • Empezar a construir en POKT
    • Cómo se ve Pocket en acción: Un vistazo detallado
      • Nodies App - POKT Network
Powered by GitBook
On this page
  • Crear aplicación
  • Interactuar con un contrato
  • Implementar aplicación
  1. Celo
  2. Construir en Celo
  3. Herramientas para desarrolladores
  4. Celo Librerías & SDKs

Thirdweb SDK

PreviousCelo Librerías & SDKsNextPOKT

Last updated 1 year ago

Crear aplicación

Thirdweb ofrece SDK para una variedad de lenguajes de programación, como React, React Native, TypeScript, Python, Go y Unity.

  1. En su CLI ejecute el siguiente comando:

    npx thirdweb create --app
  2. Ingrese sus preferencias para las indicaciones de la línea de comando:

    1. Dale un nombre a tu proyecto

    2. Elija su red: Elegiremos EVM para Moonbeam

    3. Elija su marco preferido: Next.js, CRA, Vite, React Native, Node.js o Express

    4. Elija su idioma preferido: JavaScript o TypeScript

  3. Utilice el SDK de React o TypeScript para interactuar con las funciones de su aplicación. Ver sección sobre “interactuar con tu contrato”

Interactuar con un

Inicializar SDK en

Envuelva su aplicación en el ThirdwebProvidercomponente y cámbiela activeChaina Celo

import { ThirdwebProvider } from "@thirdweb-dev/react";
import { Celo } from "@thirdweb-dev/chains";

const App = () => {
  return (
    <ThirdwebProvider activeChain={Celo}>
      <YourApp />
    </ThirdwebProvider>
  );
};

Para conectarse a su contrato, utilice el método del SDK [getContract](https://portal.thirdweb.com/typescript/sdk.thirdwebsdk.getcontract).

import { useContract } from "@thirdweb-dev/react";

function App() {
  const { contract, isLoading, error } = useContract("{{contract_address}}");
}

Llamar a funciones

  • Para funciones basadas en extensiones, utilice los ganchos compatibles integrados. El siguiente es un ejemplo que utiliza la extensión NFT para acceder a una lista de NFT propiedad de una dirección.useOwnedNFTs

    import { useOwnedNFTs, useContract, useAddress } from "@thirdweb-dev/react";
    
    // Your smart contract address
    const contractAddress = "{{contract_address}}";
    
    function App() {
      const address = useAddress();
      const { contract } = useContract(contractAddress);
      const { data, isLoading, error } = useOwnedNFTs(contract, address);
    }
  • Utilice el useContractReadgancho para llamar a cualquier función de lectura en su contrato pasando el nombre de la función que desea utilizar.

    import { useContractRead, useContract } from "@thirdweb-dev/react";
    
    // Your smart contract address
    const contractAddress = "{{contract_address}}";
    
    function App() {
      const { contract } = useContract(contractAddress);
      const { data, isLoading, error } = useContractRead(contract, "getName");
    }
  • Utilice el useContractWritegancho para llamar a cualquier función de escritura en su contrato pasando el nombre de la función que desea utilizar.

    import {
      useContractWrite,
      useContract,
      Web3Button,
    } from "@thirdweb-dev/react";
    
    // Your smart contract address
    const contractAddress = "{{contract_address}}";
    
    function App() {
      const { contract } = useContract(contractAddress);
      const { mutateAsync, isLoading, error } = useContractWrite(
        contract,
        "setName"
      );
    
      return (
        <Web3Button
          contractAddress={contractAddress}
          // Calls the "setName" function on your smart contract with "My Name" as the first argument
          action={() => mutateAsync({ args: ["My Name"] })}
        >
          Send Transaction
        </Web3Button>
      );
    }

Conectar billetera

Cree una experiencia de billetera conectada personalizada declarando las billeteras compatibles pasadas a su proveedor.

import {
  ThirdwebProvider,
  metamaskWallet,
  coinbaseWallet,
  walletConnectV1,
  walletConnect,
  safeWallet,
  paperWallet,
} from "@thirdweb-dev/react";

function MyApp() {
  return (
    <ThirdwebProvider
      supportedWallets={[
        metamaskWallet(),
        coinbaseWallet(),
        walletConnect({
          projectId: "YOUR_PROJECT_ID", // optional
        }),
        walletConnectV1(),
        safeWallet(),
        paperWallet({
          clientId: "YOUR_CLIENT_ID", // required
        }),
      ]}
      activeChain={Celo}
    >
      <App />
    </ThirdwebProvider>
  );
}

Agregue un botón de conexión de billetera para solicitar a los usuarios finales que inicien sesión con cualquiera de las billeteras admitidas anteriormente.

import { ConnectWallet } from "@thirdweb-dev/react";

function App() {
  return <ConnectWallet />;
}

Implementar aplicación

Para alojar su aplicación web estática en almacenamiento descentralizado, ejecute:

npx thirdweb deploy --app

Al ejecutar este comando, su aplicación se crea para producción y se almacena mediante Almacenamiento. La aplicación creada se carga en IPFS, una red de almacenamiento descentralizada, y se genera una URL única para su aplicación.

Esta URL sirve como ubicación de alojamiento permanente para su aplicación en la web.

Obtener

Referencia completa:

Referencia completa:

Referencia completa:

Referencia completa:

Si tiene más preguntas o encuentra algún problema durante el proceso, comuníquese con el soporte de Thirdweb en .

🟡
contrato
Celo
contrato
https://portal.thirdweb.com/react/react.usenft
https://portal.thirdweb.com/react/react.usecontractread
https://portal.thirdweb.com/react/react.usecontractwrite
https://portal.thirdweb.com/react/connecting-wallets
support.thirdweb.com