Truffle — чрезвычайно удобный инструмент для разработки, тестирования и развертывания смарт-контракта. Но, по моему личному мнению, совершенно необязательно связывать процесс сборки внешнего интерфейса со сборкой трюфеля. У вас может быть веб-приложение, созданное с помощью webpack, gulp или grunt, в котором есть все возможные настраиваемые задачи, которые транспилируют и связывают javascript. Встроить существующий пайплайн сборки внешнего интерфейса в процесс сборки трюфеля может оказаться невыполнимой миссией, по крайней мере, так случилось со мной.

Поэтому мой подход к этой проблеме заключается в использовании truffle в качестве компилятора контрактов на чистом эфириуме. После компиляции и развертывания контракта мы можем взять abi json из папки сборки. Если вы внимательно изучите abi json, вы обнаружите, что он включает в себя все субконтракты, которые он импортирует в Solidity. Это означает, что одного корневого контракта abi json достаточно, чтобы представить все. Еще одна полезная информация о abi json заключается в том, что в конце он также включает развернутый адрес контракта, например:

Итак, предположим, что вы успешно развернули свой контракт в любой заданной сети, следующим шагом будет копирование вашего abi json и вставка его в файл javascript (возможно, назовите его tokenContract.js) и назначение имени переменной. Конечно, вам не нужно делать это вручную, скрипт для копирования файла из папки сборки truffle в каталог вашего проекта будет идеальным.

Теперь у вас есть abi json в качестве переменной javascript. Нам нужно включить web3 и truffle-contract (ранее известный как etherPudding), как я это сделал, установив из npm. Запустите это,

npm install web3
npm install truffle-contract

Затем переместите файлы web3.min.js и truffle-contract.min.js из папки dist в папку поставщика. Теперь мы можем включить контракт и библиотеки как обычные js-файлы.

После всех этих настроек мы можем начать вызывать функции контракта из сети ethereum следующим образом:

let web3Provider, web3;
if (typeof web3 !== 'undefined') {
  web3Provider = web3.currentProvider;
  web3 = new Web3(web3.currentProvider);
} else {
  web3Provider = new Web3.providers.HttpProvider('http://127.0.0.1:7545');
  web3 = new Web3(web3Provider);
}
// tokenContract here is the json we included in global
const contractObject = TruffleContract(tokenContract); 
contractObject.setProvider(web3Provider);
contractObject.deployed()
  .then(instance => {
    const defaultWallet = web3.eth.defaultAccount;
    return instance.balanceOf(defaultWallet);
  })

Обратите внимание, что я написал это на старом школьном ванильном js, чтобы продемонстрировать идею. Если у вас есть настройка requireJS, вы можете просто потребовать abi json как json с web3 и truffle-contract в качестве узла-модуля. Не стесняйтесь комментировать эту статью.

P.S.

С помощью этого подхода я интегрировал базовый токен ERC20 в нашу существующую интерфейсную инфраструктуру для хакатона моей компании. Жаль, что мне не разрешили представиться по какой-то глупой бюрократической причине. Но я искренне надеюсь, что эта статья будет полезна начинающим разработчикам децентрализованных приложений.