Skip to content

Commit 329978c

Browse files
chore(i18n): update translations [en]
Sync file structure, format locales. Branch: 223/merge
1 parent fed7261 commit 329978c

9 files changed

Lines changed: 689 additions & 13 deletions

File tree

es/sdk/overview.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ Sequence ofrece múltiples SDKs para ayudar a integrar funcionalidad blockchain
8585
</div>
8686

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

9090
<div className="mt-1 font-normal text-sm leading-6 text-gray-600 dark:text-gray-400">
9191
<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>
@@ -101,7 +101,7 @@ Sequence ofrece múltiples SDKs para ayudar a integrar funcionalidad blockchain
101101
</div>
102102

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

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

151-
## Support
151+
## Soporte
152152
¿Necesita ayuda para elegir o implementar un SDK? Únase a nuestra [comunidad en Discord](https://discord.com/invite/YnGKP7d3vS) para soporte y discusiones.
Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
title: Autentique usuarios con firma de mensaje
3+
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.
4+
---
5+
6+
## Solicite la dirección de la wallet
7+
Para obtener la dirección de la wallet Sequence del usuario:
8+
9+
```ts
10+
const wallet = sequence.getWallet()
11+
const address = wallet.getAddress()
12+
console.log(address)
13+
```
14+
15+
## Autentique la wallet
16+
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.
17+
18+
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.
19+
20+
```ts
21+
import { sequence } from '0xsequence'
22+
23+
const wallet = sequence.getWallet()
24+
25+
const connectDetails = await wallet.connect({
26+
app: 'Your Dapp name',
27+
authorize: true // <---<<< this will automatically sign+verify a EIP712 message when user clicks "Connect"
28+
})
29+
```
30+
31+
Así se verá para sus usuarios:
32+
33+
<Frame caption="Sequence on-demand sign in, connect">
34+
<img src="/images/authorize_connect.png" />
35+
</Frame>
36+
37+
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.
38+
39+
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).
40+
41+
<Note>
42+
EIP712 le permite usar un objeto real para firmar en lugar de solo una cadena de texto plano.
43+
</Note>
44+
45+
## Autentique la wallet del lado del servidor
46+
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:
47+
48+
```ts
49+
import { ValidateSequenceWalletProof } from '@0xsequence/auth'
50+
import { commons, v2 } from '@0xsequence/core'
51+
import { ETHAuth } from '@0xsequence/ethauth'
52+
import { trackers } from '@0xsequence/sessions'
53+
import * as ethers from 'ethers'
54+
55+
// ...
56+
57+
const rpcUrl = 'https://polygon-mainnet.infura.io/v3/<your infura key here>'
58+
const provider = new ethers.providers.JsonRpcProvider(rpcUrl)
59+
60+
// create an EIP-6492-aware ETHAuth proof validator
61+
const validator = ValidateSequenceWalletProof(
62+
() => new commons.reader.OnChainReader(provider),
63+
new trackers.remote.RemoteConfigTracker('https://sessions.sequence.app'),
64+
v2.DeployedWalletContext
65+
)
66+
const ethauth = new ETHAuth(validator)
67+
await ethauth.configJsonRpcProvider(rpcUrl)
68+
69+
try {
70+
const proof = await ethAuth.decodeProof(connectDetails.proof.proofString)
71+
console.log(`proof for address ${proof.address} is valid`)
72+
} catch (err) {
73+
console.log(`invalid proof -- do not trust address: ${err}`)
74+
}
75+
```
76+
77+
Consulte el [SDK de Go para Sequence](https://github.com/0xsequence/go-sequence) para usar Sequence en sus aplicaciones Go.
78+
79+
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).
80+
81+
Como siempre, si tiene preguntas o necesita ayuda, contáctenos en [Discord](https://discord.com/invite/YnGKP7d3vS).
Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
---
2+
title: Primeros pasos con Marketplace SDK
3+
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.
4+
sidebarTitle: Primeros pasos
5+
---
6+
7+
# Primeros pasos
8+
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.
9+
10+
<Steps>
11+
<Step title="Cree un proyecto en Sequence Builder">
12+
Antes de comenzar a programar, debe configurar su proyecto:
13+
14+
1. Vaya a [Sequence Builder](https://sequence.build)
15+
2. Cree un nuevo proyecto
16+
3. Siga nuestra [Guía de White-label Marketplace](https://docs.sequence.xyz/solutions/payments/marketplace/overview)
17+
4. Anote su Project ID y API Access Key
18+
</Step>
19+
20+
<Step title="Cree un nuevo proyecto React">
21+
Para esta guía usaremos Vite con React y TypeScript. Puede usar cualquier gestor de paquetes, pero en los ejemplos utilizaremos pnpm:
22+
23+
```bash
24+
# Create a new project
25+
pnpm create vite@latest my-marketplace-app -- --template react-ts
26+
27+
# Navigate to the project directory
28+
cd my-marketplace-app
29+
30+
# Install dependencies
31+
pnpm install
32+
```
33+
</Step>
34+
35+
<Step title="Instale las dependencias requeridas">
36+
Instale el Marketplace SDK y sus dependencias peer:
37+
38+
```bash
39+
pnpm add @0xsequence/marketplace-sdk @0xsequence/connect wagmi viem @tanstack/react-query
40+
```
41+
</Step>
42+
43+
<Step title="Crear configuración del SDK">
44+
Cree un nuevo archivo `src/config/sdk.ts` para guardar la configuración del SDK:
45+
46+
```tsx
47+
import type { SdkConfig } from "@0xsequence/marketplace-sdk";
48+
49+
export const sdkConfig = {
50+
projectId: "YOUR_PROJECT_ID",
51+
projectAccessKey: "YOUR_PROJECT_ACCESS_KEY",
52+
} satisfies SdkConfig;
53+
```
54+
55+
<Check>
56+
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).
57+
</Check>
58+
</Step>
59+
60+
<Step title="Configure los Providers">
61+
Cree un nuevo archivo `src/providers.tsx` para configurar los providers necesarios:
62+
63+
```tsx
64+
import {
65+
MarketplaceProvider,
66+
MarketplaceQueryClientProvider,
67+
ModalProvider,
68+
createWagmiConfig,
69+
getQueryClient,
70+
marketplaceConfigOptions,
71+
} from "@0xsequence/marketplace-sdk/react";
72+
import { useQuery } from "@tanstack/react-query";
73+
import { WagmiProvider } from "wagmi";
74+
import {
75+
SequenceConnectProvider,
76+
type ConnectConfig,
77+
} from "@0xsequence/connect";
78+
import { sdkConfig } from "./config/sdk";
79+
80+
interface ProvidersProps {
81+
children: React.ReactNode;
82+
}
83+
84+
export default function Providers({ children }: ProvidersProps) {
85+
const queryClient = getQueryClient();
86+
const { data: marketplaceConfig, isLoading } = useQuery(
87+
marketplaceConfigOptions(sdkConfig),
88+
queryClient
89+
);
90+
91+
if (isLoading) {
92+
return <div>Loading configuration...</div>;
93+
}
94+
95+
if (!marketplaceConfig) {
96+
return <div>Failed to load marketplace configuration</div>;
97+
}
98+
99+
const connectConfig: ConnectConfig = {
100+
projectAccessKey: sdkConfig.projectAccessKey,
101+
signIn: {
102+
projectName: marketplaceConfig.settings.title,
103+
},
104+
};
105+
106+
const wagmiConfig = createWagmiConfig(marketplaceConfig, sdkConfig);
107+
108+
return (
109+
<WagmiProvider config={wagmiConfig}>
110+
<MarketplaceQueryClientProvider>
111+
<SequenceConnectProvider config={connectConfig}>
112+
<MarketplaceProvider config={sdkConfig}>
113+
{children}
114+
<ModalProvider />
115+
</MarketplaceProvider>
116+
</SequenceConnectProvider>
117+
</MarketplaceQueryClientProvider>
118+
</WagmiProvider>
119+
);
120+
}
121+
```
122+
</Step>
123+
124+
<Step title="Actualice el punto de entrada principal">
125+
Actualice su `main.tsx` para usar el componente Providers:
126+
127+
```tsx
128+
import React from 'react'
129+
import ReactDOM from 'react-dom/client'
130+
import App from './App'
131+
import Providers from './providers'
132+
import './index.css'
133+
134+
ReactDOM.createRoot(document.getElementById('root')!).render(
135+
<React.StrictMode>
136+
<Providers>
137+
<App />
138+
</Providers>
139+
</React.StrictMode>
140+
)
141+
```
142+
</Step>
143+
144+
<Step title="Crear componente de tarjeta de coleccionable">
145+
Cree un nuevo componente `src/components/CollectibleCard.tsx` para mostrar e interactuar con coleccionables:
146+
147+
```tsx
148+
import {
149+
useCollectible,
150+
useMakeOfferModal,
151+
useMarketplaceConfig,
152+
useOpenConnectModal,
153+
} from "@0xsequence/marketplace-sdk/react";
154+
import type { Address } from "viem";
155+
import { useAccount } from "wagmi";
156+
157+
export default function CollectibleCard() {
158+
const { data: marketplaceConfig, isLoading: isMarketplaceConfigLoading } = useMarketplaceConfig();
159+
const { isConnected } = useAccount()
160+
const { openConnectModal } = useOpenConnectModal()
161+
162+
const collection = marketplaceConfig?.market.collections[0];
163+
const chainId = collection?.chainId as number;
164+
const collectionAddress = collection?.itemsAddress as Address;
165+
const collectibleId = "0";
166+
167+
const { data: collectible, isLoading: isCollectibleLoading, error: collectibleError } = useCollectible({
168+
chainId,
169+
collectionAddress,
170+
collectibleId,
171+
});
172+
173+
const { show } = useMakeOfferModal();
174+
175+
if (isMarketplaceConfigLoading || isCollectibleLoading) return <div>Loading...</div>;
176+
if (collectibleError) return <div>Error: {collectibleError.message}</div>;
177+
if (!collectible) return <div>No collectible found</div>;
178+
179+
return (
180+
<div>
181+
<img width={200} height={200} src={collectible.image} alt={collectible.name} />
182+
<h3>{collectible.name}</h3>
183+
{isConnected ? (
184+
<button
185+
onClick={() => {
186+
show({
187+
chainId,
188+
collectionAddress,
189+
collectibleId,
190+
});
191+
}}
192+
>
193+
Make Offer
194+
</button>
195+
) : (
196+
<button onClick={() => openConnectModal()}>Connect Wallet</button>
197+
)}
198+
</div>
199+
);
200+
}
201+
```
202+
203+
<Note>
204+
Asegúrese de haber minteado al menos un coleccionable en su colección, luego use el ID de ese coleccionable como `collectibleId`
205+
</Note>
206+
207+
<Tip>
208+
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).
209+
</Tip>
210+
</Step>
211+
212+
<Step title="Actualice el componente App">
213+
Actualice su `App.tsx` para usar los nuevos componentes:
214+
215+
```tsx
216+
import NFTCard from "./nft-card";
217+
218+
export default function App() {
219+
return (
220+
<NFTCard />
221+
);
222+
}
223+
```
224+
</Step>
225+
226+
<Step title="Ejecute su aplicación">
227+
Inicie su servidor de desarrollo:
228+
229+
```bash
230+
pnpm run dev
231+
```
232+
233+
Su aplicación de marketplace estará corriendo en `http://localhost:5173`. Ahora puede:
234+
235+
1. Conectar su wallet usando el botón de conexión
236+
2. Ver detalles del coleccionable
237+
3. Hacer ofertas por el coleccionable usando el botón Hacer oferta
238+
</Step>
239+
</Steps>
240+
241+
## Próximos pasos
242+
Ahora que tiene lo básico funcionando, puede:
243+
- Crear publicaciones de coleccionables
244+
- Gestionar órdenes
245+
- Personalizar la interfaz de usuario
246+
- Consulte nuestras otras guías para más funciones
247+
248+
¿Necesita ayuda? Únase a nuestra [comunidad en Discord](https://discord.com/invite/YnGKP7d3vS).

0 commit comments

Comments
 (0)