[Tutorial] Auctionity Widget advanced
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.
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
$ 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.
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.
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
endAt are timestamp
isLogin is set to
true if the client is logged in, default
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! 👏