Merge branch 'main' of github.com:kodadot/nft-gallery into refactor--replace-neo-icon-4

Author: preschian

assets/styles/components/_search.scss

@@ -79,7 +79,7 @@
       box-shadow: none;
     }
 
-    box-shadow: var(--primary-shadow);
+    box-shadow: var(--primary-shadow) !important;
     border: 1px solid var(--border-color);
     color: rgb(var(--text-color));
     background: var(--background-color);

components/Error.vue

@@ -28,7 +28,7 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    errorCode: number
+    errorCode?: number
     hasImg: boolean
     errorTitle: string
     errorSubtitle: string

components/collection/HeroButtonAddNfts.vue

@@ -18,7 +18,7 @@ const { urlPrefix } = usePrefix()
 
 const addNfts = () => {
   navigateTo({
-    path: `/${urlPrefix.value}/create`,
+    path: `/${urlPrefix.value}/create/nft`,
     query: {
       select: 'nft',
       collectionId: id,

components/collection/drop/RefreshMetadata.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import type { Prefix } from '@kodadot1/static'
-import { refreshOdaCollectionTokensMetadata } from '@/services/oda'
+import { refreshOdaCollection, refreshOdaCollectionTokensMetadata } from '@/services/oda'
 
 const props = defineProps<{
   collectionId: string
@@ -27,6 +27,7 @@ const { $i18n } = useNuxtApp()
 
 const refreshMetadata = () => {
   toast($i18n.t('toast.refreshMetdata'))
+  refreshOdaCollection(props.chain, props.collectionId)
   refreshOdaCollectionTokensMetadata(props.chain, props.collectionId)
 }
 </script>

components/create/Confirm/MintConfirmModal.vue

@@ -53,11 +53,10 @@ import ModalBody from '@/components/shared/modals/ModalBody.vue'
 import type { BaseMintedCollection } from '@/components/base/types'
 import { CreateComponent } from '@/composables/useCreate'
 import { useFiatStore } from '@/stores/fiat'
-import { usePreferencesStore } from '@/stores/preferences'
 import { availablePrefixes } from '@/utils/chain'
 import { calculateBalanceUsdValue } from '@/utils/format/balance'
-import { BASE_FEE } from '@/utils/support'
 import type { AutoTeleportAction } from '@/composables/autoTeleport/types'
+import { calculateFees } from '@/composables/transaction/mintToken/utils'
 
 export type NftInformation = {
   file: Blob | null
@@ -76,7 +75,7 @@ export type ExtendedInformation = NftInformation & {
   networkFee: number
   existentialDeposit: number
   kodadotFee: number
-  kodadotUSDFee: number
+  kodaUSDFee: number
   carbonlessFee: number
   carbonlessUSDFee: number
   totalFee: number
@@ -98,7 +97,6 @@ const { isLogIn, accountId } = useAuth()
 const { urlPrefix } = usePrefix()
 const { $i18n } = useNuxtApp()
 const fiatStore = useFiatStore()
-const preferencesStore = usePreferencesStore()
 
 const { metadataDeposit, collectionDeposit, existentialDeposit, itemDeposit, attributeDeposit } = useDeposit(urlPrefix)
 
@@ -120,22 +118,31 @@ const decimals = computed(() => props.nftInformation.paidToken?.tokenDecimals)
 const tokenPrice = computed(() =>
   Number(fiatStore.getCurrentTokenValue(chainSymbol.value) ?? 0),
 )
-const kodadotFee = computed(
-  () =>
-    ((preferencesStore.hasSupport ? BASE_FEE : 0) / tokenPrice.value)
-    * Math.pow(10, decimals.value),
-)
-const carbonlessFee = computed(
-  () =>
-    ((preferencesStore.hasCarbonOffset && isNFT.value ? BASE_FEE * 2 : 0)
-      / tokenPrice.value)
-      * Math.pow(10, decimals.value),
+const { kodaUSDFee, carbonlessUSDFee: carbonlessUSDFeeValue } = calculateFees()
+
+const carbonlessUSDFee = computed(() => isNFT.value ? carbonlessUSDFeeValue : 0)
+
+const convertUSDFeeToToken = (fee: number) => (fee / tokenPrice.value) * Math.pow(10, decimals.value)
+const kodadotFee = computed(() => convertUSDFeeToToken(kodaUSDFee))
+const carbonlessFee = computed(() => convertUSDFeeToToken(carbonlessUSDFee.value))
+
+const totalFee = computed(() =>
+  deposit.value + carbonlessFee.value + kodadotFee.value + networkFee.value,
 )
-const totalFee = computed(() => {
-  return (
-    deposit.value + carbonlessFee.value + kodadotFee.value + networkFee.value
-  )
-})
+
+const extendedInformation = computed(() => ({
+  ...props.nftInformation,
+  networkFee: networkFee.value,
+  existentialDeposit: deposit.value,
+  kodadotFee: kodadotFee.value,
+  kodaUSDFee: kodaUSDFee,
+  carbonlessFee: carbonlessFee.value,
+  carbonlessUSDFee: carbonlessUSDFee,
+  totalFee: totalFee.value,
+  totalUSDFee: totalUSDFee.value,
+  blockchain: blockchain.value,
+}))
+
 const deposit = computed(
   () =>
     metadataDeposit.value
@@ -160,19 +167,6 @@ const btnLabel = computed(() => {
 })
 const disabled = computed(() => !isLogIn.value)
 
-const extendedInformation = computed(() => ({
-  ...props.nftInformation,
-  networkFee: networkFee.value,
-  existentialDeposit: deposit.value,
-  kodadotFee: kodadotFee.value,
-  kodadotUSDFee: BASE_FEE,
-  carbonlessFee: carbonlessFee.value,
-  carbonlessUSDFee: BASE_FEE * 2,
-  totalFee: totalFee.value,
-  totalUSDFee: totalUSDFee.value,
-  blockchain: blockchain.value,
-}))
-
 const networkFee = computed(() => {
   const extraCallsMultiplier = [
     props.nftInformation.listForSale,

components/create/Confirm/PriceItem.vue

@@ -71,7 +71,7 @@
           </NeoTooltip>
         </div>
         <div class="flex items-center">
-          {{ nft.kodadotUSDFee }} USD ~
+          {{ nft.kodaUSDFee }} USD ~
           <Money
             :value="kodadotFee"
             :unit-symbol="chainSymbol"

components/create/CreateCollection.vue

@@ -21,11 +21,11 @@
       @confirm="handleCreateCollectionConfirmation"
     />
     <form
+      ref="formRef"
       :class="{
         'px-[1.2rem] md:px-8 lg:px-16 py-[3.1rem] sm:py-16 w-full sm:w-1/2 max-w-[40rem] shadow-none lg:shadow-primary lg:border-[1px] lg:border-border-color lg:bg-background-color':
           classColumn,
       }"
-      @submit.prevent="showConfirm"
     >
       <h1 class="title text-3xl mb-7">
         {{ $t('mint.collection.create') }}
@@ -155,10 +155,10 @@
         class="text-base"
         expanded
         :label="submitButtonLabel"
-        native-type="submit"
         size="medium"
         data-testid="collection-create"
         :loading="isLoading"
+        @click="showConfirm"
       />
       <div class="p-4 flex">
         <KIcon
@@ -241,6 +241,7 @@ withDefaults(
 const mintedCollectionInfo = ref<MintedCollectionInfo>()
 const collectionSubscription = ref(() => {})
 const displaySuccessModal = ref(false)
+const formRef = ref<HTMLFormElement>()
 
 // composables
 const { transaction, status, isLoading, isError, blockNumber, txHash }
@@ -253,6 +254,7 @@ const { isTransactionSuccessful } = useTransactionSuccessful({
 const { urlPrefix, setUrlPrefix } = usePrefix()
 const { $consola, $i18n } = useNuxtApp()
 const { isLogIn, accountId } = useAuth()
+const { doAfterLogin } = useDoAfterlogin()
 
 // form state
 const logo = ref<File | null>(null)
@@ -321,12 +323,21 @@ watch(currentChain, () => {
 })
 
 const showConfirm = () => {
-  if (!menus.find(menu => menu.value === currentChain.value)) {
-    openReconnectWalletModal()
-    return
-  }
-  doAfterCheckCurrentChainVM(() => {
-    confirmModal.value = true
+  doAfterLogin({
+    onLoginSuccess: () => {
+      if (formRef.value && !formRef.value.checkValidity()) {
+        formRef.value.reportValidity()
+        return
+      }
+      if (!menus.find(menu => menu.value === currentChain.value)) {
+        openReconnectWalletModal()
+        return
+      }
+      doAfterCheckCurrentChainVM(() => {
+        confirmModal.value = true
+      })
+    },
+
   })
 }