feat: the grid (#396)

.editorconfig

@@ -4,7 +4,8 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js,json,yml}]
+[*.{js,ts,json,yml}]
 charset = utf-8
 indent_style = space
 indent_size = 2
+print_width = 80

.env.example

@@ -1,3 +1,6 @@
+ALGOLIA_APPLICATION_ID=YOUR_ALGOLIA_APPLICATION_ID
+ALGOLIA_API_KEY=YOUR_ALGOLIA_API_KEY
+
 # dev envs not needed in production
 YATA_API_TOKEN=YOUR_YATA_API_TOKEN # yata api token for fetching translations
 
@@ -12,3 +15,6 @@ NUXT_PUBLIC_TRANSAK_API_KEY=YOUR_NUXT_PUBLIC_TRANSAK_API_KEY
 
 # Ramp
 NUXT_PUBLIC_RAMP_API_KEY=YOUR_NUXT_PUBLIC_RAMP_API_KEY
+
+# API secret
+NUXT_PUBLIC_API_SHARED_SECRET=YOUR_NUXT_PUBLIC_API_SHARED_SECRET

.eslintrc.cjs

@@ -61,7 +61,15 @@ module.exports = {
     'tailwindcss/no-custom-classname': [
       'error',
       {
-        whitelist: ['paragraph-.*', 'heading-.*', 'nav-.*', 'shadow-.*'],
+        whitelist: [
+          'paragraph-.*',
+          'heading-.*',
+          'nav-.*',
+          'shadow-.*',
+          'instagram-.*',
+          'twitter-.*',
+          'grid-.*',
+        ],
       },
     ],
   },
@@ -70,8 +78,6 @@ module.exports = {
       files: ['**/*.spec.ts'],
       extends: ['plugin:playwright/playwright-test'],
       rules: {
-        'import/order': 'off',
-        '@typescript-eslint/no-unused-vars': 'off',
         'playwright/no-standalone-expect': 'off',
         'playwright/no-networkidle': 'off',
         'playwright/no-skipped-test': 'off',

.github/workflows/ci.yml

@@ -19,6 +19,7 @@ env:
   NUXT_PUBLIC_SENTRY_ENVIRONMENT: '${{ secrets.SENTRY_ENVIRONMENT }}'
   NUXT_PUBLIC_TRANSAK_API_KEY: '${{ secrets.TRANSAK_API_KEY }}'
   NUXT_PUBLIC_RAMP_API_KEY: '${{ secrets.RAMP_API_KEY }}'
+  NUXT_PUBLIC_API_SHARED_SECRET: '${{ secrets.API_SHARED_SECRET }}'
 
 jobs:
   test:

.github/workflows/review.yaml

@@ -7,6 +7,6 @@ jobs:
   add-reviews:
     runs-on: ubuntu-latest
     steps:
-      - uses: kentaro-m/auto-assign-action@v1.2.4
+      - uses: kentaro-m/auto-assign-action@v2.0.0
         with:
           configuration-path: '.github/auto_assign.yaml'

app.vue

@@ -21,8 +21,12 @@ const { addProviderEvents, removeProviderEvents } =
 const { disconnect } = useBaseProvider()
 const { cacheValue } = useCache()
 const { currencyList } = storeToRefs(useCurrencyStore())
-const { initProvider, reconnect } = useWalletConnectProvider()
+const {
+  initProvider: initWalletConnectProvider,
+  connect: connectWalletConnect,
+} = useWalletConnectProvider()
 const { formatMessage } = useIntl()
+const { gridChainId, tempGrids } = storeToRefs(useGridStore())
 const swHasUpgrade = ref<boolean>(false)
 
 // Make the service worker update available to the rest of the app
@@ -39,13 +43,7 @@ const setupTranslations = () => {
  * RPC - from RPC endpoint
  */
 const setupWeb3Instances = async () => {
-  // reconnect wallet connect
-  if (isWalletConnect.value) {
-    await initProvider()
-    await reconnect()
-  }
-
-  // set injected provider
+  // set web3 for injected provider
   if (INJECTED_PROVIDER) {
     // for chain interactions through dapp
     addWeb3(PROVIDERS.INJECTED, INJECTED_PROVIDER)
@@ -62,6 +60,12 @@ const setupWeb3Instances = async () => {
     // expose web3 instance to global scope for console access
     window.web3 = getWeb3(PROVIDERS.RPC)
   }
+
+  // reconnect wallet connect
+  if (isWalletConnect.value) {
+    await initWalletConnectProvider()
+    await connectWalletConnect()
+  }
 }
 
 /**
@@ -112,18 +116,19 @@ const setupNetwork = async () => {
   const network = useRouter().currentRoute.value.query?.network
 
   if (!network) {
-    await checkNetwork()
     return
   }
 
   if (SUPPORTED_NETWORK_IDS.includes(network)) {
     selectedChainId.value = getNetworkById(network).chainId
-    await checkNetwork()
+
+    // reset temp grid layout if network is changed
+    if (gridChainId.value !== selectedChainId.value) {
+      tempGrids.value = {}
+    }
   } else {
     console.warn(
-      `Invalid network: ${network}, valid networks are ${SUPPORTED_NETWORK_IDS.join(
-        ', '
-      )}`
+      `Invalid network: ${network}, valid networks are ${SUPPORTED_NETWORK_IDS.join(', ')}`
     )
   }
 }
@@ -190,16 +195,20 @@ const resetDataProvider = () => {
 }
 
 onMounted(async () => {
-  setupTranslations()
-  setupNetwork()
-  await setupWeb3Instances()
-  checkConnectionExpiry()
-  await setupConnectedProfile()
-  resetDataProvider()
-  isLoadedApp.value = true
-  await setupCurrencies()
-  window.scrollTo(0, 0)
-  checkBuyLyx()
+  try {
+    setupTranslations()
+    setupNetwork()
+    await setupWeb3Instances()
+    checkConnectionExpiry()
+    await setupConnectedProfile()
+    resetDataProvider()
+    isLoadedApp.value = true
+    await setupCurrencies()
+    window.scrollTo(0, 0)
+    checkBuyLyx()
+  } catch (error) {
+    console.error(error)
+  }
 })
 
 onUnmounted(() => {

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "linter": {
     "enabled": true,
     "rules": {
@@ -15,14 +15,15 @@
   "formatter": {
     "enabled": false,
     "indentWidth": 2,
-    "indentStyle": "space"
+    "indentStyle": "space",
+    "lineWidth": 80
   },
   "javascript": {
     "formatter": {
       "enabled": false,
       "semicolons": "asNeeded",
       "quoteStyle": "single",
-      "trailingComma": "all"
+      "trailingCommas": "all"
     }
   },
   "files": {

components/AppModal.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
+import { useElementSize, useWindowSize } from '@vueuse/core'
+
 import type { ModalSizes } from '@lukso/web-components'
 
 const { setModal } = useAppStore()
 const { isModalOpen, modal } = storeToRefs(useAppStore())
 const modalTemplateComponent = shallowRef()
 const route = useRoute()
 const { closeModal } = useModal()
+const modalContainer = ref<HTMLElement | null>(null)
+const { height: modalHeight } = useElementSize(modalContainer)
+const { height: screenHeight } = useWindowSize()
 
 /**
  * Load modal template component
@@ -32,7 +37,7 @@ watch(
       setModal({
         template: modalTemplate,
         data: modalData ? JSON.parse(modalData) : undefined,
-        size: modalSize,
+        size: modalSize || 'small',
       })
     } else {
       loadModalTemplate(MODAL_DEFAULT_TEMPLATE)
@@ -45,6 +50,23 @@ watch(
   },
   { deep: true, immediate: true }
 )
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  const activeElement = document.activeElement?.tagName
+  const key = event.key
+
+  if (key === 'Escape' && activeElement === 'BODY') {
+    closeModal()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeyDown)
+})
 </script>
 
 <template>
@@ -54,10 +76,18 @@ watch(
     :data-template="modal?.template"
     @on-backdrop-click="closeModal"
   >
-    <component
-      v-if="modalTemplateComponent"
-      :is="modalTemplateComponent"
-      class="animate-fade-in"
-    ></component>
+    <div
+      ref="modalContainer"
+      class="max-h-[calc(100vh-100px)]"
+      :class="{
+        'overflow-y-auto': modalHeight > screenHeight - 150,
+      }"
+    >
+      <component
+        v-if="modalTemplateComponent"
+        :is="modalTemplateComponent"
+        class="animate-fade-in"
+      ></component>
+    </div>
   </lukso-modal>
 </template>