# Getting Started 👋🏽 🔥The DappHero documentation site🔥 {% hint style="danger" %} DappHero has been OpenSourced. DappHero will be retired at the end of 2020. \ \ Update: The DappHero Codebase (the code that the DappHero Team created) is now in the public domain. This does not include whatever code DappHero is built upon and has it's own license (for example: React). This only applies to the code that DappHero wrote.\ \ The code will remain freely accessible here: \ {% endhint %} ### Welcome! Vítejte! **Bienvenido**! Willkommen! **Καλώς ορίσατε! أهلا وسهلا! 歡迎! ようこそ! स्वागत!** Now that we're introduced, let's talk about what **DappHero** is! DappHero is a simple low-code/no-code tool that lets you easily connect blockchain to your website, small business, portfolio, online store, blog, and much more! Our goal is to empower you to connect blockchain to *all the things,* without needing to code! Our motto is *you do you*. 🙌 #### Tell me more! DappHero is a small plugin that runs *inside* your webpage and connects your elements to blockchain. After adding DappHero to your website, label each element you want to connect to the blockchain, then we do all the work. When your users come to your site, the blockchain is *automagically* there! Converting an existing website to a blockchain-powered *masterpiece* takes only a few moments, and when users visit your site, the blockchain is ready and waiting! Take a look at the original video that started it all! {% embed url="" %} The original video that started it all! {% endembed %} ### Is this for me? **Yes!** We are working hard to make DappHero accessible to everyone starting with you: the creator, designer, visionary, and entrepreneur! All without needing to know how to code. We promise, if you are already here- then DappHero is for you. We made this documentation to help you get up and running quickly. ‌ We are building DappHero for people who may have little-to-no experience coding, but DappHero is just as powerful, if not more, if you have some experience designing with HTML. Fans of no-code will be happy to see that we work with popular [no-code tools like WebFlow](https:///@dapphero/s/dapphero-docs/~/drafts/-LzOYFj5XIyCphmkaMw4/integrations/using-weblow/starting-with-webflow). For our HTML fans, you can start designing directly in tools like Glitch, or even by hand! It only takes a couple lines of HTML to turn your page into a full-blown Ethereum powered website! {% hint style="info" %} Want to brush up on your HTML skills? Check out: {% endhint %} {% hint style="warning" %} Note for our Alpha Users! Currently in our Alpha version users **are required to use MetaMask,** it can be installed [here](https://metamask.io/). In future versions of DappHero we will remove this requirement and you and your users will have an entirely seamless experience when connecting to Ethereum. Additionally because we are in Alpha there may be bugs or errors in the code. Be very careful when interacting with smart contracts on main-net or when sending ether and inform your users to double check their transactions. We make no guarantees or warrantees! {% endhint %} # How does it work? 🧐 All about the magic. All websites are constructed with items called *elements* that are described using HTML. When collected together, they form your website and include all the text, images, and designs that are displayed on a user's screen when they visit your site. With DappHero, you add special attributes to each element you want to use with blockchain. When DappHero runs, it will automatically replace your existing elements with super-powered blockchain-connected elements! Take a quick look at the HTML example below, this is the HTML required to display the name of the currently connected ethereum network. ```markup
Network name will appear here! (Mainnet, Rinkeby, Ropsten, etc)
``` It's that easy DappHero can do a wide range of things: get your user's Ethereum address, their 3Box profile name, even connect to Smart Contracts to read data from the blockchain or send money! ### What if I don't know HTML? No problem! We have been working hard to make DappHero easy to use for people who love no-code tools (just like we do!). Our first officially supported no-code platform is [WebFlow](/integrations/using-weblow), a fantastic tool that lets you design brilliant websites AND uses DappHero without ever writing a line of code! We also have some [templates](/integrations/using-weblow/start-from-a-template) that will help you get started quickly. We are working hard to support DappHero in other platforms, but generally anywhere that you can add a ` ``` ### List of Listeners: #### Smart Contracts `listenToTransactionStatusChange()` Fires for each step in the process of preparing and submitting a transaction to the blockchain. `listenToSmartContractBlockchainEvent()` Fires for each event [emitted by an Ethereum smart contract](https://solidity.readthedocs.io/en/develop/abi-spec.html?highlight=events#events). `listenToContractOutputChange()` Fires for a change in smart contract output. `listenToContractAutoInvokeChange()` Fires each time a public smart contract method is auto-invoked. For auto-invoked elements, this can be noisy. `listenToContractInvokeTriggerChange()` Fires each time a smart contract is invoked. #### Network Feature (ETH Transfer) `listentoEthTransfer()` Fires for an Ethereum transfer event. #### 3Box Feature `listenTo3BoxProfile()` Fires for a 3Box feature event. #### NFT Feature These events will fire based on their related functionality. They each work the same. `listenToNFTLoadAllToken()` `listenToNFTLoadMultipleToken()` `listenToNFTLoadSingleToken()` #### User Feature `listenToUserAddressChange()` Fires for a change in the user address, for example, when switching addresses in MetaMask. `listenToUserBalanceChange()` Fires when a users balance changes. # Force Refresh How to programmatically force refresh the DappHero Engine {% hint style="danger" %} Force Refresh functionality is experimental. {% endhint %} For more advanced use cases, such as manipulation of the DOM via external script such as jQuery, it can be useful to force DappHero to refresh its view of the user's DOM. An example use case would be using jQuery to append new DOM elements to the user's webpage. DappHero by default only scans the DOM once, at page load, so if DappHero enabled elements are programmatically added to the DOM after page load, the engine will not be aware of them. Additionally, the DappHero core engine does not "watch" the user's DOM, so if a DappHero powered website element is altered via a script, the engine will not be aware of the change. For example, if you were to use jQuery to change the input value of a form field or the value of an invisible input for an auto-invoked method, DappHero will be unaware of this change. To assist builders looking to add functionality via external scripts, we have exposed a function on the window that when called will trigger a refresh of the DappHero engine. Call this function at the end of any external script manipulation to ensure DappHero always has the most recent version of the DOM. ``` window.dappHero.retriggerEngine() // or without window dappHero.retriggerEngine() ``` By invoking the `retriggerEngine()` function, DappHero will re-run and recheck the webpage DOM for changes. # Database A simple end-to-end encrypted database in the browser {% hint style="info" %} This is an experimental feature, have fun, but remember it \*could\* break {% endhint %} ### Details The DappHero database is a super simple, in browser, end-to-end encrypted database that can be access directly from the window object in the browser. Each database is scoped to the `ProjectId` of your project and can be used as a fast, efficient `key:value` store. Users are scoped to DappHero, so a user that signs up at any DappHero site will also be a valid user on your site and vice versa. The Database however is not shared, so the data available to you will be specific to your projectId. The data in the database is encrypted client side in the browser for each user and is backed up to Amazon AWS in an encrypted format. DappHero can not access this data and can not retrieve user credentials, so if they lose their login- it's gone. All functions are async. DappHero Database is based on [UserBase](https://docs.dapphero.io/advanced/www.userbase.io). ### signUp `window.dapphero.db.signUp({username: "my name", password: "xxxxx"})` ### signIn `window.dapphero.db.signIn({username, password})` ### signOut `window.dapphero.db.signOut()` ### openDatabase `window.dapphero.db.openDatabase(callbackToReceiveDatabase)` ### insertItem `window.dapphero.db.insertItem(item)` ### updateItem `window.dapphero.db.updateItem(item, itemId)` ### deleteItem `window.dapphero.db.deleteItem(itemId)` ### # Ethereum Provider Connecting to the exposed ethereum provider with DappHero For more builders who are incorporating DappHero on mixed technology websites, we have offered the ability to get access to the underlying Ethereum Provider. ### Window object An [Ethers.js](https://docs.ethers.io/ethers.js/html/) (v5) powered Ethereum provider is available at `window.dappHero.provider`. This provider can be used to create new connections to the Ethereum blockchain without needing DappHero. ``` window.dappHero.provider // or without window dappHero.provider ``` # ChangeLog A list of things we are working on here at DappHero! Nightly Builds Monday, May 18th, 2020 * Alpha V2 is now active. The **main.js** script tag now has all mainline features including collectibles. Bug releases are forthcoming. Until then there won't be any new nightly builds as we move towards beta. Nightly Builds * Latest nightly build: (Nightly builds are experimental) * **main-05-14-2020.js** * Improved support for Collectibles and Smart Contract Events. * **main-05-11-2020.js** * Improved support for the $THIS keyword * **main-05-08-2020.js** * Support for smart contract events * **main-05-06-2020.js** * Add auto-clear property for inputs. * **main-05-04-2020.js** * fix for collectibles * **main-05-01-2020.js** * ethUserBalance now updates faster * **main-04-27-2020.js** * various improvements Sunday, April 26, 2020 * Updated DappHero Docs: * **$true** [Accessing anonymous inputs](/features/using-smart-contracts/inputs#anonymous-inputs) * [AutoClear tag](/features/using-smart-contracts/inputs#autoclear-inputs) # Bug Bounty Get paid to find bugs! ### Bugs already found currently in the queue to be fixed: ~~July 14, 2020 : there is an error when trying to generate an HTML page with an incomplete/malformed contract~~ July 14, 2020: there is an error when copying an ABI from Remix in that the methods tab for contracts does not properly display the method HTML. (note the date above was wrong, it should have been 14/15, not 24/25!) ~~July 15, 2020: There is an error for login with google.~~ {% hint style="info" %} So far two bug bounties of $25 have already been claimed and the bugs fixed! {% endhint %} ### Get Started While we are in Beta, we're creating a Bug Bounty to help us find bugs. We are paying out a token amount of DAI to show our appreciation. It's not a ton, but we do want to show we care! ### $25 USD in DAI For any bug in the User Interface hosted at DappHero.io. This can be problems with the login, problems with the UI (functional, not just aestetic) or anything in that realm. If something is broken or not working correctly on the website, that will probably count, so let us know! ### $50 USD in DAI For any bug found in the actual DappHero core engine that runs client-side in users browsers. There are some exceptions that will be at our own discretion: sometimes Web3 and Ethereum can perform in strange ways. ### Rules To get a bug bounty you need to do a couple things, first you **must** email the bug information to us at: ****. Please do not post the bug in the Telegram group or in the forum. We want to have a chance to fix it before we make it public. Second, to get the payout, you must confirm for us in your email that you are not a person on the US sanctions list, nor a resident/citizen of any country on the US sanction list. Third, we might not list the bugs that are found, but you will have to trust us if we say the bug has already been reported. There might be some bugs for which we decide not to fix right now, we will try to make that list of bugs public, but again, you're going to have to trust us on that one. ### Terms and Conditions So, there are some caveats. Bug bounties are at our own discretion. We will try to get back to you within 7 days for a bug report. We may, at any time, limit the total number of bounties we give out. We might stop the program without telling anyone. This is intended to thank our users and beta-testers, so please keep everything civil. Thanks!