Quo2: Network Amount (#16764)

* feat: network amount component
This commit is contained in:
Omar Basem 2023-07-31 14:53:27 +04:00 committed by GitHub
parent 162f02ea27
commit cf11743f87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 112 additions and 618 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 915 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 B

View File

@ -1,77 +0,0 @@
(ns quo2.components.wallet.lowest-price
(:require [clojure.string :as string]
[react-native.core :as rn]))
(def centrify
{:style {:flex-direction :row
:justify-content :center
:align-items :center}})
(defn border-alignment
[value-bg-color]
{:style {:align-self :flex-start
:padding-horizontal 16
:padding-vertical 2
:flex-grow 0.25
:border-radius 4
:background-color value-bg-color}})
(def line-dots-props
{:ellipsize-mode :middle
:number-of-lines 1
:font-size 10
:line-height 2})
(defn dots
"Returns the dots"
[few-of-dots?]
(let [dots-text (->> ". "
(repeat (if few-of-dots?
16
48))
string/join
(str " "))]
dots-text))
(defn dots-comp
"Returns the dots adding their styles"
[few-of-dots?]
[rn/view
{:style {:align-items :center
:bottom 5}}
[rn/text line-dots-props (dots few-of-dots?)]])
(defn lowest-price-value-comp
"Component responsible for the top and bottom values"
[top-value top-value-bg-color top-value-text-color]
[rn/view (border-alignment top-value-bg-color)
[rn/text
{:style {:color top-value-text-color
:text-align :center}} top-value]])
(defn lowest-price-styles
[margin-top]
{:style {:flex-direction :column
:width "100%"
:overflow :hidden
:margin-top (int margin-top)
:justify-content :center}})
(defn lowest-price
"Shows the lowest price component"
[{:keys [top-value
bottom-value
margin-top
top-value-text-color
top-value-bg-color
bottom-value-bg-color
bottom-value-text-color]}]
[rn/view (lowest-price-styles margin-top)
[rn/view centrify
[dots-comp true]
[lowest-price-value-comp top-value top-value-bg-color top-value-text-color]
[dots-comp false]]
[rn/view centrify
[dots-comp false]
[lowest-price-value-comp bottom-value bottom-value-bg-color bottom-value-text-color]
[dots-comp true]]])

View File

@ -1,53 +0,0 @@
(ns quo2.components.wallet.network-amount
(:require [quo2.components.icon :as icon]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]))
(defn network-amount
"[network-amount opts]
opts
{:style style ;; extra styles for the container (takes precedence)
:network-name \"Mainnet\" ;; shown network name
:icon :i/ethereum ;; key of icon belonging to the network
:eth-value 1.2345678 ;; shown ETH value}"
[{:keys [show-right-border? style network-name icon eth-value labels] :as _opts}]
[rn/view
(merge {:accessibility-label :network-amount
:background-color (colors/theme-colors colors/white colors/neutral-95)
:border-radius 16
:padding 6}
style)
[rn/view
{:style {:flex-direction :row
:align-items :center}}
[rn/view
{:flex-direction :column
:align-self :flex-start
:padding-top 3
:padding-right 4}
[icon/icon icon
{:size 40
:no-color true
:container-style {:width 12
:height 12}}]]
[rn/view
[rn/view
{:style {:flex-direction :row
:align-items :center}}
[text/text
{:weight :medium
:size :paragraph-2
:style {:color (colors/theme-colors colors/neutral-100 colors/white)}}
eth-value \space (:eth labels)]
[rn/view
{:style {:border-right-width (when show-right-border? 1)
:border-right-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
:padding-left 8
:align-self :center
:height 8}}]]
[text/text
{:weight :medium
:size :label
:style {:color colors/neutral-50}}
(:on labels) \space network-name]]]])

View File

@ -0,0 +1,10 @@
(ns quo2.components.wallet.network-amount.component-spec
(:require [test-helpers.component :as h]
[quo2.components.wallet.network-amount.view :as network-amount]))
(h/describe "Wallet: Network Amount"
(h/test "Amount renders"
(h/render [network-amount/view
{:amount "5.123"
:token :eth}])
(h/is-truthy (h/get-by-text "5.123 ETH"))))

View File

@ -0,0 +1,17 @@
(ns quo2.components.wallet.network-amount.style
(:require [quo2.foundations.colors :as colors]))
(def container
{:flex-direction :row
:align-items :center
:height 18})
(def text
{:margin-left 4
:margin-right 8})
(defn divider
[theme]
{:width 1
:height 8
:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})

View File

@ -0,0 +1,24 @@
(ns quo2.components.wallet.network-amount.view
(:require
[clojure.string :as string]
[quo2.components.markdown.text :as text]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[quo2.components.wallet.network-amount.style :as style]
[quo2.foundations.resources :as resources]))
(defn- view-internal
[{:keys [amount token theme]}]
[rn/view {:style style/container}
[rn/image
{:source (resources/tokens token)
:style {:width 12 :height 12}}]
[text/text
{:weight :medium
:size :paragraph-2
:style style/text}
(str amount " " (string/upper-case (clj->js token)))]
[rn/view
{:style (style/divider theme)}]])
(def view (quo.theme/with-theme view-internal))

View File

@ -1,52 +0,0 @@
(ns quo2.components.wallet.network-breakdown
(:require [quo2.components.markdown.text :as text]
[quo2.components.wallet.network-amount :refer [network-amount]]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]))
(defn network-breakdown
[{:keys [top-value network-conversions labels]}]
[rn/view
{:style {:background-color (colors/theme-colors
colors/white
colors/neutral-95)
:padding-horizontal 40
:padding-top 24
:border-radius 16
:height 126
:width 390
:overflow :hidden}}
[rn/view
{:style {:border-bottom-width 1
:border-bottom-color (colors/theme-colors
colors/neutral-20
colors/neutral-70)
:padding-vertical 6}}
[text/text
{:weight :medium
:style {:color (colors/theme-colors
colors/neutral-100
colors/white)
:font-size 19}}
(str top-value)]]
[rn/scroll-view
{:horizontal true
:style {:text-align :center
:margin-top 6
:width 340}}
(let [last-item-idx (-> network-conversions
count
dec)]
(map-indexed
(fn [idx {:keys [conversion network icon]}]
[rn/view
{:style (cond-> {:flex-direction :row}
(not= idx 0) (assoc :margin-left -4))
:key idx}
[network-amount
{:show-right-border? (not= idx last-item-idx)
:icon icon
:network-name network
:eth-value conversion
:labels labels}]])
network-conversions))]])

View File

@ -1,127 +0,0 @@
(ns quo2.components.wallet.token-overview
(:require [clojure.string :as string]
[quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]))
(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]
(cond
(pos? price-change) increase
(neg? price-change) decrease
:else neutral))
(defn price-color
[direction]
(price-direction direction colors/success-50 colors/danger-50 colors/neutral-50))
(defn divider
[direction]
[rn/view
{:style {:height 10
:margin-left 4
:margin-right 4
:width 1
:background-color (price-direction direction
colors/success-50-opa-40
colors/danger-50-opa-40
colors/divider-light)}}])
(defn get-direction
[percentage-change]
(if (zero? (js/parseInt percentage-change))
0
(/ (js/parseInt percentage-change) (js/Math.abs (js/parseInt percentage-change)))))
(defn trim-minus
[percentage-change]
(if (= (first percentage-change) "-") (string/join (rest percentage-change)) percentage-change))
(defn token-price
"[token-price opts \"label\"]
opts
{
:currency :currency-key
:price :string
:percentage-change :string
}"
[]
(fn
[{:keys [currency price percentage-change label] :or {price "0.00" percentage-change "0.0"}}]
(let [direction (get-direction percentage-change)]
[rn/view {:style container-style}
[text/text
{:number-of-lines 1
:size :paragraph-2} label]
[text/text
{:style {:margin-top 4}
:weight :semi-bold
:number-of-lines 1
:size :heading-2} (str currency price)]
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
(when (not (zero? direction))
[icons/icon (if (>= direction 0) :i/price-increase12 :i/price-decrease12)
{:no-color true
:width 14
:height 14
:container-style {:margin-right 4}}])
[text/text
{:number-of-lines 1
:weight :medium
:size :paragraph-2
:style {:color (price-color direction)}}
(str (trim-minus percentage-change) "%")]]])))
(defn token-balance
"[token-balance opts \"label\"]
opts
{
:token string
:token-img-src :token-img-src
:currency :currency-key
:account-balance :string
:price :string
:percentage-change :string
}"
[]
(fn [{:keys [token token-img-src currency account-balance price percentage-change]
:or {account-balance "0.00" price "0.00" percentage-change "0.0"}}]
(let [direction (get-direction percentage-change)]
[rn/view {:style container-style}
[text/text
{:weight :regular
:number-of-lines 1
:size :paragraph-1} (str "Account " token " Balance")]
[rn/view {:style {:display :flex :flex-direction :row :flex 1 :justify-content :space-between}}
[text/text
{:number-of-lines 1
:weight :semi-bold
:size :heading-1} (str currency account-balance)]
[rn/image
{:source token-img-src
:style {:height 32
:width 32}}]]
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
(when (not (zero? direction))
[icons/icon (if (pos? direction) :i/price-increase :i/price-decrease)
{:no-color true
:size 12
:container-style {:margin-right 4}}])
[text/text
{:number-of-lines 1
:weight :medium
:size :paragraph-2
:style {:color (price-color direction)}} (str currency price)]
[divider direction]
[text/text
{:number-of-lines 1
:weight :medium
:size :paragraph-2
:style {:color (price-color direction)}}
(str (trim-minus percentage-change) "%")]]])))

View File

@ -100,7 +100,8 @@
quo2.components.tags.tag quo2.components.tags.tag
quo2.components.tags.tags quo2.components.tags.tags
quo2.components.tags.token-tag quo2.components.tags.token-tag
quo2.components.text-combinations.title.view)) quo2.components.text-combinations.title.view
quo2.components.wallet.network-amount.view))
(def separator quo2.components.common.separator.view/separator) (def separator quo2.components.common.separator.view/separator)
@ -283,5 +284,10 @@
(def url-preview-list quo2.components.links.url-preview-list.view/view) (def url-preview-list quo2.components.links.url-preview-list.view/view)
(def link-preview quo2.components.links.link-preview.view/view) (def link-preview quo2.components.links.link-preview.view/view)
;;;; GRADIENT ;;;; GRADIENT
(def gradient-cover quo2.components.gradient.gradient-cover.view/view) (def gradient-cover quo2.components.gradient.gradient-cover.view/view)
;;;; WALLET
(def network-amount quo2.components.wallet.network-amount.view/view)

View File

@ -45,4 +45,5 @@
[quo2.components.settings.settings-list.component-spec] [quo2.components.settings.settings-list.component-spec]
[quo2.components.settings.category.component-spec] [quo2.components.settings.category.component-spec]
[quo2.components.share.share-qr-code.component-spec] [quo2.components.share.share-qr-code.component-spec]
[quo2.components.tags.status-tags-component-spec])) [quo2.components.tags.status-tags-component-spec]
[quo2.components.wallet.network-amount.component-spec]))

View File

@ -9,3 +9,17 @@
(defn get-image (defn get-image
[k] [k]
(get ui k)) (get ui k))
(def tokens
{:eth (js/require "../resources/images/tokens/mainnet/ETH.png")
:knc (js/require "../resources/images/tokens/mainnet/KNC.png")
:mana (js/require "../resources/images/tokens/mainnet/MANA.png")
:rare (js/require "../resources/images/tokens/mainnet/RARE.png")
:dai (js/require "../resources/images/tokens/mainnet/DAI.png")
:fxc (js/require "../resources/images/tokens/mainnet/FXC.png")
:usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
:snt (js/require "../resources/images/tokens/mainnet/SNT.png")})
(defn get-token
[k]
(get tokens k))

View File

@ -77,16 +77,6 @@
:user-picture-male4 (js/require "../resources/images/mock2/user_picture_male4.png") :user-picture-male4 (js/require "../resources/images/mock2/user_picture_male4.png")
:user-picture-male5 (js/require "../resources/images/mock2/user_picture_male5.png")}) :user-picture-male5 (js/require "../resources/images/mock2/user_picture_male5.png")})
(def tokens
{:eth (js/require "../resources/images/tokens/mainnet/ETH.png")
:knc (js/require "../resources/images/tokens/mainnet/KNC.png")
:mana (js/require "../resources/images/tokens/mainnet/MANA.png")
:rare (js/require "../resources/images/tokens/mainnet/RARE.png")
:dai (js/require "../resources/images/tokens/mainnet/DAI.png")
:fxc (js/require "../resources/images/tokens/mainnet/FXC.png")
:usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
:snt (js/require "../resources/images/tokens/mainnet/SNT.png")})
(def parallax-video (def parallax-video
{:biometrics [(js/require "../resources/videos2/biometrics_01.mp4") {:biometrics [(js/require "../resources/videos2/biometrics_01.mp4")
(js/require "../resources/videos2/biometrics_02.mp4") (js/require "../resources/videos2/biometrics_02.mp4")
@ -107,7 +97,3 @@
(defn get-themed-image (defn get-themed-image
[k k2] [k k2]
(get ui (if (colors/dark?) k k2))) (get ui (if (colors/dark?) k k2)))
(defn get-token
[k]
(get tokens k))

View File

@ -1,9 +1,10 @@
(ns status-im2.contexts.quo-preview.community.token-gating (ns status-im2.contexts.quo-preview.community.token-gating
(:require [reagent.core :as reagent] (:require
[status-im2.common.resources :as resources] [quo2.foundations.resources :as resources]
[react-native.core :as rn] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [react-native.core :as rn]
[quo2.core :as quo])) [status-im2.contexts.quo-preview.preview :as preview]
[quo2.core :as quo]))
(def descriptor (def descriptor
[{:label "Tokens sufficient" [{:label "Tokens sufficient"

View File

@ -1,6 +1,7 @@
(ns status-im2.contexts.quo-preview.drawers.permission-drawers (ns status-im2.contexts.quo-preview.drawers.permission-drawers
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.foundations.resources :as quo.resources]
[react-native.core :as rn] [react-native.core :as rn]
[status-im2.common.resources :as resources])) [status-im2.common.resources :as resources]))
@ -43,7 +44,7 @@
[quo/text {:style {:margin-right 4}} "Hold"] [quo/text {:style {:margin-right 4}} "Hold"]
[quo/token-tag [quo/token-tag
{:size :small {:size :small
:token-img-src (resources/get-token :eth)} "ETH"] :token-img-src (quo.resources/get-token :eth)} "ETH"]
[quo/text {:style {:margin-left 4}} "To post"]]) [quo/text {:style {:margin-left 4}} "To post"]])
(defn example-3 (defn example-3

View File

@ -97,14 +97,11 @@
[status-im2.contexts.quo-preview.tags.tags :as tags] [status-im2.contexts.quo-preview.tags.tags :as tags]
[status-im2.contexts.quo-preview.tags.token-tag :as token-tag] [status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
[status-im2.contexts.quo-preview.title.title :as title] [status-im2.contexts.quo-preview.title.title :as title]
[status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price]
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
[status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
[status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
[status-im2.contexts.quo-preview.keycard.keycard :as keycard] [status-im2.contexts.quo-preview.keycard.keycard :as keycard]
[status-im2.contexts.quo-preview.loaders.skeleton :as skeleton] [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
[status-im2.contexts.quo-preview.community.channel-actions :as channel-actions] [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]
[status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover])) [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]))
(def screens-categories (def screens-categories
{:foundations [{:name :shadows {:foundations [{:name :shadows
@ -392,16 +389,7 @@
:text-combinations [{:name :title :text-combinations [{:name :title
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component title/preview-title}] :component title/preview-title}]
:wallet [{:name :lowest-price :wallet [{:name :network-amount
:options {:topBar {:visible true}}
:component lowest-price/preview-lowest-price}
{:name :token-overview
:options {:topBar {:visible true}}
:component token-overview/preview-token-overview}
{:name :network-breakdown
:options {:topBar {:visible true}}
:component network-breakdown/preview-network-breakdown}
{:name :network-amount
:options {:topBar {:visible true}} :options {:topBar {:visible true}}
:component network-amount/preview}] :component network-amount/preview}]
:keycard [{:name :keycard-component :keycard [{:name :keycard-component

View File

@ -3,6 +3,7 @@
[quo2.core :as quo] [quo2.core :as quo]
[react-native.core :as rn] [react-native.core :as rn]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[quo2.foundations.resources :as quo2.resources]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.settings.reorder-item.types :as types])) [quo2.components.settings.reorder-item.types :as types]))
@ -22,7 +23,7 @@
:title "Status"}} :title "Status"}}
{:id 3 {:id 3
:type types/item :type types/item
:data {:image (resources/tokens :eth) :data {:image (quo2.resources/tokens :eth)
:image-size 21 :image-size 21
:right-icon :i/world :right-icon :i/world
:title "Ethereum"}} :title "Ethereum"}}

View File

@ -1,10 +1,10 @@
(ns status-im2.contexts.quo-preview.tags.token-tag (ns status-im2.contexts.quo-preview.tags.token-tag
(:require [quo2.components.tags.token-tag :as quo2] (:require [quo2.components.tags.token-tag :as quo2]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.foundations.resources :as resources]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.contexts.quo-preview.preview :as preview]))
[status-im2.common.resources :as resources]))
(def descriptor (def descriptor
[{:label "Size:" [{:label "Size:"

View File

@ -1,60 +0,0 @@
(ns status-im2.contexts.quo-preview.wallet.lowest-price
(:require [quo2.components.wallet.lowest-price :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Top value"
:key :top-value
:type :text}
{:label "Top value background color"
:key :top-value-bg-color
:type :text}
{:label "Top value text color"
:key :top-value-text-color
:type :text}
{:label "Bottom value"
:key :bottom-value
:type :text}
{:label "Bottom value background color"
:key :bottom-value-bg-color
:type :text}
{:label "Bottom value text color"
:key :bottom-value-text-color
:type :text}
{:label "Margin top"
:key :margin-top
:type :text}])
(defn cool-preview
[]
(let [state (reagent/atom {:top-value 20
:bottom-value 20
:top-value-bg-color colors/neutral-100
:top-value-text-color colors/white
:bottom-value-bg-color colors/neutral-100
:bottom-value-text-color colors/white})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/lowest-price @state]]]])))
(defn preview-lowest-price
[]
[rn/view
{:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

View File

@ -1,68 +1,31 @@
(ns status-im2.contexts.quo-preview.wallet.network-amount (ns status-im2.contexts.quo-preview.wallet.network-amount
(:require [clojure.string :as string] (:require
[quo2.components.wallet.network-amount :refer [network-amount]] [quo2.core :as quo]
[quo2.foundations.colors :as colors] [react-native.core :as rn]
[react-native.core :as rn] [reagent.core :as reagent]
[reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview]))
[utils.i18n :as i18n]
[status-im2.contexts.quo-preview.preview :as preview]))
(def ^:private networks
[{:icon :i/ethereum :name "Mainnet"}
{:icon :i/arbitrum :name "Arbitrum"}
{:icon :i/optimism :name "Optimism"}
{:icon :i/zksync :name "zkSync"}])
(defn- networks->options (def descriptor
[networks] [{:label "Amount:"
(for [{:keys [name] :key :amount
:as network}
networks]
{:key network
:value name}))
(def ^:private descriptors
[{:label "ETH Value"
:key :eth-value
:type :text} :type :text}
{:label "Network" {:label "Token:"
:key :network :key :token
:type :select :type :select
:options (networks->options networks)}]) :options [{:key :eth
:value "ETH"}
(def ^:private default-network {:key :snt
(first networks)) :value "SNT"}]}])
(defn- state->opts
[{:keys [eth-value network show-right-border?]
:or {eth-value 5.123456
show-right-border? true}}]
{:network-name (:name (or network default-network))
:icon (:icon (or network default-network))
:eth-value eth-value
:show-right-border? show-right-border?})
(defn- cool-preview
[]
(let [state (reagent/atom {:labels {:eth (i18n/label :t/eth)
:on (string/lower-case (i18n/label :t/on))}})]
(fn []
[rn/view
{:margin-bottom 50
:padding 16}
[preview/customizer state descriptors]
[rn/view
{:padding-vertical 60
:align-items :center}
[network-amount (state->opts @state)]]])))
(defn preview (defn preview
[] []
[rn/view (let [state (reagent/atom {:amount "5.123456"
{:background-color (colors/theme-colors colors/white colors/neutral-90) :token :eth})]
:flex 1} (fn []
[rn/flat-list [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
{:flex 1 [rn/view
:keyboard-should-persist-taps :always {:style {:flex 1
:header [cool-preview] :padding-horizontal 20}}
:key-fn str}]]) [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
[quo/network-amount @state]]])))

View File

@ -1,75 +0,0 @@
(ns status-im2.contexts.quo-preview.wallet.network-breakdown
(:require [clojure.string :as string]
[quo2.components.wallet.network-breakdown :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[utils.i18n :as i18n]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:label "Ethereum Value"
:key :top-value
:type :text}
{:label "Conversion"
:key :conversion
:type :text}
{:label "Network"
:key :network
:type :text}
{:label "Icon"
:key :icon
:type :select
:options [{:key :main-icons/arbitrum
:value "Arbitrum"}
{:key :main-icons/optimism
:value "Optimism"}
{:key :main-icons/zksync
:value "ZK Sync"}
{:key :main-icons/arbitrum
:value "Arbitrum"}
{:key :main-icons/ethereum
:value "Ethereum"}]}])
(defn cool-preview
[]
(let [state (reagent/atom {:icon :main-icons/arbitrum
:network "Mainnet"
:conversion "5.1234"
:top-value "10 ETH"
:labels {:eth (i18n/label :t/eth)
:on (string/lower-case (i18n/label :t/on))}})]
(fn []
[rn/view
{:margin-bottom 50
:padding 16}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:flex-direction :row
:justify-content :center}
[quo2/network-breakdown @state]]
[rn/touchable-opacity
{:style {:background-color colors/neutral-100
:width 100}
:on-press (fn []
(swap! state update-in
[:network-conversions]
conj
{:conversion (:conversion @state)
:icon (:icon @state)
:network (:network @state)}))}
[rn/text {:style {:color colors/white}} "Add current conversion"]]])))
(defn preview-network-breakdown
[]
[rn/view
{:background-color (colors/theme-colors colors/white
colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

View File

@ -1,74 +0,0 @@
(ns status-im2.contexts.quo-preview.wallet.token-overview
(:require [quo2.components.wallet.token-overview :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[utils.i18n :as i18n]
[status-im.utils.currency :as currencies]
[status-im2.contexts.quo-preview.preview :as preview]
[status-im2.common.resources :as resources]))
(def descriptor
[{:label "Token:"
:key :token
:type :select
:options [{:key "SNT"
:value "SNT"}
{:key "ETH"
:value "ETH"}]}
{:label "Account Balance:"
:key :account-balance
:type :text}
{:label "Price:"
:key :price
:type :text}
{:label "Percentage-Increase:"
:key :percentage-change
:type :text}
{:label "Currency:"
:key :currency
:type :select
:options [{:key :usd
:value "$"}
{:key :eur
:value "€"}]}])
(def eth-token (resources/get-token :eth))
(def snt-token (resources/get-token :snt))
(defn cool-preview
[]
(let [state (reagent/atom {:token "ETH"
:account-balance "3.00"
:price "1.00"
:percentage-change "-3.0"
:currency (get-in currencies/currencies [:usd :symbol])})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:border :black
:border-width 1
:align-items :center}
[quo2/token-balance
(assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]
[rn/view
{:padding-vertical 25
:align-items :center}]
[quo2/token-price
(assoc @state
:token-img-src (if (= (:token @state) "ETH") eth-token snt-token)
:label (i18n/label :token-price))]]]])))
(defn preview-token-overview
[]
[rn/view
{:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list
{:flex 1
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])