From d05f50db6238117f1cee7bdff8973ac1b7802d14 Mon Sep 17 00:00:00 2001 From: Julien Eluard Date: Wed, 10 Jan 2018 16:09:52 +0100 Subject: [PATCH] [BUG #2881] Migrated wallet main screen to latest mockups --- package-lock.json | 2 +- resources/icons/filter.svg | 2 +- resources/icons/flash_active.svg | 2 +- resources/icons/flash_inactive.svg | 4 +- resources/icons/open.svg | 2 +- resources/icons/share.svg | 2 +- resources/icons/tooltip-triangle.svg | 2 +- resources/icons/transaction_history.svg | 9 +- src/status_im/translations/en.cljs | 6 +- src/status_im/translations/ja.cljs | 4 +- src/status_im/translations/sv.cljs | 2 - src/status_im/translations/uk.cljs | 2 - src/status_im/ui/components/action_sheet.cljs | 24 ++++ src/status_im/ui/components/colors.cljs | 6 + .../ui/components/icons/vector_icons.cljs | 40 +++--- .../ui/components/invertible_scroll_view.cljs | 0 src/status_im/ui/components/list/styles.cljs | 35 +++-- src/status_im/ui/components/list/views.cljs | 19 ++- .../ui/components/renderers/renderers.cljs | 0 .../ui/components/sortable_list_view.cljs | 12 +- .../ui/components/status_bar/styles.cljs | 5 +- .../ui/components/status_bar/view.cljs | 8 +- .../ui/components/toolbar/actions.cljs | 2 +- src/status_im/ui/screens/subs.cljs | 2 - src/status_im/ui/screens/views.cljs | 7 - .../ui/screens/wallet/assets/styles.cljs | 123 ------------------ .../ui/screens/wallet/assets/subs.cljs | 8 -- .../ui/screens/wallet/assets/views.cljs | 95 -------------- .../ui/screens/wallet/components/styles.cljs | 3 +- src/status_im/ui/screens/wallet/events.cljs | 8 +- .../ui/screens/wallet/main/styles.cljs | 55 ++++---- .../ui/screens/wallet/main/views.cljs | 95 +++++++------- src/status_im/ui/screens/wallet/styles.cljs | 18 +-- .../ui/screens/wallet/transactions/views.cljs | 26 +--- .../ui/screens/wallet/wallet_list/styles.cljs | 85 ------------ .../ui/screens/wallet/wallet_list/subs.cljs | 13 -- .../ui/screens/wallet/wallet_list/views.cljs | 51 -------- src/status_im/utils/slurp.clj | 29 ++--- 38 files changed, 222 insertions(+), 586 deletions(-) create mode 100644 src/status_im/ui/components/action_sheet.cljs create mode 100644 src/status_im/ui/components/colors.cljs delete mode 100644 src/status_im/ui/components/invertible_scroll_view.cljs delete mode 100644 src/status_im/ui/components/renderers/renderers.cljs delete mode 100644 src/status_im/ui/screens/wallet/assets/styles.cljs delete mode 100644 src/status_im/ui/screens/wallet/assets/subs.cljs delete mode 100644 src/status_im/ui/screens/wallet/assets/views.cljs delete mode 100644 src/status_im/ui/screens/wallet/wallet_list/styles.cljs delete mode 100644 src/status_im/ui/screens/wallet/wallet_list/subs.cljs delete mode 100644 src/status_im/ui/screens/wallet/wallet_list/views.cljs diff --git a/package-lock.json b/package-lock.json index 6cf032f911..f1747e2d5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9197,4 +9197,4 @@ } } } -} +} \ No newline at end of file diff --git a/resources/icons/filter.svg b/resources/icons/filter.svg index 7c799d7805..e9ea2c45d7 100644 --- a/resources/icons/filter.svg +++ b/resources/icons/filter.svg @@ -1,4 +1,4 @@ - + diff --git a/resources/icons/flash_active.svg b/resources/icons/flash_active.svg index 98c30cb28a..f1efce88b0 100644 --- a/resources/icons/flash_active.svg +++ b/resources/icons/flash_active.svg @@ -1,4 +1,4 @@ - + diff --git a/resources/icons/flash_inactive.svg b/resources/icons/flash_inactive.svg index ec77600c68..8bf77893e0 100644 --- a/resources/icons/flash_inactive.svg +++ b/resources/icons/flash_inactive.svg @@ -1,3 +1,3 @@ - - + + diff --git a/resources/icons/open.svg b/resources/icons/open.svg index 79ed18d803..1c8534f51d 100644 --- a/resources/icons/open.svg +++ b/resources/icons/open.svg @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/resources/icons/share.svg b/resources/icons/share.svg index 541929b4e1..cc7819f680 100644 --- a/resources/icons/share.svg +++ b/resources/icons/share.svg @@ -1,4 +1,4 @@ - + diff --git a/resources/icons/tooltip-triangle.svg b/resources/icons/tooltip-triangle.svg index d60503c3e4..f19a119bec 100644 --- a/resources/icons/tooltip-triangle.svg +++ b/resources/icons/tooltip-triangle.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/resources/icons/transaction_history.svg b/resources/icons/transaction_history.svg index 92fc7d336b..8c703ec72b 100644 --- a/resources/icons/transaction_history.svg +++ b/resources/icons/transaction_history.svg @@ -1,9 +1,8 @@ - - - + + - \ No newline at end of file diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 545876dfad..924e5f19e7 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -94,7 +94,6 @@ :in-contacts "In contacts" :remove-from-contacts "Remove from contacts" :start-conversation "Start conversation" - :send-transaction "Send transaction" :testnet-text "You’re on the {{testnet}} Testnet. Do not send real ETH or SNT to your address" :mainnet-text "You’re on the Mainnet. Real ETH will be sent" @@ -310,8 +309,6 @@ :wallet-manage-assets "Manage Assets" :signing-phrase-description "Sign the transaction by entering your password. Make sure that the words above match your secret signing phrase" :wallet-insufficient-funds "Insufficient funds" - :wallet-my-token "My {{symbol}}" - :wallet-market-value "Market value" :request-transaction "Request transaction" :send-request "Send request" :share "Share" @@ -344,6 +341,9 @@ :sign-later-title "Sign transaction later?" :sign-later-text "Check the transaction history to sign this transaction" :not-applicable "Not applicable for unsigned transactions" + :send-transaction "Send transaction" + :receive-transaction "Receive transaction" + :transaction-history "Transaction History" ;; Wallet Send :wallet-choose-recipient "Choose Recipient" diff --git a/src/status_im/translations/ja.cljs b/src/status_im/translations/ja.cljs index d656bba2d5..f55c1094fc 100644 --- a/src/status_im/translations/ja.cljs +++ b/src/status_im/translations/ja.cljs @@ -124,7 +124,7 @@ :move-to-internal-failure-message "いくつかの重要なファイルを外部メディアに保存します。続行するには、許可が必要です。（将来的には外部メディアを使用しないようにします。）" :debug-enabled "デバッグサーバーを起動しました！ *status-dev-cli scan*を実行すると、同じネットワーク上のコンピュータからサーバーを見つけることができます。" -　 ;;phone types + ;;phone types :phone-e164 "国際 1" :phone-international "国際 2" :phone-national "国内" @@ -304,8 +304,6 @@ :wallet-manage-assets "資産の管理" :signing-phrase-description "パスワードを入力して取引に署名します。 上記の単語があなたの秘密の署名句に一致することを確認してください" :wallet-insufficient-funds "残高不足" - :wallet-my-token "わたしの {{symbol}}" - :wallet-market-value "市場価値" :request-transaction "取引をリクエストする" :send-request "リクエストを送信する" :share "シェア" diff --git a/src/status_im/translations/sv.cljs b/src/status_im/translations/sv.cljs index df06ae42d7..46e6dbabac 100644 --- a/src/status_im/translations/sv.cljs +++ b/src/status_im/translations/sv.cljs @@ -305,8 +305,6 @@ :wallet-manage-assets "Hantera tillgångar" :signing-phrase-description "Skriv under transaktionen genom att ange ditt lösenord. Kontrollera att orden ovan motsvarar din hemliga underskriftsfras" :wallet-insufficient-funds "Otillräckligt kapital" - :wallet-my-token "Mina {{symbol}}" - :wallet-market-value "Marknadsvärde" :request-transaction "Begär transaktion" :send-request "Skicka begäran" :share "Dela" diff --git a/src/status_im/translations/uk.cljs b/src/status_im/translations/uk.cljs index 457fc267d6..ade52a2103 100644 --- a/src/status_im/translations/uk.cljs +++ b/src/status_im/translations/uk.cljs @@ -305,8 +305,6 @@ :wallet-manage-assets "Управління Активами" :signing-phrase-description "Підпишіть транзакцію, ввівши свій пароль. Переконайтеся, що слова вище відповідають вашій секретній фразі підпису" :wallet-insufficient-funds "Недостатньо коштів" - :wallet-my-token "Мій {{symbol}}" - :wallet-market-value "Ринкова вартість" :request-transaction "Запит транзакції" :send-request "Надіслати запит" :share "Поділитися" diff --git a/src/status_im/ui/components/action_sheet.cljs b/src/status_im/ui/components/action_sheet.cljs new file mode 100644 index 0000000000..0b5de63fd4 --- /dev/null +++ b/src/status_im/ui/components/action_sheet.cljs @@ -0,0 +1,24 @@ +(ns status-im.ui.components.action-sheet + (:require [status-im.i18n :as i18n] + [status-im.utils.utils :as utils] + [status-im.react-native.js-dependencies :as rn-dependencies])) + +(defn- callback [options] + (fn [index] + (when (< index (count options)) + (when-let [handler (:actione (nth options index))] + (handler))))) + +(defn- options [options] + (let [destructive-opt-index (utils/first-index :destructive? options)] ;; TODO Can only be a single destructive? + (clj->js (merge {:options (conj (mapv :label options) (i18n/label :t/cancel)) + :cancelButtonIndex (count options)} + (when destructive-opt-index + {:destructiveButtonIndex destructive-opt-index}))))) + +(defn show [{:keys [title message options callback]}] + (.showActionSheetWithOptions (.-ActionSheetIOS rn-dependencies/react-native) + (merge (options options) + (when title {:title title}) + (when message {:message message})) + callback)) \ No newline at end of file diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs new file mode 100644 index 0000000000..dbe3d62827 --- /dev/null +++ b/src/status_im/ui/components/colors.cljs @@ -0,0 +1,6 @@ +(ns status-im.ui.components.colors) + +(def white "#ffffff") +(def white-light-transparent "rgba(255, 255, 255, 0.1)") ;; Used as icon background color on dark background +(def white-transparent "rgba(255, 255, 255, 0.2)") ;; Used as icon color on dark background +(def blue "#4360df") ;; Used as main wallet color \ No newline at end of file diff --git a/src/status_im/ui/components/icons/vector_icons.cljs b/src/status_im/ui/components/icons/vector_icons.cljs index 1666eae25d..5ee6ca1042 100644 --- a/src/status_im/ui/components/icons/vector_icons.cljs +++ b/src/status_im/ui/components/icons/vector_icons.cljs @@ -4,7 +4,8 @@ [status-im.utils.platform :as platform] [status-im.ui.components.styles :as styles] [status-im.ui.components.react :as react] - [status-im.react-native.js-dependencies :as rn-dependencies])) + [status-im.react-native.js-dependencies :as rn-dependencies]) + (:refer-clojure :exclude [use])) (defn get-property [name] (aget rn-dependencies/svg name)) @@ -20,7 +21,7 @@ (def g (get-class "G")) (def rect (get-class "Rect")) (def path (get-class "Path")) -(def use-def (get-class "Use")) +(def use (get-class "Use")) (def defs (get-class "Defs")) (def icons {:icons/home (slurp-svg "./resources/icons/bottom/home_gray.svg") @@ -78,8 +79,6 @@ (if platform/ios? :icons/dots-horizontal :icons/dots-vertical) n)) -(def default-viewbox {:width 24 :height 24 :viewBox "0 0 24 24"}) - (defn icon ([name] (icon name nil)) ([name {:keys [color container-style style accessibility-label] @@ -88,22 +87,19 @@ [react/view {:style container-style :accessibility-label accessibility-label} (if-let [icon-fn (get icons (normalize-property-name name))] - (into [] - (concat - [svg (merge default-viewbox style)] - (icon-fn - (cond - (keyword? color) - (case color - :dark styles/icon-dark-color - :gray styles/icon-gray-color - :blue styles/color-light-blue - :active styles/color-blue4 - :white styles/color-white - :red styles/icon-red-color - styles/icon-dark-color) - (string? color) - color - :else - styles/icon-dark-color)))) + (icon-fn + (cond + (keyword? color) + (case color + :dark styles/icon-dark-color + :gray styles/icon-gray-color + :blue styles/color-light-blue + :active styles/color-blue4 + :white styles/color-white + :red styles/icon-red-color + styles/icon-dark-color) + (string? color) + color + :else + styles/icon-dark-color)) (throw (js/Error. (str "Unknown icon: " name))))])) diff --git a/src/status_im/ui/components/invertible_scroll_view.cljs b/src/status_im/ui/components/invertible_scroll_view.cljs deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/status_im/ui/components/list/styles.cljs b/src/status_im/ui/components/list/styles.cljs index 409104eacb..3cdf87dc0c 100644 --- a/src/status_im/ui/components/list/styles.cljs +++ b/src/status_im/ui/components/list/styles.cljs @@ -4,7 +4,9 @@ [status-im.utils.platform :as platform])) (def item - {:flex-direction :row}) + {:flex-direction :row + :justify-content :center + :height 64}) (def item-content-view {:flex 1 @@ -27,7 +29,7 @@ (def primary-text-only (merge primary-text-base - {:padding-vertical 22})) + {:padding-vertical 16})) (def secondary-text {:font-size 16 @@ -38,20 +40,35 @@ {:width 40 :height 40}) +(def icon-size 24) +(def icon-wrapper-size (+ icon-size (* 2 8))) + +(def item-icon-wrapper + {:width icon-wrapper-size + :height icon-wrapper-size + :align-items :center + :justify-content :center}) + (def item-icon - {:width 24 - :height 24}) + {:width icon-size + :height icon-size}) + +(def horizontal-margin 16) +(def vertical-margin 12) (def left-item-wrapper - {:margin 14}) + {:justify-content :center + :margin-left horizontal-margin + :margin-vertical vertical-margin}) (def content-item-wrapper - {:flex 1 - :margin-right 16}) + {:flex 1 + :justify-content :center + :margin-left horizontal-margin}) (def right-item-wrapper - {:margin-right 16 - :justify-content :center}) + {:justify-content :center + :margin-right horizontal-margin}) (def base-separator {:height 1 diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index a7ea064ebe..1fbdd5b987 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -19,9 +19,9 @@ [section-list {:sections [{:title \"\" :key :unik :render-fn render :data {:title \"\" :subtitle \"\"}}]}] " (:require [reagent.core :as reagent] - [reagent.impl.template :as temp] - [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.checkbox.view :as checkbox] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.list.styles :as styles] [status-im.ui.components.react :as react] [status-im.utils.platform :as platform])) @@ -49,7 +49,7 @@ (defn item-icon [{:keys [icon style icon-opts]}] {:pre [(not (nil? icon))]} - [react/view {:style style} + [react/view {:style (merge styles/item-icon-wrapper style)} [vector-icons/icon icon (merge icon-opts {:style styles/item-icon})]]) (defn item-image @@ -63,8 +63,10 @@ [react/text {:style styles/primary-text} primary]) (defn item-primary-only - [primary] - [react/text {:style styles/primary-text-only} primary]) + ([s] (item-primary-only nil s)) + ([{:keys [style]} s] + [react/text {:style (merge styles/primary-text-only style)} + s])) (defn item-secondary [secondary] @@ -79,6 +81,11 @@ [react/view {:style (merge style styles/item-checkbox)} [checkbox/checkbox props]]) +(def item-icon-forward + [item-icon {:style styles/item-icon + :icon :icons/forward + :icon-opts {:color colors/white-transparent}}]) + (defn- wrap-render-fn [f] (fn [data] (reagent/as-element (f (.-item data) (.-index data) (.-separators data))))) @@ -109,7 +116,7 @@ (-clj->js [x] (.-value x)) (-key->js [x] (.-value x)) IEncodeClojure - (-js->clj [x options] (.-value x))) + (-js->clj [x _] (.-value x))) (defn- to-js-array "Converts a collection to a JS array (but leave content as is)" diff --git a/src/status_im/ui/components/renderers/renderers.cljs b/src/status_im/ui/components/renderers/renderers.cljs deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/status_im/ui/components/sortable_list_view.cljs b/src/status_im/ui/components/sortable_list_view.cljs index 12eb009425..0c3e306912 100644 --- a/src/status_im/ui/components/sortable_list_view.cljs +++ b/src/status_im/ui/components/sortable_list_view.cljs @@ -1,8 +1,6 @@ (ns status-im.ui.components.sortable-list-view (:require [reagent.core :as r] - [status-im.ui.components.react :refer [view - touchable-highlight - list-item]] + [status-im.ui.components.react :as react] [status-im.react-native.js-dependencies :as rn-dependencies])) (def sortable-listview-class @@ -13,10 +11,10 @@ (assoc props :on-row-moved #(on-row-moved (js->clj % :keywordize-keys true)) :render-row #(render-row (js->clj % :keywordize-keys true)))]) -(defn touchable [inner] - [touchable-highlight (js->clj (.-props (r/current-component))) - [view +(defn- touchable [inner] + [react/touchable-highlight (js->clj (.-props (r/current-component))) + [react/view inner]]) (defn sortable-item [inner] - (list-item [touchable inner])) + (react/list-item [touchable inner])) diff --git a/src/status_im/ui/components/status_bar/styles.cljs b/src/status_im/ui/components/status_bar/styles.cljs index 425d58c63f..c591d39b6a 100644 --- a/src/status_im/ui/components/status_bar/styles.cljs +++ b/src/status_im/ui/components/status_bar/styles.cljs @@ -80,9 +80,8 @@ {:ios (create-status-bar-style {:background-color styles/color-blue4}) :android (create-status-bar-style {:translucent? true})}) -(defstyle view-wallet - {:ios (create-view-style {:background-color styles/color-blue4}) - :android (create-view-style {:background-color styles/color-blue5})}) +(def view-wallet + (create-view-style {:background-color styles/color-blue4})) ;; :default (defstyle status-bar-default diff --git a/src/status_im/ui/components/status_bar/view.cljs b/src/status_im/ui/components/status_bar/view.cljs index 7ce2b73020..4f0db8ca9d 100644 --- a/src/status_im/ui/components/status_bar/view.cljs +++ b/src/status_im/ui/components/status_bar/view.cljs @@ -1,5 +1,5 @@ (ns status-im.ui.components.status-bar.view - (:require [status-im.ui.components.react :as ui] + (:require [status-im.ui.components.react :as react] [status-im.ui.components.status-bar.styles :as styles])) (defn status-bar [{type :type}] @@ -13,6 +13,6 @@ :transaction [styles/status-bar-transaction styles/view-transaction] :wallet [styles/status-bar-wallet styles/view-wallet] [styles/status-bar-default styles/view-default])] - [ui/view - [ui/status-bar status-bar-style] - [ui/view {:style view-style}]])) + [react/view + [react/status-bar status-bar-style] + [react/view {:style view-style}]])) diff --git a/src/status_im/ui/components/toolbar/actions.cljs b/src/status_im/ui/components/toolbar/actions.cljs index 62094e328e..e43e1ebd5f 100644 --- a/src/status_im/ui/components/toolbar/actions.cljs +++ b/src/status_im/ui/components/toolbar/actions.cljs @@ -47,7 +47,7 @@ (defn list-white [handler] {:icon :icons/transaction-history - :icon-opts {:color :white :style {:viewBox "-108 65.9 24 24"}} + :icon-opts {:color :white} :handler handler}) (defn add-wallet [handler] diff --git a/src/status_im/ui/screens/subs.cljs b/src/status_im/ui/screens/subs.cljs index 88f277e1d6..2e5fc188a9 100644 --- a/src/status_im/ui/screens/subs.cljs +++ b/src/status_im/ui/screens/subs.cljs @@ -14,8 +14,6 @@ status-im.ui.screens.wallet.send.subs status-im.ui.screens.wallet.settings.subs status-im.ui.screens.wallet.transactions.subs - status-im.ui.screens.wallet.wallet-list.subs - status-im.ui.screens.wallet.assets.subs status-im.ui.screens.network-settings.subs status-im.bots.subs)) diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index ab65b58bcd..87447fffb4 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -37,22 +37,17 @@ [status-im.ui.screens.wallet.send.views :refer [send-transaction send-transaction-modal]] [status-im.ui.screens.wallet.choose-recipient.views :refer [choose-recipient]] [status-im.ui.screens.wallet.request.views :refer [request-transaction]] - [status-im.ui.screens.wallet.wallet-list.views :refer [wallet-list-screen]] [status-im.ui.screens.wallet.components.views :as wallet.components] [status-im.ui.screens.wallet.send.views :as wallet.send] [status-im.ui.screens.wallet.settings.views :as wallet-settings] [status-im.ui.screens.wallet.transactions.views :as wallet-transactions] [status-im.ui.screens.wallet.send.transaction-sent.views :refer [transaction-sent transaction-sent-modal]] - [status-im.ui.screens.wallet.assets.views :as wallet-assets] - [status-im.ui.components.status-bar.view :as status-bar] - [status-im.ui.screens.discover.search-results.views :as discover-search] [status-im.ui.screens.discover.recent-statuses.views :as discover-recent] [status-im.ui.screens.discover.all-dapps.views :as discover-all-dapps] [status-im.ui.screens.discover.popular-hashtags.views :as discover-popular] [status-im.ui.screens.discover.dapp-details.views :as discover-dapp-details] - [status-im.ui.screens.network-settings.views :refer [network-settings]] [status-im.ui.screens.offline-messaging-settings.views :refer [offline-messaging-settings]] [status-im.ui.screens.network-settings.add-rpc.views :refer [add-rpc-url]] @@ -74,14 +69,12 @@ (let [current-view (validate-current-view view-id signed-up?)] (let [component (case current-view (:home :wallet :my-profile) main-tabs - :wallet-list wallet-list-screen :wallet-send-transaction send-transaction :wallet-transaction-sent transaction-sent :choose-recipient choose-recipient :wallet-request-transaction request-transaction (:transactions-history :unsigned-transactions) wallet-transactions/transactions :wallet-transaction-details wallet-transactions/transaction-details - (:wallet-my-token :wallet-market-value) wallet-assets/my-token-main :wallet-send-assets wallet.components/send-assets :wallet-request-assets wallet.components/request-assets :new-chat new-chat diff --git a/src/status_im/ui/screens/wallet/assets/styles.cljs b/src/status_im/ui/screens/wallet/assets/styles.cljs deleted file mode 100644 index 11ee5b213b..0000000000 --- a/src/status_im/ui/screens/wallet/assets/styles.cljs +++ /dev/null @@ -1,123 +0,0 @@ -(ns status-im.ui.screens.wallet.assets.styles - (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) - (:require [status-im.ui.components.styles :as styles] - [status-im.ui.screens.main-tabs.styles :as tabs.styles] - [status-im.utils.platform :as platform])) - -;; TODO(goranjovic) - the following styles will be removed once reusable components -;; from other Wallet screens have been generalized and extracted -;; The main difference is in colors - Wallet main screen uses blue background and -;; white or very light text colors, while on assets screens its usually black text on white background - -(defnstyle tab [active?] - {:flex 1 - :height tabs.styles/tab-height - :justify-content :center - :align-items :center - :border-bottom-width (if active? 2 1) - :border-bottom-color (if active? - styles/color-blue4 - styles/color-gray10-transparent)}) - -(def tabs-container - {:flex-direction :row}) - -(defnstyle tab-title [active?] - {:ios {:font-size 15} - :android {:font-size 14} - :text-align :center - :color (if active? - styles/color-blue4 - styles/color-black)}) - -(def total-balance-container - {:padding-top 20 - :padding-bottom 24 - :align-items :center - :justify-content :center}) - -(def total-balance - {:flex-direction :row}) - -(def total-balance-value - {:font-size 37 - :color styles/color-black}) - -(defstyle total-balance-currency - {:font-size 37 - :margin-left 9 - :color styles/color-gray4 - :android {:letter-spacing 1.5} - :ios {:letter-spacing 1.16}}) - -(def value-variation - {:flex-direction :row - :align-items :center}) - -(defstyle value-variation-title - {:font-size 14 - :color styles/color-gray4 - :android {:letter-spacing -0.18} - :ios {:letter-spacing -0.2}}) - -(defstyle main-button-text - {:color styles/color-blue4 - :padding-horizontal nil - :android {:font-size 13 - :letter-spacing 0.46} - :ios {:font-size 15 - :letter-spacing -0.2}}) - -(defstyle transactions-title - {:margin-left 16 - :color styles/color-gray4}) - -;; TODO(goranjovic): Generalize this and the set of buttons from main Wallet screen -;; into a single component e.g. button-set that would receive an ordered collection -;; of button descriptions (text, handler, disabled?, etc) and render them properly -;; while managing the position dependent formatting under the hood. -;; https://github.com/status-im/status-react/issues/2492 -(defn- border [position] - (let [radius (if platform/ios? 8 4)] - (case position - :first {:border-bottom-left-radius radius - :border-top-left-radius radius - :ios {:border-width 1} - :border-right-color styles/color-blue4} - :last {:border-bottom-right-radius radius - :border-top-right-radius radius - :ios {:border-top-width 1 - :border-right-width 1 - :border-bottom-width 1}} - {:android {:border-left-width 1 - :border-right-width 1} - :ios {:border-top-width 1 - :border-right-width 1 - :border-bottom-width 1} - :border-right-color styles/color-blue4}))) - -(defnstyle button-bar [position] - (merge {:border-color styles/color-white-transparent-3 - :background-color styles/color-blue4-transparent} - (border position))) - -(def token-toolbar-container - {:height 130 - :align-items :flex-start}) - -(def token-toolbar - {:flex-direction :column - :align-items :center - :justify-content :center - :height 130}) - -(defstyle token-name-title - {:margin-top 8 - :margin-bottom 4 - :android {:font-size 16} - :ios {:font-size 17}}) - -(defstyle token-symbol-title - {:color styles/color-gray4 - :android {:font-size 14} - :ios {:font-size 15}}) diff --git a/src/status_im/ui/screens/wallet/assets/subs.cljs b/src/status_im/ui/screens/wallet/assets/subs.cljs deleted file mode 100644 index 3618ee86c4..0000000000 --- a/src/status_im/ui/screens/wallet/assets/subs.cljs +++ /dev/null @@ -1,8 +0,0 @@ -(ns status-im.ui.screens.wallet.assets.subs - (:require [re-frame.core :as re-frame])) - -;; TODO(goranjovic) - the USD value is currently hardcoded, will be replaced with actual data -;; in a different PR -(re-frame/reg-sub :token-balance - (fn [{:keys [wallet-selected-asset]}] - (assoc wallet-selected-asset :usd-value 0.93))) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/assets/views.cljs b/src/status_im/ui/screens/wallet/assets/views.cljs deleted file mode 100644 index 085ed09d07..0000000000 --- a/src/status_im/ui/screens/wallet/assets/views.cljs +++ /dev/null @@ -1,95 +0,0 @@ -(ns status-im.ui.screens.wallet.assets.views - (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [status-im.ui.components.react :as react] - [status-im.ui.components.status-bar.view :as status-bar] - [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.components.button.view :as button] - [status-im.i18n :as i18n] - [status-im.ui.components.styles :as component.styles] - [status-im.ui.components.button.styles :as button.styles] - [status-im.ui.screens.wallet.components.views :as components] - [status-im.ui.screens.wallet.assets.styles :as assets.styles] - [status-im.ui.screens.wallet.main.styles :as main.styles] - [status-im.ui.components.styles :as components.styles] - [status-im.ui.screens.wallet.transactions.views :as transactions] - [status-im.utils.utils :as utils] - [status-im.ui.components.chat-icon.styles :as chat-icon.styles] - [status-im.utils.money :as money])) - - -(defview my-token-tab-title [active?] - (letsubs [ {:keys [symbol]} [:token-balance]] - [react/text {:uppercase? true - :style (assets.styles/tab-title active?)} - (i18n/label :t/wallet-my-token {:symbol symbol})])) - -(defview my-token-tab-content [] - (letsubs [syncing? [:syncing?] - {:keys [symbol - amount - decimals - usd-value]} [:token-balance]] - [react/view components.styles/flex - [react/view {:style assets.styles/total-balance-container} - [react/view {:style assets.styles/total-balance} - [react/text {:style assets.styles/total-balance-value} (money/to-fixed (money/token->unit (or amount (money/bignumber 0)) decimals))] - [react/text {:style assets.styles/total-balance-currency} symbol]] - [react/view {:style assets.styles/value-variation} - [react/text {:style assets.styles/value-variation-title} - (str usd-value " " "USD")] - [components/change-display 0.05]] - [react/view {:style (merge button.styles/buttons-container main.styles/buttons)} - [button/button {:disabled? syncing? - :on-press #(utils/show-popup "TODO" "Not implemented yet!") - :style (assets.styles/button-bar :first) - :text-style assets.styles/main-button-text} - (i18n/label :t/wallet-send-token {:symbol symbol})] - [button/button {:disabled? true - :on-press #(utils/show-popup "TODO" "Not implemented yet!") - :style (assets.styles/button-bar :last) - :text-style assets.styles/main-button-text} - (i18n/label :t/wallet-exchange)]]] - [react/view - [react/text {:style assets.styles/transactions-title} (i18n/label :t/transactions)] - [react/view {:flex-direction :row} - [transactions/history-list]]]])) - -(defn market-value-tab-title [active?] - [react/text {:uppercase? true - :style (assets.styles/tab-title active?)} - (i18n/label :t/wallet-market-value)]) - -(defn market-value-tab-content [] - [react/view - [react/text - "Market value goes here"]]) - -(def tabs-list - [{:view-id :wallet-my-token - :content my-token-tab-title - :screen my-token-tab-content} - {:view-id :wallet-market-value - :content market-value-tab-title - :screen market-value-tab-content}]) - -(defn token-toolbar [name symbol icon] - [react/view assets.styles/token-toolbar - [react/image (assoc icon :style (chat-icon.styles/image-style 64))] - [react/text {:style assets.styles/token-name-title} - name] - [react/text {:style assets.styles/token-symbol-title} - symbol]]) - -(defview my-token-main [] - (letsubs [current-tab [:get :view-id] - {:keys [symbol name icon]} [:token-balance]] - [react/view {:style component.styles/flex} - [status-bar/status-bar] - [toolbar/toolbar {:style assets.styles/token-toolbar-container} - toolbar/default-nav-back - [token-toolbar name symbol icon]] - ;;(andrey julien) cleanup - #_[tabs/swipable-tabs tabs-list current-tab true - {:navigation-event :navigation-replace - :tab-style assets.styles/tab - :tabs-container-style assets.styles/tabs-container}]])) diff --git a/src/status_im/ui/screens/wallet/components/styles.cljs b/src/status_im/ui/screens/wallet/components/styles.cljs index 1ba61493cf..d05d69ca6e 100644 --- a/src/status_im/ui/screens/wallet/components/styles.cljs +++ b/src/status_im/ui/screens/wallet/components/styles.cljs @@ -190,8 +190,7 @@ (def tooltip-triangle {:width 16 - :height 8 - :viewBox "0 0 16 8"}) + :height 8}) (def recipient-name-container {:padding-right 6}) diff --git a/src/status_im/ui/screens/wallet/events.cljs b/src/status_im/ui/screens/wallet/events.cljs index 83bc0a0d67..73d3b340f7 100644 --- a/src/status_im/ui/screens/wallet/events.cljs +++ b/src/status_im/ui/screens/wallet/events.cljs @@ -204,10 +204,4 @@ {:show-confirmation {:title (i18n/label :t/transactions-delete) :content (i18n/label :t/transactions-delete-content) :confirm-button-text (i18n/label :t/confirm) - :on-accept #(re-frame/dispatch [:wallet/discard-unsigned-transaction transaction-id])}})) - -(handlers/register-handler-fx - :navigate-to-asset - (fn [{:keys [db]} [_ asset]] - {:db (assoc db :wallet-selected-asset asset) - :dispatch [:navigate-to :wallet-my-token]})) + :on-accept #(re-frame/dispatch [:wallet/discard-unsigned-transaction transaction-id])}})) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs index d6f8a04dbd..460b68031f 100644 --- a/src/status_im/ui/screens/wallet/main/styles.cljs +++ b/src/status_im/ui/screens/wallet/main/styles.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.wallet.main.styles (:require-macros [status-im.utils.styles :refer [defstyle]]) (:require [status-im.ui.components.styles :as styles] - [status-im.utils.platform :as platform])) + [status-im.ui.components.colors :as colors])) ;; Toolbar @@ -10,7 +10,7 @@ (def toolbar-title-text {:flex -1 - :color styles/color-white + :color colors/white :font-size 17}) (def toolbar-icon @@ -23,12 +23,10 @@ ;; Main section (def main-section - {:background-color styles/color-blue4}) + {:background-color colors/blue}) (def total-balance-container - {:padding-top 20 - :padding-bottom 24 - :align-items :center + {:align-items :center :justify-content :center}) (def total-balance @@ -36,7 +34,11 @@ (def total-balance-value {:font-size 37 - :color styles/color-white}) + :color colors/white}) + +(def total-value + {:font-size 14 + :color styles/color-white-transparent}) (defstyle total-balance-currency {:font-size 37 @@ -45,16 +47,6 @@ :android {:letter-spacing 1.5} :ios {:letter-spacing 1.16}}) -(def value-variation - {:flex-direction :row - :align-items :center}) - -(defstyle value-variation-title - {:font-size 14 - :color styles/color-white-transparent-6 - :android {:letter-spacing -0.18} - :ios {:letter-spacing -0.2}}) - (defstyle buttons {:margin-top 34 :android {:margin-horizontal 21} @@ -68,11 +60,27 @@ :ios {:font-size 15 :letter-spacing -0.2}}) +;; Actions section + +(def action-section + {:background-color colors/blue}) + +(def action + {:background-color colors/white-light-transparent + :border-radius 50}) + +(def action-label + {:color :white}) + +(def action-separator + {:height 1 + :background-color colors/white-transparent + :margin-left 70}) + ;; Assets section (def asset-section {:flex 1 - :background-color styles/color-white :padding-vertical 16}) (def asset-section-title @@ -101,7 +109,7 @@ (defstyle add-asset-text {:font-size 16 - :ios {:color styles/color-blue4} + :ios {:color colors/blue} :android {:color styles/color-black}}) (def asset-item-currency @@ -109,14 +117,5 @@ :color styles/color-gray4 :margin-left 6}) -(def corner-dot - {:position :absolute - :top 12 - :right 6 - :width 4 - :height 4 - :border-radius 2 - :background-color styles/color-cyan}) - (defn asset-border [color] {:border-color color :border-width 1 :border-radius 32}) diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index 4ddb5c522d..6a83aefc36 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -1,46 +1,32 @@ (ns status-im.ui.screens.wallet.main.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [re-frame.core :as re-frame] - [status-im.ui.components.button.view :as btn] + [status-im.i18n :as i18n] + [status-im.ui.components.colors :as colors] + [status-im.ui.components.styles :as components.styles] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] - [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.actions :as act] - [status-im.i18n :as i18n] - [status-im.utils.config :as config] - [status-im.utils.ethereum.core :as ethereum] - [status-im.utils.ethereum.tokens :as tokens] + [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.screens.wallet.main.styles :as styles] [status-im.ui.screens.wallet.styles :as wallet.styles] [status-im.ui.screens.wallet.utils :as wallet.utils] - [status-im.ui.components.styles :as components.styles] - [status-im.ui.components.button.styles :as button.styles] - [status-im.ui.screens.wallet.views :as wallet.views])) - -(defn toolbar-title [] - [react/view {:style styles/toolbar-title-container} - [react/text {:style styles/toolbar-title-text - :font :toolbar-title - :number-of-lines 1} - (i18n/label :t/main-wallet)]]) - -(def transaction-history-action - {:icon :icons/transaction-history - :icon-opts (merge {:color :white :style {:viewBox "-108 65.9 24 24"}} styles/toolbar-icon) - :handler #(re-frame/dispatch [:navigate-to :transactions-history])}) + [status-im.ui.screens.wallet.views :as wallet.views] + [status-im.utils.config :as config] + [status-im.utils.ethereum.core :as ethereum] + [status-im.utils.ethereum.tokens :as tokens] + [status-im.utils.platform :as platform])) (defn toolbar-view [] [toolbar/toolbar {:style wallet.styles/toolbar} nil - [toolbar/content-wrapper - [toolbar-title]] + [toolbar/content-wrapper] [toolbar/actions [(assoc (act/opts [{:text (i18n/label :t/wallet-manage-assets) :value #(re-frame/dispatch [:navigate-to-modal :wallet-settings-assets])}]) - :icon-opts {:color :white}) - transaction-history-action]]]) + :icon-opts {:color :white})]]]) -(defn main-section [usd-value syncing? error-message] +(defn- total-section [usd-value syncing? error-message] [react/view {:style styles/main-section} (if syncing? wallet.views/wallet-syncing @@ -50,17 +36,34 @@ [react/view {:style styles/total-balance} [react/text {:style styles/total-balance-value} usd-value] [react/text {:style styles/total-balance-currency} (i18n/label :t/usd-currency)]] - [react/view {:style (merge button.styles/buttons-container styles/buttons)} - [btn/button {:disabled? syncing? - :on-press #(re-frame/dispatch [:navigate-to :wallet-send-transaction]) - :style (button.styles/button-bar :first) :text-style styles/main-button-text} - (i18n/label :t/wallet-send)] - [btn/button {:disabled? syncing? - :on-press #(re-frame/dispatch [:navigate-to :wallet-request-transaction]) - :style (button.styles/button-bar :other) :text-style styles/main-button-text} - (i18n/label :t/wallet-request)] - [btn/button {:disabled? true :style (button.styles/button-bar :last) :text-style styles/main-button-text} - (i18n/label :t/wallet-exchange)]]]]) + [react/text {:style styles/total-value} (i18n/label :t/wallet-total-value)]]]) + +(defn- render-action [{:keys [name icon action]}] + [react/touchable-highlight {:on-press action} + [react/view + [list/item + [list/item-icon {:icon icon :style styles/action :icon-opts {:color :white}}] + [list/item-primary-only {:style styles/action-label} + name] + list/item-icon-forward]]]) + +(def actions + [{:name (i18n/label :t/send-transaction) + :icon :icons/arrow-right + :action #(re-frame/dispatch [:navigate-to :wallet-send-transaction])} + {:name (i18n/label :t/receive-transaction) + :icon :icons/arrow-left + :action #(re-frame/dispatch [:navigate-to :wallet-request-transaction])} + {:name (i18n/label :t/transaction-history) + :icon :icons/transaction-history + :action #(re-frame/dispatch [:navigate-to :transactions-history])}]) + +(defn- action-section [] + [react/view styles/action-section + [list/flat-list + {:separator (when platform/ios? [react/view styles/action-separator]) + :data actions + :render-fn render-action}]]) (defn- render-asset [{:keys [symbol icon decimals amount]}] [react/view @@ -76,19 +79,20 @@ :number-of-lines 1} (clojure.core/name symbol)]]]]) -(defn current-tokens [visible-tokens network] +(defn- current-tokens [visible-tokens network] (filter #(contains? visible-tokens (:symbol %)) (tokens/tokens-for (ethereum/network->chain-keyword network)))) -(defn asset-section [network balance visible-tokens prices-loading? balance-loading?] +(defn- asset-section [network balance visible-tokens prices-loading? balance-loading?] (let [tokens (current-tokens visible-tokens network) assets (map #(assoc % :amount (get balance (:symbol %))) (concat [tokens/ethereum] (when config/erc20-enabled? tokens)))] - [react/view {:style styles/asset-section} + [react/view styles/asset-section [react/text {:style styles/asset-section-title} (i18n/label :t/wallet-assets)] [list/flat-list - {:data assets - :render-fn render-asset - :on-refresh #(re-frame/dispatch [:update-wallet (when config/erc20-enabled? (map :symbol tokens))]) - :refreshing (boolean (or prices-loading? balance-loading?))}]])) + {:default-separator? true + :data assets + :render-fn render-asset + :on-refresh #(re-frame/dispatch [:update-wallet (when config/erc20-enabled? (map :symbol tokens))]) + :refreshing (boolean (or prices-loading? balance-loading?))}]])) (defview wallet [] (letsubs [network [:network] @@ -102,5 +106,6 @@ [react/view {:style wallet.styles/wallet-container} [toolbar-view] [react/view components.styles/flex - [main-section portfolio-value syncing? error-message] + [total-section portfolio-value syncing? error-message] + [action-section] [asset-section network balance visible-tokens prices-loading? balance-loading?]]])) diff --git a/src/status_im/ui/screens/wallet/styles.cljs b/src/status_im/ui/screens/wallet/styles.cljs index 5bacd67e56..29cda1a02a 100644 --- a/src/status_im/ui/screens/wallet/styles.cljs +++ b/src/status_im/ui/screens/wallet/styles.cljs @@ -1,6 +1,7 @@ (ns status-im.ui.screens.wallet.styles - (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.ui.components.styles :as styles])) + (:require-macros [status-im.utils.styles :refer [defstyle]]) + (:require [status-im.ui.components.colors :as colors] + [status-im.ui.components.styles :as styles])) ;; errors @@ -11,7 +12,7 @@ :margin-top 6} :android {:border-radius 4 :margin-top 18} - :background-color styles/color-blue5}) + :background-color colors/blue}) (defstyle error-message-container {:flex-direction :row @@ -21,7 +22,7 @@ :android {:padding-vertical 10}}) -(defnstyle exclamation [color] +(defn exclamation [color] {:background-color color :border-radius 100 :width 16 @@ -29,7 +30,7 @@ :margin-right 6}) (def error-message - {:color styles/color-white + {:color colors/white :font-size 13}) (def error-exclamation @@ -44,9 +45,8 @@ {:flex 1}) (defstyle toolbar - {:ios {:background-color styles/color-blue4} - :android {:background-color styles/color-blue5 - :elevation 0}}) + {:background-color colors/blue + :android {:elevation 0}}) (def buttons-container {:flex-direction :row @@ -67,7 +67,7 @@ (def wallet-modal-container {:flex 1 - :background-color styles/color-blue4}) + :background-color colors/blue}) (def choose-participant-container {:margin-top 16 diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index 01c4a30df3..725f43e9d8 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -19,12 +19,6 @@ [{:keys [id]}] (re-frame/dispatch [:wallet/discard-unsigned-transaction-with-confirmation id])) -;; TODO (andrey) implement -(defn unsigned-action [unsigned-transactions-count] - [toolbar/text-action {:disabled? (zero? unsigned-transactions-count) - :handler #(re-frame/dispatch [:navigate-to-modal :wallet-transactions-sign-all])} - (i18n/label :t/transactions-sign-all)]) - (defn history-action [filter?] (merge {:icon :icons/filter @@ -35,7 +29,7 @@ (and (every? :checked? (:type filter-data)) (every? :checked? (:tokens filter-data)))) -(defn- toolbar-view [current-tab unsigned-transactions-count filter-data] +(defn- toolbar-view [current-tab filter-data] [toolbar/toolbar {:flat? true} toolbar/default-nav-back [toolbar/content-title (i18n/label :t/transactions)] @@ -44,7 +38,7 @@ :unsigned-transactions nil)]) ;; TODO (andrey) implement [unsigned-action unsigned-transactions-count] -(defn action-buttons [{:keys [id to value] :as transaction}] +(defn action-buttons [{:keys [id] :as transaction}] [react/view {:style transactions.styles/action-buttons} [button/primary-button {:style {:margin-right 12} :on-press #(re-frame/dispatch [:wallet/show-sign-transaction id])} @@ -104,7 +98,6 @@ (defn- empty-text [s] [react/text {:style transactions.styles/empty-text} s]) (defn filtered-transaction? [transaction filter-data] - ;; TODO(jeluard) extend to token when available (:checked? (some #(when (= (:type transaction) (:id %)) %) (:type filter-data)))) (defn update-transactions [m filter-data] @@ -139,23 +132,15 @@ content [list/item-checkbox {:checked? checked? :on-value-change #(re-frame/dispatch [:wallet.transactions/filter path %])}]]) -#_ ;; TODO(jeluard) Will be used for ERC20 tokens -(defn- item-filter-tokens [{:keys [symbol label checked?]}] - [item-filter {:icon (transaction-type->icon :pending) :checked? checked?} ;; TODO(jeluard) add proper token icon - [list/item-content - [list/item-primary label] - [list/item-secondary symbol]]]) - (defn- render-item-filter [{:keys [id label checked?]}] [item-filter {:icon (transaction-type->icon id) :checked? checked? :path {:type id}} [list/item-content [list/item-primary-only label]]]) (defn- wrap-filter-data [m] - ;; TODO(jeluard) Restore tokens filtering once token support is added [{:title (i18n/label :t/transactions-filter-type) :key :type - :render-fn render-item-filter ;(list/wrap-render-fn item-filter-type) + :render-fn render-item-filter :data (:type m)}]) (defview filter-history [] @@ -204,12 +189,11 @@ ^{:key view-id} [tab view-id content (= view-id current-view-id)])]) (defview transactions [] - (letsubs [unsigned-transactions-count [:wallet.transactions/unsigned-transactions-count] - current-tab [:get :view-id] + (letsubs [current-tab [:get :view-id] filter-data [:wallet.transactions/filters]] [react/view {:style styles/flex} [status-bar/status-bar] - [toolbar-view current-tab unsigned-transactions-count filter-data] + [toolbar-view current-tab filter-data] [tabs current-tab] [(case current-tab :transactions-history history-list diff --git a/src/status_im/ui/screens/wallet/wallet_list/styles.cljs b/src/status_im/ui/screens/wallet/wallet_list/styles.cljs deleted file mode 100644 index cca0ce7396..0000000000 --- a/src/status_im/ui/screens/wallet/wallet_list/styles.cljs +++ /dev/null @@ -1,85 +0,0 @@ -(ns status-im.ui.screens.wallet.wallet-list.styles - (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) - (:require [status-im.ui.components.styles :as st] - [status-im.utils.platform :as platform])) - -(def screen-container - {:flex 1 - :background-color st/color-white}) - -(def wallet-colors - {:blue-1 "#4360df" - :gray-1 "#3c3d4e"}) - -(def toolbar - {:elevation 0 - :border-bottom-width 1 - :border-color st/color-light-gray2}) - -(def toolbar-icon - {:width 24 - :height 24}) - -;;;;;;;;;;;;;;;;; -;; Wallet list ;; -;;;;;;;;;;;;;;;;; - -(def wallet-list-screen - {:flex 1 - :padding 16 - :padding-bottom 0}) - -(def wallet-list - {:padding-bottom 16}) - -(def wallet-list-title - {:font-size 14 - :margin-bottom 15 - :color st/color-gray4}) - -;;;;;;;;;;;;;;; -;; List item ;; -;;;;;;;;;;;;;;; - -(defstyle wallet-item - {:flex 1 - :flex-direction :row - :align-items :center - :padding 16 - :margin-bottom 12 - :android {:border-radius 4 - :padding-right 12} - :ios {:border-radius 8 - :padding-right 8}}) - -(def active-wallet-item - {:background-color (get wallet-colors :blue-1)}) - -(def wallet-info - {:flex-grow 1}) - -(def wallet-name - {:font-size 14 - :color st/color-white}) - -(def total-balance - {:margin-top 5 - :margin-bottom 5 - :flex-direction :row}) - -(def total-balance-value - {:font-size 26 - :color st/color-white}) - -(def total-balance-currency - (merge total-balance-value {:margin-left 6 - :opacity 0.4})) - -(def asset-list - {:font-size 14 - :color st/color-white - :opacity 0.6}) - -(def select-wallet-icon - {:height 24 - :width 24}) diff --git a/src/status_im/ui/screens/wallet/wallet_list/subs.cljs b/src/status_im/ui/screens/wallet/wallet_list/subs.cljs deleted file mode 100644 index b0fee52bbd..0000000000 --- a/src/status_im/ui/screens/wallet/wallet_list/subs.cljs +++ /dev/null @@ -1,13 +0,0 @@ -(ns status-im.ui.screens.wallet.wallet-list.subs - (:require [re-frame.core :as re-frame])) - -;; TODO(jeluard) update when adding multiple wallet support. This will probably require changes to app-db - -(re-frame/reg-sub - :wallet.list/all - :<- [:portfolio-value] - (fn [portfolio-value] - [{:name "Main wallet" - :assets [] - :amount portfolio-value - :active? true}])) diff --git a/src/status_im/ui/screens/wallet/wallet_list/views.cljs b/src/status_im/ui/screens/wallet/wallet_list/views.cljs deleted file mode 100644 index 61e27951f5..0000000000 --- a/src/status_im/ui/screens/wallet/wallet_list/views.cljs +++ /dev/null @@ -1,51 +0,0 @@ -(ns status-im.ui.screens.wallet.wallet-list.views - (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [clojure.string :as string] - [re-frame.core :as re-frame] - [status-im.ui.components.list.views :as list] - [status-im.ui.components.react :as react] - [status-im.ui.components.status-bar.view :as status-bar] - [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.components.toolbar.actions :as actions] - [status-im.i18n :as i18n] - [status-im.ui.screens.wallet.wallet-list.styles :as styles] - [status-im.utils.utils :as utils])) - -(defn- toolbar-view [transactions] - [toolbar/toolbar {:style styles/toolbar} - [toolbar/nav-clear-text (i18n/label :t/done) #(re-frame/dispatch [:navigate-back])] - [toolbar/content-title (i18n/label :t/wallets)] - [toolbar/actions - [(actions/add-wallet #(utils/show-popup "TODO" "Not implemented!"))]]]) - -(defn- select-wallet [] - (utils/show-popup "TODO" "Not implemented!")) - -(defn- wallet-list-item [{:keys [name amount assets active?]}] - (let [asset-list (string/join " " (concat [(i18n/label :t/eth)] assets))] - [react/touchable-highlight {:on-press select-wallet} - [react/view {:style (merge styles/wallet-item (if active? styles/active-wallet-item))} - [react/view {:style styles/wallet-info} - [react/text {:style styles/wallet-name} name] - [react/view {:style styles/total-balance} - [react/text {:style styles/total-balance-value} amount] - [react/text {:style styles/total-balance-currency} (i18n/label :t/usd-currency)]] - [react/text {:style styles/asset-list} asset-list]] - [react/icon :forward_gray styles/select-wallet-icon]]])) - -(defview wallet-list [] - (letsubs [wallets [:wallet.list/all]] - [react/scroll-view {:style styles/wallet-list-screen} - [react/text {:style styles/wallet-list-title} - (i18n/label :t/your-wallets)] - [list/flat-list {:data wallets - :render-fn wallet-list-item - :style styles/wallet-list - :scrollEnabled false}]])) - -(defview wallet-list-screen [] - [] - [react/view {:style styles/screen-container} - [status-bar/status-bar] - [toolbar-view] - [wallet-list]]) diff --git a/src/status_im/utils/slurp.clj b/src/status_im/utils/slurp.clj index 57f5107e8a..402605ee7c 100644 --- a/src/status_im/utils/slurp.clj +++ b/src/status_im/utils/slurp.clj @@ -15,7 +15,7 @@ (catch Exception _ "")))) (apply str))) -(def svg-tags #{:g :rect :path :use :defs}) +(def svg-tags #{:svg :g :rect :path :use :defs}) (defmacro slurp-svg [file] "Reads svg file, and return function (fn [color] ..), which returns hiccup structure for react-native-svg lib @@ -35,20 +35,19 @@ " (let [svg (-> (clojure.core/slurp file) (string/replace #"[\n]\s*" "")) - svg-hiccup (first (map hickory/as-hiccup (hickory/parse-fragment svg))) + svg-hiccup (hickory/as-hiccup (first (hickory/parse-fragment svg))) color (gensym "args")] `(fn [~color] ~(into [] - (clojure.walk/prewalk - (fn [node] - (if (svg-tags node) - (if (= :use node) - (symbol "use-def") - (symbol (name node))) - (if (vector? node) - (let [[k v] node] - (if (and (= :fill k) v) - [k color] - node)) - node))) - (rest (rest svg-hiccup))))))) \ No newline at end of file + (clojure.walk/postwalk-replace {:viewbox :viewBox} ;; See https://github.com/jhy/jsoup/issues/272 + (clojure.walk/prewalk + (fn [node] + (if (svg-tags node) + (symbol (name node)) + (if (vector? node) + (let [[k v] node] + (if (and (= :fill k) v) + [k color] + node)) + node))) + svg-hiccup)))))) \ No newline at end of file