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

replace ratom in quo wallet component (#19687)

This commit is contained in:
flexsurfer 2024-04-17 14:30:33 +02:00 committed by GitHub
parent 549efdb77c
commit 570c62e30e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 107 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
src/quo/components/wallet/network_link/view.cljs
View File

@ -8,7 +8,6 @@
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.svg :as svg] [react-native.svg :as svg]
[reagent.core :as reagent]
[schema.core :as schema])) [schema.core :as schema]))
(defn- circle (defn- circle
@ -36,116 +35,117 @@
:stroke-width "1"}]]) :stroke-width "1"}]])
(defn link-linear (defn link-linear
[] [{:keys [source theme]}]
(let [container-width (reagent/atom 100)] (let [[container-width
(fn [{:keys [source theme]}] set-container-width] (rn/use-state 100)
(let [stroke-color (colors/resolve-color source theme) stroke-color (colors/resolve-color source theme)
fill-color (colors/theme-colors colors/white colors/neutral-90 theme)] fill-color (colors/theme-colors colors/white colors/neutral-90 theme)
[rn/view on-layout (rn/use-callback #(set-container-width
{:style style/link-linear-container (oget % :nativeEvent :layout :width)))]
:on-layout (fn [e] [rn/view
(reset! container-width {:style style/link-linear-container
(oget e :nativeEvent :layout :width)))} :on-layout on-layout}
[line stroke-color @container-width] [line stroke-color container-width]
[rn/view {:style style/left-circle-container} [rn/view {:style style/left-circle-container}
[circle fill-color stroke-color]] [circle fill-color stroke-color]]
[rn/view {:style style/right-circle-container} [rn/view {:style style/right-circle-container}
[circle fill-color stroke-color]]])))) [circle fill-color stroke-color]]]))
(defn link-1x (defn link-1x
[] [{:keys [source destination theme]}]
(let [container-width (reagent/atom 100) (let [[container-width
stroke-color "url(#gradient)"] set-container-width] (rn/use-state 100)
(fn [{:keys [source destination theme]}] stroke-color "url(#gradient)"
(let [source-color (colors/resolve-color source theme) source-color (colors/resolve-color source theme)
destination-color (colors/resolve-color destination theme) destination-color (colors/resolve-color destination theme)
fill-color (colors/theme-colors colors/white colors/neutral-90 theme) fill-color (colors/theme-colors colors/white colors/neutral-90 theme)
view-box (str "0 0 " @container-width " 58") view-box (str "0 0 " container-width " 58")
side-lines-path (helpers/calculate-side-lines-path-1x @container-width) side-lines-path (helpers/calculate-side-lines-path-1x container-width)
central-transform (helpers/calculate-transform @container-width)] central-transform (helpers/calculate-transform container-width)
[rn/view on-layout (rn/use-callback #(set-container-width
{:style style/link-1x-container (oget % :nativeEvent :layout :width)))]
:on-layout (fn [e] [rn/view
(reset! container-width {:style style/link-1x-container
(oget e :nativeEvent :layout :width)))} :on-layout on-layout}
[svg/svg [svg/svg
{:xmlns "http://www.w3.org/2000/svg" {:xmlns "http://www.w3.org/2000/svg"
:height "100%" :height "100%"
:width "100%" :width "100%"
:view-box view-box :view-box view-box
:fill :none} :fill :none}
[svg/path [svg/path
{:d (:left side-lines-path) {:d (:left side-lines-path)
:stroke source-color}] :stroke source-color}]
[svg/path [svg/path
{:d {:d
"M63 1L53.6356 1C42.5899 1 33.6356 9.9543 33.6356 21L33.6356 37C33.6356 48.0457 24.6813 57 13.6356 57L2.85889e-05 57" "M63 1L53.6356 1C42.5899 1 33.6356 9.9543 33.6356 21L33.6356 37C33.6356 48.0457 24.6813 57 13.6356 57L2.85889e-05 57"
:transform central-transform :transform central-transform
:stroke stroke-color}] :stroke stroke-color}]
[svg/path [svg/path
{:d (:right side-lines-path) {:d (:right side-lines-path)
:stroke destination-color}] :stroke destination-color}]
[svg/defs [svg/defs
[svg/linear-gradient [svg/linear-gradient
{:id "gradient" {:id "gradient"
:x1 "72.271" :x1 "72.271"
:x2 "82.385" :x2 "82.385"
:y1 "5" :y1 "5"
:y2 "34.155" :y2 "34.155"
:gradient-units "userSpaceOnUse"} :gradient-units "userSpaceOnUse"}
[svg/stop {:stop-color (colors/resolve-color destination theme)}] [svg/stop {:stop-color (colors/resolve-color destination theme)}]
[svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]] [svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]]
[rn/view {:style style/bottom-left-circle-container} [rn/view {:style style/bottom-left-circle-container}
[circle fill-color source-color]] [circle fill-color source-color]]
[rn/view {:style style/top-right-circle-container} [rn/view {:style style/top-right-circle-container}
[circle fill-color destination-color]]])))) [circle fill-color destination-color]]]))
(defn link-2x (defn link-2x
[] [{:keys [source destination theme]}]
(let [container-width (reagent/atom 100) (let [[container-width
stroke-color "url(#gradient)"] set-container-width] (rn/use-state 100)
(fn [{:keys [source destination theme]}] stroke-color "url(#gradient)"
(let [source-color (colors/resolve-color source theme) source-color (colors/resolve-color source theme)
destination-color (colors/resolve-color destination theme) destination-color (colors/resolve-color destination theme)
fill-color (colors/theme-colors colors/white colors/neutral-90 theme) fill-color (colors/theme-colors colors/white colors/neutral-90 theme)
view-box (str "0 0 " @container-width " 114") view-box (str "0 0 " container-width " 114")
side-lines-path (helpers/calculate-side-lines-path-2x @container-width) side-lines-path (helpers/calculate-side-lines-path-2x container-width)
central-transform (helpers/calculate-transform @container-width)] central-transform (helpers/calculate-transform container-width)
[rn/view on-layout (rn/use-callback #(set-container-width
{:style style/link-2x-container (oget % :nativeEvent :layout :width)))]
:on-layout #(reset! container-width [rn/view
(oget % :nativeEvent :layout :width))} {:style style/link-2x-container
[svg/svg :on-layout on-layout}
{:xmlns "http://www.w3.org/2000/svg" [svg/svg
:height "100%" {:xmlns "http://www.w3.org/2000/svg"
:width "100%" :height "100%"
:view-box view-box :width "100%"
:fill :none} :view-box view-box
[svg/path :fill :none}
{:d (:left side-lines-path) [svg/path
:stroke source-color}] {:d (:left side-lines-path)
[svg/path :stroke source-color}]
{:d [svg/path
"M62.9999 1L53.6356 1C42.5899 1 33.6356 9.9543 33.6356 21L33.6356 93C33.6356 104.046 24.6813 113 13.6356 113L5.71778e-05 113" {:d
:transform central-transform "M62.9999 1L53.6356 1C42.5899 1 33.6356 9.9543 33.6356 21L33.6356 93C33.6356 104.046 24.6813 113 13.6356 113L5.71778e-05 113"
:stroke stroke-color}] :transform central-transform
[svg/path :stroke stroke-color}]
{:d (:right side-lines-path) [svg/path
:stroke destination-color}] {:d (:right side-lines-path)
[svg/defs :stroke destination-color}]
[svg/linear-gradient [svg/defs
{:id "gradient" [svg/linear-gradient
:x1 "72.2711" {:id "gradient"
:y1 "5.00001" :x1 "72.2711"
:x2 "102.867" :y1 "5.00001"
:y2 "49.0993" :x2 "102.867"
:gradient-units "userSpaceOnUse"} :y2 "49.0993"
[svg/stop {:stop-color (colors/resolve-color destination theme)}] :gradient-units "userSpaceOnUse"}
[svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]] [svg/stop {:stop-color (colors/resolve-color destination theme)}]
[rn/view {:style style/bottom-left-circle-container} [svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]]
[circle fill-color source-color]] [rn/view {:style style/bottom-left-circle-container}
[rn/view {:style style/top-right-circle-container} [circle fill-color source-color]]
[circle fill-color destination-color]]])))) [rn/view {:style style/top-right-circle-container}
[circle fill-color destination-color]]]))
(defn- view-internal (defn- view-internal
[{:keys [shape container-style] :as props}] [{:keys [shape container-style] :as props}]