From 34fcc7894b44172c95470fd9f8a6c01a39adfd31 Mon Sep 17 00:00:00 2001
From: maayarosama <66883096+maayarosama@users.noreply.github.com>
Date: Tue, 17 Oct 2023 09:49:42 +0300
Subject: [PATCH] Adding simulator to playground (#1131)

* Adding simulator to playground

* adding graphs and remaining fields

* fixing charts bug

* undoing changes

* Remove unrelated files from pr

* Remove unrelated files from pr #2

* using vue-chartjs instead of chartjs

* Converting FarmingProfile class into a vue component

* fixing line chart

* Removing props from charts' divs

---------

Co-authored-by: MohamedElmdary <engm5081@gmail.com>
---
 packages/playground/package.json              |   3 +
 .../playground/src/components/line_chart.vue  |  78 ++++
 .../playground/src/components/pie_chart.vue   |  49 +++
 .../playground/src/components/simulator.vue   | 406 ++++++++++++++++++
 packages/playground/src/plugins/vuetify.ts    |   1 +
 .../playground/src/portal/simulator_view.vue  |  69 +++
 packages/playground/src/router/index.ts       |   6 +
 packages/playground/src/types/index.ts        |  28 ++
 8 files changed, 640 insertions(+)
 create mode 100644 packages/playground/src/components/line_chart.vue
 create mode 100644 packages/playground/src/components/pie_chart.vue
 create mode 100644 packages/playground/src/components/simulator.vue
 create mode 100644 packages/playground/src/portal/simulator_view.vue

diff --git a/packages/playground/package.json b/packages/playground/package.json
index adb32dd828..5a1d4be524 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -31,6 +31,8 @@
     "vue-router": "^4.1.6",
     "vuetify": "^3.1.15",
     "web-ssh-keygen": "^0.1.2",
+    "chart.js": "^4.4.0",
+    "vue-chartjs": "^5.2.0",
     "moment": "^2.29.4"
   },
   "devDependencies": {
@@ -39,6 +41,7 @@
     "@types/marked": "^5.0.0",
     "@types/node": "^18.14.2",
     "@types/qrcode": "^1.5.0",
+    "@types/chart.js": "^2.9.38",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.2",
diff --git a/packages/playground/src/components/line_chart.vue b/packages/playground/src/components/line_chart.vue
new file mode 100644
index 0000000000..564f8652f9
--- /dev/null
+++ b/packages/playground/src/components/line_chart.vue
@@ -0,0 +1,78 @@
+<template>
+  <ChLine :data="data" :options="options" />
+</template>
+<script setup lang="ts">
+import { Line } from "vue-chartjs";
+ChartJS.register(...registerables);
+const props = defineProps<{
+  getTotalReward: (currentPrice: number) => number;
+  getRoi: (price: number) => number;
+  xs: number[];
+  isProfit: boolean;
+}>();
+const X = (20 - 0.15) / 19;
+const xs = [...Array.from({ length: 20 }).map((_, i) => 0.15 + X * i)];
+const data = computed(() => {
+  if (props.isProfit) {
+    return {
+      labels: props.xs.map(i => i.toFixed(2)) || xs.map(i => i.toFixed(2)),
+      datasets: [
+        {
+          label: "ROI",
+          data: props.xs.map(x => props.getRoi(x) / 100),
+          backgroundColor: "rgb(26, 161, 143)",
+          borderColor: "rgba(26, 161, 143, 0.5)",
+          pointRadius: 3,
+        },
+      ],
+    };
+  }
+  return {
+    labels: props.xs.map(i => i.toFixed(2)) || xs.map(i => i.toFixed(2)),
+    datasets: [
+      {
+        label: "Margin",
+        data: props.xs.map(x => props.getTotalReward(x)) || xs.map(x => props.getTotalReward(x)),
+        backgroundColor: "rgb(26, 161, 143)",
+        borderColor: "rgba(26, 161, 143, 0.5)",
+        pointRadius: 3,
+      },
+    ],
+  };
+});
+
+const options = computed(() => {
+  if (props.isProfit) {
+    return {
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        title: {
+          display: true,
+          text: "Return (USD) / TFT price (USD)",
+        },
+      },
+    };
+  }
+  return {
+    responsive: true,
+    maintainAspectRatio: true,
+    plugins: {
+      title: {
+        display: true,
+        text: "Return (USD) / TFT price (USD)",
+      },
+    },
+  };
+});
+</script>
+
+<script lang="ts">
+import { Chart as ChartJS, registerables } from "chart.js";
+import { computed } from "vue";
+
+export default {
+  name: "LineChart",
+  components: { ChLine: Line },
+};
+</script>
diff --git a/packages/playground/src/components/pie_chart.vue b/packages/playground/src/components/pie_chart.vue
new file mode 100644
index 0000000000..eab8852fc8
--- /dev/null
+++ b/packages/playground/src/components/pie_chart.vue
@@ -0,0 +1,49 @@
+<template>
+  <ChDoughnut :data="data" :options="options" />
+</template>
+<script setup lang="ts">
+ChartJS.register(...registerables);
+
+const props = defineProps<{
+  chartdata: any[];
+}>();
+
+const options = ref({
+  responsive: true,
+  plugins: {
+    legend: {
+      position: "top",
+    },
+    title: {
+      position: "top",
+      display: true,
+      padding: 10,
+      text: "Reward for CU, SU & NU",
+    },
+  },
+});
+const data = computed(() => {
+  console.log("props.chartdata", props.chartdata);
+  return {
+    labels: ["NU", "CU", "SU"],
+    datasets: [
+      {
+        data: props.chartdata || [50, 100, 30],
+        backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"],
+        hoverOffset: 4,
+      },
+    ],
+  };
+});
+</script>
+
+<script lang="ts">
+import { Chart as ChartJS, registerables } from "chart.js";
+import { computed, ref } from "vue";
+import { Doughnut } from "vue-chartjs";
+
+export default {
+  name: "PieChart",
+  components: { ChDoughnut: Doughnut },
+};
+</script>
diff --git a/packages/playground/src/components/simulator.vue b/packages/playground/src/components/simulator.vue
new file mode 100644
index 0000000000..a9ff76f1b2
--- /dev/null
+++ b/packages/playground/src/components/simulator.vue
@@ -0,0 +1,406 @@
+<template>
+  <div class="d-flex flex-wrap space-between mt-3">
+    <v-card width="40%" class="my-3 mr-5 pa-3">
+      <v-row class="mt-1 px-4">
+        <div class="d-flex align-center">
+          <label class="label mr-2 mb-0">Basic</label>
+          <v-switch hide-details color="primary" v-model="isAdvanced" inset />
+          <span class="slider" />
+          <label class="label ml-2">Advanced</label>
+        </div>
+      </v-row>
+      <v-row>
+        <v-card-text v-if="!isAdvanced">
+          <b>Note:</b> Make sure to use base 1024 while filling in the simulator, otherwise there might be a different
+          payout.
+        </v-card-text>
+      </v-row>
+      <div class="mt-3 px-3">
+        <input-validator
+          :value="activeProfile.memory"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field label="Memory (GB)" type="number" v-model.number="activeProfile.memory" v-bind="props" />
+        </input-validator>
+
+        <input-validator
+          :value="activeProfile.cpu"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field label="vCPU (Threads)" type="number" v-model.number="activeProfile.cpu" v-bind="props" />
+        </input-validator>
+        <input-validator
+          v-if="props.chosenConfig == 'DIY'"
+          :value="activeProfile.hdd"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field label="HDD (GB)" type="number" v-model.number="activeProfile.hdd" v-bind="props" />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.ssd"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field label="SSD (GB)" type="number" v-model.number="activeProfile.ssd" v-bind="props" />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.nuRequiredPerCu"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="NU Required Per CU"
+            type="number"
+            v-model.number="activeProfile.nuRequiredPerCu"
+            v-bind="props"
+          />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.investmentCostHW"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="Hardware Cost (USD)"
+            type="number"
+            v-model.number="activeProfile.investmentCostHW"
+            v-bind="props"
+          />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.price"
+          :rules="[validators.min('Minimum TFT price allowed is 0.08 USD.', 0.08)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="Price of TFT at point of registration on blockchain (USD)"
+            type="number"
+            v-model.number="activeProfile.price"
+            v-bind="props"
+          />
+        </input-validator>
+        <input-validator
+          v-if="!isAdvanced"
+          :value="activeProfile.maximumTokenPrice"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="Maximum Token Price"
+            type="number"
+            v-model.number="activeProfile.maximumTokenPrice"
+            v-bind="props"
+          />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.powerUtilization"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="Power Utilization (Watt)"
+            type="number"
+            v-model.number="activeProfile.powerUtilization"
+            v-bind="props"
+          />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.powerCost"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="Power Cost (USD)"
+            type="number"
+            v-model.number="activeProfile.powerCost"
+            v-bind="props"
+          />
+        </input-validator>
+        <v-checkbox color="title" v-model="activeProfile.publicIp" label="Public IP" />
+
+        <v-autocomplete
+          v-if="props.chosenConfig == 'Titan v2.1'"
+          label="Certified"
+          :items="[...certifications]"
+          return-object
+          item-title="name"
+          v-model="certified"
+        />
+      </div>
+    </v-card>
+
+    <v-card width="58%" class="my-3 pa-3">
+      <v-card-text>
+        <v-row class="mt-1 px-4" v-if="!isAdvanced">
+          <div class="d-flex align-center">
+            <label class="label mr-2 mb-0">Net Profit</label>
+            <v-switch hide-details color="primary" v-model="isProfit" inset />
+            <span class="slider" />
+            <label class="label ml-2">Return On Investment</label>
+          </div>
+        </v-row>
+        <v-row v-show="!isAdvanced">
+          <v-col>
+            <LineChart :xs="xs" :isProfit="isProfit" :getTotalReward="getTotalReward" :getRoi="getRoi" />
+          </v-col>
+        </v-row>
+        <v-row v-show="isAdvanced">
+          <v-col cols="6">
+            <PieChart :chartdata="chartdata" />
+          </v-col>
+          <v-col cols="6" v-if="isAdvanced">
+            <input-validator
+              :value="activeProfile.powerCost"
+              :rules="[validators.min('Value must be positive.', 0)]"
+              #="{ props }"
+            >
+              <v-text-field
+                label="Token price after 5 years (USD)"
+                type="number"
+                v-model.number="activeProfile.priceAfter5Years"
+                v-bind="props"
+              />
+            </input-validator>
+
+            <v-text-field disabled label="Return On Investment" type="number" v-model.number="ROI" />
+            <v-text-field disabled label="Net Profit" type="number" v-model.number="netProfit" />
+            <v-text-field disabled label="Gross Profit" type="number" v-model.number="grossProfit" />
+            <v-text-field disabled label="Total Costs" type="number" v-model.number="totalCosts" />
+          </v-col>
+        </v-row>
+        <v-row class="mt-3 px-3" v-if="isAdvanced">
+          <v-text-field
+            disabled
+            label="Total Monthly Farming Reward In TFT"
+            type="number"
+            v-model.number="totalFarmingRewardInTft"
+          />
+        </v-row>
+        <v-row class="mt-3 px-0">
+          <v-col cols="4">
+            <v-text-field disabled label="CU" type="number" v-model.number="cu" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="SU" type="number" v-model.number="su" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="NU" type="number" v-model.number="nu" />
+          </v-col>
+        </v-row>
+
+        <v-row class="mt-3 px-0">
+          <v-col cols="4">
+            <v-text-field disabled label="USD reward per CU" type="number" v-model.number="rewardPerCu" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="USD reward per SU" type="number" v-model.number="rewardPerSu" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="USD reward per NU" type="number" v-model.number="rewardPerNu" />
+          </v-col>
+        </v-row>
+
+        <v-row class="mt-3 px-0" v-if="isAdvanced">
+          <v-col cols="4">
+            <v-text-field disabled label="TFT Reward Per CU" type="number" v-model.number="tftRewardPerCu" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="TFT Reward Per SU" type="number" v-model.number="tftRewardPerSu" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="TFT Reward Per NU" type="number" v-model.number="tftRewardPerNu" />
+          </v-col>
+        </v-row>
+
+        <v-row class="mt-3 px-0" v-if="isAdvanced">
+          <v-col cols="4">
+            <v-text-field
+              disabled
+              label="CU Farming Reward In TFT"
+              type="number"
+              v-model.number="cuFarmingRewardInTft"
+            />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field
+              disabled
+              label="SU Farming Reward In TFT"
+              type="number"
+              v-model.number="suFarmingRewardInTft"
+            />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field
+              disabled
+              label="NU Farming Reward In TFT"
+              type="number"
+              v-model.number="nuFarmingRewardInTft"
+            />
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from "vue";
+
+import { Certification, type FarmingProfileOptions, ProfileTypes } from "@/types/index";
+
+import LineChart from "./line_chart.vue";
+import PieChart from "./pie_chart.vue";
+
+const props = defineProps<{
+  chosenConfig: string;
+  profile: FarmingProfileOptions;
+}>();
+
+const certifications = ["No Certification", "Certified Node"];
+const certified = ref();
+
+const isAdvanced = ref(false);
+const isProfit = ref(false);
+const xs = ref<number[]>([]);
+const activeProfile = ref(props.profile);
+
+const chartdata = ref();
+const rewardPerCu = 2.4;
+const rewardPerSu = 1;
+const rewardPerNu = 0.03;
+
+const _max = (val: number, max = 0): number => {
+  val = val ?? 0;
+  return Math.max(val, max);
+};
+
+const cu = computed(() => {
+  const x = (activeProfile.value.memory - 1) / 4;
+  const y = activeProfile.value.cpu * 2;
+  const z = activeProfile.value.ssd / 50;
+  return _max(Math.min(x, y, z));
+});
+
+const nu = computed(() => _max(cu.value * activeProfile.value.nuRequiredPerCu));
+
+const su = computed(() => {
+  const x = activeProfile.value.hdd / 1200;
+  const y = activeProfile.value.ssd * 0.8;
+  return x + y / 200;
+});
+
+const averageTokenPrice = computed(() => (activeProfile.value.price + activeProfile.value.priceAfter5Years) / 2);
+
+const tftRewardPer = computed(() => (activeProfile.value.certified ? 1 : 0) * 0.25 + 1);
+
+const tftRewardPerCu = computed(() => {
+  if (activeProfile.value.price < 0.08) return NaN;
+  return (rewardPerCu / activeProfile.value.price) * tftRewardPer.value;
+});
+
+const tftRewardPerSu = computed(() => {
+  if (activeProfile.value.price < 0.08) return NaN;
+  return (rewardPerSu / activeProfile.value.price) * tftRewardPer.value;
+});
+
+const tftRewardPerNu = computed(() => rewardPerNu / averageTokenPrice.value);
+
+const cuFarmingRewardInTft = computed(() => tftRewardPerCu.value * cu.value);
+const suFarmingRewardInTft = computed(() => tftRewardPerSu.value * su.value);
+
+const nuFarmingRewardInTft = computed(() => (activeProfile.value.publicIp ? tftRewardPerNu.value * nu.value : 0));
+
+const totalFarmingRewardInTft = computed(
+  () => cuFarmingRewardInTft.value + suFarmingRewardInTft.value + nuFarmingRewardInTft.value,
+);
+const getTotalReward = (currentPrice: number): number => {
+  const tft = totalFarmingRewardInTft.value * 60;
+  const grossProfit = tft * currentPrice;
+  return grossProfit - totalCosts.value;
+};
+
+const getRoi = (price: number = activeProfile.value.priceAfter5Years): number => {
+  const tft = totalFarmingRewardInTft.value * 60;
+  const usd = tft * price;
+  const powerCostOver5Years = activeProfile.value.powerUtilization * 24 * 0.365 * 5 * activeProfile.value.powerCost;
+  const roiX = usd - (activeProfile.value.investmentCostHW + powerCostOver5Years);
+  const roiY = activeProfile.value.investmentCostHW + powerCostOver5Years;
+  const roi = roiX / roiY;
+  return roi * 100;
+};
+
+const ROI = computed(() => getRoi().toFixed(0) + "%");
+
+const grossProfit = computed(() => {
+  const tft = totalFarmingRewardInTft.value * 60;
+  return tft * activeProfile.value.priceAfter5Years;
+});
+
+const totalCosts = computed(() => {
+  if (activeProfile.value.price < 0.08) return NaN;
+  const powerCostOver5Years = activeProfile.value.powerUtilization * 24 * 0.365 * 5 * activeProfile.value.powerCost;
+  return powerCostOver5Years + activeProfile.value.investmentCostHW;
+});
+
+const netProfit = computed(() => grossProfit.value - totalCosts.value);
+
+watch([activeProfile.value, isProfit, isAdvanced, certified], () => {
+  if (certified.value == "Certified Node") {
+    activeProfile.value.certified = Certification.CERTIFIED;
+  } else {
+    activeProfile.value.certified = Certification.NONE;
+  }
+
+  updatePieChart();
+  updateLineChart();
+});
+
+onMounted(() => {
+  updateLineChart();
+  updatePieChart();
+});
+
+const updateLineChart = () => {
+  const price = activeProfile.value
+    ? isProfit.value
+      ? activeProfile.value.priceAfter5Years
+      : activeProfile.value.maximumTokenPrice
+    : 0;
+
+  if (activeProfile.value) {
+    const X = (price - 0.15) / 19;
+    xs.value = [...Array.from({ length: 20 }).map((_, i) => 0.15 + X * i)];
+  }
+};
+function updatePieChart() {
+  chartdata.value = [nuFarmingRewardInTft.value, cuFarmingRewardInTft.value, suFarmingRewardInTft.value];
+}
+</script>
+
+<script lang="ts">
+export function createFarmingProfile(options: Partial<FarmingProfileOptions> = {}): FarmingProfileOptions {
+  return {
+    type: options.type || ProfileTypes.DIY,
+    name: options.name || "DIY",
+    memory: options.memory || 0,
+    cpu: options.cpu || 0,
+    hdd: options.hdd || 0,
+    ssd: options.ssd || 0,
+    price: options.price || 0.09,
+    priceAfter5Years: options.priceAfter5Years || 2,
+    maximumTokenPrice: options.maximumTokenPrice || 2,
+    powerUtilization: options.powerUtilization || 40,
+    powerCost: options.powerCost || 0.15,
+    certified: options.certified || Certification.NONE,
+    publicIp: options.publicIp || false,
+    investmentCostHW: options.investmentCostHW || 2200,
+    nuRequiredPerCu: options.nuRequiredPerCu || 30,
+  };
+}
+export default {
+  name: "SimulatorFarming",
+};
+</script>
diff --git a/packages/playground/src/plugins/vuetify.ts b/packages/playground/src/plugins/vuetify.ts
index aefe3b1a8a..38bee4b0d7 100644
--- a/packages/playground/src/plugins/vuetify.ts
+++ b/packages/playground/src/plugins/vuetify.ts
@@ -21,6 +21,7 @@ const vuetify = createVuetify({
           primary: "#1aa18f",
           secondary: "#74DDC3",
           title: "#1AA18F",
+          disclaimer: "#4D776D",
           info: "#7de3c8",
           warning: "#FFCC00",
           link: "#5695ff",
diff --git a/packages/playground/src/portal/simulator_view.vue b/packages/playground/src/portal/simulator_view.vue
new file mode 100644
index 0000000000..2c86ab505e
--- /dev/null
+++ b/packages/playground/src/portal/simulator_view.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="mt-8">
+    <v-container>
+      <v-card color="title" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+        <v-card-title class="font-weight-bold">Farming Calculator</v-card-title>
+      </v-card>
+
+      <v-card class="my-3 pa-3" color="disclaimer">
+        <v-card-title class="font-weight-bold">Disclaimer</v-card-title>
+        <v-card-text>
+          Simulations are NOT investment advice nor should they be looked at in this way. The scenarios shown are by no
+          means a guarantee and no one can predict the future of yields exactly as they are heavily dependent on factors
+          beyond anyone’s control. The DAO could also decide to change parameters or farming, which could have a
+          different result. We invite the community to review and give feedback and make proposals for necessary changes
+          here
+        </v-card-text>
+      </v-card>
+      <v-row>
+        <v-col cols="4">
+          <v-autocomplete
+            label="Choose Configuration"
+            :items="[...configuration]"
+            return-object
+            item-title="name"
+            v-model="chosenConfig"
+          />
+        </v-col>
+      </v-row>
+      <v-divider />
+      <SimulatorFarming :profile="activeProfile" :chosenConfig="chosenConfig" v-if="chosenConfig != ''" />
+    </v-container>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+
+import { ProfileTypes } from "@/types";
+
+import SimulatorFarming, { createFarmingProfile } from "../components/simulator.vue";
+const activeProfile = ref(createFarmingProfile());
+
+const configuration = ["DIY", "Titan v2.1"];
+const chosenConfig = ref("");
+
+watch([chosenConfig], () => {
+  if (chosenConfig.value == "Titan v2.1") {
+    // activeProfile.value = { type:ProfileTypes.TITAN, name: "Titan v2.1", memory: 32,cpu:8, hdd: 0, ssd: 1000, price: 0.08, priceAfter5Years: 1, investmentCostHW: 800};
+    activeProfile.value.type = ProfileTypes.TITAN;
+    activeProfile.value.name = "Titan v2.1";
+    activeProfile.value.memory = 32;
+    activeProfile.value.cpu = 8;
+    activeProfile.value.hdd = 0;
+    activeProfile.value.ssd = 1000;
+    activeProfile.value.price = 0.08;
+    activeProfile.value.priceAfter5Years = 1;
+    activeProfile.value.investmentCostHW = 800;
+  } else {
+    activeProfile.value.type = ProfileTypes.DIY;
+    activeProfile.value.name = "DIY";
+    activeProfile.value.memory = 32;
+    activeProfile.value.cpu = 8;
+    activeProfile.value.hdd = 10000;
+    activeProfile.value.ssd = 1000;
+    activeProfile.value.price = 0.08;
+    activeProfile.value.priceAfter5Years = 1;
+  }
+});
+</script>
diff --git a/packages/playground/src/router/index.ts b/packages/playground/src/router/index.ts
index 5d30113037..116158eda7 100644
--- a/packages/playground/src/router/index.ts
+++ b/packages/playground/src/router/index.ts
@@ -53,6 +53,12 @@ const router = createRouter({
           component: () => import("../calculator/resource_pricing.vue"),
           meta: { title: "Resource Pricing" },
         },
+
+        {
+          path: "simulator",
+          component: () => import("../portal/simulator_view.vue"),
+          meta: { title: "Twin" },
+        },
       ],
     },
     {
diff --git a/packages/playground/src/types/index.ts b/packages/playground/src/types/index.ts
index b14c3c9da7..88d8a1dcae 100644
--- a/packages/playground/src/types/index.ts
+++ b/packages/playground/src/types/index.ts
@@ -4,6 +4,34 @@ import type { INode } from "@/utils/filter_nodes";
 
 import type * as validators from "../utils/validators";
 
+export enum ProfileTypes {
+  DIY,
+  TITAN,
+}
+
+export enum Certification {
+  NONE = 0,
+  CERTIFIED = 1,
+  GOLD_CERTIFIED = 2,
+}
+
+export interface FarmingProfileOptions {
+  type: ProfileTypes;
+  name: string;
+  memory: number;
+  cpu: number;
+  hdd: number;
+  ssd: number;
+  price: number;
+  priceAfter5Years: number;
+  maximumTokenPrice: number;
+  powerUtilization: number;
+  powerCost: number;
+  certified: Certification;
+  publicIp: boolean;
+  investmentCostHW: number;
+  nuRequiredPerCu: number;
+}
 export interface K8SWorker {
   name: string;
   cpu: number;