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

Quo2: Token Input (#16819) 

* feat: quo2 token input (1/2)
This commit is contained in:
Omar Basem 2023-08-03 09:08:08 +04:00 committed by GitHub
parent 7b425c1a53
commit b0e45207df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 185 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/tokens/mainnet/SNT@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
resources/images/tokens/mainnet/SNT@3x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

18
src/quo2/components/wallet/token_input/component_spec.cljs Normal file
View File

@ -0,0 +1,18 @@
(ns quo2.components.wallet.token-input.component-spec
(:require [test-helpers.component :as h]
[quo2.components.wallet.token-input.view :as token-input]))
(h/describe "Wallet: Token Input"
(h/test "Token label renders"
(h/render [token-input/view
{:token :snt
:currency :eur
:conversion 1}])
(h/is-truthy (h/get-by-text "SNT")))
(h/test "Amount renders"
(h/render [token-input/view
{:token :snt
:currency :eur
:conversion 1}])
(h/is-truthy (h/get-by-text "€0.00"))))

44
src/quo2/components/wallet/token_input/style.cljs Normal file
View File

@ -0,0 +1,44 @@
(ns quo2.components.wallet.token-input.style
(:require
[quo2.foundations.colors :as colors]
[react-native.platform :as platform]
[quo2.foundations.typography :as typography]))
(defn main-container
[width]
{:padding-vertical 8
:width width})
(def amount-container
{:padding-horizontal 20
:padding-bottom 4
:height 36
:flex-direction :row
:justify-content :space-between})
(def token
{:width 32
:height 32})
(def text-input
(merge typography/heading-1
{:font-weight "600"
:margin-left 4
:margin-right (if platform/ios? 6 4)
:padding 0
:text-align :center
:height "100%"}))
(defn divider
[width theme]
{:height 1
:width width
:background-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)
:margin-vertical 8})
(def data-container
{:padding-top 4
:padding-horizontal 20
:height 28
:flex-direction :row
:justify-content :space-between})

67
src/quo2/components/wallet/token_input/view.cljs Normal file
View File

@ -0,0 +1,67 @@
(ns quo2.components.wallet.token-input.view
(:require
[clojure.string :as string]
[quo2.components.buttons.button.view :as button]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.foundations.resources :as resources]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]
[quo2.foundations.common :as common]
[quo2.components.wallet.token-input.style :as style]))
(defn calc-value
[crypto? currency token value conversion]
(if crypto?
(str (get common/currency-label currency) (.toFixed (* value conversion) 2))
(str (.toFixed (/ value conversion) 2) " " (string/upper-case (clj->js token)))))
(defn- view-internal
[]
(let [width (:width (rn/get-window))
value (reagent/atom 0)
crypto? (reagent/atom true)
input-ref (atom nil)]
(fn [{:keys [theme token currency conversion]}]
[rn/view {:style (style/main-container width)}
[rn/view {:style style/amount-container}
[rn/pressable
{:on-press #(.focus ^js @input-ref)
:style {:flex-direction :row
:flex-grow 1
:align-items :flex-end}}
[rn/image
{:style style/token
:source (resources/get-token token)}]
[rn/text-input
{:ref #(when @input-ref (reset! input-ref %))
:placeholder "0"
:placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
:keyboard-type :numeric
:max-length 12
:default-value @value
:on-change-text #(reset! value %)
:style style/text-input}]
[text/text
{:size :paragraph-2
:weight :semi-bold
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
(string/upper-case (clj->js (if @crypto? token currency)))]]
[button/button
{:icon true
:size 32
:on-press #(swap! crypto? not)
:type :outline
:accessibility-label :reorder}
:i/reorder]]
[rn/view {:style (style/divider width theme)}]
[rn/view {:style style/data-container}
[text/text "[WIP] NETWORK TAG"]
[text/text
{:size :paragraph-2
:weight :medium
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
(calc-value @crypto? currency token @value conversion)]]])))
(def view (quo.theme/with-theme view-internal))

6
src/quo2/core.cljs
View File

@ -105,7 +105,8 @@
quo2.components.text-combinations.title.view
quo2.components.wallet.network-amount.view
quo2.components.wallet.network-bridge.view
quo2.components.wallet.account-card.view))
quo2.components.wallet.account-card.view
quo2.components.wallet.token-input.view))
(def separator quo2.components.common.separator.view/separator)
@ -294,6 +295,7 @@
(def url-preview-list quo2.components.links.url-preview-list.view/view)
(def link-preview quo2.components.links.link-preview.view/view)
;;;; GRADIENT
(def gradient-cover quo2.components.gradient.gradient-cover.view/view)
@ -301,3 +303,5 @@
(def network-amount quo2.components.wallet.network-amount.view/view)
(def network-bridge quo2.components.wallet.network-bridge.view/view)
(def account-card quo2.components.wallet.account-card.view/view)
(def token-input quo2.components.wallet.token-input.view/view)

3
src/quo2/core_spec.cljs
View File

@ -51,4 +51,5 @@
[quo2.components.tags.status-tags-component-spec]
[quo2.components.wallet.network-amount.component-spec]
[quo2.components.wallet.network-bridge.component-spec]
[quo2.components.wallet.account-card.component-spec]))
[quo2.components.wallet.account-card.component-spec]
[quo2.components.wallet.token-input.component-spec]))

5
src/quo2/foundations/common.cljs Normal file
View File

@ -0,0 +1,5 @@
(ns quo2.foundations.common)
(def currency-label
{:eur "€"
:usd "$"})

8
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -105,7 +105,8 @@
[status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
[status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]
[status-im2.contexts.quo-preview.wallet.account-card :as account-card]))
[status-im2.contexts.quo-preview.wallet.account-card :as account-card]
[status-im2.contexts.quo-preview.wallet.token-input :as token-input]))
(def screens-categories
{:foundations [{:name :shadows
@ -408,7 +409,10 @@
:component network-amount/preview}
{:name :network-bridge
:options {:topBar {:visible true}}
:component network-bridge/preview}]
:component network-bridge/preview}
{:name :token-input
:options {:topBar {:visible true}}
:component token-input/preview}]
:keycard [{:name :keycard-component
:options {:topBar {:visible true}}
:component keycard/preview-keycard}]})

38
src/status_im2/contexts/quo_preview/wallet/token_input.cljs Normal file
View File

@ -0,0 +1,38 @@
(ns status-im2.contexts.quo-preview.wallet.token-input
(:require
[quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Token:"
:key :token
:type :select
:options [{:key :eth
:value "ETH"}
{:key :snt
:value "SNT"}]}
{:label "Currency:"
:key :currency
:type :select
:options [{:key :usd
:value "USD"}
{:key :eur
:value "EUR"}]}])
(defn preview
[]
(let [state (reagent/atom {:token :eth
:currency :usd
:conversion 0.02})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view
{:style {:flex 1
:padding-horizontal 20}}
[rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
[rn/view
{:style {:flex 1
:margin-top 50
:align-items :center}} [quo/token-input @state]]]])))