My first contribution to utopian - Added Features to swapsteem

Repository

https://github.com/nirvanaitsolutions/swapsteem

New Features

This contribution is related to utopian Task Request. As a solution to this Issue I had to implement custom pricing feature to users while posting trade, along with ability to perform actions like Edit, Pause and Delete on the existing trade listing as per the mentioned task request.

The task was divided into 4 features as mentioned in the TR.

In the PostTrade component, we need an additional input box for "margin" field which will accept values from -25% to 25 percentage. The price of such a listing will be determined as
Ad_Price = Current Price of Coin + Current Price of Coin * margin
If the margin is set negative, the price will be lower than the current price and vice versa.
To implement this feature, we had to ask the user for their desired margin over the current market price while creating a new trade listing. Further, we had to display the existing and new trade listings with the revised margin. The formula for calculation of the effective price is also mentioned above.

To complete this feature, I had to uncomment and reuse the existing margin field in the form, while making sure that the selected margin is correctly being sent to the server. Also, I had to change the existing calculatePrice() in the Buy, Sell and Purchase components to align the prices with the desired margin selected by the user as below.

calculatePrice(from: string, to: string, margin: number) {
    if (from == "STEEM") {
      switch (to) {
        case "USD":
          return Math.round(this.steemPrice[0] * (1 + margin / 100) * 100) / 100;
        case "INR":
          return Math.round(this.steemPrice[1] * (1 + margin / 100) * 100) / 100;
        case "KRW":
          return Math.round(this.steemPrice[2] * (1 + margin / 100) * 100) / 100;
      }

    }
    else if (from == "SBD") {
      switch (to) {
        case "USD":
          return Math.round(this.sbdPrice[0] * (1 + margin / 100) * 100) / 100;
        case "INR":
          return Math.round(this.sbdPrice[1] * (1 + margin / 100) * 100) / 100;
        case "KRW":
          return Math.round(this.steemPrice[2] * (1 + margin / 100) * 100) / 100;
      }

    }
  }

This was done in the commit Implement price with margin values.

You can see the added margin field and updated prices in below screenshots.
Post A Trade:

Home :

Buy :

Sell :

To implement the Rest of the 3 features I replaced the existng non functional View/Edit button in the profile component with an Anctions Dropdown to enable any of the above features via a single click as explained below.

Ability to VIEW/EDIT a trade listing
This feature enables users to view and edit their previously created listing from their profile page. This can be done via the Edit button. This was done in the commit Implement ad update feature
Ability to PAUSE a trade listing
This feature enables users to PAUSE their trade listing if they are not available to trade. Other users will not be able to see the trade listing until it's resumed. This can be done via the Pause button. This was done in the commit Add pipe for ad_status
Ability to DELETE a trade listing
This feature enables a user to DELETE their trade listing if they are no longer willing to trade.This can be done via the Delete button. This was done in the commit Implement ad delete and pause feature

 viewAds(ad: AdvertisementResponse) {
    this.router.navigate(['post-trade/' + ad._id]);
  }

  pauseAd(id: string) {
    this.apiSer.pauseAd(id).subscribe(res => {
      this.openAds = this.apiSer.getAdsByUser(this.userData.name);
    });
  }

  deleteAd(id: string) {
    this.apiSer.deleteAd(id).subscribe(res => {
      this.openAds = this.apiSer.getAdsByUser(this.userData.name);
    });
  }

And in API Service I had to add POST calls to the API.

deleteAd(id: string): Observable<AdvertisementRequest> {
    // httpOptions.headers = httpOptions.headers.append("Authorization",this.token.access_token);
    return this._http.delete<AdvertisementRequest>(`http://swapsteem-api.herokuapp.com/advertisements/${id}`);
  }

  pauseAd(id: string): Observable<AdvertisementRequest> {
    // httpOptions.headers = httpOptions.headers.append("Authorization",this.token.access_token);
    return this._http.put<AdvertisementRequest>(`http://swapsteem-api.herokuapp.com/advertisements/${id}`, JSON.stringify({
      ad_status: "pause"
    }));
  }