Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 alwx
|
1223b96890 | ||
|
alwx
|
c552fd9f5d |
@@ -282,12 +282,11 @@ SIMULATOR=iPhone 13
|
||||
# TODO: fix IOS_STATUS_GO_TARGETS to be either amd64 or arm64 when RN is upgraded
|
||||
run-ios: export TARGET := ios
|
||||
run-ios: export IOS_STATUS_GO_TARGETS := ios/arm64;iossimulator/amd64
|
||||
run-ios: export XCBeautify=$(shell which xcbeautify) # for react-native-cli to pick this up and to auto format output
|
||||
run-ios: ##@run Build iOS app and start it in a simulator/device
|
||||
ifneq ("$(SIMULATOR)", "")
|
||||
npx react-native run-ios --simulator="$(SIMULATOR)"
|
||||
npx react-native run-ios --simulator="$(SIMULATOR)" | xcbeautify
|
||||
else
|
||||
npx react-native run-ios
|
||||
npx react-native run-ios | xcbeautify
|
||||
endif
|
||||
|
||||
show-ios-devices: ##@other shows connected ios device and its name
|
||||
|
||||
@@ -37,14 +37,9 @@ SECRETS_ENV_VARS=(
|
||||
'ALCHEMY_ARBITRUM_MAINNET_TOKEN'
|
||||
'ALCHEMY_OPTIMISM_GOERLI_TOKEN'
|
||||
'ALCHEMY_OPTIMISM_MAINNET_TOKEN'
|
||||
'ALCHEMY_ETHEREUM_SEPOLIA_TOKEN'
|
||||
'ALCHEMY_ARBITRUM_SEPOLIA_TOKEN'
|
||||
'ALCHEMY_OPTIMISM_SEPOLIA_TOKEN'
|
||||
'INFURA_TOKEN'
|
||||
'INFURA_TOKEN_SECRET'
|
||||
'OPENSEA_API_KEY'
|
||||
'RARIBLE_MAINNET_API_KEY'
|
||||
'RARIBLE_TESTNET_API_KEY'
|
||||
'POKT_TOKEN'
|
||||
)
|
||||
|
||||
|
||||
+3
-18
@@ -63,15 +63,10 @@
|
||||
{status-im.config/POKT_TOKEN #shadow/env "POKT_TOKEN"
|
||||
status-im.config/INFURA_TOKEN #shadow/env "INFURA_TOKEN"
|
||||
status-im.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"
|
||||
status-im.config/RARIBLE_MAINNET_API_KEY #shadow/env "RARIBLE_MAINNET_API_KEY"
|
||||
status-im.config/RARIBLE_TESTNET_API_KEY #shadow/env "RARIBLE_TESTNET_API_KEY"
|
||||
status-im.config/ALCHEMY_ARBITRUM_GOERLI_TOKEN #shadow/env "ALCHEMY_ARBITRUM_GOERLI_TOKEN"
|
||||
status-im.config/ALCHEMY_OPTIMISM_GOERLI_TOKEN #shadow/env "ALCHEMY_OPTIMISM_GOERLI_TOKEN"
|
||||
status-im.config/ALCHEMY_OPTIMISM_MAINNET_TOKEN #shadow/env "ALCHEMY_OPTIMISM_MAINNET_TOKEN"
|
||||
status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"
|
||||
status-im.config/ALCHEMY_ETHEREUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ETHEREUM_SEPOLIA_TOKEN"
|
||||
status-im.config/ALCHEMY_ARBITRUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ARBITRUM_SEPOLIA_TOKEN"
|
||||
status-im.config/ALCHEMY_OPTIMISM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_OPTIMISM_SEPOLIA_TOKEN"}
|
||||
status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"}
|
||||
:compiler-options {:output-feature-set :es5
|
||||
;; We disable `:fn-deprecated` warnings because we
|
||||
;; are managing deprecation via clj-kondo and we
|
||||
@@ -95,15 +90,10 @@
|
||||
{status-im.config/POKT_TOKEN #shadow/env "POKT_TOKEN"
|
||||
status-im.config/INFURA_TOKEN #shadow/env "INFURA_TOKEN"
|
||||
status-im.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"
|
||||
status-im.config/RARIBLE_MAINNET_API_KEY #shadow/env "RARIBLE_MAINNET_API_KEY"
|
||||
status-im.config/RARIBLE_TESTNET_API_KEY #shadow/env "RARIBLE_TESTNET_API_KEY"
|
||||
status-im.config/ALCHEMY_ARBITRUM_GOERLI_TOKEN #shadow/env "ALCHEMY_ARBITRUM_GOERLI_TOKEN"
|
||||
status-im.config/ALCHEMY_OPTIMISM_GOERLI_TOKEN #shadow/env "ALCHEMY_OPTIMISM_GOERLI_TOKEN"
|
||||
status-im.config/ALCHEMY_OPTIMISM_MAINNET_TOKEN #shadow/env "ALCHEMY_OPTIMISM_MAINNET_TOKEN"
|
||||
status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"
|
||||
status-im.config/ALCHEMY_ETHEREUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ETHEREUM_SEPOLIA_TOKEN"
|
||||
status-im.config/ALCHEMY_ARBITRUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ARBITRUM_SEPOLIA_TOKEN"
|
||||
status-im.config/ALCHEMY_OPTIMISM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_OPTIMISM_SEPOLIA_TOKEN"}
|
||||
status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"}
|
||||
:compiler-options {:output-feature-set :es6
|
||||
;;disable for android build as there
|
||||
;;is an intermittent warning with deftype
|
||||
@@ -133,15 +123,10 @@
|
||||
status-im.config/POKT_TOKEN #shadow/env "POKT_TOKEN"
|
||||
status-im.config/INFURA_TOKEN #shadow/env "INFURA_TOKEN"
|
||||
status-im.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"
|
||||
status-im.config/RARIBLE_MAINNET_API_KEY #shadow/env "RARIBLE_MAINNET_API_KEY"
|
||||
status-im.config/RARIBLE_TESTNET_API_KEY #shadow/env "RARIBLE_TESTNET_API_KEY"
|
||||
status-im.config/ALCHEMY_ARBITRUM_GOERLI_TOKEN #shadow/env "ALCHEMY_ARBITRUM_GOERLI_TOKEN"
|
||||
status-im.config/ALCHEMY_OPTIMISM_GOERLI_TOKEN #shadow/env "ALCHEMY_OPTIMISM_GOERLI_TOKEN"
|
||||
status-im.config/ALCHEMY_OPTIMISM_MAINNET_TOKEN #shadow/env "ALCHEMY_OPTIMISM_MAINNET_TOKEN"
|
||||
status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"
|
||||
status-im.config/ALCHEMY_ETHEREUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ETHEREUM_SEPOLIA_TOKEN"
|
||||
status-im.config/ALCHEMY_ARBITRUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ARBITRUM_SEPOLIA_TOKEN"
|
||||
status-im.config/ALCHEMY_OPTIMISM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_OPTIMISM_SEPOLIA_TOKEN"}
|
||||
status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"}
|
||||
:compiler-options
|
||||
{;; needed because we override require and it
|
||||
;; messes with source-map which reports callstack
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
(def container
|
||||
{:height 40
|
||||
:flex-direction :row
|
||||
:padding-horizontal 20
|
||||
:padding-horizontal 16
|
||||
:align-items :center})
|
||||
|
||||
(defn text
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
[quo.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.linear-gradient :as linear-gradient]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[react-native.svg :as svg]
|
||||
[utils.i18n :as i18n]))
|
||||
|
||||
@@ -28,15 +29,23 @@
|
||||
:info {:color colors/white-opa-40}
|
||||
:alert {:color colors/danger-60}})
|
||||
|
||||
(defn circular-progress
|
||||
(defn f-circular-progress
|
||||
[{:keys [color percentage]}]
|
||||
(let [strength-indicator-radius 6.5
|
||||
strength-indicator-circumference (* 2 Math/PI strength-indicator-radius)]
|
||||
(let [strength-indicator-radius 7.5
|
||||
strength-indicator-circumference (* 2 Math/PI strength-indicator-radius)
|
||||
percentage-anim (reanimated/use-shared-value percentage)
|
||||
percentage-in (reanimated/interpolate
|
||||
percentage-anim
|
||||
{:inputRange [0 100]
|
||||
:outputRange [0 (* (- 100 percentage) 0.01 strength-indicator-circumference)]}
|
||||
{:extrapolateLeft "clamp"
|
||||
:extrapolateRight "clamp"})
|
||||
_ (js/console.log "ALWX PERC" percentage-in)]
|
||||
[svg/svg
|
||||
{:view-box "0 0 16 16"
|
||||
:width 14.2
|
||||
{:view-box "0 0 18 18"
|
||||
:width 15.2
|
||||
:transform [{:rotate "270deg"}]
|
||||
:height 14.2}
|
||||
:height 15.2}
|
||||
[svg/circle
|
||||
{:cx 8
|
||||
:cy 8
|
||||
@@ -51,10 +60,14 @@
|
||||
:fill :transparent
|
||||
:stroke-width 1.2
|
||||
:stroke-dasharray strength-indicator-circumference
|
||||
:stroke-dashoffset (* (- 100 percentage) 0.01 strength-indicator-circumference)
|
||||
:stroke-dashoffset percentage-in
|
||||
:stroke color}]
|
||||
[svg/circle]]))
|
||||
|
||||
(defn circular-progress
|
||||
[params]
|
||||
[:f> f-circular-progress params])
|
||||
|
||||
(defn strength-indicator
|
||||
[type]
|
||||
(let [{:keys [color percentage]} (strength-divider-types type)]
|
||||
|
||||
@@ -49,12 +49,8 @@
|
||||
:height "100%")))
|
||||
|
||||
(defn text-input
|
||||
[theme error?]
|
||||
(assoc text-input-dimensions
|
||||
:color
|
||||
(if error?
|
||||
(colors/resolve-color :danger theme)
|
||||
(colors/theme-colors colors/neutral-100 colors/white theme))))
|
||||
[theme]
|
||||
(assoc text-input-dimensions :color (colors/theme-colors colors/neutral-100 colors/white theme)))
|
||||
|
||||
(defn placeholder-text
|
||||
[theme]
|
||||
|
||||
@@ -32,12 +32,9 @@
|
||||
(crypto-format num-value conversion crypto-decimals token))))
|
||||
|
||||
(defn- data-info
|
||||
[{:keys [theme token crypto-decimals conversion networks title crypto? currency amount error?]}]
|
||||
[{:keys [theme token crypto-decimals conversion networks title crypto? currency amount]}]
|
||||
[rn/view {:style style/data-container}
|
||||
[network-tag/view
|
||||
{:networks networks
|
||||
:title title
|
||||
:status (when error? :error)}]
|
||||
[network-tag/view {:networks networks :title title}]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
@@ -83,7 +80,7 @@
|
||||
(reset! value-atom v))
|
||||
(when on-change-text
|
||||
(on-change-text v)))]
|
||||
(fn [{:keys [theme token customization-color show-keyboard? crypto? currency value error?]
|
||||
(fn [{:keys [theme token customization-color show-keyboard? crypto? currency value]
|
||||
:or {show-keyboard? true}}]
|
||||
[rn/pressable
|
||||
{:on-press focus-input
|
||||
@@ -93,7 +90,7 @@
|
||||
:size :size-32}]
|
||||
[rn/view {:style style/text-input-container}
|
||||
[rn/text-input
|
||||
(cond-> {:style (style/text-input theme error?)
|
||||
(cond-> {:style (style/text-input theme)
|
||||
:placeholder-text-color (style/placeholder-text theme)
|
||||
:auto-focus true
|
||||
:ref set-ref
|
||||
|
||||
@@ -52,8 +52,7 @@
|
||||
:remove-listeners remove-listeners}))
|
||||
|
||||
(defn view
|
||||
[{:keys [header footer customization-color footer-container-padding gradient-cover?]
|
||||
:or {footer-container-padding (safe-area/get-top)}} &
|
||||
[{:keys [header footer customization-color gradient-cover?]} &
|
||||
children]
|
||||
(reagent/with-let [window-height (:height (rn/get-window))
|
||||
footer-container-height (reagent/atom 0)
|
||||
@@ -95,7 +94,7 @@
|
||||
children)]
|
||||
[rn/keyboard-avoiding-view
|
||||
{:style style/keyboard-avoiding-view
|
||||
:keyboard-vertical-offset (if platform/ios? footer-container-padding 0)
|
||||
:keyboard-vertical-offset (if platform/ios? (safe-area/get-top) 0)
|
||||
:pointer-events :box-none}
|
||||
[floating-container/view
|
||||
{:on-layout set-footer-container-height
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
(ns status-im.common.lightbox.events
|
||||
(:require [reagent.core :as reagent]
|
||||
status-im.common.lightbox.effects
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(rf/reg-event-fx :lightbox/navigate-to-lightbox
|
||||
(fn [{:keys [db]} [animation-shared-element-id screen-params]]
|
||||
(reagent/next-tick #(rf/dispatch [:navigate-to :lightbox screen-params]))
|
||||
{:db (assoc db :animation-shared-element-id animation-shared-element-id)}))
|
||||
|
||||
(rf/reg-event-fx :lightbox/update-animation-shared-element-id
|
||||
(fn [{:keys [db]} [animation-shared-element-id]]
|
||||
{:db (assoc db :animation-shared-element-id animation-shared-element-id)}))
|
||||
|
||||
(rf/reg-event-fx :lightbox/exit-lightbox-signal
|
||||
(fn [{:keys [db]} [value]]
|
||||
{:db (assoc db :lightbox/exit-signal value)}))
|
||||
|
||||
(rf/reg-event-fx :lightbox/zoom-out-signal
|
||||
(fn [{:keys [db]} [value]]
|
||||
{:db (assoc db :lightbox/zoom-out-signal value)}))
|
||||
|
||||
(rf/reg-event-fx :lightbox/orientation-change
|
||||
(fn [{:keys [db]} [value]]
|
||||
{:db (assoc db :lightbox/orientation value)}))
|
||||
|
||||
(rf/reg-event-fx :lightbox/lightbox-scale
|
||||
(fn [{:keys [db]} [value]]
|
||||
{:db (assoc db :lightbox/scale value)}))
|
||||
|
||||
(rf/reg-event-fx :lightbox/share-image
|
||||
(fn [_ [uri]]
|
||||
{:effects.lightbox/share-image uri}))
|
||||
|
||||
(rf/reg-event-fx :lightbox/save-image-to-gallery
|
||||
(fn [_ [uri on-success]]
|
||||
{:effects.lightbox/save-image-to-gallery [uri on-success]}))
|
||||
@@ -15,11 +15,6 @@
|
||||
(goog-define ALCHEMY_OPTIMISM_GOERLI_TOKEN "")
|
||||
(goog-define ALCHEMY_OPTIMISM_MAINNET_TOKEN "")
|
||||
(goog-define ALCHEMY_ARBITRUM_MAINNET_TOKEN "")
|
||||
(goog-define ALCHEMY_ETHEREUM_SEPOLIA_TOKEN "")
|
||||
(goog-define ALCHEMY_ARBITRUM_SEPOLIA_TOKEN "")
|
||||
(goog-define ALCHEMY_OPTIMISM_SEPOLIA_TOKEN "")
|
||||
(goog-define RARIBLE_MAINNET_API_KEY "")
|
||||
(goog-define RARIBLE_TESTNET_API_KEY "")
|
||||
(goog-define OPENSEA_API_KEY "")
|
||||
|
||||
(def mainnet-rpc-url (str "https://eth-archival.gateway.pokt.network/v1/lb/" POKT_TOKEN))
|
||||
|
||||
@@ -406,14 +406,11 @@
|
||||
|
||||
;; wallet
|
||||
(def ^:const mainnet-chain-id 1)
|
||||
(def ^:const goerli-chain-id 5)
|
||||
(def ^:const sepolia-chain-id 11155111)
|
||||
(def ^:const optimism-chain-id 10)
|
||||
(def ^:const optimism-goerli-chain-id 420)
|
||||
(def ^:const optimism-sepolia-chain-id 11155420)
|
||||
(def ^:const optimism-test-chain-id 420)
|
||||
(def ^:const arbitrum-chain-id 42161)
|
||||
(def ^:const arbitrum-goerli-chain-id 421613)
|
||||
(def ^:const arbitrum-sepolia-chain-id 421614)
|
||||
(def ^:const arbitrum-test-chain-id 421613)
|
||||
(def ^:const goerli-chain-id 5)
|
||||
|
||||
(def ^:const mainnet-short-name "eth")
|
||||
(def ^:const optimism-short-name "opt")
|
||||
|
||||
@@ -4,12 +4,13 @@
|
||||
[legacy.status-im.chat.models.loading :as loading]
|
||||
[legacy.status-im.data-store.chats :as chats-store]
|
||||
[re-frame.core :as re-frame]
|
||||
status-im.common.lightbox.events
|
||||
[reagent.core :as reagent]
|
||||
[status-im.common.muting.helpers :refer [format-mute-till]]
|
||||
[status-im.constants :as constants]
|
||||
[status-im.contexts.chat.contacts.events :as contacts-store]
|
||||
status-im.contexts.chat.effects
|
||||
[status-im.contexts.chat.messenger.composer.link-preview.events :as link-preview]
|
||||
status-im.contexts.chat.messenger.lightbox.events
|
||||
status-im.contexts.chat.messenger.messages.content.reactions.events
|
||||
[status-im.contexts.chat.messenger.messages.delete-message-for-me.events :as delete-for-me]
|
||||
[status-im.contexts.chat.messenger.messages.delete-message.events :as delete-message]
|
||||
@@ -393,6 +394,38 @@
|
||||
[cofx chat-id]
|
||||
(navigation/navigate-to cofx :chat-pinned-messages {:chat-id chat-id}))
|
||||
|
||||
|
||||
(rf/defn update-shared-element-id
|
||||
{:events [:chat.ui/update-shared-element-id]}
|
||||
[{:keys [db]} shared-element-id]
|
||||
{:db (assoc db :shared-element-id shared-element-id)})
|
||||
|
||||
(rf/defn navigate-to-lightbox
|
||||
{:events [:chat.ui/navigate-to-lightbox]}
|
||||
[{:keys [db]} shared-element-id screen-params]
|
||||
(reagent/next-tick #(rf/dispatch [:navigate-to :lightbox screen-params]))
|
||||
{:db (assoc db :shared-element-id shared-element-id)})
|
||||
|
||||
(rf/defn exit-lightbox-signal
|
||||
{:events [:chat.ui/exit-lightbox-signal]}
|
||||
[{:keys [db]} value]
|
||||
{:db (assoc db :lightbox/exit-signal value)})
|
||||
|
||||
(rf/defn zoom-out-signal
|
||||
{:events [:chat.ui/zoom-out-signal]}
|
||||
[{:keys [db]} value]
|
||||
{:db (assoc db :lightbox/zoom-out-signal value)})
|
||||
|
||||
(rf/defn orientation-change
|
||||
{:events [:chat.ui/orientation-change]}
|
||||
[{:keys [db]} value]
|
||||
{:db (assoc db :lightbox/orientation value)})
|
||||
|
||||
(rf/defn lightbox-scale
|
||||
{:events [:chat.ui/lightbox-scale]}
|
||||
[{:keys [db]} value]
|
||||
{:db (assoc db :lightbox/scale value)})
|
||||
|
||||
(rf/defn check-last-chat
|
||||
{:events [:chat/check-last-chat]}
|
||||
[{:keys [db]}]
|
||||
@@ -419,15 +452,3 @@
|
||||
{:events [:chat.ui/scroll-to-bottom]}
|
||||
[_]
|
||||
{:effects.chat/scroll-to-bottom nil})
|
||||
|
||||
(rf/reg-event-fx :chat.ui/clear-sending-images
|
||||
(fn [{:keys [db]}]
|
||||
{:db (update-in db [:chat/inputs (:current-chat-id db) :metadata] assoc :sending-image {})}))
|
||||
|
||||
(rf/reg-event-fx :chat.ui/image-unselected
|
||||
(fn [{:keys [db]} [original]]
|
||||
(let [current-chat-id (:current-chat-id db)]
|
||||
{:db (update-in db
|
||||
[:chat/inputs current-chat-id :metadata :sending-image]
|
||||
dissoc
|
||||
(:uri original))})))
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
(ns status-im.common.lightbox.animations
|
||||
(ns status-im.contexts.chat.messenger.lightbox.animations
|
||||
(:require
|
||||
[react-native.reanimated :as reanimated]))
|
||||
|
||||
+17
-23
@@ -1,25 +1,25 @@
|
||||
(ns status-im.common.lightbox.bottom-view
|
||||
(ns status-im.contexts.chat.messenger.lightbox.bottom-view
|
||||
(:require
|
||||
[quo.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.platform :as platform]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im.common.lightbox.animations :as anim]
|
||||
[status-im.common.lightbox.constants :as constants]
|
||||
[status-im.common.lightbox.style :as style]
|
||||
[status-im.common.lightbox.text-sheet.view :as text-sheet]
|
||||
[status-im.contexts.chat.messenger.lightbox.animations :as anim]
|
||||
[status-im.contexts.chat.messenger.lightbox.constants :as c]
|
||||
[status-im.contexts.chat.messenger.lightbox.style :as style]
|
||||
[status-im.contexts.chat.messenger.lightbox.text-sheet.view :as text-sheet]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn get-small-item-layout
|
||||
[_ index]
|
||||
#js
|
||||
{:length constants/small-image-size
|
||||
:offset (* (+ constants/small-image-size 8) index)
|
||||
{:length c/small-image-size
|
||||
:offset (* (+ c/small-image-size 8) index)
|
||||
:index index})
|
||||
|
||||
(defn- f-small-image
|
||||
[item index _ {:keys [scroll-index props]}]
|
||||
(let [size (if (= @scroll-index index) constants/focused-image-size constants/small-image-size)
|
||||
(let [size (if (= @scroll-index index) c/focused-image-size c/small-image-size)
|
||||
size-value (anim/use-val size)
|
||||
{:keys [scroll-index-lock? small-list-ref flat-list-ref]}
|
||||
props]
|
||||
@@ -27,7 +27,7 @@
|
||||
[rn/touchable-opacity
|
||||
{:active-opacity 1
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:lightbox/zoom-out-signal @scroll-index])
|
||||
(rf/dispatch [:chat.ui/zoom-out-signal @scroll-index])
|
||||
(reset! scroll-index-lock? true)
|
||||
(js/setTimeout #(reset! scroll-index-lock? false) 500)
|
||||
(js/setTimeout
|
||||
@@ -38,9 +38,9 @@
|
||||
(.scrollToIndex ^js @flat-list-ref
|
||||
#js {:animated true :index index}))
|
||||
(if platform/ios? 50 150))
|
||||
(rf/dispatch [:lightbox/update-animation-shared-element-id (:id item)]))}
|
||||
(rf/dispatch [:chat.ui/update-shared-element-id (:message-id item)]))}
|
||||
[reanimated/fast-image
|
||||
{:source {:uri (:image item)}
|
||||
{:source {:uri (:image (:content item))}
|
||||
:style (reanimated/apply-animations-to-style {:width size-value
|
||||
:height size-value}
|
||||
{:border-radius 10})}]]))
|
||||
@@ -50,26 +50,20 @@
|
||||
[:f> f-small-image item index _ render-data])
|
||||
|
||||
(defn bottom-view
|
||||
[{:keys [images index scroll-index insets animations derived item-width props state transparent?
|
||||
bottom-text-component]}]
|
||||
(let [padding-horizontal (- (/ item-width 2) (/ constants/focused-image-size 2))]
|
||||
[messages index scroll-index insets animations derived item-width props state transparent?]
|
||||
(let [padding-horizontal (- (/ item-width 2) (/ c/focused-image-size 2))]
|
||||
[reanimated/linear-gradient
|
||||
{:colors [colors/neutral-100-opa-100 colors/neutral-100-opa-80 colors/neutral-100-opa-0]
|
||||
:location [0.2 0.9]
|
||||
:start {:x 0 :y 1}
|
||||
:end {:x 0 :y 0}
|
||||
:style (style/gradient-container insets animations derived transparent?)}
|
||||
(when bottom-text-component
|
||||
[text-sheet/view
|
||||
{:overlay-opacity (:overlay-opacity animations)
|
||||
:overlay-z-index (:overlay-z-index state)
|
||||
:text-sheet-lock? (:text-sheet-lock? props)
|
||||
:text-component bottom-text-component}])
|
||||
[text-sheet/view messages animations state props]
|
||||
[rn/flat-list
|
||||
{:ref #(reset! (:small-list-ref props) %)
|
||||
:key-fn :id
|
||||
:style {:height constants/small-list-height}
|
||||
:data images
|
||||
:key-fn :message-id
|
||||
:style {:height c/small-list-height}
|
||||
:data messages
|
||||
:render-fn small-image
|
||||
:render-data {:scroll-index scroll-index
|
||||
:props props}
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
(ns status-im.common.lightbox.constants)
|
||||
(ns status-im.contexts.chat.messenger.lightbox.constants)
|
||||
|
||||
(def ^:const small-image-size 40)
|
||||
(def ^:const focused-extra-size 16)
|
||||
+3
-3
@@ -1,4 +1,4 @@
|
||||
(ns status-im.common.lightbox.effects
|
||||
(ns status-im.contexts.chat.messenger.lightbox.effects
|
||||
(:require [react-native.blob :as blob]
|
||||
[react-native.cameraroll :as cameraroll]
|
||||
[react-native.fs :as fs]
|
||||
@@ -10,7 +10,7 @@
|
||||
{:trusty platform/ios?
|
||||
:path (str (fs/cache-dir) "/StatusIm_Image.jpeg")})
|
||||
|
||||
(rf/reg-fx :effects.lightbox/share-image
|
||||
(rf/reg-fx :effects.chat/share-image
|
||||
(fn [uri]
|
||||
(blob/fetch uri
|
||||
config
|
||||
@@ -20,7 +20,7 @@
|
||||
#(fs/unlink downloaded-url)
|
||||
#(fs/unlink downloaded-url))))))
|
||||
|
||||
(rf/reg-fx :effects.lightbox/save-image-to-gallery
|
||||
(rf/reg-fx :effects.chat/save-image-to-gallery
|
||||
(fn [[uri on-success]]
|
||||
(blob/fetch uri
|
||||
config
|
||||
@@ -0,0 +1,23 @@
|
||||
(ns status-im.contexts.chat.messenger.lightbox.events
|
||||
(:require status-im.contexts.chat.messenger.lightbox.effects
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(rf/reg-event-fx :chat.ui/clear-sending-images
|
||||
(fn [{:keys [db]}]
|
||||
{:db (update-in db [:chat/inputs (:current-chat-id db) :metadata] assoc :sending-image {})}))
|
||||
|
||||
(rf/reg-event-fx :chat.ui/image-unselected
|
||||
(fn [{:keys [db]} [original]]
|
||||
(let [current-chat-id (:current-chat-id db)]
|
||||
{:db (update-in db
|
||||
[:chat/inputs current-chat-id :metadata :sending-image]
|
||||
dissoc
|
||||
(:uri original))})))
|
||||
|
||||
(rf/reg-event-fx :chat.ui/share-image
|
||||
(fn [_ [uri]]
|
||||
{:effects.chat/share-image uri}))
|
||||
|
||||
(rf/reg-event-fx :chat.ui/save-image-to-gallery
|
||||
(fn [_ [uri on-success]]
|
||||
{:effects.chat/save-image-to-gallery [uri on-success]}))
|
||||
+6
-6
@@ -1,9 +1,9 @@
|
||||
(ns status-im.common.lightbox.style
|
||||
(ns status-im.contexts.chat.messenger.lightbox.style
|
||||
(:require
|
||||
[quo.foundations.colors :as colors]
|
||||
[react-native.platform :as platform]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im.common.lightbox.constants :as constants]))
|
||||
[status-im.contexts.chat.messenger.lightbox.constants :as c]))
|
||||
|
||||
;;;; VIEW
|
||||
(defn image
|
||||
@@ -33,7 +33,7 @@
|
||||
{:position :absolute
|
||||
:padding-horizontal 20
|
||||
:top (if (or platform/ios? (not landscape?)) top-inset 0)
|
||||
:height constants/top-view-height
|
||||
:height c/top-view-height
|
||||
:z-index 4
|
||||
:flex-direction :row
|
||||
:justify-content :space-between
|
||||
@@ -44,7 +44,7 @@
|
||||
(defn top-gradient
|
||||
[insets]
|
||||
{:position :absolute
|
||||
:height (+ constants/top-view-height (:top insets) 0)
|
||||
:height (+ c/top-view-height (:top insets) 0)
|
||||
:top (- (:top insets))
|
||||
:left 0
|
||||
:right 0})
|
||||
@@ -71,12 +71,12 @@
|
||||
:display (if @transparent? :none :flex)
|
||||
:bottom 0
|
||||
:padding-bottom (:bottom insets)
|
||||
:padding-top constants/text-min-height
|
||||
:padding-top c/text-min-height
|
||||
:z-index 3}))
|
||||
|
||||
(defn content-container
|
||||
[padding-horizontal]
|
||||
{:padding-vertical constants/small-list-padding-vertical
|
||||
{:padding-vertical c/small-list-padding-vertical
|
||||
:padding-horizontal padding-horizontal
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
+4
-4
@@ -1,8 +1,8 @@
|
||||
(ns status-im.common.lightbox.text-sheet.style
|
||||
(ns status-im.contexts.chat.messenger.lightbox.text-sheet.style
|
||||
(:require
|
||||
[quo.foundations.colors :as colors]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im.common.lightbox.constants :as constants]))
|
||||
[status-im.contexts.chat.messenger.lightbox.constants :as constants]))
|
||||
|
||||
(defn sheet-container
|
||||
[{:keys [height top]}]
|
||||
@@ -14,10 +14,10 @@
|
||||
:right 0}))
|
||||
|
||||
(defn text-style
|
||||
[expandable-text?]
|
||||
[expanding-message?]
|
||||
{:color colors/white
|
||||
:margin-horizontal 20
|
||||
:align-items (when-not expandable-text? :center)
|
||||
:align-items (when-not expanding-message? :center)
|
||||
:flex-grow 1})
|
||||
|
||||
(def bar-container
|
||||
+4
-4
@@ -1,10 +1,10 @@
|
||||
(ns status-im.common.lightbox.text-sheet.utils
|
||||
(ns status-im.contexts.chat.messenger.lightbox.text-sheet.utils
|
||||
(:require
|
||||
[oops.core :as oops]
|
||||
[react-native.gesture :as gesture]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[reagent.core :as r]
|
||||
[status-im.common.lightbox.constants :as constants]))
|
||||
[status-im.contexts.chat.messenger.lightbox.constants :as constants]))
|
||||
|
||||
(defn- collapse-sheet
|
||||
[{:keys [derived-value overlay-opacity saved-top expanded? overlay-z-index]}]
|
||||
@@ -16,10 +16,10 @@
|
||||
|
||||
(defn sheet-gesture
|
||||
[{:keys [derived-value saved-top overlay-opacity gradient-opacity]}
|
||||
expanded-height max-height full-height overlay-z-index expanded? dragging? expandable-text?]
|
||||
expanded-height max-height full-height overlay-z-index expanded? dragging? expanding-message?]
|
||||
(let [disable-gesture-update (r/atom false)]
|
||||
(-> (gesture/gesture-pan)
|
||||
(gesture/enabled expandable-text?)
|
||||
(gesture/enabled expanding-message?)
|
||||
(gesture/on-start (fn []
|
||||
(reset! overlay-z-index 1)
|
||||
(reset! dragging? true)
|
||||
+34
-30
@@ -1,4 +1,4 @@
|
||||
(ns status-im.common.lightbox.text-sheet.view
|
||||
(ns status-im.contexts.chat.messenger.lightbox.text-sheet.view
|
||||
(:require
|
||||
[quo.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
@@ -8,31 +8,33 @@
|
||||
[react-native.reanimated :as reanimated]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.common.lightbox.constants :as constants]
|
||||
[status-im.common.lightbox.text-sheet.style :as style]
|
||||
[status-im.common.lightbox.text-sheet.utils :as utils]))
|
||||
[status-im.contexts.chat.messenger.lightbox.constants :as constants]
|
||||
[status-im.contexts.chat.messenger.lightbox.text-sheet.style :as style]
|
||||
[status-im.contexts.chat.messenger.lightbox.text-sheet.utils :as utils]
|
||||
[status-im.contexts.chat.messenger.messages.content.text.view :as message-view]))
|
||||
|
||||
(defn- text-sheet
|
||||
[_]
|
||||
[messages overlay-opacity overlay-z-index text-sheet-lock?]
|
||||
(let [text-height (reagent/atom 0)
|
||||
expanded? (reagent/atom false)
|
||||
dragging? (atom false)]
|
||||
(fn [{:keys [overlay-opacity overlay-z-index text-sheet-lock? text-component]}]
|
||||
(let [insets (safe-area/get-insets)
|
||||
window-height (:height (rn/get-window))
|
||||
max-height (- window-height
|
||||
constants/text-min-height
|
||||
constants/top-view-height
|
||||
(:bottom insets)
|
||||
(when platform/ios? (:top insets)))
|
||||
full-height (+ constants/bar-container-height
|
||||
constants/text-margin
|
||||
constants/line-height
|
||||
@text-height)
|
||||
expanded-height (min max-height full-height)
|
||||
animations (utils/init-animations overlay-opacity)
|
||||
derived (utils/init-derived-animations animations)
|
||||
expandable-text? (> @text-height (* constants/line-height 2))]
|
||||
(fn []
|
||||
(let [{:keys [chat-id content]} (first messages)
|
||||
insets (safe-area/get-insets)
|
||||
window-height (:height (rn/get-window))
|
||||
max-height (- window-height
|
||||
constants/text-min-height
|
||||
constants/top-view-height
|
||||
(:bottom insets)
|
||||
(when platform/ios? (:top insets)))
|
||||
full-height (+ constants/bar-container-height
|
||||
constants/text-margin
|
||||
constants/line-height
|
||||
@text-height)
|
||||
expanded-height (min max-height full-height)
|
||||
animations (utils/init-animations overlay-opacity)
|
||||
derived (utils/init-derived-animations animations)
|
||||
expanding-message? (> @text-height (* constants/line-height 2))]
|
||||
[rn/view
|
||||
[reanimated/linear-gradient
|
||||
{:colors [colors/neutral-100-opa-0 colors/neutral-100]
|
||||
@@ -49,10 +51,10 @@
|
||||
overlay-z-index
|
||||
expanded?
|
||||
dragging?
|
||||
expandable-text?)}
|
||||
expanding-message?)}
|
||||
[gesture/gesture-detector
|
||||
{:gesture (-> (gesture/gesture-tap)
|
||||
(gesture/enabled (and expandable-text? (not @expanded?)))
|
||||
(gesture/enabled (and expanding-message? (not @expanded?)))
|
||||
(gesture/on-start (fn []
|
||||
(utils/expand-sheet animations
|
||||
expanded-height
|
||||
@@ -61,7 +63,7 @@
|
||||
expanded?
|
||||
text-sheet-lock?))))}
|
||||
[reanimated/view {:style (style/sheet-container derived)}
|
||||
(when expandable-text?
|
||||
(when expanding-message?
|
||||
[rn/view {:style style/bar-container}
|
||||
[rn/view {:style style/bar}]])
|
||||
[linear-gradient/linear-gradient
|
||||
@@ -70,17 +72,19 @@
|
||||
:end {:x 0 :y 0}
|
||||
:locations [0.7 0.8 1]
|
||||
:style (style/bottom-gradient (:bottom insets))}]
|
||||
|
||||
[gesture/scroll-view
|
||||
{:scroll-enabled false
|
||||
:scroll-event-throttle 16
|
||||
:bounces false
|
||||
:style {:height (- max-height constants/bar-container-height)}
|
||||
:content-container-style {:padding-top (when (not expandable-text?)
|
||||
:content-container-style {:padding-top (when (not expanding-message?)
|
||||
constants/bar-container-height)}}
|
||||
[rn/view {:on-layout #(utils/on-layout % text-height)}
|
||||
text-component]]]]]]))))
|
||||
[message-view/render-parsed-text
|
||||
{:content content
|
||||
:chat-id chat-id
|
||||
:style-override (style/text-style expanding-message?)
|
||||
:on-layout #(utils/on-layout % text-height)}]]]]]]))))
|
||||
|
||||
(defn view
|
||||
[props]
|
||||
[:f> text-sheet props])
|
||||
[messages {:keys [overlay-opacity]} {:keys [overlay-z-index]} {:keys [text-sheet-lock?]}]
|
||||
[:f> text-sheet messages overlay-opacity overlay-z-index text-sheet-lock?])
|
||||
+26
-24
@@ -1,4 +1,4 @@
|
||||
(ns status-im.common.lightbox.top-view
|
||||
(ns status-im.contexts.chat.messenger.lightbox.top-view
|
||||
(:require
|
||||
[quo.core :as quo]
|
||||
[quo.foundations.colors :as colors]
|
||||
@@ -6,9 +6,10 @@
|
||||
[react-native.orientation :as orientation]
|
||||
[react-native.platform :as platform]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im.common.lightbox.animations :as anim]
|
||||
[status-im.common.lightbox.constants :as constants]
|
||||
[status-im.common.lightbox.style :as style]
|
||||
[status-im.contexts.chat.messenger.lightbox.animations :as anim]
|
||||
[status-im.contexts.chat.messenger.lightbox.constants :as c]
|
||||
[status-im.contexts.chat.messenger.lightbox.style :as style]
|
||||
[utils.datetime :as datetime]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[utils.url :as url]))
|
||||
@@ -16,7 +17,7 @@
|
||||
(defn animate-rotation
|
||||
[result screen-width screen-height insets
|
||||
{:keys [rotate top-view-y top-view-x top-view-width top-view-bg]}]
|
||||
(let [top-x (+ (/ constants/top-view-height 2) (:top insets))]
|
||||
(let [top-x (+ (/ c/top-view-height 2) (:top insets))]
|
||||
(cond
|
||||
(= result orientation/landscape-left)
|
||||
(do
|
||||
@@ -41,9 +42,9 @@
|
||||
(anim/animate top-view-bg colors/neutral-100-opa-0)))))
|
||||
|
||||
(defn drawer
|
||||
[images index]
|
||||
(let [{:keys [image]} (nth images index)
|
||||
uri (url/replace-port image (rf/sub [:mediaserver/port]))]
|
||||
[messages index]
|
||||
(let [{:keys [content]} (nth messages index)
|
||||
uri (url/replace-port (:image content) (rf/sub [:mediaserver/port]))]
|
||||
[quo/action-drawer
|
||||
[[{:icon :i/save
|
||||
:accessibility-label :save-image
|
||||
@@ -51,7 +52,7 @@
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:hide-bottom-sheet])
|
||||
(rf/dispatch
|
||||
[:lightbox/save-image-to-gallery
|
||||
[:chat.ui/save-image-to-gallery
|
||||
uri
|
||||
#(rf/dispatch [:toasts/upsert
|
||||
{:id :random-id
|
||||
@@ -60,19 +61,20 @@
|
||||
:text (i18n/label :t/photo-saved)}])]))}]]]))
|
||||
|
||||
(defn share-image
|
||||
[images index]
|
||||
(let [{:keys [image]} (nth images index)
|
||||
uri (url/replace-port image (rf/sub [:mediaserver/port]))]
|
||||
(rf/dispatch [:lightbox/share-image uri])))
|
||||
[messages index]
|
||||
(let [{:keys [content]} (nth messages index)
|
||||
uri (url/replace-port (:image content) (rf/sub [:mediaserver/port]))]
|
||||
(rf/dispatch [:chat.ui/share-image uri])))
|
||||
|
||||
(defn top-view
|
||||
[images insets index animations derived landscape? screen-width]
|
||||
(let [{:keys [description header]} (nth images @index)
|
||||
bg-color (if landscape?
|
||||
colors/neutral-100-opa-70
|
||||
colors/neutral-100-opa-0)
|
||||
[messages insets index animations derived landscape? screen-width]
|
||||
(let [{:keys [from timestamp]} (first messages)
|
||||
[primary-name _] (rf/sub [:contacts/contact-two-names-by-identity from])
|
||||
bg-color (if landscape?
|
||||
colors/neutral-100-opa-70
|
||||
colors/neutral-100-opa-0)
|
||||
{:keys [background-color opacity
|
||||
overlay-opacity]} animations]
|
||||
overlay-opacity]} animations]
|
||||
[reanimated/view
|
||||
{:style
|
||||
(style/top-view-container (:top insets) screen-width bg-color landscape? animations derived)}
|
||||
@@ -90,7 +92,7 @@
|
||||
(anim/animate opacity 0)
|
||||
(anim/animate overlay-opacity 0)
|
||||
(rf/dispatch (if platform/ios?
|
||||
[:lightbox/exit-lightbox-signal @index]
|
||||
[:chat.ui/exit-lightbox-signal @index]
|
||||
[:navigate-back])))
|
||||
:style style/close-container}
|
||||
[quo/icon :close {:size 20 :color colors/white}]]
|
||||
@@ -98,22 +100,22 @@
|
||||
[quo/text
|
||||
{:weight :semi-bold
|
||||
:size :paragraph-1
|
||||
:style {:color colors/white}} header]
|
||||
:style {:color colors/white}} primary-name]
|
||||
[quo/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color colors/neutral-40}} description]]]
|
||||
:style {:color colors/neutral-40}} (when timestamp (datetime/to-short-str timestamp))]]]
|
||||
[rn/view {:style style/top-right-buttons}
|
||||
[rn/touchable-opacity
|
||||
{:active-opacity 1
|
||||
:accessibility-label :share-image
|
||||
:on-press #(share-image images @index)
|
||||
:on-press #(share-image messages @index)
|
||||
:style (merge style/close-container {:margin-right 12})}
|
||||
[quo/icon :share {:size 20 :color colors/white}]]
|
||||
[rn/touchable-opacity
|
||||
{:active-opacity 1
|
||||
:accessibility-label :image-options
|
||||
:on-press #(rf/dispatch [:show-bottom-sheet
|
||||
{:content (fn [] [drawer images @index])}])
|
||||
{:content (fn [] [drawer messages @index])}])
|
||||
:style style/close-container}
|
||||
[quo/icon :options {:size 20 :color colors/white}]]]]))
|
||||
+8
-8
@@ -1,4 +1,4 @@
|
||||
(ns status-im.common.lightbox.utils
|
||||
(ns status-im.contexts.chat.messenger.lightbox.utils
|
||||
(:require
|
||||
[clojure.string :as string]
|
||||
[oops.core :as oops]
|
||||
@@ -9,9 +9,9 @@
|
||||
[react-native.platform :as platform]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.common.lightbox.animations :as anim]
|
||||
[status-im.common.lightbox.constants :as constants]
|
||||
[status-im.common.lightbox.top-view :as top-view]
|
||||
[status-im.contexts.chat.messenger.lightbox.animations :as anim]
|
||||
[status-im.contexts.chat.messenger.lightbox.constants :as constants]
|
||||
[status-im.contexts.chat.messenger.lightbox.top-view :as top-view]
|
||||
[utils.re-frame :as rf]
|
||||
[utils.worklets.chat.messenger.lightbox :as worklet]))
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
(if platform/ios? 250 100)))
|
||||
(swap! timers assoc :mount-index-lock (js/setTimeout #(reset! scroll-index-lock? false) 300))
|
||||
(fn []
|
||||
(rf/dispatch [:lightbox/zoom-out-signal nil])
|
||||
(rf/dispatch [:chat.ui/zoom-out-signal nil])
|
||||
(when platform/android?
|
||||
(rf/dispatch [:chat.ui/lightbox-scale 1]))
|
||||
(clear-timers timers)))))
|
||||
@@ -69,7 +69,7 @@
|
||||
landscape? (string/includes? result orientation/landscape)
|
||||
item-width (if (and landscape? platform/ios?) screen-height screen-width)]
|
||||
(when (or landscape? (= result orientation/portrait))
|
||||
(rf/dispatch [:lightbox/orientation-change result]))
|
||||
(rf/dispatch [:chat.ui/orientation-change result]))
|
||||
(cond
|
||||
landscape?
|
||||
(orientation/lock-to-landscape "lightbox")
|
||||
@@ -148,11 +148,11 @@
|
||||
:timers (atom {})})
|
||||
|
||||
(defn init-state
|
||||
[images index]
|
||||
[messages index]
|
||||
;; The initial value of data is the image that was pressed (and not the whole album) in order
|
||||
;; for the transition animation to execute properly, otherwise it would animate towards
|
||||
;; outside the screen (even if we have `initialScrollIndex` set).
|
||||
{:data (reagent/atom (if (number? index) [(nth images index)] []))
|
||||
{:data (reagent/atom (if (number? index) [(nth messages index)] []))
|
||||
:scroll-index (reagent/atom index)
|
||||
:transparent? (reagent/atom false)
|
||||
:set-full-height? (reagent/atom false)
|
||||
+42
-65
@@ -1,4 +1,4 @@
|
||||
(ns status-im.common.lightbox.view
|
||||
(ns status-im.contexts.chat.messenger.lightbox.view
|
||||
(:require
|
||||
[clojure.string :as string]
|
||||
[oops.core :as oops]
|
||||
@@ -9,13 +9,13 @@
|
||||
[react-native.platform :as platform]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[status-im.common.lightbox.animations :as anim]
|
||||
[status-im.common.lightbox.bottom-view :as bottom-view]
|
||||
[status-im.common.lightbox.constants :as constants]
|
||||
[status-im.common.lightbox.style :as style]
|
||||
[status-im.common.lightbox.top-view :as top-view]
|
||||
[status-im.common.lightbox.utils :as utils]
|
||||
[status-im.common.lightbox.zoomable-image.view :as zoomable-image]
|
||||
[status-im.contexts.chat.messenger.lightbox.animations :as anim]
|
||||
[status-im.contexts.chat.messenger.lightbox.bottom-view :as bottom-view]
|
||||
[status-im.contexts.chat.messenger.lightbox.constants :as constants]
|
||||
[status-im.contexts.chat.messenger.lightbox.style :as style]
|
||||
[status-im.contexts.chat.messenger.lightbox.top-view :as top-view]
|
||||
[status-im.contexts.chat.messenger.lightbox.utils :as utils]
|
||||
[status-im.contexts.chat.messenger.lightbox.zoomable-image.view :as zoomable-image]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn get-item-layout
|
||||
@@ -33,10 +33,9 @@
|
||||
(reset! scroll-index index)
|
||||
(when @small-list-ref
|
||||
(.scrollToIndex ^js @small-list-ref #js {:animated true :index index}))
|
||||
(rf/dispatch [:lightbox/update-animation-shared-element-id
|
||||
(:id (oops/oget changed :item))]))))
|
||||
(rf/dispatch [:chat.ui/update-shared-element-id (:message-id (oops/oget changed :item))]))))
|
||||
|
||||
(defn image-view
|
||||
(defn image
|
||||
[message index _ {:keys [screen-width screen-height] :as args}]
|
||||
[rn/view
|
||||
{:style (style/image (+ screen-width constants/separator-width) screen-height)}
|
||||
@@ -44,31 +43,30 @@
|
||||
[rn/view {:style {:width constants/separator-width}}]])
|
||||
|
||||
(defn lightbox-content
|
||||
[{:keys [props state animations derived images index handle-items-changed bottom-text-component]}]
|
||||
(let [{:keys [data transparent? scroll-index
|
||||
set-full-height?]} state
|
||||
insets (safe-area/get-insets)
|
||||
window (rn/get-window)
|
||||
window-width (:width window)
|
||||
window-height (if platform/android?
|
||||
(+ (:height window) (:top insets))
|
||||
(:height window))
|
||||
curr-orientation (or (rf/sub [:lightbox/orientation]) orientation/portrait)
|
||||
landscape? (string/includes? curr-orientation orientation/landscape)
|
||||
horizontal? (or platform/android? (not landscape?))
|
||||
inverted? (and platform/ios? (= curr-orientation orientation/landscape-right))
|
||||
screen-width (if (or platform/ios? (= curr-orientation orientation/portrait))
|
||||
window-width
|
||||
window-height)
|
||||
screen-height (if (or platform/ios? (= curr-orientation orientation/portrait))
|
||||
window-height
|
||||
window-width)
|
||||
item-width (if (and landscape? platform/ios?) screen-height screen-width)]
|
||||
[props {:keys [data transparent? scroll-index set-full-height?] :as state}
|
||||
animations derived messages index handle-items-changed]
|
||||
(let [insets (safe-area/get-insets)
|
||||
window (rn/get-window)
|
||||
window-width (:width window)
|
||||
window-height (if platform/android?
|
||||
(+ (:height window) (:top insets))
|
||||
(:height window))
|
||||
curr-orientation (or (rf/sub [:lightbox/orientation]) orientation/portrait)
|
||||
landscape? (string/includes? curr-orientation orientation/landscape)
|
||||
horizontal? (or platform/android? (not landscape?))
|
||||
inverted? (and platform/ios? (= curr-orientation orientation/landscape-right))
|
||||
screen-width (if (or platform/ios? (= curr-orientation orientation/portrait))
|
||||
window-width
|
||||
window-height)
|
||||
screen-height (if (or platform/ios? (= curr-orientation orientation/portrait))
|
||||
window-height
|
||||
window-width)
|
||||
item-width (if (and landscape? platform/ios?) screen-height screen-width)]
|
||||
[reanimated/view
|
||||
{:style (reanimated/apply-animations-to-style {:background-color (:background-color animations)}
|
||||
{:height screen-height})}
|
||||
(when-not @transparent?
|
||||
[:f> top-view/top-view images insets scroll-index animations derived landscape?
|
||||
[:f> top-view/top-view messages insets scroll-index animations derived landscape?
|
||||
screen-width])
|
||||
[gesture/gesture-detector
|
||||
{:gesture (utils/drag-gesture animations (and landscape? platform/ios?) set-full-height?)}
|
||||
@@ -94,7 +92,7 @@
|
||||
:scroll-event-throttle 8
|
||||
:style {:width (+ screen-width constants/separator-width)}
|
||||
:data @data
|
||||
:render-fn image-view
|
||||
:render-fn image
|
||||
:render-data {:opacity-value (:opacity animations)
|
||||
:overlay-opacity (:overlay-opacity animations)
|
||||
:border-value (:border animations)
|
||||
@@ -120,47 +118,26 @@
|
||||
;; NOTE: not un-mounting bottom-view based on `transparent?` (like we do with the top-view
|
||||
;; above), since we need to save the state of the text-sheet position. Instead, we use
|
||||
;; the `:display` style property to hide the bottom-sheet.
|
||||
(when (and (not landscape?) (or bottom-text-component (> (count images) 1)))
|
||||
[:f> bottom-view/bottom-view
|
||||
{:images images
|
||||
:index index
|
||||
:scroll-index scroll-index
|
||||
:insets insets
|
||||
:animations animations
|
||||
:derived derived
|
||||
:item-width item-width
|
||||
:props props
|
||||
:state state
|
||||
:transparent? transparent?
|
||||
:bottom-text-component bottom-text-component}])]))
|
||||
(when (not landscape?)
|
||||
[:f> bottom-view/bottom-view messages index scroll-index insets animations derived
|
||||
item-width props state transparent?])]))
|
||||
|
||||
(defn- f-lightbox
|
||||
[]
|
||||
(let [{:keys [images index bottom-text-component]} (rf/sub [:get-screen-params])
|
||||
props
|
||||
(utils/init-props)
|
||||
state
|
||||
(utils/init-state images index)
|
||||
handle-items-changed
|
||||
(fn [e]
|
||||
(on-viewable-items-changed e props state))]
|
||||
(let [{:keys [messages index]} (rf/sub [:get-screen-params])
|
||||
props (utils/init-props)
|
||||
state (utils/init-state messages index)
|
||||
handle-items-changed (fn [e]
|
||||
(on-viewable-items-changed e props state))]
|
||||
(fn []
|
||||
(let [animations (utils/init-animations (count images) index)
|
||||
(let [animations (utils/init-animations (count messages) index)
|
||||
derived (utils/init-derived-animations animations)]
|
||||
(anim/animate (:background-color animations) colors/neutral-100)
|
||||
(reset! (:data state) images)
|
||||
(reset! (:data state) messages)
|
||||
(when platform/ios? ; issue: https://github.com/wix/react-native-navigation/issues/7726
|
||||
(utils/orientation-change props state animations))
|
||||
(utils/effect props animations index)
|
||||
[:f> lightbox-content
|
||||
{:props props
|
||||
:state state
|
||||
:animations animations
|
||||
:derived derived
|
||||
:images images
|
||||
:index index
|
||||
:handle-items-changed handle-items-changed
|
||||
:bottom-text-component bottom-text-component}]))))
|
||||
[:f> lightbox-content props state animations derived messages index handle-items-changed]))))
|
||||
|
||||
(defn lightbox
|
||||
[]
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
(ns status-im.common.lightbox.zoomable-image.constants)
|
||||
(ns status-im.contexts.chat.messenger.lightbox.zoomable-image.constants)
|
||||
|
||||
(def ^:const min-scale 1)
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
(ns status-im.common.lightbox.zoomable-image.style
|
||||
(ns status-im.contexts.chat.messenger.lightbox.zoomable-image.style
|
||||
(:require
|
||||
[react-native.platform :as platform]
|
||||
[react-native.reanimated :as reanimated]))
|
||||
+4
-4
@@ -1,4 +1,4 @@
|
||||
(ns status-im.common.lightbox.zoomable-image.utils
|
||||
(ns status-im.contexts.chat.messenger.lightbox.zoomable-image.utils
|
||||
(:require
|
||||
[clojure.string :as string]
|
||||
[react-native.core :as rn]
|
||||
@@ -6,8 +6,8 @@
|
||||
[react-native.orientation :as orientation]
|
||||
[react-native.platform :as platform]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.common.lightbox.animations :as anim]
|
||||
[status-im.common.lightbox.zoomable-image.constants :as constants]
|
||||
[status-im.contexts.chat.messenger.lightbox.animations :as anim]
|
||||
[status-im.contexts.chat.messenger.lightbox.zoomable-image.constants :as constants]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
;;; Helpers
|
||||
@@ -97,7 +97,7 @@
|
||||
(rescale constants/min-scale true)
|
||||
(js/setTimeout #(rf/dispatch [:navigate-back]) 70))
|
||||
(rf/dispatch [:navigate-back]))
|
||||
(js/setTimeout #(rf/dispatch [:lightbox/exit-lightbox-signal nil]) 500)))
|
||||
(js/setTimeout #(rf/dispatch [:chat.ui/exit-lightbox-signal nil]) 500)))
|
||||
|
||||
(defn handle-zoom-out-signal
|
||||
"Zooms out when pressing on another photo from the small bottom list"
|
||||
+11
-11
@@ -1,4 +1,4 @@
|
||||
(ns status-im.common.lightbox.zoomable-image.view
|
||||
(ns status-im.contexts.chat.messenger.lightbox.zoomable-image.view
|
||||
(:require
|
||||
[oops.core :refer [oget]]
|
||||
[react-native.core :as rn]
|
||||
@@ -7,10 +7,10 @@
|
||||
[react-native.platform :as platform]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[reagent.core :as r]
|
||||
[status-im.common.lightbox.animations :as anim]
|
||||
[status-im.common.lightbox.zoomable-image.constants :as c]
|
||||
[status-im.common.lightbox.zoomable-image.style :as style]
|
||||
[status-im.common.lightbox.zoomable-image.utils :as utils]
|
||||
[status-im.contexts.chat.messenger.lightbox.animations :as anim]
|
||||
[status-im.contexts.chat.messenger.lightbox.zoomable-image.constants :as c]
|
||||
[status-im.contexts.chat.messenger.lightbox.zoomable-image.style :as style]
|
||||
[status-im.contexts.chat.messenger.lightbox.zoomable-image.utils :as utils]
|
||||
[utils.re-frame :as rf]
|
||||
[utils.url :as url]))
|
||||
|
||||
@@ -206,7 +206,7 @@
|
||||
(anim/animate-decay pan-y-start velocity [lower-bound upper-bound]))))))))
|
||||
|
||||
(defn- f-zoomable-image
|
||||
[dimensions animations state rescale curr-orientation image focused? index render-data
|
||||
[dimensions animations state rescale curr-orientation content focused? index render-data
|
||||
image-dimensions-nil?]
|
||||
(let [{:keys [transparent? set-full-height?]} render-data
|
||||
portrait? (= curr-orientation orientation/portrait)
|
||||
@@ -229,7 +229,7 @@
|
||||
(= curr-orientation orientation/portrait))}
|
||||
[reanimated/fast-image
|
||||
(merge
|
||||
{:source {:uri (url/replace-port image (rf/sub [:mediaserver/port]))}
|
||||
{:source {:uri (url/replace-port (:image content) (rf/sub [:mediaserver/port]))}
|
||||
:native-ID (when focused? :shared-element)
|
||||
:style (style/image dimensions animations render-data index)}
|
||||
(when image-dimensions-nil?
|
||||
@@ -238,12 +238,12 @@
|
||||
(defn zoomable-image
|
||||
[]
|
||||
(let [state (utils/init-state)]
|
||||
(fn [{:keys [image-width image-height image id]} index render-data]
|
||||
(let [animation-shared-element-id (rf/sub [:animation-shared-element-id])
|
||||
(fn [{:keys [image-width image-height content message-id]} index render-data]
|
||||
(let [shared-element-id (rf/sub [:shared-element-id])
|
||||
exit-lightbox-signal (rf/sub [:lightbox/exit-signal])
|
||||
zoom-out-signal (rf/sub [:lightbox/zoom-out-signal])
|
||||
{:keys [set-full-height? curr-orientation]} render-data
|
||||
focused? (= animation-shared-element-id id)
|
||||
focused? (= shared-element-id message-id)
|
||||
;; TODO - remove `image-dimensions` check, once
|
||||
;; https://github.com/status-im/status-desktop/issues/10944 is fixed
|
||||
image-dimensions-nil? (not (and image-width image-height))
|
||||
@@ -269,5 +269,5 @@
|
||||
rescale
|
||||
set-full-height?))
|
||||
(utils/handle-zoom-out-signal zoom-out-signal index (anim/get-val (:scale animations)) rescale)
|
||||
[:f> f-zoomable-image dimensions animations state rescale curr-orientation image focused?
|
||||
[:f> f-zoomable-image dimensions animations state rescale curr-orientation content focused?
|
||||
index render-data image-dimensions-nil?]))))
|
||||
@@ -7,8 +7,6 @@
|
||||
[status-im.constants :as constants]
|
||||
[status-im.contexts.chat.messenger.messages.content.album.style :as style]
|
||||
[status-im.contexts.chat.messenger.messages.content.image.view :as image]
|
||||
[status-im.contexts.chat.messenger.messages.content.lightbox.utils :as lightbox-utils]
|
||||
[status-im.contexts.chat.messenger.messages.content.lightbox.view :as lightbox]
|
||||
[status-im.contexts.chat.messenger.messages.content.text.view :as text]
|
||||
[utils.re-frame :as rf]
|
||||
[utils.url :as url]))
|
||||
@@ -23,19 +21,17 @@
|
||||
|
||||
(defn album-message
|
||||
[{:keys [albumize?] :as message} context on-long-press message-container-data]
|
||||
(let [animation-shared-element-id (rf/sub [:animation-shared-element-id])
|
||||
media-server-port (rf/sub [:mediaserver/port])
|
||||
album-messages (:album message)
|
||||
first-image (first album-messages)
|
||||
album-style (if (> (:image-width first-image) (:image-height first-image))
|
||||
:landscape
|
||||
:portrait)
|
||||
images-count (count album-messages)
|
||||
(let [shared-element-id (rf/sub [:shared-element-id])
|
||||
media-server-port (rf/sub [:mediaserver/port])
|
||||
first-image (first (:album message))
|
||||
album-style (if (> (:image-width first-image) (:image-height first-image))
|
||||
:landscape
|
||||
:portrait)
|
||||
images-count (count (:album message))
|
||||
;; album images are always square, except when we have 3 images, then they must be
|
||||
;; rectangular
|
||||
;; (portrait or landscape)
|
||||
portrait? (and (= images-count rectangular-style-count)
|
||||
(= album-style :portrait))]
|
||||
portrait? (and (= images-count rectangular-style-count) (= album-style :portrait))]
|
||||
(if (and albumize? (> images-count 1))
|
||||
[:<>
|
||||
[rn/view {:style {:margin-bottom 4}} [text/text-content first-image]]
|
||||
@@ -56,21 +52,14 @@
|
||||
{:key (:message-id item)
|
||||
:active-opacity 1
|
||||
:on-long-press #(on-long-press message context)
|
||||
:on-press #(rf/dispatch
|
||||
[:lightbox/navigate-to-lightbox
|
||||
(:message-id item)
|
||||
{:index index
|
||||
:images (into []
|
||||
(map
|
||||
lightbox-utils/convert-message-to-lightbox-image
|
||||
album-messages))
|
||||
:bottom-text-component
|
||||
[lightbox/bottom-text-for-lightbox
|
||||
first-image]}])}
|
||||
:on-press #(rf/dispatch [:chat.ui/navigate-to-lightbox
|
||||
(:message-id item)
|
||||
{:messages (:album message)
|
||||
:index index}])}
|
||||
[fast-image/fast-image
|
||||
{:style (style/image dimensions index portrait? images-count)
|
||||
:source {:uri (url/replace-port (:image (:content item)) media-server-port)}
|
||||
:native-ID (when (and (= animation-shared-element-id (:message-id item))
|
||||
:native-ID (when (and (= shared-element-id (:message-id item))
|
||||
(< index constants/max-album-photos))
|
||||
:shared-element)}]
|
||||
(when (and (> images-count constants/max-album-photos)
|
||||
@@ -82,11 +71,11 @@
|
||||
:size :heading-2
|
||||
:style {:color colors/white}}
|
||||
(str "+" (- images-count (dec constants/max-album-photos)))]])]))
|
||||
album-messages)]]
|
||||
(:album message))]]
|
||||
[:<>
|
||||
(map-indexed
|
||||
(fn [index item]
|
||||
[:<> {:key (:message-id item)}
|
||||
[image/image-message index item {:on-long-press #(on-long-press message context)}
|
||||
message-container-data]])
|
||||
album-messages)])))
|
||||
(:album message))])))
|
||||
|
||||
@@ -4,8 +4,6 @@
|
||||
[react-native.fast-image :as fast-image]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[status-im.constants :as constants]
|
||||
[status-im.contexts.chat.messenger.messages.content.lightbox.utils :as lightbox-utils]
|
||||
[status-im.contexts.chat.messenger.messages.content.lightbox.view :as lightbox]
|
||||
[status-im.contexts.chat.messenger.messages.content.text.view :as text]
|
||||
[utils.re-frame :as rf]
|
||||
[utils.url :as url]))
|
||||
@@ -41,7 +39,7 @@
|
||||
image-height
|
||||
max-container-width
|
||||
max-container-height)
|
||||
animation-shared-element-id (rf/sub [:animation-shared-element-id])
|
||||
shared-element-id (rf/sub [:shared-element-id])
|
||||
image-local-url (url/replace-port (:image content) (rf/sub [:mediaserver/port]))]
|
||||
[:<>
|
||||
(when (= index 0)
|
||||
@@ -50,16 +48,13 @@
|
||||
{:active-opacity 1
|
||||
:style {:margin-top 4}
|
||||
:on-long-press on-long-press
|
||||
:on-press #(rf/dispatch [:lightbox/navigate-to-lightbox
|
||||
:on-press #(rf/dispatch [:chat.ui/navigate-to-lightbox
|
||||
message-id
|
||||
{:images [(lightbox-utils/convert-message-to-lightbox-image
|
||||
message)]
|
||||
:index 0
|
||||
:insets insets
|
||||
:bottom-text-component
|
||||
[lightbox/bottom-text-for-lightbox message]}])}
|
||||
{:messages [message]
|
||||
:index 0
|
||||
:insets insets}])}
|
||||
[fast-image/fast-image
|
||||
{:source {:uri image-local-url}
|
||||
:style (merge dimensions {:border-radius 12})
|
||||
:native-ID (when (= animation-shared-element-id message-id) :shared-element)
|
||||
:native-ID (when (= shared-element-id message-id) :shared-element)
|
||||
:accessibility-label :image-message}]]]))
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
(ns status-im.contexts.chat.messenger.messages.content.lightbox.style
|
||||
(:require
|
||||
[quo.foundations.colors :as colors]))
|
||||
|
||||
(defn bottom-text
|
||||
[expandable-text?]
|
||||
{:color colors/white
|
||||
:margin-horizontal 20
|
||||
:align-items (when-not expandable-text? :center)
|
||||
:flex-grow 1})
|
||||
@@ -1,14 +0,0 @@
|
||||
(ns status-im.contexts.chat.messenger.messages.content.lightbox.utils
|
||||
(:require
|
||||
[utils.datetime :as datetime]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn convert-message-to-lightbox-image
|
||||
[{:keys [timestamp image-width image-height message-id from content]}]
|
||||
(let [[primary-name _] (rf/sub [:contacts/contact-two-names-by-identity from])]
|
||||
{:image (:image content)
|
||||
:image-width image-width
|
||||
:image-height image-height
|
||||
:id message-id
|
||||
:header primary-name
|
||||
:description (when timestamp (datetime/to-short-str timestamp))}))
|
||||
@@ -1,18 +0,0 @@
|
||||
(ns status-im.contexts.chat.messenger.messages.content.lightbox.view
|
||||
(:require
|
||||
[oops.core :as oops]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.common.lightbox.constants :as constants]
|
||||
[status-im.contexts.chat.messenger.messages.content.lightbox.style :as style]
|
||||
[status-im.contexts.chat.messenger.messages.content.text.view :as message-view]))
|
||||
|
||||
(defn bottom-text-for-lightbox
|
||||
[_]
|
||||
(let [text-height (reagent/atom 0)]
|
||||
(fn [{:keys [content chat-id] :as _message}]
|
||||
(let [expandable-text? (> @text-height (* constants/line-height 2))]
|
||||
[message-view/render-parsed-text
|
||||
{:content content
|
||||
:chat-id chat-id
|
||||
:style-override (style/bottom-text expandable-text?)
|
||||
:on-layout #(reset! text-height (oops/oget % "nativeEvent.layout.height"))}]))))
|
||||
@@ -21,9 +21,7 @@
|
||||
{:key :currency
|
||||
:type :select
|
||||
:options [{:key :usd}
|
||||
{:key :eur}]}
|
||||
{:key :error?
|
||||
:type :boolean}])
|
||||
{:key :eur}]}])
|
||||
|
||||
(defn view
|
||||
[]
|
||||
|
||||
@@ -13,15 +13,10 @@
|
||||
:openseaAPIKey config/opensea-api-key
|
||||
:poktToken config/POKT_TOKEN
|
||||
:infuraToken config/INFURA_TOKEN
|
||||
:raribleMainnetApiKey config/RARIBLE_MAINNET_API_KEY
|
||||
:raribleTestnetApiKey config/RARIBLE_TESTNET_API_KEY
|
||||
:alchemyOptimismMainnetToken config/ALCHEMY_OPTIMISM_MAINNET_TOKEN
|
||||
:alchemyOptimismGoerliToken config/ALCHEMY_OPTIMISM_GOERLI_TOKEN
|
||||
:alchemyArbitrumMainnetToken config/ALCHEMY_ARBITRUM_MAINNET_TOKEN
|
||||
:alchemyArbitrumGoerliToken config/ALCHEMY_ARBITRUM_GOERLI_TOKEN
|
||||
:alchemyEthereumSepoliaToken config/ALCHEMY_ETHEREUM_SEPOLIA_TOKEN
|
||||
:alchemyArbitrumSepoliaToken config/ALCHEMY_ARBITRUM_SEPOLIA_TOKEN
|
||||
:alchemyOptimismSepoliaToken config/ALCHEMY_OPTIMISM_SEPOLIA_TOKEN})
|
||||
:alchemyArbitrumGoerliToken config/ALCHEMY_ARBITRUM_GOERLI_TOKEN})
|
||||
|
||||
(defn create
|
||||
[]
|
||||
|
||||
@@ -122,17 +122,17 @@
|
||||
(rf/dispatch [:wallet/clean-scanned-address])
|
||||
(rf/dispatch [:wallet/clear-address-activity-check])
|
||||
(rf/dispatch [:navigate-back]))}]
|
||||
:footer [quo/button
|
||||
{:customization-color customization-color
|
||||
:disabled? (or (string/blank? @input-value)
|
||||
(some? (validate @input-value)))
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:navigate-to
|
||||
:confirm-address-to-watch
|
||||
{:address @input-value}])
|
||||
(clear-input))
|
||||
:container-style {:z-index 2}}
|
||||
(i18n/label :t/continue)]}
|
||||
:footer
|
||||
[quo/button
|
||||
{:customization-color customization-color
|
||||
:disabled? (or (string/blank? @input-value) (some? (validate @input-value)))
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:navigate-to
|
||||
:confirm-address-to-watch
|
||||
{:address @input-value}])
|
||||
(clear-input))
|
||||
:container-style {:z-index 2}}
|
||||
(i18n/label :t/continue)]}
|
||||
[quo/text-combinations
|
||||
{:container-style style/header-container
|
||||
:title (i18n/label :t/add-address)
|
||||
|
||||
@@ -75,14 +75,12 @@
|
||||
(let [selected-tab (reagent/atom :overview)
|
||||
on-tab-change #(reset! selected-tab %)]
|
||||
(fn []
|
||||
(let [collectible (rf/sub [:wallet/last-collectible-details])
|
||||
animation-shared-element-id (rf/sub [:animation-shared-element-id])
|
||||
(let [collectible (rf/sub [:wallet/last-collectible-details])
|
||||
{:keys [collectible-data preview-url
|
||||
collection-data id]} collectible
|
||||
token-id (:token-id id)
|
||||
collection-data]} collectible
|
||||
{collection-image :image-url
|
||||
collection-name :name} collection-data
|
||||
{collectible-name :name} collectible-data]
|
||||
collection-name :name} collection-data
|
||||
{collectible-name :name} collectible-data]
|
||||
[scroll-page/scroll-page
|
||||
{:navigate-back? true
|
||||
:height 148
|
||||
@@ -97,26 +95,9 @@
|
||||
:picture preview-url}}
|
||||
[rn/view {:style style/container}
|
||||
[rn/view {:style style/preview-container}
|
||||
[rn/touchable-opacity
|
||||
{:active-opacity 1
|
||||
:on-press #(rf/dispatch [:lightbox/navigate-to-lightbox
|
||||
token-id
|
||||
{:images [{:image preview-url
|
||||
:image-width 300 ; collectibles don't have
|
||||
; width/height but we need
|
||||
; to pass something
|
||||
:image-height 300 ; without it animation
|
||||
; doesn't work smoothly and
|
||||
; :border-radius not
|
||||
; applied
|
||||
:id token-id
|
||||
:header collectible-name
|
||||
:description collection-name}]
|
||||
:index 0}])}
|
||||
[rn/image
|
||||
{:source preview-url
|
||||
:style style/preview
|
||||
:native-ID (when (= animation-shared-element-id token-id) :shared-element)}]]]
|
||||
[rn/image
|
||||
{:source preview-url
|
||||
:style style/preview}]]
|
||||
[header collectible-name collection-name collection-image]
|
||||
[cta-buttons]
|
||||
[quo/tabs
|
||||
|
||||
@@ -178,15 +178,12 @@
|
||||
address))
|
||||
|
||||
(def id->network
|
||||
{constants/mainnet-chain-id :ethereum
|
||||
constants/goerli-chain-id :ethereum
|
||||
constants/sepolia-chain-id :ethereum
|
||||
constants/optimism-chain-id :optimism
|
||||
constants/optimism-goerli-chain-id :optimism
|
||||
constants/optimism-sepolia-chain-id :optimism
|
||||
constants/arbitrum-chain-id :arbitrum
|
||||
constants/arbitrum-goerli-chain-id :arbitrum
|
||||
constants/arbitrum-sepolia-chain-id :arbitrum})
|
||||
{constants/mainnet-chain-id :ethereum
|
||||
constants/goerli-chain-id :ethereum
|
||||
constants/optimism-chain-id :optimism
|
||||
constants/optimism-test-chain-id :optimism
|
||||
constants/arbitrum-chain-id :arbitrum
|
||||
constants/arbitrum-test-chain-id :arbitrum})
|
||||
|
||||
(defn get-standard-fiat-format
|
||||
[crypto-value currency-symbol fiat-value]
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
(:require [camel-snake-kebab.core :as csk]
|
||||
[camel-snake-kebab.extras :as cske]
|
||||
[clojure.string :as string]
|
||||
[re-frame.core :as rf]
|
||||
[taoensso.timbre :as log]
|
||||
[utils.ethereum.chain :as chain]
|
||||
[utils.re-frame :as rf]
|
||||
[utils.transforms :as types]))
|
||||
|
||||
(def collectible-data-types
|
||||
@@ -66,9 +66,8 @@
|
||||
data-type (collectible-data-types :header)
|
||||
fetch-criteria {:fetch-type (fetch-type :fetch-if-not-cached)
|
||||
:max-cache-age-seconds max-cache-age-seconds}
|
||||
chain-ids (chain/chain-ids db)
|
||||
request-params [request-id
|
||||
chain-ids
|
||||
[(chain/chain-id db)]
|
||||
(keys (get-in db [:wallet :accounts]))
|
||||
collectibles-filter
|
||||
start-at-index
|
||||
|
||||
@@ -57,7 +57,6 @@
|
||||
(h/is-truthy (h/get-by-text "0"))
|
||||
(h/is-truthy (h/get-by-text "ETH"))
|
||||
(h/is-truthy (h/get-by-text "$0.00"))
|
||||
(h/is-truthy (h/get-by-label-text :container))
|
||||
(h/is-disabled (h/get-by-label-text :button-one)))
|
||||
|
||||
(h/test "Fill token input and confirm"
|
||||
@@ -78,7 +77,6 @@
|
||||
(-> (h/wait-for #(h/get-by-text "$1234.50"))
|
||||
(.then (fn []
|
||||
(h/is-truthy (h/get-by-label-text :button-one))
|
||||
(h/is-truthy (h/get-by-label-text :container))
|
||||
(h/fire-event :press (h/get-by-label-text :button-one))
|
||||
(h/was-called on-confirm))))))
|
||||
|
||||
@@ -101,33 +99,61 @@
|
||||
(-> (h/wait-for #(h/get-by-text "$1234.50"))
|
||||
(.then (fn []
|
||||
(h/is-truthy (h/get-by-label-text :button-one))
|
||||
(h/is-truthy (h/get-by-label-text :container))
|
||||
(h/fire-event :press (h/get-by-label-text :button-one))
|
||||
(h/was-called on-confirm))))))
|
||||
|
||||
(h/test "Try to fill more than limit"
|
||||
(h/setup-subs sub-mocks)
|
||||
(h/render [input-amount/view
|
||||
{:crypto-decimals 1
|
||||
:limit-crypto 1}])
|
||||
{:crypto-decimals 10
|
||||
:limit-crypto 286}])
|
||||
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-2))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-9))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
|
||||
|
||||
(h/is-truthy (h/get-by-label-text :container-error)))
|
||||
(-> (h/wait-for #(h/is-truthy (h/get-by-text "$290.00")))
|
||||
(.then (fn []
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-backspace))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-8))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
|
||||
(h/wait-for #(h/get-by-text "$2850.00"))))))
|
||||
|
||||
(h/test "Try to fill more than limit"
|
||||
(h/setup-subs sub-mocks)
|
||||
(h/render [input-amount/view
|
||||
{:crypto-decimals 10
|
||||
:limit-crypto 286
|
||||
:on-confirm #()}])
|
||||
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-2))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-9))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
|
||||
|
||||
(-> (h/wait-for #(h/get-by-text "$290.00"))
|
||||
(.then (fn []
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-backspace))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-8))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
|
||||
(h/wait-for #(h/get-by-text "$2850.00"))))))
|
||||
|
||||
(h/test "Switch from crypto to fiat and check limit"
|
||||
(h/setup-subs sub-mocks)
|
||||
(h/render [input-amount/view
|
||||
{:crypto-decimals 1
|
||||
:limit-crypto 1
|
||||
{:crypto-decimals 2
|
||||
:limit-crypto 250
|
||||
:on-confirm #()}])
|
||||
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-9))
|
||||
(h/is-truthy (h/get-by-label-text :container-error))
|
||||
(h/fire-event :press (h/query-by-label-text :reorder))
|
||||
|
||||
(-> (h/wait-for #(h/get-by-text "Max: 1000.00 USD"))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-2))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-0))
|
||||
(-> (h/wait-for #(h/get-by-text "$200.00"))
|
||||
(.then (fn []
|
||||
(h/wait-for #(h/is-truthy (h/get-by-label-text :container))))))))
|
||||
(h/fire-event :press (h/query-by-label-text :reorder))
|
||||
(h/wait-for #(h/get-by-text "2.00 ETH"))))
|
||||
(.then (fn []
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
|
||||
(h/wait-for #(h/get-by-text "20.50 ETH"))))
|
||||
(.then (fn []
|
||||
(h/fire-event :press (h/query-by-label-text :keyboard-key-5))
|
||||
(h/wait-for #(h/get-by-text "20.50 ETH")))))))
|
||||
|
||||
@@ -61,11 +61,6 @@
|
||||
(>= (js/parseFloat balance) input-value)))
|
||||
(map first)))
|
||||
|
||||
(defn- reset-input-error
|
||||
[new-value prev-value input-error]
|
||||
(reset! input-error
|
||||
(> new-value prev-value)))
|
||||
|
||||
(defn- f-view-internal
|
||||
;; crypto-decimals and limit-crypto args are needed for component tests only
|
||||
[{:keys [crypto-decimals limit-crypto]}]
|
||||
@@ -80,7 +75,6 @@
|
||||
limit-fiat (.toFixed (* (:total-balance token) conversion-rate) 2)
|
||||
crypto-decimals (or crypto-decimals (utils/get-crypto-decimals-count token))
|
||||
input-value (reagent/atom "")
|
||||
input-error (reagent/atom false)
|
||||
current-limit (reagent/atom {:amount limit-crypto
|
||||
:currency token-symbol})
|
||||
handle-swap (fn [crypto?]
|
||||
@@ -90,30 +84,27 @@
|
||||
:currency token-symbol}
|
||||
{:amount limit-fiat
|
||||
:currency currency}))
|
||||
(reset-input-error num-value
|
||||
(:amount @current-limit)
|
||||
input-error)))
|
||||
(when (> num-value (:amount @current-limit))
|
||||
(reset! input-value ""))))
|
||||
handle-keyboard-press (fn [v]
|
||||
(let [current-value @input-value
|
||||
new-value (make-new-input current-value v)
|
||||
num-value (or (parse-double new-value) 0)
|
||||
current-limit-amount (:amount @current-limit)]
|
||||
(when (not loading-suggested-routes?)
|
||||
(let [current-value @input-value
|
||||
new-value (make-new-input current-value v)
|
||||
num-value (or (parse-double new-value) 0)]
|
||||
(when (and (not loading-suggested-routes?)
|
||||
(<= num-value (:amount @current-limit)))
|
||||
(reset! input-value new-value)
|
||||
(reset-input-error num-value current-limit-amount input-error)
|
||||
(reagent/flush))))
|
||||
handle-delete (fn [_]
|
||||
(when-not loading-suggested-routes?
|
||||
(let [current-limit-amount (:amount @current-limit)]
|
||||
(swap! input-value #(subs % 0 (dec (count %))))
|
||||
(reset-input-error @input-value current-limit-amount input-error)
|
||||
(reagent/flush))))
|
||||
(swap! input-value #(subs % 0 (dec (count %))))
|
||||
(reagent/flush)))
|
||||
handle-on-change (fn [v]
|
||||
(when (valid-input? @input-value v)
|
||||
(let [num-value (or (parse-double v) 0)
|
||||
current-limit-amount (:amount @current-limit)]
|
||||
(reset! input-value v)
|
||||
(reset-input-error num-value current-limit-amount input-error)
|
||||
(if (> num-value current-limit-amount)
|
||||
(reset! input-value (str current-limit-amount))
|
||||
(reset! input-value v))
|
||||
(reagent/flush))))]
|
||||
(fn [{:keys [on-confirm]
|
||||
:or {on-confirm #(rf/dispatch [:wallet/send-select-amount
|
||||
@@ -128,8 +119,7 @@
|
||||
(empty? @input-value)
|
||||
(<= input-num-value 0)
|
||||
(> input-num-value (:amount @current-limit)))
|
||||
amount (str @input-value " " token-symbol)
|
||||
{:keys [color]} (rf/sub [:wallet/current-viewing-account])]
|
||||
amount (str @input-value " " token-symbol)]
|
||||
(rn/use-effect
|
||||
(fn []
|
||||
(let [dismiss-keyboard-fn #(when (= % "active") (rn/dismiss-keyboard!))
|
||||
@@ -145,8 +135,7 @@
|
||||
100)))
|
||||
[@input-value])
|
||||
[rn/view
|
||||
{:style style/screen
|
||||
:accessibility-label (str "container" (when @input-error "-error"))}
|
||||
{:style style/screen}
|
||||
[account-switcher/view
|
||||
{:icon-name :i/arrow-left
|
||||
:on-press #(rf/dispatch [:navigate-back-within-stack :wallet-send-input-amount])
|
||||
@@ -156,7 +145,6 @@
|
||||
:token token-symbol
|
||||
:currency currency
|
||||
:crypto-decimals crypto-decimals
|
||||
:error? @input-error
|
||||
:networks (:networks token)
|
||||
:title (i18n/label :t/send-limit {:limit limit-label})
|
||||
:conversion conversion-rate
|
||||
@@ -171,11 +159,10 @@
|
||||
:loading-networks (find-affordable-networks token @input-value)
|
||||
:networks (:networks token)}]
|
||||
[quo/bottom-actions
|
||||
{:actions :1-action
|
||||
:button-one-label (i18n/label :t/confirm)
|
||||
:button-one-props {:disabled? confirm-disabled?
|
||||
:on-press on-confirm}
|
||||
:customization-color color}]
|
||||
{:actions :1-action
|
||||
:button-one-label (i18n/label :t/confirm)
|
||||
:button-one-props {:disabled? confirm-disabled?
|
||||
:on-press on-confirm}}]
|
||||
[quo/numbered-keyboard
|
||||
{:container-style (style/keyboard-container bottom)
|
||||
:left-action :dot
|
||||
|
||||
@@ -128,30 +128,26 @@
|
||||
(fn []
|
||||
(let [selected-tab (or (rf/sub [:wallet/send-tab]) (:id (first tabs-data)))
|
||||
token (rf/sub [:wallet/wallet-send-token])
|
||||
valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))
|
||||
{:keys [color]} (rf/sub [:wallet/current-viewing-account])]
|
||||
valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))]
|
||||
(rn/use-effect (fn []
|
||||
(fn []
|
||||
(rf/dispatch [:wallet/clean-scanned-address])
|
||||
(rf/dispatch [:wallet/clean-local-suggestions]))))
|
||||
[floating-button-page/view
|
||||
{:footer-container-padding 0
|
||||
:header [account-switcher/view
|
||||
{:on-press on-close
|
||||
:margin-top (safe-area/get-top)
|
||||
:switcher-type :select-account}]
|
||||
:footer (when (> (count @input-value) 0)
|
||||
[quo/button
|
||||
{:accessibility-label :continue-button
|
||||
:type :primary
|
||||
:disabled? (not valid-ens-or-address?)
|
||||
:on-press #(rf/dispatch [:wallet/select-send-address
|
||||
{:address @input-value
|
||||
:token token
|
||||
:stack-id
|
||||
:wallet-select-address}])
|
||||
:customization-color color}
|
||||
(i18n/label :t/continue)])}
|
||||
{:header [account-switcher/view
|
||||
{:on-press on-close
|
||||
:margin-top (safe-area/get-top)
|
||||
:switcher-type :select-account}]
|
||||
:footer (when (> (count @input-value) 0)
|
||||
[quo/button
|
||||
{:accessibility-label :continue-button
|
||||
:type :primary
|
||||
:disabled? (not valid-ens-or-address?)
|
||||
:on-press #(rf/dispatch [:wallet/select-send-address
|
||||
{:address @input-value
|
||||
:token token
|
||||
:stack-id :wallet-select-address}])}
|
||||
(i18n/label :t/continue)])}
|
||||
[quo/text-combinations
|
||||
{:title (i18n/label :t/send-to)
|
||||
:container-style style/title-container
|
||||
|
||||
@@ -162,30 +162,28 @@
|
||||
:address (utils/get-shortened-address to-address)}]
|
||||
[rn/view {:style {:flex 1}}
|
||||
[floating-button-page/view
|
||||
{:footer-container-padding 0
|
||||
:header [quo/page-nav
|
||||
{:icon-name :i/arrow-left
|
||||
:on-press on-close
|
||||
:margin-top (safe-area/get-top)
|
||||
:background :blur
|
||||
:accessibility-label :top-bar
|
||||
:right-side [{:icon-name :i/advanced
|
||||
:on-press #(js/alert
|
||||
"to be implemented")
|
||||
:accessibility-label :advanced-options}]}]
|
||||
:footer (if route
|
||||
[standard-auth/slide-button
|
||||
{:size :size-48
|
||||
:track-text (i18n/label :t/slide-to-send)
|
||||
:container-style {:z-index 2}
|
||||
:customization-color account-color
|
||||
:on-auth-success #(rf/dispatch [:wallet/send-transaction
|
||||
(security/safe-unmask-data
|
||||
%)])
|
||||
:auth-button-label (i18n/label :t/confirm)}]
|
||||
[rn/activity-indicator])
|
||||
:gradient-cover? true
|
||||
:customization-color (:color account)}
|
||||
{:header [quo/page-nav
|
||||
{:icon-name :i/arrow-left
|
||||
:on-press on-close
|
||||
:margin-top (safe-area/get-top)
|
||||
:background :blur
|
||||
:accessibility-label :top-bar
|
||||
:right-side [{:icon-name :i/advanced
|
||||
:on-press #(js/alert
|
||||
"to be implemented")
|
||||
:accessibility-label :advanced-options}]}]
|
||||
:footer (if route
|
||||
[standard-auth/slide-button
|
||||
{:size :size-48
|
||||
:track-text (i18n/label :t/slide-to-send)
|
||||
:container-style {:z-index 2}
|
||||
:customization-color account-color
|
||||
:on-auth-success #(rf/dispatch [:wallet/send-transaction
|
||||
(security/safe-unmask-data %)])
|
||||
:auth-button-label (i18n/label :t/confirm)}]
|
||||
[rn/activity-indicator])
|
||||
:gradient-cover? true
|
||||
:customization-color (:color account)}
|
||||
[rn/view
|
||||
[transaction-title
|
||||
{:token-symbol token-symbol
|
||||
|
||||
@@ -32,20 +32,19 @@
|
||||
(fn []
|
||||
(let [transaction-details (rf/sub [:wallet/send-transaction-progress])]
|
||||
[floating-button-page/view
|
||||
{:footer-container-padding 0
|
||||
:header [quo/page-nav
|
||||
{:type :no-title
|
||||
:background :blur
|
||||
:icon-name :i/close
|
||||
: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)]
|
||||
:customization-color color
|
||||
:gradient-cover? true}
|
||||
{:header [quo/page-nav
|
||||
{:type :no-title
|
||||
:background :blur
|
||||
:icon-name :i/close
|
||||
: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)]
|
||||
:customization-color color
|
||||
:gradient-cover? true}
|
||||
[rn/view {:style style/content-container}
|
||||
[rn/image
|
||||
{:source (resources/get-image :transaction-progress)
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
(:require
|
||||
[legacy.status-im.ui.screens.screens :as old-screens]
|
||||
[status-im.common.emoji-picker.view :as emoji-picker]
|
||||
[status-im.common.lightbox.view :as lightbox]
|
||||
[status-im.config :as config]
|
||||
[status-im.contexts.chat.group-details.view :as group-details]
|
||||
[status-im.contexts.chat.home.add-new-contact.scan.scan-profile-qr-page :as scan-profile-qr-page]
|
||||
[status-im.contexts.chat.home.add-new-contact.views :as add-new-contact]
|
||||
[status-im.contexts.chat.home.new-chat.view :as new-chat]
|
||||
[status-im.contexts.chat.messenger.camera.view :as camera-screen]
|
||||
[status-im.contexts.chat.messenger.lightbox.view :as lightbox]
|
||||
[status-im.contexts.chat.messenger.messages.view :as chat]
|
||||
[status-im.contexts.chat.messenger.photo-selector.view :as photo-selector]
|
||||
[status-im.contexts.communities.actions.accounts-selection.view :as communities.accounts-selection]
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
;;view
|
||||
(reg-root-key-sub :view-id :view-id)
|
||||
(reg-root-key-sub :screen-params :navigation/screen-params)
|
||||
(reg-root-key-sub :animation-shared-element-id :animation-shared-element-id)
|
||||
(reg-root-key-sub :shared-element-id :shared-element-id)
|
||||
|
||||
;;bottom sheet
|
||||
(reg-root-key-sub :bottom-sheet :bottom-sheet)
|
||||
|
||||
@@ -12,17 +12,14 @@
|
||||
:short-name "eth"
|
||||
:network-name :ethereum
|
||||
:related-chain-id 1
|
||||
:chain-id 3
|
||||
:layer 1}
|
||||
{:test? true
|
||||
:short-name "arb1"
|
||||
:related-chain-id 42161
|
||||
:chain-id 4
|
||||
:layer 2}
|
||||
{:test? true
|
||||
:short-name "opt"
|
||||
:related-chain-id 10
|
||||
:chain-id 5
|
||||
:layer 2}]
|
||||
:prod [{:test? false
|
||||
:short-name "eth"
|
||||
|
||||
@@ -84,10 +84,3 @@
|
||||
(defn chain-id
|
||||
[db]
|
||||
(network->chain-id (get-current-network db)))
|
||||
|
||||
(defn chain-ids
|
||||
[db]
|
||||
(let [test-networks-enabled? (get-in db [:profile/profile :test-networks-enabled?])
|
||||
networks (get-in db [:wallet :networks])
|
||||
env-networks (get networks (if test-networks-enabled? :test :prod))]
|
||||
(map :chain-id env-networks)))
|
||||
|
||||
@@ -3,21 +3,7 @@
|
||||
[cljs.test :refer-macros [deftest is]]
|
||||
[utils.ethereum.chain :as chain]))
|
||||
|
||||
(defn chain-ids-db
|
||||
[test-networks-enabled?]
|
||||
{:profile/profile {:test-networks-enabled? test-networks-enabled?}
|
||||
:wallet {:networks {:test [{:chain-id 3}
|
||||
{:chain-id 4}
|
||||
{:chain-id 5}]
|
||||
:prod [{:chain-id 1}
|
||||
{:chain-id 42161}
|
||||
{:chain-id 10}]}}})
|
||||
|
||||
(deftest chain-id->chain-keyword
|
||||
(is (= (chain/chain-id->chain-keyword 1) :mainnet))
|
||||
(is (= (chain/chain-id->chain-keyword 5) :goerli))
|
||||
(is (= (chain/chain-id->chain-keyword 5777) :custom)))
|
||||
|
||||
(deftest chain-ids
|
||||
(is (= (chain/chain-ids (chain-ids-db false)) [1 42161 10]))
|
||||
(is (= (chain/chain-ids (chain-ids-db true)) [3 4 5])))
|
||||
|
||||
Reference in New Issue
Block a user