\n ...\n
\n \n ```\n\n > They can be direct children or be in any HTML element that's why you must declare on each one the _data-dh-property-contract-name_ attribute with it's value\n\n 6. **(Optionally)** if you want to get a specific output and you know the output name before hand you can define it in a tag\n\n ```html\n \n ...\n
\n \n ```\n\n 7. Finally if you want to trigger the method with your own elements add the `data-dh-property-invoke` to that element.\n\n ```html\n \n ...\n
\n\n \n \n ```\n\n > They can be direct children or be in any HTML element that's why you must declare on each one the _data-dh-property-contract-name_ attribute with it's value\n\n- ID Mode\n Follow the same steps as before but with the following syntax:\n\n```html\n\n \n \n\n \n
\n```\n\n### Network\n\n#### Properties\n\n- **Get ID**\n\n - ID Mode\n\n ```html\n \n ...\n
\n\n \n \n ...\n
\n\n \n\n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Get Info Type**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Get Name**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Get Provider:**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n#### Modifiers\n\nNetwork feature has no modifiers available.\n\n### User\n\n#### Properties\n\n- **Get Address**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n- Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Get Balance**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n- Data Mode\n\n ```html\n \n ...\n
\n ```\n\n#### Modifiers\n\n- **Unit modifier**\n Possible values are : `wei`, `ether`\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Decimals modifier**\n Possible values is any `positive integer`\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Display modifier**\n Possible values are : `short`, `full`\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n### 3Box\n\n#### Properties\n\n- **Get Name**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Get Location**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Get Website**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Get Emoji**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Get Job**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Get Description**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Get Image**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n- **Get Hover**\n\n - ID Mode\n\n ```html\n \n ...\n
\n ```\n\n - Data Mode\n\n ```html\n \n ...\n
\n ```\n\n#### Modifiers\n\nNetwork feature has no modifiers available.\n\n### NFT\n\n1. Define one HTML element with the following attributes:\n\n\n a. Define an unique id in \"data-dh-property-tag-id\"\n\n \n\n b. Choose from who we want to the NFTs:\n - Get NFTs from an owner\n `Define one account address in \"data-dh-property-asset-account-address\" attribute`\n\n - Get NFTs from an contract address\n `Define one account address in \"data-dh-property-asset-contract-address\" attribute`\n\n
\n\n c. Choose what NFT collection you want to receive:\n - Get a Single NFT\n `Define one token id in \"data-dh-property-asset-token-id\" attribute`\n\n - Get a list of specific NFTs\n `Define a list of token ids separated by comma in \"data-dh-property-asset-token-id\" attribute`\n\n - Get all NFTs\n `Don't need to define any special attribute`\n\n
\n\n2. Define another element anywhere you want:\n a. Define one div with the **same** tag id\n b. In that element define the attribute **data-dh-property-asset-item** without a value\n c. Inside that element define all the children elements you desire\n d. Define per children element each json path `data-dh-property-asset-json-path=\"image_url\"`\n\nExample:\n\n```html\n
\n ![]()
\n \n
\n\n```\n\n### Attributes\n\nWe need to find a way that's easy to use for the designer/developer and at the same time faster and maintanable to parse through the DOM:\n\n#### ❌ What we can't do:\n\n- Using [id](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) or [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attributes since accidentally we can remove or modify an existing value and therefore break CSS styling or a JavaScript interaction.\n\n* Using custom attributes like `dh-feature` or `dh-contract-name` since they don't have a formal API to query them easily. Even though they work but the browser doesn't have any default way to handle them.\n\n- Using [split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split), [match](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match), or any other method that uses Strings or RegExp to parse an string into an array. Those are great but are prone to errors due to a bad defined RegExp or accessing an unexisting element in an array and then doing some parsing to it.\n\n#### ✅ What we can do:\n\n- Use [data](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) attributes to handle DappHero features (i.e Network, User Info, Contracts, ThreeBox, etc) and properties to handle special values (i.e units, contractName, methodName, etc).\n\n* Use `dh-[property]` prefix to accidentally avoid writing some `data` attribute on the DOM and break CSS / JavaScript functionality.\n\n- Get data attributes using [dataset](https://caniuse.com/#feat=dataset) and parse through a **custom configuration object** to do some custom actions like: parsing, requiring, validiting, sanitizing and sorting.\n\n### Active Elements\n\nThe active elements are those DOM elements that has the `data-dh-enabled=\"true\"` attribute assigned.\nSo the designer or developer using the NoCode tool can easily disable or enable the DappHero engine.\n\n### Features Configuration\n\nThis object will serve to run all validations needed against active elements.\n\nExample with only one feature \"network\" and only one property \"id\":\n\n```typescript\nexport const features = {\n network: {\n dataAttribute: `${FEATURE}-network`,\n dataProperties: [\n {\n key: 'id',\n attribute: `${PREFIX}-network-id`,\n required: false,\n validator: null,\n position: null,\n },\n ],\n },\n};\n```\n\n## Features Support\n\n- [x] Network\n- [x] User\n- [x] 3Box\n- [x] Custom Contract\n- [x] NFT\n\n## Roadmap\n\n- [ ] Analytics for data-attributes use\n- [ ] Get configuration object from API\n- [ ] Webflow tests with Cypress\n- [ ] Think on how to handle Placeholders and Loaders\n- [ ] Investigate bundler to use to generate the final bundle\n- [ ] Add deploy script for NPM, and add badges\n- [ ] Add link and badge for UNPKG, NPM CDN\n- [ ] Add Husky, to run Prettier and Jest on pre-commit\n- [ ] Check for repeated data-attributes\n- [ ] Add error logging using Sentry\n- [ ] Add in documnetation support table for different UI/NoCode tools like WebFlow and Bubble\n\n## Separation of Concerns\n\nA improve over DappHero functionality will be to separate the Core into DOM and Core, since we will be able to handle al DOM related stuff in a more maintanable and cleaner way, and the Core will use those helpers and only handle the React and the features logic itself.\n\n\n\n## Scaffolding\n\n\n","readmeFilename":"readme.md"}