feat: add token overview component (status-im#13555) #13767
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
J-Son89
changed the title
Jenkins BuildsClick to see older builds (21)
|
J-Son89
force-pushed
the
feat/token-overview
branch
2 times, most recently
from
019bdc4 to
2ec47e2
Compare
J-Son89
force-pushed
the
feat/token-overview
branch
2 times, most recently
from
8bd9c3c to
ec81d66
Compare
cammellos
reviewed
Aug 22, 2022
| (def container-style {:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12}) | ||
|
|
||
| (defn price-direction [price-change increase decrease neutral] | ||
| (if (> price-change 0) increase (if (< price-change 0) decrease neutral))) |
There was a problem hiding this comment.
Cond is better I think, a bit clearer
(cond
(> price-change 0) increase
(< price-change 0) decrease
:else neutral))
There was a problem hiding this comment.
oh yeah 😅 . thanks! :)
| :background-color (price-direction direction colors/success-50-opa-40 colors/danger-50-opa-40 colors/divider-light)}}]) | ||
|
|
||
| (defn get-direction [percentage-change] | ||
| (if (= (js/parseInt percentage-change) 0) 0 |
There was a problem hiding this comment.
(if (zero? (js/parseInt percentage-change))
....
| (let [direction (get-direction percentage-change)] | ||
| [rn/view {:style container-style} | ||
| [text/text {:number-of-lines 1 | ||
| :size :paragraph-2} "Token Price"] |
There was a problem hiding this comment.
use labels for i18n
(i18n/label :token-price) and then you can add them to translations/en.json (only English is enough)
There was a problem hiding this comment.
Cool, sounds good :)
| :size :heading-2} (str (get-in currencies/currencies [currency :symbol]) price)] | ||
|
|
||
| [rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}} | ||
| (when (not (= direction 0)) [icons/icon (if (>= direction 0) :main-icons2/price-increase12 :main-icons2/price-decrease12) |
| :style {:height 32 | ||
| :width 32}}]] | ||
| [rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}} | ||
| (when (not (= direction 0)) [icons/icon (if (> direction 0) :main-icons2/price-increase12 :main-icons2/price-decrease12) |
There was a problem hiding this comment.
(zero? direction)
(pos? direction)
src/quo2/screens/token_overview.cljs
Outdated
| [rn/view {:border :black | ||
| :border-width 1 | ||
| :align-items :center} | ||
| [quo2/token-balance (merge @state {:token-img-src (if (= (:token @state) "ETH") eth-token snt-token)})] |
There was a problem hiding this comment.
merge is used mostly when you have a map as the second parameter, not a finite set of known keys.
In that case you can use assoc.
In your case:
(assoc @state :token-img-src (if ....))
But it's multivariadic, so you can also use it to assoc multiple keys, for example
(assoc some-map :a 1 :b 2), equivalent to (merge some-map {:a 1 :b 2}), but clearer and probably a tad faster.
There was a problem hiding this comment.
thanks for the help :)
src/quo2/screens/token_overview.cljs
Outdated
| [quo2/token-balance (merge @state {:token-img-src (if (= (:token @state) "ETH") eth-token snt-token)})] | ||
| [rn/view {:padding-vertical 25 | ||
| :align-items :center}] | ||
| [quo2/token-price (merge @state {:token-img-src (if (= (:token @state) "ETH") eth-token snt-token)})]]]))) |
cammellos
approved these changes
Aug 23, 2022
J-Son89
force-pushed
the
feat/token-overview
branch
4 times, most recently
from
d742586 to
351c1ac
Compare
J-Son89
force-pushed
the
feat/token-overview
branch
from
351c1ac to
12274a8
Compare
ibrkhalil
pushed a commit
that referenced
this pull request
Sep 5, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
fixes #13555
Summary
Implemented token overview component. implemented as two separate components, one for token account total and for token price. Can easily be grouped into one component if needed but current use case in wallet designs have these being used independently -> https://www.figma.com/file/Q92CTbwanXZwSWrHWKfJqS/Wallet-for-Mobile?node-id=0%3A1
Platforms
Steps to test
Open app and go to quo2 components in settings menu
status: ready