브라우저에서 Solidity 컴파일

나처럼 ReactJS를 사용하여 클라이언트에서 견고성을 컴파일할 수 있는 앱을 만들려고 할 때 Browser-solc를 사용하여 문제가 발생한 경우 이 문서가 적합합니다. @agnostico/browser-solidity-compiler를 사용하여 곧 결과를 얻고 직면할 수 있는 일반적인 문제를 제거하는 방법을 살펴보겠습니다.

브라우저에서 견고성 스마트 계약을 컴파일하려는 이유는 여러 가지가 있습니다. 아마도 다음remix을 빌드하거나 완전히 다른 애플리케이션을 빌드하고 클라이언트가 내가 빌드하는 경우Agnostico와 같이 컴파일된 내용을 완전히 제어하기를 원할 수 있습니다.
eth_compile API가 deprecated 이었기 때문에 사용 가능한 대안(Solc-JS 및 확장Browser-Solc)은 서버 설정에서 가장 잘 작동하거나 HTML DOM에 밀접하게 결합되어 있으므로 최신 환경에서 유연하게 사용할 수 없습니다. ReactJS와 같은 Javascript 라이브러리 환경은 적어도 그렇게 간단하지는 않습니다. 이것은 내 경험상 끔찍한 개발자 경험인 응용 프로그램과 함께 개발할 때 응용 프로그램을 짜증나게 만들 것입니다.

다른 사람들이 쉽게 애플리케이션을 구축할 수 있도록 저는 solcjs의 조항을 기반으로 개발 환경에서 효율적으로 작동할 수 있는 패키지를 만들었습니다(타입스크립트 지원 포함). 기본 스레드에서 무거운 컴파일 계산을 오프로드하기 위해 내부적으로 webworkers을 사용합니다. 실제로 살펴보겠습니다.

이 프로젝트는 저장소의 example 분기에서 사용할 수 있습니다. 여기에서 스니펫으로 어떻게 작동하는지 설명하겠습니다.

예제 리포지토리는 create-react-app으로 빌드되었으며 패키지를 설치하기 위해 다음을 실행합니다.
npm i @agnostico/browser-solidity-compiler
애플리케이션에서 패키지를 사용하여

// App.tsx
...
import {
  getCompilerVersions,
  solidityCompiler,
} from '@agnostico/browser-solidity-compiler';
...

getCompilerVersions는 https://binaries.soliditylang.org/bin/list.json에서 기존 견고성 버전 목록을 가져오는 비동기 작업입니다.

// App.tsx
...
const loadVersions = async () => {
 const { releases, latestRelease, builds } = await getCompilerVersions()
};

// Load versions immediately page is mounted
useEffect(() => {
 (async () => { 
   await loadVersions() 
  })();
 }, []);
...

반환된 객체는 다음과 같습니다.



그런 다음 계약을 컴파일하기 위해 필요한 인수를 컴파일러 개체에 전달하기만 하면 됩니다. 템플릿 리터럴을 사용하지 않는 경우 버전은 다음과 유사하게 보입니다: https://binaries.soliditylang.org/bin/soljson-v0.8.17+commit.8df45f5f.js (Solidity 버전 0.8.17을 사용하는 경우). 그러나 사용자가 버전을 전환할 수 있는 경우 동적으로 만들기 위해 다음과 같이 구현합니다.

// App.tsx
...
const compiled = (await solidityCompiler({ 
version: `https://binaries.soliditylang.org/bin/${usingVersion}`,
 contractBody: content,
 options,
}));
...

contractBody는 컴파일할 계약의 문자열입니다. 동안 options 최적화 개체입니다. 선택 사항입니다. 예를 들어 다음과 같이 최적화할 수 있습니다.

options.optimizer = {
  enabled: true,
  runs: 200,
};

예제 리포지토리의 계약은 컴파일된 변수로 반환되고 상태에 저장되며 이러한 방식으로 액세스됩니다.

// App.tsx
Object.keys(compiledContract?.contracts?.Compiled_Contracts).map((cont) => (
  <div key={cont}>
   <p>{cont}</p>

  <span>Bytecode</span>: <small>
{
                      compiledContract?.contracts?.Compiled_Contracts[cont]?.evm?.bytecode?.object
 }
   </small>
 </div>
 )
)

계약(들)은 Compiled_Contracts라는 반환된 개체의 속성에 저장되며 여기서 우리는 위에 표시된 abi 또는 bytecode와 같은 해당 정보에 액세스할 수 있습니다.

참조:
Solc-JS
@agnostico/browser-solidity-compiler