feat: grid mobile warning (#533)

components/ModalTemplateDefault.vue

@@ -7,7 +7,7 @@ const { modal, closeModal } = useModal()
   <div class="flex flex-col rounded-12 bg-neutral-98 p-6 text-center">
     <img
       :src="modal?.data?.icon || '/images/up-error.png'"
-      class="mx-auto mb-6 max-w-[150px]"
+      class="mx-auto mb-6 mt-4 max-w-[150px]"
       alt=""
     />
     <div class="heading-inter-21-semi-bold pb-4">

domains/grid/components/GridView.vue

@@ -11,6 +11,7 @@ const {
   gridRowHeightRatio,
   selectedGridId,
   isSavingGrid,
+  mobileLimitationsDisplayed,
 } = storeToRefs(useGridStore())
 const {
   saveGrid,
@@ -21,6 +22,8 @@ const {
   getGridById,
   gridsForTabs,
 } = useGrid()
+const { showModal } = useModal()
+const { formatMessage } = useIntl()
 const gridContainer = ref<HTMLElement | null>(null)
 const { width } = useElementSize(gridContainer)
 const gridWidgets = ref<GridWidget[]>([])
@@ -161,6 +164,19 @@ watch(
       } else {
         hasUnsavedGrid.value = false
       }
+
+      // show mobile limitations modal (only once)
+      if (isMobile.value && !mobileLimitationsDisplayed.value) {
+        showModal<DefaultModalData>({
+          data: {
+            icon: '/images/grid.svg',
+            title: formatMessage('grid_mobile_limitations_title'),
+            message: formatMessage('grid_mobile_limitations_message'),
+            confirmButtonText: formatMessage('grid_mobile_limitations_confirm'),
+          },
+        })
+        mobileLimitationsDisplayed.value = true
+      }
     } else {
       gridWidgets.value = getSelectedGridWidgets(updatedViewedGrid)
     }

stores/grid.ts

@@ -11,6 +11,7 @@ export const useGridStore = defineStore(
     const gridRowHeightRatio = ref(DEFAULT_GRID_ROW_HEIGHT_RATIO)
     const gridChainId = ref<string>(DEFAULT_NETWORK_CHAIN_ID)
     const tempGrids = ref<Record<string, Grid[]>>({})
+    const mobileLimitationsDisplayed = ref(false)
 
     // We use tempGrid as a proxy to the actual grid data stored in tempGrids
     const tempGrid = computed<Grid[]>({
@@ -45,6 +46,7 @@ export const useGridStore = defineStore(
       selectedGridId,
       gridRowHeightRatio,
       gridChainId,
+      mobileLimitationsDisplayed,
     }
   },
   {
@@ -55,6 +57,7 @@ export const useGridStore = defineStore(
         'selectedGridId',
         'gridRowHeightRatio',
         'gridChainId',
+        'mobileLimitationsDisplayed',
         'tempGrids',
       ],
       key: STORAGE_KEY.GRID_STORE,

types/modal.ts

@@ -16,3 +16,10 @@ export type ModalQueryParams = {
 export type ModalData = {
   [key: string]: any
 }
+
+export type DefaultModalData = {
+  message: string
+  title?: string
+  confirmButtonText?: string
+  icon?: string
+}