naxios

สัญญาตามสัญญาใกล้กับ Wallet และใกล้กับไคลเอนต์ RPC สำหรับเบราว์เซอร์ สิ่งนี้ได้รับการออกแบบมาเพื่ออำนวยความสะดวกในการรวมปฏิกิริยากับบล็อกเชนใกล้และหลีกเลี่ยงแผ่นหม้อไอน้ำขนาดใหญ่ของการตั้งค่ากระเป๋าเงินและสัญญา

เอกสาร

สารบัญ

• คุณสมบัติ
• การติดตั้ง
• วิธีใช้
• เครื่องใช้
• การบริจาค

คุณสมบัติ

• กระเป๋าเงินและการรวมสัญญาที่ง่ายขึ้น
• สนับสนุน API สัญญา
• ง่ายต่อการสร้างอินเทอร์เฟซสัญญา
• Wallet Connection Modal เพื่อใช้งานได้ง่าย
• การแปลงอัตโนมัติสำหรับข้อมูล JSON
• เหตุการณ์ฝั่งลูกค้าที่จะบอกเมื่อ API พร้อม
• เบ็ดตอบสนองที่เป็นประโยชน์
• ระบบแคชสำหรับ view สัญญา

การติดตั้ง

ใช้ NPM:

 # You can use any wallet selector version you want
npm install @wpdas/naxios @near-wallet-selector/[email protected]

ใช้เส้นด้าย:

 # You can use any wallet selector version you want
yarn add @wpdas/naxios @near-wallet-selector/[email protected]

วิธีใช้

เตรียมมัน

นำเข้าสไตล์ตัวเลือกกระเป๋าเงินใกล้ แอพต้องการให้ตัวเลือกกระเป๋าเงินอย่างถูกต้อง

 import '@near-wallet-selector/modal-ui/styles.css'

ใช้มัน

มันง่ายสุด ๆ ที่จะได้รับกระเป๋าเงินและ/หรือ API สัญญาในสถานที่ทั้งหมดในครั้งเดียว ลองดู:

 // web3Api.ts
import naxios from '@wpdas/naxios'

const naxiosInstance = new naxios ( {
  rpcNodeUrl : 'https://free.rpc.fastnear.com' , // optional
  contractId : CONTRACT_ID ,
  network : 'testnet' ,
} )

/**
 * NEAR Wallet API (Must be a single instance)
 */
export const walletApi = naxiosInstance . walletApi ( )

// Examples of contract API instance usage

/**
 * Contract API
 * This is going to use default contractId (CONTRACT_ID)
 */
export const contractApi = naxiosInstance . contractApi ( )

/**
 * Another Contract API
 */
export const socialDBcontractApi = naxiosInstance . contractApi ( { contractId : 'v1.social08.testnet' } )

/**
 * Greeting Contract API
 */
export const greetingContractApi = naxiosInstance . contractApi ( {
  contractId : 'dev-1692221685438-15421910364142' ,
} )

/**
 * NEAR RPC API
 */
export const rpcApi = naxiosInstance . rpcApi ( ) 

การเปิดตัวเลือกกระเป๋าเงินที่ลงชื่อเข้าใช้

คุณสามารถเปิด Modal ใกล้เคียงกับ Wallet Selector โดยการโทร signInModal() :

 import { walletApi } from './web3Api'

walletApi . signInModal ( ) 

ปรับแต่งตัวเลือกกระเป๋าเงินสำหรับตัวเลือกกระเป๋าเงินใกล้

โดยค่าเริ่มต้น Naxios จะใช้ @ใกล้กับ Wallet-Selector/My-Near-Wallet เป็นวิธีการเชื่อมต่อกระเป๋าเงิน อย่างไรก็ตามคุณสามารถเพิ่มตัวเลือกกระเป๋าเงินอื่น ๆ ดังนี้:

npm install @near-wallet-selector/ledger @near-wallet-selector/my-near-wallet

จากนั้นคุณสามารถเริ่ม Naxius ดังนี้:

 import naxios from '@wpdas/naxios'
import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet'
import { setupLedger } from '@near-wallet-selector/ledger'

const naxiosInstance = new naxios ( {
  contractId : CONTRACT_ID ,
  network : 'testnet' , // or mainnet, localnet
  walletSelectorModules : [ setupMyNearWallet ( ) , setupLedger ( ) ] ,
} )

/**
 * NEAR Wallet API (Must be a single instance)
 */
export const walletApi = naxiosInstance . walletApi ( )

ค้นหาตัวเลือก Wallet ใกล้ทั้งหมดที่นี่: ใกล้ Wallet Selector

การอ้างอิง API สัญญา

• view : โทรแบบอ่านอย่างเดียวเพื่อดึงข้อมูลจากเครือข่าย มันมีพารามิเตอร์ต่อไปนี้:
  • method : ชื่อวิธีของสัญญา
  • props? : พารามิเตอร์เสริมด้วย args สำหรับวิธีการของสัญญา
  • config? : ปัจจุบันสิ่งนี้มีเพียง useCache PROP เมื่อ USECACHE เป็นจริงสิ่งนี้จะใช้ข้อมูลแคชที่ไม่ได้รับแรงผลักดันแทนที่จะเรียกวิธีการของสัญญา
• call : โทรหาวิธีที่เปลี่ยนสถานะของสัญญา นี่คือเจ้าหนี้ มันมีพารามิเตอร์ต่อไปนี้:
  • method : ชื่อวิธีของสัญญา
  • props? : พารามิเตอร์เสริมด้วย args สำหรับวิธีการสัญญา gas deposit ที่จะแนบและ callbackUrl หากคุณต้องการนำผู้ใช้ไปยังหน้าเฉพาะหลังจากการทำธุรกรรมสำเร็จ
• callMultiple : เรียกหลายวิธีที่เปลี่ยนสถานะของสัญญา นี่คือการชำระและมีพารามิเตอร์ต่อไปนี้:
  • transactionsList : รายการอุปกรณ์ประกอบฉากธุรกรรม คุณสามารถใช้ buildTransaction(...) เพื่อช่วยคุณออก
  • callbackUrl? : หน้าเพื่อนำผู้ใช้ไปหลังจากการทำธุรกรรมทั้งหมดสำเร็จ

Wallet API อ้างอิง

• accounts : บัญชีที่ลงชื่อเข้าใช้
• accountId : รหัสบัญชีหลัก/ครั้งแรกที่ลงชื่อเข้าใช้ในรายการบัญชี
• contractId : รหัสสัญญา
• initNear : เริ่มต้นการเชื่อมต่อกับบล็อกเชนใกล้ สิ่งนี้เรียกว่าโดยอัตโนมัติเมื่อมีการโต้ตอบกับสัญญาใด ๆ
• network : เครือข่ายปัจจุบัน ( testnet , mainnet หรือ localnet )
• recentlySignedInWallets : ส่งคืน ID-S จาก 5 เมื่อเร็ว ๆ นี้ลงนามในกระเป๋าเงิน
• selectedWalletId : รหัสกระเป๋าเงินที่เลือก
• signInModal : เปิดโมดัล Signin Wallet Modal
• wallet : อินสแตนซ์กระเป๋าเงิน
• walletSelector : อินสแตนซ์ WalletSelector

มุมมองสัญญา

ใช้วิธี view ฟรี

 import { greetingContractApi } from './web3Api'

// [free]
greetingContractApi . view < string > ( 'get_greeting' ) . then ( ( response ) => console . log ( response ) )

โทรสัญญา

คุณต้องจ่ายสำหรับทุกคำขอที่คุณทำสำหรับวิธีการ call สิ่งนี้จะเปลี่ยนข้อมูลและเก็บไว้ใน blockchain

 import { greetingContractApi } from './web3Api'

// Set greeting [payable]
const args : { message : 'Hi there!!!' }
greetingContractApi . call < string | undefined > ( 'set_greeting' , args ) . then ( ( response ) => console . log ( response || 'done!' ) )

ทำสัญญาหลายสายพร้อมกัน

เช่นเดียวกับ call คุณจะต้องจ่ายสำหรับทุกคำขอที่คุณทำ สิ่งนี้จะเปลี่ยนข้อมูลและเก็บไว้ใน blockchain

 import { buildTransaction } from '@wpdas/naxios'
import { contractApi } from './web3Api'

// Using the default instance's contract
const transactionA = buildTransaction ( 'set_greeting' , { args : { greeting : 'Hello my dear!' } } )
const transactionB = buildTransaction ( 'set_age' , { args : { age : 22 } } )
// Using diff contract
const transactionC = buildTransaction ( 'update_state' , {
  receiverId : 'my-state-contract.testnet' ,
  args : { allowed : true } ,
} )

// Optional
const callbackUrl = 'https://my-page.com/callback-success'

// [payable]
contractApi . callMultiple ( [ transactionA , transactionB , transactionC ] , callbackUrl ) . then ( ( ) => console . log ( 'Done!' ) )

ระบบแคช

มีระบบแคชสองชนิดที่จะใช้ พวกเขาเป็น Memory Cache และ Storage Cache

Memory Cache : จะถูกล้างเมื่อแอปรีเฟรชเนื่องจากข้อมูลอยู่ในหน่วยความจำเท่านั้น
Storage Cache : ข้อมูลจะยังคงอยู่แม้ว่าแท็บเบราว์เซอร์จะรีเฟรช ข้อมูลยังคงอยู่โดยใช้ที่เก็บข้อมูลในเครื่อง

เมื่อสร้างอินสแตนซ์แคชคุณจะต้องให้ expirationTime (ในไม่กี่วินาที) สิ่งนี้ถูกใช้เพื่อรู้ว่าควรส่งคืนแคชแทนการโทรสัญญาจริง เมื่อแคชหมดอายุจะมีการเรียกร้องให้ทำสัญญาจริง วิธีการของแต่ละสัญญามีเวลาหมดอายุ

 // web3Api.ts
import naxios , { StorageCache } from '@wpdas/naxios'

// ...

/**
 * Cached - Greeting Contract API
 */
export const cachedGreetingContractApi = naxiosInstance . contractApi ( {
  contractId : 'dev-1692221685438-15421910364142' ,
  cache : new StorageCache ( { expirationTime : 5 * 60 } ) , // 5 minutes
} )

จากนั้นในการใช้ view แคชคุณสามารถผ่านวัตถุการกำหนดค่าโดยบอกว่าคุณต้องการใช้ข้อมูลแคช

 import { cachedGreetingContractApi } from './web3Api'

// Fetch Greetings [free]
const args : { }
const config : { useCache : true }
cachedGreetingContractApi . view < string > ( 'get_greeting' , args , config ) . then ( ( response ) => console . log ( response ) )

ใกล้ RPC API

Naxios ยังให้การเข้าถึง RPC API ใกล้เพื่อให้คุณสามารถสอบถามข้อมูลใด ๆ ที่คุณต้องการ เยี่ยมชม เอกสารใกล้ RPC API เพื่อเรียนรู้วิธีการใช้งาน

 import { rpcApi } from './web3Api'

// Viewing account using Near RPC API
rpcApi
  . query ( {
    request_type : 'view_account' ,
    finality : 'final' ,
    account_id : 'wendersonpires.near' ,
  } )
  . then ( ( data ) => console . log ( 'Account Data:' , data ) ) 

เครื่องใช้

buildTransaction

วิธี buildTransaction มีประโยชน์เมื่อคุณต้องการสร้างหน่วยทำธุรกรรมของสัญญาส่วนใหญ่เมื่อคุณต้องการ โทรหลายสัญญา

ดูการอ้างอิงที่นี่

validateNearAddress

สิ่งนี้ใช้เพื่อตรวจสอบว่าที่อยู่นั้นอยู่ใกล้ที่อยู่ที่ถูกต้องหรือไม่

 import { validateNearAddress } from '@wpdas/naxios'

console . log ( validateNearAddress ( 'fake.near' ) ) // true
console . log ( validateNearAddress ( 'fake.nears' ) ) // false
console . log ( validateNearAddress ( 'fake.testnet' ) ) // true
console . log ( validateNearAddress ( 'fake' ) ) // false 

calculateDepositByDataSize

คำนวณเงินฝากที่จำเป็นสำหรับข้อมูลที่ถูกเก็บไว้ (~ 0.00001N ต่อไบต์) พร้อมเพิ่มเล็กน้อยสำหรับบัฟเฟอร์

 import { calculateDepositByDataSize } from '@wpdas/naxios'

const myData = { age : 22 , name : 'user name' }
console . log ( calculateDepositByDataSize ( myData ) ) // 0.00087 Near (not yocto NEAR) 

isClient

Checker ง่าย ๆ ที่จะบอกว่าสิ่งนี้ทำงานบนเซิร์ฟเวอร์หรือไคลเอนต์หรือไม่

 import { isClient } from '@wpdas/naxios'

if ( isClient ( ) ) {
  console . log ( 'Hi from client' )
} else {
  console . log ( 'Hi from server' )
} 

การบริจาค

อย่าลังเลที่จะเปิดปัญหาหรือดึงคำขอ สำหรับการเปลี่ยนแปลงครั้งใหญ่โปรดเปิดปัญหาก่อนเพื่อหารือเกี่ยวกับสิ่งที่คุณต้องการเปลี่ยนแปลง