-
Notifications
You must be signed in to change notification settings - Fork 984
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Quo2 Wallet: network bridge (#16793)
* feat: quo2 network bridge
- Loading branch information
Showing
16 changed files
with
201 additions
and
6 deletions.
There are no files selected for viewing
File renamed without changes
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions
39
src/quo2/components/wallet/network_bridge/component_spec.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
(ns quo2.components.wallet.network-bridge.component-spec | ||
(:require [test-helpers.component :as h] | ||
[quo2.components.wallet.network-bridge.view :as network-bridge])) | ||
|
||
(h/describe "Wallet: Network Bridge" | ||
(h/test "Amount renders" | ||
(h/render [network-bridge/view | ||
{:amount "50 SNT" | ||
:network :ethereum | ||
:status :default}]) | ||
(h/is-truthy (h/get-by-text "50 SNT"))) | ||
|
||
(h/test "Network label renders" | ||
(h/render [network-bridge/view | ||
{:amount "50 SNT" | ||
:network :optimism | ||
:status :default}]) | ||
(h/is-truthy (h/get-by-text "Optimism"))) | ||
|
||
(h/test "Locked state" | ||
(h/render [network-bridge/view | ||
{:amount "50 SNT" | ||
:network :optimism | ||
:status :locked}]) | ||
(h/is-truthy (h/get-by-label-text :lock))) | ||
|
||
(h/test "Loading state" | ||
(h/render [network-bridge/view | ||
{:amount "50 SNT" | ||
:network :optimism | ||
:status :loading}]) | ||
(h/is-truthy (h/get-by-label-text :loading))) | ||
|
||
(h/test "Disabled state" | ||
(h/render [network-bridge/view | ||
{:amount "50 SNT" | ||
:network :optimism | ||
:status :disabled}]) | ||
(h/has-style (h/get-by-label-text :container) {:opacity 0.3}))) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
(ns quo2.components.wallet.network-bridge.style | ||
(:require [quo2.foundations.colors :as colors])) | ||
|
||
(defn container | ||
[network state] | ||
{:width 136 | ||
:height 44 | ||
:border-width 1 | ||
:border-radius 12 | ||
:padding-vertical 5 | ||
:padding-horizontal 8 | ||
:border-color (get colors/networks network) | ||
:opacity (when (= state :disabled) 0.3)}) | ||
|
||
(defn add-container | ||
[] | ||
{:border-style :dashed | ||
:border-color (colors/theme-colors colors/neutral-30 colors/neutral-70) | ||
:justify-content :center | ||
:align-items :center | ||
:padding-vertical 0 | ||
:padding-horizontal 0}) | ||
|
||
(defn loading-skeleton | ||
[theme] | ||
{:width 32 | ||
:height 10 | ||
:border-radius 3 | ||
:margin-vertical 4 | ||
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)}) | ||
|
||
(def network-icon | ||
{:width 12 | ||
:height 12 | ||
:margin-right 4}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
(ns quo2.components.wallet.network-bridge.view | ||
(:require | ||
[clojure.string :as string] | ||
[quo2.components.icon :as icon] | ||
[quo2.components.markdown.text :as text] | ||
[quo2.foundations.colors :as colors] | ||
[quo2.foundations.resources :as resources] | ||
[quo2.theme :as quo.theme] | ||
[react-native.core :as rn] | ||
[quo2.components.wallet.network-bridge.style :as style])) | ||
|
||
|
||
(defn network-bridge-add | ||
[{:keys [network state]}] | ||
[rn/view {:style (merge (style/container network state) (style/add-container))} | ||
[icon/icon :i/add-circle {:size 12 :no-color true}]]) | ||
|
||
(defn view-internal | ||
[{:keys [theme network status amount] :as args}] | ||
(let [network-text (if (= network :ethereum) "Mainnet" (string/capitalize (name network)))] | ||
(if (= status :add) | ||
[network-bridge-add args] | ||
[rn/view | ||
{:style (style/container network status) | ||
:accessible true | ||
:accessibility-label :container} | ||
(if (= status :loading) | ||
[rn/view | ||
{:style (style/loading-skeleton theme) | ||
:accessible true | ||
:accessibility-label :loading}] | ||
[rn/view | ||
{:style {:flex-direction :row | ||
:justify-content :space-between}} | ||
[text/text | ||
{:size :paragraph-2 | ||
:weight :medium} amount] | ||
(when (= status :locked) | ||
[icon/icon :i/locked | ||
{:size 12 | ||
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) | ||
:accessible true | ||
:accessibility-label :lock}])]) | ||
[rn/view | ||
{:style {:flex-direction :row | ||
:align-items :center}} | ||
[rn/image | ||
{:source (resources/networks network) | ||
:style style/network-icon}] | ||
[text/text | ||
{:size :label | ||
:weight :medium | ||
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} | ||
network-text]]]))) | ||
|
||
(def view (quo.theme/with-theme view-internal)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
src/status_im2/contexts/quo_preview/wallet/network_bridge.cljs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
(ns status-im2.contexts.quo-preview.wallet.network-bridge | ||
(:require | ||
[quo2.core :as quo] | ||
[react-native.core :as rn] | ||
[reagent.core :as reagent] | ||
[status-im2.contexts.quo-preview.preview :as preview])) | ||
|
||
|
||
(def descriptor | ||
[{:label "Network:" | ||
:key :network | ||
:type :select | ||
:options [{:key :ethereum | ||
:value "Ethereum"} | ||
{:key :optimism | ||
:value "Optimism"} | ||
{:key :arbitrum | ||
:value "Arbitrum"}]} | ||
{:label "Status:" | ||
:key :status | ||
:type :select | ||
:options [{:key :default :value :default} | ||
{:key :locked :value :locked} | ||
{:key :loading :value :loading} | ||
{:key :disabled :value :disabled} | ||
{:key :add :value :add}]}]) | ||
|
||
(defn preview | ||
[] | ||
(let [state (reagent/atom {:network :ethereum | ||
:status :default | ||
:amount "50 SNT"})] | ||
(fn [] | ||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} | ||
[rn/view | ||
{:style {:flex 1 | ||
:padding-horizontal 20}} | ||
[rn/view {:style {:min-height 150}} [preview/customizer state descriptor]] | ||
[rn/view | ||
{:style {:flex 1 | ||
:margin-top 50 | ||
:align-items :center}} [quo/network-bridge @state]]]]))) |