Add (almost) monochrome logo + loading QR on checkout

.idea/workspace.xml

@@ -3,10 +3,6 @@
   <component name="ChangeListManager">
     <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$/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" />
@@ -75,7 +71,7 @@
       <workItem from="1670927344373" duration="29000" />
       <workItem from="1670927391338" duration="2277000" />
       <workItem from="1671024025708" duration="19806000" />
-      <workItem from="1671204365793" duration="19127000" />
+      <workItem from="1671204365793" duration="19693000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -154,7 +150,14 @@
       <option name="project" value="LOCAL" />
       <updated>1671240411281</updated>
     </task>
-    <option name="localTasksCounter" value="12" />
+    <task id="LOCAL-00012" summary="Awesome QR at checkout">
+      <created>1671302241009</created>
+      <option name="number" value="00012" />
+      <option name="presentableId" value="LOCAL-00012" />
+      <option name="project" value="LOCAL" />
+      <updated>1671302241009</updated>
+    </task>
+    <option name="localTasksCounter" value="13" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">

src/views/Checkout.vue

@@ -5,9 +5,12 @@
     <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 class="qr" v-if="loaded">
       <div ref="qrCode"></div>
     </div>
+    <div v-else class="center">
+      <RotateSquare2 style="width: 5rem; height: 5rem; margin-top: 5rem"/>
+    </div>
   </DarkLayout>
 </template>
 
@@ -16,10 +19,11 @@ 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';
+import RotateSquare2 from "../components/RotateSquare2.vue";
 
 export default {
   name: "Checkout",
-  components: {DomainBar, DarkLayout},
+  components: {RotateSquare2, DomainBar, DarkLayout},
   props: {
     domain: {
       type: String,
@@ -50,47 +54,47 @@ export default {
     )
   },
   computed: {
-    loaded () {
+    loaded() {
       return this.result !== null && this.ton_link !== null;
     },
-    options () {
+    options() {
       if (!this.loaded) {
         return null;
       }
       return {
-      width: 300,
+        width: 300,
-      height: 300,
+        height: 300,
-      type: 'svg',
+        type: 'svg',
-      data: this.ton_link.getLink(),
+        data: this.ton_link.getLink(),
-      image: '/favicon.png',
+        image: '/logo_mono.png',
-      margin: 10,
+        margin: 10,
-      qrOptions: {
+        qrOptions: {
-        typeNumber: 0,
+          typeNumber: 0,
-        mode: 'Byte',
+          mode: 'Byte',
-        errorCorrectionLevel: 'Q'
+          errorCorrectionLevel: 'Q'
-      },
+        },
-      imageOptions: {
+        imageOptions: {
-        hideBackgroundDots: true,
+          hideBackgroundDots: true,
-        imageSize: 0.4,
+          imageSize: 0.4,
-        margin: 5,
+          margin: 5,
-        crossOrigin: 'anonymous',
+          crossOrigin: 'anonymous',
-      },
+        },
-      dotsOptions: {
+        dotsOptions: {
-        color: '#282e46',
+          color: '#282e46',
-        type: 'rounded'
+          type: 'rounded'
-      },
+        },
-      backgroundOptions: {
+        backgroundOptions: {
-        color: '#ffffff',
+          color: '#ffffff',
-      },
+        },
-      cornersSquareOptions: {
+        cornersSquareOptions: {
-        color: '#282e46',
+          color: '#282e46',
-        type: 'extra-rounded',
+          type: 'extra-rounded',
-      },
+        },
-      cornersDotOptions: {
+        cornersDotOptions: {
-        color: '#282e46',
+          color: '#282e46',
-        type: 'dot',
+          type: 'dot',
-      }
+        }
-    };
+      };
     }
   }
 }