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

💾 🗂️ [17653] wallet implement UI for save address bottom sheet (#19079) 

* 🚧 Save address UI reached teenage years

* 🚧 Save point

* 📑 Use bottom sheet effect properly

* 📝 Can't get title input to work

* 🎨 Design in place

* 🗺️ Add address box and trigger for network prefs

* 💅 Pixel perfect UI and hide save address button

* ⏫ Upgrade to screen tech

* 🤚 Undo changes made to color picker during rebase

* 🧰 Fix screens I broke during rebase

* ❄️ Fix json indent

* ⚒️ Implement PR feedback

* ⛏️ Remove unrelated translations

* 🖼️ Remove container to fix margin issue

- Use rn/use-callback instead of defined functions

* 😶‍🌫️ Hide save address button

* 🔨 Fix lint

* ❌ Remove bottom sheet screen updates

* ❌ Remove empty lines between elements
This commit is contained in:
Shivek Khurana 2024-03-15 10:54:04 +00:00 committed by GitHub
parent a06c5fdc02
commit aa7db8b883
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 156 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/status_im/contexts/wallet/send/save_address/style.cljs Normal file
View File

@ -0,0 +1,39 @@
(ns status-im.contexts.wallet.send.save-address.style)
(def title-input-container
{:padding-horizontal 20
:padding-top 12
:padding-bottom 16})
(def account-avatar-container
{:padding-horizontal 20
:padding-top 12})
(def color-picker-top-divider
{:margin-bottom 12})
(def color-picker-container
{:padding-vertical 12})
(def section-container
{:padding-horizontal 20
:padding-bottom 4})
(def color-picker
{:padding-horizontal 20
:padding-top 12})
(def color-picker-bottom-divider
{:padding-top 8
:padding-bottom 12})
(def save-address-button
{:padding-horizontal 20})
(def data-item
{:margin-horizontal 20
:padding-vertical 8})
(def address-container
{:padding-top 8
:padding-bottom 12})

89
src/status_im/contexts/wallet/send/save_address/view.cljs Normal file
View File

@ -0,0 +1,89 @@
(ns status-im.contexts.wallet.send.save-address.view
(:require
[clojure.string :as string]
[quo.core :as quo]
[quo.theme]
[react-native.core :as rn]
[status-im.common.floating-button-page.view :as floating-button-page]
[status-im.contexts.wallet.send.save-address.style :as style]
[status-im.contexts.wallet.sheets.network-preferences.view
:as network-preferences]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn- address-view
[address]
(let [network-details (rf/sub [:wallet/network-preference-details])]
[rn/view {:style style/address-container}
[quo/data-item
{:status :default
:size :default
:subtitle-type :default
:label :none
:blur? false
:icon-right? true
:right-icon :i/advanced
:card? true
:title (i18n/label :t/address)
:custom-subtitle (rn/use-callback
(fn [] [quo/address-text
{:networks network-details
:address address
:format :long}]))
:on-press (rn/use-callback
(fn []
(rf/dispatch [:show-bottom-sheet
{:content
(fn []
[network-preferences/view
{:on-save (fn [])}])}])))
:container-style style/data-item}]]))
(defn view
[]
(let [[address-label set-address-label] (rn/use-state "")
[address-color set-address-color] (rn/use-state :blue)
placeholder (i18n/label :t/address-name)]
[floating-button-page/view
{:footer-container-padding 0
:header [quo/page-nav
{:type :no-title
:background :blur
:icon-name :i/close
:on-press (rn/use-callback #(rf/dispatch [:navigate-back]))
:accessibility-label :save-address-top-bar}]
:footer [quo/button
{:accessibility-label :save-address-button
:type :primary
:container-style style/save-address-button}
(i18n/label :t/save-address)]
:customization-color address-color
:gradient-cover? true}
[rn/view
{:style style/account-avatar-container}
[quo/user-avatar
{:full-name (if (string/blank? address-label)
placeholder
address-label)
:customization-color address-color
:size :big}]]
[quo/title-input
{:blur? true
:auto-focus true
:max-length 24
:size :heading-1
:placeholder placeholder
:default-value address-label
:on-change-text set-address-label
:customization-color address-color
:container-style style/title-input-container}]
[quo/divider-line {:container-style style/color-picker-top-divider}]
[quo/section-label
{:section (i18n/label :t/colour)
:container-style style/section-container}]
[quo/color-picker
{:default-selected address-color
:on-change set-address-color
:container-style style/color-picker}]
[quo/divider-line {:container-style style/color-picker-bottom-divider}]
[address-view "0xshivek"]]))

24
src/status_im/contexts/wallet/send/transaction_progress/view.cljs
View File

@ -25,6 +25,23 @@
(some (fn [[_k v]] (= (:status v) :confirmed)) transaction-details) :confirmed
:else nil))
(defn- footer
[{:keys [color leave-page]}]
(let [save-address-visible? false]
[quo/bottom-actions
{:actions (if save-address-visible? :two-actions :one-action)
:button-two-label (i18n/label :t/save-address)
:button-two-props {:type :grey
:icon-left :i/contact-book
:accessibility-label :save-address
:on-press (rn/use-callback
#(rf/dispatch [:open-modal :screen/wallet.save-address]))}
:button-one-label (i18n/label :t/done)
:button-one-props {:customization-color color
:type :primary
:accessibility-label :done
:on-press leave-page}}]))
(defn view
[]
(let [leave-page #(rf/dispatch [:wallet/close-transaction-progress-page])
@ -40,10 +57,9 @@
:margin-top (safe-area/get-top)
:on-press leave-page
:accessibility-label :top-bar}]
:footer [quo/button
{:customization-color color
:on-press leave-page}
(i18n/label :t/done)]
:footer [footer
{:color color
:leave-page leave-page}]
:customization-color color
:gradient-cover? true}
[rn/view {:style style/content-container}

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

@ -71,6 +71,7 @@
[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 wallet-scan-address]
[status-im.contexts.wallet.send.save-address.view :as wallet-save-address]
[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.send-amount.view :as wallet-send-input-amount]
@ -383,6 +384,10 @@
{:name :screen/wallet.saved-addresses
:component wallet-saved-addresses/view}
{:name :screen/wallet.save-address
:options {:sheet? true}
:component wallet-save-address/view}
{:name :screen/wallet.send-input-amount
:options {:modalPresentationStyle :overCurrentContext
:insets {:top? true

4
translations/en.json
View File

@ -14,6 +14,7 @@
"account-color": "Account color",
"added-to-group-chat": "Added to group chat",
"added-you-to": "added you to",
"address-name": "Address name",
"anyone": "Anyone",
"messages-from-contacts-only-subtitle": "Only people you added as contacts can start a new chat with you or invite you to a group",
"messages-gap-warning": "Some messages might be missing",
@ -1249,6 +1250,7 @@
"reveal-sync-code": "Reveal sync code",
"revoke-access": "Revoke access",
"save": "Save",
"save-address": "Save address",
"save-bio": "Save bio",
"save-colour": "Save colour",
"save-name": "Save name",
@ -1971,6 +1973,7 @@
"wallet-connect": "Wallet Connect",
"reject": "Reject",
"manage-connections": "Manage connections from within Application Connections",
"contact-request-was-ignored": "Contact request ignored",
"wallet-manage-app-connections": "Manage app connections",
"connection-request": "Connection Request",
"disconnect": "Disconnect",
@ -1982,7 +1985,6 @@
"contact-request-was-sent": "Contact request sent",
"contact-request-sent-to": "Contact request sent to",
"contact-request-was-accepted": "Contact request accepted",
"contact-request-was-ignored": "Contact request ignored",
"contact-request-is-now-a-contact": "is now a contact",
"contact-request-removed-you-as-contact": "removed you as a contact",
"contact-request-removed-as-contact": "removed as a contact",