Thirdweb SDK
Last updated
Last updated
Thirdweb ofrece SDK para una variedad de lenguajes de programación, como React, React Native, TypeScript, Python, Go y Unity.
En su CLI ejecute el siguiente comando:
npx thirdweb create --app
Ingrese sus preferencias para las indicaciones de la línea de comando:
Dale un nombre a tu proyecto
Elija su red: Elegiremos EVM para Moonbeam
Elija su marco preferido: Next.js, CRA, Vite, React Native, Node.js o Express
Elija su idioma preferido: JavaScript o TypeScript
Utilice el SDK de React o TypeScript para interactuar con las funciones de su aplicación. Ver sección sobre “interactuar con tu contrato”
Envuelva su aplicación en el ThirdwebProvider
componente y cámbiela activeChain
a 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}}");
}
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 useContractRead
gancho 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 useContractWrite
gancho para llamar a cualquier función de escritura en su contrato pasando el nombre de la función que desea utilizar.
Referencia completa:
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
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 .
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>
);
}