Integration Steps

To help you integrate RentFun-Javascript-SDK more efficiently, we have summarized the following integration development steps and provided an integration example for better understanding.

There are five steps:

  1. Install and setup RentFun.

  2. Add rental-related fields to the NFT structure, primarily two fields: rented (boolean) and endTime (number).

    1. Default values for these fields could be: {rendted: false, endTime: 0}.

    2. Rental NFTs returned by the SDK will include these fields. Here's the Rental structure:

    endTime is a timestamp in seconds, vault is a contract address used to hold the NFT.

    Rental {
  renter: string,
  contract: string,
  tokenId: number,
  vault: string,
  endTime: number,
}

  3. Modify the method for obtaining user NFTs to include the user's rented NFTs.

  4. Monitor the rental's remaining time.

    Use rented && endTime < Math.floor(Date.now() / 1000) to determine whether the rental has expired.

  5. Display the two new fields: rented and endTime.

    You can skip this step if you don't want to display these fields.

Integration Example

Game-Turtis is an open-source NFT game integrated with RentFun.

This commit of Game-Turtis contains all the code changes needed for RentFun integration. Below is an explanation of the changes in this commit to help you better understand the integration steps above.

  1. Install and setup RentFun.

    The commit used yarn add rentfun, which updated both yarn.lock and package.json.

  2. Add rental-related fields to the NFT structure.

    This change can be seen in the file global.d.ts, where you can also see the Rental structure that will be used later in a new funtion called getRentedTurtles.

  3. Modify the method for obtaining user NFTs.

    Previously, there was a function called getUserTurtles in the file Web3Client.ts used to get user NFTs. This function was modified as follows:

    1. The name getUserTurtles was renamed to getOwnedTurtles and default values rented: false, endTime: 0 were added to the returned metadata structure.

    2. Another function, getRentedTurtles, was added to get the user's rented NFTs.

    3. A new function was created with the same name as getUserTurtles to combine the results of getOwnedTurtles and getRentedTurtles. This way, the previous calls to getUserTurtles don't require any changes. The new function looks like this:

    export const getUserTurtles = async () => {
   const owned = await getOwnedTurtles();
   const rented = await getRentedTurtles();

   // @ts-ignore
   return [...owned, ...rented];
}

  4. Monitor the rental's remaining time during gameplay to end the game when the rental expires.

    1. Implement listening to endTime and controlling the end of the game through the file GameManager.ts. Code could be like this:

        if (this.rented && this.endTime < Math.floor(Date.now() / 1000)) {
        this.events.emit(CUSTOM_EVENTS.DEAD);
    }

    1. The other two files, UIManage.ts and TurtleSelectionMenu.ts, was modified to help the file GameManager.ts obtain the values of the two new fields: rented and endTime.

  5. Display the two new fields: rented and endTime.

    This change can be seen in the file TurtleDetails.ts.

PreviousInterfacesNextGeneral

Last updated