[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-widget
package
$ 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.
If you enjoyed this article, give it a little clap! 👏