feat: add Elfsight referral link + instructions (#543)

lukso-network · Nov 13, 2024 · 5d10724 · 5d10724
1 parent 18b7a62
commit 5d10724
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 26 deletions.
diff --git a/domains/grid/components/AddWidgetBasic.vue b/domains/grid/components/AddWidgetBasic.vue
@@ -129,11 +129,13 @@ const hasInstructions = computed(() => widgetInstructions.value !== '-')
       </div>
     </div>
     <div class="paragraph-inter-14-regular pb-6">
-      {{
-        formatMessage(
-          `${isEdit ? 'edit' : 'add'}_widget_${widgetType.toLowerCase()}_description`
-        )
-      }}
+      <lukso-sanitize
+        :html-content="
+          formatMessage(
+            `${isEdit ? 'edit' : 'add'}_widget_${widgetType.toLowerCase()}_description`
+          )
+        "
+      ></lukso-sanitize>
 
       <!-- Instructions -->
       <div v-if="hasInstructions" class="mt-2">
@@ -162,7 +164,7 @@ const hasInstructions = computed(() => widgetInstructions.value !== '-')
           v-if="isInstructionsVisible"
           class="mt-4 animate-fade-in whitespace-pre-line font-600 break-word"
         >
-          {{ widgetInstructions }}
+          <lukso-sanitize :html-content="widgetInstructions"></lukso-sanitize>
         </div>
       </div>
     </div>

diff --git a/domains/grid/components/AddWidgetElfsight.vue b/domains/grid/components/AddWidgetElfsight.vue
@@ -100,11 +100,13 @@ const hasInstructions = computed(() => widgetInstructions.value !== '-')
       </div>
     </div>
     <div class="paragraph-inter-14-regular pb-6">
-      {{
-        formatMessage(
-          `${isEdit ? 'edit' : 'add'}_widget_${widgetType.toLowerCase()}_description`
-        )
-      }}
+      <lukso-sanitize
+        :html-content="
+          formatMessage(
+            `${isEdit ? 'edit' : 'add'}_widget_${widgetType.toLowerCase()}_description`
+          )
+        "
+      ></lukso-sanitize>
 
       <!-- Instructions -->
       <div v-if="hasInstructions" class="mt-2">
@@ -133,7 +135,7 @@ const hasInstructions = computed(() => widgetInstructions.value !== '-')
           v-if="isInstructionsVisible"
           class="mt-4 animate-fade-in whitespace-pre-line font-600 break-word"
         >
-          {{ widgetInstructions }}
+          <lukso-sanitize :html-content="widgetInstructions"></lukso-sanitize>
         </div>
       </div>
     </div>

diff --git a/domains/grid/components/AddWidgetImages.vue b/domains/grid/components/AddWidgetImages.vue
@@ -91,11 +91,13 @@ const handleBackToSelection = () => {
       </div>
     </div>
     <div class="paragraph-inter-14-regular pb-6">
-      {{
-        formatMessage(
-          `${isEdit ? 'edit' : 'add'}_widget_${type.toLowerCase()}_description`
-        )
-      }}
+      <lukso-sanitize
+        :html-content="
+          formatMessage(
+            `${isEdit ? 'edit' : 'add'}_widget_${type.toLowerCase()}_description`
+          )
+        "
+      ></lukso-sanitize>
     </div>
 
     <div class="flex flex-col gap-4">

diff --git a/domains/grid/components/AddWidgetText.vue b/domains/grid/components/AddWidgetText.vue
@@ -89,11 +89,13 @@ const handleBackToSelection = () => {
       </div>
     </div>
     <div class="paragraph-inter-14-regular pb-6">
-      {{
-        formatMessage(
-          `${isEdit ? 'edit' : 'add'}_widget_${type.toLowerCase()}_description`
-        )
-      }}
+      <lukso-sanitize
+        :html-content="
+          formatMessage(
+            `${isEdit ? 'edit' : 'add'}_widget_${type.toLowerCase()}_description`
+          )
+        "
+      ></lukso-sanitize>
     </div>
 
     <div class="flex flex-col gap-4">

diff --git a/translations/en_US.json b/translations/en_US.json
@@ -180,7 +180,7 @@
   "shuffle_title": "Profiles",
   "token_asset_type_video": "VIDEO",
   "beta_warning": "You are on <strong>LUKSO Testnet</strong>. Do not send real LYX to any profiles made on this network!<br /><strong>If you are looking for LUKSO Mainnet, please use the switch in the footer.</strong>",
-  "edit_widget_elfsight_description": "Use this widget to display Elfsight on your grid.",
+  "edit_widget_elfsight_description": "Here you can add custom widgets like an Instagram feed, or a calendar from <a class=\"text-purple-51 underline hover:text-purple-41\" href=\"https://elfsight.com/widgets/?ref=e9caec1c-1acd-423a-9a19-d18bd676fd00\" target=\"_blank\">Elfsight.com</a>.",
   "add_widget_iframe_input_placeholder": "URL of the webpage",
   "add_widget_text_link_placeholder": "Link URL",
   "profile_card_follow_button": "Follow",
@@ -277,8 +277,8 @@
   "dapp_showcase_02_url": "https://universalswaps.io/",
   "token_collection_of": "Owns {count}",
   "add_widget_images_description": "Use this widget to display images from the web directly on your grid. Please note that uploading an image from your device is not available.",
-  "grid_mobile_limitations_message": "some editing features are not available on mobile right now",
-  "add_widget_elfsight_instructions": "-",
+  "grid_mobile_limitations_message": "Please note that some features may not be available on mobile at the moment.",
+  "add_widget_elfsight_instructions": "1. Select widget from <a class=\"text-purple-51 underline hover:text-purple-41\" href=\"https://elfsight.com/widgets/?ref=e9caec1c-1acd-423a-9a19-d18bd676fd00\" target=\"_blank\">Elfsight.com</a>\n2. Customize and publish your widget\n3. Copy the entire embed code and paste it here\n\n⚠️ You need to create account on the Elfsight platform",
   "add_widget_text_title_placeholder": "Please add a title",
   "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.",
@@ -298,7 +298,7 @@
   "token_details_buy_lyx": "Buy LYX",
   "footer_terms_text": "Terms & Conditions",
   "followed_by_text": "Followed by {names} {othersCount, plural,\n      =0 {you follow}\n      =1 {and 1 other you follow}\n      other {and # others you follow}\n    }",
-  "add_widget_elfsight_description": "Use this widget to display Elfsight on your grid.",
+  "add_widget_elfsight_description": "Here you can add custom widgets like an Instagram feed, or a calendar from <a class=\"text-purple-51 underline hover:text-purple-41\" href=\"https://elfsight.com/widgets/?ref=e9caec1c-1acd-423a-9a19-d18bd676fd00\" target=\"_blank\">Elfsight.com</a>.",
   "assets_empty_state_description": "To find out how to create your own assets such as Tokens and NFT’s on <strong>LUKSO</strong> head over to our <a href=\"https://docs.lukso.tech/guides/digital-assets/create-lsp7-digital-asset/\" target=\"_blank\" class=\"text-purple-51 hover:text-purple-41 underline\"><strong>documentation</strong></a>. ",
   "connect_or_install_button_coming_soon": "Coming soon...",
   "modal_delete_widget_confirm": "Delete",