Skip to content

Commit

Permalink
docs: Add bid creation example applications (#2201)
Browse files Browse the repository at this point in the history
  • Loading branch information
lfportal authored Sep 25, 2024
1 parent c253fe9 commit c14e661
Show file tree
Hide file tree
Showing 48 changed files with 2,170 additions and 73 deletions.
2 changes: 2 additions & 0 deletions examples/orderbook/create-bid-with-nextjs/.env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
NEXT_PUBLIC_PUBLISHABLE_KEY=
NEXT_PUBLIC_CLIENT_ID=
6 changes: 6 additions & 0 deletions examples/orderbook/create-bid-with-nextjs/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"root": true,
"extends": [
"next/core-web-vitals"
]
}
36 changes: 36 additions & 0 deletions examples/orderbook/create-bid-with-nextjs/.gitignore
Original file line number Diff line number Diff line change
@@ -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
68 changes: 68 additions & 0 deletions examples/orderbook/create-bid-with-nextjs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
This example application demonstrates how to create a bid 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 bid, 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 bid with the desired price and quantity is created.

## Features
- Create a bid for an ERC721 token
- Create a bid for an 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 bid for ERC721 token
1. Click on the "Create ERC721 Bid" 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
- ERC20 Currency Contract Address: The contract address of ERC20 you'd like to use to make payment for the item
- Currency Amount: The amount of currency you'd like use
4. Click on the "Create Bid" button
5. Approve the ERC20 token balance for trading
6. Sign the bid
7. If successful, the bid will be created and the order ID will be displayed
8. If unsuccessful, an error message will be displayed

## Create bid for ERC1155 token
1. Click on the "Create ERC1155 Bid" 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 bid for
- ERC20 Currency Contract Address: The contract address of ERC20 you'd like to use to make payment for the item
- Currency Amount: The amount of currency you'd like use
4. Click on the "Create Bid" button
5. Approve the ERC20 token balance for trading
6. Sign the bid
7. If successful, the bid 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
4 changes: 4 additions & 0 deletions examples/orderbook/create-bid-with-nextjs/next.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;
30 changes: 30 additions & 0 deletions examples/orderbook/create-bid-with-nextjs/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"name": "@examples/create-bid-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",
"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.6.2"
}
}
30 changes: 30 additions & 0 deletions examples/orderbook/create-bid-with-nextjs/playwright.config.ts
Original file line number Diff line number Diff line change
@@ -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: "80%",
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 start",
url: "http://localhost:3000",
reuseExistingServer: !process.env.CI,
},
});
Loading

0 comments on commit c14e661

Please sign in to comment.