Link preview generation

modules/react-native-status/android/src/main/java/im/status/ethereum/module/StatusModule.java

@@ -1324,7 +1324,6 @@ public void run() {
         StatusThreadPoolExecutor.getInstance().execute(r);
     }
 
-
     @ReactMethod
     public void getNodesFromContract(final String rpcEndpoint, final String contractAddress, final Callback callback) {
         Log.d(TAG, "getNodesFromContract");

src/status_im/chat/models/link_preview.cljs

@@ -0,0 +1,58 @@
+(ns status-im.chat.models.link-preview
+  (:require [re-frame.core :as re-frame]
+            [status-im.utils.fx :as fx]
+            [status-im.multiaccounts.update.core :as multiaccounts.update]
+            [status-im.ethereum.json-rpc :as json-rpc]
+            [taoensso.timbre :as log]))
+
+(fx/defn enable
+  {:events [::enable]}
+  [{{:keys [multiaccount]} :db :as cofx} site enabled?]
+  (fx/merge cofx
+            (multiaccounts.update/multiaccount-update
+             :link-previews-enabled-sites
+             (if enabled?
+               (conj (get multiaccount :link-previews-enabled-sites #{}) site)
+               (disj (get multiaccount :link-previews-enabled-sites #{}) site))
+             {})))
+
+(fx/defn load-link-preview-data
+  {:events [::load-link-preview-data]}
+  [cofx link]
+  (fx/merge cofx
+            {::json-rpc/call [{:method     (json-rpc/call-ext-method "getLinkPreviewData")
+                               :params     [link]
+                               :on-success #(re-frame/dispatch [::cache-link-preview-data link %])
+                               :on-error   #(log/error "Can't get preview data for " link)}]}))
+
+(fx/defn cache-link-preview-data
+  {:events [::cache-link-preview-data]}
+  [{{:keys [multiaccount]} :db :as cofx} site {:keys [error] :as data}]
+  (when-not error
+    (multiaccounts.update/optimistic
+     cofx
+     :link-previews-cache
+     (assoc (get multiaccount :link-previews-cache {}) site data))))
+
+(fx/defn should-suggest-link-preview
+  {:events [::should-suggest-link-preview]}
+  [{:keys [db] :as cofx} enabled?]
+  (multiaccounts.update/multiaccount-update
+   cofx
+   :link-preview-request-enabled (boolean enabled?)
+   {}))
+
+(fx/defn request-link-preview-whitelist
+  [_]
+  {::json-rpc/call [{:method     (json-rpc/call-ext-method "getLinkPreviewWhitelist")
+                     :params     []
+                     :on-success #(re-frame/dispatch [::link-preview-whitelist-received %])
+                     :on-error   #(log/error "Failed to get link preview whitelist")}]})
+
+(fx/defn save-link-preview-whitelist
+  {:events [::link-preview-whitelist-received]}
+  [cofx whitelist]
+  (fx/merge cofx
+            (multiaccounts.update/multiaccount-update
+             :link-previews-whitelist whitelist {})))
+

src/status_im/constants.cljs

@@ -124,7 +124,9 @@
    :currency :usd
    :appearance 0
    :log-level config/log-level
-   :webview-allow-permission-requests? false})
+   :webview-allow-permission-requests? false
+   :link-previews-enabled-sites #{}
+   :link-preview-request-enabled true})
 
 (defn default-visible-tokens [chain]
   (get-in default-multiaccount [:wallet/visible-tokens chain]))

src/status_im/data_store/messages.cljs

@@ -37,10 +37,11 @@
                        :ens-name (:ensName message)
                        :line-count (:lineCount message)
                        :parsed-text (:parsedText message)
+                       :links (:links message)
                        :rtl? (:rtl message)
                        :response-to (:responseTo message)}
              :outgoing (boolean (:outgoingStatus message)))
-      (dissoc :ensName :chatId :text :rtl :responseTo :image :sticker :lineCount :parsedText)))
+      (dissoc :ensName :chatId :text :rtl :responseTo :image :sticker :lineCount :parsedText :links)))
 
 (defn update-outgoing-status-rpc [message-id status]
   {::json-rpc/call [{:method (json-rpc/call-ext-method "updateMessageOutgoingStatus")

src/status_im/data_store/messages_test.cljs

@@ -17,7 +17,8 @@
                                :parsed-text "parsed-text"
                                :rtl? false
                                :image nil
-                               :response-to "a"}
+                               :response-to "a"
+                               :links nil}
                      :whisper-timestamp 1
                      :outgoing-status :sending
                      :command-parameters nil

src/status_im/data_store/settings.cljs

@@ -40,6 +40,7 @@
       (update :pinned-mailservers rpc->pinned-mailservers)
       (update :stickers/packs-installed rpc->stickers-packs)
       (update :stickers/packs-pending set)
+      (update :link-previews-enabled-sites set)
       (update :custom-bootnodes rpc->custom-bootnodes)
       (update :custom-bootnodes-enabled? rpc->custom-bootnodes)
       (update :currency keyword)))

src/status_im/ethereum/json_rpc.cljs

@@ -81,6 +81,8 @@
    "wakuext_sendEmojiReaction" {}
    "wakuext_sendEmojiReactionRetraction" {}
    "wakuext_emojiReactionsByChatID" {}
+   "wakuext_getLinkPreviewWhitelist" {}
+   "wakuext_getLinkPreviewData" {}
    ;;TODO not used anywhere?
    "wakuext_deleteChat" {}
    "wakuext_saveContact" {}

src/status_im/multiaccounts/login/core.cljs

@@ -29,7 +29,8 @@
             [status-im.wallet.prices :as prices]
             [status-im.acquisition.core :as acquisition]
             [taoensso.timbre :as log]
-            [status-im.data-store.invitations :as data-store.invitations]))
+            [status-im.data-store.invitations :as data-store.invitations]
+            [status-im.chat.models.link-preview :as link-preview]))
 
 (re-frame/reg-fx
  ::login
@@ -210,7 +211,8 @@
               (mobile-network/on-network-status-change)
               (get-group-chat-invitations)
               (logging/set-log-level (:log-level multiaccount))
-              (multiaccounts/switch-preview-privacy-mode-flag))))
+              (multiaccounts/switch-preview-privacy-mode-flag)
+              (link-preview/request-link-preview-whitelist))))
 
 (defn get-new-auth-method [auth-method save-password?]
   (when save-password?
@@ -274,6 +276,7 @@
                                              :mailserver-topics  {}
                                              :default-mailserver true})
               (multiaccounts/switch-preview-privacy-mode-flag)
+              (link-preview/request-link-preview-whitelist)
               (logging/set-log-level (:log-level multiaccount)))))
 
 (defn- keycard-setup? [cofx]

src/status_im/native_module/core.cljs

@@ -385,6 +385,17 @@
   (log/debug "[native-module] deactivateKeepAwake")
   (.deactivateKeepAwake ^js (status)))
 
+(defn link-preview-whitelist
+  "Get link preview whitelist"
+  [callback]
+  (.getLinkPreviewWhitelist ^js (status) #(callback (types/json->clj %))))
+
+(defn link-preview-data
+  "Get link preview data"
+  [link callback]
+  (log/debug "[native-module] link-preview-data")
+  (.getLinkPreviewData ^js (status) link #(callback (types/json->clj %))))
+
 (defn reset-keyboard-input [input selection]
   (log/debug "[native-module] resetKeyboardInput")
   (when platform/android?

src/status_im/react_native/resources.cljs

@@ -34,6 +34,8 @@
    :dapp-store         (js/require "../resources/images/ui/dapp-store.png")
    :ens-header         (js/require "../resources/images/ui/ens-header.png")
    :ens-header-dark    (js/require "../resources/images/ui/ens-header-dark.png")
+   :unfurl             (js/require "../resources/images/ui/unfurl.png")
+   :unfurl-dark        (js/require "../resources/images/ui/unfurl-dark.png")
    :new-chat-header    (js/require "../resources/images/ui/new-chat-header.png")
    :onboarding-phone   (js/require "../resources/images/ui/onboarding-phone.png")
    :theme-dark         (js/require "../resources/images/ui/theme-dark.png")

src/status_im/subs.cljs

@@ -2339,3 +2339,29 @@
  :<- [:networks/manage]
  (fn [manage]
    (not-any? :error (vals manage))))
+
+;; LINK PREVIEW ========================================================================================================
+
+(re-frame/reg-sub
+ :link-preview/whitelist
+ :<- [:multiaccount]
+ (fn [multiaccount]
+   (get multiaccount :link-previews-whitelist)))
+
+(re-frame/reg-sub
+ :link-preview/cache
+ :<- [:multiaccount]
+ (fn [multiaccount]
+   (get multiaccount :link-previews-cache)))
+
+(re-frame/reg-sub
+ :link-preview/enabled-sites
+ :<- [:multiaccount]
+ (fn [multiaccount]
+   (get multiaccount :link-previews-enabled-sites)))
+
+(re-frame/reg-sub
+ :link-preview/link-preview-request-enabled
+ :<- [:multiaccount]
+ (fn [multiaccount]
+   (get multiaccount :link-preview-request-enabled)))

src/status_im/ui/screens/chat/message/link_preview.cljs

@@ -0,0 +1,97 @@
+(ns status-im.ui.screens.chat.message.link-preview
+  (:require [re-frame.core :as re-frame]
+            [clojure.string :as string]
+            [status-im.ui.components.react :as react]
+            [quo.core :as quo]
+            [status-im.utils.security :as security]
+            [status-im.i18n :as i18n]
+            [status-im.ui.screens.chat.message.styles :as styles]
+            [status-im.react-native.resources :as resources]
+            [status-im.chat.models.link-preview :as link-preview])
+  (:require-macros [status-im.utils.views :refer [defview letsubs]]))
+
+(defn link-belongs-to-domain [link domain]
+  (cond
+    (string/starts-with? link (str "https://" domain)) true
+    (string/starts-with? link (str "https://www." domain)) true
+    :else false))
+
+(defn domain-info-if-whitelisted [link whitelist]
+  (first (filter
+          #(link-belongs-to-domain link (:address %))
+          whitelist)))
+
+(defn link-extended-info [link whitelist enabled-list]
+  (let [domain-info (domain-info-if-whitelisted link whitelist)]
+    {:whitelisted (not (nil? domain-info))
+     :enabled (contains? enabled-list (:title domain-info))
+     :link link}))
+
+(defn previewable-link [links whitelist enabled-list]
+  (->> links
+       (map #(link-extended-info % whitelist enabled-list))
+       (filter #(:whitelisted %))
+       (first)))
+
+(defview link-preview-enable-request []
+  [react/view styles/link-preview-request-wrapper
+   [react/view {:margin 12}
+    [react/image {:source (resources/get-theme-image :unfurl)
+                  :style  styles/link-preview-request-image}]
+    [quo/text {:size :small
+               :align :center
+               :style {:margin-top 6}}
+     (i18n/label :t/enable-link-previews)]
+    [quo/text {:size :small
+               :color :secondary
+               :align :center
+               :style {:margin-top 2}}
+     (i18n/label :t/once-enabled-share-metadata)]]
+   [quo/separator]
+   [quo/button {:on-press #(re-frame/dispatch [:navigate-to :link-preview-settings])
+                :type     :secondary}
+    (i18n/label :enable)]
+   [quo/separator]
+   [quo/button {:on-press #(re-frame/dispatch
+                            [::link-preview/should-suggest-link-preview false])
+                :type     :secondary}
+    (i18n/label :t/dont-ask)]])
+
+(defview link-preview-loader [link outgoing]
+  (letsubs [cache [:link-preview/cache]]
+    (let [{:keys [site title thumbnailUrl] :as preview-data} (get cache link)]
+      (if (not preview-data)
+        (do
+          (re-frame/dispatch
+           [::link-preview/load-link-preview-data link])
+          nil)
+
+        [react/touchable-highlight
+         {:on-press #(when (and (security/safe-link? link))
+                       (re-frame/dispatch
+                        [:browser.ui/message-link-pressed link]))}
+
+         [react/view (styles/link-preview-wrapper outgoing)
+          [react/image {:source              {:uri thumbnailUrl}
+                        :style               (styles/link-preview-image outgoing)
+                        :accessibility-label :member-photo}]
+          [quo/text {:size :small
+                     :style styles/link-preview-title}
+           title]
+          [quo/text {:size :small
+                     :color :secondary
+                     :style styles/link-preview-site}
+           site]]]))))
+
+(defview link-preview-wrapper [links outgoing]
+  (letsubs
+    [ask-user? [:link-preview/link-preview-request-enabled]
+     whitelist [:link-preview/whitelist]
+     enabled-sites   [:link-preview/enabled-sites]]
+    (let [link-info (previewable-link links whitelist enabled-sites)
+          {:keys [link whitelisted enabled]} link-info]
+      (when (and link whitelisted)
+        (if enabled
+          [link-preview-loader link outgoing]
+          (when ask-user?
+            [link-preview-enable-request]))))))

src/status_im/ui/screens/chat/message/message.cljs

@@ -17,7 +17,8 @@
             [status-im.ui.screens.chat.message.reactions :as reactions]
             [quo.core :as quo]
             [reagent.core :as reagent]
-            [status-im.ui.screens.chat.components.reply :as components.reply])
+            [status-im.ui.screens.chat.components.reply :as components.reply]
+            [status-im.ui.screens.chat.message.link-preview :as link-preview])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defview mention-element [from]
@@ -213,7 +214,8 @@
         [message-author-name from modal]])
      ;;MESSAGE CONTENT
      [react/view
-      content]]]
+      content]
+     [link-preview/link-preview-wrapper (:links (:content message)) outgoing]]]
    ; delivery status
    [react/view (style/delivery-status outgoing)
     [message-delivery-status message]]])

src/status_im/ui/screens/chat/message/styles.cljs

@@ -1,6 +1,7 @@
 (ns status-im.ui.screens.chat.message.styles
   (:require [quo.design-system.colors :as colors]
-            [status-im.ui.screens.chat.styles.photos :as photos]))
+            [status-im.ui.screens.chat.styles.photos :as photos]
+            [status-im.ui.components.colors :as components.colors]))
 
 (defn picker-wrapper-style [{:keys [display-photo? outgoing]}]
   (merge {:flex-direction :row
@@ -84,3 +85,41 @@
            {:background-color (:interactive-02 @colors/theme)
             ;; FIXME: Use broder color here
             :border-color     "rgba(67, 96, 223, 0.2)"})))
+
+(def link-preview-request-wrapper
+  {:border-radius 16
+   :border-width 1
+   :border-color components.colors/gray-lighter
+   :margin-vertical 4})
+
+(def link-preview-request-image
+  {:width 132
+   :height 94
+   :align-self :center})
+
+(defn link-preview-wrapper [outgoing]
+  {:overflow                   :hidden
+   :border-top-left-radius     16
+   :border-top-right-radius    16
+   :border-bottom-left-radius  (if outgoing 16 4)
+   :border-bottom-right-radius (if outgoing 4 16)
+   :border-width               1
+   :border-color               components.colors/gray-lighter
+   :margin-vertical            4})
+
+(defn link-preview-image [outgoing]
+  {:height                     170
+   :overflow                   :hidden
+   :border-top-left-radius     16
+   :border-top-right-radius    16
+   :border-bottom-left-radius  (if outgoing 16 4)
+   :border-bottom-right-radius (if outgoing 4 16)})
+
+(def link-preview-title
+  {:margin-horizontal 12
+   :margin-top        10})
+
+(def link-preview-site
+  {:margin-horizontal 12
+   :margin-top        2
+   :margin-bottom     10})

src/status_im/ui/screens/link_previews_settings/styles.cljs

@@ -0,0 +1,13 @@
+(ns status-im.ui.screens.link-previews-settings.styles)
+
+(def link-preview-settings-image
+  {:height     100
+   :align-self :center
+   :margin-top 16})
+
+(def whitelist-container
+  {:flex-direction  :row
+   :justify-content :space-between})
+
+(def enable-all
+  {:align-self :flex-end})