Merge branch 'main' into neomessage-tailwindcss

components/collection/unlockable/UnlockableCollectionInfo.vue

@@ -23,7 +23,6 @@
           rounded
           :tag="NuxtLink"
           :to="`/${urlPrefix}/collection/${collectionId}`"
-          target="_blank"
           icon="arrow-right">
           <span>View Collection</span>
         </NeoButton>

components/common/ConnectWallet/WalletAssetMenu.vue

@@ -42,7 +42,7 @@
             :data-testid="`sidebar-language-${lang.value}`"
             :value="lang.value"
             :class="{ 'is-active': $i18n.locale === lang.value }"
-            @click="$i18n.locale = lang.value">
+            @click="setUserLocale(lang.value)">
             <span>{{ lang.flag }} {{ lang.label }}</span>
           </NeoDropdownItem>
         </NeoDropdown>
@@ -63,7 +63,7 @@
 
 <script setup lang="ts">
 import { NeoDropdown, NeoDropdownItem, NeoIcon } from '@kodadot1/brick'
-import { langsFlags } from '@/utils/config/i18n'
+import { langsFlags, setUserLocale } from '@/utils/config/i18n'
 
 const { urlPrefix } = usePrefix()
 const { isBasilisk } = useIsChain(urlPrefix)

components/navbar/MobileLanguageOption.vue

@@ -13,13 +13,13 @@
 </template>
 
 <script lang="ts" setup>
-import { langsFlags } from '@/utils/config/i18n'
+import { langsFlags, setUserLocale } from '@/utils/config/i18n'
 
 const { $i18n } = useNuxtApp()
 const emit = defineEmits(['closeLanguageOption', 'closeMobileSubMenu'])
 
 const setUserLang = (value: string) => {
-  $i18n.locale.value = value
+  setUserLocale(value)
   emit('closeLanguageOption')
   emit('closeMobileSubMenu')
 }

components/navbar/ProfileDropdown.vue

@@ -59,7 +59,7 @@
         aria-role="listitem"
         :value="lang.value"
         :class="{ 'is-active': $i18n.locale === lang.value }"
-        @click="$i18n.locale = lang.value">
+        @click="setUserLocale(lang.value)">
         <span>{{ lang.flag }} {{ lang.label }}</span>
       </NeoDropdownItem>
     </NeoDropdown>
@@ -70,7 +70,10 @@
 import { NeoDropdown, NeoDropdownItem, NeoIcon } from '@kodadot1/brick'
 import Avatar from '@/components/shared/Avatar.vue'
 import { useIdentityStore } from '@/stores/identity'
-import { langsFlags as langsFlagsList } from '@/utils/config/i18n'
+import {
+  langsFlags as langsFlagsList,
+  setUserLocale,
+} from '@/utils/config/i18n'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
 import ConnectWalletButton from '@/components/shared/ConnectWalletButton.vue'
 

components/teleport/Teleport.vue

@@ -96,6 +96,21 @@
       >
     </div>
 
+    <a
+      v-if="insufficientExistentialDeposit"
+      v-safe-href="
+        `https://support.polkadot.network/support/solutions/articles/65000168651-what-is-the-existential-deposit`
+      "
+      target="_blank"
+      class="has-text-danger">
+      {{
+        $t('teleport.insufficientExistentialDeposit', [
+          targetExistentialDepositAmount,
+          currency,
+        ])
+      }}
+    </a>
+
     <NeoButton
       :label="teleportLabel"
       size="large"
@@ -146,6 +161,7 @@ import { NeoButton, NeoField } from '@kodadot1/brick'
 import { blockExplorerOf } from '@/utils/config/chain.config'
 import { simpleDivision } from '@/utils/balance'
 import { useFiatStore } from '@/stores/fiat'
+import { existentialDeposit } from '@kodadot1/static'
 
 const {
   chainBalances,
@@ -176,6 +192,12 @@ const nativeAmount = computed(() =>
   Math.floor(amount.value * Math.pow(10, currentTokenDecimals.value)),
 )
 
+const targetExistentialDepositAmount = computed(() =>
+  Number(
+    targetExistentialDeposit.value / Math.pow(10, targetTokenDecimals.value),
+  ),
+)
+
 const amountToTeleport = computed(() =>
   Math.max(nativeAmount.value - teleportFee.value, 0),
 )
@@ -186,6 +208,18 @@ const recieveAmount = computed(() =>
   formatBalance(amountToTeleport.value, currentTokenDecimals.value, false),
 )
 
+const targetExistentialDeposit = computed(
+  () => existentialDeposit[chainToPrefixMap[toChain.value]],
+)
+
+const insufficientExistentialDeposit = computed(() => {
+  return Boolean(
+    targetExistentialDeposit.value &&
+      amountToTeleport.value &&
+      targetExistentialDeposit.value > amountToTeleport.value,
+  )
+})
+
 const teleportLabel = computed(() => {
   if (insufficientBalance.value) {
     return $i18n.t('teleport.insufficientBalance', [currency])
@@ -289,6 +323,8 @@ const currentTokenDecimals = computed(() =>
   getChainTokenDecimals(fromChain.value),
 )
 
+const targetTokenDecimals = computed(() => getChainTokenDecimals(toChain.value))
+
 const toChainLabel = computed(() =>
   getChainName(chainToPrefixMap[toChain.value]),
 )

libs/static/src/chains.ts

@@ -86,3 +86,12 @@ export const chainList = (): Option[] => {
     value: prefix,
   }))
 }
+
+export const existentialDeposit: Record<Prefix, number> = {
+  ksm: 333333333,
+  rmrk: 333333333,
+  ahk: 33333333,
+  dot: 10000000000,
+  ahp: 1000000000,
+  bsx: 1000000000000,
+}

libs/ui/src/components/NeoNotification/NeoNotification.vue

@@ -8,41 +8,31 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../scss/_theme.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_expressions.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_variables.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_animations.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_helpers.scss';
 @import '@oruga-ui/oruga-next/src/scss/components/_notification.scss';
 
 .o-notices {
-  top: 4.5rem;
+  @apply top-[4.5rem];
 
   .o-notification {
-    padding: 1rem 2rem;
+    @apply py-4 px-8;
 
     &--component {
-      padding: 0 !important;
-      background-color: unset;
+      @apply p-0 #{!important};
+      @apply bg-[unset];
     }
   }
 }
 
 .is-neo-toast {
-  font-size: 12px;
-  border-radius: 0;
-  padding: 0.5rem 1rem !important;
+  @apply text-xs rounded-none bg-background-color border-default border-border-color shadow-primary text-text-color;
+  @apply py-2 px-4 #{!important};
 
-  @include ktheme() {
-    background-color: theme('background-color');
-    border: 1px solid theme('border-color');
-    box-shadow: theme('primary-shadow');
-    color: theme('text-color');
-    -webkit-box-shadow: theme('primary-shadow');
-
-    &:hover {
-      background-color: theme('k-accentlight');
-    }
+  &:hover {
+    @apply bg-k-accent-light;
   }
 }
 </style>

libs/ui/src/components/NeoPagination/NeoPagination.vue

@@ -13,16 +13,13 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../scss/_theme.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_expressions.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_variables.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_animations.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/_helpers.scss';
 @import '@oruga-ui/oruga-next/src/scss/components/_pagination.scss';
 
 .o-pag__link--current {
-  @include ktheme() {
-    background: theme('k-primary');
-  }
+  @apply bg-k-primary;
 }
 </style>

libs/ui/src/components/NeoRadio/NeoRadioButton.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="control neo-radio-button" :class="{ 'is-expanded': expanded }">
+  <div class="neo-radio-button">
     <label
       ref="label"
-      class="button"
       :class="labelClass"
       :disabled="disabledNull"
       @click="focus">
@@ -11,6 +10,7 @@
         ref="input"
         v-model="computedValue"
         type="radio"
+        class="hidden"
         :disabled="disabled"
         :required="required"
         :name="name"
@@ -33,7 +33,6 @@ export default {
       type: String,
       default: 'is-primary',
     },
-    expanded: Boolean,
     rounded: Boolean,
   },
   data() {
@@ -68,36 +67,17 @@ export default {
 }
 </script>
 
-<style lang="scss">
-@import '../../scss/_theme.scss';
-@import '../../scss/variable.scss';
-
+<style lang="scss" scoped>
 .neo-radio-button {
-  input[type='radio'] {
-    display: none;
-  }
-
   label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.button {
-      text-transform: capitalize;
-      @include ktheme() {
-        border-color: theme('background-color-inverse');
-      }
-    }
+    @apply flex items-center justify-center text-base/normal h-10 rounded py-button-y px-button-x bg-background-color cursor-pointer capitalize border-default border-background-color-inverse;
 
     &.is-selected {
-      @include ktheme() {
-        color: theme('text-color-inverse');
-        background-color: theme('background-color-inverse');
-      }
+      @apply text-text-color-inverse bg-background-color-inverse;
     }
 
     &.is-rounded {
-      border-radius: $radius-rounded;
+      @apply rounded-full;
     }
   }
 }

libs/ui/tailwind.config.js

@@ -88,6 +88,10 @@ module.exports = {
         'icon-spin':
           'icon-spin infinite linear var(--oruga-icon-spin-duration, 1.5s)',
       },
+      padding: {
+        'button-x': 'calc(0.75em - 1px)',
+        'button-y': 'calc(0.5em - 1px)',
+      },
     },
   },
   plugins: [],

locales/en.json

@@ -1084,7 +1084,8 @@
     "congratsSupport": "Congratulations for supporting",
     "tweetDonation": "Tweet about your awesome donation",
     "donationSentTo": "Your donation will be sent to:",
-    "ownerMessage": "(You Are Owner)"
+    "ownerMessage": "(You Are Owner)",
+    "insufficientExistentialDeposit": "Sending less than the required Existential Deposit amount will result in fund loss, min value to send is [ {0} + fees ] {1}"
   },
   "preferences": {
     "basic": "basic user interface",

pages/[prefix]/drops/index.vue

@@ -10,4 +10,8 @@ useSeoMeta({
   description: 'View all drops',
   ogUrl: route.path,
 })
+
+definePageMeta({
+  layout: 'no-footer',
+})
 </script>

plugins/i18n.ts

@@ -0,0 +1,5 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('app:beforeMount', (app) => {
+    app.$nuxt.$i18n.locale.value = usePreferencesStore().getUserLocale
+  })
+})

stores/preferences.ts

@@ -36,6 +36,7 @@ interface State {
   hasCarbonOffset: boolean
   // Mass Mint
   visitedOnboarding: boolean
+  userLocale: string
 }
 
 export const usePreferencesStore = defineStore('preferences', {
@@ -72,6 +73,7 @@ export const usePreferencesStore = defineStore('preferences', {
     visitedOnboarding: false,
     firstTimeAutoTeleport: true,
     subscribedToNewsletter: false,
+    userLocale: 'en',
   }),
   getters: {
     getsidebarFilterCollapse: (state) => state.sidebarFilterCollapseOpen,
@@ -99,6 +101,7 @@ export const usePreferencesStore = defineStore('preferences', {
     getVisitedOnboarding: (state) => state.visitedOnboarding,
     getFirstTimeAutoTeleport: (state) => state.firstTimeAutoTeleport,
     getSubscribedToNewsletter: (state) => state.subscribedToNewsletter,
+    getUserLocale: (state) => state.userLocale,
   },
   actions: {
     setSidebarFilterCollapse(payload) {
@@ -196,6 +199,9 @@ export const usePreferencesStore = defineStore('preferences', {
     setSubscribedToNewsletter(subscribed: boolean) {
       this.subscribedToNewsletter = subscribed
     },
+    setUserLocale(locale: string) {
+      this.userLocale = locale
+    },
   },
   persist: true,
 })

tests/e2e/footer.spec.ts

@@ -74,7 +74,7 @@ const footerSocialMediaLinks = [
   },
   {
     linkName: 'Reddit',
-    linkAddress: '/r/KodaDot/',
+    linkAddress: 'KodaDot',
   },
 ]
 

utils/config/i18n.ts

@@ -25,6 +25,13 @@ export const langsFlags = [
   },
 ]
 
+export const setUserLocale = (locale: string) => {
+  const { $i18n } = useNuxtApp()
+  const preferenceStore = usePreferencesStore()
+  preferenceStore.setUserLocale(locale)
+  $i18n.locale.value = locale
+}
+
 const md = MarkdownIt({
   breaks: false,
 })