From e0f83384a2a36db0f131298a3b6468691aa4ea68 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Wed, 23 Aug 2023 12:53:45 +0400 Subject: [PATCH] Quo2 Wallet: Network Link (#17049) * Quo2 Wallet: Network Link component --- src/mocks/js_dependencies.cljs | 36 ++++---- .../components/wallet/network_link/view.cljs | 85 +++++++++++++++++++ src/quo2/core.cljs | 2 + src/react_native/svg.cljs | 2 + src/status_im2/contexts/quo_preview/main.cljs | 3 + .../quo_preview/wallet/network_link.cljs | 50 +++++++++++ 6 files changed, 161 insertions(+), 17 deletions(-) create mode 100644 src/quo2/components/wallet/network_link/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/wallet/network_link.cljs diff --git a/src/mocks/js_dependencies.cljs b/src/mocks/js_dependencies.cljs index 96f91c7db3..3ac358c2cf 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -10,14 +10,14 @@ ;; (-> reanimated/slide-out-up-animation (.damping 20) .springify (.stiffness 300)) (js/eval " -var globalThis -if (typeof window === \"undefined\") { - globalThis = global -} else { - globalThis = window -} -globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return () => globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__}}) -") + var globalThis + if (typeof window === \"undefined\") { + globalThis = global + } else { + globalThis = window + } + globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return () => globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__}}) + ") (def action-button #js {:default #js {:Item #js {}}}) (def config #js {:default #js {}}) @@ -139,15 +139,17 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return ( (def react-native-share #js {:default {}}) (def react-native-svg #js - {:ClipPath #js {:render identity} - :Circle #js {:render identity} - :Defs #js {:render identity} - :G #js {:render identity} - :Path #js {:render identity} - :Rect #js {:render identity} - :SvgUri #js {:render identity} - :SvgXml #js {:render identity} - :default #js {:render identity}}) + {:ClipPath #js {:render identity} + :Circle #js {:render identity} + :Defs #js {:render identity} + :G #js {:render identity} + :Path #js {:render identity} + :Rect #js {:render identity} + :SvgUri #js {:render identity} + :SvgXml #js {:render identity} + :LinearGradient #js {:render identity} + :Stop #js {:render identity} + :default #js {:render identity}}) (def react-native-webview #js {:default {}}) (def react-native-audio-toolkit #js diff --git a/src/quo2/components/wallet/network_link/view.cljs b/src/quo2/components/wallet/network_link/view.cljs new file mode 100644 index 0000000000..1da4858b18 --- /dev/null +++ b/src/quo2/components/wallet/network_link/view.cljs @@ -0,0 +1,85 @@ +(ns quo2.components.wallet.network-link.view + (:require + [quo2.foundations.colors :as colors] + [quo2.theme :as quo.theme] + [react-native.svg :as svg])) + +(defn link-linear + [{:keys [source theme]}] + [svg/svg {:xmlns "http://www.w3.org/2000/svg" :width "73" :height "10" :fill :none} + [svg/path {:stroke (get colors/networks source) :d "M68 5H5"}] + [svg/circle + {:cx "68" + :cy "5" + :r "4" + :fill (colors/theme-colors colors/white colors/neutral-90 theme) + :stroke (get colors/networks source)}] + [svg/circle + {:cx "5" + :cy "5" + :r "4" + :fill (colors/theme-colors colors/white colors/neutral-90 theme) + :stroke (get colors/networks source)}]]) + +(defn link-1x + [{:keys [source destination theme]}] + [svg/svg {:xmlns "http://www.w3.org/2000/svg" :width "73" :height "66" :fill :none} + [svg/path + {:stroke "url(#gradient)" :d "M68 5h-9.364c-11.046 0-20 8.954-20 20v16c0 11.046-8.955 20-20 20H5"}] + [svg/circle + {:cx "68" + :cy "5" + :r "4" + :fill (colors/theme-colors colors/white colors/neutral-90 theme) + :stroke (get colors/networks destination)}] + [svg/circle + {:cx "5" + :cy "61" + :r "4" + :fill (colors/theme-colors colors/white colors/neutral-90 theme) + :stroke (get colors/networks source)}] + [svg/defs + [svg/linear-gradient + {:id "gradient" :x1 "72.271" :x2 "82.385" :y1 "5" :y2 "34.155" :gradientUnits "userSpaceOnUse"} + [svg/stop {:stopColor (get colors/networks destination)}] + [svg/stop {:offset "1" :stopColor (get colors/networks source)}]]]]) + +(defn link-2x + [{:keys [source destination theme]}] + [svg/svg + {:width "73" :height "122" :viewBox "0 0 73 122" :fill "none" :xmlns "http://www.w3.org/2000/svg"} + [svg/path + {:d + "M67.9999 5L58.6356 5C47.5899 5 38.6356 13.9543 38.6356 25L38.6356 97C38.6356 108.046 29.6813 117 18.6356 117L5.00006 117" + :stroke "url(#gradient)"}] + [svg/circle + {:cx "68" + :cy "5" + :r "4" + :fill (colors/theme-colors colors/white colors/neutral-90 theme) + :stroke (get colors/networks destination)}] + [svg/circle + {:cx "5" + :cy "117" + :r "4" + :fill (colors/theme-colors colors/white colors/neutral-90 theme) + :stroke (get colors/networks source)}] + [svg/defs + [svg/linear-gradient + {:id "gradient" + :x1 "72.2711" + :y1 "5.00001" + :x2 "102.867" + :y2 "49.0993" + :gradientUnits "userSpaceOnUse"} + [svg/stop {:stop-color (get colors/networks destination)}] + [svg/stop {:offset "1" :stop-color (get colors/networks source)}]]]]) + +(defn- view-internal + [{:keys [shape] :as props}] + (case shape + :linear [link-linear props] + :1x [link-1x props] + :2x [link-2x props])) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index b261c6be4f..e8d6afebc3 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -114,6 +114,7 @@ quo2.components.wallet.keypair.view quo2.components.wallet.network-amount.view quo2.components.wallet.network-bridge.view + quo2.components.wallet.network-link.view quo2.components.wallet.progress-bar.view quo2.components.wallet.summary-info.view quo2.components.wallet.token-input.view @@ -323,5 +324,6 @@ (def network-bridge quo2.components.wallet.network-bridge.view/view) (def progress-bar quo2.components.wallet.progress-bar.view/view) (def summary-info quo2.components.wallet.summary-info.view/view) +(def network-link quo2.components.wallet.network-link.view/view) (def token-input quo2.components.wallet.token-input.view/view) (def wallet-overview quo2.components.wallet.wallet-overview.view/view) diff --git a/src/react_native/svg.cljs b/src/react_native/svg.cljs index 995abb56af..e8d6bb8238 100644 --- a/src/react_native/svg.cljs +++ b/src/react_native/svg.cljs @@ -10,3 +10,5 @@ (def circle (reagent/adapt-react-class Svg/Circle)) (def svgxml (reagent/adapt-react-class Svg/SvgXml)) (def g (reagent/adapt-react-class Svg/G)) +(def linear-gradient (reagent/adapt-react-class Svg/LinearGradient)) +(def stop (reagent/adapt-react-class Svg/Stop)) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index cc46901f08..722c000c8d 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -115,6 +115,7 @@ [status-im2.contexts.quo-preview.wallet.keypair :as keypair] [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge] + [status-im2.contexts.quo-preview.wallet.network-link :as network-link] [status-im2.contexts.quo-preview.wallet.progress-bar :as progress-bar] [status-im2.contexts.quo-preview.wallet.summary-info :as summary-info] [status-im2.contexts.quo-preview.wallet.token-input :as token-input] @@ -345,6 +346,8 @@ :component network-amount/preview} {:name :network-bridge :component network-bridge/preview} + {:name :network-link + :component network-link/preview} {:name :progress-bar :component progress-bar/preview} {:name :summary-info diff --git a/src/status_im2/contexts/quo_preview/wallet/network_link.cljs b/src/status_im2/contexts/quo_preview/wallet/network_link.cljs new file mode 100644 index 0000000000..dec720ab5b --- /dev/null +++ b/src/status_im2/contexts/quo_preview/wallet/network_link.cljs @@ -0,0 +1,50 @@ +(ns status-im2.contexts.quo-preview.wallet.network-link + (:require + [quo2.core :as quo] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def networks + [{:key :ethereum + :value "Ethereum"} + {:key :optimism + :value "Optimism"} + {:key :arbitrum + :vault "Arbitrum"}]) + +(def descriptor + [{:label "Shape:" + :key :shape + :type :select + :options [{:key :linear + :value "Linear"} + {:key :1x + :value "1x"} + {:key :2x + :value "2x"}]} + {:label "Source:" + :key :source + :type :select + :options networks} + {:label "Destination:" + :key :destination + :type :select + :options networks}]) + +(defn preview + [] + (let [state (reagent/atom {:shape :linear + :source :ethereum + :destination :optimism})] + (fn [] + [rn/view + {:style {:flex 1 + :padding-horizontal 20}} + [rn/view {:style {:min-height 150}} + [preview/customizer state descriptor]] + [rn/view + {:style {:flex 1 + :padding-top 40 + :align-items :center}} + [quo/network-link @state]]])))