diff --git a/src/quo2/components/settings/category/reorder/view.cljs b/src/quo2/components/settings/category/reorder/view.cljs index e51954531b..76e79c73b2 100644 --- a/src/quo2/components/settings/category/reorder/view.cljs +++ b/src/quo2/components/settings/category/reorder/view.cljs @@ -4,7 +4,6 @@ [quo2.components.settings.reorder-item.types :as types] [quo2.components.settings.reorder-item.view :as reorder-item] [quo2.foundations.colors :as colors] - [react-native.blur :as blur] [react-native.core :as rn] [quo2.components.settings.category.style :as style] [quo2.theme :as quo.theme] @@ -20,8 +19,6 @@ [{:keys [label data blur? theme]}] (reagent/with-let [atom-data (reagent/atom data)] [rn/view {:style style/container} - (when blur? - [rn/view (style/blur-container) [blur/view (style/blur-view)]]) [text/text {:weight :medium :size :paragraph-2 diff --git a/src/quo2/components/settings/category/settings/view.cljs b/src/quo2/components/settings/category/settings/view.cljs index ec34c35ad6..7e1e7ebfb9 100644 --- a/src/quo2/components/settings/category/settings/view.cljs +++ b/src/quo2/components/settings/category/settings/view.cljs @@ -3,7 +3,6 @@ [quo2.components.markdown.text :as text] [quo2.components.settings.settings-item.view :as settings-item] [quo2.foundations.colors :as colors] - [react-native.blur :as blur] [react-native.core :as rn] [quo2.components.settings.category.style :as style] [quo2.theme :as quo.theme])) @@ -11,8 +10,6 @@ (defn- category-internal [{:keys [label data blur? theme]}] [rn/view {:style style/container} - (when blur? - [rn/view (style/blur-container) [blur/view (style/blur-view)]]) [text/text {:weight :medium :size :paragraph-2 diff --git a/src/status_im2/contexts/quo_preview/settings/category.cljs b/src/status_im2/contexts/quo_preview/settings/category.cljs index 0fbe39b5c9..2fe9f02106 100644 --- a/src/status_im2/contexts/quo_preview/settings/category.cljs +++ b/src/status_im2/contexts/quo_preview/settings/category.cljs @@ -1,10 +1,6 @@ (ns status-im2.contexts.quo-preview.settings.category (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] - [quo2.theme :as theme] - [react-native.core :as rn] - [react-native.fast-image :as fast-image] [reagent.core :as reagent] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) @@ -50,50 +46,26 @@ (defn preview [] - (let [state (reagent/atom {:label "Label" - :size "5" - :blur? false - :right-icon? true - :image? true - :subtitle? true - :list-type :settings}) - {:keys [width height]} (rn/get-window)] + (let [state (reagent/atom {:label "Label" + :size "5" + :blur? false + :right-icon? true + :image? true + :subtitle? true + :list-type :settings})] (fn [] (let [data (reagent/atom (create-item-array (max (js/parseInt (:size @state)) 1) @state))] - [:f> - (fn [] - (rn/use-effect (fn [] - (if (:blur? @state) - (theme/set-theme :dark) - (theme/set-theme :light)) - (reset! data (create-item-array (max (js/parseInt (:size @state)) 1) - @state))) - [(:blur? @state) (:right-icon? @state) (:image? @state) (:subtitle? @state)]) - [preview/preview-container - {:state state - :descriptor (if (= (:list-type @state) :settings) settings-descriptor reorder-descriptor)} - [rn/view - {:style {:flex 1 - :padding-bottom 150 - :margin-bottom 50 - :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}} - [rn/view - {:style {:min-height 200 - :z-index 1}} - [preview/customizer state - (if (= (:list-type @state) :settings) settings-descriptor reorder-descriptor)]] - (when (:blur? @state) - [fast-image/fast-image - {:source (resources/get-mock-image :dark-blur-bg) - :style {:width width - :height height - :position :absolute}}]) - [rn/view - {:style {:background-color (if (:blur? @state) - colors/neutral-80-opa-80 - (colors/theme-colors colors/neutral-5 colors/neutral-95))}} - [quo/category - {:list-type (:list-type @state) - :label (:label @state) - :data @data - :blur? (:blur? @state)}]]]])])))) + [preview/preview-container + {:state state + :descriptor (if (= (:list-type @state) :settings) + settings-descriptor + reorder-descriptor) + :blur? (:blur? @state) + :show-blur-background? true + :blur-dark-only? true + :blur-height 400} + [quo/category + {:list-type (:list-type @state) + :label (:label @state) + :data @data + :blur? (:blur? @state)}]])))) diff --git a/src/status_im2/contexts/wallet/account/tabs/dapps/style.cljs b/src/status_im2/contexts/wallet/account/tabs/dapps/style.cljs new file mode 100644 index 0000000000..a1ef8f7e33 --- /dev/null +++ b/src/status_im2/contexts/wallet/account/tabs/dapps/style.cljs @@ -0,0 +1,18 @@ +(ns status-im2.contexts.wallet.account.tabs.dapps.style + (:require + [quo2.foundations.colors :as colors])) + +(def dapps-container + {:padding-horizontal 20 + :padding-vertical 8}) + +(defn dapps-list + [theme] + {:border-radius 16 + :border-width 1 + :border-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)}) + +(defn separator + [theme] + {:height 1 + :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)}) diff --git a/src/status_im2/contexts/wallet/account/tabs/dapps/view.cljs b/src/status_im2/contexts/wallet/account/tabs/dapps/view.cljs new file mode 100644 index 0000000000..02ae21d579 --- /dev/null +++ b/src/status_im2/contexts/wallet/account/tabs/dapps/view.cljs @@ -0,0 +1,39 @@ +(ns status-im2.contexts.wallet.account.tabs.dapps.view + (:require [quo2.core :as quo] + [quo2.theme :as quo.theme] + [react-native.core :as rn] + [utils.i18n :as i18n] + [status-im2.contexts.wallet.account.tabs.dapps.style :as style] + [status-im2.contexts.wallet.common.temp :as temp] + [utils.re-frame :as rf] + [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab])) + +(defn dapp-options + [] + [quo/action-drawer + [[{:icon :i/browser + :accessibility-label :visit-dapp + :label (i18n/label :t/visit-dapp)} + {:icon :i/disconnect + :accessibility-label :disconnect-dapp + :label (i18n/label :t/disconnect-dapp) + :add-divider? true + :danger? true}]]]) + +(defn- view-internal + [{:keys [theme]}] + (let [dapps-list (temp/dapps-list {:on-press-icon #(rf/dispatch [:show-bottom-sheet + {:content dapp-options}])})] + (if (empty? dapps-list) + [empty-tab/view + {:title (i18n/label :t/no-dapps) + :description (i18n/label :t/no-collectibles-description) + :placeholder? true}] + [rn/view {:style style/dapps-container} + [rn/flat-list + {:data dapps-list + :style (style/dapps-list theme) + :render-fn (fn [item] [quo/dapp item]) + :separator [rn/view {:style (style/separator theme)}]}]]))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/account/tabs/view.cljs b/src/status_im2/contexts/wallet/account/tabs/view.cljs index 45c14a534a..9d2c0527d6 100644 --- a/src/status_im2/contexts/wallet/account/tabs/view.cljs +++ b/src/status_im2/contexts/wallet/account/tabs/view.cljs @@ -2,10 +2,11 @@ (:require [quo2.core :as quo] [react-native.core :as rn] - [status-im2.contexts.wallet.account.tabs.style :as style] [status-im2.contexts.wallet.common.temp :as temp] [utils.i18n :as i18n] - [status-im2.contexts.wallet.account.tabs.about.view :as about])) + [status-im2.contexts.wallet.account.tabs.about.view :as about] + [status-im2.contexts.wallet.account.tabs.dapps.view :as dapps] + [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab])) (defn view [{:keys [selected-tab]}] @@ -14,24 +15,19 @@ {:render-fn quo/token-value :data temp/tokens :content-container-style {:padding-horizontal 8}}] - :collectibles [quo/empty-state - {:title (i18n/label :t/no-collectibles) - :description (i18n/label :t/no-collectibles-description) - :placeholder? true - :container-style style/empty-container-style}] - :activity [quo/empty-state - {:title (i18n/label :t/no-activity) - :description (i18n/label :t/empty-tab-description) - :placeholder? true - :container-style style/empty-container-style}] - :permissions [quo/empty-state - {:title (i18n/label :t/no-permissions) - :description (i18n/label :t/no-collectibles-description) - :placeholder? true - :container-style style/empty-container-style}] - :dapps [quo/empty-state - {:title (i18n/label :t/no-dapps) - :description (i18n/label :t/no-collectibles-description) - :placeholder? true - :container-style style/empty-container-style}] + :collectibles [empty-tab/view + {:title (i18n/label :t/no-collectibles) + :description (i18n/label :t/no-collectibles-description) + :placeholder? true}] + :activity [empty-tab/view + {:title (i18n/label :t/no-activity) + :description (i18n/label :t/empty-tab-description) + :placeholder? true}] + :permissions [empty-tab/view + {:title (i18n/label :t/no-permissions) + :description (i18n/label :t/no-collectibles-description) + :placeholder? true}] + :dapps [dapps/view] [about/view])) + + diff --git a/src/status_im2/contexts/wallet/account/tabs/style.cljs b/src/status_im2/contexts/wallet/common/empty_tab/style.cljs similarity index 65% rename from src/status_im2/contexts/wallet/account/tabs/style.cljs rename to src/status_im2/contexts/wallet/common/empty_tab/style.cljs index de78eb9094..af2c08ca1c 100644 --- a/src/status_im2/contexts/wallet/account/tabs/style.cljs +++ b/src/status_im2/contexts/wallet/common/empty_tab/style.cljs @@ -1,4 +1,4 @@ -(ns status-im2.contexts.wallet.account.tabs.style) +(ns status-im2.contexts.wallet.common.empty-tab.style) (def empty-container-style {:justify-content :center diff --git a/src/status_im2/contexts/wallet/common/empty_tab/view.cljs b/src/status_im2/contexts/wallet/common/empty_tab/view.cljs new file mode 100644 index 0000000000..d03a29c7ce --- /dev/null +++ b/src/status_im2/contexts/wallet/common/empty_tab/view.cljs @@ -0,0 +1,8 @@ +(ns status-im2.contexts.wallet.common.empty-tab.view + (:require [quo2.core :as quo] + [status-im2.contexts.wallet.common.empty-tab.style :as style])) + +(defn view + [props] + [quo/empty-state + (assoc props :container-style style/empty-container-style)]) diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index 88bb343a6a..7fc960b43b 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/src/status_im2/contexts/wallet/common/temp.cljs @@ -164,3 +164,18 @@ :derivation-path (string/replace constants/path-default-wallet #"/" " / ") :user-name "Alisher Yakupov" :on-press #(js/alert "pressed")}) + +(defn dapps-list + [{:keys [on-press-icon]}] + [{:dapp {:avatar (quo.resources/get-dapp :coingecko) + :name "Coingecko" + :value "coingecko.com"} + :state :default + :action :icon + :on-press-icon on-press-icon} + {:dapp {:avatar (quo.resources/get-dapp :uniswap) + :name "Uniswap" + :value "uniswap.org"} + :state :default + :action :icon + :on-press-icon on-press-icon}]) diff --git a/translations/en.json b/translations/en.json index e2dd00f9e9..438fe4d457 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2337,10 +2337,12 @@ "traits": "Traits", "opensea": "OpenSea", "mainnet": "Mainnet", - "scan-sync-code-placeholder": "cs2:4FH...", "view-on-eth": "View on Etherscan", "view-on-opt": "View on Optimism Explorer", "view-on-arb": "View on Arbiscan", "copy-address": "Copy address", - "show-address-qr": "Show address QR" + "show-address-qr": "Show address QR", + "scan-sync-code-placeholder": "cs2:4FH...", + "visit-dapp": "Visit dApp", + "disconnect-dapp": "Disconnect dApp" }