Home
Introduction to CoinTools! A Cryptocurrency Chrome Extension
Tags:, , , ,

Introduction to CoinTools! A Cryptocurrency Chrome Extension

February 12, 2018 No Comments chrome extension, javascript, software, software development

Introduction to CoinTools

CoinTools is A Chrome Extension that has a few useful tools and graphs for Cryptocurrency. When is a good time to convert your STEEM or SBD to BTC and then Fiat? I always ask myself this question. One easy method is to use BTC or any fiat currency of your interests, observe the exchange rate e.g. 1 BTC = ? STEEM and make a decision when the exchange rate is at satisfaction, i.e. 1 BTC = 2000 STEEM is better than 1 BTC = 1500 STEEM if you are holding STEEMs, because you need fewer STEEMs to convert to 1 BTC, which is in your favor.

Motivation

Chrome Extension is a good entry point since a lot of users use Chrome heavily every day. I need a tool that can give me a quick rate as discussed in the introduction. Therefore, I have developed CoinTools – The Chrome Extension of Cryptocurrency.

Technology Stacks

Javascript that runs in Chrome.

Github

https://github.com/DoctorLai/CoinTools

Chrome Webstore

It is available online at Chrome Webstore.

CoinTools v0.0.1 Feature

The first version has the following features:

  • Global Data
  • Ranking Table of Top 100 Coins
  • Select your local currency
  • Log tab

Roadmap of CoinTools

  • Easy conversion between any two coins or currency
  • Localisation
  • Realtime Graphs

Screenshots

General Tab shows a few global statistics.

general-2 Introduction to CoinTools! A Cryptocurrency Chrome Extension chrome extension javascript software software development

CoinTools General Data

Top 100 Coins.

rank Introduction to CoinTools! A Cryptocurrency Chrome Extension chrome extension javascript software software development

CoinTools Top 100 CryptoCurrency Ranking Table

Select Your Preferred FIAT currency.

setting Introduction to CoinTools! A Cryptocurrency Chrome Extension chrome extension javascript software software development

CoinTools Tab Settings

Log of API.

log Introduction to CoinTools! A Cryptocurrency Chrome Extension chrome extension javascript software software development

CoinTools Tab Log

Javascript code that connects the CoinMarketCap API

Ajax Javascript code that calls CoinMarketCap API.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

// general data from coinmarkcap
const getGeneralData = (currency, dom) => {
    let currency_upper = currency.toUpperCase();
    let currency_lower = currency.toLowerCase();
    let api = "https://api.coinmarketcap.com/v1/global/";
    if (currency != '') {
        api += "?convert=" + currency_upper;
    }
    logit("calling " + api);
    $.ajax({
        type: "GET",
        url: api,
        success: function(result) {
            let s = '';
            s += '<table>';
            s += '<tr>';
            s += '<td>Total Market Cap USD</td>';
            s += '<td>' + result['total_market_cap_usd'] + '</td>';
            s += '</tr>';
            s += '<tr>';
            s += '<td>Total 24 Hour Volumn USD</td>';
            s += '<td>' + result['total_24h_volume_usd'] + '</td>';
            s += '</tr>';
            s += '<tr>';
            s += '<td>Bitcoin Percentage of Market Cap</td>';
            s += '<td>' + result['bitcoin_percentage_of_market_cap'] + '%</td>';
            s += '</tr>';
            s += '<tr>';
            s += '<td>Active Currencies</td>';
            s += '<td>' + result['active_currencies'] + '</td>';
            s += '</tr>';
            s += '<tr>';
            s += '<td>Active Assets</td>';
            s += '<td>' + result['active_assets'] + '</td>';
            s += '</tr>';
            s += '<tr>';
            s += '<td>Active Markets</td>';
            s += '<td>' + result['active_markets'] + '</td>';
            s += '</tr>';
            s += '<tr>';
            let key1 = "total_market_cap_" + currency_lower;
            if (key1 in result) {
                s += '<tr>';
                s += '<td>Total Market Cap ' + currency_upper + '</td>';
                s += '<td>' + result[key1] + '</td>';
                s += '</tr>';
                s += '<tr>';
            }
            let key2 = "total_24h_volume_" + currency_lower;
            if (key2 in result) {
                s += '<tr>';
                s += '<td>Total 24 Hour Volumn ' + currency_upper + '</td>';
                s += '<td>' + result[key2] + '</td>';
                s += '</tr>';
                s += '<tr>';
            }
            s += '<td>Last Updated</td>';
            s += '<td>' + timestampToString(result['last_updated']) + '</td>';
            s += '</tr>';            
            s += '</table>';
            dom.html(s);
        },
        error: function(request, status, error) {
            logit('Response: ' + request.responseText);
            logit('Error: ' + error );
            logit('Status: ' + status);
        },
        complete: function(data) {
            logit("API Finished: " + api);
        }             
    }); 
}
 
// get ranking table from coinmarketcap
const getRankingTable = (currency, dom, limit = 100) => {
    let currency_upper = currency.toUpperCase();
    let currency_lower = currency.toLowerCase();
    let api = "https://api.coinmarketcap.com/v1/ticker/?limit=" + limit;
    if (currency != '') {
        api += "&convert=" + currency_upper;
    }
    logit("calling " + api);
    dom.html('<img src="images/loading.gif" />');
    $.ajax({
        type: "GET",
        url: api,
        success: function(result) {
            let s = '';
            s += '<table id="ranking" class="sortable">';
            s += '<thead><tr>';
            s += '<th class=sorttable_sorted>Coin</th>';
            s += '<th>Price USD</th>';
            s += '<th>Price BTC</th>';
            s += '<th>Change 1 Hours</th>';
            s += '<th>Change 24 Hours</th>';
            s += '<th>Change 7 Days</th>';
            s += '<th>Last Updated</th>';
            s += '</tr></thead><tbody>';            
            for (let i = 0; i < result.length; i ++) {
                s += '<tr>';
                s += '<td>' + result[i]['name'] + ' (' + result[i]['symbol'] + ')</td>';
                s += '<td>' + result[i]['price_usd'] + '</td>';
                s += '<td>' + result[i]['price_btc'] + '</td>';
                s += '<td>' + result[i]['percent_change_1h'] + '</td>';
                s += '<td>' + result[i]['percent_change_24h'] + '</td>';
                s += '<td>' + result[i]['percent_change_7d'] + '</td>';
                s += '<td>' + timestampToString(result[i]['last_updated']) + '</td>';
                s += '</tr>';
            }
            s += '</tbody>';
            s += '</table>';
            dom.html(s);
            sorttable.makeSortable(document.getElementById("ranking"));
        },
        error: function(request, status, error) {
            logit('Response: ' + request.responseText);
            logit('Error: ' + error );
            logit('Status: ' + status);
        },
        complete: function(data) {
            logit("API Finished: " + api);
        }             
    }); 
}
// general data from coinmarkcap
const getGeneralData = (currency, dom) => {
    let currency_upper = currency.toUpperCase();
    let currency_lower = currency.toLowerCase();
    let api = "https://api.coinmarketcap.com/v1/global/";
    if (currency != '') {
        api += "?convert=" + currency_upper;
    }
    logit("calling " + api);
    $.ajax({
        type: "GET",
        url: api,
        success: function(result) {
            let s = '';
            s += '<table>';
            s += '<tr>';
            s += '<td>Total Market Cap USD</td>';
            s += '<td>' + result['total_market_cap_usd'] + '</td>';
            s += '</tr>';
            s += '<tr>';
            s += '<td>Total 24 Hour Volumn USD</td>';
            s += '<td>' + result['total_24h_volume_usd'] + '</td>';
            s += '</tr>';
            s += '<tr>';
            s += '<td>Bitcoin Percentage of Market Cap</td>';
            s += '<td>' + result['bitcoin_percentage_of_market_cap'] + '%</td>';
            s += '</tr>';
            s += '<tr>';
            s += '<td>Active Currencies</td>';
            s += '<td>' + result['active_currencies'] + '</td>';
            s += '</tr>';
            s += '<tr>';
            s += '<td>Active Assets</td>';
            s += '<td>' + result['active_assets'] + '</td>';
            s += '</tr>';
            s += '<tr>';
            s += '<td>Active Markets</td>';
            s += '<td>' + result['active_markets'] + '</td>';
            s += '</tr>';
            s += '<tr>';
            let key1 = "total_market_cap_" + currency_lower;
            if (key1 in result) {
                s += '<tr>';
                s += '<td>Total Market Cap ' + currency_upper + '</td>';
                s += '<td>' + result[key1] + '</td>';
                s += '</tr>';
                s += '<tr>';
            }
            let key2 = "total_24h_volume_" + currency_lower;
            if (key2 in result) {
                s += '<tr>';
                s += '<td>Total 24 Hour Volumn ' + currency_upper + '</td>';
                s += '<td>' + result[key2] + '</td>';
                s += '</tr>';
                s += '<tr>';
            }
            s += '<td>Last Updated</td>';
            s += '<td>' + timestampToString(result['last_updated']) + '</td>';
            s += '</tr>';            
            s += '</table>';
            dom.html(s);
        },
        error: function(request, status, error) {
            logit('Response: ' + request.responseText);
            logit('Error: ' + error );
            logit('Status: ' + status);
        },
        complete: function(data) {
            logit("API Finished: " + api);
        }             
    }); 
}

// get ranking table from coinmarketcap
const getRankingTable = (currency, dom, limit = 100) => {
    let currency_upper = currency.toUpperCase();
    let currency_lower = currency.toLowerCase();
    let api = "https://api.coinmarketcap.com/v1/ticker/?limit=" + limit;
    if (currency != '') {
        api += "&convert=" + currency_upper;
    }
    logit("calling " + api);
    dom.html('<img src="images/loading.gif" />');
    $.ajax({
        type: "GET",
        url: api,
        success: function(result) {
            let s = '';
            s += '<table id="ranking" class="sortable">';
            s += '<thead><tr>';
            s += '<th class=sorttable_sorted>Coin</th>';
            s += '<th>Price USD</th>';
            s += '<th>Price BTC</th>';
            s += '<th>Change 1 Hours</th>';
            s += '<th>Change 24 Hours</th>';
            s += '<th>Change 7 Days</th>';
            s += '<th>Last Updated</th>';
            s += '</tr></thead><tbody>';            
            for (let i = 0; i < result.length; i ++) {
                s += '<tr>';
                s += '<td>' + result[i]['name'] + ' (' + result[i]['symbol'] + ')</td>';
                s += '<td>' + result[i]['price_usd'] + '</td>';
                s += '<td>' + result[i]['price_btc'] + '</td>';
                s += '<td>' + result[i]['percent_change_1h'] + '</td>';
                s += '<td>' + result[i]['percent_change_24h'] + '</td>';
                s += '<td>' + result[i]['percent_change_7d'] + '</td>';
                s += '<td>' + timestampToString(result[i]['last_updated']) + '</td>';
                s += '</tr>';
            }
            s += '</tbody>';
            s += '</table>';
            dom.html(s);
            sorttable.makeSortable(document.getElementById("ranking"));
        },
        error: function(request, status, error) {
            logit('Response: ' + request.responseText);
            logit('Error: ' + error );
            logit('Status: ' + status);
        },
        complete: function(data) {
            logit("API Finished: " + api);
        }             
    }); 
}

License

MIT

Contribution Welcome

Github: https://github.com/DoctorLai/SteemTools/

  • Fork it!
  • Create your feature branch: git checkout -b my-new-feature
  • Commit your changes: git commit -am ‘Add some feature’
  • Push to the branch: git push origin my-new-feature
  • Submit a pull request.

Chrome Webstore

Install the CoinTools Now!

–EOF (The Ultimate Computing & Technology Blog) —

GD Star Rating
loading...
1473 words
Last Post: SteemTools v0.0.5 - Reveal Deleted Comments, Load and Save Steem-Js!
Next Post: CoinTool v0.0.2 - Cryptocurrency Conversion + UI Localization

The Permanent URL is: Introduction to CoinTools! A Cryptocurrency Chrome Extension

Related posts:

  1. CoinTool v0.0.2 – Cryptocurrency Conversion + UI Localization Introduction to CoinTool CoinTools is A Chrome Extension that has a few useful tools and...
  2. Turtle Programming v0.0.13: Support RGB, Add ShortCodes, Global Procedures Editor Introduction to Logo Turtle LogoTurtle is currently the FIRST and only one Chrome Extension for...
  3. Turtle Programming v0.0.12: Powerful For Loop, INC, DEC, and on NPM! Introduction to Logo Turtle LogoTurtle is currently the FIRST and only one Chrome Extension for...
  4. Turtle Programming v0.0.9: Add SetX, SetY, Square and Rect! Introduction to Logo Turtle LogoTurtle is currently the FIRST and only one Chrome Extension for...
  5. SteemTools v0.0.6 – Check Who Downvoted You + API Server Ping Introduction to SteemTools SteemTools is inspired by its sister project: Utopian Moderators & Supervisors and...
  6. LogoTurtle v0.0.2: ShowTurtle, HideTurtle, Color, Width and Help. Introduction to Logo Turtle This is the first Logo Interpreter in Google Chrome Webstore. It...
  7. The First Job Seeking Chrome Extension based on ZipRecruiter API Job Seeking using JobTools What is the project about? This is the first Job Seeking...
  8. CoinTools Update: Cryptocurrency Converter Calculator, Support Coin Symbols and Add More Localization Introduction to CoinTools CoinTools is a handy gadget to Chrome browser that you can launch...

Leave a Reply