diff --git a/src/quo/components/wallet/network_link/view.cljs b/src/quo/components/wallet/network_link/view.cljs index 2c59d3d492..2b9f56a53d 100644 --- a/src/quo/components/wallet/network_link/view.cljs +++ b/src/quo/components/wallet/network_link/view.cljs @@ -8,7 +8,6 @@ [quo.theme :as quo.theme] [react-native.core :as rn] [react-native.svg :as svg] - [reagent.core :as reagent] [schema.core :as schema])) (defn- circle @@ -36,116 +35,117 @@ :stroke-width "1"}]]) (defn link-linear - [] - (let [container-width (reagent/atom 100)] - (fn [{:keys [source theme]}] - (let [stroke-color (colors/resolve-color source theme) - fill-color (colors/theme-colors colors/white colors/neutral-90 theme)] - [rn/view - {:style style/link-linear-container - :on-layout (fn [e] - (reset! container-width - (oget e :nativeEvent :layout :width)))} - [line stroke-color @container-width] - [rn/view {:style style/left-circle-container} - [circle fill-color stroke-color]] - [rn/view {:style style/right-circle-container} - [circle fill-color stroke-color]]])))) + [{:keys [source theme]}] + (let [[container-width + set-container-width] (rn/use-state 100) + stroke-color (colors/resolve-color source theme) + fill-color (colors/theme-colors colors/white colors/neutral-90 theme) + on-layout (rn/use-callback #(set-container-width + (oget % :nativeEvent :layout :width)))] + [rn/view + {:style style/link-linear-container + :on-layout on-layout} + [line stroke-color container-width] + [rn/view {:style style/left-circle-container} + [circle fill-color stroke-color]] + [rn/view {:style style/right-circle-container} + [circle fill-color stroke-color]]])) (defn link-1x - [] - (let [container-width (reagent/atom 100) - stroke-color "url(#gradient)"] - (fn [{:keys [source destination theme]}] - (let [source-color (colors/resolve-color source theme) - destination-color (colors/resolve-color destination theme) - fill-color (colors/theme-colors colors/white colors/neutral-90 theme) - view-box (str "0 0 " @container-width " 58") - side-lines-path (helpers/calculate-side-lines-path-1x @container-width) - central-transform (helpers/calculate-transform @container-width)] - [rn/view - {:style style/link-1x-container - :on-layout (fn [e] - (reset! container-width - (oget e :nativeEvent :layout :width)))} - [svg/svg - {:xmlns "http://www.w3.org/2000/svg" - :height "100%" - :width "100%" - :view-box view-box - :fill :none} - [svg/path - {:d (:left side-lines-path) - :stroke source-color}] - [svg/path - {: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" - :transform central-transform - :stroke stroke-color}] - [svg/path - {:d (:right side-lines-path) - :stroke destination-color}] - [svg/defs - [svg/linear-gradient - {:id "gradient" - :x1 "72.271" - :x2 "82.385" - :y1 "5" - :y2 "34.155" - :gradient-units "userSpaceOnUse"} - [svg/stop {:stop-color (colors/resolve-color destination theme)}] - [svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]] - [rn/view {:style style/bottom-left-circle-container} - [circle fill-color source-color]] - [rn/view {:style style/top-right-circle-container} - [circle fill-color destination-color]]])))) + [{:keys [source destination theme]}] + (let [[container-width + set-container-width] (rn/use-state 100) + stroke-color "url(#gradient)" + source-color (colors/resolve-color source theme) + destination-color (colors/resolve-color destination theme) + fill-color (colors/theme-colors colors/white colors/neutral-90 theme) + view-box (str "0 0 " container-width " 58") + side-lines-path (helpers/calculate-side-lines-path-1x container-width) + central-transform (helpers/calculate-transform container-width) + on-layout (rn/use-callback #(set-container-width + (oget % :nativeEvent :layout :width)))] + [rn/view + {:style style/link-1x-container + :on-layout on-layout} + [svg/svg + {:xmlns "http://www.w3.org/2000/svg" + :height "100%" + :width "100%" + :view-box view-box + :fill :none} + [svg/path + {:d (:left side-lines-path) + :stroke source-color}] + [svg/path + {: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" + :transform central-transform + :stroke stroke-color}] + [svg/path + {:d (:right side-lines-path) + :stroke destination-color}] + [svg/defs + [svg/linear-gradient + {:id "gradient" + :x1 "72.271" + :x2 "82.385" + :y1 "5" + :y2 "34.155" + :gradient-units "userSpaceOnUse"} + [svg/stop {:stop-color (colors/resolve-color destination theme)}] + [svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]] + [rn/view {:style style/bottom-left-circle-container} + [circle fill-color source-color]] + [rn/view {:style style/top-right-circle-container} + [circle fill-color destination-color]]])) (defn link-2x - [] - (let [container-width (reagent/atom 100) - stroke-color "url(#gradient)"] - (fn [{:keys [source destination theme]}] - (let [source-color (colors/resolve-color source theme) - destination-color (colors/resolve-color destination theme) - fill-color (colors/theme-colors colors/white colors/neutral-90 theme) - view-box (str "0 0 " @container-width " 114") - side-lines-path (helpers/calculate-side-lines-path-2x @container-width) - central-transform (helpers/calculate-transform @container-width)] - [rn/view - {:style style/link-2x-container - :on-layout #(reset! container-width - (oget % :nativeEvent :layout :width))} - [svg/svg - {:xmlns "http://www.w3.org/2000/svg" - :height "100%" - :width "100%" - :view-box view-box - :fill :none} - [svg/path - {:d (:left side-lines-path) - :stroke source-color}] - [svg/path - {:d - "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" - :transform central-transform - :stroke stroke-color}] - [svg/path - {:d (:right side-lines-path) - :stroke destination-color}] - [svg/defs - [svg/linear-gradient - {:id "gradient" - :x1 "72.2711" - :y1 "5.00001" - :x2 "102.867" - :y2 "49.0993" - :gradient-units "userSpaceOnUse"} - [svg/stop {:stop-color (colors/resolve-color destination theme)}] - [svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]] - [rn/view {:style style/bottom-left-circle-container} - [circle fill-color source-color]] - [rn/view {:style style/top-right-circle-container} - [circle fill-color destination-color]]])))) + [{:keys [source destination theme]}] + (let [[container-width + set-container-width] (rn/use-state 100) + stroke-color "url(#gradient)" + source-color (colors/resolve-color source theme) + destination-color (colors/resolve-color destination theme) + fill-color (colors/theme-colors colors/white colors/neutral-90 theme) + view-box (str "0 0 " container-width " 114") + side-lines-path (helpers/calculate-side-lines-path-2x container-width) + central-transform (helpers/calculate-transform container-width) + on-layout (rn/use-callback #(set-container-width + (oget % :nativeEvent :layout :width)))] + [rn/view + {:style style/link-2x-container + :on-layout on-layout} + [svg/svg + {:xmlns "http://www.w3.org/2000/svg" + :height "100%" + :width "100%" + :view-box view-box + :fill :none} + [svg/path + {:d (:left side-lines-path) + :stroke source-color}] + [svg/path + {:d + "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" + :transform central-transform + :stroke stroke-color}] + [svg/path + {:d (:right side-lines-path) + :stroke destination-color}] + [svg/defs + [svg/linear-gradient + {:id "gradient" + :x1 "72.2711" + :y1 "5.00001" + :x2 "102.867" + :y2 "49.0993" + :gradient-units "userSpaceOnUse"} + [svg/stop {:stop-color (colors/resolve-color destination theme)}] + [svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]] + [rn/view {:style style/bottom-left-circle-container} + [circle fill-color source-color]] + [rn/view {:style style/top-right-circle-container} + [circle fill-color destination-color]]])) (defn- view-internal [{:keys [shape container-style] :as props}]