The screens for domain owners

.idea/workspace.xml

@@ -1,12 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Add (almost) monochrome logo + loading QR on checkout">
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Back button + stuff for deploy">
+      <change afterPath="$PROJECT_DIR$/src/views/IHave.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/api.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/api.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ZoneTable.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZoneTable.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/result.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/result.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/Checkout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Checkout.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/tsconfig.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/IKnow.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/IKnow.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/zone.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/zone.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -74,7 +78,11 @@
       <workItem from="1670927344373" duration="29000" />
       <workItem from="1670927391338" duration="2277000" />
       <workItem from="1671024025708" duration="19806000" />
-      <workItem from="1671204365793" duration="22162000" />
+      <workItem from="1671204365793" duration="23468000" />
+      <workItem from="1671490155427" duration="1029000" />
+      <workItem from="1671554049942" duration="6375000" />
+      <workItem from="1671797380442" duration="603000" />
+      <workItem from="1671887059754" duration="3759000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -167,7 +175,14 @@
       <option name="project" value="LOCAL" />
       <updated>1671302856594</updated>
     </task>
-    <option name="localTasksCounter" value="14" />
+    <task id="LOCAL-00014" summary="Back button + stuff for deploy">
+      <created>1671398124125</created>
+      <option name="number" value="00014" />
+      <option name="presentableId" value="LOCAL-00014" />
+      <option name="project" value="LOCAL" />
+      <updated>1671398124125</updated>
+    </task>
+    <option name="localTasksCounter" value="15" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -198,6 +213,7 @@
     <MESSAGE value="&quot;All zones&quot; button + some other stuff" />
     <MESSAGE value="Awesome QR at checkout" />
     <MESSAGE value="Add (almost) monochrome logo + loading QR on checkout" />
-    <option name="LAST_COMMIT_MESSAGE" value="Add (almost) monochrome logo + loading QR on checkout" />
+    <MESSAGE value="Back button + stuff for deploy" />
+    <option name="LAST_COMMIT_MESSAGE" value="Back button + stuff for deploy" />
   </component>
 </project>

src/assets/main.css

@@ -13,7 +13,7 @@
 a,
 .green {
     text-decoration: none;
-    color: hsla(160, 100%, 37%, 1);
+    color: hsl(201, 100%, 37%);
     transition: 0.4s;
 }
 
@@ -87,7 +87,10 @@ a,
     border-radius: 2rem;
     padding: 2.5rem 32px;
     text-align: center;
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    place-content: center;
+    justify-content: center;
     font-size: 1.6rem;
     font-weight: bold;
     color: #282e46;

src/components/ZoneTable.vue

@@ -33,7 +33,7 @@ export default {
   props: {
     zones: {
       type: Array[Zone],
-      default: [new Zone("example.ton", 3, 5), new Zone("agorata.ton", 3, 5)]
+      default: [new Zone("example.ton", 3, 5), new Zone("agorata.ton", 3, 5), new Zone("testtesttest.ton", 1, 1)]
     }
   }
 }

src/result.ts

@@ -70,7 +70,8 @@ export class TonLink {
     }
 
     getLink(): string {
-        let link = `ton://${this.address}/transfer?message=${this.message}`;
+        // todo: use tonapi to run dnsresolve on the address (or move the task to the backend) - domains don't work well in links
+        let link = `ton://transfer/${this.address}?message=${this.message}`;
         if (this.sum !== undefined) {
             link += `&amount=${this.sum}`;
         }

src/router/index.ts

@@ -26,6 +26,11 @@ const router = createRouter({
             name: 'IKnow',
             component: () => import('../views/IKnow.vue')
         },
+        {
+            path: '/i-have',
+            name: 'IHave',
+            component: () => import('../views/IHave.vue')
+        },
         {
             path: '/tondns',
             name: 'tondns',

src/views/Checkout.vue

@@ -84,7 +84,7 @@ export default {
         imageOptions: {
           hideBackgroundDots: true,
           imageSize: 0.4,
-          margin: 5,
+          margin: 3,
           crossOrigin: 'anonymous',
         },
         dotsOptions: {

src/views/IHave.vue

@@ -0,0 +1,70 @@
+<template>
+  <WhiteLayout next="">
+    <template v-slot:header>
+      <img src="@/assets/headers/i-know.svg" style="max-height: 100%; max-width: 90%" alt="TON DNS"/>
+    </template>
+    <template v-slot:content>
+      <div class="cont2">
+        <div class="columns-3" style="display: flex; columns: 3; justify-content: center; align-items: center">
+          <div>
+          </div>
+          <div id="great">
+            <p>
+              Very good!<br/>We can help you host a website there or sell subdomains.<br/>
+              For now, you will have to <a href="https://t.me/ennucore">contact us on Telegram</a>. <br/>
+              We are especially interested in partnering with different projects and communities which are interested in distributing domains to their users.<br/>
+              Also, you can always <router-link :to="{name: 'Find'}">buy another domain</router-link>.
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-slot:buttons>
+      <a href="https://t.me/ennucore">
+        <button class="b blue wide">
+          <span>Contact us</span>
+        </button>
+      </a>
+      <router-link :to="{name: 'Find'}">
+        <button class="b blue wide">
+          <span>Buy a domain</span>
+        </button>
+      </router-link>
+    </template>
+  </WhiteLayout>
+</template>
+
+<script>
+import WhiteLayout from "../components/WhiteLayout.vue";
+
+export default {
+  name: "IHave",
+  components: {WhiteLayout}
+}
+</script>
+
+<style scoped>
+#great {
+  font-size: 3rem;
+}
+
+/* narrow buttons on mobile */
+@media only screen and (max-width: 800px) {
+  .b.blue.wide {
+    max-width: 35vw;
+    min-width: revert;
+  }
+
+  #great {
+    font-size: 1.5rem;
+  }
+}
+.cont2 {
+  /* vertical centering */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+</style>

src/views/IKnow.vue

@@ -4,22 +4,24 @@
       <img src="@/assets/headers/i-know.svg" style="max-height: 100%; max-width: 90%" alt="TON DNS"/>
     </template>
     <template v-slot:content>
+      <div class="cont2">
         <div class="columns-3" style="display: flex; columns: 3; justify-content: center; align-items: center">
           <div>
           </div>
-        <div>
+          <div id="great">
             <p>That's great!<br/>Maybe, you even have a domain already?</p>
           </div>
         </div>
+      </div>
     </template>
     <template v-slot:buttons>
-      <router-link to="tondns">
+      <router-link :to="{name: 'IHave'}">
         <button class="b blue wide">
           <img src="@/assets/icons/ton_top.svg" alt="Next"/>
           <span>Yes</span>
         </button>
       </router-link>
-      <router-link to="tondns">
+      <router-link :to="{name: 'tondns'}">
         <button class="b blue wide">
           <img src="@/assets/icons/ton_bottom.svg" alt="Next"/>
           <span>No</span>
@@ -39,11 +41,27 @@ export default {
 </script>
 
 <style scoped>
+#great {
+  font-size: 4rem;
+}
+
 /* narrow buttons on mobile */
 @media only screen and (max-width: 800px) {
   .b.blue.wide {
     max-width: 35vw;
     min-width: revert;
   }
+
+  #great {
+    font-size: 2rem;
+  }
+}
+.cont2 {
+  /* vertical centering */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
 }
 </style>

src/zone.ts

@@ -7,10 +7,11 @@ export class Zone {
     price_buy_2?: number;
     price_auction_1?: number;
     price_auction_2?: number;
+	address?: string;
 
     constructor(zone: string,
                 price_buy_1?: number, price_buy_2?: number, price_auction_1?: number, price_auction_2?: number,
-                min_length: number = 2, length_1: number = 3, length_2: number = 8
+                min_length: number = 2, length_1: number = 3, length_2: number = 8, address?: string
                 ) {
         this.zone = zone;
         this.min_length = min_length;
@@ -20,6 +21,7 @@ export class Zone {
         this.price_buy_2 = price_buy_2;
         this.price_auction_1 = price_auction_1;
         this.price_auction_2 = price_auction_2;
+		this.address = address;
     }
 
     canBuy(): boolean {