Neo N3 : CPM을 사용하여 오프체인 TypeScript SDK 생성하는 방법

CPM은 스마트 컨트랙트를 다운로드하고 여러 언어로 온체인 및 오프체인 SDK를 생성할 수 있도록 도와주는 도구입니다. 직접 작성할 필요 없이 최소한의 변경만으로 가능합니다.

1. 작업 공간 초기화

프로젝트를 템플릿에서 생성하기 위해 vite를 사용하는 것을 권장합니다. npm create vite@latest를 실행하고 프롬프트를 선택하여 프로젝트를 생성하면 됩니다. 프로젝트를 생성한 후, CPM을 사용하여 오프체인 SDK 생성을 자동화할 시간입니다.

2. CPM 사용하기

CPM을 사용하여 TypeScript 프로젝트에 오프체인 SDK를 추가하는 것은 매우 쉽습니다. CPM을 설치한 후 명령 프롬프트에서 직접 단일 SDK를 생성하거나, 설정 파일을 구성하여 처리하고 동시에 여러 SDK를 생성할 수 있습니다. 이 튜토리얼에서는 유지보수가 가장 쉬운 방법을 사용하겠습니다.

터미널에서 cpm init을 실행하여 설정 파일을 생성해야 합니다. 이는 기본적으로 Props 스마트 컨트랙트를 가져오는 cpm.yaml 파일을 생성합니다. 유용한 컨트랙트이지만 원하는 것이 아닐 수 있으므로, 이 글에서는 Neo Token 컨트랙트의 함수를 쉽게 호출하고 싶다고 가정하겠습니다.

설정 파일은 원하는 SDK를 생성하기 위해 조정될 4개의 다른 섹션으로 나뉩니다:

• defaults: src 폴더 내에서 오프체인 TypeScript SDK를 생성하고 NEF와 manifest를 다운로드하지 않음을 나타냅니다;
• contracts: SDK를 생성하고자 하는 Neo Token 컨트랙트를 포함합니다;
• tools: 스마트 컨트랙트를 다운로드하지 않으므로 이 섹션은 불필요합니다;
• networks: Neo Token 컨트랙트가 있는 Main Net 네트워크를 포함합니다.

cpm.yaml 파일을 조정한 후 다음과 같은 형태가 되어야 합니다:

defaults:
  contract-source-network: mainnet
  contract-generate-sdk: true
  contract-download: false
  off-chain:
    languages:
      - ts
    destinations:
  ts: src/contracts

contracts:
  - label: NEO token
    script-hash: '0xef4073a0f2b305a38ec4050e4d3d28bc40ea63f5'

networks:
  - label: mainnet
    hosts:
      - 'https://mainnet1.neo.coz.io:443'
      - 'http://seed1.neo.org:10332'

cpm.yaml 구성 방법에 대한 자세한 정보는 CPM 문서를 확인하세요.

그런 다음 터미널에서 cpm run을 실행하면 SDK가 src/contracts/neotoken 폴더에 생성됩니다. 컨트랙트가 메서드 시그니처를 추가하거나 제거할 때마다 SDK를 업데이트하기 위해 cpm run을 다시 실행해야 합니다.

3. SDK 초기화 및 실행

이제 SDK가 생성되었으므로 의존성을 설치해야 합니다: @types/node와 @cityofzion/neon-dappkit-types. 그런 다음 SDK를 가져와서 초기화하여 호출할 수 있도록 해야 합니다.
SDK를 초기화하려면 먼저 Neo3-Invoker를 구현하는 클래스를 인스턴스화해야 합니다.
보안과 사용자 경험을 향상시키기 위해, 트랜잭션 서명이나 사용자 계정 세부 정보 접근과 같이 사용자 인증이 필요한 시나리오에서는 WalletConnect를 사용하는 것이 좋습니다. 그러나 이러한 인증이 불필요한 상황에서는 NeonDappkit의 NeonInvoker가 더 간소화된 솔루션을 제공합니다. 사용자가 지갑을 통해 요청을 승인할 필요가 없기 때문입니다. 우리 예제에서는 두 방법을 모두 사용합니다: 사용자가 지갑에 로그인하지 않은 경우 NeonInvoker를 사용합니다.

import { NeoToken } from './contracts/neotoken';

import { Neo3Invoker } from '@cityofzion/neon-dappkit-types';
import { NeonInvoker } from '@cityofzion/neon-dappkit';
import WcSdk from '@cityofzion/wallet-connect-sdk-core';

let wcSdk: WcSdk;
let neonInvoker: NeonInvoker;

async function initInvokers() {
  wcSdk = await WcSdk.init({
    projectId: 'a9ff54e3d56a52230ed8767db4d4a810', // the ID of your project on Wallet Connect website
    relayUrl: 'wss://relay.walletconnect.com', // we are using walletconnect's official relay server
    metadata: {
      name: 'MyApplicationName', // your application name to be displayed on the wallet
      description: 'My Application description', // description to be shown on the wallet
      url: 'https://myapplicationdescription.app/', // url to be linked on the wallet
      icons: ['https://myapplicationdescription.app/myappicon.png'], // icon to be shown on the wallet
    },
  });

  neonInvoker = await NeonInvoker.init({
    rpcAddress: NeonInvoker.MAINNET,
  });
}

function getInvoker(): Neo3Invoker {
  if (wcSdk.isConnected()) {
    return wcSdk;
  } else {
    return neonInvoker;
  }
}

애플리케이션에 지갑을 연결하는 방법은 Wallet Connect 문서를 확인하세요.

그러면 이 SDK로 컨트랙트 메서드를 호출할 수 있습니다:

async function main() {
  const neoToken = new NeoToken({
    scriptHash: NeoToken.SCRIPT_HASH,
    invoker: getInvoker(),
  });
  console.log(await neoToken.symbol()); // NEO
  console.log(await neoToken.decimals()); // 0
  console.log(await neoToken.totalSupply()); // 100000000
}