MyCrypto/common/components/ui/SwapDropdown.scss
Eddie Wang 88532cdc3c Shapeshift Integration (#564)
* progress

* Normalize bity api response

* Filter api response

* Track swap information in component state

* Update dropdown onchange

* remove dead code

* Update Min Max Validation

* Update minmax err msg && fix onChangeOriginKind

* Add origin & destination to redux state

* Update types & Update tests

* Update types

* Update swap.spec.ts test

* Remove commented out code

* Remove hardcoded coin array

* Create types.ts for swap reducer

* Update swapinput type

* Update bityRates in localStorage & Replace all instances of ...Kind / ...Amount props

* Add shapeshift banner

* initial work for sagas

* Update Types

* Update swap reducer initial state

* Update Types & Store empty obj for bityRates / options

* Update more types

* added shapeshift file and rates comments

* action reducers and prop mapping to components

* add typings and swap icon

* more actions reducers and sagas

* debugging shapeshift service

* add Headers

* Fix content type

* add order reset saga and ui fixes

* remove console log and swap b/w Bity and Shapeshift

* working state for Shapeshift and Bity - tested with mainnet

* add icon component

* UI improvements and fix select bug

* fix timer bug

* add bity fallback options and toFixed floats

* tslint errors

* add arrow to dropdown and add support footer

* Add service provider

* fix minor $ bug and stop timer on order complete

* better load UX and dropdown UX

* fixed single test

* currRate prop bugs and reduce LS bloat

* takeEvery on timer saga and don't clear state.options to restartSwap reducer

* export tx sagas and fix minor type

* Add ShapeShift Rates functionality when selecting a ShapeShift pair.

* type fixes

* BugFix: Don't change displayed ShapeShift Rate Inputs on every dropdown change
Also contains some caching / performance improvements

* BugFix: Don't remote rate inputs when falsy amount

* fix type error

* Progress commit

* Implement saga logic

* Make address field factory component

* Shorten debounce time

* Make new actions / sagas  for handling single token lookup

* Implement working version of litesend

* Change saga into selector

* Add failing spec

* fix broken test

* add debounce to error message

* fix tests

* update snapshots

* test coverage

* move setState disabled property from debounce so we instantly can go to next step on valid amounts

* much deeper test coverage, fix debounce ux, and fix bity flashing at swap page load

* fix minor failing test

* seperate shapeshift erc20 token whitelist

* fix saveState store bug

* break orderTimeRemaining saga up and rewrite tests

* add new swap icon

* remove unused allowReadOnly prop

* change offlineaware to walletdecrypt for litesend

* fix LiteSend changewallet bug

* fix error message UX

* fix button styling to match develop

* fix liteSend test

* Fix LiteSend UX on unavl tokens, dropdown null value, and don't show decrypt in litesend after successful wallet decrypt.

* add litesend network check
2018-01-02 12:04:50 -06:00

112 lines
1.9 KiB
SCSS

@import 'common/sass/variables';
.SwapDropdown {
position: relative;
button {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border: 1px solid #ccc;
padding: 0.4rem 1rem;
border-radius: 2px;
&:focus {
outline: none;
}
&:active, &:hover {
opacity: 0.8;
}
> li {
margin: 0;
&:first-child {
padding-top: 4px;
}
&:last-child {
padding-bottom: 4px;
}
> a {
font-weight: 300;
&.active {
color: $link-color;
}
}
}
}
}
.SwapDropdown-grid {
position: absolute;
display: none;
padding: 0;
margin-bottom: 0;
min-width: 500px;
left: 50%;
top: 50px;
transform: translateX(-50%);
list-style: none;
font-size: 0.8rem;
text-align: left;
z-index: 500;
background: white;
box-shadow: 2px 1px 60px rgba(0,0,0,.175);
&::before {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid #fff;
}
&.open {
display: block;
}
li {
display: inline-block;
width: 33.3%;
margin-bottom: 0;
}
li > a {
display: block;
clear: both;
padding: 5px 20px;
color: #163151;
&:hover {
opacity: .8;
background-color: #163151;
color: #fff;
}
}
.inactive {
a {
color: grey;
&:hover {
background-color: #fff;
color:#163151;
cursor: not-allowed;
}
}
img {
filter: grayscale(100%);
}
}
strong {
margin-left: 5px;
}
@media screen and (max-width: 800px) {
min-width: 300px;
}
}
.SwapDropdown-desc {
display: inline-block;
}
.SwapDropdown-item {
position: relative;
img {
padding-right: 1px;
}
}