{"id":18956556,"url":"https://github.com/swader/polkadash","last_synced_at":"2026-03-07T06:32:37.681Z","repository":{"id":38255619,"uuid":"268241559","full_name":"Swader/polkadash","owner":"Swader","description":"A VueJS-based starter kit for Substrate-based chains","archived":false,"fork":false,"pushed_at":"2022-12-12T23:08:35.000Z","size":2219,"stargazers_count":29,"open_issues_count":20,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-02T04:55:44.232Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","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/Swader.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-31T08:45:25.000Z","updated_at":"2025-03-26T00:23:22.000Z","dependencies_parsed_at":"2023-01-28T02:45:50.348Z","dependency_job_id":null,"html_url":"https://github.com/Swader/polkadash","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Swader/polkadash","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swader%2Fpolkadash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swader%2Fpolkadash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swader%2Fpolkadash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swader%2Fpolkadash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Swader","download_url":"https://codeload.github.com/Swader/polkadash/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swader%2Fpolkadash/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30209087,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T05:23:27.321Z","status":"ssl_error","status_checked_at":"2026-03-07T05:00:17.256Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-08T13:52:50.124Z","updated_at":"2026-03-07T06:32:37.656Z","avatar_url":"https://github.com/Swader.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Polkadash\n\nA mobile-friendly starter kit for developing your own UI for a Substrate-based chain. This starter kit is based on [Creative Tim's Vue White Dashboard](https://demos.creative-tim.com/vue-white-dashboard), so any [documentation](https://demos.creative-tim.com/vue-white-dashboard/documentation) applying to that one applies to this one as well.\n\nFor tutorials on building different things with this starter UI, please see the [Dot Leap Polkadash category](https://dotleap.com/tag/polkadash):\n\n- [Intro to Polkadash](https://dotleap.com/polkadash-a-vuejs-dashboard-starter-kit-for-your-substrate-chain/)\n- [Subscribing to Polkadot Events](https://dotleap.com/how-to-subscribe-to-polkadot-events-2/)\n- [Building a VueJS address translation filter for Substrate chains](https://dotleap.com/building-an-address-filter/)\n\n## Getting Started\n\nYou'll need a reasonably new NodeJS version installed (preferably via [NVM](https://github.com/nvm-sh/nvm)), and [Yarn Classic](https://classic.yarnpkg.com/en/docs/install) available globally.\n\n```bash\ngit clone https://github.com/swader/polkadash\ncd polkadash\nmv src/config.example.js src/config.js # edit this to modify the default endpoint\nyarn \u0026\u0026 yarn serve --port 8081\n```\n\nThis will run the dashboard so it's accessible at localhost:8081. The serve command uses [vue-cli-service](https://cli.vuejs.org/guide/cli-service.html).\n\n## Features\n\nThe template comes with several features bundled.\n\n### Linting\n\nThe project is configured for eslint to give you in-editor formatting and syntax corrections and auto-fixes. You'll need [Vetur](https://vuejs.github.io/vetur/setup.html#project-setup) and the related extensions in your IDE if you want to use this. It's optional but recommended.\n\n### Styling\n\nSome minor color scheme customization is possible if you modify the colors in `src\\pages\\Layout\\DashboardLayout.vue`. That component listens for the runtime version of the loaded chain, and based on the name of the chain switches the style. The colors are defined in `src\\assets\\scss\\white-dashboard\\custom\\_sidebar-and-main-panel.scss` as `blue`, `green` and `primary`, but feel free to create your own style. You apply it to the sidebar by changing its `backgroundColor` property to the value you defined in the SCSS file.\n\nThe custom styling is a work in progress and the we intend to make this easier and simpler.\n\n### Endpoint Selector\n\nClicking the top right connection URL lets you pick another endpoint or enter your custom one. To add custom endpoints or modify the default list, edit `pages/Layout/TopNavbar.vue`. The default endpoint is `wss://kusama-rpc.polkadot.io` . This can be modified in `config.js` (rename `config.example.js`).\n\n### Sidebar and Component Management\n\nTo add / remove sections from the sidebar and the global component registry, two files need to be modified:\n\n- `src\\pages\\Layout\\DashboardLayout.vue`\n- `src\\router.js`\n\nIn DashboardLayout, you would add a new sidebar-link component, like so:\n\n```html\n\u003csidebar-link to=\"/mycomponent\"\u003e\n  \u003ci class=\"tim-icons icon-atom\"\u003e\u003c/i\u003e\n  \u003cp\u003eMy component\u003c/p\u003e\n\u003c/sidebar-link\u003e\n```\n\nand in router.js you would import and use the new component, like so:\n\n```js\n// ..\n\nimport MyComponent from \"@/pages/MyComponent.vue\"; // \u003c--- this is new\n\nconst routes = [\n  {\n    path: \"/\",\n    component: DashboardLayout,\n    redirect: \"dashboard\",\n    children: [\n      {\n        path: \"dashboard\",\n        name: \"Dashboard\",\n        component: Dashboard,\n      },\n      //...\n      {\n        // \u003c --- THIS SECTION IS NEW --\u003e\n        path: \"mycomponent\",\n        name: \"My Component\",\n        component: MyComponent,\n      }, // \u003c --- THIS SECTION IS NEW --\u003e\n    ],\n  },\n];\n```\n\nYou can also add a translation of the component into `src/locales`.\n\n### Connection Singleton\n\nThe file `connection.js` exports the API object which you can import and use in your components to interact with the chain. In a Vue component's script part:\n\n```js\nimport api from \"../connection.js\";\n```\n\nThen use the `api` promise in your components' methods and properties.\n\nFor more complex but reusable interaction with the chain, it's a good idea to abastract such functionality into a separate file that consumes this singleton connection, and export that complex function instead.\n\n## Deployment\n\nTo deploy your version of the dashboard as a live site, run `yarn build`. The files in `dist` can then be hosted anywhere from home servers to Github pages or even IPFS.\n\n## Contributing\n\nPRs welcome, especially those that reduce code complexity and remove things from this bootstrap.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswader%2Fpolkadash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswader%2Fpolkadash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswader%2Fpolkadash/lists"}