diff --git a/docs.json b/docs.json index 62dc52bca..213c5a2c6 100644 --- a/docs.json +++ b/docs.json @@ -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": { diff --git a/es/sdk/overview.mdx b/es/sdk/overview.mdx index 3fc8df0e4..25939dde2 100644 --- a/es/sdk/overview.mdx +++ b/es/sdk/overview.mdx @@ -85,7 +85,7 @@ Sequence ofrece múltiples SDKs para ayudar a integrar funcionalidad blockchain
-

Go

+

Ir

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.

@@ -101,7 +101,7 @@ Sequence ofrece múltiples SDKs para ayudar a integrar funcionalidad blockchain
-

Mobile

+

Móvil

SDK para React Native que permite crear aplicaciones móviles con integración completa de Sequence Embedded Wallet e Indexer.

@@ -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. \ No newline at end of file +## Soporte +¿Necesita ayuda para elegir o implementar un SDK? Únase a nuestra [comunidad en Discord](https://discord.com/invite/YnGKP7d3vS) para soporte y discusiones. \ No newline at end of file diff --git a/es/sdk/typescript/guides/frontend/auth-address.mdx b/es/sdk/typescript/guides/frontend/auth-address.mdx new file mode 100644 index 000000000..ae38c8ca1 --- /dev/null +++ b/es/sdk/typescript/guides/frontend/auth-address.mdx @@ -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: + + + + + +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). + + + EIP712 le permite usar un objeto real para firmar en lugar de solo una cadena de texto plano. + + +## 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/' +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). \ No newline at end of file diff --git a/es/sdk/web/marketplace-sdk/getting-started.mdx b/es/sdk/web/marketplace-sdk/getting-started.mdx new file mode 100644 index 000000000..5e0791169 --- /dev/null +++ b/es/sdk/web/marketplace-sdk/getting-started.mdx @@ -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. + + + + 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 + + + + 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 + ``` + + + + Instale el Marketplace SDK y sus dependencias peer: + + ```bash + pnpm add @0xsequence/marketplace-sdk @0xsequence/connect wagmi viem @tanstack/react-query + ``` + + + + 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; + ``` + + + 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). + + + + + 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
Loading configuration...
; + } + + if (!marketplaceConfig) { + return
Failed to load marketplace configuration
; + } + + const connectConfig: ConnectConfig = { + projectAccessKey: sdkConfig.projectAccessKey, + signIn: { + projectName: marketplaceConfig.settings.title, + }, + }; + + const wagmiConfig = createWagmiConfig(marketplaceConfig, sdkConfig); + + return ( + + + + + {children} + + + + + + ); + } + ``` + + + + 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( + + + + + + ) + ``` + + + + 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
Loading...
; + if (collectibleError) return
Error: {collectibleError.message}
; + if (!collectible) return
No collectible found
; + + return ( +
+ {collectible.name} +

{collectible.name}

+ {isConnected ? ( + + ) : ( + + )} +
+ ); + } + ``` + + + Asegúrese de haber minteado al menos un coleccionable en su colección, luego use el ID de ese coleccionable como `collectibleId` + + + + 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). + + + + + Actualice su `App.tsx` para usar los nuevos componentes: + + ```tsx + import NFTCard from "./nft-card"; + + export default function App() { + return ( + + ); + } + ``` + + + + 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 + + + +## 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). \ No newline at end of file diff --git a/es/solutions/overview.mdx b/es/solutions/overview.mdx new file mode 100644 index 000000000..5cb275424 --- /dev/null +++ b/es/solutions/overview.mdx @@ -0,0 +1,95 @@ +--- +title: Bienvenido a Sequence +description: La pila web3 modular y de código abierto para aplicaciones onchain +sidebarTitle: Bienvenido a Sequence +--- + +[Sequence](https://sequence.xyz/) es una plataforma modular para desarrolladores web3 y una pila de infraestructura que le brinda los componentes necesarios para lanzar aplicaciones onchain rápidamente. Aproveche nuestras **Wallets**, **Real-Time Indexer** y **Payment solutions**, e intégralos fácilmente en su stack actual. Comience creando su proyecto en **[Sequence Builder](https://sequence.build/)** y desarrolle con su framework preferido: [React](/sdk/web/overview), [React Native](/sdk/mobile), [Unity](/sdk/unity/overview) o [Unreal](/sdk/unreal/overview). + +## Comience aquí + + + + Configure su proyecto en Sequence Builder, obtenga sus claves API y active los bloques fundamentales (Wallets, Indexador, Pagos) para su aplicación. + + + + Pruebe la demo en el navegador de nuestro Ecosystem Wallet con Web SDK: interfaz personalizable, flujos adaptables a la marca y autenticación lista para producción. + + + + Agregue una experiencia de wallet no custodial, sin ventanas emergentes, con inicio de sesión con redes sociales o correo electrónico. + + + + Consulte balances, transferencias y eventos de contratos en cadenas EVM con APIs de baja latencia. + + + + Integre pagos cross-chain en un clic con cualquier wallet usando nuestro Trails SDK, o lance tiendas de ventas primarias alojadas con checkout integrado. + + + + Obtenga ayuda, comparta comentarios y converse con otros desarrolladores. + + + +## SDKs + + + + Conecte wallets de ecosistema o externos a cualquier app en React o Next.js. + + + + Lance experiencias nativas de wallet móvil con Expo y React Native. + + + + Agregue funciones onchain a apps y juegos interactivos usando Unity. + + + } href="/sdk/unreal/overview"> + Cree experiencias de juego web3 de alta fidelidad con Unreal. + + + +## Comercio y Pagos + + + + Pagos cross-chain en un clic, listos para usar con cualquier wallet, para flujos de fondeo, swap, ganancias y pagos. + + + + Lance rápidamente un marketplace de coleccionables con su marca e integración de checkout. + + + + Cree flujos de comercio personalizados con APIs para listados, ofertas y liquidaciones dentro de su propia aplicación. + + + + Lance una tienda de ventas primarias alojada con checkout integrado. + + + +## Cree, lance y opere + + + + Backend dockerizado para lecturas/escrituras blockchain simplificadas con gestión segura de claves. + + + + Implemente rápidamente contratos de coleccionables, ventas y paquetes usando plantillas auditadas. + + + + Observa la actividad de wallets, contratos y marketplaces para entender crecimiento, retención e ingresos. + + + + Consulte balances, transferencias y eventos de contratos en cadenas EVM con APIs de baja latencia. + + \ No newline at end of file diff --git a/es/support/discord.mdx b/es/support/discord.mdx new file mode 100644 index 000000000..92878cd36 --- /dev/null +++ b/es/support/discord.mdx @@ -0,0 +1,4 @@ +--- +title: Discord +url: https://discord.com/invite/YnGKP7d3vS +--- \ No newline at end of file diff --git a/ja/docs.json b/ja/docs.json index 0c3a0fa5e..3526ea98e 100644 --- a/ja/docs.json +++ b/ja/docs.json @@ -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": { diff --git a/ja/sdk/marketplace-sdk/getting-started.mdx b/ja/sdk/marketplace-sdk/getting-started.mdx index 649bfe319..4c92d94f6 100644 --- a/ja/sdk/marketplace-sdk/getting-started.mdx +++ b/ja/sdk/marketplace-sdk/getting-started.mdx @@ -245,4 +245,4 @@ sidebarTitle: はじめに - UI のカスタマイズ - さらに多くの機能については他のガイドもご覧ください。 -サポートが必要ですか？[Discord コミュニティ](https://discord.gg/sequence) にご参加ください。 \ No newline at end of file +サポートが必要ですか？[Discord コミュニティ](https://discord.com/invite/YnGKP7d3vS) にご参加ください。 \ No newline at end of file diff --git a/ja/sdk/overview.mdx b/ja/sdk/overview.mdx index ee4af133a..b566267bf 100644 --- a/ja/sdk/overview.mdx +++ b/ja/sdk/overview.mdx @@ -149,4 +149,4 @@ Sequenceは、さまざまなプラットフォームや言語でアプリケー モバイルアプリには[React Native SDK](/sdk/mobile)もご活用いただけます。 ## サポート -SDKの選定や実装でお困りの場合は、[Discordコミュニティ](https://discord.gg/sequence)にご参加いただき、サポートや情報交換をご利用ください。 \ No newline at end of file +SDKの選択や実装でお困りですか？サポートやディスカッションのため、[Discordコミュニティ](https://discord.com/invite/YnGKP7d3vS)にご参加ください。 \ No newline at end of file diff --git a/ja/sdk/typescript/guides/frontend/auth-address.mdx b/ja/sdk/typescript/guides/frontend/auth-address.mdx index 32f5af8e7..2c85170e6 100644 --- a/ja/sdk/typescript/guides/frontend/auth-address.mdx +++ b/ja/sdk/typescript/guides/frontend/auth-address.mdx @@ -13,9 +13,9 @@ console.log(address) ``` ## ウォレット認証 -多くの場合、ユーザーにウォレットを接続してもらい、そのアドレスを本当に管理しているか確認したい場面があります。アプリケーションでは、ユーザーにウォレットでメッセージに署名してもらい、その署名を検証することで本人確認を行うのが一般的です。 +多くの場合、ユーザーに接続してもらった後、そのウォレットアドレスを本当に管理しているかを確認したいことがあります。アプリケーションでは通常、ユーザーにウォレットでメッセージへ署名してもらい、その署名を検証することで本人確認を行います。 -このようなワークフローは非常に一般的なため、Sequenceではウォレット接続時にアカウントアドレスの認証も自動で行えます。これにより、ユーザー体験がよりシンプルかつスムーズになります。 +このような一般的なワークフローのため、Sequenceではユーザーがアプリにウォレットを接続する際に、アカウントアドレスの認証も自動で行うことができます。これにより、ユーザー体験がよりシンプルでスムーズになります。 ```ts import { sequence } from '0xsequence' @@ -34,16 +34,16 @@ const connectDetails = await wallet.connect({ -上記の例では、`connect()`関数に`authorize: true`を渡しています。これにより、ユーザーは自分の身元を証明するために**EIP712署名メッセージ**にサインします。これによって、接続されたウォレットアドレスを確実に認証することができます。 +上記の例では、`connect()`関数に`authorize: true`を渡すことで、ユーザーに**EIP712署名メッセージ**で本人確認をしてもらいます。これにより、接続されたウォレットアドレスを確実に認証できます。 -署名済みメッセージの証明は`connectDetails.proof`で取得できます。これは[ethauth](https://github.com/0xsequence/ethauth.js)のシンプルな規約を使ったEIP712署名オブジェクトです。 +署名済みメッセージの証明は`connectDetails.proof`に返されます。これは[ethauth](https://github.com/0xsequence/ethauth.js)のシンプルな規約を使ったEIP712署名オブジェクトです。 EIP712では、単なるプレーンテキストの文字列ではなく、実際のオブジェクトを使って署名することができます。 ## ウォレットのサーバーサイド認証 -上記の例は、クライアント側でユーザーの本人確認を行う方法を示していますが、サーバー側でSequenceの認証証明を検証したい場合は、以下のスニペットで実現できます。 +上記の例は、クライアント側でユーザーの接続と本人確認を行う方法を示していますが、サーバー側でSequenceの認証証明を検証したい場合は、以下のスニペットを利用できます。 ```ts import { ValidateSequenceWalletProof } from '@0xsequence/auth' @@ -76,6 +76,6 @@ try { GoアプリケーションでSequenceを利用する方法については、[Go Sequence SDK](https://github.com/0xsequence/go-sequence)をご覧ください。 -サーバーがJavascript/TypescriptやGo以外の言語で書かれている場合でも、[EIP1271（スマートウォレットの署名メッセージ検証標準）](https://eips.ethereum.org/EIPS/eip-1271)で署名を検証するだけです。 +サーバーがJavascript/TypescriptやGo以外の言語で書かれている場合でも、[EIP1271（スマートウォレットの署名メッセージ検証標準）](https://eips.ethereum.org/EIPS/eip-1271)を使って署名を検証するだけで対応できます。 -ご質問やサポートが必要な場合は、いつでも[Discord](https://discord.gg/sequence)でご連絡ください。 \ No newline at end of file +ご質問やサポートが必要な場合は、いつでも[Discord](https://discord.com/invite/YnGKP7d3vS)でご連絡ください。 \ No newline at end of file diff --git a/ja/sdk/web/marketplace-sdk/getting-started.mdx b/ja/sdk/web/marketplace-sdk/getting-started.mdx new file mode 100644 index 000000000..cecaa124f --- /dev/null +++ b/ja/sdk/web/marketplace-sdk/getting-started.mdx @@ -0,0 +1,248 @@ +--- +title: Marketplace SDK のはじめ方 +description: Marketplace SDK をアプリケーションに統合する方法について、インストールや設定、オファー作成機能の実装手順を解説します。 +sidebarTitle: はじめに +--- + +# はじめに +コレクティブルを表示・操作できるシンプルなReactアプリケーションを作成します。ウォレット接続と基本的なコレクティブル閲覧機能を設定しましょう。 + + + + コーディングを始める前に、プロジェクトのセットアップが必要です。 + + 1. [Sequence Builder](https://sequence.build) にアクセスします。 + 2. 新しいプロジェクトを作成します。 + 3. ホワイトラベルマーケットプレイスガイドは[こちら](https://docs.sequence.xyz/solutions/payments/marketplace/overview)をご覧ください。 + 4. プロジェクト ID と API アクセスキーをメモしておきましょう。 + + + + このガイドでは Vite、React、TypeScript を使用します。パッケージマネージャーは何でも構いませんが、例では 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 + ``` + + + + Marketplace SDK とそのピア依存パッケージをインストールします。 + + ```bash + pnpm add @0xsequence/marketplace-sdk @0xsequence/connect wagmi viem @tanstack/react-query + ``` + + + + 新しいファイル `src/config/sdk.ts` を作成し、SDKの設定を保存します。 + + ```tsx + import type { SdkConfig } from "@0xsequence/marketplace-sdk"; + + export const sdkConfig = { + projectId: "YOUR_PROJECT_ID", + projectAccessKey: "YOUR_PROJECT_ACCESS_KEY", + } satisfies SdkConfig; + ``` + + + `YOUR_PROJECT_ID` と `YOUR_PROJECT_ACCESS_KEY` を実際のプロジェクト情報に置き換えてください。Project ID は `https://sequence.build/project/{YOUR_PROJECT_ID}/overview`、Project Access Key は `https://sequence.build/project/{YOUR_PROJECT_ID}/settings/apikeys` で [Sequence Builder](https://sequence.build) ダッシュボードから確認できます。 + + + + + 必要なプロバイダーを設定するために、新しいファイル `src/providers.tsx` を作成します。 + + ```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
Loading configuration...
; + } + + if (!marketplaceConfig) { + return
Failed to load marketplace configuration
; + } + + const connectConfig: ConnectConfig = { + projectAccessKey: sdkConfig.projectAccessKey, + signIn: { + projectName: marketplaceConfig.settings.title, + }, + }; + + const wagmiConfig = createWagmiConfig(marketplaceConfig, sdkConfig); + + return ( + + + + + {children} + + + + + + ); + } + ``` + + + + `main.tsx` を更新して 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( + + + + + + ) + ``` + + + + コレクティブルを表示・操作するための新しいコンポーネント `src/components/CollectibleCard.tsx` を作成します。 + + ```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
Loading...
; + if (collectibleError) return
Error: {collectibleError.message}
; + if (!collectible) return
No collectible found
; + + return ( +
+ {collectible.name} +

{collectible.name}

+ {isConnected ? ( + + ) : ( + + )} +
+ ); + } + ``` + + + コレクション内で少なくとも 1 つコレクティブルをミントし、そのコレクティブルの ID を `collectibleId` として使用してください。 + + + + 最適な体験にはSequence Connectを推奨しますが、Marketplace SDKでは他のウォレットプロバイダーも利用可能です。カスタムウォレットコネクタについては、[カスタムコネクタのガイド](/sdk/web/wallet-sdk/embedded/custom-connectors)をご覧ください。 + + + + + `App.tsx` を更新して新しいコンポーネントを利用します。 + + ```tsx + import NFTCard from "./nft-card"; + + export default function App() { + return ( + + ); + } + ``` + + + + 開発サーバーを起動します。 + + ```bash + pnpm run dev + ``` + + マーケットプレイスアプリケーションが `http://localhost:5173` で動作します。次のことができます： + + 1. Connect ボタンでウォレットを接続 + 2. コレクティブルの詳細を表示する + 3. 「オファーする」ボタンを使ってコレクティブルにオファーを出す + + + +## 次のステップ +基本的な機能が動作したら、次のことにも挑戦できます： +- コレクティブルのリスティングを作成する +- 注文の管理 +- UI のカスタマイズ +- さらに多くの機能については他のガイドもご覧ください。 + +お困りの際は、[Discordコミュニティ](https://discord.com/invite/YnGKP7d3vS)にご参加ください。 \ No newline at end of file diff --git a/ja/solutions/overview.mdx b/ja/solutions/overview.mdx index f48b54cb8..c75eea740 100644 --- a/ja/solutions/overview.mdx +++ b/ja/solutions/overview.mdx @@ -4,7 +4,7 @@ description: オンチェーンアプリのためのオープンソースかつ sidebarTitle: Sequenceにようこそ --- -[Sequence](https://sequence.xyz/)は、オンチェーンアプリを迅速に構築できるモジュラー型のweb3開発者プラットフォームおよびインフラスタックです。**ウォレット**、**リアルタイムインデクサ**、**決済ソリューション**を活用し、既存のスタックに組み込めます。まずは\*\*[Sequence Builder](https://sequence.build/)\*\*でプロジェクトを作成し、お好みのフレームワークで開発を始めましょう：[React](/sdk/web/overview)、[React Native](/sdk/mobile)、[Unity](/sdk/unity/overview)、[Unreal](/sdk/unreal/overview)。 +[Sequence](https://sequence.xyz/) は、モジュール型のWeb3開発者向けプラットフォームおよびインフラスタックであり、オンチェーンアプリを迅速に構築するための基盤を提供します。**ウォレット**、**リアルタイムインデクサ**、**決済ソリューション**を活用し、既存のスタックに組み込むことができます。まずは\*\*[Sequence Builder](https://sequence.build/)\*\*でプロジェクトを作成し、お好みのフレームワークで開発を始めましょう：[React](/sdk/web/overview)、[React Native](/sdk/mobile)、[Unity](/sdk/unity/overview)、[Unreal](/sdk/unreal/overview) に対応しています。 ## はじめに @@ -13,7 +13,7 @@ sidebarTitle: Sequenceにようこそ Sequence Builderでプロジェクトをセットアップし、APIキーを取得して、アプリに必要なコア機能（ウォレット、インデクサ、決済）を有効化しましょう。 - + Web SDKを使ったエコシステムウォレットのブラウザデモをお試しください：カスタマイズ可能なUI、ブランド対応のフロー、すぐに使える認証機能を備えています。 @@ -29,7 +29,7 @@ sidebarTitle: Sequenceにようこそ Trails SDKを使ってどのウォレットでもワンクリックのクロスチェーン決済を統合したり、チェックアウト機能付きのホスト型一次販売ストアフロントを立ち上げたりできます。 - + サポートが必要な場合やフィードバックの共有、他の開発者との交流はこちらから。 @@ -85,7 +85,7 @@ sidebarTitle: Sequenceにようこそ 監査済みテンプレートを使って、コレクティブル、販売、パックのコントラクトを迅速にデプロイできます。 - + ウォレット、コントラクト、マーケットプレイスのアクティビティを観測し、成長・定着・収益を把握。 diff --git a/ja/support/discord.mdx b/ja/support/discord.mdx index be3ac7276..92878cd36 100644 --- a/ja/support/discord.mdx +++ b/ja/support/discord.mdx @@ -1,4 +1,4 @@ --- title: Discord -url: https://discord.gg/sequence +url: https://discord.com/invite/YnGKP7d3vS --- \ No newline at end of file diff --git a/sdk/overview.mdx b/sdk/overview.mdx index ffa4c0679..a4e4e0fe4 100644 --- a/sdk/overview.mdx +++ b/sdk/overview.mdx @@ -138,5 +138,5 @@ For mobile apps, explore the [React Native SDK](/sdk/mobile) ## Support -Need help choosing or implementing an SDK? Join our [Discord community](https://discord.gg/sequence) for support and discussions. +Need help choosing or implementing an SDK? Join our [Discord community](https://discord.com/invite/YnGKP7d3vS) for support and discussions. diff --git a/sdk/typescript/guides/frontend/auth-address.mdx b/sdk/typescript/guides/frontend/auth-address.mdx index aa2305f2c..66229f90a 100644 --- a/sdk/typescript/guides/frontend/auth-address.mdx +++ b/sdk/typescript/guides/frontend/auth-address.mdx @@ -92,4 +92,4 @@ See the [Go Sequence SDK](https://github.com/0xsequence/go-sequence) on using Se If your server is written in a language other than Javascript/Typescript or Go, all you have to do is validate the signature with [EIP1271, the standard method for validating signed messages for a smart wallet](https://eips.ethereum.org/EIPS/eip-1271). -As always, if you have any questions or require help, reach out to us on [Discord](https://discord.gg/sequence). +As always, if you have any questions or require help, reach out to us on [Discord](https://discord.com/invite/YnGKP7d3vS). diff --git a/sdk/web/marketplace-sdk/getting-started.mdx b/sdk/web/marketplace-sdk/getting-started.mdx index a2189b70a..c25ac02ee 100644 --- a/sdk/web/marketplace-sdk/getting-started.mdx +++ b/sdk/web/marketplace-sdk/getting-started.mdx @@ -254,4 +254,4 @@ Now that you have the basics working, you can: - Customize the UI - Check out our other guides for more features -Need help? Join our [Discord community](https://discord.gg/sequence). +Need help? Join our [Discord community](https://discord.com/invite/YnGKP7d3vS). diff --git a/solutions/overview.mdx b/solutions/overview.mdx index 425bbea69..3178bcde6 100644 --- a/solutions/overview.mdx +++ b/solutions/overview.mdx @@ -28,7 +28,7 @@ or [Unreal](/sdk/unreal/overview). Integrate 1-click cross-chain payments with any wallet using our Trails SDK, or launch hosted primary-sale storefronts with built-in checkout. - + Get help, share feedback, and talk shop with other builders. diff --git a/support/discord.mdx b/support/discord.mdx index 06beaf90a..93c2386bf 100644 --- a/support/discord.mdx +++ b/support/discord.mdx @@ -1,4 +1,4 @@ --- title: Discord -url: "https://discord.gg/sequence" +url: "https://discord.com/invite/YnGKP7d3vS" --- \ No newline at end of file