Skip to content

Commit

Permalink
chore: add outline for transacation-progress page
Browse files Browse the repository at this point in the history
  • Loading branch information
@J-Son89
J-Son89 committed Dec 20, 2023
1 parent 711e64b commit a9fdbea
Show file tree
Hide file tree
Showing 11 changed files with 191 additions and 111 deletions.
Binary file added resources/images/ui2/transaction-progress@2x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/ui2/transaction-progress@3x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 2 additions & 3 deletions src/quo/components/buttons/wallet_ctas/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
42 changes: 23 additions & 19 deletions src/status_im/common/floating_button_page/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -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]
Expand Down Expand Up @@ -51,7 +52,8 @@
:remove-listeners remove-listeners}))

(defn view
[{:keys [header footer]} & children]
[{:keys [header footer customization-color gradient-cover?] :or {customization-color :blue}} &
children]
(reagent/with-let [window-height (:height (rn/get-window))
footer-container-height (reagent/atom 0)
header-height (reagent/atom 0)
Expand Down Expand Up @@ -79,24 +81,26 @@
:content-container-height @content-container-height
:header-height @header-height
:keyboard-shown? keyboard-shown?})]
[:<>
(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]]])
[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 change: 1 addition & 0 deletions src/status_im/common/resources.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
57 changes: 32 additions & 25 deletions src/status_im/contexts/status_im_preview/common/floating_button_page/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,37 +9,40 @@

(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?
[rn/image
{: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
Expand All @@ -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?"]]]])))
3 changes: 2 additions & 1 deletion src/status_im/contexts/wallet/account/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@
(let [{:keys [name color balance watch-only?]} (rf/sub [:wallet/current-viewing-account])
currency-symbol (rf/sub [:profile/currency-symbol])]
[rn/view {:style {:flex 1}}
[account-switcher/view {:on-press #(rf/dispatch [:wallet/close-account-page])}]
[rn/pressable {:on-press #(rf/dispatch [:navigate-to :wallet-transaction-progress])}
[account-switcher/view {:on-press #(rf/dispatch [:wallet/close-account-page])}]]
[quo/account-overview
{:current-value (utils/prettify-balance currency-symbol balance)
:account-name name
Expand Down
129 changes: 67 additions & 62 deletions src/status_im/navigation/screens.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,68 @@
(ns status-im.navigation.screens
(:require
[legacy.status-im.ui.screens.screens :as old-screens]
[status-im.config :as config]
[status-im.contexts.add-new-contact.scan.scan-profile-qr-page :as scan-profile-qr-page]
[status-im.contexts.add-new-contact.views :as add-new-contact]
[status-im.contexts.chat.camera.view :as camera-screen]
[status-im.contexts.chat.group-details.view :as group-details]
[status-im.contexts.chat.lightbox.view :as lightbox]
[status-im.contexts.chat.messages.view :as chat]
[status-im.contexts.chat.new-chat.view :as new-chat]
[status-im.contexts.chat.photo-selector.view :as photo-selector]
[status-im.contexts.communities.actions.accounts-selection.view :as communities.accounts-selection]
[status-im.contexts.communities.actions.addresses-for-permissions.view :as
addresses-for-permissions]
[status-im.contexts.communities.actions.request-to-join.view :as join-menu]
[status-im.contexts.communities.discover.view :as communities.discover]
[status-im.contexts.communities.overview.view :as communities.overview]
[status-im.contexts.emoji-picker.view :as emoji-picker]
[status-im.contexts.onboarding.create-password.view :as create-password]
[status-im.contexts.onboarding.create-profile.view :as create-profile]
[status-im.contexts.onboarding.enable-biometrics.view :as enable-biometrics]
[status-im.contexts.onboarding.enable-notifications.view :as enable-notifications]
[status-im.contexts.onboarding.enter-seed-phrase.view :as enter-seed-phrase]
[status-im.contexts.onboarding.generating-keys.view :as generating-keys]
[status-im.contexts.onboarding.identifiers.view :as identifiers]
[status-im.contexts.onboarding.intro.view :as intro]
[status-im.contexts.onboarding.new-to-status.view :as new-to-status]
[status-im.contexts.onboarding.sign-in.view :as sign-in]
[status-im.contexts.onboarding.syncing.progress.view :as syncing-devices]
[status-im.contexts.onboarding.syncing.results.view :as syncing-results]
[status-im.contexts.onboarding.welcome.view :as welcome]
[status-im.contexts.profile.profiles.view :as profiles]
[status-im.contexts.profile.settings.view :as settings]
[status-im.contexts.quo-preview.component-preview.view :as component-preview]
[status-im.contexts.quo-preview.main :as quo.preview]
[status-im.contexts.shell.activity-center.view :as activity-center]
[status-im.contexts.shell.jump-to.view :as shell]
[status-im.contexts.shell.share.view :as share]
[status-im.contexts.status-im-preview.main :as status-im-preview]
[status-im.contexts.syncing.find-sync-code.view :as find-sync-code]
[status-im.contexts.syncing.how-to-pair.view :as how-to-pair]
[status-im.contexts.syncing.scan-sync-code-page.view :as scan-sync-code-page]
[status-im.contexts.syncing.setup-syncing.view :as settings-setup-syncing]
[status-im.contexts.syncing.syncing-devices-list.view :as settings-syncing]
[status-im.contexts.wallet.account.bridge.view :as bridge]
[status-im.contexts.wallet.account.view :as wallet-accounts]
[status-im.contexts.wallet.add-address-to-watch.confirm-address.view :as confirm-address-to-watch]
[status-im.contexts.wallet.add-address-to-watch.view :as add-address-to-watch]
[status-im.contexts.wallet.collectible.view :as wallet-collectible]
[status-im.contexts.wallet.create-account.backup-recovery-phrase.view :as
wallet-backup-recovery-phrase]
[status-im.contexts.wallet.create-account.edit-derivation-path.view :as wallet-edit-derivation-path]
[status-im.contexts.wallet.create-account.select-keypair.view :as wallet-select-keypair]
[status-im.contexts.wallet.create-account.view :as wallet-create-account]
[status-im.contexts.wallet.edit-account.view :as wallet-edit-account]
[status-im.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
[status-im.contexts.wallet.scan-account.view :as scan-address]
[status-im.contexts.wallet.send.input-amount.view :as wallet-send-input-amount]
[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.navigation.options :as options]
[status-im.navigation.transitions :as transitions]))
[legacy.status-im.ui.screens.screens :as old-screens]
[status-im.config :as config]
[status-im.contexts.add-new-contact.scan.scan-profile-qr-page :as scan-profile-qr-page]
[status-im.contexts.add-new-contact.views :as add-new-contact]
[status-im.contexts.chat.camera.view :as camera-screen]
[status-im.contexts.chat.group-details.view :as group-details]
[status-im.contexts.chat.lightbox.view :as lightbox]
[status-im.contexts.chat.messages.view :as chat]
[status-im.contexts.chat.new-chat.view :as new-chat]
[status-im.contexts.chat.photo-selector.view :as photo-selector]
[status-im.contexts.communities.actions.accounts-selection.view :as communities.accounts-selection]
[status-im.contexts.communities.actions.addresses-for-permissions.view :as
addresses-for-permissions]
[status-im.contexts.communities.actions.request-to-join.view :as join-menu]
[status-im.contexts.communities.discover.view :as communities.discover]
[status-im.contexts.communities.overview.view :as communities.overview]
[status-im.contexts.emoji-picker.view :as emoji-picker]
[status-im.contexts.onboarding.create-password.view :as create-password]
[status-im.contexts.onboarding.create-profile.view :as create-profile]
[status-im.contexts.onboarding.enable-biometrics.view :as enable-biometrics]
[status-im.contexts.onboarding.enable-notifications.view :as enable-notifications]
[status-im.contexts.onboarding.enter-seed-phrase.view :as enter-seed-phrase]
[status-im.contexts.onboarding.generating-keys.view :as generating-keys]
[status-im.contexts.onboarding.identifiers.view :as identifiers]
[status-im.contexts.onboarding.intro.view :as intro]
[status-im.contexts.onboarding.new-to-status.view :as new-to-status]
[status-im.contexts.onboarding.sign-in.view :as sign-in]
[status-im.contexts.onboarding.syncing.progress.view :as syncing-devices]
[status-im.contexts.onboarding.syncing.results.view :as syncing-results]
[status-im.contexts.onboarding.welcome.view :as welcome]
[status-im.contexts.profile.profiles.view :as profiles]
[status-im.contexts.profile.settings.view :as settings]
[status-im.contexts.quo-preview.component-preview.view :as component-preview]
[status-im.contexts.quo-preview.main :as quo.preview]
[status-im.contexts.shell.activity-center.view :as activity-center]
[status-im.contexts.shell.jump-to.view :as shell]
[status-im.contexts.shell.share.view :as share]
[status-im.contexts.status-im-preview.main :as status-im-preview]
[status-im.contexts.syncing.find-sync-code.view :as find-sync-code]
[status-im.contexts.syncing.how-to-pair.view :as how-to-pair]
[status-im.contexts.syncing.scan-sync-code-page.view :as scan-sync-code-page]
[status-im.contexts.syncing.setup-syncing.view :as settings-setup-syncing]
[status-im.contexts.syncing.syncing-devices-list.view :as settings-syncing]
[status-im.contexts.wallet.account.bridge.view :as bridge]
[status-im.contexts.wallet.account.view :as wallet-accounts]
[status-im.contexts.wallet.add-address-to-watch.confirm-address.view :as confirm-address-to-watch]
[status-im.contexts.wallet.add-address-to-watch.view :as add-address-to-watch]
[status-im.contexts.wallet.collectible.view :as wallet-collectible]
[status-im.contexts.wallet.create-account.backup-recovery-phrase.view :as
wallet-backup-recovery-phrase]
[status-im.contexts.wallet.create-account.edit-derivation-path.view :as wallet-edit-derivation-path]
[status-im.contexts.wallet.create-account.select-keypair.view :as wallet-select-keypair]
[status-im.contexts.wallet.create-account.view :as wallet-create-account]
[status-im.contexts.wallet.edit-account.view :as wallet-edit-account]
[status-im.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
[status-im.contexts.wallet.scan-account.view :as scan-address]
[status-im.contexts.wallet.send.input-amount.view :as wallet-send-input-amount]
[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]))

(defn screens
[]
Expand Down Expand Up @@ -330,6 +331,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
Expand Down
5 changes: 5 additions & 0 deletions src/status_im2/contexts/wallet/send/transaction_progress/style.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
(ns status-im2.contexts.wallet.send.transaction-progress.style)

(def content-container
{:flex 1
:margin-horizontal 20})
55 changes: 55 additions & 0 deletions src/status_im2/contexts/wallet/send/transaction_progress/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
(ns status-im2.contexts.wallet.send.transaction-progress.view
(:require
[quo.core :as quo]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[status-im2.common.floating-button-page.view :as floating-button-page]
[status-im2.common.resources :as resources]
[status-im2.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- f-view-internal
[_]
(let [status (reagent/atom :sending)
{:keys [color]} (rf/sub [:wallet/current-viewing-account])]
(fn [{:keys []}]
[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)
:on-press #()
:accessibility-label :top-bar}]]])))

(defn view-internal
[props]
[:f> f-view-internal props])

(def view (quo.theme/with-theme view-internal))
5 changes: 4 additions & 1 deletion translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2436,5 +2436,8 @@
"save-image-to-photos": "Save image to Photos",
"copy-all-details": "Copy all details",
"share-details": "Share details",
"what-are-you-waiting-for": "What are you waiting for?"
"what-are-you-waiting-for": "What are you waiting for?",
"sending-with-elipsis": "Sending...",
"transaction-confirmed": "Transaction confirmed!",
"transacation-finalised": "Transaction finalised!"
}

0 comments on commit a9fdbea

Please sign in to comment.