Tutorial/Documentation¶

This is a tutorial/documentation about the WAX ExpressTrade API.

Issues¶

If you have troubles with the API, head over to the official GitHub repository.

Hint

The playlist for the videos can be found on YouTube

Getting Started¶

Hint

The video for this parts can be found here

This document will show you how to implement the WAX ExpressTrade to your website.

Info

If you already have a VGO API Key and an Ethereum Adress you can skip this section.

Basic information¶

The documentation requires a little bit of knowledge about the following points.

API¶

An application program interface (API) is a set of routines, protocols, and tools for building software applications. Basically, an API specifies how software components should interact. Additionally, APIs are used when programming graphical user interface (GUI) components. A good API makes it easier to develop a program by providing all the building blocks. A programmer then puts the blocks together. So this means it is even easier to implement the WAX ExpressTrade features.

Server & HTTP¶

So the server usually handles all the requests made to the API. For better structure you will need some kind of HTTP server to make requests to the WAX ExpressTrade API. HTTP related terms like GET and POST shouldn’t be a problem as well.

JSON¶

JSON is very popular nowadays, especially with these so called REST-API’s. The WAX ExpressTrade API uses JSON to format the information. Every requests needs some kind of JSON-structure. The response of every API-endpoint will also always return an JSON-Object (Unless you encounter some kind of other error).

Requirements¶

To get in touch with WAX ExpressTrade API it only requires three things. We will go over them, what they do and how to fulfill them.

VGO API Key¶

For most of the WAX ExpressTrade API you will need to provide an API Key. (To identify yourself) You can simply generate one by using the following method.

Open up some kind of console (Windows Command Prompt, Linux/Mac Terminal)
Copy the line beneath and change the site_url and display_name to a valid value. (This should be the name of your website)

$ curl -d '{"site_url":"http://yoursite.com","display_name":"yoursite"}' -H "Content-Type: application/json" -X POST https://api-trade.opskins.com/IUser/CreateVCaseUser/v1/

Wait for the response

You probably will receive a response like this (If not, the error should be returned. Try to adjust/edit your curl line and try again)¶

{
   "status":1,
   "time":1535545650,
   "response":{
      "api_key":"some kind of api key",
      "user":{
         "id":-868,
         "steam_id":"",
         "display_name":"yoursite",
         "avatar":null,
         "twofactor_enabled":false,
         "api_key_exists":true,
         "sms_phone":null,
         "contact_email":null,
         "allow_twofactor_code_reuse":false,
         "inventory_is_private":true,
         "auto_accept_gift_trades":false,
         "vcase_restricted":true
      }
   }
}

Your “VGO API Key” will be placed in the JSON-Object with the name “api_key”. Save it, you will need it later on

Ethereum Address¶

An Ethereum Address is needed for the key requests (to open cases). There are tons of Ethereum Wallets on the internet, nearly all of the are free to use. For the ease of use I’d recommend MetaMask or if you want it more secure maybe go for something like Coinbase. The choice is up to you. At some point you should have an Ethereum Adress looking something like this: 0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe

Initial Testing¶

This specific section should help you to verify and understand how and if you requests work.

The First Request¶

To make your first request I recommend a program like Postman.

But why would we need that?
Simply because it is easier to use if you want to make requests to the API and you can quickly test and check specific API endpoints. You can add your API Key which we will need for some actions and you can format the JSON much more easier as well.

Once you downloaded the program you will be prompted to sign in (You can skip that at the bottom). Afterwards we can try to make our first request to the WAX ExpressTrade API.

Our first request will not require an VGO API Key. At the top input bar where it says Enter request URL type in something like https://api-trade.opskins.com/ICase/GetCaseSchema/v1 and choose GET as your request method.

If it was successful, you should see something like that in the image above.

Well that was easy, but you also could have done that request in your browser by typing in the URL.

The Second Request¶

Now we want to make a request that requires the API Key. The WAX ExpressTrade API has a “Basic Authorization” System. This means we have to convert your VGO API Key to Base64 before we make our request.

Head over to https://www.base64encode.org/.
Type in your API Key and add a colon : at the end of it so it looks something like this 47319062320152072c7da23f51327d:
Hit ENCODE and copy the Base64 string
Head over to Postman again and click on the tab “Headers”
For the Key you need to type in Authorization and for the Value you have to type in Basic YOUR_BASE64_STRING

Once this header is set you can choose an API endpoint that requires the API key. In this case I chose https://api-trade.opskins.com/IItem/GetItems/v1/ to get all the items and stats to each item in the cases.

If you messed up something it probably will have a response like

{
  "status": 401,
  "time": 1535573754,
  "message": "API Key Required"
}

Troubleshooting¶

Check if you have ticked the box to send the Authorization Header
Check your Key and Value for this specific header
Check your Base64-String. Does it end with “==” or not?
Check your String before converting it to Base64. Have you added to colon :?
Try a new API Key, or this one, used for the tutorial NDczMTkwNjIzMjAxNTIwNzJjN2RhMjNmNTEzMjdkOg==

Conclusion¶

So you have successfully requested data from the WAX ExpressTrade API. You can also POST data to the API. Search for a POST request in the “Advanced Documentation”, add your API Key like we did in the tutorial above and POST your data.
Of course you can try different endpoints, scroll through all the JSON-Data the server has returned and check it’s content or use other request types such as POST.
But all in all this is pretty easy isn’t it? But we want to implement this into a website, not just requesting data in Postman to view it.

Setup¶

We want to split up the implementation into 2 main parts

Backend (Server)¶

So the server (also called backend) should handle all our requests made to the WAX ExpressTrade API.

You may wonder why we should do that because we could make our requests through the frontend (Website) as well. There are a couple of reasons starting with

You need some kind of server to host your website
- If you have a more static site, a simple Apache or NGINX server will probably do it
- But this tutorial focuses more on developing a web app and less on a static website
- Creating your own simple HTTP server will give you more flexibility
The VGO API Key
- As mentioned in the previous section we need the VGO API Key for most of our requests. So if you want to make a request, for example to initiate a case opening, you would need the API Key of course.
  
  Keep in mind that you do not want to share you API Key with others, because it is linked to your website and website name.
  
  If you make your requests through the frontend (website) you have to save your API Key to the HTTP request which means it is public and everybody can abuse it.
  
  You need to make sure your server works as a middleware between the WAX ExpressTrade API and your frontend (website).

Frontend (Website)¶

So the frontend (website) will be completely up to you. How you design it, how your animations will work, how you will implement the requests.

Here are some recommendations you could use to make an advanced, progressive web app

The most known and common framework React
- easy to start and learn
- lot’s of free tutorials on YouTube (Check out Traversy Media for excellent and detailed tutorials)
- Direct links to the tutorial React JS Crash Course and a playlist about Learning React
Another great frontend framework Angular
- Nearly same features as React but everything in TypeScript instead of JavaScript
- Video Angular In 60 Minutes
Vue.js
Very simple and old school with plain JavaScript and jQuery (not recommended for progressive web apps)

Backend (Server)¶

Hint

The video for this parts can be found here

This section will be about how to request data from the WAX ExpressTrade API and how to bring this data to the frontend (website) so the user.

For this purpose we will create a simple HTTP server in JavaScript with the help of Node.js.

Hint

All the code written below is also available on GitHub.

Requirements¶

In my opinion the easiest way to get started with an HTTP server is to create an Node.js HTTP Server. We will use the very popular package express for this purpose.

But first let’s talk about the requirements to get started

We will need Node.js.
- Installation guide for Windows
- Installation guide for Linux (all versions)
A more advanced text editor than Notepad in Windows to write our code. Recommended free text editors:
- Atom
- Visual Studio Code (only for Windows)
- Sublime Text
(Optional and only for Windows users) A different console
- I personally do not like the command prompt in Windows
- My favorite console so far is the GIT Console (You will see why later on)

Once you installed Node.js and chose your text editor we can start coding. I will use the following setup for this tutorial

Node version 8.11.4 (you can check it by simply opening a console and by typing in node --version)
Atom (1.30.0) as my text editor with the File Icons Package (just for cosmetic)
Because I am on Windows 10, I am going to use the GIT console

Step 1¶

We need to create all the dependencies for our Node.js Server

Create a folder where you want to put your server
Open up a console and direct into that newly created directory (if you are using the GIT console on Windows, you can simply right-click and choose “Git Bash Here”)
Once you are in the desired directory type in npm init to start the setup
- package name Choose the name of your project. Usually it picks up the name of your folder. I will call it wax_tut.
- version Doesn’t matter at all, just hit Enter
- description Type in something like “This is a tutorial on how to implement the WAX ExpressTrade API” or if you want to skip it, hit Enter
- entry point This is important. Here you have to choose the name of your main server file. You can either choose the default value “index.js” or rename it to something like server.js. I will call it server.js
- test command Skip this for now
- git repository If you already got an git repository, you can type it in here. Otherwise you can skip this.
- keywords Define some or skip, doesn’t really matter
- Author Basically your name
- license Just hit Enter
- Check your inputs and confirm with yes (Don’t worry you can change the values afterwards)
Create a JavaScript file with the name you chose at entry point. In this case you need to create a file called server.js
Open this file with your desired text editor

Step 2¶

In Step 1 we created our project and our server file. In this part we will set up the basic structure of our server and test it if everything works.

Double-Check your folder if you see both the package.json and server.js file.
Install the dependencies we need for the HTTP Server
- As mentioned earlier, we will use express for our HTTP server.
- Open up your console again and type in npm install --save express. This will install the express package and with the option --save you will also save the dependency to your package.json file, so you always know what dependencies are install in your “node_modules” folder
Paste this basic HTTP server into your server.js file

var express = require('express')
var app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

Code explanation¶

var express = require('express') First of all we implement our express package so we can use all it’s functions.
var app = express() Afterwards we create an instance of the class so we can access every function.
Next we create our first route that will send a response once it gets called.
- But the method has to be GET and the route must be “/” to access it.
The last part is on which port our server should listen. Keep 3000 for now, but you can always change it as you wish.

Let’s try it out¶

So if you pasted in this code and saved it to the server.js file, go over to your console again (make sure you are in the right directory) and type in node server.js to boot up the server.

Note

For testing purpose I recommend the package nodemon so the server simply restarts every time we change something. Otherwise you would have to cancel it with CTRL+C and restart it with node server.js. Install the package with npm install -g nodemon and start your server with nodemon server.js

Once your server is running either go to your browser or open up Postman and type in 127.0.0.1:3000. (This is your local IP-Address on your computer)

If you are being greeted with “Hello World” you have successfully created your HTTP server in JavaScript

Step 3¶

Your HTTP server is up and running and you have successfully accessed it. Time to request data from the WAX WAX ExpressTrade API.

So the basic idea behind this

We request something from OUR HTTP server like we did to check if the server is working e.g. 127.0.0.1:3000/caseschema.
The server should request data from the WAX ExpressTrade API before it sends the response back to us.
Instead of “Hello World” we should see data from the ExpressTrade API.

Let’s see how we can do that.

We need another package to request data from other sources. For this we will use axios.
Head to your console and press CTRL+C to stop the server.
Type in npm install --save axios to install the package.
Head over to the text editor and change the code.

// Packages
var express = require('express')
var Axios = require('axios');

// Variables
var vgoURL = "https://api-trade.opskins.com";
var vgoAPIKey = "YOUR API KEY";

// Variable for WAX ExpressTrade requests
var vgoAPI = Axios.create({
  baseURL: vgoURL,
  headers: {
    Authorization: 'Basic ' + Buffer.from(vgoAPIKey + ':').toString('base64'),
  },
});

// create express server
var app = express()

// route 1 (simple GET request)
app.get('/caseschema', async function (req, res) {
  let response = await vgoAPI.get('/ICase/GetCaseSchema/v1');
  res.send(response.data);
});

// start server
var listener = app.listen(3000, function() {
  console.log('Listening on port ' + listener.address().port);
});

So the code changed quite a bit, let’s go over it real quick and talk about how you can customize it.

So following changes have been made:

I added the axios package that we use to request the data from the API
Two new variables have been added vgoURL and vgoAPIKey. You do not need to touch the vgoURL but you have to paste in your generated VGO API Key (Not the Base64 encoded one, but the plain VGP API Key)
Afterwards I created a new instance of axios and saved it to the variable vgoAPI. This comes in pretty handy because later on we only need to call the variable vgoAPI to make a request to the actual API. This request will always have the “Authorization Key” in it, so we don’t have to worry about that.
I made some changes to the GET / route and renamed it GET /caseschema. It now requests data from the WAX ExpressTrade API. You may wonder why there is an async/await in it. I’ll explain this as short as possible.
- The quick and easy answer is, that the async which stands for “asynchronous” prevents Node.js to do things at the same time.
- “Asynchronous” means it is not existing or occurring at the same time.
- If don’t use the async/await your response would be empty because Node.js is trying to do this one function at the same time.
- The request/response to the WAX ExpressTrade API needs more time than our server needs to respond to the GET /caseschema call.
No we send the response.data as a response instead of “Hello World”
I changed to code on how the server starts, it does the same but will show you a console entry when the server has been started successfully

So once again either head over to your browser or Postman (this time I highly recommend Postman because it will be a lot of JSON data) and try out what results you get.

You should get a list off all the available cases (name, image) and what item skus are in it.

Additional Examples¶

This section is about some another examples of how to use the WAX ExpressTrade API.

Example 1¶

GET request with additional parameters¶

// route 2 (GET request with additional parameters)
app.get('/keycount', async function (req, res) {

  var trade_url = req.query.trade_url;

  if (!trade_url) {
    return res.send("No trade url provided");
  }

  let response = await vgoAPI.get(`/ICaseSite/GetKeyCount/v1?trade_url=${trade_url}`);
  res.send(response.data);
});

Explanation¶

So this this route requests the key amount a specific user has. Again we use a GET method but this time we have to provide an additional parameter in the URL called trade_url.
In express you can access those URL parameters via req.query.YOUR_PARAMETER. Easy to use and fast to understand. So you save the req.query.trade_url parameter to a variable called trade_url.
Afterwards we quickly check for this parameter if it has been provided. If not provided we simply return a response. (Sidenote: You need to type return res.send("...") to stop the function from continuing. If there is no return provided, the code will continue and fail at the request.)
Anyways, with a provided trade_url we request the data from the server. Take a look and remember on how to add the query to the URL ?trade_url=${trade_url}, you will probably need that for other requests as well.
And for the last part we send the response back to the request.

Note

You can only request the keycount of people that have been registered on OPSkins.

How To Test It¶

Note

If you are familiar on URL parameters and how to use them properly you can probably skip this part and just test your newly created route.

For those that are not comfortable with, I got you

URL parameters are additional string in the URL.
For example if you go to https://www.google.com you won’t see any parameters in the URL.
But once you search for something like wax expresstrade, Google will add parameters to its URL. The URL will look something like this https://www.google.com/search?source=hp&ei=5m6IW6r0LY_YwQL2ma_ACg ... (Not the full URL)
So the URL has a parameter for source and ei and so on and so forth.
In our case the parameter should have the name trade_url and has to be provided.
This means our URL has to look like this http://127.0.0.1:3000/keycount?trade_url=VALID_TRADE_URL to successfully request data from the API

Note

If you encounter some kind of error it will probably be something like UnhandledPromiseRejectionWarning and the API responded with something like Request failed with status code 400. I will talk about that in the next example (Explanation, 4.).

Example 2¶

POST request with additional parameters¶

// used to access the body as it was JSON
app.use(express.json())

// route 3 (POST request with additional parameters)
var affiliateAddress = "YOUR ETHEREUM ADRESS";

app.post('/opencase', function (req, res) {

  if (!req.body.trade_url  || !req.body.caseId || !req.body.amount) {
    return res.send("One or more parameters are missing!");
  }

  vgoAPI.post('/ICaseSite/SendKeyRequest/v1', {
    trade_url : req.body.trade_url,
    case_id: req.body.caseId,
    amount: req.body.amount,
    affiliate_eth_address: affiliateAddress
  })
  .then(function(response) {
    res.send(response.data);
  })
  .catch(function(error) {
    res.send(error.response.data.message);
  })

});

Explanation¶

So first of all this is a more advanced example but a very efficient and easy to understand one.

We are using a middleware for express to access the body as it was JSON. app.use(express.json())
We created a variable affiliateAddress. You need to put your Ethereum Address to receive the commission for an opened case.
A new route has been created, but this time we do not use the GET method, for this example we are using the POST method.
Once again we check for three parameters that must be included in the request. But this time we are sending it via the body so the parameters won’t be in the URL.
A new way of requesting data from the WAX ExpressTrade API
- First of all we are using the POST method again, that is very important because only the POST method will be recognized on this endpoint
- Second of all we are using a better way of handling the response and sending it back. This means we are using the option of “Promises”. Thankfully axios got our back and provides a great and standard way of handling “Promises”
- So we do not save the response to a variable called response like we did in all the other routes. Instead we use the then() callback option.
- Once our request has succeeded, the then() function will be called and we can simply send our response as we did in the previous routes
- The big advantage of “Promises” is the catch() function.
- If there is any error it will be handled by this function. If the request wasn’t successful, the “message” can be found by the given query error.response.data.message (the data is an JSON-Object)

Caution

If you are thinking of serious development I highly recommend using “Promises”. Not using “Promises” actually is deprecate!

Frontend (Website)¶

Hint

The video for this parts can be found here

This specific section is all about on how to use your “middleware API” for your purpose. If you already know how to build a website and make request, handle your data or errors you can skip this section and head over to the Advanced Documentation to see the WAX ExpressTrade API documentation.

In this section I want to show you how you can implement your “middleware API” into an Angular web app.

Caution

DISCLAIMER This section is just a basic tutorial on how to get started with implementing the API on a website. If you know how to do it on your own just skip this!

Hint

All the code written below is also available on GitHub.

Angular¶

Angular definitely more complex than other frontend frameworks, this is why I want to give you a quick overview.

Requirements¶

We will need Node.js.
- Installation guide for Windows
- Installation guide for Linux (all versions)
A more advanced text editor than Notepad in Windows to write our code. Recommended free text editors:
(Optional and only for Windows users) A different console
- I personally do not like the command prompt in Windows
- My favorite console so far is the GIT Console (You will see why later on)
The Angular CLI
- You can simply download Angular CLI by typing npm install -g @angular/cli into your console
- We need that to create and build our Angular application

Once you installed Node.js and chose your text editor we can start coding. I will use the following setup for this tutorial

Node version 8.11.4 (you can check it by simply opening a console and by typing in node --version)
Atom (1.30.0) as my text editor with the File Icons Package (just for cosmetic)
Because I am on Windows 10, I am going to use the GIT console

Step 1¶

Creating an setting up our application.

To create a new application type ng new PROJECT-NAME in a newly opened console (watch out for the path in the console)
- You can choose any project name you like, as long as it matches the criteria
cd into your newly created project folder with cd PROJECT-NAME
Start your Angular application with ng serve
Open up your browser and type in 127.0.0.1:4200 or localhost:4200
You will be greeted with the default starter template

Caution

Make sure your API server is still up and running

Step 2¶

Time to add components, services and directories we need for our project.

If you have never worked with Angular, I recommend reading this article before you start coding your application.

Cancel the ng serve with CTRL+C
Change directory by typing cd src/app/
Create a new folder named components mkdir components
Change directory once again into the newly created directory cd components/
Create your components with ng g component COMPONENT-NAME
- For this tutorial we will create a component named navbar and main

Now repeat these steps with services

We have to change directory to src/app/ again because now we are in src/app/componets. Simply type cd ..
Create a new folder named services mkdir services and cd into it
Create your services by typing ng g service SERVICE-NAME
- For this tutorial we will create a service named api

That’s it for creating directories, components and files (You could generate all these things in the src/app/ directory but it will become very messy.)

You can now serve your application once again with ng serve

Step 3¶

Open up your text editor and add your Angular application folder as a project folder.

Search for the file app.module.ts in src/app/.
Your components should already be added to this file (If not, just look at the code given below). Your code should look something like this

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { MainComponent } from './components/main/main.component';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    MainComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add your “API Service” by typing import { ApiService } from './services/api.service'; and add the ApiService Class to the providers.

import { ApiService } from './services/api.service';

providers: [ApiService],

Next we have to add the HttpClientModule to our app.module.ts file to make HTTP requests to the server.
- Simply import it at the top by typing import { HttpClientModule } from '@angular/common/http';
- And add the HttpClientModule to the imports at the bottom
(optional) The last thing we are going to add is Bootstrap to have some kind of nice design and a better UI
- Head over to https://getbootstrap.com/ and download the latest version (currently 4.1.3)
- Go for the Compiled CSS and JS Bootstrap version
- Go to https://jquery.com/download/ and download the latest version of jQuery (go for the “compresed” one)
  
  You are better off if you hover of the “Download the compressed, production jQuery 3.3.1” link and right-click on it to “Save link as”
  
  Save it to the Desktop for now
- Head to your Angular project folder and search for the src/assets/ directory via your explorer
- Unzip the Bootstrap archive and copy the css and js folder into the src/assets directory
- Copy the jQuery.js file you saved on the Desktop into the src/assets/js folder
- Open up your text editor and search for the angular.json file in the project folder
- Search for line 25, you should see an entry called styles. Copy this path above the "src/styles.css" one "src/assets/css/bootstrap.min.css"
- Underneath the style entry there also should be scripts - Add the two following lines - "src/assets/js/jquery-3.3.1.min.js" - "src/assets/js/bootstrap.min.js" - Don’t mess up the order of this two line and don’t forget a comma after the jquery entry

It should look like this afterwards

{
  "styles": [
    "src/assets/css/bootstrap.min.css",
    "src/styles.css"
  ],
  "scripts": [
    "src/assets/js/jquery-3.3.1.min.js",
    "src/assets/js/bootstrap.min.js"
  ]
}

The last step is to restart your Angular application by canceling the serve with CTRL+C and ng serve.

That was it, we can now start coding our application.

Step 4¶

This section is about using our two created components and how to add some content on the page.

Implementing our components¶

Change the code in the app.component.html file to this

<app-navbar></app-navbar>
<app-main></app-main>

Explanation¶

With this two tags (which are Angular specific) we include our two created components navbar and main. The name app-navbar and app-main is specified by the component.

You can head over to your browser and check what has changed. You should see “navbar works” and “main works”. If not, open up the browser developer console and check for any errors.

Adding content to the navbar and main component¶

Head over to the navbar component and search for the navbar.component.html file.
Copy the following template into the HTML file

Default navbar template found on https://getbootstrap.com/docs/4.1/components/navbar/¶

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom: 1em;">
  <div class="container">

    <a class="navbar-brand" href="#">WAX Tutorial</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://trade.opskins.com/" target="_blank">Trade</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

I have changed the navbar a little bit so we can work with it even better.

Now let’s change the main component

Search for the main component directory to edit the main.component.html file.
Add the following code

Default card component¶

<div class="container">
  <div class="row">
    <div class="col">
      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="https://via.placeholder.com/350x150" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

Now save everything and head over to your browser to see the changes.

Step 5¶

Time to request data from the server and show it on our website.

Focusing on the API service¶

Open up the api.service.ts file
Copy in the following code, and check the “Explanation” below to understand what is going on.

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private _http: HttpClient) { }

  getCaseSchema() {
    return this._http.get<CaseSchema>("http://127.0.0.1:3000/caseschema");
  }

}

interface CaseSchema {
  status: any,
  time: any,
  response: any
}

Explanation¶

Once again we need the HttpClient to access HTTP requests
To use it, we need to define it in the constructor as well
We created a function that requests the “CaseSchema” from our API
This function can now be called from everywhere

Implementing The Service¶

So the next thing is to use our service function on the main component.

Open up the main.component.ts file (This file contains all the logic behind your static website)
Copy the code below and paste it into the file
Head to the explanation section to understand the code

import { Component, OnInit } from '@angular/core';

import { ApiService } from '../../services/api.service'

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {

  constructor(private _api: ApiService) {
    this._api.getCaseSchema()
      .subscribe(data => {
        console.log(data);
      }, error => {
        console.error(error);
      });
  }

  ngOnInit() { }

}

Explanation¶

So first of all we have to include our API service file into this one to use our function
Once again we create an instance of the class as seen in the constructor()
We call the function in the constructor so once the website is loading we are requesting the data immediately
How does the function even work?
- this._api.getCaseSchema() this is just the way to call the function
- .subscribe() Angular works with Observables which means you can only subscribe or unsubscribe to them (More about Observables can be found here)
- Inside the subscribe() Method we can access two variables. One that contains our data called data in this case (You can call it whatever you want) and another one that contains any errors called error here (Again you can call it whatever you want)
- It is recommended to use a better way of handling errors than simply log them to the console.
For now we are just printing the data to the browser developer console.

So let’s head over to the browser and open up the console (Shortcut: F12)

Error¶

So you probably see an error saying No 'Access-Control-Allow-Origin' header is present on the requested resource.. This is more or less our “mistake” but actually this is a safety feature provided by your browser (I won’t go any deeper on that topic).

We can fix this by creating a proxy for this request.

Create a file named proxy.conf.json in the root folder of your Angular project folder
Copy and paste the following code

{
  "/caseschema": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  }
}

Edit the angular.json file.
- Head to line ~54 (this may differ, but just look for the entry "serve")
- Copy "proxyConfig": "proxy.conf.json" into the options so it looks like this

{
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "frontend:build",
      "proxyConfig": "proxy.conf.json"
    },
    "configurations": {
      "production": {
        "browserTarget": "frontend:build:production"
      }
    }
  }
}

Restart the Angular serve instance by opening up the console, pressing CTRL+C and entering ng serve once again.
Adjust the URL in the api.service.ts file from http://127.0.0.1:3000/caseschema to just /caseschema

Now head to your browsers (maybe you have to refresh the website) and take a look in the console. You now should see the data from the WAX ExpressTrade API.

Step 6¶

Showing the data on the website.

For now we are only logging the data in the console but we actually want to show off the requested data. For that we have to adjust our code just a little bit.

Changes in the main.component.ts file
- Create a variable above the constructor() like this cases: any = [];
- Change the line console.log(data) to this.cases = data.response.cases;
Changes in the main.component.html file

<div class="container">
  <div class="row">
    <div class="col" *ngFor="let case of cases">
      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="{{ case.image['300px'] }}" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">{{ case.name }}</h5>
          <p class="card-text">SKUS: <br> {{ case.skus}} </p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

Explanation¶

Changes to the main.component.ts file
- We created the variable so we can access it later on in the HTML file.
- The only important thing is that the variable has to be an Array, so we can loop through it later on.
- Because we do not need the data to be logged in the console we just replaced it.
- Lastly we save the data.response.cases data to our created variable called cases
Changes made to the main.component.html file
- The most important line probably is line three
- As you can see we use the built in template syntax *ngFor. This is just a loop that creates as many objects as items stored in the array. In this case we have four array entries, so this loop creates four new object for us.
- This is a very convenient and easy way to create this objects. Especially because we can access each variable of the array individually. This means we simply use another template syntax to access data like “image”, “name” or “skus”
- To sum things up, this probably is the easiest and most convenient way to create an object for each, in this case, case.

That’s it, you can check the result in your browser. It should look like this

Additional Examples¶

If you are still reading this, I got more of some nice and easy examples on how to use the API.

This additional example will be about opening a specific case and handling the error if one occurs.

Example 1¶

This piece of code will allow a user to initiate a case opening.

api.service.ts¶

openCase(trade_url, caseId, amount) {
  return this._http.post<CaseSchema>('/opencase', { trade_url: trade_url, caseId: caseId, amount: amount });
}

main.component.ts¶

openCase(caseId, amount) {

  // Usually you want to access the trade url via the request on your server
  let trade_url = "VALID TRADE URL";

  if (!caseId || !amount)
    return alert("CaseId or amount not valid!");

  if (amount <= 0)
    return alert("You need to open at least 1 case!");


  this._api.openCase(trade_url, caseId, amount)
    .subscribe(data => {
      // this should be changed to some kind of alert as well, but I am unable to test this properly because of insufficient keys
      console.log(data.response);
    }, error => {
      // simple browser alert with the error
      alert(error.error.text);
    });
}

main.component.html¶

<div class="container">
  <div class="row">
    <div class="col" *ngFor="let case of cases">
      <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="{{ case.image['300px'] }}" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">{{ case.name }}</h5>
          <p class="card-text">SKUS: <br> {{ case.skus}}</p>
          <div class="input-group">
             <input type="number" class="form-control" placeholder="Keys" aria-label="keys" value="1" min="1" #keys>
             <div class="input-group-append">
               <span class="input-group-text btn btn-primary" (click)="openCase(case.id, keys.value)">Open</span>
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Quick Overview¶

API Interfaces¶

OAuth¶

OPSkins OAuth works automatically with WAX Trade. You can use OAuth to log users into your website via OPSkins and (if desired) perform actions on their behalf via the API. Please see OPSkins OAuth Docs for more information.

API Response¶

Direct URL to API: https://api-trade.opskins.com

All successful API responses have return data within the “response” object. A typical response may look like this:

{
    "status": 1,
    "time": 1528334546,
    "response": {
        "offer": {
            "some": "data"
        }
    }
}

If a response is paginated, the pagination details (current_page and total_pages) occur at the top-level of the object, not inside the response body.

Response Status Codes¶

All status codes and their titles can be found in the table below. In some instances, the status code may be an HTTP status code (e.g. 404). We recognize that mixing of these codes is not ideal and will fix this in the near future.

Status	Code
OK	1
GENERIC_USER_ACCOUNT_ERROR	102
ACCESS_DENIED	106
NOT_LOGGED_IN	108
NEEDS_TWOFACTOR	112
TWOFACTOR_INCORRECT	122
USERNAME_TAKEN	124
UNACCEPTABLE_USERNAME	126
GENERIC_INTERNAL_ERROR	202
DATABASE_ERROR	204
NOT_FOUND	206
BAD_STATE	208
NO_MATCHING_ITEMS_FOUND	210
CANNOT_CREATE_DIRECTORY	216
FILE_UPLOAD_ERROR	218
FILE_UPLOAD_ALREADY_EXISTS	220
CANNOT_DELETE_FILE	222
ALREADY_IN_THAT_STATE	226
LOCKED	228
DISABLED	234
MALFORMED_RESPONSE	236
EXPIRED	238
EMPTY_DATA	240
ITEM_NEEDS_REPAIR	246
ITEM_NOT_IN_INVENTORY	248
BAD_INPUT	302
UNACCEPTABLE_ITEM	304
DUPLICATE_ITEM	306
BAD_REQUEST	312
CAPTCHA_INVALID	316
RATE_LIMIT_EXCEEDED	318
MISSING_DEPENDENCY	326
REQUEST_OR_FILE_TOO_LARGE	330
UNACCEPTABLE_FILE_TYPE	332
THIRD_PARTY_UNAVAILABLE	408

Additional Notes¶

On some endpoints you may be required to send a twofactor_code. Please see this comment if you need help.
For transferring items from OPSkins to WAX ExpressTrade, see: OPSkins Docs: IInventory/TransferToTradeSite/v1

Dynamic Images¶

On some items, you may see image URLs like so: https://static.wax.io/d-img/...7cea75.png
Default image dimensions will be 300x300 (Width x Height) or lower (depending on the original image).
You may request a different dimension by changing the end of the URL: /600x600, /900x900, etc.
Best fit will be chosen automatically, so you may not always get the exact dimensions you choose.
You can request the original (highest resolution) image with /original
e.g. https://static.wax.io/d-img/dynamic-apps/img/cdff6f51e89199e8c9772535a17cea75.png/50x50
e.g. https://static.wax.io/d-img/dynamic-apps/img/cdff6f51e89199e8c9772535a17cea75.png/600x600
e.g. https://static.wax.io/d-img/dynamic-apps/img/cdff6f51e89199e8c9772535a17cea75.png/original

ICase ¶

Endpoints to handle cases

Contents

ICase

ICase/GetCaseSchema ¶

GET https://api-trade.opskins.com/ICase/GetCaseSchema/v1

Returns an object with all currently available cases.

Parameter	Type	Description
cases	array-object	cases list
–id	int	Case ID
–name	string	Case name
–image	object	Case image URLS (Note: these images may change when remaining_opens hits 0)
—-300px	string	URL to 300px image
—-600px	string	URL to 600px image
—-900px	string	URL to 900px image
—-1800px	string	URL to 1800px image
—-2500px	string	URL to 2500px image
–skus	array	An array of item SKU in the case. Note that these may be updated overtime for vIRL cases & will not always be the same.
–key_amount_per_case	int	Number of keys required per 1 case opening
–max_opens	int	How many total items can be created from this case
–remaining_opens	int	How many items are remaining to be unboxed from this case. If this is 0, the case is depleted and cannot be opened anymore.

Parameter	Type	Description
cases	array-object	An array of objects containing each case
–id	int	Case ID
–name	string	Case Name
–total_weight	string	Total weight of case in kilograms
–total_percent	string	Total percent, relative_percent’s added together.
–odds	array-object	An array containing object lists of odds per sku
—-sku	int	Item sku for VGO, def_id for other apps/items
—-weight	string	Weight correponding to total_weight
—-relative_weight	string	Weight relative to all other items in the case
—-relative_percent	string	% chance of receiving this item, can be displayed to user. (relative_weight * 100)

Parameter	Type	Required	Description
case_id	int		The ID of the case being opened
amount	int		Number of cases to open. Defaults to `1`. Maximum value of `100`

Parameter	Type	Description
offer	object	Standard Trade Offer Object
cases	object	Standard OpenedCase Object

Tutorial/Documentation¶

Issues¶

Getting Started¶

Basic information¶

API¶

Server & HTTP¶

JSON¶

Requirements¶

VGO API Key¶

Ethereum Address¶

Initial Testing¶

The First Request¶

The Second Request¶

Troubleshooting¶

Conclusion¶

Setup¶

Backend (Server)¶

Frontend (Website)¶

Backend (Server)¶

Requirements¶

Step 1¶

Step 2¶

Code explanation¶

Let’s try it out¶

Step 3¶

Additional Examples¶

Example 1¶

Explanation¶

How To Test It¶

Example 2¶

Explanation¶

Frontend (Website)¶

Angular¶

Requirements¶

Step 1¶

Step 2¶

Step 3¶

Step 4¶

Implementing our components¶

Explanation¶

Adding content to the navbar and main component¶

Step 5¶

Focusing on the API service¶

Explanation¶

Implementing The Service¶

Explanation¶

Error¶

Step 6¶

Explanation¶

Additional Examples¶

Example 1¶

Quick Overview¶

API Interfaces¶

OAuth¶

API Response¶

Response Status Codes¶

Additional Notes¶

Dynamic Images¶

IEthereum¶

IEthereum/GetContractAddress¶

Authentication¶

Input¶

Output¶