feat: add widget from external source

components/AppModal.vue

@@ -37,7 +37,7 @@ watch(
       setModal({
         template: modalTemplate,
         data: modalData ? JSON.parse(modalData) : undefined,
-        size: modalSize,
+        size: modalSize || 'small',
       })
     } else {
       loadModalTemplate(MODAL_DEFAULT_TEMPLATE)

components/ModalTemplateExternalAddGridWidget.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+const { modal, closeModal } = useModal<Partial<GridWidget>>()
+const { formatMessage } = useIntl()
+const { isConnecting, isConnected, connectedProfileAddress } =
+  storeToRefs(useAppStore())
+const { addGridWidget, initializeGrid } = useGrid()
+const { tempGrid, isEditingGrid } = storeToRefs(useGridStore())
+const { connect } = useBaseProvider()
+const newWidget = ref<GridWidgetWithoutCords | undefined>()
+
+const handleAddWidget = async () => {
+  if (!newWidget.value) {
+    console.warn('Missing widget data')
+    return
+  }
+
+  if (!isConnected.value) {
+    await connect()
+  }
+
+  // external source:  we need to toggle edit mode
+  isEditingGrid.value = true
+
+  // we will widget add to first grid
+  let grid = tempGrid.value[0]
+
+  // if grid is not initialized, initialize it
+  if (!grid) {
+    await initializeGrid(connectedProfileAddress.value, true)
+    grid = tempGrid.value[0]
+  }
+
+  addGridWidget(newWidget.value, grid)
+  closeModal()
+  navigateTo(profileRoute(connectedProfileAddress.value))
+}
+
+onMounted(async () => {
+  try {
+    // check if the widget data is valid
+    await gridWidgetWithoutCordsSchema
+      .omit({ i: true })
+      .partial({
+        w: true,
+        h: true,
+      })
+      .parseAsync(modal.data)
+
+    if (!modal?.data?.type) {
+      throw new Error('Missing widget type')
+    }
+
+    // check if properties for given widget type is valid
+    const schemaMap = WIDGET_SCHEMA_MAP[modal?.data?.type]
+    await schemaMap?.input?.safeParseAsync(modal?.data?.properties)
+
+    newWidget.value = createWidgetObject({
+      type: modal?.data?.type,
+      properties: modal?.data?.properties,
+      w: modal?.data?.w,
+      h: modal?.data?.h,
+    })
+  } catch (error) {
+    console.warn(error)
+    closeModal()
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col rounded-12 bg-neutral-98 p-6 text-center">
+    <img
+      src="/images/grid.svg"
+      class="mx-auto mb-6 mt-4 max-w-[150px]"
+      alt=""
+    />
+    <div class="heading-inter-21-semi-bold pb-4">
+      {{ formatMessage('modal_external_add_grid_widget_title') }}
+    </div>
+    <div class="paragraph-inter-16-regular">
+      <lukso-sanitize
+        :html-content="
+          formatMessage('modal_external_add_grid_widget_description')
+        "
+      ></lukso-sanitize>
+    </div>
+    <div class="grid grid-cols-[max-content,auto]">
+      <lukso-button variant="text" @click="closeModal" class="mt-6">
+        {{ formatMessage('modal_external_add_grid_widget_cancel') }}
+      </lukso-button>
+      <lukso-button
+        :is-loading="isConnecting ? true : undefined"
+        :loading-text="formatMessage('modal_external_add_grid_widget_confirm')"
+        variant="landing"
+        is-full-width
+        class="mt-6"
+        @click="handleAddWidget"
+      >
+        {{ formatMessage('modal_external_add_grid_widget_confirm') }}
+      </lukso-button>
+    </div>
+  </div>
+</template>

composables/web3-provider/useBrowserExtensionProvider.ts

@@ -52,7 +52,7 @@ const connect = async () => {
 
     // when we connect on the landing page we redirect to profile
     if (route.name === 'index') {
-      navigateTo(profileRoute(address))
+      await navigateTo(profileRoute(address))
     }
   } catch (error: unknown) {
     console.error(error)

translations/en_US.json

@@ -231,6 +231,7 @@
   "add_grid_description": "Create a new grid and organize the content as you like.",
   "footer_need_help_text": "SUPPORT",
   "token_asset_type_image": "IMAGE",
+  "modal_external_add_grid_widget_description": "Do you want to add widget from external source?",
   "profile_tab_collectibles": "Collectibles",
   "dapp_showcase_04_image": "/images/upturn-dapp.jpg",
   "token_details_assets": "Token assets",
@@ -253,6 +254,7 @@
   "edit_widget_instagram_description": "Edit this widget to display any Instagram post on your grid.",
   "token_details_show_collection": "View collection",
   "send_card_return_to_profile": "Return to profile",
+  "modal_external_add_grid_widget_confirm": "Add",
   "filters_order_by_lastly_added": "Lastly added",
   "grid_tabs_menu_edit": "Edit",
   "widget_type_youtube": "YouTube",
@@ -337,6 +339,7 @@
   "header_disconnect": "Log out",
   "tokens_title": "Tokens",
   "footer_faq_text": "FAQs",
+  "modal_external_add_grid_widget_title": "Add widget",
   "grid_unsaved_changes_save": "Save changes",
   "send_card_view_in_explorer": "View transaction on block explorer",
   "asset_created_by": "Created by",
@@ -349,6 +352,7 @@
   "token_details_total_supply_of": "Total supply of {count}",
   "modal_clone_widget_content": "Do you want to go to your profile?",
   "modal_mobile_filter_cancel": "Cancel",
+  "modal_external_add_grid_widget_cancel": "Cancel",
   "add_grid_title_placeholder": "Enter a grid name",
   "data_provider_rpc_title": "Read from smart contracts",
   "move_grid_widget_placeholder": "Select grid...",