Add permission handling & enable HW acceleration on webview

This extend adding permissions to a separate webview used for buying
crypto.
It also removes a fix with hardware acceleration, as the camera does not
work if disabled.

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>

src/status_im/ui/screens/browser/views.cljs

@@ -112,7 +112,7 @@
 (def resources-to-permissions-map {"android.webkit.resource.VIDEO_CAPTURE" :camera
                                    "android.webkit.resource.AUDIO_CAPTURE" :record-audio})
 
-(views/defview request-resources-panel [resources url]
+(views/defview request-resources-panel [resources url webview-ref]
   [react/view styles/blocked-access-container
    [react/view styles/blocked-access-icon-container
     [icons/icon :main-icons/camera styles/blocked-access-camera-icon]]
@@ -127,8 +127,8 @@
        :on-press (fn []
                    (components.permissions/request-permissions
                     {:permissions (map resources-to-permissions-map resources)
-                     :on-allowed  #(.answerPermissionRequest ^js @webview-ref/webview-ref true resources)
+                     :on-allowed  #(.answerPermissionRequest ^js webview-ref true resources)
-                     :on-denied  #(.answerPermissionRequest ^js @webview-ref/webview-ref false)})
+                     :on-denied  #(.answerPermissionRequest ^js webview-ref false)})
                    (re-frame/dispatch [:bottom-sheet/hide]))}
       (i18n/label :t/allow)]]
     [react/view styles/blocked-access-button-wrapper
@@ -136,7 +136,7 @@
       {:theme    :negative
        :style    styles/blocked-access-button
        :on-press (fn []
-                   (.answerPermissionRequest ^js @webview-ref/webview-ref false)
+                   (.answerPermissionRequest ^js webview-ref false)
                    (re-frame/dispatch [:bottom-sheet/hide]))}
       (i18n/label :t/deny)]]]])
 
@@ -148,10 +148,10 @@
     [react/text {:style styles/blocked-access-text}
      (str url " " (i18n/label :t/page-camera-request-blocked))]]])
 
-(defn request-resources-access-for-page [resources url]
+(defn request-resources-access-for-page [resources url webview-ref]
   (re-frame/dispatch
    [:bottom-sheet/show-sheet
-    {:content        (fn [] [request-resources-panel resources url])
+    {:content        (fn [] [request-resources-panel resources url webview-ref])
      :show-handle?       false
      :backdrop-dismiss?  false
      :disable-drag?      true
@@ -193,7 +193,7 @@
                                                         500))
 
         :on-permission-request                      #(if resources-permission?
-                                                       (request-resources-access-for-page (-> ^js % .-nativeEvent .-resources) url)
+                                                       (request-resources-access-for-page (-> ^js % .-nativeEvent .-resources) url @webview-ref/webview-ref)
                                                        (block-resources-access-and-notify-user url))
         ;; Extract event data here due to
         ;; https://reactjs.org/docs/events.html#event-pooling

src/status_im/ui/screens/wallet/buy_crypto/views.cljs

@@ -6,6 +6,7 @@
             [status-im.ui.screens.wallet.buy-crypto.sheets :as sheets]
             [status-im.ui.components.icons.icons :as icons]
             [status-im.ui.screens.chat.photos :as photos]
+            [status-im.ui.screens.browser.views :as browser.views]
             [quo.core :as quo]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
@@ -14,6 +15,8 @@
 
 (def learn-more-url "")
 
+(def webview-ref (atom nil))
+
 (defn on-buy-crypto-pressed []
   (re-frame/dispatch [:buy-crypto.ui/open-screen]))
 
@@ -65,7 +68,8 @@
                 logo-url
                 site-url]} (get-in route [:route :params])]
     (fn []
-      [react/view {:flex 1}
+      ;; overflow hidden needed for the crash on android
+      [react/view {:flex 1 :overflow :hidden}
        [topbar/topbar {:content [react/view {:flex 1
                                              :align-items :center
                                              :justify-content :center}
@@ -81,6 +85,8 @@
                               :top 0
                               :left 0
                               :right 0
+                              :z-index 1
+                              :background-color "#ffffff"
                               :bottom 0
                               :align-items :center
                               :justify-content :center}}
@@ -94,9 +100,15 @@
             (i18n/label :t/buy-crypto-leaving)]]])
        [components.webview/webview
         {:onLoadEnd #(reset! has-loaded? true)
-         ;; NOTE: without this it crashes on android 11
+         :ref #(reset! webview-ref %)
-         :androidHardwareAccelerationDisabled true
+         :on-permission-request #(browser.views/request-resources-access-for-page
-         :containerStyle (when-not @has-loaded? {:opacity 0})
+                                  (-> ^js % .-nativeEvent .-resources) site-url @webview-ref)
+         :java-script-enabled true
+         ;; This is to avoid crashes on android devices
+         ;; due to https://github.com/react-native-webview/react-native-webview/issues/1838
+         ;; We can't disable hardware acceleration as we need to use camera
+         :style {:opacity 0.99}
+         :local-storage-enabled true
          :source {:uri site-url}}]])))
 
 (defn container []