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