Merge pull request #7609 from kodadot/main

.env.example

@@ -11,5 +11,6 @@ VUE_APP_PERMAFROST_URL=""
 VUE_APP_AR_URL=""
 MATRIX=""
 SUBSQUID_ENDPOINT=""
+RAMP_API_KEY=""
 TRANSAK_API_KEY=""
-TRANSAK_ENV="" #STAGING|PRODUCTION
+TRANSAK_ENV="" #STAGING|PRODUCTION

.eslintrc.js

@@ -5,9 +5,9 @@ module.exports = {
  node: true,
  },
  extends: [
- 'plugin:vue/recommended',
+ 'plugin:vue/vue3-recommended',
  'plugin:@typescript-eslint/recommended',
- 'plugin:vue-scoped-css/recommended',
+ 'plugin:vue-scoped-css/vue3-recommended',
  'prettier',
  ],
  parser: 'vue-eslint-parser',
@@ -16,8 +16,10 @@ module.exports = {
  ecmaVersion: 2022,
  sourceType: 'module',
  },
- plugins: ['vue', 'prettier', '@typescript-eslint', 'unicorn'],
+ plugins: ['prettier', '@typescript-eslint', 'unicorn'],
  rules: {
+ 'prettier/prettier': 'error',
+ 'no-empty-function': 'warn',
  'no-trailing-spaces': 'error',
  'unicorn/no-for-loop': 'error',
  'brace-style': ['error', '1tbs', { allowSingleLine: false }],
@@ -48,6 +50,7 @@ module.exports = {
  ],
  'vue/multi-word-component-names': 'off',
  '@typescript-eslint/no-unused-vars': 'error',
+ '@typescript-eslint/no-explicit-any': 'warn',
  'vue-scoped-css/v-deep-pseudo-style': ['error', ':deep'],
  'vue-scoped-css/no-deprecated-deep-combinator': 'error',
  'vue-scoped-css/require-v-deep-argument': 'error',

.github/workflows/build.yml

@@ -5,7 +5,7 @@ on:
  push:
  branches: [main]
  pull_request:
- branches: [main, beta, hyper-jpeg]
+ branches: [main, beta, production, nuxt]
 
 jobs:
  test:

.github/workflows/playwright.yml

@@ -1,9 +1,9 @@
 name: Playwright Tests
 on:
  push:
- branches: [ main, master ]
+ branches: [ main, beta, production, nuxt ]
  pull_request:
- branches: [ main, master ]
+ branches: [ main, beta, production, nuxt ]
 jobs:
  test:
  timeout-minutes: 15
@@ -19,9 +19,9 @@ jobs:
 
  - name: Run Build
  run: pnpm generate
-
+ 
  - name: Install Playwright Browsers
- run: pnpm exec playwright install --with-deps
+ run: pnpm exec playwright install --with-deps chromium
 
  - name: Run Playwright tests
  run: pnpm exec playwright test

CONTRIBUTING.md

@@ -10,6 +10,9 @@ We might give retro-active reward, where the bounty label wasn't present, **if w
 
 **For better coordination, please join our [Development channel (#coordination) on [KodaDot Ecosystem Telegram](https://t.me/kodadot_eco)**
 
+## Deploy Kodadot nft gallery to Netlify
+ [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/kodadot/nft-gallery)
+
 ## Getting started
 
 Before you being:

README.md

@@ -5,6 +5,8 @@
 
 # Contributing
 
+[![Twitter Follow](https://img.shields.io/twitter/follow/kodadot?style=social)](https://twitter.com/intent/follow?screen_name=kodadot)
+
 [![Test & Build app](https://github.com/kodadot/nft-gallery/actions/workflows/build.yml/badge.svg)](https://github.com/kodadot/nft-gallery/actions/workflows/build.yml) [![Reviewdog](https://github.com/kodadot/nft-gallery/actions/workflows/reviewdog.yml/badge.svg)](https://github.com/kodadot/nft-gallery/actions/workflows/reviewdog.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/7d14fab327c632d5f0ce/maintainability)](https://codeclimate.com/github/kodadot/nft-gallery/maintainability)
 
 ![image](https://user-images.githubusercontent.com/5887929/217076362-464e1293-8a2d-43ee-829f-fba17408e4c3.png)

styles/components/_content-markdown.scss → assets/styles/components/_content-markdown.scss

@@ -1,5 +1,5 @@
 @import '~/node_modules/highlight.js/styles/github-dark.css';
-@import '@/styles/abstracts/variables';
+@import '@/assets/styles/abstracts/variables';
 
 .content-markdown {
  code {

styles/components/_search.scss → assets/styles/components/_search.scss

@@ -90,6 +90,7 @@
 
 .search-bar-container {
  position: relative;
+ width: 100%;
 
  .search-bar-collection-search {
  z-index: 2;

styles/global.scss → assets/styles/global.scss

@@ -19,7 +19,6 @@ main {
  // without this, footer image is above main contents
  // block hover, click events
  z-index: 100;
- height: 100%;
 }
 
 main {
@@ -229,6 +228,12 @@ hr {
  }
 }
 
+.has-text-grey-fix {
+ @include ktheme() {
+ color: theme('k-grey-fix') !important;
+ }
+}
+
 .has-text-inverse {
  @include ktheme() {
  color: theme('text-color-inverse');
@@ -326,6 +331,18 @@ a.has-text-grey {
  }
 }
 
+.border-k-grey {
+ @include ktheme() {
+ border-color: theme('k-grey') !important;
+ }
+}
+
+.border-top-k-shade {
+ @include ktheme() {
+ border-top: 1px solid theme('k-shade');
+ }
+}
+
 .has-text-k-shade {
  @include ktheme() {
  color: theme('k-shade');
@@ -362,6 +379,12 @@ a.has-text-grey {
  }
 }
 
+.has-text-k-grey {
+ @include ktheme() {
+ color: theme('k-grey');
+ }
+}
+
 .has-text-color {
  @include ktheme() {
  color: theme('text-color') !important;
@@ -391,6 +414,13 @@ a.has-text-grey {
  }
 }
 
+.k-shade {
+ @include ktheme() {
+ background-color: theme('k-shade');
+ }
+}
+
+
 .k-yellow {
  @include ktheme() {
  background-color: theme('k-yellow');
@@ -430,6 +460,10 @@ a.has-text-grey {
  }
 }
 
+
+.is-cursor-pointer {
+ cursor: pointer !important;
+}
 //hover
 
 .is-hoverable-item {
@@ -490,3 +524,8 @@ a.has-text-grey {
 .no-border-left {
  border-left: none !important;
 }
+
+.is-rounded {
+ border-radius: 50%;
+}
+

styles/index.scss → assets/styles/index.scss

@@ -6,7 +6,7 @@
 @import "abstracts/theme";
 
 // FRAMEWORK (note: don't move this on top)
-@import "~bulma";
+@import "bulma/bulma.sass";
 
 // GLOBAL
 @import "./global.scss";

styles/layouts/_main-navigation.scss → assets/styles/layouts/_main-navigation.scss

@@ -194,7 +194,6 @@
 
  .navbar-start {
  flex: 1;
- margin-top: 10px;
  @media screen and (max-width: 1024px) {
  display: none;
  }

styles/pages/create.scss → assets/styles/pages/create.scss

@@ -1,4 +1,4 @@
-@import '@/styles/abstracts/variables';
+@import '@/assets/styles/abstracts/variables';
 
 :deep(.o-field__label) {
  margin-bottom: 4px;

components/CookieBanner.vue

@@ -1,6 +1,6 @@
 <template>
- <div v-if="!hasDisplayedCookieBanner" class="cookie-banner">
- <transition name="slide">
+ <transition name="slide">
+ <div v-if="!hasDisplayedCookieBanner" class="cookie-banner">
  <div class="notices is-bottom is-flex w-100 is-align-items-center">
  <div
  role="alertdialog"
@@ -14,21 +14,21 @@
  </div>
  <div class="bar ml-4 mr-4" />
  <div class="action is-success">
- <NeoButton variant="text" no-shadow @click.native="declineCookies">
+ <NeoButton variant="text" no-shadow @click="declineCookies">
  {{ $t('cookies.decline') }}
  </NeoButton>
  <NeoButton
  variant="text"
  no-shadow
  class="has-text-weight-bold ml-3"
- @click.native="acceptCookies">
+ @click="acceptCookies">
  {{ $t('cookies.accept') }}
  </NeoButton>
  </div>
  </div>
  </div>
- </transition>
- </div>
+ </div>
+ </transition>
 </template>
 
 <script lang="ts" setup>
@@ -37,7 +37,7 @@ import { NeoButton } from '@kodadot1/brick'
 
 // const { isEnabled } = useState()
 const hasDisplayedCookieBanner = ref(
- localStorage.getItem('cookies_enabled') !== null || false
+ localStorage.getItem('cookies_enabled') !== null || false,
 )
 const acceptCookies = () => {
  // if (isEnabled) {

components/CustomSubstackEmbed.vue

@@ -0,0 +1,21 @@
+<template>
+ <div id="custom-substack-embed" data-testid="footer-subscribe"></div>
+</template>
+
+<script lang="ts" setup>
+useHead({
+ script: [{ src: 'https://substackapi.com/widget.js', async: true }],
+})
+
+window.CustomSubstackWidget = {
+ substackUrl: 'kodadot.substack.com',
+ placeholder: 'jane.doe@kodadot.xyz',
+ theme: 'custom',
+ colors: {
+ primary: '#FF7AC3',
+ input: '#FFFFFF',
+ email: '#000000',
+ text: '#000000',
+ },
+}
+</script>

components/shared/Error.vue → components/Error.vue

@@ -27,7 +27,7 @@ const props = withDefaults(
  hasImg: true,
  errorTitle: 'Indexer Error',
  errorSubtitle: 'Indexer is not working properly.',
- }
+ },
 )
 
 const imgSrc = computed(() => `https://http.cat/${props.errorCode}`)

components/shared/MessageNotify.vue → components/MessageNotify.vue

@@ -1,8 +1,11 @@
 <template>
  <NeoMessage
  class="message-box"
+ :class="{
+ 'message-box--toast': !noToast,
+ }"
  :duration="realDuration"
- auto-close
+ :auto-close="autoClose"
  @close="$emit('close')">
  <img src="/congrats-message-header.svg" class="congrats-message" />
  <div class="is-flex is-flex-direction-column">
@@ -33,29 +36,35 @@ const props = defineProps<{
  title?: string
  subtitle?: string
  duration?: number
+ noToast?: boolean
 }>()
 
 const realDuration = computed(() => {
  return props.duration || 10000
 })
 
+const autoClose = computed(() => !props.noToast)
+
 const realworldFullPath = computed(() => {
  return `${window.location.origin}${route.fullPath}`
 })
 </script>
 
 <style lang="scss">
-@import '@/styles/abstracts/variables';
+@import '@/assets/styles/abstracts/variables';
 
 .message-box {
- z-index: 10;
  max-width: 500px;
- position: absolute;
- border-radius: 0;
- top: 100px;
- right: 0;
- margin-left: auto;
- margin-right: auto;
+
+ &--toast {
+ z-index: 100;
+ position: fixed;
+ border-radius: 0;
+ top: 100px;
+ right: 0;
+ margin-left: auto;
+ margin-right: auto;
+ }
 
  @include ktheme() {
  box-shadow: theme('primary-shadow');