# How to Create Your Own Store on HashUp?

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.

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

Now declare it in your component

```jsx
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

```jsx
...
 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

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

Sets up your marketplace address.

#### `approve()` function

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

Triggers manual payment token approval. Example use case:&#x20;

<figure><img src="https://camo.githubusercontent.com/060abcf1dab6f2ec2741aad2854cdf24c56f92d762fdb876ddd146bd44adc4a0/68747470733a2f2f692e6962622e636f2f58706739635a342f53637265656e73686f742d323032332d30312d32352d61742d312d33312d30362d414d2e706e67" alt=""><figcaption></figcaption></figure>

### Hook Interface

```jsx
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

<figure><img src="https://3403329063-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVu5IOZOIpzC7vWcEvKek%2Fuploads%2FiuDdt5HESFwGHTQmjxtU%2Fimage.png?alt=media&#x26;token=be81e220-fc2d-414b-b175-3850eb46d6b7" alt=""><figcaption></figcaption></figure>

### 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](https://wiki.hashup.it/get-started/the-hashup-api).

```jsx
    <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

```jsx
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?

```javascript
//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!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.hashup.it/get-started/how-to-create-your-own-store-on-hashup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.