Feature/claim/by mail

app.vue → app/app.vue

@@ -7,6 +7,7 @@
 </template>
 <script setup lang="ts">
 import { ModalsContainer } from "vue-final-modal";
+import { createLogger } from "~~/utils/create-logger";
 
 const route = useRoute();
 

components/dot/card.vue → app/components/dot/card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border border-primary p-2">
+  <div class="border-primary rounded-lg border p-2">
     <slot />
   </div>
 </template>

components/dot/label.story.vue → app/components/dot/label.story.vue

@@ -1,13 +1,7 @@
 <template>
   <Story title="Dot/Label" auto-props-disabled>
     <Variant title="Default">
-      <dot-label
-        class="w-1/4"
-        text="Switch"
-        :required="state.required"
-        :vertical="state.vertical"
-        :error="state.error"
-      >
+      <dot-label class="w-1/4" text="Switch" :required="state.required" :vertical="state.vertical" :error="state.error">
         <dot-switch />
       </dot-label>
     </Variant>

components/dot/sign-modal.vue → app/components/dot/sign-modal.vue

@@ -78,6 +78,12 @@
         <p class="text-right text-sm font-bold text-text-color/70">{{ props.secret }}</p>
         <p class="text-sm text-text-color">{{ t("create.dialog.amount") }}</p>
         <p class="text-right text-sm font-bold text-text-color/70">{{ props.quantity }}</p>
+        <template v-if="props.supportMail">
+          <p class="text-sm text-text-color">{{ t("create.dialog.supportMail") }}</p>
+          <p class="text-right text-sm font-bold text-text-color/70">
+            {{ props.supportMail ? t("common.yes") : t("common.no") }}
+          </p>
+        </template>
       </div>
 
       <hr class="-mx-6 my-3" />
@@ -180,6 +186,7 @@ import { pinFileToIPFS, pinJson, type Metadata } from "~/services/nftStorage";
 import Identicon from "@polkadot/vue-identicon";
 import { asyncComputed } from "@vueuse/core";
 import type { Prefix } from "@kodadot1/static";
+import { createLogger } from "~~/utils/create-logger";
 
 const props = defineProps<{
   name: string;
@@ -190,6 +197,7 @@ const props = defineProps<{
   secret: string;
   description?: string;
   chain: Prefix;
+  supportMail?: boolean;
 }>();
 
 const { t } = useI18n();
@@ -301,7 +309,7 @@ async function sign() {
       api.tx.nfts.create(...createArgs),
       api.tx.nfts.setCollectionMetadata(nextId, toMint.value),
       api.tx.nfts.setTeam(nextId, MEMO_BOT, accountId.value, accountId.value),
-      // DEV: this does not cover tx fee, we will sponsor it for a whilegs
+      // DEV: this does not cover tx fee, we will sponsor it for a while
       api.tx.balances.transferKeepAlive(MEMO_BOT, totalPayableDeposit.value),
       // DEV: this is for tracking purposes
       api.tx.system.remarkWithEvent("dotmemo.xyz"),
@@ -339,6 +347,7 @@ watch(status, async (status) => {
           mint: toMint.value,
           name: props.name,
           image: imageCid.value,
+          supportMail: Boolean(props.supportMail),
         },
       });
     } catch (error) {

components/dot/text-input.story.vue → app/components/dot/text-input.story.vue

@@ -2,20 +2,12 @@
   <Story title="Dot/Text-Input" auto-props-disabled>
     <Variant title="Default">
       <dot-label class="w-1/4" text="Text input" :error="state.error">
-        <dot-text-input
-          v-model="state.content"
-          placeholder="Placeholder..."
-          :error="state.error"
-        />
+        <dot-text-input v-model="state.content" placeholder="Placeholder..." :error="state.error" />
       </dot-label>
     </Variant>
     <Variant title="With prefix">
       <dot-label class="w-1/4" text="Text input" :error="state.error">
-        <dot-text-input
-          v-model="state.content"
-          placeholder="Placeholder..."
-          :error="state.error"
-        >
+        <dot-text-input v-model="state.content" placeholder="Placeholder..." :error="state.error">
           <template #prefix>
             <Icon name="mdi:search-web" class="text-k-grey" size="24" />
           </template>
@@ -24,11 +16,7 @@
     </Variant>
     <Variant title="With suffix">
       <dot-label class="w-1/4" text="Text input" :error="state.error">
-        <dot-text-input
-          v-model="state.content"
-          placeholder="Placeholder..."
-          :error="state.error"
-        >
+        <dot-text-input v-model="state.content" placeholder="Placeholder..." :error="state.error">
           <template #suffix>
             <Icon name="mdi:eye" class="text-k-grey" size="24" />
           </template>
@@ -37,11 +25,7 @@
     </Variant>
     <Variant title="With prefix & suffix">
       <dot-label class="w-1/4" text="Text input" :error="state.error">
-        <dot-text-input
-          v-model="state.content"
-          placeholder="Placeholder..."
-          :error="state.error"
-        >
+        <dot-text-input v-model="state.content" placeholder="Placeholder..." :error="state.error">
           <template #prefix>
             <Icon name="mdi:search-web" class="text-k-grey" size="24" />
           </template>

components/test-poap.vue → app/components/test-poap.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import { createLogger } from "~/utils/create-logger";
+import { createLogger } from "~~/utils/create-logger";
 
 const logger = createLogger("index");
 logger.info("Hello here");

locales/en-US.json → app/locales/en-US.json

@@ -16,7 +16,10 @@
     "back": "Back",
     "address": "Address",
     "account": "Account",
-    "error": "Error"
+    "error": "Error",
+    "yes": "Yes",
+    "no": "No",
+    "mail": "E-mail"
   },
   "landing": {
     "quote1": "Your memories,",
@@ -52,7 +55,8 @@
     "alreadyClaimed": "You already claimed this MEMO",
     "claimFree": "Claim for free",
     "seeInGallery": "See {name} in gallery",
-    "wantToShare": "Would you like to share it?"
+    "wantToShare": "Would you like to share it?",
+    "enterMailAddress": "Enter E-mail address"
   },
   "create": {
     "title": ".create",
@@ -68,7 +72,8 @@
       "startDate": "Start date",
       "endDate": "End date",
       "quantity": "Quantity",
-      "secret": "MEMO secret"
+      "secret": "MEMO secret",
+      "supportMail": "Support email"
     },
     "dialog": {
       "confirm": "Confirm creation",
@@ -86,7 +91,8 @@
       "proceed": "Proceed to signing",
       "canceled": "Transaction was canceled. Please try again.",
       "settingUp": "Setting up your MEMO",
-      "txProgress": "Transaction in progress. (Status: {status})"
+      "txProgress": "Transaction in progress. (Status: {status})",
+      "supportMail": "Claim by mail?"
     },
     "success": {
       "title": "Purchased",
@@ -103,4 +109,4 @@
     "chooseArtwork": "Drop your artwork",
     "chooseDifferent": "Choose a different artwork"
   }
-}
+}

middleware/user.global.ts → app/middleware/user.global.ts

@@ -1,3 +1,5 @@
+import { createLogger } from "~~/utils/create-logger";
+
 const logger = createLogger("middleware:user.global");
 export default defineNuxtRouteMiddleware(() => {
   if (import.meta.server) return;

pages/claim/[code].vue → app/pages/claim/[code].vue

@@ -33,30 +33,45 @@
 
     <div v-if="!error" class="flex flex-col space-y-3 self-stretch">
       <template v-if="!claimed">
-        <div class="mb-6 flex rounded-full border-2 border-border-color p-2 shadow-text-color">
+        <div
+          class="mb-6 flex flex-col rounded-[28px] border-2 border-border-color p-2 shadow-text-color md:flex-row md:rounded-full"
+        >
           <button
             class="flex-1 rounded-full py-2 text-text-color"
             :class="{
-              'bg-background-color-inverse text-text-color-inverse': showAddressInput,
+              'bg-background-color-inverse text-text-color-inverse': inputMode === 'manual-address',
             }"
-            @click="showAddressInput = true"
+            @click="inputMode = 'manual-address'"
           >
             {{ t("claim.enterAddress") }}
           </button>
           <button
             class="flex-1 rounded-full py-2 text-text-color"
             :class="{
-              'bg-background-color-inverse text-text-color-inverse': !showAddressInput,
+              'bg-background-color-inverse text-text-color-inverse': inputMode === 'wallet-address',
             }"
-            @click="showAddressInput = false"
+            @click="inputMode = 'wallet-address'"
           >
             {{ t("claim.connectWallet") }}
           </button>
+          <button
+            class="flex-1 rounded-full py-2 text-text-color"
+            :class="{
+              'bg-background-color-inverse text-text-color-inverse': inputMode === 'mail',
+            }"
+            @click="inputMode = 'mail'"
+          >
+            {{ t("common.mail") }}
+          </button>
         </div>
 
-        <dot-label v-if="showAddressInput" :text="t('claim.enterDOTAddress')">
+        <dot-label v-if="inputMode === 'manual-address'" :text="t('claim.enterDOTAddress')">
           <form class="flex space-x-4" @submit.prevent="onSubmit()">
-            <dot-text-input v-model="manualAddress" :error="addressError" :placeholder="t('common.address')" />
+            <dot-text-input
+              v-model="manualWalletAddress"
+              :error="walletAddressError"
+              :placeholder="t('common.address')"
+            />
             <div>
               <dot-button variant="tertiary" size="large" @click="open()">
                 <template #icon>
@@ -67,7 +82,13 @@
           </form>
         </dot-label>
 
-        <client-only v-if="!showAddressInput">
+        <template v-if="inputMode === 'mail'">
+          <dot-label :text="t('claim.enterMailAddress')">
+            <dot-text-input v-model="mailAddress" :error="mailAddressError" :placeholder="t('common.mail')" />
+          </dot-label>
+        </template>
+
+        <client-only v-if="inputMode === 'wallet-address'">
           <dot-label :text="t('common.account')">
             <dot-connect />
           </dot-label>
@@ -151,36 +172,50 @@
 import QRScannerModal from "~/components/dot/qr-scanner-modal.vue";
 import { DateTime } from "luxon";
 import { useModal } from "vue-final-modal";
+import { isValidEmail } from "~/utils/mail";
 
 const { shareOnTelegram, shareOnX } = useSocials();
 
+const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const accountStore = useAccountStore();
-const manualAddress = ref("");
-const showAddressInput = ref(true);
 
-const { t } = useI18n();
+const inputMode = ref<"mail" | "manual-address" | "wallet-address">("manual-address");
+
+const mailAddress = ref("");
+const mailAddressError = ref("");
+watch(mailAddress, (mail) => {
+  if (!isValidEmail(mail)) {
+    mailAddressError.value = "E-mail address is not valid";
+  } else {
+    mailAddressError.value = "";
+  }
+});
 
-watch(showAddressInput, (show) => {
+const manualWalletAddress = ref("");
+const showWalletAddressInput = computed(() => inputMode.value === "manual-address");
+watch(showWalletAddressInput, (show) => {
   if (!show) {
     claimFailed.value = false;
   }
 });
 
-const address = computed(() => (showAddressInput.value ? manualAddress.value : accountStore.selected?.address));
+const walletAddress = computed(() =>
+  showWalletAddressInput.value ? manualWalletAddress.value : accountStore.selected?.address,
+);
 
-const addressError = ref("");
-watch(address, (address) => {
+const walletAddressError = ref("");
+watch(walletAddress, (address) => {
   claimFailed.value = false;
   if (!address) {
-    addressError.value = "Address is required";
+    walletAddressError.value = "Address is required";
     return;
   }
-  addressError.value = isValidSubstrateAddress(address ?? "") ? "" : "Invalid address";
+  walletAddressError.value = isValidSubstrateAddress(address ?? "") ? "" : "Invalid address";
 });
 
-const canClaim = computed(() => address.value && !addressError.value);
+const canClaim = computed(() => walletAddress.value && !walletAddressError.value);
 
 const { data, status, error } = await useFetch("/api/code", {
   query: { code: route.params.code },
@@ -199,15 +234,15 @@ const { open } = useModal({
   component: QRScannerModal,
   attrs: {
     onScan(data: string) {
-      manualAddress.value = data;
+      manualWalletAddress.value = data;
     },
   },
 });
 
 const SHARE_MESSAGE = "I just claimed a new MEMO on dotmemo.xyz! 🎉";
 
 const claim = async () => {
-  if (!address.value) return;
+  if (!walletAddress.value) return;
   if (!canClaim.value) return;
 
   try {
@@ -218,7 +253,7 @@ const claim = async () => {
       method: "POST",
       body: {
         code: route.params.code,
-        address: address.value,
+        ...(inputMode.value === "mail" ? { email: mailAddress.value } : { address: walletAddress.value }),
       },
     });