feat: grid mobile warning

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,

translations/en_US.json

@@ -19,6 +19,7 @@
   "error_rejected_request": "You rejected the request",
   "dapp_showcase_06_image": "/images/universal-grave-dapp.jpg",
   "button_create_testnet_profile": "CREATE A TESTNET PROFILE",
+  "grid_mobile_limitations_title": "Editing on mobile",
   "modal_switch_network_title": "Change extension network",
   "hero_title_01": "Discover",
   "modal_follower_title": "Followers",
@@ -61,6 +62,7 @@
   "tooltip_text_copy_raw": "Copy raw",
   "add_widget_section_website": "Website",
   "data_provider_graph_description": "Load data via the our Envio indexing service. This results in faster loading times and smoother UX, however inappropriate content might be removed.",
+  "grid_mobile_limitations_confirm": "I understand",
   "transak_success_message": "Please note that it can take some time for your balance to update.",
   "missing_asset_label_added": "Added",
   "error_no_accounts": "Account not found.",
@@ -268,6 +270,7 @@
   "dapp_showcase_02_url": "https://universalswaps.io/",
   "token_collection_of": "Owns {count}",
   "add_widget_images_description": "Allows to embed image files.",
+  "grid_mobile_limitations_message": "some editing features are not available on mobile right now",
   "add_widget_text_title_placeholder": "Header text",
   "data_provider_rpc_description": "Loads data directly from the blockchain using an RPC provider. If a custom RPC provider (This feature will be added later) is used the read data can not be manipulated by us. \n\nWill result in slower loading times during the loading of assets and some app features might be limited.",
   "move_widget_description": "Please select to which Grid you want to move this widget.",

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
+}