Add buy crypto banner UI

Store in local storage banner preference

Add i18n

src/status_im/react_native/resources.cljs

@@ -14,6 +14,7 @@
    :keys               (js/require "../resources/images/ui/keys.jpg")
    :keys-dark          (js/require "../resources/images/ui/keys-dark.jpg")
    :lock               (js/require "../resources/images/ui/lock.png")
+   :empty-wallet       (js/require "../resources/images/ui/empty-wallet.png")
    :tribute-to-talk    (js/require "../resources/images/ui/tribute-to-talk.png")
    :keycard-card       (js/require "../resources/images/ui/hardwallet-card.png")
    :keycard-lock       (js/require "../resources/images/ui/keycard-lock.png")

src/status_im/subs.cljs

@@ -171,6 +171,7 @@
 (reg-root-key-sub :wallet/recipient :wallet/recipient)
 (reg-root-key-sub :wallet/favourites :wallet/favourites)
 (reg-root-key-sub :wallet/refreshing-history? :wallet/refreshing-history?)
+(reg-root-key-sub :wallet/buy-crypto-hidden :wallet/buy-crypto-hidden)
 
 ;;commands
 (reg-root-key-sub :commands/select-account :commands/select-account)

src/status_im/ui/components/buy_crypto.cljs

@@ -0,0 +1,34 @@
+(ns status-im.ui.components.buy-crypto
+  (:require [quo.react-native :as rn]
+            [quo.design-system.colors :as colors]
+            [quo.core :as quo]
+            [status-im.react-native.resources :as resources]
+            [status-im.ui.components.icons.vector-icons :as vector-icons]
+            [status-im.i18n :as i18n]))
+
+(defn banner [{:keys [on-close on-open]}]
+  [rn/view {:style {:border-radius    16
+                    :background-color (colors/get-color :interactive-02)
+                    :flex-direction   :row
+                    :justify-content  :space-between}}
+   [rn/touchable-opacity {:style    {:padding-horizontal 8
+                                     :padding-vertical   10
+                                     :flex               1
+                                     :flex-direction     :row
+                                     :align-items        :center}
+                          :on-press on-open}
+    [rn/image {:source (resources/get-image :empty-wallet)
+               :style  {:width  40
+                        :height 40}}]
+    [rn/view {:style {:padding-left 16
+                      :flex         1}}
+     [quo/text {:weight          :bold
+                :number-of-lines 1
+                :ellipsize-mode  :tail}
+      (i18n/label :t/buy-crypto-title)]
+     [quo/text {:color :link}
+      (i18n/label :t/buy-crypto-description)
+      " →"]]]
+   [rn/touchable-opacity {:style    {:padding 4}
+                          :on-press on-close}
+    [vector-icons/icon :main-icons/close-circle {:color (colors/get-color :icon-02)}]]])

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

@@ -4,6 +4,8 @@
             [re-frame.core :as re-frame]
             [reagent.core :as reagent]
             [status-im.i18n :as i18n]
+            [status-im.ui.screens.wallet.events :as wallet.events]
+            [status-im.ui.components.buy-crypto :as buy-crypto]
             [status-im.ui.components.chat-icon.screen :as chat-icon]
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.icons.vector-icons :as icons]
@@ -16,6 +18,8 @@
             [status-im.keycard.login :as keycard.login])
   (:require-macros [status-im.utils.views :as views]))
 
+(def crypto-onramp-link "https://dap.ps/discover-dapps/categories/CRYPTO_ONRAMPS")
+
 (views/defview account-card [{:keys [name color address type] :as account} keycard? card-width]
   (views/letsubs [currency        [:wallet/currency]
                   portfolio-value [:account-portfolio-value address]
@@ -191,6 +195,16 @@
         [quo/text {:color :secondary}
          (i18n/label :t/wallet-total-value)]])]))
 
+(defn buy-crypto []
+  (let [empty-balances    @(re-frame/subscribe [:empty-balances?])
+        buy-crypto-hidden @(re-frame/subscribe [:wallet/buy-crypto-hidden])]
+    (when (and empty-balances
+               (not buy-crypto-hidden))
+      [react/view {:style {:padding-horizontal 8
+                           :padding-top        24}}
+       [buy-crypto/banner {:on-open  #(re-frame/dispatch [:browser.ui/open-url crypto-onramp-link])
+                           :on-close #(re-frame/dispatch [::wallet.events/hide-buy-crypto])}]])))
+
 (defn accounts-overview []
   (fn []
     (let [mnemonic @(re-frame/subscribe [:mnemonic])]
@@ -209,5 +223,6 @@
                               :accessibility-label :accounts-more-options}]}
         [accounts]
         [assets]
+        [buy-crypto]
         [react/view {:height 68}]]
        [send-button]])))

src/status_im/ui/screens/wallet/events.cljs

@@ -1,20 +1,41 @@
 (ns status-im.ui.screens.wallet.events
   (:require [status-im.ui.screens.wallet.signing-phrase.views :as signing-phrase]
             [status-im.utils.handlers :as handlers]
+            [status-im.async-storage.core :as async-storage]
+            [re-frame.core :as re-frame]
             [status-im.utils.fx :as fx]))
 
+(fx/defn get-buy-crypto-preference
+  {:events [::get-buy-crypto]}
+  [_]
+  {::async-storage/get {:keys [:buy-crypto-hidden]
+                        :cb   #(re-frame/dispatch [::store-buy-crypto-preference %])}})
+
 (fx/defn wallet-will-focus
   {:events [::wallet-stack]}
-  [{:keys [db]}]
+  [{:keys [db] :as cofx}]
   (let [wallet-set-up-passed? (get-in db [:multiaccount :wallet-set-up-passed?])
         sign-phrase-showed? (get db :wallet/sign-phrase-showed?)]
+    (fx/merge cofx
               {:dispatch [:wallet.ui/pull-to-refresh] ;TODO temporary simple fix for v1
                :db       (if (or wallet-set-up-passed? sign-phrase-showed?)
                            db
                            (assoc db :popover/popover {:view [signing-phrase/signing-phrase]}
-                        :wallet/sign-phrase-showed? true))}))
+                                  :wallet/sign-phrase-showed? true))}
+              (get-buy-crypto-preference))))
 
 (handlers/register-handler-fx
  ::wallet-add-custom-token
  (fn [{:keys [db]}]
    {:db (dissoc db :wallet/custom-token-screen)}))
+
+(fx/defn hide-buy-crypto
+  {:events [::hide-buy-crypto]}
+  [{:keys [db]}]
+  {:db                  (assoc db :wallet/buy-crypto-hidden true)
+   ::async-storage/set! {:buy-crypto-hidden true}})
+
+(fx/defn store-buy-crypto
+  {:events [::store-buy-crypto-preference]}
+  [{:keys [db]} {:keys [buy-crypto-hidden]}]
+  {:db (assoc db :wallet/buy-crypto-hidden buy-crypto-hidden)})

translations/en.json

@@ -775,6 +775,8 @@
     "seed-phrase-content": "A set of friendly-to-read words, randomly selected from the BIP39 standard list and used to recover or access your Ethereum account on other wallets and devices. Also referred to as a “mnemonic phrase,” “recovery phrase” or “wallet backup” across the crypto ecosystem. Most crypto apps use this same standard to generate accounts.",
     "wallet-key-title": "Account address",
     "wallet-key-content": "A 64 character hex address based on the Ethereum standard and beginning with 0x. Public-facing, your account address is shared with others when you want to receive funds. Also referred to as an “Ethereum address” or “wallet address.”",
+    "buy-crypto-title": "Looks like your wallet is empty",
+    "buy-crypto-description": "Find a dapp to buy crypto now",
     "network": "Network",
     "network-chain": "Network chain",
     "network-details": "Network details",