diff --git a/resources/images/ui/empty-wallet@2x.png b/resources/images/ui/empty-wallet@2x.png new file mode 100644 index 0000000000..0e605bb533 Binary files /dev/null and b/resources/images/ui/empty-wallet@2x.png differ diff --git a/resources/images/ui/empty-wallet@3x.png b/resources/images/ui/empty-wallet@3x.png new file mode 100644 index 0000000000..6e6e8c5139 Binary files /dev/null and b/resources/images/ui/empty-wallet@3x.png differ diff --git a/src/status_im/react_native/resources.cljs b/src/status_im/react_native/resources.cljs index 7fd06e60ab..551b79bcb5 100644 --- a/src/status_im/react_native/resources.cljs +++ b/src/status_im/react_native/resources.cljs @@ -14,8 +14,9 @@ :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-card (js/require "../resources/images/ui/hardwallet-card.png") :keycard-lock (js/require "../resources/images/ui/keycard-lock.png") :keycard (js/require "../resources/images/ui/keycard.png") :keycard-logo (js/require "../resources/images/ui/keycard-logo.png") diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index e87727191e..167fae1b52 100644 --- a/src/status_im/subs.cljs +++ b/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) diff --git a/src/status_im/ui/components/buy_crypto.cljs b/src/status_im/ui/components/buy_crypto.cljs new file mode 100644 index 0000000000..5fcd78d86d --- /dev/null +++ b/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)}]]]) diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs index c7f97ca6e9..c820455aaf 100644 --- a/src/status_im/ui/screens/wallet/accounts/views.cljs +++ b/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]]))) diff --git a/src/status_im/ui/screens/wallet/events.cljs b/src/status_im/ui/screens/wallet/events.cljs index deba112b6a..30d045abdb 100644 --- a/src/status_im/ui/screens/wallet/events.cljs +++ b/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?)] - {: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))})) + (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))} + (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)}) diff --git a/translations/en.json b/translations/en.json index 26b2d93740..42fa951777 100644 --- a/translations/en.json +++ b/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",