[BUG #2881] Migrated wallet main screen to latest mockups
This commit is contained in:
Julien Eluard
parent
314d425187
commit
d05f50db62
|
|
@ -9197,4 +9197,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<rect id="Rectangle-9" x="4" y="7" width="16" height="2" rx="1" />
|
||||
<rect id="Rectangle-9" x="6" y="11" width="12" height="2" rx="1" />
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 414 B After Width: | Height: | Size: 396 B |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="" d="M9.45193925,13.7537392 L7.26279002,12.9529307 C6.35511602,12.6208963 5.888468,11.615914 6.22050249,10.70824 C6.26557584,10.5850241 6.32436272,10.4672679 6.39575494,10.3571911 L12.742556,1.57131376 C13.1741283,0.905889869 14.2084917,1.27835681 14.1167679,2.06615774 L13.2037815,8.90765762 C13.1908988,9.01830484 13.2527771,9.1241266 13.3555235,9.16716082 L16.3684577,10.4290956 C17.2599209,10.8024753 17.6799106,11.827833 17.3065309,12.7192962 C17.2768982,12.7900458 17.242646,12.8587707 17.2039958,12.9250261 L11.3982074,21.8775141 C11.0052004,22.5512206 9.97271936,22.2519867 10.0008666,21.4725365 L10.2716953,14.9727702 C10.291231,14.4317892 9.96032545,13.939711 9.45193925,13.7537392 Z" id="icon">
|
||||
</path>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 843 B After Width: | Height: | Size: 825 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path fill="" d="M12.2559385,5.07823738 L7.65424355,11.1734058 C7.64404466,11.1891311 7.63564653,11.2059534 7.62920748,11.2235556 C7.58177398,11.3532234 7.64843799,11.4967923 7.7781057,11.5442257 L9.96725492,12.3450342 C11.0857046,12.7541722 11.8136967,13.8367442 11.7707182,15.0269023 L11.6076877,18.5415284 L15.9083371,12.169203 C15.976325,12.0124611 15.9163264,11.8659814 15.7889745,11.8126415 L12.7760403,10.5507067 C12.0568154,10.2494672 11.6236676,10.5087149 11.7138462,9.73418434 L12.2559385,5.07823738 Z M9.45193925,13.7537392 L7.26279002,12.9529307 C6.35511602,12.6208963 5.888468,11.615914 6.22050249,10.70824 C6.26557584,10.5850241 6.32436272,10.4672679 6.39575494,10.3571911 L12.742556,1.57131376 C13.1741283,0.905889869 14.2084917,1.27835681 14.1167679,2.06615774 L13.2037815,8.90765762 C13.1908988,9.01830484 13.2527771,9.1241266 13.3555235,9.16716082 L16.3684577,10.4290956 C17.2599209,10.8024753 17.6799106,11.827833 17.3065309,12.7192962 C17.2768982,12.7900458 17.242646,12.8587707 17.2039958,12.9250261 L11.3982074,21.8775141 C11.0052004,22.5512206 9.97271936,22.2519867 10.0008666,21.4725365 L10.2716953,14.9727702 C10.291231,14.4317892 9.96032545,13.939711 9.45193925,13.7537392 Z" id="icon"></path>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="" d="M12.2559385,5.07823738 L7.65424355,11.1734058 C7.64404466,11.1891311 7.63564653,11.2059534 7.62920748,11.2235556 C7.58177398,11.3532234 7.64843799,11.4967923 7.7781057,11.5442257 L9.96725492,12.3450342 C11.0857046,12.7541722 11.8136967,13.8367442 11.7707182,15.0269023 L11.6076877,18.5415284 L15.9083371,12.169203 C15.976325,12.0124611 15.9163264,11.8659814 15.7889745,11.8126415 L12.7760403,10.5507067 C12.0568154,10.2494672 11.6236676,10.5087149 11.7138462,9.73418434 L12.2559385,5.07823738 Z M9.45193925,13.7537392 L7.26279002,12.9529307 C6.35511602,12.6208963 5.888468,11.615914 6.22050249,10.70824 C6.26557584,10.5850241 6.32436272,10.4672679 6.39575494,10.3571911 L12.742556,1.57131376 C13.1741283,0.905889869 14.2084917,1.27835681 14.1167679,2.06615774 L13.2037815,8.90765762 C13.1908988,9.01830484 13.2527771,9.1241266 13.3555235,9.16716082 L16.3684577,10.4290956 C17.2599209,10.8024753 17.6799106,11.827833 17.3065309,12.7192962 C17.2768982,12.7900458 17.242646,12.8587707 17.2039958,12.9250261 L11.3982074,21.8775141 C11.0052004,22.5512206 9.97271936,22.2519867 10.0008666,21.4725365 L10.2716953,14.9727702 C10.291231,14.4317892 9.96032545,13.939711 9.45193925,13.7537392 Z" id="icon"></path>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
<svg >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="000000" d="M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z" id="Oval-7"></path>
|
||||
<path fill="000000" d="M12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 Z M12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 Z" id="Oval-7"></path>
|
||||
</svg >
|
||||
|
Before Width: | Height: | Size: 660 B After Width: | Height: | Size: 737 B |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="24px" height="24px">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill-rule="nonzero" fill="#000000">
|
||||
<path d="M13,5.41421356 L13,14 C13,14.5522847 12.5522847,15 12,15 C11.4477153,15 11,14.5522847 11,14 L11,5.41421356 L8.70710678,7.70710678 C8.31658249,8.09763107 7.68341751,8.09763107 7.29289322,7.70710678 C6.90236893,7.31658249 6.90236893,6.68341751 7.29289322,6.29289322 L11.2928932,2.29289322 C11.6834175,1.90236893 12.3165825,1.90236893 12.7071068,2.29289322 L16.7071068,6.29289322 C17.0976311,6.68341751 17.0976311,7.31658249 16.7071068,7.70710678 C16.3165825,8.09763107 15.6834175,8.09763107 15.2928932,7.70710678 L13,5.41421356 L13,5.41421356 Z M3,11 C3,10.4477153 3.44771525,10 4,10 C4.55228475,10 5,10.4477153 5,11 L5,18 C5,18.5522847 5.44771525,19 6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,11 C19,10.4477153 19.4477153,10 20,10 C20.5522847,10 21,10.4477153 21,11 L21,18 C21,19.6568542 19.6568542,21 18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,11 Z"></path>
|
||||
</g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 979 B After Width: | Height: | Size: 1.0 KiB |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="16px" height="8px" viewBox="0 0 16 8">
|
||||
<svg width="16" height="8" viewBox="0 0 16 8">
|
||||
<path fill="none" d="M0,0 L15.969209,0.0223819541 L9.39011025,6.60148066 C8.60906167,7.38252924 7.34273171,7.38252924 6.56168312,6.60148066 L6.55741249,6.59719708 L0,0 Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 234 B After Width: | Height: | Size: 230 B |
|
|
@ -1,9 +1,8 @@
|
|||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="24px" height="24px" viewBox="-108 65.9 24 24" style="enable-background:new -108 65.9 24 24;" xml:space="preserve">
|
||||
<g fill="">
|
||||
<path d="M-89.4,75.9l-2.3,2.3c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l4-4c0.2-0.2,0.3-0.4,0.3-0.6c0-0.3-0.1-0.6-0.3-0.8l-4-4
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-108 65.9 24 24" >
|
||||
<g>
|
||||
<path fill="" d="M-89.4,75.9l-2.3,2.3c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l4-4c0.2-0.2,0.3-0.4,0.3-0.6c0-0.3-0.1-0.6-0.3-0.8l-4-4
|
||||
c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l2.3,2.3H-97c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1H-89.4z"/>
|
||||
<path d="M-102.6,81.9h7.6c0.5,0,1-0.4,1-1c0-0.6-0.4-1-1-1h-7.6l2.3-2.3c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0l-4,4
|
||||
<path fill="" d="M-102.6,81.9h7.6c0.5,0,1-0.4,1-1c0-0.6-0.4-1-1-1h-7.6l2.3-2.3c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0l-4,4
|
||||
c-0.2,0.2-0.3,0.5-0.3,0.8c0,0.2,0.1,0.4,0.3,0.6l4,4c0.4,0.4,1,0.4,1.4,0c0.4-0.4,0.4-1,0-1.4L-102.6,81.9z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 728 B After Width: | Height: | Size: 577 B |
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 "シェア"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 "Поділитися"
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
@ -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
|
||||
|
|
@ -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))))]))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)"
|
||||
|
|
|
|||
|
|
@ -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]))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}]]))
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}})
|
||||
|
|
@ -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)))
|
||||
|
|
@ -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}]]))
|
||||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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])}}))
|
||||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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?]]]))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
@ -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}]))
|
||||
|
|
@ -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]])
|
||||
|
|
@ -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)))))))
|
||||
(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))))))
|
||||
Loading…
Reference in New Issue