Skip to content

Commit 404bf55

Browse files
naveen-imtbproletesseract
naveen-imtb
and
proletesseract
authored
TD-1673: chore: add example app for order fulfillment flow (#2172)
Co-authored-by: Craig M. <craig.b.macgregor@gmail.com>
1 parent 57e3e37 commit 404bf55

24 files changed

Lines changed: 1142 additions & 24 deletions

File tree

‎examples/orderbook/create-listing-with-nextjs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
},
1212
"dependencies": {
1313
"@biom3/react": "^0.26.1",
14-
"@ethersproject/providers": "^5.7.2",
1514
"@imtbl/sdk": "latest",
15+
"ethers": "^5.7.2",
1616
"next": "14.2.7",
1717
"react": "^18",
1818
"react-dom": "^18"

‎examples/orderbook/create-listing-with-nextjs/src/app/create-listing-with-erc1155/page.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ export default function CreateERC1155ListingWithPassport() {
216216
Passport
217217
</Heading>
218218
<Grid>
219-
{accountsState.length === 0 && (
219+
{accountsState.length === 0 ? (
220220
<Box sx={{ marginBottom: "base.spacing.x5" }}>
221221
<Button
222222
size="medium"
@@ -228,8 +228,8 @@ export default function CreateERC1155ListingWithPassport() {
228228
Login
229229
</Button>
230230
</Box>
231-
)}
232-
{accountsState.length >= 1 && (
231+
) : null}
232+
{accountsState.length >= 1 ? (
233233
<Box sx={{ marginBottom: "base.spacing.x5" }}>
234234
<Button
235235
size="medium"
@@ -241,7 +241,7 @@ export default function CreateERC1155ListingWithPassport() {
241241
Logout
242242
</Button>
243243
</Box>
244-
)}
244+
) : null}
245245
{loading ? (
246246
<LoadingOverlay visible>
247247
<LoadingOverlay.Content>
@@ -263,7 +263,7 @@ export default function CreateERC1155ListingWithPassport() {
263263
<Heading size="medium" sx={{ marginBottom: "base.spacing.x5" }}>
264264
Create ERC1155 listing
265265
</Heading>
266-
{successMessage && (
266+
{successMessage ? (
267267
<Box
268268
sx={{
269269
color: "green",
@@ -273,12 +273,18 @@ export default function CreateERC1155ListingWithPassport() {
273273
>
274274
{successMessage}
275275
</Box>
276-
)}
277-
{listingError && (
278-
<Box sx={{ color: "red", marginBottom: "base.spacing.x5" }}>
276+
) : null}
277+
{listingError ? (
278+
<Box sx={{
279+
color: "red",
280+
marginBottom: "base.spacing.x5",
281+
maxWidth: "1300px",
282+
maxHeight: "400px",
283+
overflowY: "auto",
284+
}}>
279285
{listingError}
280286
</Box>
281-
)}
287+
) : null}
282288
<FormControl sx={{ marginBottom: "base.spacing.x5" }}>
283289
<FormControl.Label>NFT Contract Address</FormControl.Label>
284290
<TextInput onChange={handleSellItemContractAddressChange} />
@@ -310,12 +316,12 @@ export default function CreateERC1155ListingWithPassport() {
310316
</Select.Option>
311317
</Select>
312318
</FormControl>
313-
{showBuyItemContractAddress && (
319+
{showBuyItemContractAddress ? (
314320
<FormControl sx={{ marginBottom: "base.spacing.x5" }}>
315321
<FormControl.Label>Currency Contract Address</FormControl.Label>
316322
<TextInput onChange={handleBuyItemContractAddressChange} />
317323
</FormControl>
318-
)}
324+
) : null}
319325
<FormControl sx={{ marginBottom: "base.spacing.x5" }}>
320326
<FormControl.Label>Currency Amount</FormControl.Label>
321327
<TextInput onChange={handleBuyItemAmountChange} />

‎examples/orderbook/create-listing-with-nextjs/src/app/create-listing-with-erc721/page.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ export default function CreateERC721ListingWithPassport() {
208208
Passport
209209
</Heading>
210210
<Grid>
211-
{accountsState.length === 0 && (
211+
{accountsState.length === 0 ? (
212212
<Box sx={{ marginBottom: "base.spacing.x5" }}>
213213
<Button
214214
size="medium"
@@ -220,8 +220,8 @@ export default function CreateERC721ListingWithPassport() {
220220
Login
221221
</Button>
222222
</Box>
223-
)}
224-
{accountsState.length >= 1 && (
223+
) : null}
224+
{accountsState.length >= 1 ? (
225225
<Box sx={{ marginBottom: "base.spacing.x5" }}>
226226
<Button
227227
size="medium"
@@ -233,7 +233,7 @@ export default function CreateERC721ListingWithPassport() {
233233
Logout
234234
</Button>
235235
</Box>
236-
)}
236+
) : null}
237237
{loading ? (
238238
<LoadingOverlay visible>
239239
<LoadingOverlay.Content>
@@ -255,7 +255,7 @@ export default function CreateERC721ListingWithPassport() {
255255
<Heading size="medium" sx={{ marginBottom: "base.spacing.x5" }}>
256256
Create ERC721 listing
257257
</Heading>
258-
{successMessage && (
258+
{successMessage ? (
259259
<Box
260260
sx={{
261261
color: "green",
@@ -265,12 +265,18 @@ export default function CreateERC721ListingWithPassport() {
265265
>
266266
{successMessage}
267267
</Box>
268-
)}
269-
{listingError && (
270-
<Box sx={{ color: "red", marginBottom: "base.spacing.x5" }}>
268+
) : null}
269+
{listingError ? (
270+
<Box sx={{
271+
color: "red",
272+
marginBottom: "base.spacing.x5",
273+
maxWidth: "1300px",
274+
maxHeight: "400px",
275+
overflowY: "auto",
276+
}}>
271277
{listingError}
272278
</Box>
273-
)}
279+
) : null}
274280
<FormControl sx={{ marginBottom: "base.spacing.x5" }}>
275281
<FormControl.Label>NFT Contract Address</FormControl.Label>
276282
<TextInput onChange={handleSellItemContractAddressChange} />
@@ -298,12 +304,12 @@ export default function CreateERC721ListingWithPassport() {
298304
</Select.Option>
299305
</Select>
300306
</FormControl>
301-
{showBuyItemContractAddress && (
307+
{showBuyItemContractAddress ? (
302308
<FormControl sx={{ marginBottom: "base.spacing.x5" }}>
303309
<FormControl.Label>Currency Contract Address</FormControl.Label>
304310
<TextInput onChange={handleBuyItemContractAddressChange} />
305311
</FormControl>
306-
)}
312+
) : null}
307313
<FormControl sx={{ marginBottom: "base.spacing.x5" }}>
308314
<FormControl.Label>Currency Amount</FormControl.Label>
309315
<TextInput onChange={handleBuyItemAmountChange} />

‎examples/orderbook/fulfill-listing-with-nextjs/.env.example‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
NEXT_PUBLIC_PUBLISHABLE_KEY=
2+
NEXT_PUBLIC_CLIENT_ID=

‎examples/orderbook/fulfill-listing-with-nextjs/.eslintrc.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"root": true,
3+
"extends": [
4+
"next/core-web-vitals"
5+
]
6+
}

‎examples/orderbook/fulfill-listing-with-nextjs/.gitignore‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts
37+
38+
.next

‎examples/orderbook/fulfill-listing-with-nextjs/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
This example application demonstrates how to fill a listing using the Immutable SDK. The application connects to the Immutable Sandbox environment and requires a valid client ID and publishable API key (which can be retrieved from the Immutable Hub).
2+
3+
In order to fill a listing, valid ERC721 or ERC1155 orders should exist in the system. The application will prompt the user to connect their Passport wallet and approve the settlement contract to transfer the currency tokens on their behalf. Once the currency is approved, a listing is filled on a best effort basis.
4+
5+
## Features
6+
- Fill a ERC721 listing
7+
- Fill a ERC1155 listing
8+
9+
## Prerequisites
10+
- Node.js
11+
12+
## Getting Started
13+
1. Install the dependencies:
14+
15+
```bash
16+
yarn
17+
```
18+
19+
2. Copy the `.env.example` file to `.env`:
20+
21+
```bash
22+
cp .env.example .env
23+
```
24+
25+
3. Replace the `NEXT_PUBLIC_PUBLISHABLE_KEY` and `NEXT_PUBLIC_CLIENT_ID` with your own values from the Immutable Hub.
26+
27+
28+
4. Run the development server:
29+
30+
```bash
31+
yarn dev
32+
```
33+
34+
Open [http://localhost:3000](http://localhost:3000) with your browser and you'll be navigated to the home screen.
35+
36+
## Fill a ERC721 listing
37+
1. Click on the "Fulfill listing - Complete fulfillment with ERC721" button
38+
2. Connect your Passport wallet
39+
3. Filter listings based on criteria,
40+
- NFT Contract Address: The contract address of the ERC721 token
41+
- Currency Type: The type of currency (Native or ERC20) you'd like to receive for the item
42+
4. Click on the "Buy" button
43+
5. Approve the settlement contract to transfer tokens on your behalf
44+
6. If successful, the listing will be created and the order ID will be displayed
45+
7. If unsuccessful, an error message will be displayed
46+
47+
## Fill a ERC1155 listing
48+
1. Click on the "Fulfill listing - Complete fulfillment with ERC1155" button
49+
2. Connect your Passport wallet
50+
3. Filter listings based on criteria,
51+
- NFT Contract Address: The contract address of the ERC1155 token
52+
- Currency Type: The type of currency (Native or ERC20) you'd like to receive for the item
53+
4. Click on the "Buy" button
54+
5. Approve the settlement contract to transfer tokens on your behalf
55+
6. If successful, the listing will be created and the order ID will be displayed
56+
7. If unsuccessful, an error message will be displayed
57+
58+
## Required Environment Variables
59+
60+
- NEXT_PUBLIC_PUBLISHABLE_KEY // replace with your publishable API key from Hub
61+
- NEXT_PUBLIC_CLIENT_ID // replace with your client ID from Hub

‎examples/orderbook/fulfill-listing-with-nextjs/next.config.mjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {};
3+
4+
export default nextConfig;

‎examples/orderbook/fulfill-listing-with-nextjs/package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "@examples/fulfill-listing-with-nextjs",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint",
10+
"test": "playwright test"
11+
},
12+
"dependencies": {
13+
"@biom3/react": "^0.26.1",
14+
"@imtbl/sdk": "latest",
15+
"ethers": "^5.7.2",
16+
"next": "14.2.7",
17+
"react": "^18",
18+
"react-dom": "^18"
19+
},
20+
"devDependencies": {
21+
"@playwright/test": "^1.45.3",
22+
"@types/node": "^20",
23+
"@types/react": "^18",
24+
"@types/react-dom": "^18",
25+
"eslint": "^8",
26+
"eslint-config-next": "14.2.7",
27+
"typescript": "^5"
28+
}
29+
}

‎examples/orderbook/fulfill-listing-with-nextjs/playwright.config.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { defineConfig, devices } from "@playwright/test";
2+
3+
export default defineConfig({
4+
testDir: "./tests",
5+
fullyParallel: true,
6+
forbidOnly: !!process.env.CI,
7+
retries: process.env.CI ? 2 : 0,
8+
workers: process.env.CI ? 1 : undefined,
9+
reporter: "html",
10+
11+
use: {
12+
baseURL: "http://localhost:3000",
13+
trace: "on-first-retry",
14+
},
15+
16+
projects: [
17+
{ name: "chromium", use: { ...devices["Desktop Chrome"] } },
18+
{ name: "firefox", use: { ...devices["Desktop Firefox"] } },
19+
{ name: "webkit", use: { ...devices["Desktop Safari"] } },
20+
21+
{ name: "Mobile Chrome", use: { ...devices["Pixel 5"] } },
22+
{ name: "Mobile Safari", use: { ...devices["iPhone 12"] } },
23+
],
24+
25+
webServer: {
26+
command: "yarn dev",
27+
url: "http://localhost:3000",
28+
reuseExistingServer: !process.env.CI,
29+
},
30+
});

0 commit comments

Comments
 (0)