TD-1673: chore: add example app for order fulfillment flow (#2172)

Co-authored-by: Craig M. <[email protected]>
immutable · Sep 16, 2024 · 404bf55 · 404bf55
1 parent 57e3e37
commit 404bf55
Show file tree

Hide file tree

Showing 24 changed files with 1,142 additions and 24 deletions.
diff --git a/examples/orderbook/create-listing-with-nextjs/package.json b/examples/orderbook/create-listing-with-nextjs/package.json
@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@biom3/react": "^0.26.1",
-    "@ethersproject/providers": "^5.7.2",
     "@imtbl/sdk": "latest",
+    "ethers": "^5.7.2",
     "next": "14.2.7",
     "react": "^18",
     "react-dom": "^18"

diff --git a/examples/orderbook/create-listing-with-nextjs/src/app/create-listing-with-erc1155/page.tsx b/examples/orderbook/create-listing-with-nextjs/src/app/create-listing-with-erc1155/page.tsx
@@ -216,7 +216,7 @@ export default function CreateERC1155ListingWithPassport() {
           Passport
         </Heading>
         <Grid>
-          {accountsState.length === 0 && (
+          {accountsState.length === 0 ? (
             <Box sx={{ marginBottom: "base.spacing.x5" }}>
               <Button
                 size="medium"
@@ -228,8 +228,8 @@ export default function CreateERC1155ListingWithPassport() {
                 Login
               </Button>
             </Box>
-          )}
-          {accountsState.length >= 1 && (
+          ) : null}
+          {accountsState.length >= 1 ? (
             <Box sx={{ marginBottom: "base.spacing.x5" }}>
               <Button
                 size="medium"
@@ -241,7 +241,7 @@ export default function CreateERC1155ListingWithPassport() {
                 Logout
               </Button>
             </Box>
-          )}
+          ) : null}
           {loading ? (
             <LoadingOverlay visible>
               <LoadingOverlay.Content>
@@ -263,7 +263,7 @@ export default function CreateERC1155ListingWithPassport() {
         <Heading size="medium" sx={{ marginBottom: "base.spacing.x5" }}>
           Create ERC1155 listing
         </Heading>
-        {successMessage && (
+        {successMessage ? (
           <Box
             sx={{
               color: "green",
@@ -273,12 +273,18 @@ export default function CreateERC1155ListingWithPassport() {
           >
             {successMessage}
           </Box>
-        )}
-        {listingError && (
-          <Box sx={{ color: "red", marginBottom: "base.spacing.x5" }}>
+        ) : null}
+        {listingError ? (
+          <Box sx={{
+            color: "red",
+            marginBottom: "base.spacing.x5",
+            maxWidth: "1300px",
+            maxHeight: "400px",
+            overflowY: "auto",
+          }}>
             {listingError}
           </Box>
-        )}
+        ) : null}
         <FormControl sx={{ marginBottom: "base.spacing.x5" }}>
           <FormControl.Label>NFT Contract Address</FormControl.Label>
           <TextInput onChange={handleSellItemContractAddressChange} />
@@ -310,12 +316,12 @@ export default function CreateERC1155ListingWithPassport() {
             </Select.Option>
           </Select>
         </FormControl>
-        {showBuyItemContractAddress && (
+        {showBuyItemContractAddress ? (
           <FormControl sx={{ marginBottom: "base.spacing.x5" }}>
             <FormControl.Label>Currency Contract Address</FormControl.Label>
             <TextInput onChange={handleBuyItemContractAddressChange} />
           </FormControl>
-        )}
+        ) : null}
         <FormControl sx={{ marginBottom: "base.spacing.x5" }}>
           <FormControl.Label>Currency Amount</FormControl.Label>
           <TextInput onChange={handleBuyItemAmountChange} />

diff --git a/examples/orderbook/create-listing-with-nextjs/src/app/create-listing-with-erc721/page.tsx b/examples/orderbook/create-listing-with-nextjs/src/app/create-listing-with-erc721/page.tsx
@@ -208,7 +208,7 @@ export default function CreateERC721ListingWithPassport() {
           Passport
         </Heading>
         <Grid>
-          {accountsState.length === 0 && (
+          {accountsState.length === 0 ? (
             <Box sx={{ marginBottom: "base.spacing.x5" }}>
               <Button
                 size="medium"
@@ -220,8 +220,8 @@ export default function CreateERC721ListingWithPassport() {
                 Login
               </Button>
             </Box>
-          )}
-          {accountsState.length >= 1 && (
+          ) : null}
+          {accountsState.length >= 1 ? (
             <Box sx={{ marginBottom: "base.spacing.x5" }}>
               <Button
                 size="medium"
@@ -233,7 +233,7 @@ export default function CreateERC721ListingWithPassport() {
                 Logout
               </Button>
             </Box>
-          )}
+          ) : null}
           {loading ? (
             <LoadingOverlay visible>
               <LoadingOverlay.Content>
@@ -255,7 +255,7 @@ export default function CreateERC721ListingWithPassport() {
         <Heading size="medium" sx={{ marginBottom: "base.spacing.x5" }}>
           Create ERC721 listing
         </Heading>
-        {successMessage && (
+        {successMessage ? (
           <Box
             sx={{
               color: "green",
@@ -265,12 +265,18 @@ export default function CreateERC721ListingWithPassport() {
           >
             {successMessage}
           </Box>
-        )}
-        {listingError && (
-          <Box sx={{ color: "red", marginBottom: "base.spacing.x5" }}>
+        ) : null}
+        {listingError ? (
+          <Box sx={{
+            color: "red",
+            marginBottom: "base.spacing.x5",
+            maxWidth: "1300px",
+            maxHeight: "400px",
+            overflowY: "auto",
+          }}>
             {listingError}
           </Box>
-        )}
+        ) : null}
         <FormControl sx={{ marginBottom: "base.spacing.x5" }}>
           <FormControl.Label>NFT Contract Address</FormControl.Label>
           <TextInput onChange={handleSellItemContractAddressChange} />
@@ -298,12 +304,12 @@ export default function CreateERC721ListingWithPassport() {
             </Select.Option>
           </Select>
         </FormControl>
-        {showBuyItemContractAddress && (
+        {showBuyItemContractAddress ? (
           <FormControl sx={{ marginBottom: "base.spacing.x5" }}>
             <FormControl.Label>Currency Contract Address</FormControl.Label>
             <TextInput onChange={handleBuyItemContractAddressChange} />
           </FormControl>
-        )}
+        ) : null}
         <FormControl sx={{ marginBottom: "base.spacing.x5" }}>
           <FormControl.Label>Currency Amount</FormControl.Label>
           <TextInput onChange={handleBuyItemAmountChange} />

diff --git a/examples/orderbook/fulfill-listing-with-nextjs/.env.example b/examples/orderbook/fulfill-listing-with-nextjs/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_PUBLISHABLE_KEY=
+NEXT_PUBLIC_CLIENT_ID=
diff --git a/examples/orderbook/fulfill-listing-with-nextjs/.eslintrc.json b/examples/orderbook/fulfill-listing-with-nextjs/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "root": true,
+  "extends": [
+    "next/core-web-vitals"
+  ]
+}
diff --git a/examples/orderbook/fulfill-listing-with-nextjs/.gitignore b/examples/orderbook/fulfill-listing-with-nextjs/.gitignore
@@ -0,0 +1,38 @@
+# 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
+
+.next
diff --git a/examples/orderbook/fulfill-listing-with-nextjs/README.md b/examples/orderbook/fulfill-listing-with-nextjs/README.md
@@ -0,0 +1,61 @@
+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).
+
+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.
+
+## Features
+- Fill a ERC721 listing
+- Fill a ERC1155 listing
+
+## 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.
+
+## Fill a ERC721 listing
+1. Click on the "Fulfill listing - Complete fulfillment with ERC721" button
+2. Connect your Passport wallet
+3. Filter listings based on criteria,
+   - NFT Contract Address: The contract address of the ERC721 token
+   - Currency Type: The type of currency (Native or ERC20) you'd like to receive for the item
+4. Click on the "Buy" button
+5. Approve the settlement contract to transfer tokens on your behalf
+6. If successful, the listing will be created and the order ID will be displayed
+7. If unsuccessful, an error message will be displayed
+
+## Fill a ERC1155 listing
+1. Click on the "Fulfill listing - Complete fulfillment with ERC1155" button
+2. Connect your Passport wallet
+3. Filter listings based on criteria,
+   - NFT Contract Address: The contract address of the ERC1155 token
+   - Currency Type: The type of currency (Native or ERC20) you'd like to receive for the item
+4. Click on the "Buy" button
+5. Approve the settlement contract to transfer tokens on your behalf
+6. If successful, the listing will be created and the order ID will be displayed
+7. 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
diff --git a/examples/orderbook/fulfill-listing-with-nextjs/next.config.mjs b/examples/orderbook/fulfill-listing-with-nextjs/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/examples/orderbook/fulfill-listing-with-nextjs/package.json b/examples/orderbook/fulfill-listing-with-nextjs/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@examples/fulfill-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",
+    "@imtbl/sdk": "latest",
+    "ethers": "^5.7.2",
+    "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"
+  }
+}
diff --git a/examples/orderbook/fulfill-listing-with-nextjs/playwright.config.ts b/examples/orderbook/fulfill-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,
+    },
+});
diff --git a/examples/orderbook/fulfill-listing-with-nextjs/src/app/favicon.ico b/examples/orderbook/fulfill-listing-with-nextjs/src/app/favicon.ico