status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Wallet: dApps Tab (#17587) 

* feat: dapps tab
This commit is contained in:
Omar Basem 2023-10-10 16:28:05 +04:00 committed by GitHub
parent 36dd828a55
commit d664653921
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 124 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/quo2/components/settings/category/reorder/view.cljs
View File

@ -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

3
src/quo2/components/settings/category/settings/view.cljs
View File

@ -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

70
src/status_im2/contexts/quo_preview/settings/category.cljs
View File

@ -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)}]]))))

18
src/status_im2/contexts/wallet/account/tabs/dapps/style.cljs Normal file
View File

@ -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)})

39
src/status_im2/contexts/wallet/account/tabs/dapps/view.cljs Normal file
View File

@ -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))

40
src/status_im2/contexts/wallet/account/tabs/view.cljs
View File

@ -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]))

2
src/status_im2/contexts/wallet/account/tabs/style.cljs → src/status_im2/contexts/wallet/common/empty_tab/style.cljs
View File

@ -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

8
src/status_im2/contexts/wallet/common/empty_tab/view.cljs Normal file
View File

@ -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)])

15
src/status_im2/contexts/wallet/common/temp.cljs
View File

@ -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}])

6
translations/en.json
View File

@ -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"
}