{"id":22656636,"url":"https://github.com/alto-io/hello-crypto","last_synced_at":"2025-06-23T01:35:07.797Z","repository":{"id":47055429,"uuid":"120083157","full_name":"alto-io/hello-crypto","owner":"alto-io","description":"The \"Hello World\" of blockchain and cryptogames","archived":false,"fork":false,"pushed_at":"2022-07-23T03:52:52.000Z","size":2461,"stargazers_count":49,"open_issues_count":1,"forks_count":26,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T04:53:49.055Z","etag":null,"topics":["aframe","blockchain","cryptocurrency","hello-world","helloworld","javascript","nodejs","solidity"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alto-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-03T10:58:56.000Z","updated_at":"2024-10-25T18:24:32.000Z","dependencies_parsed_at":"2022-09-03T10:41:08.900Z","dependency_job_id":null,"html_url":"https://github.com/alto-io/hello-crypto","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alto-io/hello-crypto","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alto-io%2Fhello-crypto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alto-io%2Fhello-crypto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alto-io%2Fhello-crypto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alto-io%2Fhello-crypto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alto-io","download_url":"https://codeload.github.com/alto-io/hello-crypto/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alto-io%2Fhello-crypto/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261395956,"owners_count":23152439,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aframe","blockchain","cryptocurrency","hello-world","helloworld","javascript","nodejs","solidity"],"created_at":"2024-12-09T10:15:32.305Z","updated_at":"2025-06-23T01:35:02.781Z","avatar_url":"https://github.com/alto-io.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hello Crypto\n\n\nThe \"Hello World\" of blockchain and cryptogames! (ノ ˘_˘)ノ 。゜。ﾟ\n\nLive demo here: \u003chttps://polats.github.io/hello-crypto\u003e\n\n## Quickstart\n\nTo just run the project, install [Node and npm](https://nodejs.org/en/), and then run lite-server:\n\n```\nnpm install -g lite-server\nlite-server\n\n```\n## Creating It From Scratch\nIf we want to learn how the pieces come together, it helps to go through the process of creating the Hello Crypto app ourselves.\n\nWe can break it down into 3 parts:\n\n* (1) interacting with the Ethereum blockchain in your app,\n* (2) creating our own ERC20 token, and\n* (3) deploying it on the blockchain.\n\n----\n\n### Interacting with the Ethereum Blockchain in Your App\n\n#### 1. Install Metamask\n\nIf you haven't yet, install the [Metamask Extension](https://metamask.io/) on your browser.\n\nIn order to interact with the blockchain, we will need a wallet address from which to call transactions from. Currently the easiest way to create one is by using Metamask. And since we're making a web app, Metamask also conveniently provides us helper functions that we'll be using later.\n\n#### 2. Create a new project directory and copy starter files\n\nCreate a new directory, and then copy the following files from the Hello Crypto project onto that directory:\n\n```\nindex-2.html\njs/web3.min.js\njs/truffle-contract.min.js\n```\n\nRename index-2.html to index.html:\n\n```\nmv index-2.html index.html\n```\n\nThe javascript libraries we copied over are [web3.js, the Ethereum Javascript API](https://github.com/ethereum/web3.js) and [truffle-contract](https://github.com/trufflesuite/truffle-contract), a library to help us call Blockchain contracts.\n\n#### 3. Use lite-server to run the app\n\nInstall lite-server and run the app:\n\n```\nnpm install -g lite-server\nlite-server\n```\n\nThe browser should automatically start the web app from index.html and you should see a screen similar to the one below:\n\n![Alt text](ss/1.png?raw=true \"First Run\")\n\nThe app uses our wallet account in Metamask and the web3.js library to interact with the blockchain-- it queries the account's ETH balance, and uses Javascript to display them on the page. If your wallet has ETH it should show the current amount here.\n\n**Note:** The SIM Balance error is expected, it appears since we don't have that custom token's smart contract deployed on the blockchain. We will fix that in the next section.\n\n----\n\n### Creating Our Own ERC20 Token\n\nCreating a custom ERC20 Token is usually the first use case for those learning how to deploy smart contracts. We'll see how to do this using a simple workflow, and then integrate the ERC20 Token it with our web app.\n\n#### 1. Set up Truffle then truffle init\n\n[Truffle](http://truffleframework.com/) is the easiest Ethereum development framework to learn, and is a good fit for us since we've already started using Node and NPM for our web app. Install it via the terminal:\n\n```\nnpm install -g truffle\n```\nAnd then initialize our project by typing:\n\n```\ntruffle init\n```\n\nOnce done you'll see a bunch of new files and directories created in our project directory. These are Truffle's deployment scripts and config files.\n\n#### 2. Install OpenZeppelin\n\nWe will be using the example token smart contract from [OpenZeppelin](https://github.com/OpenZeppelin/zeppelin-solidity). This is a good starting point as they're peer-reviewed smart contracts that follow standards defined by the community. We can use them by simply downloading them also from npm:\n\n```\nnpm install @openzeppelin/contracts\n```\n\nYou should see a node_modules/@openzeppelin folder once the command completes.\n\n#### 3. Open StandardToken.sol\n\nThis is almost a copy of `@openzeppelin/contracts/token/ERC20/ERC20.sol` which implements the IERC20.sol contract interface but instead of having private member variables we will leave them as public.\n\n#### 4. Open SimpleToken.sol\n\nThis is our own ERC-20 custom token which inherits from StandardToken.\n\n![Alt text](ss/2.png?raw=true \"Change Import\")\n\n#### 4. Add Deployment Script\n\nWe then need to add a deployment script to the migrations folder so that truffle can deploy our SimpleToken to a blockchain. Create a **2_deploy_token.js** file in the migrations directory, and add the following lines:\n\n```\nvar SimpleToken = artifacts.require(\"SimpleToken\");\n\nmodule.exports = function(deployer) {\n  deployer.deploy(SimpleToken);\n};\n```\n\n![Alt text](ss/3.png?raw=true \"Deployment Script\")\n\n#### 5. Create local blockchain with truffle develop\n\nWe now setup a local test blockchain by using Truffle, which can be done simply by typing:\n\n```\ntruffle develop\n```\n![Alt text](ss/4.png?raw=true \"Truffle Develop\")\n\nOnce successful we should see the same screen, with us entering the truffle develop console.\n\n#### 6. Deploy the smart contract via truffle migrate\n\nNow that we have a local test blockchain, we can try deploying the SimpleToken contract that we copied from OpenZeppelin. We can do this from within the truffle develop console by typing in:\n\n```\nmigrate\n```\n\nThis will compile our smart contracts into JSON under the build folder, and also deploy the smart contracts unto the local blockchain. A successful run would look similar to the screen below.\n\n![Alt text](ss/5.png?raw=true \"Truffle Migrate\")\n\nCongratulations, you have just deployed an ERC20 Token onto a blockchain! (It's on a local development blockchain for now, we'll see how to deploy to live blockchains in the next section)\n\n#### 7. Connect to the local blockchain from Metamask\n\nNow that we've deployed our contract on a local blockchain, let's see it in action on our web app. Go back to our running web app on the browser (if you closed it, open a new tab and start **lite-server** again).\n\nIn Metamask, change the network that we're connecting to by clicking the dropdown on the upper left of the extension's page. Select **Custom RPC**, and input the default host used by truffle develop: **http://localhost:9545/**\n\nYou should see the error we had previously is now gone, as our web app is now successfully querying the custom token balance from the local blockchain.\n\n![Alt text](ss/6.png?raw=true \"Local Blockchain\")\n\n**Note:** Truffle uses the first account in Truffle develop as the contract creator. In the screenshot above, we imported that account in Metamask using its private key. As the OpenZeppelin SimpleToken sets the contract creator as the holder of all the initial supply of our custom token, we see that the Truffle Account's Sim balance contains exactly that.\n\n## IN PROGRESS\n\n\n(optional) interact with contract on truffle console\n\nSend ETH\n\nweb3.eth.accounts\n\ncontract creator is web3.eth.accounts[0]\n\nrecipientAccount = web3.eth.accounts[1]\n\nweb3.eth.getBalance 0 and 1\n\nweb3.eth.sendTransaction({from:Account1, to:Account2, value: 10000})\n\n\nSend SIM\n\ncontractInstance = SimpleToken.deployed().then(i =\u003e contractInstance = i)\n\ncontractInstance.totalSupply\n\ncontractInstance.balanceOf(web3.eth.accounts[0])\n\ncontractInstance.balanceOf(recipientAccount)\n\nWhat is Big Number?\n\ncontractInstance.transfer(recipientAddress, 5000)\n\ncheck new balance\n\n\n(optional) Setup web3 javascript console\n\nPerform previous ETH transfer operations\n\nweb3.eth\n\nadd truffle-contract.min.js\n\nload simpleToken json\n\nreturn balance\n\nAdd make-it-rain.html\n\n\nIII. Deploy on the Blockchain\n\nTo interact with the blockchain, we’ll need to have our own wallet account. We’ve been using Truffle develop accounts, but now we should use our own by creating one\n\nInstall Metamask, remember mnemonic\n\nGet some ETH from faucet inside metamask\n\nsetup HDWallet provider, then connect to ropsten\nmigrate\n\nChange make-it-rain settings to call ropsten on testnet instead\n\nChange settings to use ETH instead\n\nShow deployed website","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falto-io%2Fhello-crypto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falto-io%2Fhello-crypto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falto-io%2Fhello-crypto/lists"}