69 scan address instead of copypaste

components/dot/connect.vue

@@ -1,5 +1,5 @@
 <template>
-  <dot-button variant="primary" :size="size" @click="open">
+  <dot-button variant="tertiary" :size="size" @click="open">
     {{ accountStore.hasSelectedAccount ? `${accountStore.accountName} ${accountStore.shortAddress}` : "Connect" }}
   </dot-button>
 </template>

nuxt.config.ts

@@ -32,6 +32,12 @@ export default defineNuxtConfig({
     },
   },
 
+  icon: {
+    clientBundle: {
+      scan: true,
+    },
+  },
+
   googleFonts: {
     families: {
       Unbounded: true,

pages/claim/[code].vue

@@ -12,7 +12,7 @@
 
     <div class="flex flex-col space-y-3 self-stretch">
       <template v-if="!claimed">
-        <div class="flex rounded-full border-2 border-border-color p-2 shadow-text-color">
+        <div class="mb-6 flex rounded-full border-2 border-border-color p-2 shadow-text-color">
           <button
             class="flex-1 rounded-full py-2 text-text-color"
             :class="{
@@ -34,8 +34,15 @@
         </div>
 
         <dot-label v-if="showAddressInput" text="Enter DOT address">
-          <form @submit.prevent="onSubmit()">
+          <form class="flex space-x-4" @submit.prevent="onSubmit()">
             <dot-text-input v-model="manualAddress" placeholder="Address" />
+            <div>
+              <dot-button variant="tertiary" size="large" @click="open()">
+                <template #icon>
+                  <icon name="mdi:qrcode" size="24" />
+                </template>
+              </dot-button>
+            </div>
           </form>
         </dot-label>
 
@@ -91,6 +98,8 @@
 </template>
 <script setup lang="ts">
 import { isAddress } from "@polkadot/util-crypto";
+import QRScannerModal from "~/components/dot/qr-scanner-modal.vue";
+import { useModal } from "vue-final-modal";
 
 const route = useRoute();
 const accountStore = useAccountStore();
@@ -114,6 +123,15 @@ const claimButtonLabel = computed(() => (isClaiming.value ? "Claiming ..." : "Cl
 
 const onSubmit = () => claim();
 
+const { open } = useModal({
+  component: QRScannerModal,
+  attrs: {
+    onScan(data: string) {
+      manualAddress.value = data;
+    },
+  },
+});
+
 const claim = async () => {
   if (!address.value) return;
   if (!canClaim.value) return;