{"id":20392391,"url":"https://github.com/wiseplat/meteor-package-elements","last_synced_at":"2026-05-10T18:04:21.209Z","repository":{"id":122792506,"uuid":"120946343","full_name":"WISEPLAT/meteor-package-elements","owner":"WISEPLAT","description":null,"archived":false,"fork":false,"pushed_at":"2018-02-09T19:27:44.000Z","size":728,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-15T10:26:27.453Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WISEPLAT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-09T19:25:21.000Z","updated_at":"2018-02-09T19:26:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"3a9e0d33-0801-47e0-ada2-47b528f07873","html_url":"https://github.com/WISEPLAT/meteor-package-elements","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WISEPLAT%2Fmeteor-package-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WISEPLAT%2Fmeteor-package-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WISEPLAT%2Fmeteor-package-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WISEPLAT%2Fmeteor-package-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WISEPLAT","download_url":"https://codeload.github.com/WISEPLAT/meteor-package-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241941713,"owners_count":20046173,"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":[],"created_at":"2024-11-15T03:43:36.065Z","updated_at":"2026-05-10T18:04:21.112Z","avatar_url":"https://github.com/WISEPLAT.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wiseplat elements\n\nA collection of basic Meteor templates/components to make dapps faster to build.\n\nIts recommended to use these elements along with the [Ðapp styles](https://github.com/wiseplat/dapp-styles).\n\nYou can find a [demo here](http://wiseplat-elements.meteor.com).\n\n## Installation\n\n    $ meteor add wiseplat:elements\n\n## Usage\n\nThe following elements can be use anywhere in your dapp.\n\nAdditionally this package exposes the following packages:\n\n- [wiseplat:tools](https://atmospherejs.com/wiseplat/tools), which gives you `WshTools`.\n- [frozeman:template-var](https://atmospherejs.com/frozeman/template-var), which gives you the `TemplateVar.set()/.get()` functions which can be used to get values from the select account, or address input element.\n\nNote that these packages will only be exposed to your client part of your dapp,\nif you want to use e.g. `WshTools` on the server side add the package manually using `$ meteor add wiseplat:tools`.\n\n***\n\n### Identicon\n\n![identicon](https://raw.githubusercontent.com/wiseplat/meteor-package-elements/master/screenshots/identicon.png)\n\nShows an identicon.\n\nYou can add the class `dapp-tiny`, `dapp-small`, `dapp-medium` to make it smaller. Default size is to 64px.\n\n```html\n{{\u003e dapp_identicon identity='0x922a519ac926f69856fcfc1b2b8b846cfb3f6b4e' class=\"dapp-small\"}}\n```\n\nAdditionally you can provide a URL, which the identicon will link to.\n\n```html\n{{\u003e dapp_identicon identity='0x922a519ac926f69856fcfc1b2b8b846cfb3f6b4e' link=\"/mypath/\"}}\n\n```\n\n***\n\n### Address Input\n\n![addressInput](https://raw.githubusercontent.com/wiseplat/meteor-package-elements/master/screenshots/addressInput.png)\n\nCreates a input field, with an identicon, which will change based on the input value.\n\nYou can add the class `dapp-large` to make it a larger input.\n\n```html\n{{\u003e dapp_addressInput placeholder=\"0x000000..\" value=\"0x1234...\"}}\n```\n\n**Setting size**\n\nBy passing `class=\"dapp-large\"` you can have a larger version of the input:\n\n```html\n{{\u003e dapp_addressInput placeholder=\"0x000000..\" class=\"dapp-large\"}}\n```\n\nAdditional Properties are:\n\n- `autofocus=\"true\"`\n- `disabled=\"true\"`\n\n**Getting values reactively**\n\nGetting the value using `TemplateVar` you can grap the templates reactive var using:\n\n```js\nTemplateVar.getFrom('.my-container-element .dapp-address-input', 'value');\n// 0xe5f2f0a5ff3f889856c85b3a255501d1d291467d\n\n// or when used in an event\n'change .dapp-address-input input': function(e) {\n    var value = TemplateVar.getFrom(e.currentTarget, 'value');\n}\n```\n\n**Note** The `value` won't be set until the content of the input is valid.\n\n***\n\n### Data Textarea\n\n![dataTextarea](https://raw.githubusercontent.com/wiseplat/meteor-package-elements/master/screenshots/dataTextarea.png)\n\nCreates a textarea field, which only accepts HEX data as input.\n\nYou can add the class `dapp-large` to make it a larger input.\n\n```html\n{{\u003e dapp_dataTextarea cols=\"20\" rows=\"4\" value=\"0x1234\"}}\n```\n\n**Setting size**\n\nBy passing `class=\"dapp-large\"` you can have a larger version of the input:\n\n```html\n{{\u003e dapp_dataTextarea class=\"dapp-large\"}}\n```\n\nAdditional Properties are:\n\n- `autofocus=\"true\"`\n- `disabled=\"true\"`\n\n**Getting values reactively**\n\nGetting the value using `TemplateVar` you can grap the templates reactive var using:\n\n```js\nTemplateVar.getFrom('.my-container-element .dapp-data-textarea', 'value');\n// 0x1bff2\n\n// or when used in an event\n'change textarea.dapp-data-textarea': function(e) {\n    var value = TemplateVar.getFrom(e.currentTarget, 'value');\n}\n```\n\n**Note** The `value` won't be set until the content of the textarea is valid.\n\n***\n\n\n### Select account\n\n![select account](https://raw.githubusercontent.com/wiseplat/meteor-package-elements/master/screenshots/selectAccount.png)\n![select account clicked](https://raw.githubusercontent.com/wiseplat/meteor-package-elements/master/screenshots/selectAccount1.png)\n\n\nCreates a select, which can allow to select accounts. The provided array needs to have at least the follwing properties:\n\n```js\nvar myAccounts = [{\n    type: \"account\",\n    name: 'My Account 1',\n    balance: '1000000000000000000', // in wei\n    address: '0x922a519ac926f69856fcfc1b2b8b846cfb3f6b4e'\n},\n{\n    name: 'My Other Address',\n    balance: '324567543200000013456', // in wei\n    address: '0x1f93d965f60faee1085a93e99562945c1bd97be0'\n}]\n```\n\n```html\n{{\u003e dapp_selectAccount accounts=myAccounts}}\n```\n\nThis element works also well with the [wiseplat:accounts](https://atmospherejs.com/wiseplat/accounts) package, which provides you with `WshAccounts.find().fetch()` to get all current accounts.\n\n**Setting size**\n\nBy passing `class=\"dapp-large\"` you can have a larger version of the select box:\n\n```html\n{{\u003e dapp_selectAccount accounts=myAccounts class=\"dapp-large\"}}\n```\n\n**Show icon**\n\nIf you add the `showAccountTypes=true` property it will show a key unicode icon for all accounts with the `type='account'` property (set for `WshAccounts` accounts). \n\n```html\n{{\u003e dapp_selectAccount accounts=myAccounts showAccountTypes=true}}\n```\n\n**Getting values reactively**\n\nGetting the value using `TemplateVar` you can grap the templates reactive var using:\n\n```js\nTemplateVar.getFrom('.my-container-element .dapp-select-account', 'value');\n\n// or when used in an event\n'change .dapp-select-account select': function(e) {\n    var value = TemplateVar.getFrom(e.currentTarget, 'value');\n}\n```\n\n***\n\n### Gas price selection\n\n![select gas price](https://raw.githubusercontent.com/wiseplat/meteor-package-elements/master/screenshots/selectGasPrice.png?1)\n\n\nThis element allows you users to adjust the fee (gas * gas price) of a transaction, and gives you back either the `gasInWei` or the selected `gasPrice`.\n\nYou need to provide a gas estimation which you can get using e.g. `web3.wsh.estimateGas({from: .., to: .., data: ..})` or `myContract.myMethod.estimateGas({from: ..})`\nand the tool will display whats the current medium gas price based on the given `gasPrice` * your gas usage estimation.\n\nThe user then can adjust the fee up and down by a factor of ~1.8.\n\n*Hint*: To get the gas price reactivly you can use the [wiseplat:blocks](https://atmospherejs.com/wiseplat/blocks) package's `WshBlocks.latest.gasPrice` and pass it to the `gasPrice` property.\n\n\n```html\n{{\u003e dapp_selectGasPrice gas=21000 gasPrice=50000000000 unit=\"wise\"}}\n```\n\n*Note*: If you don't set the `unit` property it will use `WshTools.getUnit()`, like the `{{\u003e dapp_formatBalance}}` element.\n\n**Getting values reactively**\n\nTo get the `gasInWei` (gas * adjusted gas price) or the adjusted `gasPrice` use:\n\n```js\nTemplateVar.getFrom('.my-container-element .dapp-select-gas-price', 'gasPrice');\n// \"56258440003\" ~ 56 gwei\n\n// or the total fee when providing a estimated gas usage of 21000\n\nTemplateVar.getFrom('.my-container-element .dapp-select-gas-price', 'gasInWei');\n// \"1181427240063000\" which is \"0.001181427240063\" wise\n\n// or when used in an event\n'change .dapp-select-gas-price input': function(e) {\n    var value = TemplateVar.getFrom(e.currentTarget, 'gasInWei');\n}\n```\n\n**Localization**\n\nThe element can replace the - and + texts below the range selection using the `tap:i18n` package.\nIf the `TAPi18n` helper is available it will use `TAPi18n.__('elements.selectGasPrice.high')` and `TAPi18n.__('elements.selectGasPrice.low')` for the texts.\n\n***\n\n### Modals\n\n![modal](https://raw.githubusercontent.com/wiseplat/meteor-package-elements/master/screenshots/modal.png?2)\n\nJust place a modal placeholder before the closing body tag.\n\n```html\n{{\u003e dapp_modalPlaceholder}}\n```\n\n#### Render without route\n\nRender the modal:\n\n```js\nWshElements.Modal.show('myContentTemplate');\n\n// Or\n\nWshElements.Modal.show({\n    template: 'myContentTemplate',\n    data: {\n        myData: 'some data'\n    }\n});\n```\n\nAdditional options:\n\n- `closeable` - Prevents the default behaviour, which closes the modal when the overlay is clicked.\n- `class` - A class, which will be add to the modal section element\n\n```js\nWshElements.Modal.show('myContentTemplate', {\n    closeable: false,\n    class: 'my-modal-class'\n});\n```\n\nNavigate to a path on close.  \nThis will only work when the [kadira:flow-router](https://atmospherejs.com/kadira/flow-router) or [iron:router](https://atmospherejs.com/iron/router) package is installed:\n\n```js\nWshElements.Modal.show('myContentTemplate', {closePath: '/dashboard'});\n```\n\n#### Close modal\n\n```js\nWshElements.Modal.hide();\n```\n\n***\n\n### Modal Question\n\n![modal_question](https://raw.githubusercontent.com/wiseplat/meteor-package-elements/master/screenshots/modal_question.png?2)\n\nThe question modal is a modal content template, which can be used to display a text and allow OK and Cancel options.\n\nYou basically just can pass a `text`, `ok` and/or `cancel` property as a data context to set callbacks, which will be fired when the button is pressed.\n\nAdditional you can:\n- Set the `ok` or `cancel` property to `true`, it will just close the modal without any action.  \n- Pass `false` or leave the `ok` or `cancel` property empty and it won't show that buttons.\n\n```js\nWshElements.Modal.question({\n    text: 'Do you want to ...',\n    ok: function(){\n        // do something on ok\n    },\n    cancel: true // simply show th cancel button and close the modal on click\n});\n```\n\n#### Using a template\n\nInstead of passing a text you can also pass a template, which will be shown above the ok/cancel buttons\n\n```js\nWshElements.Modal.question({\n    template: 'myTemplate',\n    data: {\n        my: 'template data'\n    },\n    ok: function(){\n        // do something on ok\n    },\n    cancel: function(){\n        // do something on cancel\n    }\n});\n```\n\n#### Close question modal\n\n```js\nWshElements.Modal.hide();\n```\n\nAdditional you can pass the same options as the modal as the second parameter:\n\n```js\nWshElements.Modal.question({\n    text: 'Alright?',\n    ok: function(){\n        // do something on ok\n    }\n}, {\n    closeable: false\n});\n```\n\n#### Localization\n\nThe modal question can use the `tap:i18n` package for the ok and cancel button texts.\nIf the `TAPi18n` helper is available it will use `TAPi18n.__('buttons.ok')` and `TAPi18n.__('buttons.cancel')` for the buttons.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiseplat%2Fmeteor-package-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwiseplat%2Fmeteor-package-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiseplat%2Fmeteor-package-elements/lists"}