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

Transaction summary component (#17163) 

* Transaction summary component
This commit is contained in:
Volodymyr Kozieiev 2023-09-12 14:44:40 +01:00 committed by GitHub
parent fcbe6fe2b4
commit dd1f938e85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 442 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/quo2/components/tags/context_tag/view.cljs
View File

@ -79,13 +79,14 @@
state :default}
:as props}]
[rn/view
{:style (merge (style/container {:theme theme
:type type
:size size
:state state
:blur? blur?
:customization-color customization-color})
container-style)}
{:style (merge (style/container {:theme theme
:type type
:size size
:state state
:blur? blur?
:customization-color customization-color})
container-style)
:accessibility-label :context-tag}
(case type
:default
[tag-skeleton {:theme theme :size size :text full-name}

32
src/quo2/components/wallet/transaction_summary/component_spec.cljs Normal file
View File

@ -0,0 +1,32 @@
(ns quo2.components.wallet.transaction-summary.component-spec
(:require [quo2.components.wallet.transaction-summary.view :as transaction-summary]
[test-helpers.component :as h]))
(h/describe "Transaction summary"
(h/test "default render"
(h/render [transaction-summary/view {}])
(h/is-truthy (h/query-by-label-text :transaction-summary)))
(h/test "incorrect setting doesn't crash render"
(h/render [transaction-summary/view {:transaction :unknown}])
(h/is-truthy (h/query-by-label-text :transaction-summary)))
(h/test "icon displayed"
(h/render [transaction-summary/view {:transaction :send}])
(h/is-truthy (h/query-by-label-text :header-icon)))
(h/test "Context tag rendered"
(h/render [transaction-summary/view
{:transaction :send
:first-tag {:size 24
:type :token
:token-name "SNT"
:amount 1500}}])
(h/is-truthy (h/query-by-label-text :context-tag))))

70
src/quo2/components/wallet/transaction_summary/style.cljs Normal file
View File

@ -0,0 +1,70 @@
(ns quo2.components.wallet.transaction-summary.style
(:require [quo2.foundations.colors :as colors]))
(defn container
[theme]
{:border-radius 16
:padding-top 9
:padding-bottom 8
:border-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
:border-width 1})
(def transaction-header-container
{:flex-direction :row
:align-items :center
:margin-bottom 9
:padding-horizontal 12})
(defn transaction-header
[theme]
{:color (colors/theme-colors colors/neutral-100 colors/white theme)
:margin-left 4})
(defn prop-text
[theme]
{:margin-right 4
:color (colors/theme-colors colors/neutral-100 colors/white theme)})
(def prop-tag
{:margin-right 4})
(def icon-container
{:width 20
:height 20
:align-items :center
:justify-content :center})
(def content
{:margin-bottom 8
:padding-horizontal 12})
(def content-line
{:flex-direction :row
:margin-top 4
:align-items :center})
(defn icon-color
[theme]
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
(defn divider
[theme]
{:height 1
:margin-vertical 4
:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
(defn extra-info-header
[theme]
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
(defn extra-info-content
[theme]
{:color (colors/theme-colors colors/neutral-100 colors/white theme)})
(def extra-info-container
{:margin-horizontal 12})
(def extras-container
{:flex-direction :row
:justify-content :space-between
:margin-top 4})

123
src/quo2/components/wallet/transaction_summary/view.cljs Normal file
View File

@ -0,0 +1,123 @@
(ns quo2.components.wallet.transaction-summary.view
(:require [quo2.theme :as quo.theme]
[quo2.components.wallet.transaction-summary.style :as style]
[react-native.core :as rn]
[quo2.components.markdown.text :as text]
[quo2.components.icon :as icon]
[quo2.components.tags.context-tag.view :as context-tag]
[utils.i18n :as i18n]))
(def transaction-translation
{:send (i18n/label :t/send)
:swap (i18n/label :t/swap)
:bridge (i18n/label :t/bridge)})
(def transaction-icon
{:send :i/send
:swap :i/swap
:bridge :i/bridge})
(defn transaction-header
[{:keys [transaction
theme]
:or {transaction :send}}]
(let [icon (transaction-icon transaction)
translation (transaction transaction-translation)]
[rn/view
{:style style/transaction-header-container}
[rn/view {:style style/icon-container}
(when icon
[icon/icon icon
{:color (style/icon-color theme)
:accessibility-label :header-icon}])]
(when translation
[text/text
{:weight :semi-bold
:size :paragraph-1
:style (style/transaction-header theme)}
translation])]))
(defn prop-text
[label theme]
[text/text
{:weight :regular
:size :paragraph-2
:style (style/prop-text theme)}
(i18n/label label)])
(defn prop-tag
[props]
[rn/view {:style style/prop-tag}
[context-tag/view (assoc props :size 24)]])
(defn extra-info
[{:keys [header content theme]}]
[rn/view {:style style/extra-info-container}
[text/text
{:weight :regular
:size :paragraph-2
:style (style/extra-info-header theme)}
header]
[text/text
{:weight :medium
:size :paragraph-2
:style (style/extra-info-content theme)}
content]])
(defn- view-internal
[{:keys [theme first-tag second-tag third-tag fourth-tag second-tag-prefix
third-tag-prefix fourth-tag-prefix fifth-tag max-fees
nonce input-data]
:as props}]
[rn/view
{:style (style/container theme)
:accessibility-label :transaction-summary}
[transaction-header props]
[rn/view {:style style/content}
[rn/view {:style style/content-line}
(when first-tag [prop-tag first-tag])
(when second-tag-prefix [prop-text second-tag-prefix theme])
(when second-tag [prop-tag second-tag])]
[rn/view {:style style/content-line}
(when third-tag-prefix [prop-text third-tag-prefix theme])
(when third-tag [prop-tag third-tag])
(when fourth-tag-prefix [prop-text fourth-tag-prefix theme])
(when fourth-tag [prop-tag fourth-tag])
(when fifth-tag [prop-tag fifth-tag])]]
[rn/view {:style (style/divider theme)}]
[rn/view {:style style/extras-container}
[extra-info
{:header (i18n/label :t/max-fees)
:content max-fees
:theme theme}]
[extra-info
{:header (i18n/label :t/nonce)
:content nonce
:theme theme}]
[extra-info
{:header (i18n/label :t/input-data)
:content input-data
:theme theme}]]])
(def view
"Properties:
- :transaction - type of transaction`. Possible values:
- :send
- :swap
- :bridge
- :first-tag - props for context tag component that will be first on the first line
- :second-tag - props for context tag component that will be second on the first line
- :third-tag - props for context tag component that will be first on the second line
- :fourth-tag - props for context tag component that will be second on the second line
- :fifth-tag - props for context tag component that will be second on the second line
- :second-tag-prefix - translation keyword to be used with label before second context tag
- :third-tag-prefix - translation keyword to be used with label before third context tag
- :fourth-tag-prefix - translation keyword to be used with label before fourth context tag
- :max-fees - string
- :nonce - digit
- :input data - string
"
(quo.theme/with-theme view-internal))

2
src/quo2/core.cljs
View File

@ -127,6 +127,7 @@
quo2.components.wallet.progress-bar.view
quo2.components.wallet.summary-info.view
quo2.components.wallet.token-input.view
quo2.components.wallet.transaction-summary.view
quo2.components.wallet.wallet-activity.view
quo2.components.wallet.wallet-overview.view
[quo2.components.graph.interactive-graph.view :as interactive-graph]))
@ -345,3 +346,4 @@
(def token-input quo2.components.wallet.token-input.view/view)
(def wallet-overview quo2.components.wallet.wallet-overview.view/view)
(def wallet-activity quo2.components.wallet.wallet-activity.view/view)
(def transaction-summary quo2.components.wallet.transaction-summary.view/view)

1
src/quo2/core_spec.cljs
View File

@ -72,5 +72,6 @@
[quo2.components.wallet.progress-bar.component-spec]
[quo2.components.wallet.summary-info.component-spec]
[quo2.components.wallet.token-input.component-spec]
[quo2.components.wallet.transaction-summary.component-spec]
[quo2.components.wallet.wallet-overview.component-spec]
[quo2.components.wallet.wallet-activity.component-spec]))

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

@ -130,6 +130,7 @@
[status-im2.contexts.quo-preview.wallet.summary-info :as summary-info]
[status-im2.contexts.quo-preview.wallet.token-input :as token-input]
[status-im2.contexts.quo-preview.wallet.wallet-activity :as wallet-activity]
[status-im2.contexts.quo-preview.wallet.transaction-summary :as transaction-summary]
[status-im2.contexts.quo-preview.wallet.wallet-overview :as wallet-overview]
[utils.re-frame :as rf]))
@ -390,6 +391,8 @@
:component token-input/preview}
{:name :wallet-activity
:component wallet-activity/view}
{:name :transaction-summary
:component transaction-summary/view}
{:name :wallet-overview
:component wallet-overview/preview-wallet-overview}]
:keycard [{:name :keycard-component

201
src/status_im2/contexts/quo_preview/wallet/transaction_summary.cljs Normal file
View File

@ -0,0 +1,201 @@
(ns status-im2.contexts.quo-preview.wallet.transaction-summary
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]
[quo2.foundations.resources :as quo.resources]))
(def asset-snt
{:size 24
:type :token
:token-name "SNT"
:amount 1500
:token-logo (quo.resources/get-token :snt)})
(def asset-dai
{:size 24
:type :token
:token-name "DAI"
:amount 2400
:token-logo (quo.resources/get-token :dai)})
(def asset-collectible
{:size 24
:type :collectible
:collectible (resources/mock-images :collectible)
:collectible-name "Collectible"
:collectible-number "123"})
(def trip-to-vegas
{:size 24
:type :account
:account-name "Trip to Vegas"
:emoji "🤑"})
(def piggy-bank
{:size 24
:type :account
:account-name "Piggy bank"
:emoji "🐷"})
(def aretha-gosling
{:size 24
:type :default
:full-name "Aretha Gosling"
:profile-picture (resources/mock-images :user-picture-female2)})
(def james-bond
{:size 24
:type :default
:full-name "James Bond"
:profile-picture (resources/mock-images :user-picture-male4)})
(def mainnet
{:size 24
:type :network
:network-logo (quo.resources/get-network :ethereum)
:network-name "Mainnet"})
(def optimism
{:size 24
:type :network
:network-logo (quo.resources/get-network :optimism)
:network-name "Optimism"})
(def arbitrum
{:size 24
:type :network
:network-logo (quo.resources/get-network :arbitrum)
:network-name "Arbitrum"})
(def multinetwork
{:size 24
:type :multinetwork
:networks [(quo.resources/get-network :ethereum)
(quo.resources/get-network :arbitrum)
(quo.resources/get-network :optimism)]})
(def moonpay
{:size 24
:type :network
:network-logo (quo.resources/get-network :ethereum)
:network-name "Moonpay"})
(def binance
{:size 24
:type :network
:network-logo (quo.resources/get-network :ethereum)
:network-name "Binance"})
(def context-tags
[{:key asset-snt
:value "SNT"}
{:key asset-dai
:value "UNK"}
{:key asset-collectible
:value "Collectible"}
{:key trip-to-vegas
:value "Account: Trip to Vegas"}
{:key piggy-bank
:value "Account: Piggy bank"}
{:key aretha-gosling
:value "Person: Aretha Gosling"}
{:key james-bond
:value "Person: James Bond"}
{:key mainnet
:value "Network: Mainnet"}
{:key optimism
:value "Network: Optimism"}
{:key arbitrum
:value "Network: Arbitrum"}
{:key multinetwork
:value "Network: Multinetwork"}
{:key moonpay
:value "Market: Moonpay"}
{:key binance
:value "Market: Binance"}])
(def prefixes
[{:key :t/to
:value "To"}
{:key :t/in
:value "In"}
{:key :t/via
:value "Via"}
{:key :t/from
:value "From"}
{:key :t/on
:value "On"}
{:key :t/at
:value "At"}])
(def descriptor
(concat
[{:key :transaction
:type :select
:options [{:key :send}
{:key :swap}
{:key :bridge}]}
{:label "Slot 1"
:key :first-tag
:type :select
:options context-tags}
{:label "Slot 2 prefix"
:key :second-tag-prefix
:type :select
:options prefixes}
{:label "Slot 2"
:key :second-tag
:type :select
:options context-tags}
{:label "Slot 3 prefix"
:key :third-tag-prefix
:type :select
:options prefixes}
{:label "Slot 3"
:key :third-tag
:type :select
:options context-tags}
{:label "Slot 4 prefix"
:key :fourth-tag-prefix
:type :select
:options prefixes}
{:label "Slot 4"
:key :fourth-tag
:type :select
:options context-tags}
{:label "Slot 5"
:key :fifth-tag
:type :select
:options context-tags}
{:key :max-fees
:type :text}
{:key :nonce
:type :number}
{:key :input-data
:type :text}]))
(defn view
[]
(let [component-state (reagent/atom {:transaction :send
:first-tag asset-snt
:second-tag-prefix :t/from
:second-tag piggy-bank
:third-tag-prefix nil
:third-tag aretha-gosling
:fourth-tag-prefix :t/via
:fourth-tag mainnet
:fifth-tag optimism
:max-fees "€55.57"
:nonce 26
:input-data "Hello from Porto"})]
(fn []
[preview/preview-container
{:state component-state
:descriptor descriptor
:show-blur-background? true
:component-container-style {:align-self :center}}
[quo/transaction-summary
(merge {:on-press #(js/alert "Dropdown pressed")}
@component-state)]])))

2
translations/en.json
View File

@ -697,6 +697,7 @@
"Sorry the code was incorrect, please enter it again"
],
"initialization": "Initialization",
"input-data": "Input data",
"install": "↓ Install",
"intro-message1": "Welcome to Status!\nTap this message to set your password and get started.",
"intro-privacy-policy-note1": "Status does not collect or profit from your personal data. By continuing, you agree with the ",
@ -1831,6 +1832,7 @@
"pinned-by": "Pinned by",
"pin-limit-reached": "Pin limit reached. Unpin a previous message first.",
"max-fee": "Max fee",
"max-fees": "Max fees",
"max-priority-fee": "Max priority fee",
"miners-higher-fee": "Miners will likely inlcude your transaction earlier if you pay a higher fee.",
"gas-amount-limit": "Gas amount limit",