Flippy (NFT Barter)

Logo
Marketplace
Exhibit in progress
Offer to NFT
Main and child canisters
Canister architecture (exhibit NFT)
Canister architecture (bid NFT)

Inspirations

Wouldn't it be cool if we could trade NFTs directly with each other as we did with trading cards when we were kids? In InternetComputer, the primary way to get NFTs is to purchase them in marketplaces using cryptocurrencies such as ICP or WICP. There is currently no way to exchange NFTs trustless. Imagine you exchange NFTs with someone. You must agree that one of you sends an NFT to the other first, and the other sends an NFT back. In this case, there is a risk that the person receiving the NFT first may run away with it, making it impossible to exchange NFTs with peace of mind. Therefore, we have developed a new platform that enables the trustless direct exchanges of NFTs.

What it does

Flippy is a platform for the direct exchange of NFTs. To accomplish the trustless exchange between users, we have designed the exchange to take place on top of Canisters. When you want to list an NFT, you send the NFT from your wallet to your Canister. When bidding on an NFT, the bidder sends the NFT from their wallet to your Canister via their Canister. The whole process is executed on-the-fly, with the user agreeing by pressing a button on the frontend app. You choose an NFT among the bids received, and the exchange of NFTs takes place on your Canister. No one can control their Canister as they like and can only perform the operations that have been coded, thus making the exchange of NFTs trustless.

How we build it

We have developed an NFT exchange platform (Flippy) and a sample NFT (Generative Art NFT) in separate repositories.

(1) Generative Art NFT

The backend code is written in Motoko; the NFT complies with the EXT standard. The image assets are stored in the Canister, making it a full on-chain NFT.
The frontend code is written in TypeScript to generate NFT images. The p5.js library was used to create generative art.

(2) Flippy (NFT Barter)

The backend code is written in Motoko.
The frontend code is written in React with TypeScript. Redux was used for state management, and Chakra UI was used as the UI library. Internet Identity was used for authentication.

Challenges we ran into

There is not much information on Motoko on the internet, so we went through numerous trials to find the best practices to do better coding.
All team members are backend-oriented developers, and there were no frontend engineers or designers on our team, so we struggled with UI/UX design and implementations.
The team members were busy with their jobs and studies, so we had difficulty completing the project within the limited time frame.

Accomplishments that we're proud of

We are the first in the Internet Computer ecosystem to propose the Canister architecture for the direct exchange of NFTs trustless.
We developed both backend and frontend functionality for the sequence of exhibiting, bidding, selection, and withdrawal for demonstrating the actual exchange using NFTs.
We provided documentation on the Canister architecture to make it easy for other developers to understand.
We wrote enough test codes.