How to Create Your Own Store on HashUp?

HashUp's mission is to power thousands of stores at once!

HashUp is the infrastructure and protocol needed to create your own game store. A full-fledged Web3 game store requires a Games + Whitelabel Web3 PC Launcher with Metamask.

The HashUp architecture is divided into four segments:

1. The HashUp protocol for license sales

2. ERC20-compliant licenses

3. An open API that allows you to have information about licenses

4. PC Launcher!

HashUp SDK for React

This is official HashUp protocol SDK for React. You can use it to make your own marketplace using our protocol.

Installation

# Using NPM  
npm install @hashup-it/hashup-react-sdk

# Using Yarn  
yarn add @hashup-it/hashup-react-sdk

Usage

At top of the file import useHashup hook from our SDK.

import { useHashup } from "@hashup-it/hashup-react-sdk"  

Now declare it in your component

function App() {  

 const { buyGame } = useHashup()
 
 return ( <div className="App"> /*Your app code*/ </div> )}  

---

buyGame() function

accepts two arguments:

• ERC20 token address of license you want to buy

• how many licenses you want to buy

...
 const { buyGame } = useHashup()
 
 function handleBuy() {
   const license = "0x6cbf4648d1f326585f7aa768913991efc0f2b952" // Specify address of license you want to buy
   const amount = "200" // Specify amount of license you want to buy  
 
   buyGame(license, amount)  
 }  
...

Click the button to open the MetaMask window. If the user is not connected, it will ask them to connect, then request approval (if required). After successful approval, it will request a license purchase transaction. It will take specified amount of USDT from the user's account and send licenses to his wallet.

---

setMarketplace() function

accepts a single argument:

• address of your own marketplace

...
 const { setMarketplace } = useHashup()
  
 function handleSetMarketplace() {
   const marketplace = "0x714EF5c429ce9bDD0cAC3631D30474bd04e954Dc"; // Overwrite the default HashUp marketplace with yours
 
   setMarketplace(marketplace)  
 }  
...

Sets up your marketplace address.

approve() function

...
 const { approve } = useHashup()
  
 function handleApprove() {
   approve()  
 }  
...

Triggers manual payment token approval. Example use case:

Hook Interface

interface UseHashupOutput {  
  /**  
   * Allows for ahead-of-time payment approval. Called automatically by `buyGame()`.
   */  
  approve: () => Promise<void>    
  
  /**  
   * Purchases a license. Defaults to one token bought, i.e. 100 units. 
   * @param address address of ERC20 licence about to be bought  
   * @param amount amount of token units bought (unit is 0.01 of a token)  
   */  
  buyGame: (address: string, amount?: string) => Promise<string | void>
  
  /**  
   * HashUp-protocol lifecycle state. Affected by `buyGame()` method call. 
   * @default BuyStage.NOT_STARTED  
   */  
  buyingStage: BuyStage
  
  /**  
   * HashUp-protocol wallet connection init status 
   */  
  isEthereumLoading: boolean
  
  /**  
   * HashUp-protocol network compatibility status 
   */  
  isNetworkValid: boolean
  
  /**  
   * Sets a custom marketplace. Defaults to HashUp. 
   * @param marketplace blockchain address  
   */  
  setMarketplace: React.Dispatch<React.SetStateAction<string>>
  
  /**  
   * Sets a reflink variable. Affects `buyGame()` method call. 
   * @param referrer purchase referrer's blockchain address  
   */  
  setReferrer: React.Dispatch<React.SetStateAction<string>>
}

Class Diagram

Where to get license data?

All games listed on HashUp protocol are available at https://open-api.hashup.it/v1/tokens endpoint of our public API.

For example:

• https://open-api.hashup.it/v1/tokens/<chain|chainId> – to get all polygon tokens example: https://open-api.hashup.it/v1/tokens/137/

• https://open-api.hashup.it/v1/token/<chain|chainId>/<address> – to get a specific token example: https://open-api.hashup.it/v1/token/137/0x6cbf4648d1f326585f7aa768913991efc0f2b952

You can check full API specification at wiki.hashup.it.

    <div className="App">
        //Your app code
    </div>
  );
}

buyGame() function accepts two arguments

• ERC20 token address of license you want to buy

• how many licenses you want to buy

function App() {

  const { buyGame } = useHashup()

  
  //API Integration
  //This data you can get by integrating with HashUp Open API
  const licenseAddress = "0x123 ... abc" // Specify address of license you want to buy
  const licenseAmount = 2 // Specify amount of licenses you want to buy

  function handleLicenseBuy() { 
      buyGame(licenseAddress, licenseAmount)
  }

  return (
    <div className="App">
       <button onClick={handleLicenseBuy}>Buy 2 copies of game</button>
    </div>
  );
}

Click the button to open the MetaMask window. If user is not connected, it will ask him to connect, then request approval. After successful approval, it will request a license purchase transaction. It will take specified amount of USDT from the user's account and send licenses to his wallet.

The HashUp API - how to connect?

//Sample request in axios  
const axios = require('axios')

const getAllHashUpLicenses = async () => {
    const { data } = await axios.get('http://open-api.hashup.it/v1/tokens')

    console.log(data)

    return data;
}

getAllHashUpLicenses()
//Returns an array of The HashUp Licenses

PC Launcher!