# 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](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](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](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](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/) .
