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

chore: add outline for transacation-progress page (#18217)

This commit is contained in:
Jamie Caprani 2023-12-21 15:37:18 +00:00 committed by GitHub
parent 2d22ed810c
commit 4c3d1667ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 117 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/ui2/transaction-progress@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
resources/images/ui2/transaction-progress@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

5
src/quo/components/buttons/wallet_ctas/view.cljs
View File

@ -15,9 +15,8 @@
{:style style/button-container
:accessibility-label accessibility-label}
[wallet-button/view
{:icon icon
:on-press on-press
:on-long-press #(js/alert "long pressed")}]
{:icon icon
:on-press on-press}]
[text/text
{:weight :medium
:size :paragraph-2

2
src/quo/components/utilities/token/loader.cljs
View File

@ -8,7 +8,7 @@
[token]
(let [token-symbol (cond-> token
(keyword? token) name
:always string/lower-case)]
:always (comp string/lower-case str))]
(get tokens token-symbol)))
(def get-token-image (memoize get-token-image*))

43
src/status_im/common/floating_button_page/view.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.common.floating-button-page.view
(:require
[oops.core :as oops]
[quo.core :as quo]
[react-native.core :as rn]
[react-native.platform :as platform]
[react-native.safe-area :as safe-area]
@ -51,7 +52,8 @@
:remove-listeners remove-listeners}))
(defn view
[{:keys [header footer]} & children]
[{:keys [header footer customization-color gradient-cover?]} &
children]
(reagent/with-let [window-height (:height (rn/get-window))
footer-container-height (reagent/atom 0)
header-height (reagent/atom 0)
@ -79,24 +81,25 @@
:content-container-height @content-container-height
:header-height @header-height
:keyboard-shown? keyboard-shown?})]
[rn/view {:style style/page-container}
[rn/view {:on-layout set-header-height}
header]
[rn/scroll-view
{:on-scroll set-content-y-scroll
:scroll-event-throttle 64
:content-container-style {:flex-grow 1}}
(into [rn/view {:on-layout set-content-container-height}]
children)]
[rn/keyboard-avoiding-view
{:style style/keyboard-avoiding-view
:keyboard-vertical-offset (if platform/ios? (safe-area/get-top) 0)
:pointer-events :box-none}
[floating-container/view
{:on-layout set-footer-container-height
:keyboard-shown? keyboard-shown?
:blur? show-background?}
footer]]])
[:<>
(when gradient-cover? [quo/gradient-cover {:customization-color customization-color}])
[rn/view {:style style/page-container}
[rn/view {:on-layout set-header-height}
header]
[rn/scroll-view
{:on-scroll set-content-y-scroll
:scroll-event-throttle 64
:content-container-style {:flex-grow 1}}
(into [rn/view {:on-layout set-content-container-height}]
children)]
[rn/keyboard-avoiding-view
{:style style/keyboard-avoiding-view
:keyboard-vertical-offset (if platform/ios? (safe-area/get-top) 0)
:pointer-events :box-none}
[floating-container/view
{:on-layout set-footer-container-height
:keyboard-shown? keyboard-shown?
:blur? show-background?}
footer]]]])
(finally
(remove-listeners))))

1
src/status_im/common/resources.cljs
View File

@ -25,6 +25,7 @@
:keycard-watermark (js/require "../resources/images/ui2/keycard-watermark.png")
:discover (js/require "../resources/images/ui2/discover.png")
:invite-friends (js/require "../resources/images/ui2/invite-friends.png")
:transaction-progress (js/require "../resources/images/ui2/transaction-progress.png")
:welcome-illustration (js/require "../resources/images/ui2/welcome_illustration.png")})
(def ui-themed

57
src/status_im/contexts/status_im_preview/common/floating_button_page/view.cljs
View File

@ -9,8 +9,9 @@
(defn view
[]
(let [content-height (reagent/atom 450)
slide? (reagent/atom false)]
(let [content-height (reagent/atom 450)
gradient-cover? (reagent/atom false)
slide? (reagent/atom false)]
(fn []
[rn/view {:style (style/container)}
(when-not @slide?
@ -18,28 +19,30 @@
{:style style/background-image
:source (resources/get-mock-image :dark-blur-bg)}])
[floating-button-page/view
{:header [quo/page-nav
{:type :title-description
:title "floating button page"
:description "press right icon to swap button type"
:text-align :left
:right-side [{:icon-name :i/swap
:on-press #(swap! slide? not)}]
:background :blur
:icon-name :i/close
:on-press #(rf/dispatch [:navigate-back])}]
:footer (if @slide?
[quo/slide-button
{:track-text "We gotta slide"
:track-icon :face-id
:container-style {:z-index 2}
:customization-color :blue
:on-complete #(js/alert "button slid")}
"Save address"]
[quo/button
{:container-style {:z-index 2}
:on-press #(js/alert "button pressed")}
"Save address"])}
{:header [quo/page-nav
{:type :title-description
:title "floating button page"
:description "press right icon to swap button type"
:text-align :left
:right-side [{:icon-name :i/swap
:on-press #(swap! slide? not)}]
:background :blur
:icon-name :i/close
:on-press #(rf/dispatch [:navigate-back])}]
:footer (if @slide?
[quo/slide-button
{:track-text "We gotta slide"
:track-icon :face-id
:container-style {:z-index 2}
:customization-color :blue
:on-complete #(js/alert "button slid")}
"Save address"]
[quo/button
{:container-style {:z-index 2}
:on-press #(js/alert "button pressed")}
"Save address"])
:gradient-cover? @gradient-cover?
:customization-color :orange}
[rn/view {:style (style/page-content @content-height)}
[quo/text {:size :heading-1} "Page Content"]
[quo/input
@ -52,4 +55,8 @@
[quo/button
{:type :outline
:on-press #(swap! content-height (fn [v] (- v 10)))}
"decrease height"]]]])))
"decrease height"]
[quo/button
{:type :outline
:on-press #(swap! gradient-cover? not)}
"gradient cover?"]]]])))

5
src/status_im/contexts/wallet/send/transaction_progress/style.cljs Normal file
View File

@ -0,0 +1,5 @@
(ns status-im.contexts.wallet.send.transaction-progress.style)
(def content-container
{:flex 1
:margin-horizontal 20})

44
src/status_im/contexts/wallet/send/transaction_progress/view.cljs Normal file
View File

@ -0,0 +1,44 @@
(ns status-im.contexts.wallet.send.transaction-progress.view
(:require
[quo.core :as quo]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[status-im.common.floating-button-page.view :as floating-button-page]
[status-im.common.resources :as resources]
[status-im.contexts.wallet.send.transaction-progress.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn titles
[status]
(case status
:sending (i18n/label :t/sending-with-elipsis)
:confirmed (i18n/label :t/transaction-confirmed)
:finalised (i18n/label :t/transacation-finalised)
""))
(defn view
[]
(let [status (reagent/atom :sending)
{:keys [color]} (rf/sub [:wallet/current-viewing-account])]
[floating-button-page/view
{:header [quo/page-nav
{:type :no-title
:background :blur
:icon-name :i/close
:margin-top (safe-area/get-top)
:on-press #(rf/dispatch [:navigate-back])
:accessibility-label :top-bar}]
:footer [quo/button
{:customization-color color
:on-press #(rf/dispatch [:navigate-back])}
(i18n/label :t/done)]
:customization-color color
:gradient-cover? true}
[rn/view {:style style/content-container}
[rn/image
{:source (resources/get-image :transaction-progress)
:style {:margin-bottom 12}}]
[quo/standard-title
{:title (titles @status)}]]]))

5
src/status_im/navigation/screens.cljs
View File

@ -61,6 +61,7 @@
[status-im.contexts.wallet.send.select-address.view :as wallet-select-address]
[status-im.contexts.wallet.send.select-asset.view :as wallet-select-asset]
[status-im.contexts.wallet.send.transaction-confirmation.view :as wallet-transaction-confirmation]
[status-im.contexts.wallet.send.transaction-progress.view :as wallet-transaction-progress]
[status-im.navigation.options :as options]
[status-im.navigation.transitions :as transitions]))
@ -335,6 +336,10 @@
:options {:insets {:bottom? true}}
:component wallet-transaction-confirmation/view}
{:name :wallet-transaction-progress
:options {:insets {:bottom? true}}
:component wallet-transaction-progress/view}
{:name :scan-address
:options (merge
options/dark-screen

5
translations/en.json
View File

@ -2439,5 +2439,8 @@
"copy-all-details": "Copy all details",
"share-details": "Share details",
"what-are-you-waiting-for": "What are you waiting for?",
"no-relevant-tokens": "No relevant tokens"
"no-relevant-tokens": "No relevant tokens",
"sending-with-elipsis": "Sending...",
"transaction-confirmed": "Transaction confirmed!",
"transacation-finalised": "Transaction finalised!"
}