OpenD NFT Marketplace

OpenD is a decentralized application (dApp) for minting, listing, and trading NFTs (Non-Fungible Tokens) on the Internet Computer blockchain. This project showcases the core features of an NFT marketplace, including minting NFTs, listing them for sale, and transferring ownership.

Table of Contents

• Introduction
• Features
• Technologies Used
• Getting Started
• Usage
• License

---

Introduction

This project demonstrates the functionalities of an NFT marketplace. The dApp is built on the Internet Computer platform and allows users to:

• Mint NFTs with custom names and image data.
• List NFTs for sale with specified prices.
• Transfer ownership of NFTs between users or to the marketplace.

---

Features

• Minting NFTs: Users can create NFTs by uploading image data and specifying names.
• Listing NFTs: NFTs can be listed on the marketplace with a price.
• Ownership Transfer: Ownership of NFTs can be transferred securely on the blockchain.
• Integration with Internet Computer: The backend is implemented using the Internet Computer's Motoko language.

---

Technologies Used

• Frontend: React.js with JSX
• Backend:
  • Internet Computer (Motoko for canister implementation)
  • Cycles for transaction execution
  • HashMap and List libraries from Motoko for data management
• Agent Library: @dfinity/agent for canister communication
• Blockchain: Internet Computer blockchain

---

Getting Started

Prerequisites

• Node.js installed
• dfx (Dfinity SDK) installed
• Local development environment for the Internet Computer

Installation

1. Clone the repository.

   git clone <repository-url>  
   cd <repository-folder>  

2. Install dependencies.

   npm install  

3. Start the local Internet Computer replica.

   dfx start --clean  

4. Deploy the canisters.

   dfx deploy  

5. Start the development server.

   npm start  

6. Access the application in your browser.

   http://localhost:8080  
   

---

Usage

Mint an NFT

1. Navigate to the minting page.
2. Provide the name and image data for the NFT.
3. Confirm to mint the NFT.

List an NFT

1. Navigate to your owned NFTs.
2. Select an NFT to list.
3. Specify the price and confirm the listing.

Transfer Ownership

1. Mint an NFT using the command:

   dfx canister call opend mint '(vec {<image-bytes>}, "<name>")'  

2. List the NFT:

   dfx canister call opend listItem '(principal "<NFT_CANISTER_ID>", <price>)'  

3. Transfer ownership to the OpenD canister:

   dfx canister call <NFT_CANISTER_ID> transferOwnership '(principal "<OPEND_CANISTER_ID>", true)'  

Copyright 2022 London App Brewery LTD (www.appbrewery.com)

The code in this tutorial project is licended under the Apache License, Version 2.0 (the "License"); you may not use this project except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Here is the TL;DR version of the above licence: https://tldrlegal.com/license/apache-license-2.0-(apache-2.0)

To Install and Run the Project

1. start local dfx

dfx start --clean

2. Run NPM server

npm start

3. Deploy canisters

dfx deploy --argument='("CryptoDunks #123", principal "7ayya-5gkxl-34pwm-gcl7d-nf3er-4yzzf-mtbbo-yxx4n-kfn4h-mdf2r-nqe", (vec {137; 80; 78; 71; 13; 10; 26; 10; 0; 0; 0; 13; 73; 72; 68; 82; 0; 0; 0; 10; 0; 0; 0; 10; 8; 6; 0; 0; 0; 141; 50; 207; 189; 0; 0; 0; 1; 115; 82; 71; 66; 0; 174; 206; 28; 233; 0; 0; 0; 68; 101; 88; 73; 102; 77; 77; 0; 42; 0; 0; 0; 8; 0; 1; 135; 105; 0; 4; 0; 0; 0; 1; 0; 0; 0; 26; 0; 0; 0; 0; 0; 3; 160; 1; 0; 3; 0; 0; 0; 1; 0; 1; 0; 0; 160; 2; 0; 4; 0; 0; 0; 1; 0; 0; 0; 10; 160; 3; 0; 4; 0; 0; 0; 1; 0; 0; 0; 10; 0; 0; 0; 0; 59; 120; 184; 245; 0; 0; 0; 113; 73; 68; 65; 84; 24; 25; 133; 143; 203; 13; 128; 48; 12; 67; 147; 94; 97; 30; 24; 0; 198; 134; 1; 96; 30; 56; 151; 56; 212; 85; 68; 17; 88; 106; 243; 241; 235; 39; 42; 183; 114; 137; 12; 106; 73; 236; 105; 98; 227; 152; 6; 193; 42; 114; 40; 214; 126; 50; 52; 8; 74; 183; 108; 158; 159; 243; 40; 253; 186; 75; 122; 131; 64; 0; 160; 192; 168; 109; 241; 47; 244; 154; 152; 112; 237; 159; 252; 105; 64; 95; 48; 61; 12; 3; 61; 167; 244; 38; 33; 43; 148; 96; 3; 71; 8; 102; 4; 43; 140; 164; 168; 250; 23; 219; 242; 38; 84; 91; 18; 112; 63; 0; 0; 0; 0; 73; 69; 78; 68; 174; 66; 96; 130;}))'

4. Head to localhost

http://localhost:8080/

Minter Else HTML

 <div className="minter-container">
        <h3 className="Typography-root makeStyles-title-99 Typography-h3 form-Typography-gutterBottom">
          Minted!
        </h3>
        <div className="horizontal-center">
        </div>
      </div>

Loader HTML

<div className="lds-ellipsis">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>

Button HTML

<div className="Chip-root makeStyles-chipBlue-108 Chip-clickable">
            <span
              onClick={}
              className="form-Chip-label"
            >
              Sell
            </span>
            </div>

Price Input HTML

<input
        placeholder="Price in DANG"
        type="number"
        className="price-input"
        value={}
        onChange={}
      />

Price Label HTML

<div className="disButtonBase-root disChip-root makeStyles-price-23 disChip-outlined">
          <span className="disChip-label">23 DANG</span>
        </div>

Creating NFT for Testing

1. Mint an NFT on the command line to get NFT into mapOfNFTs:

dfx canister call opend mint '(vec {137; 80; 78; 71; 13; 10; 26; 10; 0; 0; 0; 13; 73; 72; 68; 82; 0; 0; 0; 10; 0; 0; 0; 10; 8; 6; 0; 0; 0; 141; 50; 207; 189; 0; 0; 0; 1; 115; 82; 71; 66; 0; 174; 206; 28; 233; 0; 0; 0; 68; 101; 88; 73; 102; 77; 77; 0; 42; 0; 0; 0; 8; 0; 1; 135; 105; 0; 4; 0; 0; 0; 1; 0; 0; 0; 26; 0; 0; 0; 0; 0; 3; 160; 1; 0; 3; 0; 0; 0; 1; 0; 1; 0; 0; 160; 2; 0; 4; 0; 0; 0; 1; 0; 0; 0; 10; 160; 3; 0; 4; 0; 0; 0; 1; 0; 0; 0; 10; 0; 0; 0; 0; 59; 120; 184; 245; 0; 0; 0; 113; 73; 68; 65; 84; 24; 25; 133; 143; 203; 13; 128; 48; 12; 67; 147; 94; 97; 30; 24; 0; 198; 134; 1; 96; 30; 56; 151; 56; 212; 85; 68; 17; 88; 106; 243; 241; 235; 39; 42; 183; 114; 137; 12; 106; 73; 236; 105; 98; 227; 152; 6; 193; 42; 114; 40; 214; 126; 50; 52; 8; 74; 183; 108; 158; 159; 243; 40; 253; 186; 75; 122; 131; 64; 0; 160; 192; 168; 109; 241; 47; 244; 154; 152; 112; 237; 159; 252; 105; 64; 95; 48; 61; 12; 3; 61; 167; 244; 38; 33; 43; 148; 96; 3; 71; 8; 102; 4; 43; 140; 164; 168; 250; 23; 219; 242; 38; 84; 91; 18; 112; 63; 0; 0; 0; 0; 73; 69; 78; 68; 174; 66; 96; 130;}, "CryptoDunks #123")'

2. List the item into mapOfListings:

dfx canister call opend listItem '(principal "<REPLACE WITH NFT CANISTER ID>", 2)'

3. Get OpenD canister ID:

dfx canister id opend

4. Transfer NFT to OpenD:

dfx canister call <REPLACE WITH NFT CANISTER ID> transferOwnership '(principal "<REPLACE WITH OPEND CANISTER ID>", true)'

Conneting to the Token Canister

1. Copy over the token declarations folder

2. Set the token canister id into the

const dangPrincipal = Principal.fromText("<REPLACE WITH TOKEN CANISTER ID>");

Screenshots