BOSON PROTOCOL Decentraland Gateway

Installation

npm i [email protected] boson-dcl -B

dcl build

Verify that these lines have been added in the file './tsconfig.json', otherwise add them manually:

{
  "compilerOptions": {
      ...
    "baseUrl": ".",
    "paths": {
      "eth-connect": [
        "node_modules\\eth-connect\\eth-connect.d.ts"
      ],
      "boson-dcl": [
        "node_modules\\boson-dcl\\dist\\src\\index.d.ts"
      ]
    },
  },
  ...
  "files": [
    ...
    "./node_modules/eth-connect/eth-connect.js",
    "./node_modules/boson-dcl/dist/index.js"
  ],
}

Finally, copy the following images from './example/images' into your project (in './images' folder):

• btn_close.png
• commit_background.png
• commit_button.png

Integrate with your scene

Modif your code as follow

• Import the type required for the Commit popup window

  import { UICommit } from 'boson-dcl';

• Define the canvas object in the scene, if not already done

  const canvas = new UICanvas();

• For each item for sale:
  • Create the popup window instance for these item (type UICommit)

    const fireworksCommit = new UICommit(
        canvas,
        {
          image: {
            texture: new Texture("images/fireworks-pot.png"),
            width: 900,
            height: 675
          },
          title: "Fireworks Pot",
          id: '151'
        }
      };

  • Where the 3D entity representing the item is created, attach the OnPointerDown event callback, showing the popup:

    const fireworksBox = new Entity('fireworksBox')
    ...
    fireworksBox.addComponentOrReplace(new OnPointerDown(() => {
      fireworksCommit.show();
    },
    {
      button: ActionButton.POINTER,
      hoverText: 'Buy me !!!',
    }))