Merge branch 'main' into feature/ui-multi-royalties

components/balance/MultipleBalances.vue

@@ -31,10 +31,10 @@
  </div>
 
  <div class="has-text-right is-flex-grow-2">
- {{ token.details?.balance }}
+ {{ formatNumber(token.details?.balance) }}
  </div>
  <div class="has-text-right is-flex-grow-2">
- ${{ delimiter(token.details?.usd || '0') }}
+ ${{ formatNumber(token.details?.usd || '0') }}
  </div>
  </div>
  </div>
@@ -48,7 +48,9 @@
  <hr class="my-2" />
  <p class="is-flex is-justify-content-space-between is-align-items-flex-end">
  <span class="is-size-7"> {{ $i18n.t('spotlight.total') }}: </span>
- <span class="is-size-6">${{ delimiter(identityStore.getTotalUsd) }}</span>
+ <span class="is-size-6"
+ >${{ formatNumber(identityStore.getTotalUsd) }}</span
+ >
  </p>
  </div>
 </template>
@@ -60,8 +62,7 @@ import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'
 import { CHAINS, ENDPOINT_MAP } from '@kodadot1/static'
 import { NeoSkeleton } from '@kodadot1/brick'
 import { balanceOf } from '@kodadot1/sub-api'
-
-import format from '@/utils/format/balance'
+import format, { formatNumber } from '@/utils/format/balance'
 import { useFiatStore } from '@/stores/fiat'
 import { calculateExactUsdFromToken } from '@/utils/calculation'
 import { getAssetIdByAccount } from '@/utils/api/bsx/query'
@@ -115,16 +116,6 @@ const currentNetwork = computed(() =>
  isTestnet.value ? 'test-network' : 'main-network'
 )
 
-function delimiter(amount: string | number) {
- const formatAmount = typeof amount === 'number' ? amount.toString() : amount
- const number = parseFloat(formatAmount.replace(/,/g, ''))
-
- return number.toLocaleString('en-US', {
- minimumFractionDigits: 0,
- maximumFractionDigits: 2,
- })
-}
-
 const fiatStore = useFiatStore()
 function calculateUsd(amount: string, token = 'KSM') {
  if (!amount) {
@@ -174,16 +165,15 @@ async function getBalance(chainName: string, token = 'KSM', tokenId = 0) {
  selectedTokenId = await getAssetIdByAccount(api, prefixAddress)
  }
 
- const balance = delimiter(currentBalance)
- const usd = calculateUsd(balance, token)
+ const usd = calculateUsd(currentBalance, token)
 
  identityStore.setMultiBalances({
  address: defaultAddress,
  chains: {
  [chainName]: {
  [token.toLowerCase()]: {
  address: prefixAddress,
- balance,
+ balance: currentBalance,
  nativeBalance,
  usd,
  selected: selectedTokenId === String(tokenId),

components/common/ConnectWallet/WalletAssetMenu.vue

@@ -8,14 +8,14 @@
  v-safe-href="menu.to"
  class="wallet-asset-menu">
  <span>{{ menu.label }}</span>
- <NeoIcon icon="angle-right" class="has-text-grey" />
+ <NeoIcon icon="angle-right" size="medium" class="has-text-grey" />
  </a>
  </div>
  <div
- class="wallet-asset-footer is-flex is-justify-content-space-between py-4 is-size-7 has-text-grey">
+ class="wallet-asset-footer is-flex is-justify-content-space-between py-5 is-size-7 has-text-grey">
  <!-- light/dark mode -->
- <div @click="toggleColorMode">
- <NeoIcon icon="circle-half-stroke" />
+ <div class="is-align-items-center" @click="toggleColorMode">
+ <NeoIcon icon="circle-half-stroke" custom-size="fa-2x" />
  <span v-if="isDarkMode">{{ $t('profileMenu.lightMode') }}</span>
  <span v-else>{{ $t('profileMenu.darkMode') }}</span>
  </div>
@@ -24,8 +24,10 @@
  <div data-cy="sidebar-language">
  <NeoDropdown position="top-left" aria-role="menu" mobile-modal>
  <template #trigger>
- <NeoIcon icon="globe" />
- <span>{{ $t('profileMenu.language') }}</span>
+ <div class="is-flex is-align-items-center">
+ <NeoIcon icon="globe" custom-size="fa-2x" class="mr-1" />
+ <span>{{ $t('profileMenu.language') }}</span>
+ </div>
  </template>
 
  <NeoDropdownItem
@@ -42,10 +44,10 @@
  </div>
 
  <!-- settings -->
- <a href="/settings" class="has-text-grey">
- <NeoIcon icon="gear" />
+ <nuxt-link to="/settings" class="has-text-grey is-align-items-center">
+ <NeoIcon icon="gear" custom-size="fa-2x" />
  <span>{{ $t('settings') }}</span>
- </a>
+ </nuxt-link>
  </div>
  </div>
 </template>

components/gallery/GalleryItem.vue

@@ -176,7 +176,7 @@ import GalleryItemAction from './GalleryItemAction/GalleryItemAction.vue'
 import GalleryItemPreviewer from './GalleryItemPreviewer.vue'
 import { convertMarkdownToText } from '@/utils/markdown'
 import { exist } from '@/utils/exist'
-import { sanitizeIpfsUrl } from '@/utils/ipfs'
+import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
 import { generateNftImage } from '@/utils/seoImageGenerator'
 import { formatBalanceEmptyOnZero } from '@/utils/format/balance'
 import { MediaType } from '@/components/rmrk/types'
@@ -234,9 +234,11 @@ const hasAnimatedResources = computed(
  nftResources.value[1].animation
 )
 
-const previewItemSrc = computed(
- () => (hasResources.value && activeCarouselImage.value) || nftImage.value
-)
+const previewItemSrc = computed(() => {
+ const baseUrl =
+ (hasResources.value && activeCarouselImage.value) || nftImage.value
+ return baseUrl ? toOriginalContentUrl(baseUrl) : baseUrl
+})
 
 const onNFTBought = () => {
  activeTab.value = tabs.activity

components/gallery/GalleryItemTabsPanel/GalleryItemActivityTable.vue

@@ -103,7 +103,10 @@ import {
  NeoTooltip,
 } from '@kodadot1/brick'
 import { formatToNow } from '@/utils/format/time'
-import formatBalance, { withoutDigitSeparator } from '@/utils/format/balance'
+import formatBalance, {
+ formatNumber,
+ withoutDigitSeparator,
+} from '@/utils/format/balance'
 import { parseDate } from '@/utils/datetime'
 import { getApproximatePriceOf } from '@/utils/coingecko'
 
@@ -169,10 +172,10 @@ watchEffect(() => {
 
 const formatPrice = (price) => {
  const tokenAmount = formatBalance(price, decimals.value, false)
- const flatPrice = `${Math.round(
+ const flatPrice = `${formatNumber(
  Number(withoutDigitSeparator(tokenAmount)) * tokenPrice.value
  )}`
- return [tokenAmount, flatPrice]
+ return [formatNumber(tokenAmount), flatPrice]
 }
 </script>
 <style lang="scss" scoped>

components/rmrk/service/scheme.ts

@@ -293,26 +293,23 @@ export const computeAndUpdateCollection = (
  }
 }
 
-export const mergeCollection = (
- collection: Collection,
- metadata: CollectionMetadata,
+type MergedData<T> = T extends Collection
+ ? CollectionWithMeta
+ : T extends NFT
+ ? NFTWithMeta
+ : never
+
+export const mergeNFTCollection = <T extends Collection | NFT>(
+ item: T,
+ metadata: T extends Collection ? CollectionMetadata : NFTMetadata,
  shouldSanitize = false
-): CollectionWithMeta => ({
- ...collection,
- ...metadata,
- image: shouldSanitize
- ? sanitizeIpfsUrl(metadata.image || '')
- : metadata.image,
-})
-
-export const mergeNFT = (
- nft: NFT,
- metadata: NFTMetadata,
- shouldSanitize = false
-): NFTWithMeta => ({
- ...nft,
- ...metadata,
- image: shouldSanitize
- ? sanitizeIpfsUrl(metadata.image || '')
- : metadata.image,
-})
+): MergedData<T> => {
+ const merged = {
+ ...item,
+ ...metadata,
+ image: shouldSanitize
+ ? sanitizeIpfsUrl(metadata.image || '')
+ : metadata.image,
+ }
+ return merged as unknown as MergedData<T>
+}