Awesome QR at checkout

2 years ago · c336c62c32
6 changed files with 154 additions and 17 deletions
--- 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>
--- 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",
--- 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",
--- 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>
--- 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);
+}
--- 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>