Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(wallet): Add a new saved address by ENS #20384

Merged
merged 2 commits into from
Jun 7, 2024
Merged

feat(wallet): Add a new saved address by ENS #20384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
393fcb0
feat(wallet): Add new saved address by ENS
smohamedjavid Jun 6, 2024
b1ff41a
ENS Validation update
smohamedjavid Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 59 additions & 37 deletions src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
[status-im.common.floating-button-page.view :as floating-button-page]
[status-im.contexts.settings.wallet.saved-addresses.add-address-to-save.style :as style]
[status-im.contexts.wallet.common.validation :as validation]
[utils.debounce :as debounce]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))

Expand All @@ -18,7 +19,7 @@
(defn- validate-input
[account-addresses saved-addresses user-input]
(cond
(or (nil? user-input) (= user-input ""))
(string/blank? user-input)
nil

(contains? saved-addresses user-input)
Expand Down Expand Up @@ -89,7 +90,7 @@

(defn- existing-saved-address
[{:keys [address]}]
(let [{:keys [name customization-color chain-short-names ens has-ens?]}
(let [{:keys [name customization-color chain-short-names ens ens?]}
(rf/sub [:wallet/saved-address-by-address
address])]
[rn/view {:style style/existing-saved-address-container}
Expand All @@ -103,43 +104,65 @@
:active-state? true
:user-props {:name name
:address (str chain-short-names address)
:ens (when has-ens? ens)
:ens (when ens? ens)
:customization-color customization-color
:blur? true}
:container-style style/saved-address-item}]]))

(defn view
[]
(let [profile-color (rf/sub [:profile/customization-color])
accounts-addresses (rf/sub [:wallet/addresses])
saved-addresses-addresses (rf/sub [:wallet/saved-addresses-addresses])
[input-value set-input-value] (rn/use-state nil)
[error set-error] (rn/use-state nil)
error? (some? error)
validate #(validate-input accounts-addresses
saved-addresses-addresses
%)
clear-input (rn/use-callback
(fn []
(set-input-value nil)
(set-error nil)))
on-change-text (rn/use-callback
(fn [new-value]
(let [lowercase-value (string/lower-case new-value)]
(set-error (validate lowercase-value))
(set-input-value lowercase-value))))
paste-into-input (rn/use-callback #(clipboard/get-string
(fn [clipboard-text]
(on-change-text clipboard-text))))
on-press-continue (rn/use-callback
(fn []
(rf/dispatch [:wallet/set-address-to-save
{:address input-value}])
(rf/dispatch
[:navigate-to-within-stack
[:screen/settings.save-address
:screen/settings.add-address-to-save]]))
[input-value])]
(let [profile-color (rf/sub [:profile/customization-color])
accounts-addresses (rf/sub [:wallet/addresses])
saved-addresses-addresses (rf/sub [:wallet/saved-addresses-addresses])
[address-or-ens set-address-or-ens] (rn/use-state "")
[ens-address set-ens-address] (rn/use-state "")
[error set-error] (rn/use-state nil)
error? (some? error)
ens-name? (validation/ens-name? address-or-ens)
address (if ens-name? ens-address address-or-ens)
button-disabled? (or (string/blank? address-or-ens)
(and ens-name? (string/blank? ens-address))
error?)
validate #(validate-input accounts-addresses
saved-addresses-addresses
%)
clear-input (rn/use-callback
(fn []
(set-address-or-ens "")
(set-ens-address "")
(set-error nil)))
on-ens-resolve (rn/use-callback
(fn [resolved-address]
(set-error (validate resolved-address))
(set-ens-address resolved-address)))
on-change-text (rn/use-callback
(fn [new-value]
(let [trimmed-value (string/trim new-value)]
(set-error (validate (string/lower-case trimmed-value)))
(set-address-or-ens trimmed-value)
(set-ens-address "")
(when (validation/ens-name? trimmed-value)
(debounce/debounce-and-dispatch
[:wallet/resolve-ens
{:ens new-value
:on-success on-ens-resolve
:on-error #(set-error :ens-not-registered)}]
300)))))
paste-into-input (rn/use-callback #(clipboard/get-string
(fn [clipboard-text]
(on-change-text clipboard-text))))
on-press-continue (rn/use-callback
(fn []
(rf/dispatch
[:wallet/set-address-to-save
{:address address
:ens address-or-ens
:ens? ens-name?}])
(rf/dispatch
[:navigate-to-within-stack
[:screen/settings.save-address
:screen/settings.add-address-to-save]]))
[address ens-name? address-or-ens])]
(rn/use-unmount #(rf/dispatch [:wallet/clear-address-to-save]))
[quo/overlay {:type :shell}
[floating-button-page/view
Expand All @@ -153,8 +176,7 @@
:accessibility-label :add-address-to-save-page-nav}]
:footer [quo/button
{:customization-color profile-color
:disabled? (or (string/blank? input-value)
error?)
:disabled? button-disabled?
:on-press on-press-continue}
(i18n/label :t/continue)]}
[quo/page-top
Expand All @@ -164,12 +186,12 @@
:description :text
:description-text (i18n/label :t/add-address-to-save-description)}]
[address-input
{:input-value input-value
{:input-value address-or-ens
:on-change-text on-change-text
:paste-into-input paste-into-input
:clear-input clear-input}]
(when error?
[:<>
[error-view {:error error}]
(when (= error :existing-saved-address)
[existing-saved-address {:address input-value}])])]]))
[existing-saved-address {:address address}])])]]))
6 changes: 3 additions & 3 deletions src/status_im/contexts/settings/wallet/saved_addresses/events_test.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
:address "0x2"
:mixedcase-address "0x2"
:chain-short-names "eth:arb1:oeth:"
:has-ens? false
:ens? false
:network-preferences-names `(:mainnet :arbitrum :optimism)
:name "Bob"
:created-at 1716826714
Expand All @@ -75,7 +75,7 @@
:mixedcase-address "0x2"
:chain-short-names "eth:arb1:oeth:"
:network-preferences-names `(:mainnet :arbitrum :optimism)
:has-ens? false
:ens? false
:name "Bob"
:created-at 1716826714
:ens ""
Expand All @@ -86,7 +86,7 @@
:mixedcase-address "0x1"
:chain-short-names "eth:arb1:oeth:"
:network-preferences-names `(:mainnet :arbitrum :optimism)
:has-ens? false
:ens? false
:name "Amy"
:created-at 1716826806
:ens ""
Expand Down
49 changes: 28 additions & 21 deletions src/status_im/contexts/settings/wallet/saved_addresses/save_address/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

(defn view
[]
(let [{:keys [address]} (rf/sub [:wallet/saved-address])
(let [{:keys [address ens ens?]} (rf/sub [:wallet/saved-address])
[network-prefixes address-without-prefix] (utils/split-prefix-and-address address)
[address-label set-address-label] (rn/use-state "")
[address-color set-address-color] (rn/use-state (rand-nth colors/account-colors))
Expand All @@ -46,6 +46,13 @@
selected-networks)
[selected-networks])
placeholder (i18n/label :t/address-name)
address-text (rn/use-callback
(fn []
[quo/address-text
{:full-address? true
:address (str chain-short-names address-without-prefix)
:format :long}])
[address-without-prefix chain-short-names])
open-network-preferences (rn/use-callback
(fn []
(rf/dispatch
Expand All @@ -68,11 +75,29 @@
:on-error
[:wallet/add-saved-address-failed]
:name address-label
:ens ens
:address address-without-prefix
:customization-color address-color
:chain-short-names chain-short-names}]))
[address-without-prefix chain-short-names address-label
address-color])]
address-color])
data-item-props (rn/use-memo
#(cond-> {:status :default
:size :default
:subtitle-type :default
:label :none
:blur? true
:icon-right? true
:right-icon :i/advanced
:card? true
:title (i18n/label :t/address)
:subtitle ens
:custom-subtitle address-text
:on-press open-network-preferences
:container-style style/data-item}
ens?
(dissoc :custom-subtitle))
[ens ens? open-network-preferences address-text])]
[quo/overlay {:type :shell}
[floating-button-page/view
{:footer-container-padding 0
Expand Down Expand Up @@ -125,22 +150,4 @@
[quo/divider-line
{:blur? true
:container-style style/color-picker-bottom-divider}]
[quo/data-item
{:status :default
:size :default
:subtitle-type :default
:label :none
:blur? true
:icon-right? true
:right-icon :i/advanced
:card? true
:title (i18n/label :t/address)
:custom-subtitle (rn/use-callback
(fn []
[quo/address-text
{:full-address? true
:address (str chain-short-names address-without-prefix)
:format :long}])
[selected-networks address])
:on-press open-network-preferences
:container-style style/data-item}]]]))
[quo/data-item data-item-props]]]))
10 changes: 6 additions & 4 deletions src/status_im/contexts/settings/wallet/saved_addresses/sheets/address_options/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
(:require
[clojure.string :as string]
[quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.platform :as platform]
[status-im.common.not-implemented :as not-implemented]
Expand Down Expand Up @@ -52,10 +53,11 @@
open-remove-confirmation-sheet (rn/use-callback
#(rf/dispatch
[:show-bottom-sheet
{:theme :dark
:shell? true
:content (fn []
[remove-address/view opts])}])
{:theme :dark
:shell? true
:blur-background colors/bottom-sheet-background-blur
:content (fn []
[remove-address/view opts])}])
[opts])
open-show-address-qr (rn/use-callback
#(rf/dispatch [:open-modal
Expand Down
46 changes: 25 additions & 21 deletions src/status_im/contexts/settings/wallet/saved_addresses/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
(ns status-im.contexts.settings.wallet.saved-addresses.view
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
Expand All @@ -20,27 +21,29 @@
:container-style style/empty-container-style}]))

(defn- saved-address
[{:keys [name address chain-short-names customization-color has-ens? ens network-preferences-names]}]
[{:keys [name address chain-short-names customization-color ens? ens network-preferences-names]}]
(let [full-address (str chain-short-names address)
on-press-saved-address (rn/use-callback
#(rf/dispatch
[:show-bottom-sheet
{:theme :dark
:shell? true
:content (fn []
[address-options/view
{:address address
:chain-short-names chain-short-names
:full-address full-address
:name name
:network-preferences-names network-preferences-names
:customization-color customization-color}])}])
{:theme :dark
:shell? true
:blur-background colors/bottom-sheet-background-blur
:content (fn []
[address-options/view
{:address address
:chain-short-names chain-short-names
:full-address full-address
:name name
:network-preferences-names
network-preferences-names
:customization-color customization-color}])}])
[address chain-short-names full-address name customization-color])]
[quo/saved-address
{:blur? true
:user-props {:name name
:address full-address
:ens (when has-ens? ens)
:ens (when ens? ens)
:customization-color customization-color
:blur? true}
:container-style {:margin-horizontal 8}
Expand Down Expand Up @@ -88,12 +91,13 @@
:icon :i/add
:container-style style/title-container}]
[rn/section-list
{:key-fn :title
:sticky-section-headers-enabled false
:render-section-header-fn header
:render-section-footer-fn footer
:sections saved-addresses
:render-fn saved-address
:separator [rn/view {:style {:height 4}}]
:content-container-style {:flex-grow 1}
:empty-component [empty-state]}]]))
{:key-fn :title
:shows-vertical-scroll-indicator false
:sticky-section-headers-enabled false
:render-section-header-fn header
:render-section-footer-fn footer
:sections saved-addresses
:render-fn saved-address
:separator [rn/view {:style {:height 4}}]
:content-container-style {:flex-grow 1}
:empty-component [empty-state]}]]))
Loading