Browse Source

added template creation, fixed mint collection

master
Aleksandr Bautin 1 year ago
parent
commit
8279679046
No known key found for this signature in database
GPG Key ID: 9B3364A12DFE9211
  1. 98
      src/components/DnD.vue
  2. 34
      src/components/SiteSettings.vue
  3. 1
      src/components/Switcher.vue
  4. 10
      src/router/index.ts
  5. 1
      src/router/routes.ts
  6. 134
      src/views/AddTemplate.vue
  7. 43
      src/views/Explore.vue
  8. 27
      src/views/MintCollection.vue

98
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>

34
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>

1
src/components/Switcher.vue

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

10
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,
},
],
});

1
src/router/routes.ts

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

134
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>

43
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>
<router-link :to="{ name: mintCollection }">
Mint a subdomain collection
</router-link>
<div class="buttons">
<a :href="result.nft_info.explorer_link">View nft</a>
<router-link class="button" :to="`/mint-collection/${domain}`">
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);
this.$refs.site_settings.saved_constructor_params =
this.saved_constructor_params;
if (this.$refs.site_settings) {
this.$refs.site_settings.set_site_rec(this.site_rec);
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>

27
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);

Loading…
Cancel
Save