feat: Create select page into modal

components/create/CreateModal.vue

@@ -0,0 +1,102 @@
+<template>
+  <NeoModal
+    append-to-body
+    :value="isModalActive"
+    @close="isModalActive = false"
+  >
+    <NeoModalHead
+      :title="$t('create')"
+      @close="isModalActive = false"
+    />
+    <div class=" px-6 pt-6 pb-5">
+      <div class="space-y-4">
+        <div
+          v-for="item in createOptionsConfig"
+          :key="item.path"
+          :data-testid="item.testId"
+          class="cursor-pointer max-w-[316px] w-full bg-k-grey-light border border-k-grey-light hover:bg-blue-light-cards hover:border-k-blue-hover px-[20px] py-2 flex items-center group"
+          @click="onClickCreateOption(item.path)"
+        >
+          <KIcon
+            :name="item.icon"
+            size="medium"
+            class="text-k-grey group-hover:text-k-blue"
+          />
+          <div class="text-left ml-4">
+            <div class="">
+              {{ item.title }}
+            </div>
+            <div class="text-sm text-k-grey">
+              {{ item.description }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="text-center text-sm text-k-grey mt-[20px]">
+        {{ $t('mint.modal.availableOn', ['Ahp', 'Ahk']) }}
+      </div>
+    </div>
+  </NeoModal>
+</template>
+
+<script setup lang="ts">
+import { NeoModal, NeoModalHead } from '@kodadot1/brick'
+
+type CreateConfig = {
+  path: string
+  icon: string
+  title: string
+  description: string
+  testId?: string
+}
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const { doAfterLogin } = useDoAfterlogin()
+const { urlPrefix } = usePrefix()
+const { $i18n } = useNuxtApp()
+const isModalActive = computed({
+  get: () => props.modelValue,
+  set: value => emit('update:modelValue', value),
+})
+
+const onClickCreateOption = (path: string) => {
+  isModalActive.value = false
+  doAfterLogin({
+    onLoginSuccess: () => {
+      navigateTo({ path })
+    },
+  })
+}
+
+const createOptionsConfig = computed<CreateConfig[]>(() => [
+  {
+    path: '/create/nft',
+    icon: 'i-mdi:image-outline',
+    title: $i18n.t('mint.modal.createSingle'),
+    description: $i18n.t('mint.modal.createSingleDesc'),
+    testId: 'create-landing-single-nft-button',
+  },
+  {
+    path: `/${urlPrefix}/massmint`,
+    icon: 'i-mdi:image-multiple-outline',
+    title: $i18n.t('mint.modal.createMultiple'),
+    description: $i18n.t('mint.modal.createMultipleDesc'),
+    testId: 'create-landing-multiple-nft-button',
+  },
+  {
+    path: '/create/collection',
+    icon: 'i-mdi:folder-open',
+    title: $i18n.t('mint.modal.createCollection'),
+    description: $i18n.t('mint.modal.createCollectionDesc'),
+    testId: 'create-landing-collection-button',
+  },
+])
+</script>

components/navbar/CreateDropdown.vue

@@ -1,21 +1,30 @@
 <template>
   <div>
-    <nuxt-link
+    <div
       data-testid="classic"
-      :to="`/${urlPrefix}/create`"
       class="navbar-item"
-      @click="emit('select')"
+      @click="handleButtonClick"
     >
       {{ $t('create') }}
-    </nuxt-link>
+    </div>
+    <CreateModal
+      v-model="isModalActive"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
+import CreateModal from '@/components/create/CreateModal.vue'
+
 defineProps<{
   chain: string
 }>()
 const emit = defineEmits(['select'])
 
-const { urlPrefix } = usePrefix()
+const isModalActive = ref(false)
+
+const handleButtonClick = () => {
+  isModalActive.value = true
+  emit('select')
+}
 </script>

i18n/locales/en.json

@@ -1204,21 +1204,21 @@
       "show": "Show advanced settings",
       "sync": "Sync editions to {0}"
     },
-    "landing": {
-      "collection": "Create A Collection For Your NFTs",
-      "heading": "What Do You Wish To Create?",
-      "massNft": "Multiple NFTs",
-      "massNftDesc": "Create and mint multiple different NFTs at once",
-      "nft": "Create awesome NFTs from your art and add them to your existing collection",
-      "singleNft": "Single NFT",
-      "singleNftDesc": "Create and mint a single original NFT (can have more copies)"
-    },
     "listForSale": "List NFT for sale",
     "listWithRoyalty": "Add royalty",
     "mass": "NFT mass minter",
     "mintCollectionSuccess": "Collection {name} Saved in block {block}",
     "mintNFTSuccess": "NFT {name} Saved in block {block}",
     "mintType": "Mint Type",
+    "modal": {
+      "availableOn": "Available on {0} and {1}",
+      "createCollection": "Create Collection",
+      "createCollectionDesc": "Organize your NFTs together",
+      "createMultiple": "Create Multiple NFTs",
+      "createMultipleDesc": "Batch creation in one transaction",
+      "createSingle": "Create Single NFT",
+      "createSingleDesc": "One-of-One, unique token"
+    },
     "nfsw": "Explicit content (NSFW)",
     "nfswMessage": "Set your collection as explicit and sensitive content.",
     "nft": {

libs/ui/src/scss/tailwind.scss

@@ -70,6 +70,7 @@
     --green-border-color: #04af00;
     --blue-accent-bg-color: #b6cbff;
     --blue-light-hover-color: #e8edfb;
+    --blue-light-cards: #e9eefc;
     --card-hover-opacity: 0.85;
     --separator-line-color: #cccccc;
     --toggle-primary: #ff7ac3;

libs/ui/tailwind.config.js

@@ -70,6 +70,7 @@ module.exports = {
         'purple-light-color': 'var(--purple-light-color)',
         'purple-dark-color': 'var(--purple-dark-color)',
         'steps-active-color': 'rgb(var(--steps-active-color) / <alpha-value>)',
+        'blue-light-cards': 'var(--blue-light-cards)',
 
         'neutral': {
           1: '#ffffff',

tests/e2e/createnft.spec.ts

@@ -1,16 +1,13 @@
 import { expect, test } from './fixtures'
 
-const CREATE_NFT_PATH = '/ahk/create'
-
 test('Create NFT', async ({ page, Commands }) => {
   const numOfCopies = 5
   // Login and navigation
   await test.step('Login and navigate trough create single nft menus', async () => {
     await Commands.e2elogin()
-    await page.goto(CREATE_NFT_PATH)
     await Commands.acceptCookies()
-    await page.getByTestId('create-landing-nft-button').click()
-    await expect(page).toHaveURL(`${CREATE_NFT_PATH}?select=nft`)
+    await page.getByTestId('classic').click()
+    await page.waitForTimeout(1000)
     await page.getByTestId('create-landing-single-nft-button').click()
   })