added template creation, fixed mint collection

src/components/DnD.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="drag-drop-uploader">
+    <div class="drag-drop-area" @dragover="handleDragOver" @drop="handleDrop">
+      <template v-if="uploadedFiles.length === 0">
+        <button class="button" type="button" @click="openFileInput">
+          Add File
+        </button>
+        <p>...or drag and drop a file.</p>
+      </template>
+      <template v-else>
+        <button
+          class="button"
+          type="button"
+          v-if="uploadedFiles.length > 0"
+          @click="openFileInput"
+        >
+          Change
+        </button>
+        <p>{{ uploadedFiles.at(-1).name }}</p>
+      </template>
+    </div>
+    <input
+      type="file"
+      ref="fileInput"
+      style="display: none"
+      @change="handleFileInput"
+      multiple
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      uploadedFiles: [],
+    };
+  },
+  methods: {
+    handleDragOver(event) {
+      event.preventDefault();
+    },
+    handleDrop(event) {
+      event.preventDefault();
+      const files = event.dataTransfer.files;
+      this.uploadFiles(files);
+    },
+    openFileInput() {
+      this.$refs.fileInput.click();
+    },
+    handleFileInput(event) {
+      const files = event.target.files;
+      this.uploadFiles(files);
+    },
+    uploadFiles(files) {
+      console.log(files);
+      for (let i = 0; i < files.length; i++) {
+        this.uploadedFiles.push(files[i]);
+      }
+    },
+    change() {
+      this.openFileInput();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.drag-drop-uploader {
+  margin: 0 auto;
+}
+
+.drag-drop-area {
+  display: grid;
+  align-content: center;
+  border: 2px dashed #ccc;
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+}
+
+ul {
+  margin-top: 20px;
+}
+
+.button {
+  justify-self: center;
+  border: 0;
+  border-radius: 0.5rem;
+  height: 3rem;
+  background-color: #e36464;
+  color: #363e5e;
+  font-size: 1.3rem;
+  font-weight: 500;
+  padding: 0 1rem;
+  cursor: pointer;
+}
+</style>

src/components/SiteSettings.vue

@@ -52,7 +52,16 @@
         :items="templates"
         @change="(item) => (activeTemplateName = item.name)"
         :active-name="activeTemplateName"
-      />
+      >
+        <template v-slot:suffix>
+          <router-link
+            :to="`/add-template/${$route?.params?.domain}`"
+            class="button"
+          >
+            Add
+          </router-link>
+        </template>
+      </Switcher>
       <TemplatesList
         :templates="templates"
         :active-template-name="activeTemplateName"
@@ -119,7 +128,7 @@ export default {
       handler: function (newVal, oldVal) {
         if (newVal === oldVal) return;
         this.constructor_params = newVal.copy();
-        this.contacts = Object.entries(newVal.contacts);
+        this.contacts = newVal.contacts ? Object.entries(newVal.contacts) : [];
       },
       deep: true,
     },
@@ -269,4 +278,25 @@ export default {
 .link-type-icon {
   font-size: 2.5rem;
 }
+
+.button {
+  border: 0;
+  border-radius: 0.5rem;
+  height: 3rem;
+  background-color: #e36464;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  place-items: center;
+  justify-self: end;
+  min-width: 150px;
+  color: #363e5e;
+  font-size: 1.3rem;
+  font-weight: 500;
+  padding: 0 1rem;
+  cursor: pointer;
+  margin-left: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 </style>

src/components/Switcher.vue

@@ -7,6 +7,7 @@
     >
       {{ item.name }}
     </div>
+    <slot name="suffix" />
   </div>
 </template>
 

src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Landing from "../views/Landing.vue";
-import { mintCollection, myDomains } from "./routes";
+import { addTemplate, mintCollection, myDomains } from "./routes";
 
 /*
 /find - bar + table
@@ -79,11 +79,17 @@ const router = createRouter({
       props: true,
     },
     {
-      path: "/mint-collection",
+      path: "/mint-collection/:domain",
       name: mintCollection,
       component: () => import("../views/MintCollection.vue"),
       props: true,
     },
+    {
+      path: "/add-template/:domain",
+      name: addTemplate,
+      component: () => import("../views/AddTemplate.vue"),
+      props: true,
+    },
   ],
 });
 

src/router/routes.ts

@@ -1,2 +1,3 @@
 export const myDomains = "my-domains";
 export const mintCollection = "mint-collection";
+export const addTemplate = "add-template";

src/views/AddTemplate.vue

@@ -0,0 +1,134 @@
+<template>
+  <DarkLayout>
+    <form class="form">
+      <div class="input-wrapper">
+        <label for="template-name">Template name</label>
+        <input v-model="name" class="input" id="template-name" type="text" />
+      </div>
+      <DragDropUploader class="dnd" />
+      <div v-for="(_, i) in fields" class="input-wrapper">
+        <div class="fields-wrapper">
+          <div class="input-wrapper">
+            <label :for="`field-${i}`">Field {{ i + 1 }}</label>
+            <input
+              placeholder="Name"
+              v-model="fields[i].name"
+              class="input"
+              :id="`field-${i}`"
+              type="text"
+            />
+          </div>
+          <div>
+            <input
+              placeholder="Value"
+              v-model="fields[i].value"
+              class="input"
+              :id="`field-${i}`"
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+      <button
+        class="button button-plus"
+        style="justify-self: start"
+        type="button"
+        @click="fields.push({ name: '', value: '' })"
+      >
+        +
+      </button>
+      <button class="button" type="button">Submit</button>
+    </form>
+    <template v-slot:header>
+      <router-link to="/find">
+        <button class="b darkish back">
+          <img src="../assets/icons/ton_left.svg" alt="TON" />
+          Back
+        </button>
+      </router-link>
+    </template>
+  </DarkLayout>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import DarkLayout from "../components/DarkLayout.vue";
+import DragDropUploader from "@/components/DnD.vue";
+
+const name = ref("");
+
+const fields = ref([{ name: "", value: "" }]);
+</script>
+
+<style>
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+
+.input {
+  display: block;
+  width: 100%;
+  min-height: 40px;
+  border: 0;
+  border-radius: 10px;
+  padding: 12px 24px;
+  background-color: #4e5a88;
+  color: white;
+  font-size: 24px;
+  font-family: "Raleway", serif;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.form {
+  display: grid;
+  gap: 24px;
+  min-width: 600px;
+}
+
+.button {
+  border: 0;
+  border-radius: 0.5rem;
+  height: 3rem;
+  background-color: #e36464;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  place-items: center;
+  justify-self: end;
+  color: #363e5e;
+  font-size: 1.3rem;
+  font-weight: 500;
+  padding: 0 1rem;
+  cursor: pointer;
+}
+
+.button-plus {
+  background-color: #4e5a88;
+  color: white;
+}
+
+.info {
+  width: 600px;
+  font-size: 16px;
+  text-align: right;
+  margin-top: 40px;
+}
+
+.fields-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: end;
+  gap: 40px;
+}
+
+.dnd {
+  width: 600px;
+}
+</style>

src/views/Explore.vue

@@ -35,10 +35,12 @@
             is owned by
             <div class="owner-address">you</div>
           </div>
-          <a :href="result.nft_info.explorer_link">View nft</a>
+          <div class="buttons">
-          <router-link :to="{ name: mintCollection }">
+            <a :href="result.nft_info.explorer_link">View nft</a>
-            Mint a subdomain collection
+            <router-link class="button" :to="`/mint-collection/${domain}`">
-          </router-link>
+              Mint a subdomain collection
+            </router-link>
+          </div>
           <br />
           <div id="wallet_input" class="rec-field">
             <div style="display: flex; width: 100%">
@@ -293,9 +295,11 @@ export default {
       });
     },
     updSettingsComponent() {
-      this.$refs.site_settings.set_site_rec(this.site_rec);
+      if (this.$refs.site_settings) {
-      this.$refs.site_settings.saved_constructor_params =
+        this.$refs.site_settings.set_site_rec(this.site_rec);
-        this.saved_constructor_params;
+        this.$refs.site_settings.saved_constructor_params =
+          this.saved_constructor_params;
+      }
     },
   },
   watch: {
@@ -389,4 +393,29 @@ export default {
 .wallet-record-field {
   font-family: "Inconsolata", monospace;
 }
+
+.button {
+  border: 0;
+  border-radius: 0.5rem;
+  height: 3rem;
+  background-color: #e36464;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  place-items: center;
+  color: #363e5e;
+  font-size: 1.3rem;
+  font-weight: 500;
+  padding: 0 1rem;
+  cursor: pointer;
+  margin-left: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>

src/views/MintCollection.vue

@@ -30,7 +30,7 @@
         }}).<br />Any users also will be able to buy domains from this
         collection.
       </p>
-      <button class="button">Mint</button>
+      <button @click="mint()" class="button" type="button">Mint</button>
     </form>
     <template v-slot:header>
       <router-link to="/find">
@@ -46,6 +46,31 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import DarkLayout from "../components/DarkLayout.vue";
+import { useStore } from "vuex";
+import { call_api } from "@/api";
+
+const store = useStore();
+
+const mint = async () => {
+  const message = await call_api(`set-record/wallet/${store.getters.address}`);
+
+  const d = new Date();
+  const validness = parseInt((d.getTime() / 1000).toFixed(0)) + 360000;
+  const transaction = {
+    validUntil: validness,
+    messages: [
+      {
+        amount: (0.05 * 1000000000).toString(),
+        address: store.getters.address,
+        payload: message,
+      },
+    ],
+  };
+
+  const result = await store.state.connector.sendTransaction(transaction);
+
+  console.log(result);
+};
 
 const name = ref("");
 const firstPrice = ref(0);