Colection required amount

components/base/SubmitButton.vue

@@ -3,22 +3,26 @@
     <NeoButton
       :size="size"
       :type="type"
-      :icon-left="icon"
+      :icon="icon"
       :disabled="disabled"
       :loading="loading"
       :expanded="expanded"
+      :variant="variant"
       icon-pack="far"
       outlined
       @click.native="$emit('click')">
       <slot>
-        {{ $t(label) }}
+        <span :style="labelStyles">
+          {{ $t(label) }}
+        </span>
       </slot>
     </NeoButton>
   </NeoField>
 </template>
 
 <script setup lang="ts">
 import { NeoButton, NeoField } from '@kodadot1/brick'
+import { NeoButtonVariant } from '@kodadot1/brick'
 
 export interface Props {
   disabled?: boolean
@@ -28,13 +32,21 @@ export interface Props {
   loading?: boolean
   type?: string
   size?: 'small' | 'medium' | 'large'
+  variant?: NeoButtonVariant
+  fontSize: `${number}${'px' | 'rem' | 'em'}` | 'inherit'
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   loading: false,
   disabled: false,
   type: 'is-primary',
-  icon: 'paper-plane',
+  icon: '',
   size: 'medium',
+  variant: 'k-accent',
+  fontSize: 'inherit',
 })
+
+const labelStyles = {
+  'font-size': props.fontSize,
+}
 </script>

components/bsx/Create/CreateCollection.vue

@@ -25,12 +25,21 @@
         <NeoField>
           <MultiPaymentFeeButton :account-id="accountId" :prefix="urlPrefix" />
         </NeoField>
-        <NeoField variant="danger" :message="balanceNotEnoughMessage">
+        <NeoField>
           <SubmitButton
             expanded
-            label="create collection"
+            :label="
+              isBalanceNotEnough
+                ? 'confirmPurchase.notEnoughFuns'
+                : 'create collection'
+            "
             :loading="isLoading"
+            :disabled="isBalanceNotEnough"
+            font-size="16px"
             @click="submit" />
+          <template #message>
+            <CollectionDeposit></CollectionDeposit>
+          </template>
         </NeoField>
       </template>
     </BaseCollectionForm>
@@ -61,6 +70,7 @@ import { BaseCollectionType } from '@/composables/transaction/types'
 import shouldUpdate from '@/utils/shouldUpdate'
 import { Token, getBalance, getDeposit, getFeesToken } from './utils'
 import { NeoField } from '@kodadot1/brick'
+import { COLLECTION_DEPOSIT_BSX } from '@/utils/constants'
 
 const components = {
   Loader: () => import('@/components/shared/Loader.vue'),
@@ -72,6 +82,7 @@ const components = {
   AccountBalance: () => import('@/components/shared/AccountBalance.vue'),
   MultiPaymentFeeButton: () =>
     import('@/components/bsx/specific/MultiPaymentFeeButton.vue'),
+  CollectionDeposit: () => import('@/components/shared/CollectionDeposit.vue'),
   NeoField,
 }
 
@@ -91,19 +102,16 @@ export default class CreateCollection extends mixins(
   public collectionDeposit = ''
   protected id = '0'
   protected attributes: Attribute[] = []
-  protected balanceNotEnough = false
+  protected balanceNotEnough = this.balanceOfToken <= COLLECTION_DEPOSIT_BSX
   public feesToken: Token = 'BSX'
   @Ref('collectionForm') readonly collectionForm
 
   public checkValidity() {
     return this.collectionForm.checkValidity()
   }
 
-  get balanceNotEnoughMessage() {
-    if (this.balanceNotEnough) {
-      return this.$t('tooltip.notEnoughBalance')
-    }
-    return ''
+  get isBalanceNotEnough() {
+    return this.balanceNotEnough
   }
 
   @Watch('accountId', { immediate: true })

components/rmrk/Create/CreateCollection.vue

@@ -38,15 +38,23 @@
       </template>
 
       <template #footer>
-        <NeoField
-          v-if="isLogIn"
-          variant="danger"
-          :message="balanceNotEnoughMessage">
+        <NeoField v-if="isLogIn">
           <SubmitButton
             expanded
-            label="create collection"
+            :label="
+              balanceNotEnough
+                ? 'confirmPurchase.notEnoughFuns'
+                : 'create collection'
+            "
             :loading="isLoading"
+            disabled-icon
+            variant="k-accent"
+            :disabled="balanceNotEnough"
+            font-size="16px"
             @click="submit" />
+          <template #message>
+            <CollectionDeposit></CollectionDeposit>
+          </template>
         </NeoField>
       </template>
     </BaseCollectionForm>
@@ -65,6 +73,8 @@ 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 CollectionDeposit from '@/components/shared/CollectionDeposit.vue'
+import { COLLECTION_DEPOSIT_KSM } from '@/utils/constants'
 
 interface ComponentWithCheckValidity extends Vue {
   checkValidity(): boolean
@@ -83,7 +93,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 +102,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_KSM
 )
 const isMintDisabled = computed(() => balanceNotEnough.value)
 

components/shared/CollectionDeposit.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="message-container is-flex is-justify-content-space-evenly">
+    <NeoIcon icon="info-circle" size="medium" />
+    <span>
+      <i18n path="tooltip.deposit" tag="span">
+        <template #amount>
+          <strong>{{ requiredAmount }}</strong>
+        </template>
+        <template #token>
+          <strong>{{ token }}</strong>
+        </template>
+      </i18n>
+      <a v-safe-href="learnMoreLink" class="learn-more">{{
+        $t('helper.learnMore')
+      }}</a>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoIcon } from '@kodadot1/brick'
+
+import {
+  COLLECTION_DEPOSIT_BSX,
+  COLLECTION_DEPOSIT_KSM,
+} from '@/utils/constants'
+
+const { urlPrefix } = usePrefix()
+
+let token = 'BSX'
+let requiredAmount = COLLECTION_DEPOSIT_BSX
+let learnMoreLink =
+  'https://hello.kodadot.xyz/multi-chain/fees/assethub-fees#polkadot-asset-hub-fees-prev.-statemint'
+
+switch (urlPrefix.value) {
+  case 'rmrk':
+  case 'ksm':
+    learnMoreLink =
+      'https://hello.kodadot.xyz/multi-chain/fees/kusama-fees-rmrk-rmrk2'
+    requiredAmount = COLLECTION_DEPOSIT_KSM
+    token = 'KSM'
+    break
+  case 'bsx':
+    learnMoreLink =
+      'https://hello.kodadot.xyz/multi-chain/fees/assethub-fees#polkadot-asset-hub-fees-prev.-statemint'
+    requiredAmount = COLLECTION_DEPOSIT_BSX
+    token = 'BSX'
+    break
+
+  default:
+    break
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+
+.message-container {
+  gap: 1rem;
+  margin: 0 1rem;
+}
+
+.learn-more {
+  @include ktheme() {
+    color: theme('k-blue') !important;
+  }
+
+  white-space: nowrap;
+}
+</style>

locales/en.json

@@ -538,7 +538,8 @@
     "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",
+    "deposit": "A deposit of {amount} {token} 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,7 @@ 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_KSM = 0.1
+
+export const COLLECTION_DEPOSIT_BSX = 0.0067