# 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(); ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://punica-box.gitbook.io/docs/bitcoin-catcher-box.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.