Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"socials": {
"x": "https://twitter.com/0xsequence",
"github": "https://github.com/0xsequence",
"discord": "https://discord.gg/sequence"
"discord": "https://discord.com/invite/YnGKP7d3vS"
}
},
"logo": {
Expand Down
8 changes: 4 additions & 4 deletions es/sdk/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ Sequence ofrece múltiples SDKs para ayudar a integrar funcionalidad blockchain
</div>

<div>
<h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Go</h2>
<h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Ir</h2>

<div className="mt-1 font-normal text-sm leading-6 text-gray-600 dark:text-gray-400">
<p>SDK completo para backends en Go/Golang, utilizado en la propia infraestructura de Sequence. Incluye gestión de wallet, manejo de transacciones e interacción con Ethereum.</p>
Expand All @@ -101,7 +101,7 @@ Sequence ofrece múltiples SDKs para ayudar a integrar funcionalidad blockchain
</div>

<div>
<h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Mobile</h2>
<h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Móvil</h2>

<div className="mt-1 font-normal text-sm leading-6 text-gray-600 dark:text-gray-400">
<p>SDK para React Native que permite crear aplicaciones móviles con integración completa de Sequence Embedded Wallet e Indexer.</p>
Expand Down Expand Up @@ -148,5 +148,5 @@ Para desarrollo de juegos:
Para servicios backend, consulte el [Go SDK](/sdk/go/overview).
Para aplicaciones móviles, explore el [React Native SDK](/sdk/mobile)

## Support
¿Necesita ayuda para elegir o implementar un SDK? Únase a nuestra [comunidad en Discord](https://discord.gg/sequence) para soporte y discusiones.
## Soporte
¿Necesita ayuda para elegir o implementar un SDK? Únase a nuestra [comunidad en Discord](https://discord.com/invite/YnGKP7d3vS) para soporte y discusiones.
81 changes: 81 additions & 0 deletions es/sdk/typescript/guides/frontend/auth-address.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
---
title: Autentique usuarios con firma de mensaje
description: Aprenda cómo autenticar usuarios con la dirección de su wallet usando Sequence. Permita fácilmente que los usuarios conecten su wallet y verifiquen su identidad firmando un mensaje.
---

## Solicite la dirección de la wallet
Para obtener la dirección de la wallet Sequence del usuario:

```ts
const wallet = sequence.getWallet()
const address = wallet.getAddress()
console.log(address)
```

## Autentique la wallet
En muchos casos, querrá que sus usuarios se conecten y luego verifiquen que realmente controlan esta dirección de wallet. Las aplicaciones suelen hacer esto pidiendo al usuario que firme un mensaje con su wallet y luego verificando la firma para asegurar su integridad.

Como este es un flujo de trabajo tan común, Sequence puede autenticar automáticamente la dirección de la cuenta al mismo tiempo que el usuario conecta su wallet a su aplicación. Esto permite que la experiencia del usuario sea más simple y fluida.

```ts
import { sequence } from '0xsequence'

const wallet = sequence.getWallet()

const connectDetails = await wallet.connect({
app: 'Your Dapp name',
authorize: true // <---<<< this will automatically sign+verify a EIP712 message when user clicks "Connect"
})
```

Así se verá para sus usuarios:

<Frame caption="Sequence on-demand sign in, connect">
<img src="/images/authorize_connect.png" />
</Frame>

En el ejemplo anterior, pasamos `authorize: true` a la función `connect()`, lo que hará que el usuario firme automáticamente un **mensaje firmado EIP712** para probar su identidad. Esto le permite autenticar fácilmente la dirección de wallet conectada con total certeza.

Puede encontrar la prueba del mensaje firmado en `connectDetails.proof`, que es un objeto firmado con EIP712 usando una convención simple de [ethauth](https://github.com/0xsequence/ethauth.js).

<Note>
EIP712 le permite usar un objeto real para firmar en lugar de solo una cadena de texto plano.
</Note>

## Autentique la wallet del lado del servidor
El ejemplo anterior muestra cómo conectar y verificar la identidad del usuario en su aplicación del lado del cliente, pero si desea autenticar la prueba de autorización de Sequence en su servidor, puede hacerlo con el siguiente fragmento:

```ts
import { ValidateSequenceWalletProof } from '@0xsequence/auth'
import { commons, v2 } from '@0xsequence/core'
import { ETHAuth } from '@0xsequence/ethauth'
import { trackers } from '@0xsequence/sessions'
import * as ethers from 'ethers'

// ...

const rpcUrl = 'https://polygon-mainnet.infura.io/v3/<your infura key here>'
const provider = new ethers.providers.JsonRpcProvider(rpcUrl)

// create an EIP-6492-aware ETHAuth proof validator
const validator = ValidateSequenceWalletProof(
() => new commons.reader.OnChainReader(provider),
new trackers.remote.RemoteConfigTracker('https://sessions.sequence.app'),
v2.DeployedWalletContext
)
const ethauth = new ETHAuth(validator)
await ethauth.configJsonRpcProvider(rpcUrl)

try {
const proof = await ethAuth.decodeProof(connectDetails.proof.proofString)
console.log(`proof for address ${proof.address} is valid`)
} catch (err) {
console.log(`invalid proof -- do not trust address: ${err}`)
}
```

Consulte el [SDK de Go para Sequence](https://github.com/0xsequence/go-sequence) para usar Sequence en sus aplicaciones Go.

Si su servidor está escrito en un lenguaje diferente a Javascript/Typescript o Go, solo necesita validar la firma con [EIP1271, el método estándar para validar mensajes firmados en una smart wallet](https://eips.ethereum.org/EIPS/eip-1271).

Como siempre, si tiene preguntas o necesita ayuda, contáctenos en [Discord](https://discord.com/invite/YnGKP7d3vS).
248 changes: 248 additions & 0 deletions es/sdk/web/marketplace-sdk/getting-started.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
---
title: Primeros pasos con Marketplace SDK
description: Aprenda cómo integrar Marketplace SDK en su aplicación con orientación sobre la instalación, configuración e implementación de la función de hacer ofertas.
sidebarTitle: Primeros pasos
---

# Primeros pasos
Vamos a crear una aplicación sencilla en React que permita mostrar e interactuar con coleccionables. Configuraremos la conexión de wallet y la funcionalidad básica para ver coleccionables.

<Steps>
<Step title="Cree un proyecto en Sequence Builder">
Antes de comenzar a programar, debe configurar su proyecto:

1. Vaya a [Sequence Builder](https://sequence.build)
2. Cree un nuevo proyecto
3. Siga nuestra [Guía de White-label Marketplace](https://docs.sequence.xyz/solutions/payments/marketplace/overview)
4. Anote su Project ID y API Access Key
</Step>

<Step title="Cree un nuevo proyecto React">
Para esta guía usaremos Vite con React y TypeScript. Puede usar cualquier gestor de paquetes, pero en los ejemplos utilizaremos pnpm:

```bash
# Create a new project
pnpm create vite@latest my-marketplace-app -- --template react-ts

# Navigate to the project directory
cd my-marketplace-app

# Install dependencies
pnpm install
```
</Step>

<Step title="Instale las dependencias requeridas">
Instale el Marketplace SDK y sus dependencias peer:

```bash
pnpm add @0xsequence/marketplace-sdk @0xsequence/connect wagmi viem @tanstack/react-query
```
</Step>

<Step title="Crear configuración del SDK">
Cree un nuevo archivo `src/config/sdk.ts` para guardar la configuración del SDK:

```tsx
import type { SdkConfig } from "@0xsequence/marketplace-sdk";

export const sdkConfig = {
projectId: "YOUR_PROJECT_ID",
projectAccessKey: "YOUR_PROJECT_ACCESS_KEY",
} satisfies SdkConfig;
```

<Check>
Asegúrese de reemplazar `YOUR_PROJECT_ID` y `YOUR_PROJECT_ACCESS_KEY` por las credenciales reales de su proyecto. Puede encontrar su Project ID en `https://sequence.build/project/{YOUR_PROJECT_ID}/overview` y su Project Access Key en `https://sequence.build/project/{YOUR_PROJECT_ID}/settings/apikeys` en el panel de [Sequence Builder](https://sequence.build).
</Check>
</Step>

<Step title="Configure los Providers">
Cree un nuevo archivo `src/providers.tsx` para configurar los providers necesarios:

```tsx
import {
MarketplaceProvider,
MarketplaceQueryClientProvider,
ModalProvider,
createWagmiConfig,
getQueryClient,
marketplaceConfigOptions,
} from "@0xsequence/marketplace-sdk/react";
import { useQuery } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import {
SequenceConnectProvider,
type ConnectConfig,
} from "@0xsequence/connect";
import { sdkConfig } from "./config/sdk";

interface ProvidersProps {
children: React.ReactNode;
}

export default function Providers({ children }: ProvidersProps) {
const queryClient = getQueryClient();
const { data: marketplaceConfig, isLoading } = useQuery(
marketplaceConfigOptions(sdkConfig),
queryClient
);

if (isLoading) {
return <div>Loading configuration...</div>;
}

if (!marketplaceConfig) {
return <div>Failed to load marketplace configuration</div>;
}

const connectConfig: ConnectConfig = {
projectAccessKey: sdkConfig.projectAccessKey,
signIn: {
projectName: marketplaceConfig.settings.title,
},
};

const wagmiConfig = createWagmiConfig(marketplaceConfig, sdkConfig);

return (
<WagmiProvider config={wagmiConfig}>
<MarketplaceQueryClientProvider>
<SequenceConnectProvider config={connectConfig}>
<MarketplaceProvider config={sdkConfig}>
{children}
<ModalProvider />
</MarketplaceProvider>
</SequenceConnectProvider>
</MarketplaceQueryClientProvider>
</WagmiProvider>
);
}
```
</Step>

<Step title="Actualice el punto de entrada principal">
Actualice su `main.tsx` para usar el componente Providers:

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import Providers from './providers'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Providers>
<App />
</Providers>
</React.StrictMode>
)
```
</Step>

<Step title="Crear componente de tarjeta de coleccionable">
Cree un nuevo componente `src/components/CollectibleCard.tsx` para mostrar e interactuar con coleccionables:

```tsx
import {
useCollectible,
useMakeOfferModal,
useMarketplaceConfig,
useOpenConnectModal,
} from "@0xsequence/marketplace-sdk/react";
import type { Address } from "viem";
import { useAccount } from "wagmi";

export default function CollectibleCard() {
const { data: marketplaceConfig, isLoading: isMarketplaceConfigLoading } = useMarketplaceConfig();
const { isConnected } = useAccount()
const { openConnectModal } = useOpenConnectModal()

const collection = marketplaceConfig?.market.collections[0];
const chainId = collection?.chainId as number;
const collectionAddress = collection?.itemsAddress as Address;
const collectibleId = "0";

const { data: collectible, isLoading: isCollectibleLoading, error: collectibleError } = useCollectible({
chainId,
collectionAddress,
collectibleId,
});

const { show } = useMakeOfferModal();

if (isMarketplaceConfigLoading || isCollectibleLoading) return <div>Loading...</div>;
if (collectibleError) return <div>Error: {collectibleError.message}</div>;
if (!collectible) return <div>No collectible found</div>;

return (
<div>
<img width={200} height={200} src={collectible.image} alt={collectible.name} />
<h3>{collectible.name}</h3>
{isConnected ? (
<button
onClick={() => {
show({
chainId,
collectionAddress,
collectibleId,
});
}}
>
Make Offer
</button>
) : (
<button onClick={() => openConnectModal()}>Connect Wallet</button>
)}
</div>
);
}
```

<Note>
Asegúrese de haber minteado al menos un coleccionable en su colección, luego use el ID de ese coleccionable como `collectibleId`
</Note>

<Tip>
Aunque se recomienda Sequence Connect para la mejor experiencia, puede usar otros proveedores de wallet con el Marketplace SDK. Para conectores de wallet personalizados, consulte nuestra guía sobre [conectores personalizados](/sdk/web/wallet-sdk/embedded/custom-connectors).
</Tip>
</Step>

<Step title="Actualice el componente App">
Actualice su `App.tsx` para usar los nuevos componentes:

```tsx
import NFTCard from "./nft-card";

export default function App() {
return (
<NFTCard />
);
}
```
</Step>

<Step title="Ejecute su aplicación">
Inicie su servidor de desarrollo:

```bash
pnpm run dev
```

Su aplicación de marketplace estará corriendo en `http://localhost:5173`. Ahora puede:

1. Conectar su wallet usando el botón de conexión
2. Ver detalles del coleccionable
3. Hacer ofertas por el coleccionable usando el botón Hacer oferta
</Step>
</Steps>

## Próximos pasos
Ahora que tiene lo básico funcionando, puede:
- Crear publicaciones de coleccionables
- Gestionar órdenes
- Personalizar la interfaz de usuario
- Consulte nuestras otras guías para más funciones

¿Necesita ayuda? Únase a nuestra [comunidad en Discord](https://discord.com/invite/YnGKP7d3vS).
Loading