分類
Blockchain Javascript

airdrop on solana in 5mins

半夜睡不著覺,來寫寫 SOLANA,網路上寫乙太坊(ETH)的教學很多,相較於寫 solidity,solana有提供 js 的 npm package,讓許多 web app 的開發者更容易進入開發區塊鏈應用的世界。此篇單純簡單筆記一下測試 SOLANA 開發應用的程式。

題外話是,solana原先號稱是乙太殺手,可以更快並且更多的處理程序,不過近來一個STEPN (move to earn app) 讓乙太殺手直接變成窮人版乙太,甚至前一陣子還出現100%丟失的狀況,(對就像是你去銀行說我要轉帳,然後那筆錢消失在宇宙的那種消失) 所以以CP值來說開發者去學習solidity開發乙太相關的程式會比較有價值一些。

準備項目 pre-requisite

錢包地址 wallet

在區塊鏈上,一個錢包地址就是一組 key pair,包含了一個 public key 以及一個 secret key,在 solana 的應用上你可以這樣寫:

const {
    Keypair
} = require("@solana/web3.js");

const solWallet = new Keypair();

const publicKey = solWallet._keypair.publicKey;
const secretKey = solWallet._keypair.secretKey;

console.log("public key", publicKey);
console.log("secret key", secretKey);

如此一來會看到 public key and secret key

➜  sol-dev node index.js
public key Uint8Array(32) [
  191, 158,  51,  73,  42,  88, 120,  88,
   99, 184,  34, 223, 222,  14, 112, 209,
  202,  20,  93, 169, 109, 230,  12,  68,
  223, 113, 136, 194, 178,   0,  74,  37
]
secret key Uint8Array(64) [
  186, 147, 146,   4, 133, 110, 147, 149, 252, 241,  58,
   82, 171,  26,  74, 226, 119,  39, 143,  42,  43, 252,
  208, 101, 106, 171, 159, 100, 115, 235, 217,  11, 191,
  158,  51,  73,  42,  88, 120,  88,  99, 184,  34, 223,
  222,  14, 112, 209, 202,  20,  93, 169, 109, 230,  12,
   68, 223, 113, 136, 194, 178,   0,  74,  37
]

原則上那個 public key 就是每個用戶對外的錢包地址,所以透過 PublicKey 以及 toString 可以去得到一般在錢包或交易所看到的那個地址:

const publicKey = new PublicKey(solWallet._keypair.publicKey);
console.log("public key", publicKey.toString());
➜  sol-dev node index.js
public key EtBo5umndEzKr6X5NxsYLGYFEBpuTyeiVzEpk12HJAVb

查詢餘額 check balance

原則上有了public key我們即可在鏈上透過 getBalance 查詢該錢包地址的餘額,實作如下:(devnet為solana的測試網路,可以透過 clusterApiUrl 來選擇主鏈或是測試鏈)

const getWalletBalance = async () => {
    try {
        const connection = new Connection(clusterApiUrl("devnet"), "confirmed");
        const walletBalance = await connection.getBalance(publicKey);
        console.log("wallet balance:", walletBalance);
        return walletBalance;
    } catch(err) {
        console.log("error:", err);
    }
};

const main = async () => {
    await getWalletBalance();
};

main();

// console
wallet balance: 0

空投 air drop

空投就是針對錢包地址直接做token的投放,以空投SOL來實作的話,可以透過 requestAirdrop 來寫入該地址以及數量,等待 confirmTransaction 完成後,在查詢餘額確認是否空投成功。

const airDropSolana = async () => {
    try {
        const connection = new Connection(clusterApiUrl("devnet"), "confirmed");
        const airdropSignature = await connection.requestAirdrop(publicKey, 1*LAMPORTS_PER_SOL);
        await connection.confirmTransaction(airdropSignature);
    } catch(err) {
        console.log("err", err);
    }
};

const main = async () => {
    await getWalletBalance();
    await airDropSolana();
    await getWalletBalance();
};

main();


// console
wallet balance: 0
wallet balance: 1000000000

如此一來你就免費獲得一顆SOL,不過是在測試網上,所以價值 $0,空投差不多就這樣,當然每個函式都還有各種細節建議大家自己看一下官方文件,後續怎麼進行交易以及合約撰寫的筆記再來繼續學習分享。小韭菜一枚,有錯誤歡迎指正。

分類
Javascript

How to clear all javascript timeouts?

Javascript setTimeout() 提供一個function讓開發者可以延遲時間後執行片段程式碼,如要終止此timeout行為,我們可以使用 clearTimeout 這個function,這篇文章簡單聊聊要怎麼一次清掉頁面上所有timeout functions。

var timeoutID = scope.setTimeout(function[, delay, param1, param2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);
The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout(); this value can be passed to clearTimeout() to cancel the timeout.

簡單說,setTimeout會回傳給你一個timeout ID,後續可以用這個ID來清掉timeout;但如果今天你要寫一個function去清掉頁面上的所有timeout,由於我們並不知道頁面上有哪些timeout ID,所以這時候的小技巧是先新增一個無功能的timeout,在遞減向下清除所有timeout即可,程式碼如下:

function clearAllTimeouts()
{
    var id = window.setTimeout(null,0);
    while (id--) 
    {
        window.clearTimeout(id);
    }
}

分類
Javascript

Convert Javascript Local time to UTC time

在前端有時候需要操作顯示時間的問題,通常都與時區有關導致顯示的日期有一天的差距;由於看過太多錯誤的解法(即便是stackoverflow),甚至有些單純想依靠moment.js來解決問題的建議其實都不太正確,筆記一下正確處理的方式。

首先,我們要先拿個時間物件:

let now = new Date("2019-01-23");
/* Ex. Tue Jan 22 2019 16:00:00 GMT-0800 (Pacific Standard Time) */

你會看到每個時區相對應得到的時間日期並不相同,但這不是bug,而是前端工程師的日常,這也是發生日期時間差的主因。

所以到底怎麼轉換日期date變成UTC time才是正確的,其實很簡單,先取得計算過後的秒數 milliseconds ,再加上相對應的時間差 offset,再將他轉換回時間物件就可以得到正確的local date。

let nowUtc = new Date( now.getTime() + (now.getTimezoneOffset() * 60000) );
/* Wed Jan 23 2019 00:00:00 GMT-0800 (Pacific Standard Time) */

特別提一下是 getTimezoneOffset ,這個func回傳的單位是分鐘,這也是為什麼我們要將該值再乘以60000的原因,因為一分鐘有60秒,一秒是1000毫秒。

The getTimezoneOffset() method returns the time zone difference, in minutes, from current locale (host system settings) to UTC.


以上報告。

分類
Javascript

使用highchart.js來協助網頁繪圖: column chart

網頁開發常需要使用到各種圖表,今天介紹一款網頁繪圖工具:highchart.js ,點進去連結觀看你可以發現裡面有各式各樣的圖表功能,幾乎什麼圖表都有了,今天我們來用範例講解最基本的直條圖( column chart )。

進入程式範例之前先前情提要一下,highchart 基本上是透過 svg 來繪圖,等於是說他提供你 javascript 的語法控制,然後幫你使用 svg 繪圖在網頁上,所以你的成品會是一個 svg 圖檔,當然他也是會有基本的 RWD 各項功能。

最近剛結束九合一選舉,就讓我們使用最時事的選舉開票來做例子吧!以號稱台灣章魚哥的台北市天母天玉里來說(投開票所編號0281-0285),單以編號0281投開票所來看,我們查詢中選會網站的各候選人的得票數資料為:

  1. 吳萼洋:2
  2. 丁守中:390
  3. 姚文智:180
  4. 柯文哲:418
  5. 李錫錕:1

使用highchart起手式很簡單,就是將它提供的js file給引入即可,你可以使用 <script> 引入cdn,可以使用 npm install,這邊範例簡單起見使用 <script> 從 cdn 引入檔案。

<script src="https://code.highcharts.com/highcharts.js"></script>

在頁面上提供一個畫圖的區域 div 並給它一個 id:

<div id="container" style="width:100%; height:400px;"></div>

接下來就是寫 js 代碼了:

$(function () { 
          var myChart = Highcharts.chart('container', {
              chart: {
                  type: 'column'
              },
              title: {
                  text: '2018 台北市長選舉 0281投開票所選舉資料'
              },
              xAxis: {  
                  type: 'category'
              },
              yAxis: {
                  title: {
                      text: '單位:張',
                  },
              },
              series: [
                  {
                      name: '得票數',
                      colorByPoint: true,
                      data: [
                          {
                              name: '吳萼洋',
                              y: 2,
                          },
                          {
                              name: '丁守中',
                              y: 390,
                              color: "#031195",
                          },
                          {
                              name: '姚文智',
                              y: 180,
                              color: "#159818",
                          },
                          {
                              name: '柯文哲',
                              y: 418,
                              color: "#24d7d6",
                          },
                          {
                              name: '李錫錕',
                              y: 1,
                          },
                      ]
                  },   
              ],
          });
      });

首先我們指定 chart type 為 column,此圖表形態為直條圖,指定x軸以及y軸類別以及標題,並在series裡放上我們從中選會網站得到的資料,如此一來highchart就會協助我們製圖,同時可以客製化每個候選人的顏色,成果如下,方便起見我在codepen中引入了 jQuery。