Colection required amount

components/base/SubmitButton.vue

@@ -3,10 +3,11 @@
     <NeoButton
       :size="size"
       :type="type"
-      :icon-left="icon"
+      :icon="disabledIcon ? '' : icon"
       :disabled="disabled"
       :loading="loading"
       :expanded="expanded"
+      :variant="variant"
       icon-pack="far"
       outlined
       @click.native="$emit('click')">
@@ -19,22 +20,27 @@
 
 <script setup lang="ts">
 import { NeoButton, NeoField } from '@kodadot1/brick'
+import { NeoButtonVariant } from '@kodadot1/brick'
 
 export interface Props {
   disabled?: boolean
   expanded?: boolean
+  disabledIcon?: boolean
   icon?: string
   label: string
   loading?: boolean
   type?: string
   size?: 'small' | 'medium' | 'large'
+  variant?: NeoButtonVariant
 }
 
 withDefaults(defineProps<Props>(), {
   loading: false,
   disabled: false,
+  disabledIcon: false,
   type: 'is-primary',
   icon: 'paper-plane',
   size: 'medium',
+  variant: 'k-accent',
 })
 </script>

components/rmrk/Create/CreateCollection.vue

@@ -38,15 +38,26 @@
       </template>
 
       <template #footer>
-        <NeoField
-          v-if="isLogIn"
-          variant="danger"
-          :message="balanceNotEnoughMessage">
+        <NeoField v-if="isLogIn">
           <SubmitButton
             expanded
-            label="create collection"
+            :label="balanceNotEnough ? 'not enough funds' : 'create collection'"
             :loading="isLoading"
+            disabled-icon
+            variant="k-accent"
+            :disabled="balanceNotEnough"
             @click="submit" />
+          <template #message>
+            {{ $t('tooltip.deposit1') }}
+            <strong>{{ COLLECTION_DEPOSIT }} KSM</strong>
+            {{ $t('tooltip.deposit2') }}
+            <a
+              v-safe-href="
+                'https://hello.kodadot.xyz/multi-chain/fees/assethub-fees#polkadot-asset-hub-fees-prev.-statemint'
+              "
+              >Learn more</a
+            >
+          </template>
         </NeoField>
       </template>
     </BaseCollectionForm>
@@ -65,6 +76,7 @@ import SubmitButton from '@/components/base/SubmitButton.vue'
 import { NeoField, NeoInput } from '@kodadot1/brick'
 import { BaseCollectionType } from '@/composables/transaction/types'
 import useLoader from '@/composables/useLoader'
+import { COLLECTION_DEPOSIT } from '@/utils/constants'
 
 interface ComponentWithCheckValidity extends Vue {
   checkValidity(): boolean
@@ -83,7 +95,6 @@ const symbolInput = ref<ComponentWithCheckValidity>()
 const { accountId, balance, isLogIn } = useAuth()
 const { isLoading, status } = useLoader()
 const emit = defineEmits(['created'])
-const { $i18n } = useNuxtApp()
 
 const checkValidity = () => {
   return (
@@ -93,9 +104,8 @@ const checkValidity = () => {
 
 const rmrkId = computed(() => generateId(accountId.value, symbol.value))
 
-const balanceNotEnough = computed(() => Number(balance.value) <= 2)
-const balanceNotEnoughMessage = computed(() =>
-  balanceNotEnough.value ? $i18n.t('tooltip.notEnoughBalance') : ''
+const balanceNotEnough = computed(
+  () => Number(balance.value) <= COLLECTION_DEPOSIT
 )
 const isMintDisabled = computed(() => balanceNotEnough.value)
 
@@ -154,3 +164,15 @@ const submit = async () => {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+
+a {
+  @include ktheme() {
+    color: theme('k-blue') !important;
+  }
+  text-decoration: underline;
+  white-space: nowrap;
+}
+</style>

locales/en.json

@@ -35,6 +35,7 @@
   "facts": "Facts",
   "computed id": "Computed id",
   "create collection": "Create Collection",
+  "not enough funds": "Not Enough Funds",
   "Select collection where do you want mint your token": "Select collection where do you want mint your token",
   "Maximum NFTs in collection": "Maximum NFTs in collection",
   "name": "Name",
@@ -538,7 +539,9 @@
     "smallDisplay": "Small Display",
     "largeDisplay": "Large Display",
     "emptyAddress": "Receiver address cannot be empty",
-    "emptyListAmount": "Amount should be greater than 0"
+    "emptyListAmount": "Amount should be greater than 0",
+    "deposit1": "A deposit of",
+    "deposit2": "is required to create a collection. Please note, this initial deposit is refundable."
   },
   "nft": {
     "carbonless": "This NFT is carbonless",

utils/constants.ts

@@ -109,3 +109,5 @@ export const NFT_SQUID_SORT_COLLECTIONS: string[] = [
 export const MIN_OFFER_PRICE = 0.01
 
 export const EXTERNAL_LINK_WHITELIST = ['*.kodadot.xyz']
+
+export const COLLECTION_DEPOSIT = 0.1