Skip to content

Commit

Permalink
update robonomics ui vue components library
Browse files Browse the repository at this point in the history
  • Loading branch information
vol4tim committed Feb 1, 2024
1 parent 9ad94cf commit 167e7da
Show file tree
Hide file tree
Showing 23 changed files with 2,145 additions and 2,601 deletions.
31 changes: 17 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
# dApp ROBONOMICS NETWORK

## Project setup
dApp on the Robonomics network. Provides a view and interaction layer from a browser.

```
yarn install
```
## Development

### Compiles and hot-reloads for development
Contributions are welcome!

This repository uses `yarn` to organize the code. As such, after cloning dependencies should be installed via yarn, not via npm.
[Vue js](https://vuejs.org/) framework is used to create user interfaces.

```
yarn run serve
```

### Compiles and minifies for production
To start -

1. Clone the repo locally, via `git clone https://github.com/airalab/dapp.robonomics.network <optional local path>`
2. Ensure that you have a recent LTS version of Node.js, for development purposes Node >= 16 is recommended.
3. Ensure that you have a recent version of Yarn, for development purposes Yarn >= 1.22 is required.
4. Install the dependencies by running
```
yarn run build
yarn
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).
5. Ready! Now you can launch the UI (assuming you have a local Polkadot Node running), via
```
yarn run serve
```
6. Access the UI via http://localhost:8080
28 changes: 15 additions & 13 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
{
"name": "dapp-robonomics.network",
"version": "0.1.0",
"version": "0.2.0",
"private": true,
"license": "BSD-3-Clause",
"author": "vol4tim <[email protected]>",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
Expand All @@ -15,21 +17,21 @@
"dayjs": "^1.11.9",
"decimal.js-light": "^2.5.1",
"ipfs-http-client": "^60.0.0",
"robonomics-interface": "^0.3.0",
"robonomics-ui-vue": "^0.1.43",
"vue": "^3.2.13",
"vue-router": "^4.1.6",
"robonomics-interface": "^0.3.1",
"robonomics-ui-vue": "^0.2.6",
"vue": "^3.4.15",
"vue-router": "^4.2.5",
"vuex": "^4.1.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"url": "^0.11.0"
"@babel/core": "^7.23.7",
"@babel/eslint-parser": "^7.23.3",
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-plugin-eslint": "^5.0.8",
"@vue/cli-service": "^5.0.8",
"eslint": "^8.56.0",
"eslint-plugin-vue": "^9.20.1",
"url": "^0.11.3"
},
"eslintConfig": {
"root": true,
Expand Down
1 change: 1 addition & 0 deletions public/images/chain-basilisk.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions public/images/chain-robonomics.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/logo-white copy.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions public/images/logo-white.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
132 changes: 34 additions & 98 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,117 +6,53 @@

<script>
import MainLayout from "@/components/layouts/Main.vue";
import dayjs from "dayjs";
import { toRaw } from "vue";
import { inject, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
name: "App",
inject: ["RobonomicsProvider", "IpfsProvider"],
components: {
MainLayout
},
data() {
return {
isReady: this.RobonomicsProvider.isReady,
title: ""
};
},
computed: {
robonomics: function () {
return toRaw(this.RobonomicsProvider.instance.value);
}
},
watch: {
$route: {
handler: function (route) {
this.title = route?.meta?.title;
document.title = this.title
? `${this.title} – Robonomics Network dApp`
: "Robonomics Network dApp";
},
deep: true,
immediate: true
},
isReady: {
handler: async function (v) {
if (v) {
this.init();
}
},
immediate: true
}
},
async created() {
this.$store.commit("rws/setKey", process.env.VUE_APP_ROBONOMICS_UI_KEY);
this.$store.dispatch("rws/init");
setup() {
const RobonomicsProvider = inject("RobonomicsProvider");
const IpfsProvider = inject("IpfsProvider");
const store = useStore();
const router = useRouter();
const route = useRoute();
const title = ref();
this.$store.commit(
store.commit("rws/setKey", process.env.VUE_APP_ROBONOMICS_UI_KEY);
store.dispatch("rws/init");
store.commit(
"rws/setLinkActivate",
this.$router.resolve({ name: "rwsActivate" }).path
);
this.$store.commit(
"rws/setLinkList",
this.$router.resolve({ name: "rwsSetupsList" }).path
router.resolve({ name: "rwsActivate" }).path
);
this.$store.commit(
"rws/setLinkSetup",
this.$router.resolve({ name: "rwsSetup" }).path
store.commit("rws/setLinkSetup", router.resolve({ name: "rwsSetup" }).path);
store.commit(
"rws/setLinkSetupnew",
router.resolve({ name: "rwsSetupNew" }).path
);
this.$store.commit(
store.commit(
"rws/setLinkDevices",
this.$router.resolve({ name: "telemetry" }).path
router.resolve({ name: "telemetry" }).path
);
this.$store.commit(
"rws/setLinkUsers",
this.$router.resolve({ name: "rwsUsersList" }).path
);
this.$store.commit(
"rws/setLinkUseractivate",
this.$router.resolve({ name: "rwsUserSetup" }).path
);
this.$store.commit(
"rws/setLinkHaSetup",
this.$router.resolve({ name: "haSetup" }).path
);
this.$store.commit("ipfs/setGateways", this.IpfsProvider.gateways);
},
methods: {
async init() {
if (
this.$store.state.robonomicsUIvue.rws.list &&
this.$store.state.robonomicsUIvue.rws.list.length > 0
) {
const checkStatus = async (owner, enddate) => {
const now = dayjs().valueOf();
const end = Number(enddate);
if (now && end && end - now < 0) {
const dataRaw = await this.robonomics.rws.getLedger(owner);
if (!dataRaw.isEmpty) {
if (dataRaw.value === null) {
return "";
}
const issue_time = dataRaw.value.issueTime.toNumber();
let days = 0;
if (dataRaw.value.kind.isDaily) {
days = dataRaw.value.kind.value.days.toNumber();
}
const DAYS_TO_MS = 24 * 60 * 60 * 1000;
return issue_time + days * DAYS_TO_MS;
}
}
return enddate;
};
store.commit("ipfs/setGateways", IpfsProvider.gateways);
const arr = [];
for (const item of this.$store.state.robonomicsUIvue.rws.list) {
arr.push({
...item,
enddate: await checkStatus(item.owner, item.enddate)
});
}
this.$store.dispatch("rws/rewrite", arr);
}
}
watch(route, () => {
title.value = route?.meta?.title;
document.title = title.value
? `${title.value} – Robonomics Network dApp`
: "Robonomics Network dApp";
});
return {
isReady: RobonomicsProvider.isReady,
title
};
}
};
</script>
7 changes: 6 additions & 1 deletion src/components/Header.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>

Check warning on line 1 in src/components/Header.vue

View workflow job for this annotation

GitHub Actions / deploy

Component name "Header" should always be multi-word
<robo-layout-header
logoIcon="images/logo-white.png"
logoIcon="images/logo-white.svg"
:navigation="navigation"
:title="title"
:version="version"
Expand Down Expand Up @@ -79,6 +79,11 @@ export default {
link: "https://apps.moonbeam.network/moonriver",
type: "external"
},
{
title: "Basilisk",
link: "https://app.basilisk.cloud/pools-and-farms",
type: "external"
},
{
title: "Solarbeam",
link: "https://analytics.solarbeam.io/pairs/0x5261e0ce96289e6c3a16da45a2e52d1ab1a0e9c3",
Expand Down
37 changes: 29 additions & 8 deletions src/components/layouts/Main.vue
Original file line number Diff line number Diff line change
@@ -1,18 +1,39 @@
<template>

Check warning on line 1 in src/components/layouts/Main.vue

View workflow job for this annotation

GitHub Actions / deploy

Component name "Main" should always be multi-word
<robo-layout>
<dapp-header :title="props.title" />
<dapp-header :title="title" />
<slot />
</robo-layout>
</template>

<script setup>
<script>
import DappHeader from "@/components/Header";
import { defineProps } from "vue";
import { useSubscription } from "@/hooks/useSubscription";
import { watch } from "vue";
import { useStore } from "vuex";
const props = defineProps({
title: {
type: String,
default: "Robonomics Dapp"
export default {
components: {
DappHeader
},
setup() {
const store = useStore();
const subscription = useSubscription();
watch(
() => store.state.robonomicsUIvue.rws.active,
(v) => {
subscription.owner.value = v;
},
{ immediate: true }
);
watch(
[subscription.owner, subscription.validUntil],
() => {
store.commit("rws/setExpiredate", subscription.validUntil.value);
},
{ immediate: true }
);
}
});
};
</script>
Loading

0 comments on commit 167e7da

Please sign in to comment.