feat: link field in text widget

domains/grid/components/AddWidgetText.vue

@@ -164,6 +164,17 @@ const handleBackToSelection = () => {
           "
         ></lukso-color-picker>
       </div>
+
+      <!-- Link -->
+      <lukso-input
+        .value="inputValues?.link"
+        :label="formatMessage('add_widget_text_link_label')"
+        :placeholder="formatMessage('add_widget_text_link_placeholder')"
+        is-full-width
+        @on-input="
+          (customEvent: CustomEvent) => handleFieldChange(customEvent, 'link')
+        "
+      ></lukso-input>
     </div>
 
     <!-- Buttons -->

domains/grid/components/GridWidgetText.vue

@@ -5,15 +5,18 @@ type Props = {
   backgroundColor?: string
   titleColor?: string
   textColor?: string
+  link?: string
 }
 
 defineProps<Props>()
 </script>
 
 <template>
-  <div
+  <a
     class="m-3 flex h-full flex-col items-center justify-center overflow-hidden rounded-8 p-4 text-neutral-100"
     :style="{ backgroundColor }"
+    :href="link"
+    target="_blank"
   >
     <h1
       class="heading-apax-24-medium break-word"
@@ -31,5 +34,5 @@ defineProps<Props>()
     >
       {{ text }}
     </p>
-  </div>
+  </a>
 </template>

domains/grid/schema/textWidgetSchema.ts

@@ -6,6 +6,7 @@ export const textWidgetSchema = z.object({
   backgroundColor: z.string().default('#f9f9f9').superRefine(hexColorValidator),
   title: z.string().optional(),
   text: z.string().optional(),
+  link: z.string().optional(),
 })
 
 export type TextWidgetProperties = z.input<typeof textWidgetSchema>

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,9 +62,11 @@
   "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.",
+  "add_widget_text_link_label": "Link",
   "asset_all_creators_unverified": "Un-verified creators",
   "add_widget_text_text_label": "Description",
   "add_grid_columns_label": "Number of columns",
@@ -176,6 +179,7 @@
   "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>",
   "add_widget_iframe_input_placeholder": "URL of the webpage",
+  "add_widget_text_link_placeholder": "Link URL",
   "profile_card_follow_button": "Follow",
   "header_discovery": "Discover",
   "asset_all_creators_verified": "Verified creators",
@@ -268,6 +272,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.",