308 change messaging when shared phase 1

.cargo/config.toml

@@ -1,2 +1,6 @@
 [target.'cfg(all())']
 rustflags = ["--cfg=web_sys_unstable_apis"]
+
+
+[build]
+rustflags = ["--cfg=web_sys_unstable_apis"]

ssr/Cargo.toml

@@ -36,10 +36,7 @@ serde-wasm-bindgen = "0.6.5"
 futures = "0.3.30"
 leptos-use = "0.12.0"
 codee = { version = "0.1.2", features = ["json_serde"] }
-reqwest = { version = "0.12", default-features = false, features = [
-    "json",
-    "http2",
-] }
+reqwest = { version = "0.12", default-features = false, features = ["json", "http2"] }
 serde_bytes = "0.11.14"
 hex = "0.4.3"
 leptos_icons = "0.3.0"
@@ -56,7 +53,7 @@ serde_json = "1.0"
 crc32fast = "1.4.0"
 uts2ts = "0.4.1"
 rand_chacha = { version = "0.3.1", optional = true }
-web-sys = { version = "0.3", features = [
+web-sys = { version = "0.3.70", features = [
     "Clipboard",
     "Navigator",
     "ShareData",
@@ -112,6 +109,7 @@ hydrate = [
     "ic-agent/wasm-bindgen",
     "dep:web-sys",
     "reqwest/native-tls",
+        "reqwest/blocking",
     "dep:rand_chacha",
     "tonic/codegen",
 ]
@@ -128,6 +126,7 @@ ssr = [
     "leptos-use/ssr",
     "leptos-use/axum",
     "reqwest/rustls-tls",
+            "reqwest/blocking",
     "dep:redis",
     "yral-metadata-client/rustls-tls",
     "dep:redb",

ssr/public/share.js

@@ -0,0 +1,50 @@
+
+export function shareImage(title, text, url, imageUrl) {
+
+    // Check if imageUrl is null
+    if (imageUrl === null) {
+        // Call shareContent with no files
+        shareContent(title, text, url);
+        return;
+    }
+
+    // If imageUrl is an array of URLs
+    if (Array.isArray(imageUrl)) {
+         Promise.all(imageUrl.map(fetchImage))
+            .then(files => {
+                shareContent(title, text, url, files);
+            })
+            .catch(error => {
+                console.error('Error fetching images:', error);
+            });
+
+
+                           } else {
+                                               shareContent(title, text, url);            
+                           }
+}
+
+// Helper function to fetch and convert a single image URL to a File object
+    function fetchImage(url) {
+        return fetch(url)
+            .then(response => response.blob())
+            .then(blob => new File([blob], 'image.jpg', { type: 'image/jpeg' }));
+    }
+
+
+function shareContent(title, text, url, files = []) {
+    if (navigator.share) {
+        navigator.share({
+            title: title,
+            text: text,
+            url: url,
+            files: files,
+        }).then(() => {
+            console.log('Share successful');
+        }).catch((error) => {
+            console.error('Error sharing:', error);
+        });
+    } else {
+        console.log('Web Share API not supported in this browser.');
+    }
+}

ssr/src/page/refer_earn/mod.rs

@@ -12,10 +12,11 @@ use crate::component::canisters_prov::AuthCansProvider;
 use crate::component::connect::ConnectLogin;
 use crate::state::canisters::auth_canisters_store;
 use crate::utils::event_streaming::events::{Refer, ReferShareLink};
+use crate::utils::web::Share;
 use crate::{
     component::{back_btn::BackButton, dashbox::DashboxLoading, title::Title},
     state::auth::account_connected_reader,
-    utils::web::{copy_to_clipboard, share_url},
+    utils::web::copy_to_clipboard,
 };
 use history::HistoryView;
 
@@ -31,7 +32,7 @@ fn WorkButton(#[prop(into)] text: String, #[prop(into)] head: String) -> impl In
 
 #[component]
 fn ReferLoaded(user_principal: Principal) -> impl IntoView {
-    let refer_code = user_principal.to_text();
+    let refer_code = user_principal.to_text().clone();
     let window = use_window();
     let refer_link = window
         .as_ref()
@@ -64,17 +65,17 @@ fn ReferLoaded(user_principal: Principal) -> impl IntoView {
 
     let handle_share = move || {
         let url = refer_link.clone();
-        if share_url(&url).is_some() {
+        if Share::refer(&url).is_some() {
             return;
         }
-        click_copy.dispatch(url)
+        click_copy.dispatch(url.clone());
     };
 
     view! {
         <div class="flex items-center w-fit rounded-full border-dashed border-2 p-3 gap-2 border-primary-500">
-            <span class="text-md lg:text-lg text-ellipsis line-clamp-1">{refer_code}</span>
+            <span class="text-md lg:text-lg text-ellipsis line-clamp-1"> { refer_code }</span>
             <button on:click=move |_| handle_share()>
-                <Icon class="text-xl text-primary-500" icon=icondata::IoShareSocialSharp/>
+                <Icon class="text-xl text-primary-500" icon=icondata::IoShareSocialSharp />
             </button>
         </div>
         <Show when=show_copied_popup>
@@ -91,7 +92,7 @@ fn ReferLoaded(user_principal: Principal) -> impl IntoView {
 fn ReferCode() -> impl IntoView {
     view! {
         <AuthCansProvider fallback=DashboxLoading let:cans>
-            <ReferLoaded user_principal=cans.identity().sender().unwrap()/>
+            <ReferLoaded user_principal=cans.identity().sender().unwrap() />
         </AuthCansProvider>
     }
 }
@@ -104,14 +105,14 @@ fn ReferView() -> impl IntoView {
 
     view! {
         <div class="flex flex-col w-full h-full items-center text-white gap-10">
-            <img class="shrink-0 h-40 select-none" src="/img/coins-stash.webp"/>
+            <img class="shrink-0 h-40 select-none" src="/img/coins-stash.webp" />
             <div class="flex flex-col w-full items-center gap-4 text-center">
-                <span class="font-bold text-2xl">Invite & Win upto <br/> 500 Coyns</span>
+                <span class="font-bold text-2xl">Invite & Win upto <br />500 Coyns</span>
             </div>
             <div class="flex flex-col w-full gap-2 px-4 text-white items-center">
                 <span class="uppercase text-sm md:text-md">Referral Link</span>
-                <Show when=logged_in fallback=|| view! { <ConnectLogin cta_location="refer"/> }>
-                    <ReferCode/>
+                <Show when=logged_in fallback=|| view! { <ConnectLogin cta_location="refer" /> }>
+                    <ReferCode />
                 </Show>
             </div>
             <div class="flex flex-col w-full items-center gap-8 mt-4">
@@ -202,7 +203,7 @@ fn ListSwitcher() -> impl IntoView {
         </div>
         <div class="flex flex-row justify-center">
             <Show when=move || current_tab() == 0 fallback=HistoryView>
-                <ReferView/>
+                <ReferView />
             </Show>
         </div>
     }
@@ -216,14 +217,14 @@ pub fn ReferEarn() -> impl IntoView {
         <div class="flex flex-col items-center min-w-dvw min-h-dvh bg-black pt-2 pb-12 gap-6">
             <Title justify_center=false>
                 <div class="flex flex-row justify-between">
-                    <BackButton fallback="/menu".to_string()/>
+                    <BackButton fallback="/menu".to_string() />
                     <span class="text-lg font-bold text-white">Refer & Earn</span>
                     <div></div>
                 </div>
             </Title>
             <div class="px-8 w-full sm:w-7/12">
                 <Show when=logged_in fallback=ReferView>
-                    <ListSwitcher/>
+                    <ListSwitcher />
                 </Show>
             </div>
         </div>

ssr/src/utils/web.rs

@@ -1,4 +1,61 @@
 use leptos_use::use_window;
+use wasm_bindgen::prelude::*;
+pub struct Share;
+
+#[wasm_bindgen(module = "/public/share.js")]
+extern "C" {
+    fn shareImage(
+        title: Option<&str>,
+        text: Option<&str>,
+        url: Option<&str>,
+        image: Option<js_sys::Array>,
+    );
+}
+
+impl Share {
+    pub fn refer(url: &str) -> Option<()> {
+        #[cfg(not(feature = "hydrate"))]
+        {
+            _ = url;
+            None
+        }
+
+        #[cfg(feature = "hydrate")]
+        {
+            use wasm_bindgen::JsValue;
+
+            const TITLE: &str = "Tap Into YRAL: Watch, Play, and Earn!";
+
+            const TEXT: &str  = "Yral is the best web3 social platform where you get paid to watch, engage, and create content. Powered by Blockchain & AI, YRAL rewards your time and attention with real earnings." ;
+
+            const FILE_URL: &str =
+             "https://drive.google.com/file/d/1OtB9cvC_Yo6wPxlZAUQDU4za8Ypnh9jx/view?usp=drive_link";
+
+            use leptos::window;
+            use web_sys::js_sys::Reflect;
+            let window = window();
+            let nav = window.navigator();
+            if !Reflect::has(&nav, &JsValue::from_str("share")).unwrap_or_default() {
+                return None;
+            }
+
+            shareImage(
+                Some(TITLE),
+                Some(TEXT),
+                Some(url),
+                Some(
+                    vec![FILE_URL.to_string()]
+                        .into_iter()
+                        .map(JsValue::from)
+                        .collect(),
+                ),
+            );
+
+            //   _ = nav.share_with_data(&meta);
+            Some(())
+        }
+    }
+}
 
 /// Share a URL with the Web Share API
 /// returns None if the API is not available
@@ -12,7 +69,8 @@ pub fn share_url(url: &str) -> Option<()> {
     {
         use leptos::window;
         use wasm_bindgen::JsValue;
-        use web_sys::{js_sys::Reflect, ShareData};
+        use web_sys::js_sys::Reflect;
+        use web_sys::ShareData;
         let window = window();
         let nav = window.navigator();
         if !Reflect::has(&nav, &JsValue::from_str("share")).unwrap_or_default() {