TD-1653: chore: add example app for Orderbook create listing feature (#…

…2150)

Co-authored-by: Craig M. <[email protected]>

examples/orderbook/create-listing-with-nextjs/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_PUBLISHABLE_KEY=
+NEXT_PUBLIC_CLIENT_ID=

examples/orderbook/create-listing-with-nextjs/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "root": true,
+  "extends": [
+    "next/core-web-vitals"
+  ]
+}

examples/orderbook/create-listing-with-nextjs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/orderbook/create-listing-with-nextjs/README.md

@@ -0,0 +1,68 @@
+This example application demonstrates how to create 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).
+
+In order to create a listing, a valid ERC721 or ERC1155 token must be provided. The application will prompt the user to connect their Passport wallet and approve the token. Once the token is approved, a listing with the desired price and quantity is created.
+
+## Features
+- Create a listing using ERC721 token
+- Create a listing using ERC1155 token
+
+## Prerequisites
+- Node.js
+
+## Getting Started
+1. Install the dependencies:
+
+```bash
+yarn
+```    
+
+2. Copy the `.env.example` file to `.env`:
+
+```bash
+cp .env.example .env
+```
+
+3. Replace the `NEXT_PUBLIC_PUBLISHABLE_KEY` and `NEXT_PUBLIC_CLIENT_ID` with your own values from the Immutable Hub.
+
+
+4. Run the development server:
+
+```bash
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser and you'll be navigated to the home screen.
+
+## Create listing for ERC721 token
+1. Click on the "Create ERC721 Listing" button
+2. Connect your Passport wallet
+3. Enter the following details
+   - NFT Contract Address: The contract address of the ERC721 token
+   - NFT Token ID: The Token ID of the ERC721 token
+   - Currency Type: The type of currency (Native or ERC20) you'd like to receive for the item
+   - Currency Amount: The amount of currency you'd like to receive for the item
+4. Click on the "Create Listing" button
+5. Approve the token for trading
+6. Sign the listing
+7. If successful, the listing will be created and the order ID will be displayed
+8. If unsuccessful, an error message will be displayed
+
+## Create listing for ERC1155 token
+1. Click on the "Create ERC1155 Listing" button
+2. Connect your Passport wallet
+3. Enter the following details
+    - NFT Contract Address: The contract address of the ERC1155 token
+    - NFT Token ID: The Token ID of the ERC1155 token
+    - NFT Token Quantity: The amount of ERC1155 tokens you'd like to list
+    - Currency Type: The type of currency (Native or ERC20) you'd like to receive for the item
+    - Currency Amount: The amount of currency you'd like to receive for the item
+4. Click on the "Create Listing" button
+5. Approve the token for trading
+6. Sign the listing
+7. If successful, the listing will be created and the order ID will be displayed
+8. If unsuccessful, an error message will be displayed
+
+## Required Environment Variables
+
+- NEXT_PUBLIC_PUBLISHABLE_KEY // replace with your publishable API key from Hub
+- NEXT_PUBLIC_CLIENT_ID // replace with your client ID from Hub

examples/orderbook/create-listing-with-nextjs/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

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

@@ -0,0 +1,29 @@
+{
+  "name": "@examples/create-listing-with-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "playwright test"
+  },
+  "dependencies": {
+    "@biom3/react": "^0.26.1",
+    "@ethersproject/providers": "^5.7.2",
+    "@imtbl/sdk": "latest",
+    "next": "14.2.7",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.3",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.7",
+    "typescript": "^5"
+  }
+}

examples/orderbook/create-listing-with-nextjs/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+    testDir: "./tests",
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 2 : 0,
+    workers: process.env.CI ? 1 : undefined,
+    reporter: "html",
+
+    use: {
+        baseURL: "http://localhost:3000",
+        trace: "on-first-retry",
+    },
+
+    projects: [
+        { name: "chromium", use: { ...devices["Desktop Chrome"] } },
+        { name: "firefox", use: { ...devices["Desktop Firefox"] } },
+        { name: "webkit", use: { ...devices["Desktop Safari"] } },
+
+        { name: "Mobile Chrome", use: { ...devices["Pixel 5"] } },
+        { name: "Mobile Safari", use: { ...devices["iPhone 12"] } },
+    ],
+
+    webServer: {
+        command: "yarn dev",
+        url: "http://localhost:3000",
+        reuseExistingServer: !process.env.CI,
+    },
+});