feat: add @nuxt/ui

components/buy/Buy.vue

@@ -48,7 +48,7 @@ const { urlPrefix } = usePrefix()
 const shoppingCartStore = useShoppingCartStore()
 const preferencesStore = usePreferencesStore()
 const fiatStore = useFiatStore()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { $i18n } = useNuxtApp()
 
 const { isTransactionSuccessful } = useTransactionSuccessful({

components/codeChecker/issueHint/CodeBlock.vue

@@ -26,7 +26,7 @@ const nw = new Normalizer({
 })
 
 const props = defineProps<{ code: string, lang: string }>()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const normalizedCode = computed(() => nw.normalize(props.code))
 const highlightedCode = computed(() => {
   const html = Prism.highlight(

components/collection/CollectionHeader.vue

@@ -24,7 +24,7 @@ import CollectionBanner from '@/components/collection/CollectionHeader/Collectio
 
 const collectionInfo = ref()
 
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { $i18n } = useNuxtApp()
 const route = useRoute()
 const collectionId = computed(() => route.params.id.toString())

components/collection/HeroButtonRefreshMetadata.vue

@@ -11,7 +11,7 @@ import { NeoDropdownItem } from '@kodadot1/brick'
 import { refreshOdaCollectionTokensMetadata } from '@/services/oda'
 
 const route = useRoute()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { urlPrefix } = usePrefix()
 const { $i18n } = useNuxtApp()
 

components/collection/HeroButtons.vue

@@ -143,7 +143,7 @@ const route = useRoute()
 const { isCurrentOwner } = useAuth()
 const { urlPrefix } = usePrefix()
 const { $i18n } = useNuxtApp()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { shareOnX, shareCollectionOnFarcaster } = useSocialShare()
 
 const collectionId = computed(() => route.params.id.toString())

components/collection/drop/HolderOfGenerative.vue

@@ -66,7 +66,7 @@ import useAutoTeleportModal from '@/composables/autoTeleport/useAutoTeleportModa
 
 const { $i18n, $consola } = useNuxtApp()
 const { urlPrefix } = usePrefix()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { isLogIn } = useAuth()
 const { doAfterLogin } = useDoAfterlogin()
 const {

components/collection/drop/PaidGenerative.vue

@@ -23,7 +23,7 @@ import { doAfterCheckCurrentChainVM } from '@/components/common/ConnectWallet/op
 const { urlPrefix } = usePrefix()
 const { doAfterLogin } = useDoAfterlogin()
 const { $i18n, $consola } = useNuxtApp()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { isLogIn } = useAuth()
 const { openListingCartModal } = useListingCartModal({
   clearItemsOnBeforeUnmount: true,

components/collection/drop/modal/shared/SuccessfulDrop.vue

@@ -31,7 +31,7 @@ const props = defineProps<{
 }>()
 
 const { $i18n } = useNuxtApp()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { urlPrefix } = usePrefix()
 const { accountId } = useAuth()
 const { getCollectionFrameUrl } = useSocialShare()

components/common/ConnectWallet/ConnectSubstrate.vue

@@ -101,7 +101,7 @@ import {
 
 const emits = defineEmits(['select'])
 
-const { toast } = useToast()
+const { toast } = useToastOruga()
 
 const forceWalletSelect = ref(false)
 const wallets = ref<BaseDotsamaWallet[]>([])

components/common/ConnectWallet/WalletAssetIdentity.vue

@@ -42,7 +42,7 @@
 import { NeoIcon } from '@kodadot1/brick'
 import { useIdentityStore } from '@/stores/identity'
 
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { neoModal } = useProgrammatic()
 const { getPrefixByAddress } = useAddress()
 const identityStore = useIdentityStore()

components/common/ShareDropdown.vue

@@ -76,7 +76,7 @@ const props = withDefaults(
 
 const route = useRoute()
 const { $i18n } = useNuxtApp()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { isMobile } = useViewport()
 const { shareOnX } = useSocialShare()
 const propsSharingContent = computed(() => props.sharingContent)

components/common/successfulModal/ShareSocialsSection.vue

@@ -91,7 +91,7 @@ const props = withDefaults(
   },
 )
 
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { shareOnX, shareOnTelegram, shareOnFarcaster } = useSocialShare()
 
 const handleShareOnX = () => {

components/common/successfulModal/TransactionSection.vue

@@ -64,7 +64,7 @@ const props = defineProps<{
   status: TransactionStatus
 }>()
 
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { getTransactionUrl } = useExplorer()
 const { urlPrefix } = usePrefix()
 

components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue

@@ -77,7 +77,7 @@ import type { NFT } from '@/types'
 import type { Abi } from '@/composables/transaction/types'
 
 const { $i18n, $consola } = useNuxtApp()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { accountId } = useAuth()
 const { transaction, isLoading, status } = useTransaction()
 const { listNftByNftWithMetadata } = useListingCartModal()

components/identity/module/IdentityLink.vue

@@ -39,7 +39,7 @@ const props = defineProps<{
   address?: Address
   showClipboard?: boolean
 }>()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { urlPrefix } = usePrefix()
 
 const explorerLink = computed(() =>

components/identity/module/IdentityPopoverHeader.vue

@@ -52,6 +52,6 @@ const shortenedAddress = inject('shortenedAddress') as string
 
 const identity = inject<{ [x: string]: string }>('identity')
 const { urlPrefix } = usePrefix()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { accountId } = useAuth()
 </script>

components/profile/FollowButton.vue

@@ -19,7 +19,7 @@ const { $i18n } = useNuxtApp()
 const { accountId } = useAuth()
 const { getSignaturePair } = useVerifyAccount()
 const isHovered = useElementHover(buttonRef)
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { doAfterLogin } = useDoAfterlogin()
 
 const emit = defineEmits(['follow:success', 'follow:fail', 'unfollow:success'])

components/profile/ProfileDetail.vue

@@ -510,7 +510,7 @@ const socials = {
 
 const route = useRoute()
 const { $i18n } = useNuxtApp()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { replaceUrl } = useReplaceUrl()
 const { accountId, isCurrentOwner } = useAuth()
 const { urlPrefix, client } = usePrefix()

components/profile/follow/UserRow.vue

@@ -61,7 +61,7 @@ import shortAddress from '@/utils/shortAddress'
 const { accountId } = useAuth()
 const { $i18n } = useNuxtApp()
 const { doAfterLogin } = useDoAfterlogin()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { getSignaturePair } = useVerifyAccount()
 
 const props = defineProps<{

components/shared/TransactionLoader.vue

@@ -132,7 +132,7 @@ const emit = defineEmits(['close', 'update:modelValue'])
 const { $i18n } = useNuxtApp()
 const { urlPrefix } = usePrefix()
 const { estimatedTimes } = useBlockTime()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 
 const estimatedTimeLeft = computed(
   () => estimatedTimes.value[props.status] || 'few',

components/transfer/Transfer.vue

@@ -446,7 +446,7 @@ const { getBalance } = useBalance()
 const { fetchFiatPrice, getCurrentTokenValue } = useFiatStore()
 const { initTransactionLoader, isLoading, resolveStatus, status }
   = useTransactionStatus()
-const { toast } = useToast()
+const { toast } = useToastOruga()
 const { getTokenIconBySymbol } = useIcon()
 const { tokens } = useToken()
 const { chainExistentialDeposit } = useExistentialDeposit()

composables/useToast.ts → composables/useToastOruga.ts

@@ -1,5 +1,5 @@
 // vue composables api for toast message function
-export default function useToast() {
+export default function useToastOruga() {
   const { neoNotification } = useProgrammatic()
 
   // toast message function

libs/ui/package.json

@@ -16,7 +16,7 @@
     "autoprefixer": "^10.4.20",
     "histoire": "0.17.6",
     "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.11"
+    "tailwindcss": "^3.4.16"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",

libs/ui/src/scss/tailwind.scss

@@ -130,3 +130,7 @@
     border: 0 solid currentColor;
   }
 }
+
+hr {
+  height: 1px;
+}

libs/ui/tailwind.config.js

@@ -2,7 +2,6 @@
 import defaultTheme from 'tailwindcss/defaultTheme'
 
 module.exports = {
-  content: ['./**/*.{js,vue,ts}', '!./**/node_modules/**'],
   theme: {
     screens: {
       xs: '400px',
@@ -119,10 +118,13 @@ module.exports = {
       fontSize: {
         '3xl': '2rem',
       },
+
+      // aspect ratio disabled from nuxt/ui: https://ui.nuxt.com/getting-started/installation#nuxtjstailwindcss
+      aspectRatio: {
+        auto: 'auto',
+        square: '1 / 1',
+        video: '16 / 9',
+      },
     },
   },
-  plugins: [],
-  corePlugins: {
-    preflight: false,
-  },
 }

netlify.toml

@@ -3,7 +3,7 @@
 
 [build]
   # This will be your default build command.
-  command = "pnpm run generate"
+  command = "pnpm run generate:netlify"
   # This is the directory that you are publishing from.
   publish = "dist"
 
@@ -16,10 +16,10 @@
    targetPort = 9090
 
 [context.deploy-preview]
-command = 'export BASE_URL=$DEPLOY_PRIME_URL && env && pnpm run generate'
+command = 'export BASE_URL=$DEPLOY_PRIME_URL && env && pnpm run generate:netlify'
 
 [context.production]
-command = 'export BASE_URL=$URL && env && pnpm run generate'
+command = 'export BASE_URL=$URL && env && pnpm run generate:netlify'
 
 [[redirects]]
   from = "/*"

nuxt.config.ts

@@ -28,9 +28,20 @@ export default defineNuxtConfig({
     },
   },
 
+  build: {
+    transpile: ['three'],
+  },
+
   vite: {
     build: {
-      sourcemap: true,
+      sourcemap: process.env.NODE_ENV === 'development',
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            '@kodadot1/brick': ['@kodadot1/brick'],
+          },
+        },
+      },
     },
     plugins: [
       svgLoader({
@@ -71,6 +82,7 @@ export default defineNuxtConfig({
               'lodash/orderBy',
               'lodash/sortBy',
               'lodash/sum',
+              'lodash/uniqBy',
               'lodash/unionBy',
               'lodash/uniqBy',
               'lodash/zipWith',
@@ -91,6 +103,7 @@ export default defineNuxtConfig({
               '@web3modal/wagmi/vue',
               '@wagmi/core',
               '@farcaster/auth-client',
+              'viem',
             ],
           }
         : undefined,
@@ -280,8 +293,20 @@ export default defineNuxtConfig({
     '@dargmuesli/nuxt-cookie-control',
     'nuxt-gtag',
     '@nuxt/eslint',
+    '@nuxt/ui',
   ],
 
+  tailwindcss: {
+    exposeConfig: true,
+    configPath: '~/libs/ui/tailwind.config.js',
+    cssPath: '~/libs/ui/src/scss/tailwind.scss',
+    config: {
+      content: [
+        './libs/ui/src/**/*.{js,vue,ts}',
+      ],
+    },
+  },
+
   eslint: {
     config: {
       stylistic: true,

package.json

@@ -28,6 +28,7 @@
     "start": "nuxi preview",
     "start:node": "PORT=9090 node .output/server/index.mjs",
     "generate": "nuxi build",
+    "generate:netlify": "NODE_OPTIONS='--max-old-space-size=8192' nuxi build",
     "lint": "eslint .",
     "lint:quiet": "eslint . --quiet",
     "lint:fix": "eslint . --fix",
@@ -117,6 +118,7 @@
     "@nuxt/content": "^2.13.2",
     "@nuxt/eslint": "^0.3.13",
     "@nuxt/types": "^2.18.1",
+    "@nuxt/ui": "2.20.0",
     "@nuxtjs/color-mode": "^3.5.1",
     "@nuxtjs/device": "^3.2.2",
     "@nuxtjs/google-fonts": "^3.2.0",
@@ -138,11 +140,11 @@
     "husky": "^9.1.6",
     "jsdom": "^19.0.0",
     "lint-staged": "^15.2.10",
-    "nuxt": "^3.13.2",
+    "nuxt": "^3.14.1592",
     "nuxt-gtag": "^1.2.1",
     "postcss": "^8.4.47",
     "sass": "1.77.6",
-    "tailwindcss": "^3.4.11",
+    "tailwindcss": "^3.4.16",
     "vite-svg-loader": "^5.1.0",
     "vitest": "^0.34.6"
   },