บันทึกการเขียน Smart Contract แรก บน NEAR Protocol

สวัสดีครับ วันนี้จะมาบันทึกการเขียน Smart Contract ด้วย Rust บน NEAR นะครับ เนื่องจากว่าผมลองไปทำ Challenge #2 - Hello World smart contract เล่นๆดู เป้าหมายของผมคือ เมื่อเขียนแล้ว ต้องเข้าใจด้วย ก็เลยพยายามเขียนจากเริ่มต้น และพยายามเข้าใจว่ามันทำงานยังไง ไม่จำเป็นต้องเข้าใจหมด 100%

ซึ่ง Requirement ของ Challenge ไม่มีอะไรมาก เพียงแค่ทำ Hello World App ด้วย Rust ขึ้นมา

Build and deploy a frontend for your smart contract (GitHub Pages is the most simple option). The user should enter their name, call the contract, and see Hello {name}!

ตัวอย่างส่วนใหญ่ของ NEAR สำหรับเริ่มต้นเลย ก็จะมี

• NEAR SDK - เป็น Tutorial
• Counter App - เป็น Rust
• Guest Book - เป็น Assembly Script
• Status Message - เป็น Rust
• Create Near App - มีทั้ง Rust และ AssemblyScript

ซึ่งผมไม่ใช้ Create Near App ในตอนเริ่มต้น เพราะผมรู้สึกว่ามันสะดวกก็จริง แต่ว่าโครงสร้างโปรเจ็คมันซ้ำซ้อน และเข้าใจยากไปนิด และผมก็อยากลองสร้างตั้งแต่เริ่มเลย มันน่าจะได้เรียนรู้จริงๆ มากกว่า

ผมเลยตั้งเป้าคือ

1. ใช้ Create Next App สร้าง Next.js ง่ายๆ ขึ้นมา
2. สร้าง Contract ด้วย cargo new เลย
3. พยายามดู reference ต่างๆ แล้วลองเขียนขึ้นมา (จริงๆ ก็ใกล้เคียงกับ create-near-app แหละ)
4. ส่วนที่ต่อ near-api-js ก็พยายามดู Workshop API แล้วประยุกต์ใช้ React
5. ส่วนที่ทำเป็น Provider ยังไม่ได้ handle อะไรมากมาย เน้นให้มันใช้งานได้ครับ (ตัวโค๊ดยัง improve ได้อีกเยอะ)

ทีนี้เมื่อมาดู requrement ตัว Challenge ทำให้ผมสร้าง Abstract function ได้ 2 ตัวคือ

1
// write the given name and save "Hello {message}!" to contract storage.
2
export function hello(message: string): string {}
3

4
// read a message by account_id from contract storage.
5
export function get_hello(account_id: AccountId): string {}

สร้างโปรเจ็ค

เริ่มแรก ต้องตั้ง toolchain เป็น wasm32-unknown-unknown เพื่อ compile เป็น WASM (ผมเคยตั้งไว้นานแล้ว เลยข้ามขั้นตอนนี้ไป)

rustup target add wasm32-unknown-unknown

ผมสร้างจาก create-next-app และใช้ tailwindcss เป็น CSS

npx create-next-app helloworld

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• ตัว Tailwind ตั้งค่ากับ Next.js - อ่านเพิ่มเติมนะครับ ทำตามได้เลย

ต่อมา ตัว Contract ก็สร้างจาก cargo เลย

cargo new contract --lib

จากนั้นเปลี่ยนชื่อ App และ Cargo.toml โดยเพิ่ม near-sdk เป็น dependencies และปรับ profile.release (อันนี้ผมยังไม่ค่อยเข้าใจเท่าไหร่ Reference จากอันนี้ ครับ)

1
[package]
2
name = "helloworld"
3
authors = ["Chai Phonbopit"]
4
version = "0.1.0"
5
edition = "2021"
6

7
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
8

9
[dependencies]
10
near-sdk = "3.1.0"
11

12
[lib]
13
crate-type = ["cdylib"]
14

15
[profile.release]
16
codegen-units = 1
17
# Tell `rustc` to optimize for small code size.
18
opt-level = "z"
19
lto = true
20
debug = false
21
panic = "abort"
22
# Opt into extra safety checks on arithmetic operations https://stackoverflow.com/a/64136471/249801
23
overflow-checks = true

Rust Contract.

ตัว Rust Contract ในการเก็บ Collection ทีแรกผมคิดว่าจะเลือกใช้ Collection ที่มันรองรับ Iterator เผื่อจะได้ filter หรือ list ได้ แต่พอ requirement ของ Challenge แค่แสดง hello และ get hello ก็เลย ใช้แค่ LookupMap พอ

เรื่องของ Data Storage ใน NEAR - Data Storage / Collections

1
use near_sdk::borsh::{self, BorshDeserialize, BorshSerialize};
2
use near_sdk::collections::LookupMap;
3
use near_sdk::{env, log, near_bindgen, AccountId};
4

5
#[near_bindgen]
6
#[derive(BorshDeserialize, BorshSerialize)]
7
pub struct HelloWorld {
8
    pub messages: LookupMap<AccountId, String>,
9
}
10

11
impl Default for HelloWorld {
12
    fn default() -> Self {
13
        Self {
14
            // messages: LookupMap::new(b"a".to_vec()),
15
            messages: LookupMap::new("".as_bytes().to_vec()),
16
        }
17
    }
18
}
19

20
#[near_bindgen]
21
impl HelloWorld {
22
    pub fn hello(&mut self, message: String) {
23
        let account_id = env::signer_account_id();
24
        let greeting = format_args!("Hello {message}!").to_string();
25

26
        log!(
27
            "{} hello with message {} and greeting: {}",
28
            account_id,
29
            message,
30
            greeting
31
        );
32

33
        self.messages.insert(&account_id, &greeting);
34
    }
35

36
    pub fn get_hello(&self, account_id: AccountId) -> String {
37
        match self.messages.get(&account_id) {
38
            Some(value) => {
39
                log!("value from lookupMap(messages) is {}", value);
40
                value
41
            }
42
            None => "not found".to_string(),
43
        }
44
    }
45
}

เริ่มแรกผมกำหนด Struct HelloWorld ข้างในเป็น messages เป็น LookupMap แบบ key value ด้วย AccountId และ String

1
#[near_bindgen]
2
#[derive(BorshDeserialize, BorshSerialize)]
3
pub struct HelloWorld {
4
    pub messages: LookupMap<AccountId, String>,
5
}

Implement default function (เข้าใจว่าเหมือนกับ contrcutor ของ Class และส่วน b"a".to_vec() ผมเข้าใจว่าเป็น byte string literal เลยลอง comment และเขียนอีกแบบลงไป น่าจะเหมือนกัน หากผมเข้าใจผิด ใครหลงเข้ามาอ่าน แนะนำด้วยครับ)

1
impl Default for HelloWorld {
2
    fn default() -> Self {
3
        Self {
4
            // messages: LookupMap::new(b"a".to_vec()),
5
            messages: LookupMap::new("".as_bytes().to_vec()),
6
        }
7
    }
8
}

ส่วน hello กับ get_hello ก็ไม่มีอะไรมาก

• hello รับค่า message จาก User ส่วน account_id เป็น accountId ของ signer จากนั้น format string เพื่อให้ตรงกับ Hello {message} เซฟลง LookupMap ชื่อ messages
• get_hello - ก็รับค่า account_id ไป filter หาใน LookupMap ใช้ match เอาไว้เช็ค ถ้าเจอ ก็ส่ง value กลับ ถ้าไม่เจอ ขึ้น not found

1
pub fn hello(&mut self, message: String) {
2
    let account_id = env::signer_account_id();
3
    let greeting = format_args!("Hello {message}!").to_string();
4

5
    log!(
6
        "{} hello with message {} and greeting: {}",
7
        account_id,
8
        message,
9
        greeting
10
    );
11

12
    self.messages.insert(&account_id, &greeting);
13
}
14

15
pub fn get_hello(&self, account_id: AccountId) -> String {
16
    match self.messages.get(&account_id) {
17
        Some(value) => {
18
            log!("value from lookupMap(messages) is {}", value);
19
            value
20
        }
21
        None => "not found".to_string(),
22
    }
23
}

ส่วน Test รวมๆ ผมดูจาก create-near-app ซึ่งยังไม่ค่อยเข้าใจการทำงานมันมาก พวก Mock, VMContext เดี๋ยวค่อยดูเพ่ิมเติม

1
use near_sdk::MockedBlockchain;
2
use near_sdk::{testing_env, VMContext};

เอาแค่รันเทสผ่านก่อน เดาแค่ว่ามันน่าจะ Mock blockchain แบบ block 0 ให้เรา สิ่งที่ทำก็แค่เขียน test case ลงไป (อันนี้เดานะ)

Context มี set true, false สำหรับ View กับ Call

1
#[test]
2
fn set_then_get_hello() {
3
    let context = get_context(vec![], false);
4
    testing_env!(context);
5

6
    let mut contract = HelloWorld::default();
7
    contract.hello("Chuck".to_string());
8

9
    let message = contract.get_hello("bob_near".to_string());
10
    assert_eq!("Hello Chuck!".to_string(), message);
11
}
12

13
#[test]
14
fn get_default_hello() {
15
    let context = get_context(vec![], true);
16
    testing_env!(context);
17

18
    let contract = HelloWorld::default();
19
    let message = contract.get_hello("bob_near".to_string());
20

21
    assert_eq!("not found".to_string(), message);
22
}

ก่อนไป Client ผมสร้าง Makefile สำหรับ รัน build และ deploy เพราะไม่อยากเสียเวลาพิมพ์ยาวๆ (ไม่ได้ทำให้รองรับ args นะครับ ตอนนี้คือ hardcode)

1
build:
2
  cd contract && cargo build --target wasm32-unknown-unknown --release
3
deploy:
4
  near deploy --wasmFile contract/target/wasm32-unknown-unknown/release/helloworld.wasm --accountId helloworld.0xchai.testnet
5
test:
6
  cd contract && cargo test

Client (near-api-js)

ฝั่ง Client ใช้ near-api-js ซึ่งใน Doc มีตัวอย่าง มี Cookbook ให้เราอ่าน ทำความเข้าใจได้ครับ

สิ่งที่ผมต้องทำคือ

1. สร้าง Wallet Connection
2. รองรับ Sign In
3. Authorized หลังจาก Signed In
4. Load/Call Contract

ผมสร้างเป็น NearWalletProvider ขึ้นมาครับ

แล้วครอบตัว App ใน _app.js เป็นแบบนี้

1
const config = {
2
  // ...config
3
}
4

5
function MyApp({ Component, pageProps }) {
6
  return (
7
    <NearWalletProvider config={config}>
8
      <Component {...pageProps} />
9
    </NearWalletProvider>
10
  )
11
}

คร่าวๆคือ สร้าง config ก่อน (ของผมใช้วิธี handle config เผื่อเปลี่ยน environment เป็น mainnet แต่จริงๆไม่ได้ใช้ ทำเผื่อเฉยๆ)

1
// 1. กำหนด config (ถ้าใน NearWalletProvider ผมส่งเป็น prop มา)
2
const config = {
3
  networkId: 'testnet',
4
  nodeUrl: 'https://rpc.testnet.near.org',
5
  walletUrl: 'https://wallet.testnet.near.org',
6
  helperUrl: 'https://helper.testnet.near.org',
7
  explorerUrl: 'https://explorer.testnet.near.org'
8
}
9

10
// 2. Connect Wallet
11
const near = await connect({
12
  ...config,
13
  keyStore: new keyStores.BrowserLocalStorageKeyStore()
14
})
15

16
// 3. Connect ด้วยชื่อ app เรา
17
const wallet = new WalletConnection(near, 'helloworld')
18

19
// 4. เช็ค authorized
20
let accountId = wallet.getAccountId()
21

22
// 5. ถ้า signed in เราก็จะ get account กับ initial contract.
23
if (accountId) {
24
  const accountState = await wallet.account().state()
25

26
  // 6. initial contract. ขอ view, call `get_hello` กับ `hello`
27
  const contract = await new Contract(wallet.account(), config.contractName, {
28
    viewMethods: ['get_hello'],
29
    changeMethods: ['hello']
30
  })
31

32
  // 7. set state (Provider.Context) เผื่อเอาไปใช้
33
  setState({
34
    wallet,
35
    contract,
36
    account: {
37
      accountId
38
    },
39
    signIn: () => {
40
      wallet.requestSignIn(config.contractName)
41
    },
42
    signOut: () => wallet.signOut(),
43
    isSignedIn: wallet.isSignedIn(),
44
    loadAccount: (accountId) => () => near.account(accountId)
45
  })
46
}

คร่าวๆ ประมาณนี้ครับ ใน NearWalletProvider ผมเขียนไว้ไม่ดีนะครับ แค่ handle คร่าวๆ ครับ (อนาคต อยากจะลอง improve ให้มันเหมือนๆ กับพวก useDapp, React Web3 หรือ Solana Wallet Adapter)

ส่วนหน้า index.js ผมก็แค่เรียก state จาก Context เพื่อเข้าถึง contract, wallet และ function signIn ครับ

1
export default function Home() {
2
  const { account, contract, signIn } = useContext(WalletContext);
3

4
  const hello = async () => {
5
    await contract.hello({ message });
6
  };
7

8
  const handleMessage = (event) => {
9
    const value = event.target.value;
10
    setMessage(value);
11
  };
12

13
  const handleGetHello = async () => {
14
    const message = await contract.get_hello({
15
      account_id: account?.accountId
16
    });
17
  };
18

19
  const connectWallet = async () => {
20
    signIn();
21
  };
22

23
  return (
24
    //...
25
  )
26
}

ส่วนที่เหลือคือ UI ก็ปรับตามสะดวก เมื่อเว็บเสร็จเรียบร้อย ก็ Deploy ลง Vercel ด้วยการใช้ Git repository

สรุป

หลังจากลองทำ Challenge ง่ายๆ ดู ก็สนุกดี ได้ลอง ได้อ่าน contract หลากหลาย ทั้งแบบง่ายๆ และก็ซับซ้อน เพื่อดูว่าถ้า advanced จะเขียนยังไง ซึ่งจริงๆ AssemblyScript ดูง่ายกว่าเยอะเลย ฮ่าๆ

ตัว NEAR ผมก็ลองเล่นมาไม่นานไม่ถึงเดือน แต่ก็นิดๆหน่อยๆ แล้วก็แบบมั่วๆ เน้นแค่ตาม tutorial เข้าใจบ้าง ไม่เข้าใจบ้าง เน้นทำตามไปก่อน แต่พอมาวันนี้ มาลองทำตั้งแต่ต้น ได้ลองผิดลองถูก ก็พอเข้าใจมากขึ้นไปอีกระดับ (แถมเหมือนได้รื้อฟื้นสกิล React ที่ทิ้งไปนาน ยอมรับเลยว่า แค่สร้าง Context ง่ายๆ ผมยังทำไม่ได้เลย นั่งอ่านบทความ และลองทำนานมาก)

สำหรับผู้หลงเข้ามาอ่าน คำแนะนำเดียวของผมเลยคือ ลงมือทำครับ แล้วคุณจะเข้าใจ มากกว่าการแค่อ่าน Tutorial

Happy Coding ❤️