From c336c62c32ca96f831437daccb54cdc0629cb00a Mon Sep 17 00:00:00 2001
From: ennucore <ennucore@gmail.com>
Date: Sat, 17 Dec 2022 19:37:20 +0100
Subject: [PATCH] Awesome QR at checkout

---
 .idea/workspace.xml            | 28 +++++++-----
 package-lock.json              | 27 +++++++++++
 package.json                   |  1 +
 src/components/ZonePricing.vue |  4 +-
 src/result.ts                  | 29 ++++++++++++
 src/views/Checkout.vue         | 82 ++++++++++++++++++++++++++++++++--
 6 files changed, 154 insertions(+), 17 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 646205b..dd5367e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,15 +1,13 @@
 <?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="&quot;All zones&quot; button + some other stuff">
-      <change afterPath="$PROJECT_DIR$/src/assets/icons/ton_left.svg" afterDir="false" />
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Awesome QR at checkout">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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/DarkLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DarkLayout.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Header.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Header.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/Explore.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Explore.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/FindQ.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/FindQ.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/Get.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ZonePricing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZonePricing.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/views/Checkout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Checkout.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -77,7 +75,7 @@
       <workItem from="1670927344373" duration="29000" />
       <workItem from="1670927391338" duration="2277000" />
       <workItem from="1671024025708" duration="19806000" />
-      <workItem from="1671204365793" duration="15716000" />
+      <workItem from="1671204365793" duration="19127000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -149,7 +147,14 @@
       <option name="project" value="LOCAL" />
       <updated>1671227655693</updated>
     </task>
-    <option name="localTasksCounter" value="11" />
+    <task id="LOCAL-00011" summary="&quot;All zones&quot; button + some other stuff">
+      <created>1671240411281</created>
+      <option name="number" value="00011" />
+      <option name="presentableId" value="LOCAL-00011" />
+      <option name="project" value="LOCAL" />
+      <updated>1671240411281</updated>
+    </task>
+    <option name="localTasksCounter" value="12" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -178,6 +183,7 @@
     <MESSAGE value="Displaying results" />
     <MESSAGE value="Checkout, Explore" />
     <MESSAGE value="&quot;All zones&quot; button + some other stuff" />
-    <option name="LAST_COMMIT_MESSAGE" value="&quot;All zones&quot; button + some other stuff" />
+    <MESSAGE value="Awesome QR at checkout" />
+    <option name="LAST_COMMIT_MESSAGE" value="Awesome QR at checkout" />
   </component>
 </project>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 22d8327..2af726e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@popperjs/core": "^2.11.6",
         "axios": "^1.2.1",
         "bulma": "^0.9.4",
+        "qr-code-styling": "^1.6.0-rc.1",
         "sass": "^1.56.2",
         "vue": "^3.2.45",
         "vue-contenteditable": "^4.1.0",
@@ -2122,6 +2123,19 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/qr-code-styling": {
+      "version": "1.6.0-rc.1",
+      "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz",
+      "integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==",
+      "dependencies": {
+        "qrcode-generator": "^1.4.3"
+      }
+    },
+    "node_modules/qrcode-generator": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
+      "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -4154,6 +4168,19 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "qr-code-styling": {
+      "version": "1.6.0-rc.1",
+      "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz",
+      "integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==",
+      "requires": {
+        "qrcode-generator": "^1.4.3"
+      }
+    },
+    "qrcode-generator": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
+      "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/package.json b/package.json
index d8d2fcd..26ac2fc 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@popperjs/core": "^2.11.6",
     "axios": "^1.2.1",
     "bulma": "^0.9.4",
+    "qr-code-styling": "^1.6.0-rc.1",
     "sass": "^1.56.2",
     "vue": "^3.2.45",
     "vue-contenteditable": "^4.1.0",
diff --git a/src/components/ZonePricing.vue b/src/components/ZonePricing.vue
index 27c417f..a568bdd 100644
--- a/src/components/ZonePricing.vue
+++ b/src/components/ZonePricing.vue
@@ -26,7 +26,7 @@
       </thead>
       <tbody>
       <tr>
-        <td>{{ '*'.repeat(zone.length_1) + zone.zone }}</td>
+        <td>{{ '*'.repeat(zone.length_1) + '.' + zone.zone }}</td>
         <td v-if="zone.canAuction()">
           <TonButton>{{ zone.price_auction_1 }}</TonButton>
         </td>
@@ -35,7 +35,7 @@
         </td>
       </tr>
       <tr>
-        <td>{{ '*'.repeat(zone.length_2) + zone.zone }}</td>
+        <td>{{ '*'.repeat(zone.length_2) + '.' + zone.zone }}</td>
         <td v-if="zone.canAuction()">
           <TonButton>{{ zone.price_auction_2 }}</TonButton>
         </td>
diff --git a/src/result.ts b/src/result.ts
index 151b865..f251e05 100644
--- a/src/result.ts
+++ b/src/result.ts
@@ -28,6 +28,10 @@ export class Result {
     canBuy(): boolean {
         return this.buy_price !== undefined && this.buy_price !== null;
     }
+
+    zone(): string {
+        return this.domain.split('.').slice(1).join('.');
+    }
 }
 
 const sleep = (milliseconds: number) => {
@@ -53,3 +57,28 @@ export async function get_domain_result(domain: string) {
     }
     return new Result(domain, 5, 3);
 }
+
+export class TonLink {
+    address: string;
+    sum?: number;
+    message: string;
+
+    constructor(address: string, message: string, sum?: number) {
+        this.address = address;
+        this.sum = sum;
+        this.message = message;
+    }
+
+    getLink(): string {
+        let link = `ton://${this.address}/transfer?message=${this.message}`;
+        if (this.sum !== undefined) {
+            link += `&amount=${this.sum}`;
+        }
+        return link;
+    }
+}
+
+// Get the link for buying a domain
+export function get_ton_link(res: Result) {
+    return new TonLink(res.zone(), res.buy_price!, 'b/' + res.domain);
+}
diff --git a/src/views/Checkout.vue b/src/views/Checkout.vue
index 411e6f1..6ba5d9d 100644
--- a/src/views/Checkout.vue
+++ b/src/views/Checkout.vue
@@ -1,15 +1,22 @@
 <template>
   <DarkLayout>
     <!-- todo: button to go back to Get -->
-    <div class="to-buy">To buy</div>
+    <!-- todo: handle auction -->
+    <div class="text">To buy</div>
     <DomainBar :zone="'.' + zone" :value="domain" :has_button="false" :editable="false"/>
-
+    <div class="text">Scan this:</div>
+    <div class="qr">
+      <div ref="qrCode"></div>
+    </div>
   </DarkLayout>
 </template>
 
 <script>
 import DarkLayout from "../components/DarkLayout.vue";
 import DomainBar from "../components/DomainBar.vue";
+import {get_domain_result, get_ton_link} from "../result";
+import QRCodeStyling from 'qr-code-styling';
+
 export default {
   name: "Checkout",
   components: {DomainBar, DarkLayout},
@@ -20,10 +27,77 @@ export default {
     zone: {
       type: String,
     }
+  },
+  data() {
+    return {
+      result: null,
+      ton_link: null,
+      qr_code: null,
+    }
+  },
+  methods: {
+    async get_result() {
+      this.result = await get_domain_result(this.domain + '.' + this.zone);
+      this.ton_link = await get_ton_link(this.result);
+    }
+  },
+  mounted() {
+    this.get_result().then(
+        () => {
+          this.qr_code = new QRCodeStyling(this.options)
+          this.qr_code.append(this.$refs["qrCode"])
+        }
+    )
+  },
+  computed: {
+    loaded () {
+      return this.result !== null && this.ton_link !== null;
+    },
+    options () {
+      if (!this.loaded) {
+        return null;
+      }
+      return {
+      width: 300,
+      height: 300,
+      type: 'svg',
+      data: this.ton_link.getLink(),
+      image: '/favicon.png',
+      margin: 10,
+      qrOptions: {
+        typeNumber: 0,
+        mode: 'Byte',
+        errorCorrectionLevel: 'Q'
+      },
+      imageOptions: {
+        hideBackgroundDots: true,
+        imageSize: 0.4,
+        margin: 5,
+        crossOrigin: 'anonymous',
+      },
+      dotsOptions: {
+        color: '#282e46',
+        type: 'rounded'
+      },
+      backgroundOptions: {
+        color: '#ffffff',
+      },
+      cornersSquareOptions: {
+        color: '#282e46',
+        type: 'extra-rounded',
+      },
+      cornersDotOptions: {
+        color: '#282e46',
+        type: 'dot',
+      }
+    };
+    }
   }
 }
 </script>
 
-<style scoped>
-
+<style>
+.qr > div > svg {
+  border-radius: 2rem;
+}
 </style>
\ No newline at end of file