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

1# Using NPM  
2npm install @hashup-it/hashup-react-sdk
3
4# Using Yarn  
5yarn add @hashup-it/hashup-react-sdk

Usage

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

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

Now declare it in your component

1function App() {
2
3	const { buyGame } = useHashup()
4
5	return (<div className="App">/*Your app code*/</div>)
6}  

---

setMarketplace() function

accepts a single argument:

• address of your own marketplace

1...
2const { setMarketplace } = useHashup()
3
4function handleSetMarketplace() {
5	const marketplace = "0x714EF5c429ce9bDD0cAC3631D30474bd04e954Dc"; // Overwrite the default HashUp marketplace with yours
6
7	setMarketplace(marketplace)
8}
9
10...

Sets up your marketplace address.

---

buyGame() function

accepts two arguments:

• ERC20 token address of license you want to buy
• [how many licenses you want to buy]
• [game metadata to auto-save the token in user's wallet]

1...
2const { buyGame } = useHashup()
3
4function handleBuy() {
5	const license = "0x6cbf4648d1f326585f7aa768913991efc0f2b952" // Specify address of license you want to buy
6	const amount = "200" // Specify amount of license you want to buy  
7
8	buyGame(license, amount)
9}
10
11...

Clicking on button will now open MetaMask window. If user is not connected it will ask him to connect, then request approve (if needed).
After successfull approval it will request license buy transaction. It will take specified amount of USDT from user account and send licenses to his wallet.

---

setReferrer() function

accepts a single argument:

• address of the transaction referrer

1...
2const { setReferrer } = useHashup()
3
4function handleSetReferrer() {
5	const referrer = "0x486dFb71b0CaB4f16Aa760b868EBaFF17f0a6535"; // Set a 
6
7	setReferrer(referrer)
8}
9
10...

Sets up an address of someone referring a purchase.

Example use case: A person generates a referral link pointing to your website. Then, some other person after clicking it purchases a game, automatically triggering a referral action (handled by our protocol) along with the transaction.

---

approve() function

1...
2const { approve } = useHashup()
3
4function handleApprove() {
5	approve()
6}
7
8...

Triggers manual payment token approval. Example use case:

Hook Interface

1interface UseHashupOutput {
2    /**
3     * Allows for ahead-of-time payment approval. Called automatically by `buyGame()`.
4     */
5    approve: () => Promise<void>
6
7    /**
8     * Purchases a license. Defaults to one token bought, i.e. 100 units.
9     * @param address address of ERC20 licence about to be bought
10     * @param amount amount of token units bought (unit is 0.01 of a token)
11     */
12    buyGame: (address: string, amount?: string) => Promise<string | void>
13
14    /**
15     * HashUp-protocol lifecycle state. Affected by `buyGame()` method call.
16     * @default BuyStage.NOT_STARTED
17     */
18    buyingStage: BuyStage
19
20    /**
21     * HashUp-protocol wallet connection init status
22     */
23    isEthereumLoading: boolean
24
25    /**
26     * HashUp-protocol network compatibility status
27     */
28    isNetworkValid: boolean
29
30    /**
31     * Sets a custom marketplace. Defaults to HashUp.
32     * @param marketplace marketplace's blockchain address
33     */
34    setMarketplace: React.Dispatch<React.SetStateAction<string>>
35
36    /**
37     * Sets a reflink variable. Affects `buyGame()` method call.
38     * @param referrer purchase referrer's blockchain address
39     */
40    setReferrer: React.Dispatch<React.SetStateAction<string>>
41}

Class Diagram

Building

1. yarn install
2. revision bump
3. yarn build
4. npm publish --access public

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.