Skip to content

Commit ba05888

Browse files
github-actions[bot]github-actions[bot]
committed
chore(i18n): update translations [en]
Sync file structure, format locales. Branch: 148/merge
1 parent cb35d69 commit ba05888

File tree

4 files changed

+106
-170
lines changed

4 files changed

+106
-170
lines changed

‎es/sdk/marketplace-sdk/getting-started.mdx

Lines changed: 52 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -141,95 +141,67 @@ Vamos a crear una aplicación sencilla en React que permita mostrar e interactua
141141
```
142142
</Step>
143143

144-
<Step title="Cree el componente Connect Button">
145-
Cree un nuevo componente `src/components/ConnectButton.tsx` para la conexión de wallet:
146-
147-
```tsx
148-
import { useOpenConnectModal } from '@0xsequence/connect';
149-
import { useAccount } from 'wagmi';
150-
151-
export default function ConnectButton() {
152-
const { setOpenConnectModal } = useOpenConnectModal();
153-
const { address } = useAccount();
154-
155-
return (
156-
<button
157-
onClick={() => setOpenConnectModal(true)}
158-
>
159-
{address ? `${address.slice(0, 6)}...${address.slice(-4)}` : "Connect Wallet"}
160-
</button>
161-
);
162-
}
163-
```
164-
</Step>
165-
166144
<Step title="Crear componente de tarjeta de coleccionable">
167145
Cree un nuevo componente `src/components/CollectibleCard.tsx` para mostrar e interactuar con coleccionables:
168146

169147
```tsx
170148
import {
171-
useCollectible,
172-
useMakeOfferModal,
149+
useCollectible,
150+
useMakeOfferModal,
151+
useMarketplaceConfig,
152+
useOpenConnectModal,
173153
} from "@0xsequence/marketplace-sdk/react";
174154
import type { Address } from "viem";
155+
import { useAccount } from "wagmi";
175156

176157
export default function CollectibleCard() {
177-
const { data: marketplaceConfig } = useMarketplaceConfig();
178-
const collection = marketplaceConfig?.market.collections[0]; // First collection setup in Sequence Builder
179-
const chainId = collection?.chainId as number;
180-
const collectionAddress = collection?.itemsAddress as Address;
181-
const collectibleId = "0";
182-
183-
const { data: collectible, isLoading: isCollectibleLoading, isError: isCollectibleError } = useCollectible({
184-
chainId,
185-
collectionAddress,
186-
collectibleId,
187-
});
188-
189-
const { show } = useMakeOfferModal();
190-
191-
if (isCollectibleLoading){
192-
return <div>Loading collectible...</div>
193-
}
194-
195-
if (isCollectibleError){
196-
return <div>Error while fetching collectible</div>
197-
}
198-
199-
if (!collectible) {
200-
return <div>No collectible found</div>;
201-
}
202-
203-
return (
204-
<div>
205-
<img width={100} height={100} src={collectible?.image} alt={collectible?.name} />
206-
207-
<h3>{collectible?.name}</h3>
208-
209-
<button
210-
onClick={() => {
211-
show({
212-
chainId,
213-
collectionAddress: itemsAddress,
214-
collectibleId: "0",
215-
});
216-
}}
217-
>
218-
Make Offer
219-
</button>
220-
</div>
221-
);
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+
);
222200
}
223201
```
224202

225203
<Note>
226-
Para obtener la dirección de su colección y el chain ID:
227-
228-
1. Vaya a su marketplace en `https://sequence.build/project/{YOUR_PROJECT_ID}/marketplace/market` y copie la dirección de la colección que creó.
229-
2. Para el chain ID:
230-
- Si conoce la red donde está desplegada su colección, use ese chain ID
231-
- Si no está seguro, visite [Sequence Chainlist](https://sequence.xyz/chains) y busque el chain ID donde está desplegada su colección (busque redes con estado "Supported")
232-
3. Asegúrese de haber minteado al menos un coleccionable en su colección, luego use el ID de ese coleccionable como `collectibleId`
204+
Asegúrese de haber minteado al menos un coleccionable en su colección, luego use el ID de ese coleccionable como `collectibleId`
233205
</Note>
234206

235207
<Tip>
@@ -241,16 +213,12 @@ Vamos a crear una aplicación sencilla en React que permita mostrar e interactua
241213
Actualice su `App.tsx` para usar los nuevos componentes:
242214

243215
```tsx
244-
import ConnectButton from './components/ConnectButton'
245-
import CollectibleCard from './components/CollectibleCard'
216+
import NFTCard from "./nft-card";
246217

247218
export default function App() {
248-
return (
249-
<div>
250-
<ConnectButton />
251-
<CollectibleCard />
252-
</div>
253-
)
219+
return (
220+
<NFTCard />
221+
);
254222
}
255223
```
256224
</Step>

‎es/sdk/overview.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ Sequence ofrece múltiples SDKs para ayudar a integrar funcionalidad blockchain
7878
</div>
7979
</a>
8080

81-
<a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/web/overview">
81+
<a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/marketplace-sdk/overview">
8282
<div className="px-6 py-5">
8383
<div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
8484
<svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/brands/react.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />

‎ja/sdk/marketplace-sdk/getting-started.mdx

Lines changed: 52 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -141,95 +141,67 @@ sidebarTitle: はじめに
141141
```
142142
</Step>
143143

144-
<Step title="Connect ボタンコンポーネントの作成">
145-
ウォレット接続用の新しいコンポーネント `src/components/ConnectButton.tsx` を作成します。
146-
147-
```tsx
148-
import { useOpenConnectModal } from '@0xsequence/connect';
149-
import { useAccount } from 'wagmi';
150-
151-
export default function ConnectButton() {
152-
const { setOpenConnectModal } = useOpenConnectModal();
153-
const { address } = useAccount();
154-
155-
return (
156-
<button
157-
onClick={() => setOpenConnectModal(true)}
158-
>
159-
{address ? `${address.slice(0, 6)}...${address.slice(-4)}` : "Connect Wallet"}
160-
</button>
161-
);
162-
}
163-
```
164-
</Step>
165-
166144
<Step title="コレクティブルカードコンポーネントの作成">
167145
コレクティブルを表示・操作するための新しいコンポーネント `src/components/CollectibleCard.tsx` を作成します。
168146

169147
```tsx
170148
import {
171-
useCollectible,
172-
useMakeOfferModal,
149+
useCollectible,
150+
useMakeOfferModal,
151+
useMarketplaceConfig,
152+
useOpenConnectModal,
173153
} from "@0xsequence/marketplace-sdk/react";
174154
import type { Address } from "viem";
155+
import { useAccount } from "wagmi";
175156

176157
export default function CollectibleCard() {
177-
const { data: marketplaceConfig } = useMarketplaceConfig();
178-
const collection = marketplaceConfig?.market.collections[0]; // First collection setup in Sequence Builder
179-
const chainId = collection?.chainId as number;
180-
const collectionAddress = collection?.itemsAddress as Address;
181-
const collectibleId = "0";
182-
183-
const { data: collectible, isLoading: isCollectibleLoading, isError: isCollectibleError } = useCollectible({
184-
chainId,
185-
collectionAddress,
186-
collectibleId,
187-
});
188-
189-
const { show } = useMakeOfferModal();
190-
191-
if (isCollectibleLoading){
192-
return <div>Loading collectible...</div>
193-
}
194-
195-
if (isCollectibleError){
196-
return <div>Error while fetching collectible</div>
197-
}
198-
199-
if (!collectible) {
200-
return <div>No collectible found</div>;
201-
}
202-
203-
return (
204-
<div>
205-
<img width={100} height={100} src={collectible?.image} alt={collectible?.name} />
206-
207-
<h3>{collectible?.name}</h3>
208-
209-
<button
210-
onClick={() => {
211-
show({
212-
chainId,
213-
collectionAddress: itemsAddress,
214-
collectibleId: "0",
215-
});
216-
}}
217-
>
218-
Make Offer
219-
</button>
220-
</div>
221-
);
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+
);
222200
}
223201
```
224202

225203
<Note>
226-
コレクションアドレスとチェーン ID を取得するには：
227-
228-
1. `https://sequence.build/project/{YOUR_PROJECT_ID}/marketplace/market` にアクセスし、作成したコレクションのアドレスをコピーします。
229-
2. チェーン ID について：
230-
- コレクションをデプロイしたネットワークが分かっている場合は、そのチェーン ID を使用してください。
231-
- 不明な場合は [Sequence Chainlist](https://sequence.xyz/chains) でコレクションがデプロイされているチェーン ID を探してください（"Supported" ステータスのネットワークを確認）。
232-
3. コレクション内で少なくとも 1 つコレクティブルをミントし、そのコレクティブルの ID を `collectibleId` として使用してください。
204+
コレクション内で少なくとも 1 つコレクティブルをミントし、そのコレクティブルの ID を `collectibleId` として使用してください。
233205
</Note>
234206

235207
<Tip>
@@ -241,16 +213,12 @@ sidebarTitle: はじめに
241213
`App.tsx` を更新して新しいコンポーネントを利用します。
242214

243215
```tsx
244-
import ConnectButton from './components/ConnectButton'
245-
import CollectibleCard from './components/CollectibleCard'
216+
import NFTCard from "./nft-card";
246217

247218
export default function App() {
248-
return (
249-
<div>
250-
<ConnectButton />
251-
<CollectibleCard />
252-
</div>
253-
)
219+
return (
220+
<NFTCard />
221+
);
254222
}
255223
```
256224
</Step>

‎ja/sdk/overview.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ Sequenceは、さまざまなプラットフォームや言語でアプリケー
7878
</div>
7979
</a>
8080

81-
<a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/web/overview">
81+
<a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/marketplace-sdk/overview">
8282
<div className="px-6 py-5">
8383
<div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
8484
<svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/brands/react.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />

0 commit comments

Comments
 (0)