Thirdweb SDK

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 contrato

Inicializar SDK en Celo

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>
  );
};

Obtener contrato

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);
  }

  Referencia completa: https://portal.thirdweb.com/react/react.usenft
• 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");
  }

  Referencia completa: https://portal.thirdweb.com/react/react.usecontractread
• 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>
    );
  }

  Referencia completa: https://portal.thirdweb.com/react/react.usecontractwrite

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 />;
}

Referencia completa: https://portal.thirdweb.com/react/connecting-wallets

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.

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