feat(wallet)_: Add beta info box in activity tab (#20873)

This commit adds the beta info box with links to chain explorers to the activity tab in the wallet.

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

src/status_im/contexts/wallet/common/activity_tab/view.cljs

@@ -1,9 +1,11 @@
 (ns status-im.contexts.wallet.common.activity-tab.view
   (:require
+    [clojure.string :as string]
     [quo.core :as quo]
     [quo.theme]
     [react-native.core :as rn]
     [status-im.common.resources :as resources]
+    [status-im.constants :as constants]
     [status-im.contexts.shell.jump-to.constants :as jump-to.constants]
     [status-im.contexts.wallet.common.empty-tab.view :as empty-tab]
     [utils.i18n :as i18n]
@@ -80,6 +82,10 @@
 ;                        :network-logo network-logo}
 ;    :blur?             false}])
 
+(defn- section-header
+  [{:keys [title]}]
+  [quo/divider-date title])
+
 (defn activity-item
   [{:keys [transaction] :as activity}]
   (case transaction
@@ -88,20 +94,63 @@
     ;; :mint            [mint-activity activity]
     nil))
 
+(defn- pressable-text
+  [{:keys [on-press text]}]
+  [rn/text
+   {:style    {:text-decoration-line :underline}
+    :on-press on-press}
+   text])
+
 (defn view
   []
-  (let [theme         (quo.theme/use-theme)
+  (let [theme                    (quo.theme/use-theme)
-        activity-list (rf/sub [:wallet/activities-for-current-viewing-account])]
+        address                  (rf/sub [:wallet/current-viewing-account-address])
-    (if (empty? activity-list)
+        activity-list            (rf/sub [:wallet/activities-for-current-viewing-account])
-      [empty-tab/view
+        open-eth-chain-explorer  (rn/use-callback
-       {:title       (i18n/label :t/no-activity)
+                                  #(rf/dispatch [:wallet/navigate-to-chain-explorer
-        :description (i18n/label :t/empty-tab-description)
+                                                 {:address address
-        :image       (resources/get-themed-image :no-activity theme)}]
+                                                  :network constants/mainnet-network-name}])
-      [rn/section-list
+                                  [address])
-       {:sections                       activity-list
+        open-oeth-chain-explorer (rn/use-callback
-        :sticky-section-headers-enabled false
+                                  #(rf/dispatch [:wallet/navigate-to-chain-explorer
-        :style                          {:flex               1
+                                                 {:address address
-                                         :padding-horizontal 8}
+                                                  :network constants/optimism-network-name}])
-        :content-container-style        {:padding-bottom jump-to.constants/floating-shell-button-height}
+                                  [address])
-        :render-fn                      activity-item
+        open-arb-chain-explorer  (rn/use-callback
-        :render-section-header-fn       (fn [{:keys [title]}] [quo/divider-date title])}])))
+                                  #(rf/dispatch [:wallet/navigate-to-chain-explorer
+                                                 {:address address
+                                                  :network constants/arbitrum-network-name}])
+                                  [address])]
+    [:<>
+     [quo/information-box
+      {:type      :informative
+       :icon      :i/info
+       :closable? false
+       :style     {:margin-horizontal 20 :margin-vertical 8}}
+      [:<>
+       (str (i18n/label :t/wallet-activity-beta-message) " ")
+       [pressable-text
+        {:on-press open-eth-chain-explorer
+         :text     (i18n/label :t/etherscan)}]
+       ", "
+       [pressable-text
+        {:on-press open-oeth-chain-explorer
+         :text     (i18n/label :t/op-explorer)}]
+       (str ", " (string/lower-case (i18n/label :t/or)) " ")
+       [pressable-text
+        {:on-press open-arb-chain-explorer
+         :text     (i18n/label :t/arbiscan)}]
+       "."]]
+     (if (empty? activity-list)
+       [empty-tab/view
+        {:title       (i18n/label :t/no-activity)
+         :description (i18n/label :t/empty-tab-description)
+         :image       (resources/get-themed-image :no-activity theme)}]
+       [rn/section-list
+        {:sections                       activity-list
+         :sticky-section-headers-enabled false
+         :style                          {:flex               1
+                                          :padding-horizontal 8}
+         :content-container-style        {:padding-bottom jump-to.constants/floating-shell-button-height}
+         :render-fn                      activity-item
+         :render-section-header-fn       section-header}])]))

translations/en.json

@@ -142,6 +142,7 @@
   "approved-amount-symbol": "Approved {{amount}} {{symbol}}",
   "approving-amount-symbol": "Approving {{amount}} {{symbol}}...",
   "apr": "Apr",
+  "arbiscan": "Arbiscan",
   "arbitrum": "Arbitrum",
   "are-not-allowed": "{{check} are not allowed",
   "are-you-sure": "Are you sure?",
@@ -975,6 +976,7 @@
   "ethereum-address": "Ethereum address",
   "ethereum-node-started-incorrectly-description": "Ethereum node was started with incorrect configuration, application will be stopped to recover from that condition. Configured network id = {{network-id}}, actual = {{fetched-network-id}}",
   "ethereum-node-started-incorrectly-title": "Ethereum node started incorrectly",
+  "etherscan": "Etherscan",
   "etherscan-lookup": "Look up on Etherscan",
   "everyone": "Everyone",
   "everyone-mention": "everyone",
@@ -1760,6 +1762,7 @@
   "oops-this-qr-does-not-contain-an-address": "Oops! This QR does not contain an address",
   "oops-wrong-password": "Oops, wrong password!",
   "oops-wrong-word": "Oops! Wrong word",
+  "op-explorer": "OP Explorer",
   "open": "Open",
   "open-chat": "Open chat",
   "open-dapp": "Open ÐApp",
@@ -2620,6 +2623,7 @@
   "wakuv2-node-format": "/ip4/{node-ip}/tcp/{port}/p2p/{id}",
   "wakuv2-settings": "Waku v2 settings",
   "wallet": "Wallet",
+  "wallet-activity-beta-message": "Activity is in beta. If transactions are missing, check",
   "wallet-address": "Wallet address",
   "wallet-asset": "Asset",
   "wallet-assets": "Assets",