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

Quo2 Wallet: Network Link (#17049) 

* Quo2 Wallet: Network Link component
This commit is contained in:
Omar Basem 2023-08-23 12:53:45 +04:00 committed by GitHub
parent 8fe7fad540
commit e0f83384a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 161 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/mocks/js_dependencies.cljs
View File

@ -147,6 +147,8 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
: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

85
src/quo2/components/wallet/network_link/view.cljs Normal file
View File

@ -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))

2
src/quo2/core.cljs
View File

@ -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)

2
src/react_native/svg.cljs
View File

@ -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))

3
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -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

50
src/status_im2/contexts/quo_preview/wallet/network_link.cljs Normal file
View File

@ -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]]])))