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

Account selection: Use bottom sheet component #18919

Merged
merged 2 commits into from
Mar 4, 2024
Merged

Account selection: Use bottom sheet component #18919

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
211a295
Use bottom sheet component
ilmotta Feb 20, 2024
04e1d57
Magic trick?
ilmotta Mar 1, 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
4 changes: 2 additions & 2 deletions src/quo/components/settings/category/reorder/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
(reagent/flush))

(defn- reorder-category-internal
[{:keys [label data blur? theme]}]
[{:keys [label data blur? theme container-style]}]
(reagent/with-let [atom-data (reagent/atom data)]
[rn/view {:style style/container}
[rn/view {:style (merge (style/container label) container-style)}
Copy link
Contributor Author

@ilmotta ilmotta Feb 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI: style/container is a function, so this is currently a bug. I just made this component identical in behavior to its cousin settings.category.settings.view.

[text/text
{:weight :medium
:size :paragraph-2
Expand Down
23 changes: 12 additions & 11 deletions src/status_im/common/bottom_sheet/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@
[quo.foundations.colors :as colors]
[react-native.platform :as platform]))

(def ^:private sheet-border-radius 20)

(defn sheet
[{:keys [top]} window-height selected-item]
[{:keys [max-height]}]
{:position :absolute
:max-height (- window-height top)
:z-index 1
:bottom 0
:left 0
:right 0
:border-top-left-radius 20
:border-top-right-radius 20
:overflow (when-not selected-item :hidden)
:flex 1})
:z-index 1
:max-height max-height
:border-top-left-radius sheet-border-radius
:border-top-right-radius sheet-border-radius})

(def gradient-bg
{:position :absolute
Expand All @@ -31,10 +31,11 @@
:bottom 0})

(defn sheet-content
[theme padding-bottom-override {:keys [bottom]} shell? bottom-margin]
{:border-top-left-radius 20
:border-top-right-radius 20
:padding-bottom (or padding-bottom-override (+ bottom bottom-margin))
[{:keys [theme padding-bottom shell?]}]
{:overflow :scroll
:padding-bottom padding-bottom
:border-top-left-radius sheet-border-radius
:border-top-right-radius sheet-border-radius
:background-color (if shell?
:transparent
(colors/theme-colors colors/white colors/neutral-95 theme))})
Expand Down
25 changes: 17 additions & 8 deletions src/status_im/common/bottom_sheet/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@
(show translate-y bg-opacity)
(hide translate-y bg-opacity window-height on-close))))))

(defn- get-layout-height
[event]
(oops/oget event "nativeEvent.layout.height"))

(defn view
[{:keys [hide? insets]}
{:keys [content selected-item padding-bottom-override border-radius on-close shell?
Expand All @@ -64,6 +68,8 @@
(let [theme (quo.theme/use-theme-value)
sheet-height (rn/use-ref-atom 0)
item-height (rn/use-ref-atom 0)
set-sheet-height (rn/use-callback #(reset! sheet-height (get-layout-height %)))
set-item-height (rn/use-callback #(reset! item-height (get-layout-height %)))
{window-height :height} (rn/get-window)
bg-opacity (reanimated/use-shared-value 0)
translate-y (reanimated/use-shared-value window-height)
Expand All @@ -80,7 +86,10 @@
top (- window-height (:top insets) @sheet-height)
bottom (if selected-item-smaller-than-sheet?
(+ @sheet-height bottom-margin)
(:bottom insets))]
(:bottom insets))
sheet-max-height (- window-height (:top insets))
content-padding-bottom (or padding-bottom-override
(+ (:bottom insets) bottom-margin))]
(rn/use-effect
#(if hide?
(hide translate-y bg-opacity window-height on-close)
Expand All @@ -105,7 +114,7 @@
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:transform [{:translateY translate-y}]}
(style/sheet insets window-height selected-item))}
(style/sheet {:max-height sheet-max-height}))}
(when shell?
[blur/ios-view
{:style style/shell-bg
Expand All @@ -114,14 +123,14 @@
:overlay-color :transparent}])
(when selected-item
[rn/view
{:on-layout #(reset! item-height (.-nativeEvent.layout.height ^js %))
:style
(style/selected-item theme top bottom selected-item-smaller-than-sheet? border-radius)}
{:on-layout set-item-height
:style (style/selected-item theme top bottom selected-item-smaller-than-sheet? border-radius)}
[selected-item]])

[rn/view
{:style (style/sheet-content theme padding-bottom-override insets shell? bottom-margin)
:on-layout #(reset! sheet-height (.-nativeEvent.layout.height ^js %))}
{:on-layout set-sheet-height
:style (style/sheet-content {:theme theme
:shell? shell?
:padding-bottom content-padding-bottom})}
(when (and gradient-cover? customization-color)
[rn/view {:style style/gradient-bg}
[quo/gradient-cover
Expand Down
153 changes: 82 additions & 71 deletions src/status_im/contexts/communities/actions/accounts_selection/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,81 +5,92 @@
[react-native.gesture :as gesture]
[status-im.common.password-authentication.view :as password-authentication]
[status-im.contexts.communities.actions.accounts-selection.style :as style]
[status-im.contexts.communities.actions.addresses-for-permissions.view :as addresses-for-permissions]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

btw, I'm trying to comment this as close to the ns as possible.

Is this accounts selection really communities specific??

Will there be other areas in the application where we want to select the specific accounts??

For example purchasing ens names might have some feature similar to this needed?

cc @clauxx

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@J-Son89, I think this question could be redirected to a designer or to the PO if you want to be really certain.

My current understanding and what I remember from interactions with designers is that the account selection is very specific to communities and the UI is built for this use case. So even if we have a similar account selection feature like you mentioned, they would probably redesign some important parts. For example, in the account selection screen, the elements displayed are all tied to the concept of token permissions, which is stored at the community level.

[status-im.contexts.communities.actions.airdrop-addresses.view :as airdrop-addresses]
[status-im.contexts.communities.actions.community-rules.view :as community-rules]
[status-im.contexts.communities.utils :as communities.utils]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))

(defn- join-community-and-navigate-back
[id]
(rf/dispatch [:password-authentication/show {:content (fn [] [password-authentication/view])}
{:label (i18n/label :t/join-open-community)
:on-press #(rf/dispatch [:communities/request-to-join-with-addresses
{:community-id id :password %}])}])
(rf/dispatch [:navigate-back]))

(defn view
[]
(let [{id :community-id} (rf/sub [:get-screen-params])
{:keys [name color images]} (rf/sub [:communities/community id])
airdrop-account (rf/sub [:communities/airdrop-account id])
selected-accounts (rf/sub [:communities/selected-permission-accounts id])
{:keys [highest-permission-role]} (rf/sub [:community/token-gated-overview id])
highest-role-text (i18n/label (communities.utils/role->translation-key
highest-permission-role
:t/member))]
[rn/safe-area-view {:style style/container}
[quo/page-nav
{:text-align :left
:icon-name :i/close
:on-press #(rf/dispatch [:navigate-back])
:accessibility-label :back-button}]
[quo/page-top
{:title (i18n/label :t/request-to-join)
:description :context-tag
:context-tag {:type :community
:size 24
:community-logo (get-in images [:thumbnail :uri])
:community-name name}}]
[gesture/scroll-view
[:<>
[quo/text
{:style style/section-title
:accessibility-label :community-rules-title
:weight :semi-bold
:size :paragraph-1}
(i18n/label :t/address-to-share)]
[quo/category
{:list-type :settings
:data [{:title (i18n/label :t/join-as-a {:role highest-role-text})
:on-press #(rf/dispatch [:open-modal :addresses-for-permissions
{:community-id id}])
:description :text
:action :arrow
:label :preview
:label-props {:type :accounts
:data selected-accounts}
:description-props {:text (i18n/label :t/all-addresses)}}
{:title (i18n/label :t/for-airdrops)
:on-press #(rf/dispatch [:open-modal :airdrop-addresses
{:community-id id}])
:description :text
:action :arrow
:label :preview
:label-props {:type :accounts
:data [airdrop-account]}
:description-props {:text (:name airdrop-account)}}]}]
[quo/text
{:style style/section-title
:accessibility-label :community-rules-title
:weight :semi-bold
:size :paragraph-1}
(i18n/label :t/community-rules)]
[community-rules/view id]]]
[rn/view {:style (style/bottom-actions)}
[quo/slide-button
{:size :size-48
:track-text (i18n/label :t/slide-to-request-to-join)
:track-icon :i/face-id
:customization-color color
:on-complete #(join-community-and-navigate-back id)}]]]))
(let [{id :community-id} (rf/sub [:get-screen-params])
show-addresses-for-permissions (fn []
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI: This is a performance optimization pattern we can apply more often. The community ID or most IDs for that matter will never change, so we can extract the community ID to a let binding on the mount phase. Along with that, we can then extract anonymous functions that are re-created on every render that need to close over the community ID, therefore allowing Reagent to detect that the arguments passed to hiccup components are the same when it compares args for the current and new render.

(rf/dispatch [:show-bottom-sheet
{:community-id id
:content addresses-for-permissions/view}]))
show-airdrop-addresses (fn []
(rf/dispatch [:show-bottom-sheet
{:community-id id
:content airdrop-addresses/view}]))
navigate-back #(rf/dispatch [:navigate-back])
join-and-go-back (fn []
(rf/dispatch [:password-authentication/show
{:content (fn [] [password-authentication/view])}
{:label (i18n/label :t/join-open-community)
:on-press
#(rf/dispatch
[:communities/request-to-join-with-addresses
{:community-id id :password %}])}])
(navigate-back))]
(fn []
(let [{:keys [name color images]} (rf/sub [:communities/community id])
airdrop-account (rf/sub [:communities/airdrop-account id])
selected-accounts (rf/sub [:communities/selected-permission-accounts id])
{:keys [highest-permission-role]} (rf/sub [:community/token-gated-overview id])
highest-role-text (i18n/label (communities.utils/role->translation-key
highest-permission-role
:t/member))]
[rn/safe-area-view {:style style/container}
[quo/page-nav
{:text-align :left
:icon-name :i/close
:on-press navigate-back
:accessibility-label :back-button}]
[quo/page-top
{:title (i18n/label :t/request-to-join)
:description :context-tag
:context-tag {:type :community
:size 24
:community-logo (get-in images [:thumbnail :uri])
:community-name name}}]
[gesture/scroll-view
[:<>
[quo/text
{:style style/section-title
:accessibility-label :community-rules-title
:weight :semi-bold
:size :paragraph-1}
(i18n/label :t/address-to-share)]
[quo/category
{:list-type :settings
:data [{:title (i18n/label :t/join-as-a {:role highest-role-text})
:on-press show-addresses-for-permissions
:description :text
:action :arrow
:label :preview
:label-props {:type :accounts
:data selected-accounts}
:description-props {:text (i18n/label :t/all-addresses)}}
{:title (i18n/label :t/for-airdrops)
:on-press show-airdrop-addresses
:description :text
:action :arrow
:label :preview
:label-props {:type :accounts
:data [airdrop-account]}
:description-props {:text (:name airdrop-account)}}]}]
[quo/text
{:style style/section-title
:accessibility-label :community-rules-title
:weight :semi-bold
:size :paragraph-1}
(i18n/label :t/community-rules)]
[community-rules/view id]]]
[rn/view {:style (style/bottom-actions)}
[quo/slide-button
{:size :size-48
:track-text (i18n/label :t/slide-to-request-to-join)
:track-icon :i/face-id
:customization-color color
:on-complete join-and-go-back}]]]))))
3 changes: 0 additions & 3 deletions src/status_im/contexts/communities/actions/addresses_for_permissions/style.cljs
View file
Open in desktop

This file was deleted.

Loading