fix: widget clone issue

domains/grid/components/GridFloatingMenu.vue

@@ -13,7 +13,8 @@ const BOTTOM_MARGIN_MOBILE_PX = 16
 const emits = defineEmits<Emits>()
 const { isEditingGrid, hasUnsavedGrid, isSavingGrid } =
   storeToRefs(useGridStore())
-const { isConnected, isMobile } = storeToRefs(useAppStore())
+const { isConnected, isMobile, isConnectedUserViewingOwnProfile } =
+  storeToRefs(useAppStore())
 const { formatMessage } = useIntl()
 const { showModal } = useModal()
 const bottom = ref(
@@ -137,7 +138,7 @@ onUnmounted(() => {
 
 <template>
   <div
-    v-if="isConnected"
+    v-if="isConnected && isConnectedUserViewingOwnProfile"
     class="fixed right-4 z-50 flex animate-fade-in gap-6 overflow-hidden rounded-full bg-neutral-100 p-3 shadow-neutral-drop-shadow duration-300 ease-in-out sm:bottom-10 sm:right-10 sm:flex-col sm:transition-height lg:right-[calc(50%-540px)]"
     :class="{
       'h-[64px] w-[320px] sm:h-[320px] sm:w-[64px]': isEditingGrid,

domains/grid/components/GridWidget.vue

@@ -13,9 +13,14 @@ const widgetComponent = shallowRef<Component | undefined>()
 const { canEditGrid, addGridWidget, getGridById } = useGrid()
 const { formatMessage } = useIntl()
 const { showModal } = useModal()
-const { isConnected, isMobile, isConnectedUserViewingOwnProfile } =
-  storeToRefs(useAppStore())
-const { isEditingGrid, tempGrid, selectedGridId } = storeToRefs(useGridStore())
+const {
+  isConnected,
+  isMobile,
+  isConnectedUserViewingOwnProfile,
+  connectedProfileAddress,
+} = storeToRefs(useAppStore())
+const { isEditingGrid, tempGrid, selectedGridId, tempGrids } =
+  storeToRefs(useGridStore())
 const { connect } = useBaseProvider()
 const { browserSupportExtension } = useBrowser()
 const dropdownId = `dropdown-${generateItemId()}`
@@ -129,20 +134,44 @@ const handleClone = async () => {
     await connect()
   }
 
+  const _connectedProfileAddress =
+    connectedProfileAddress.value?.toLowerCase() as Address
   const clonedWidget = createWidgetObject({
     type: props.widget.type,
     properties: props.widget.properties,
     w: props.widget.w,
     h: props.widget.h,
   })
-  addGridWidget(clonedWidget, getGridById(tempGrid.value, selectedGridId.value))
   isEditingGrid.value = true // we enable edit mode so user is aware about unsaved state
 
-  if (!isConnectedUserViewingOwnProfile.value) {
-    showModal({
-      template: 'GridWidgetCloned',
-    })
+  // in case we are on own profile we do simply widget copy
+  if (isConnectedUserViewingOwnProfile.value) {
+    addGridWidget(
+      clonedWidget,
+      getGridById(tempGrid.value, selectedGridId.value)
+    )
+    return
+  }
+
+  // re-create temp grid if missing
+  if (!tempGrids.value[_connectedProfileAddress]) {
+    const userGrid = await getUserGrid(_connectedProfileAddress)
+    tempGrids.value[_connectedProfileAddress] = buildGrid(
+      userGrid,
+      isMobile.value
+    )
   }
+
+  addGridWidget(
+    clonedWidget,
+    getGridById(
+      tempGrids.value[_connectedProfileAddress],
+      tempGrids.value[_connectedProfileAddress][0].id
+    )
+  )
+  showModal({
+    template: 'GridWidgetCloned',
+  })
 }
 
 const handleDropdownChange = (

domains/grid/composables/useGrid.ts

@@ -150,8 +150,8 @@ export const useGrid = () => {
     },
 
     addGridWidget: (widget: GridWidgetWithoutCords, grid?: Grid) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }
 
@@ -168,8 +168,8 @@ export const useGrid = () => {
     },
 
     updateGridWidget: (id?: string, widget?: Partial<GridWidget>) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }
 
@@ -199,8 +199,8 @@ export const useGrid = () => {
     },
 
     removeGridWidget: (id: string | number) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }
 
@@ -272,17 +272,17 @@ export const useGrid = () => {
     },
 
     addGrid: (grid: Grid) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }
 
       tempGrid.value.push(grid)
     },
 
     updateGrid: (id?: string, grid?: Partial<Grid>) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }
 
@@ -312,8 +312,8 @@ export const useGrid = () => {
     },
 
     removeGrid: (id: string) => {
-      if (!canEditGrid.value) {
-        console.warn('User cannot edit grid')
+      if (!isConnected.value) {
+        console.warn('User not connected')
         return
       }