feat: how use grid instructions (#513)

domains/grid/components/AddWidgetBasic.vue

@@ -21,6 +21,7 @@ const {
   handleFieldChange,
   handleFormErrors,
 } = useForm(schema, (await schema?.safeParseAsync(props.properties))?.data)
+const isInstructionsVisible = ref(false)
 
 const handleSave = async () => {
   if (!canSubmit.value) {
@@ -69,6 +70,12 @@ const handleBackToSelection = () => {
     },
   })
 }
+
+const widgetInstructions = computed(() => {
+  return formatMessage(`add_widget_${props.type.toLowerCase()}_instructions`)
+})
+
+const hasInstructions = computed(() => widgetInstructions.value !== '-')
 </script>
 
 <template>
@@ -94,6 +101,28 @@ const handleBackToSelection = () => {
           `${isEdit ? 'edit' : 'add'}_widget_${type.toLowerCase()}_description`
         )
       }}
+
+      <!-- Instructions -->
+      <template v-if="hasInstructions">
+        <span
+          v-if="isInstructionsVisible"
+          class="cursor-pointer text-blue-60 underline hover:text-blue-50"
+          @click="isInstructionsVisible = !isInstructionsVisible"
+          >Hide instructions</span
+        >
+        <span
+          v-else
+          class="cursor-pointer text-blue-60 underline hover:text-blue-50"
+          @click="isInstructionsVisible = !isInstructionsVisible"
+          >Show instructions</span
+        >
+        <div
+          v-if="isInstructionsVisible"
+          class="mt-4 animate-fade-in whitespace-pre-line font-600 break-word"
+        >
+          {{ widgetInstructions }}
+        </div>
+      </template>
     </div>
 
     <!-- Content -->

translations/en_US.json

@@ -72,6 +72,7 @@
   "hero_title_02": "Universal Profiles",
   "not_up_description": "This does not seem to be a Universal Profile address. View this address on block explorer to find out more information.",
   "modal_switch_application_network_title": "Change application network",
+  "add_widget_iframe_instructions": "-",
   "add_missing_assets_add_another_button": "Add another missing asset",
   "grid_unsaved_changes_text": "You have unsaved changes in your Grid.",
   "modal_delete_widget_title": "Confirm delete",
@@ -112,6 +113,7 @@
   "grid_widget_menu_move": "Move to other grid",
   "dapp_showcase_02_title": "universalswaps.io",
   "errors_invalid_hex_color": "Invalid color",
+  "add_widget_youtube_instructions": "1. Visit YouTube website and open video\r\n2. Click on \"Share\" button and select \"Embed\"\r\n3. Click on \"Copy\" and paste into the textarea",
   "button_get_lyx": "Get",
   "filters_type_owned": "Owned",
   "asset_filter_mobile_filters": "Filters",
@@ -145,6 +147,7 @@
   "add_widget_instagram_description": "Allows to embed Instagram post.",
   "token_asset_type_other": "OTHER",
   "profile_tab_tokens": "Tokens",
+  "add_widget_image_instructions": "-",
   "modal_mobile_search_placeholder": "Search by title",
   "widget_type_instagram": "Instagram",
   "add_missing_assets_page_title": "Check missing asset",
@@ -176,6 +179,7 @@
   "add_widget_section_video": "Video",
   "dapp_showcase_03_title": "commonground.cg",
   "add_widget_image_input_placeholder": "URL of the image",
+  "add_widget_soundcloud_instructions": "1. Go into playlist/album/artist/track in SoundCloud website\r\n2. Click on \"Share\" and select \"Embed\" tab\r\n3. Copy provided code and paste into textarea",
   "add_widget_warpcast_input_placeholder": "URL of feed or post",
   "edit_widget_instagram_title": "Edit Instagram widget",
   "add_widget_section_music": "Music",
@@ -250,6 +254,7 @@
   "token_details_description": "Token Description",
   "dapp_showcase_08_image": "/images/lsp8-tracker-dapp.jpg",
   "token_asset_type_3d": "3D",
+  "add_widget_warpcast_instructions": "1. Go into user or post of Warpcast platform\r\n2. Copy url from the browser address and paste into textarea",
   "data_provider_graph_title": "Read from indexing service",
   "header_my_profile": "My profile",
   "missing_assets_token_address": "Token contract address",
@@ -268,6 +273,7 @@
   "send_success_button": "Send another token",
   "widget_type_text": "Text",
   "add_widget_instagram_input_placeholder": "Embed code",
+  "add_widget_instagram_instructions": "1. Go into Instagram post\n2. Click on three dot menu and go to \"Embed\"\n3. Copy embed code and paste into textarea",
   "data_provider_page_title": "Data loading mode",
   "pages_terms_title": "Terms of Service",
   "modal_switch_network_description": "To continue using this application you will need to change the browser extension network to {name}.",
@@ -283,6 +289,7 @@
   "modal_delete_widget_confirm": "Delete",
   "asset_creators_title": "Creators",
   "profile_balance_of": "of {balance} {symbol}",
+  "add_widget_x_instructions": "1. Go into user or post of X platform\r\n2. Copy url from the browser address and paste into textarea",
   "widget_type_image": "Image",
   "erc725account_info_part1": "Search {numberOfProfiles} platform independent blockchain accounts {luksoWebsiteLink}",
   "collection_connected_own_info": "You own the following items from this collection",
@@ -294,6 +301,7 @@
   "collection_not_avail_front": "Collection view is not available when loading data using the decentralised data loading mode. Please switch the data loading mode to centralised",
   "asset_filter_search_placeholder": "Search by title",
   "move_widget_title": "Move widget",
+  "add_widget_spotify_instructions": "1. Go into playlist/artist/track of Spotify app\r\n2. Click on three dot menu and go to \"Share\"\r\n3. Select \"Copy link to...\" and paste into textarea",
   "modal_switch_network_cancel": "Cancel",
   "network_activity_title": "Network activity",
   "dapp_showcase_07_image": "/images/stakingverse-dapp.jpg",