> For the complete documentation index, see [llms.txt](https://punica-box.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://punica-box.gitbook.io/docs/bitcoin-catcher-box.md). # Bitcoin Catcher Box ## Getting Started ### Setting up the development environment There are a few technical requirements before we start. Please install the following: * [Git](https://git-scm.com/) * [Cocos Creator](https://www.cocos.com/en/creator) * [Visual Studio Code](https://code.visualstudio.com/) {% hint style="warning" %} This project is not always brought up to date with the most recent version of **Cocos Creator**. Please make sure you are using Cocos Creator v2.1. {% endhint %} ### Unboxing the dApp Install Punica CLI. ```bash $ pip3 install punica ``` Unbox the bitcoin-catcher-box. ```bash $ punica unbox bitcoin-catcher ``` Install dependency. ``` $ npm install ``` ### Running Cocos Creator {% tabs %} {% tab title="Windows" %} Run Cocos Creator by double-click the `CocosCreator.exe` file in the installation target folder or click `Cocos Creator` from Start menu to start Cocos Creator. {% endtab %} {% tab title="Mac" %} Run Cocos Creator by double-clicking the `CocosCreator.app` application icon. {% endtab %} {% endtabs %} For some Windows operating systems, the following error may be encountered: ``` This browser does not support WebGL .. ``` It means the GPU rendering is not supported by the graphics card driver. {% hint style="info" %} If this happens, it is usually only need to ensure the official driver of the corresponding model of the graphics card has been successfully installed. {% endhint %} ### Opening Project You can browse and open the project in the local file system by clicking the **Open Other Projects** button. ![](/files/-Lk9mpT3kcGAdNiuHVwS) {% hint style="info" %} For some MAC operating system, the window can not be displayed when open the project, please Drag the CocosCreator.app from the DMG into the application, and then open it. {% endhint %} After initial building finished, please pay attention to the **Assets** panel, on which all the resource allocation graphs of the project are shown. ![](/files/-Lk9j7dDqqd3Q4MJgDj_) {% hint style="info" %} Cocos Creator uses a particularly structured folder as legitimate project marking, but it isn't a construction document. You only need to click the project folder when choosing the project. {% endhint %} ### Previewing Scene To see a preview of the game scene, please click the **Preview** button at the top of the editor window. ![](/files/-Lk9lXYYhoqTC1bps3UJ) ![](/files/-Lk9kqQBiwuEIVYQz5db) ## What's Cocos Creator Cocos Creator is a script development, entity-component and data-driven game development tool focused on content creation. An easy-to-follow content production workflow and a powerful suite of developer tools for game logic and high-performance game creation. For the more information, you can click [here](https://docs.cocos.com) to read Cocos Creator User Manual. ![](/files/-LjF_GT7ymzH2xATKuan) ## Learning in Action We have a smart contract in project `contracts` folder. Therefore, we needn't to write a new contract, only need to compile and deploy it. ### Compiling the Smart Contract We need to compile our Python contract to bytecode for the Neo Virtual Machine (NeoVM) to execute. Think of it as translating our human-readable Python into something the NeoVm understands. In a terminal, make sure you are in the root of the directory that contains the dapp and type: ``` $ punica compile ``` {% hint style="info" %} If you encountering problems running this command, please open a issue in [here](https://github.com/punicasuite/punica-python/issues). {% endhint %} You should see output similar to the following: ``` bitcoin_catcher --------------- v Preparing to compile v Compiling bitcoin_catcher.py v Saving avm file... --------------------------------------------------------- > Avm file written to bitcoin-catcher-box\build\contracts ``` ### Deploying the Smart Contract Now that we've successfully compiled our contract, it's time to deploy it to the blockchain! You'll see one JSON file already in the `contracts` directory `config.json`. In this file, the following information will be used in deploying process. ```javascript "deploy": { "name": "bitcoinCatcher", "version": "v1.0.0", "author": "NashMiao", "email": "wdx7266@vip.qq.com", "desc": "https://github.com/punica-box/bitcoin-catcher-box", "needStorage": true, "payer": "ANH5bHrrt111XwNEnuPZj6u95Dd6u7G4D6", "gasPrice": 500, "gasLimit": 21000000 } ``` {% hint style="info" %} Read more about migrations in the [Punica Python documentation](https://punica.gitbook.io/docs/punica-python). {% endhint %} Back in our terminal, deploy the contract to the blockchain. ``` $ punica deploy ``` You should see output similar to the following: ``` v Sending transaction into network... v Checking transaction status... Deploy bitcoin_catcher.avm --------------------------- > transaction hash: 7f83d9c6415fca1387439ce19b1c21796e0b4b6cd7b89706b420cadcfd9f4cde > block height: 3024343 > nonce: 1628597378 > gas price: 500 > gas limit: 21000000 > payer: ANH5bHrrt111XwNEnuPZj6u95Dd6u7G4D6 > balance: 61 ONT, 91.881807095 ONG > Saving transaction to chain. bitcoin_catcher --------------- > contract address: 90b6e37782ad5a2bfbca291e9ff32c5a5077c1e8 > name: bitcoinCatcher > email: wdx7266@vip.qq.com > author: NashMiao > version: v1.0.0 > description: https://github.com/punica-box/bitcoin-catcher-box -------------------------------------- You can invoke it by contract address. ``` ### Invoking the Smart Contract Punica is very easy when it comes to smart contract invoking, in that function can be executed with only provide parameters in JSON file. In `contracts/config.json`, the following information will be used in deploying process. ```javascript "invoke": { "address": "c27751df0927082000cb9cfb3a778da64dffa9c9", "defaultPayer": "ANH5bHrrt111XwNEnuPZj6u95Dd6u7G4D6", "defaultSigner": "ANH5bHrrt111XwNEnuPZj6u95Dd6u7G4D6", "sleep": 6, "gasPrice": 500, "gasLimit": 21000000, "functions": [ { "register": [ "AazEvfQPcQ2GEFFPLF1ZLwQ7K5jDn81hve", "NashMiao" ], "signers": [ "AazEvfQPcQ2GEFFPLF1ZLwQ7K5jDn81hve" ], "payer": "AazEvfQPcQ2GEFFPLF1ZLwQ7K5jDn81hve", "event": [ "utf8", "address", "utf8" ] } ] } ``` To invoke `register()` function, you only need to back in our terminal. ``` $ punica invoke register ``` You should see output similar to the following: ``` Execute register ---------------- v Sending transaction into network... v Checking transaction status... > transaction hash: 86282c0fae42b08f12c023225c91595baabc03f2a6a7752a6c1aecf958535324 > block height: 3024378 > nonce: 1255641297 > gas price: 500 > gas limit: 21000000 > payer: AazEvfQPcQ2GEFFPLF1ZLwQ7K5jDn81hve > balance: 211 ONT, 163.68873089000002 ONG > Saving transaction to chain. > Contract emit event: { "ContractAddress": "c27751df0927082000cb9cfb3a778da64dffa9c9", "States": [ "register", "AazEvfQPcQ2GEFFPLF1ZLwQ7K5jDn81hve", "NashMiao" ] } Using 'punica info tx 86282c0fae42b08f12c023225c91595baabc03f2a6a7752a6c1aecf958535324' to query all events in transaction. ``` To test the `register()` function, we can invoke `get_user_nane()` function to get the current value store in blockchain. ``` $ punica invoke get_user_nane ``` If test success, it should returns the given `user_name`. Therefore, you should see output similar to the following: ``` Prepare execute get_user_name ----------------------------- v Sending transaction into network... v Parsing result... > gas: 20000 > state: 1 > result: NashMiao > notify: [] ``` ### Interacting with the Smart Contract #### Desktop Browser ontology-dapi is A lightweight Javascript library for interacting with Chrome Plugin which is integrated provider engine. ``` $ npm install ontology-dapi -S ``` We can use it as ES6 module in our game scene's script. ```typescript import { client } from 'ontology-dapi'; ``` We can also use it as CommonJS/ES6 module in our game scene's script. ```javascript var client = require('ontology-dapi').client; ``` After we regist with Provider successful, we can use it in our project. ```typescript client.registerClient({}); ``` #### Mobile Phone cyano-bridge is library allows your dApp to interface with mobile wallet which is integrated provider engine. ``` $ npm install cyanobridge -S ``` We can use it as ES6 module in our game scene's TypeScript script. ```typescript import { client } from 'cyanobridge'; ``` We can also use it as CommonJS/ES6 module in our game scene's script. ```javascript var client = require('cyanobridge').client; ``` After we regist with Provider successful, we can use it in our project. ```typescript client.registerClient(); ```