[Tutorial] Auctionity Widget advanced integration

Following on our previous tutorial “Auctionity widget easy integration”, here’s a more advanced tutorial on how to integrate an auction widget in your application.

Setting Up The App

We are going to use yarn here, but you could use npm if you prefer.
Install create-react-app if necessary.

$ yarn global add create-react-app

We will create a new app auctioned-my-car which purpose is to auction my car:

Let’s start by creating:

$ create-react-app auctioned-my-car
$ cd auctioned-my-car
$ yarn start

Now we’ve got a running application, let’s integrate the Auctionity auction widget corresponding to my car.

Cleaning up our App

First of all, remove all unnecessary files: App.css, App.js, App.test.js … etc. Your project may look like that:

Adding the widget:

Go to https://app.auctionity.com and login to your account.

Creating a new auction

Copy the first code field provided.

and paste it in your index.html

Then if you‘re not already using Bit, configure its scoped registry to install components with Yarn:

$ yarn config set "@bit:registry" "https://node.bitsrc.io/"

or with npm:

$ npm config set @bit:registry https://node.bitsrc.io

More documentation about bit on https://bitsrc.io

Then install @bit/domraider.auctionity.global.auction-widgetpackage

$ yarn add @bit/domraider.auctionity.global.auction-widget

In your index.js

Here we are, our auction is live:

That’s fine, but maybe a bit too basic and not exactly what we want to highlight the beauty of our car.

Let’s customize it

So, what have we done?

The WidgetContainer is a kind of Super component in charge of creating a bridge between the client and the blockchain.

Its ids props is an array of auction ids, you can manage as many auctions as you want with only one container.
The container uses “Function as Child Components” pattern. As the name suggests, its child is a function, which parameters are all required information to display the auction as you wish.

id, name: the auction id and name.

amount is the current amount of the auction

history is an array of each bid on the auction, sorted by date from the most recent to the least

startAt, endAt are timestamp

isLogin is set to true if the client is logged in, default false

email is the email of the connected user, default null

bid is a function that takes 2 parameters, the id of the auction and the amount (raise). It will ask the user to authenticate if he has not yet.

logout function to disconnect 😮

pending is set to true during bidding process.

The final result

There we are! You can go even further with the “bc-auctionjs” client api, to manage your own authentication system, we will tell you more about this function in a coming article.