# Thirdweb SDK

### Crear aplicación <a href="#create-application" id="create-application"></a>

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](https://docs.celo.org/developer/thirdweb-sdk#interact-with-a-contract) <a href="#interact-with-a-contract" id="interact-with-a-contract"></a>

#### Inicializar SDK en [Celo](https://docs.celo.org/developer/thirdweb-sdk#initialize-sdk-on-celo) <a href="#initialize-sdk-on-celo" id="initialize-sdk-on-celo"></a>

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

#### Obtener [contrato](https://docs.celo.org/developer/thirdweb-sdk#get-contract) <a href="#get-contract" id="get-contract"></a>

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 <a href="#calling-contract-functions" id="calling-contract-functions"></a>

* 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.

  ```
  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 <a href="#connect-wallet" id="connect-wallet"></a>

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 <a href="#deploy-application" id="deploy-application"></a>

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](https://support.thirdweb.com/) .


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://andino.gitbook.io/andino-recursos/celo/construir-en-celo/herramientas-para-desarrolladores/celo-librerias-and-sdks/thirdweb-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.