HypeX

HypeX is the first cross-chain NFT + Defi streetwear mystery box game.

Comment

Track: Build on Rarible Protocol; NFT Payment Solutions; A Scalable NFT Art Project; Gaming & NFTs

Inspiration

Being sneakerheads and gamers since elementary school, we are determined to create a trendy brand community for young people. A few months ago, we came across NBA Top Shot and spent a couple hundred $ in the game. We were addicted to the game, and the human nature of gambling drove us to purchase NBA Top Shot repeatedly. So, we had an idea: why don’t we deploy sneakers into NBA Top Shot so that people can win high-value real-world assets? On top of that, we wanted to add more gaming elements into the platform to allow users to play & earn.

For the online Mystery Box Platform, many people are complaining about the low transparency of the odds of winning and expressed the feeling of being scammed by Hybe. In this case, we realized we can solve this problem by disclosing these odds on blockchain.

Given Blockchain's nature of transparency, decentralized structures, and traceability, we adopted this decentralized solution using Non-Fungible Token (NFT) to make all mystery boxes traceable, thus making our brand and product credible. All transactions and opening of boxes are publicly available on the chain, either Ethereum Mainnet or BSC, accessed via Etherscan. In this case, the NFT solution provides us a simple, secure yet highly scalable way to interface reality with the virtual world.

What it does

HypeX is the first blockchain Game for Sneaker Lovers. The project aims to build a crypto-related metaverse game ecosystem that attracts non-crypto users to play & earn across multiple revenue streams.

In HypeX, players can purchase different types & levels of mystery boxes at various prices. Each mystery box is limited and has a certain probability of drawing branded merchandise or merchandise fragments (Fractional NFT). All information regarding mystery boxes is transparent on the blockchain. The odds of winning will be 100% secured and proved by the third party Chainlink VRF via blockchain. Both the probability and the purchase history of each mystery box will be recorded and made searchable on the blockchain.

Other than the mystery box, HypeX provides games for users to leverage more of their NFTs. In the Fragment Refiner, users can upgrade their fragments to higher-value fragments. In the Melting Factory, users can melt their merchandise into fragments. And in the Forging Factory, users can forge their fragments into merchandise. In the future, HypeX will release more games for users to play & earn.
(more)

New Features Design in Hackathon

NFT Payment Solution The HypeX platform uses USDC (dollar stable coin) for mystery box purchases. We built the in-app user wallet using Circle’s API. With Circle’s API, users are able to add a fiat money account (debit/credit card) to add USDC funds to their HypeX account.

Build On Rarible Protocol The HypeX platform uses Rarible Protocol to generate the NFT Card. We use Rarible “Lazy Mint” to store our background, merchandise pictures, and “rarity frame” individually on IPFS. Once the user opens the mystery box, we will generate a random number from Chainlink VRF. The background, merchandise pictures, and “rarity frame” will be randomly selected and merged into one picture––the NFT Card. Currently, we mint the NFT Cards and place them in users’ wallets.

Gaming & NFTS - By IFPS & Filecoin HypeX uses NFT.Storage to store (off-chain) metadata of the pictures, in which the data is stored decentralized on IPFS and Filecoin. Through NFT Storage, an IPFS hash of the content (a CID) is generated, and will be used in on-chain NFT data as a pointer to the content.

Scalable NFT Art Given the track is “scalable NFT art”, we designed a synthetic algorithm to produce a nearly infinite amount of art collections using a highly scalable approach. We broke down a piece of art collection into a synthetic background, a product image, and its rarity frame and text based on algorithmically determining rarity. We used the pretrained-CycleGAN model to fuse the generate background with our web-scrapped cyberpunk background. Therefore, each of our cards is unique and can be scaled up to hundreds of thousands of art pieces.

How we built it

Payment The HypeX platform uses USDC (dollar stable coin) for mystery box purchases. We built the user wallet using Circle’s API. With Circle’s API, users are able to add a fiat money account (debit/credit card) to add USDC funds to their HypeX account.

A-scalable-NFT-Art-Project-by-Indorse We started out collecting background sources by web-crawling the exotic photos with the similar style of Hypex for the Generative Adversarial Network model. Then, we applied the pretrained CycleGAN model to generate background from our web-scrapped cyberpunk background. After filtering and crafting our synthetic background, we overlapped our product with the chosen background and then used the randomly generated ID to set the color grading for our background photo. Based on the randomly generated ID, we differentiated the rarity of each product-background pair using the mod algorithm. Common: 57% Rare: 30% Epic: 10% Legendary: 3%

Rarible The team was able to mint metadata that was uploaded onto IPFS and store transaction information using the Rarible protocol. Input: Path String: e.g. userID + System.time() Output: Photo: Text + Product + Frame + Background (After CycleGan) + Encoding

IPFS & Filecoin We used the JS client library and extension nft.storage provided from the API. An API key is generated and used to create NFTStorage objects, which are used to convert the input images to metadata and store them to the database. Metadata contains the info about the CID (content ID), which will be used to mind NFT on Rarible. On the frontend (React.js), we implemented an event handling in which when the users click on the “open” button, the store() function will be triggered and a random image will be stored on the IPFS & Filecoin through nft.storage.

React.js & Node.js The entire web-app was implemented in React.js and Node.js, where each page corresponds to a React complement with their respective CSSs.

Challenges we ran into

NFT Payment Solution The OpenPGP version in React.js was not correct initially; this caused problems with the encryption card information. The funds are added to one single Circle sandbox API account, making it difficult to manage multiple users on our platform.

Scalable NFT Art Since we used the pre-trained model from CycleGAN directly, some of the models don’t work aesthetically well on our “dataset” background images. We meticulously selected those images for a better rendering of the final synthetic background.

IPFS & Filecoin While using IPFS and Filecoin for decentralized data storage, the image sizes were sometimes being compressed after storage, and sometimes the NFT.storage became unresponsive and unable to upload images.

Rarible Learning and understanding the rarible protocol was a major challenge even if a lot of things were already mapped out for the users in the documentation. The team had to figure out what to put for all of the placeholder variables that is on the code.

UI We encountered a lot of styling issues (ex. button mismatch, page unresponsiveness, unable to overlay components and manage pop-ups, etc.) in React.js when we tried to code the frontend based on our Figma design. These issues were finally resolved by adjusting the jsx and css files, and implementing useState and useEffect hooks.

Accomplishments that we're proud of

  • Successful training and processing of scalable NFT Art pieces using the CycleGAN model.
  • Successful pipeline and integration of all the techniques & all four tracks.
  • Successful code implementations in React.js for frontend, Circle API, NFT.storage API, and Rarible API for backend and database.
  • Successful minting implementation using the Rarible protocol to generate token IDs and mint the images.

What we learned

  • Frontend Development in React.js and Node.js
    • State management to reflect user funds across different React components.
    • Writing good code (readable and compartmentalized).
  • Storage and Fetching of images and metadata using NFT.Storage (IPFS & Filecoin)
  • Lazy mint NFTs using Rarible
  • OpenPGP encryption tools and protocol for sending credit card details to Circle’s API

What's next for HypeX

  1. Getting funds to start our product development
  2. Starting to develop our beta product
  3. Looking for more partners

Check our Deck: link
Check our Github: link
Follow us on Tiktok: link
Follow us on Instagram: link
Follow us on Twitter: link
Follow us on LinkedIn: link
Check our Litepaper: link
Check our Website: link
Check our Medium: link
Contact us on Telegram: link

Built With

Share this project:

Updates