pbca26
7 years ago
101 changed files with 5117 additions and 1 deletions
|
After Width: | Height: | Size: 254 B |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 430 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 795 B |
|
After Width: | Height: | Size: 476 B |
|
After Width: | Height: | Size: 586 B |
|
After Width: | Height: | Size: 776 B |
|
After Width: | Height: | Size: 488 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 561 B |
|
After Width: | Height: | Size: 251 B |
|
After Width: | Height: | Size: 514 B |
|
After Width: | Height: | Size: 469 B |
@ -0,0 +1,30 @@ |
|||
|
|||
<?xml version="1.0" standalone="no"?> |
|||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" |
|||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
|||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" |
|||
width="800px" height="600px" viewBox="0 0 800.000000 600.000000" |
|||
preserveAspectRatio="xMidYMid meet"> |
|||
|
|||
|
|||
|
|||
<defs> |
|||
<linearGradient id="gradient"> |
|||
<stop offset="0%" stop-color="#9300FF" /> |
|||
<stop offset="49%" stop-color="#5272E2" /> |
|||
<stop offset="95%" stop-color="#4C84FF" /> |
|||
</linearGradient> |
|||
</defs> |
|||
|
|||
<g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)" |
|||
fill="url(#gradient)" stroke="none"> |
|||
<path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359 |
|||
-466 -228 -734 41 -85 151 -196 235 -239 115 -58 268 -77 378 -47 230 61 382 |
|||
289 346 517 -6 35 -11 67 -11 72 0 4 -63 7 -140 7 l-139 0 24 -46 c32 -60 34 |
|||
-147 5 -203 -47 -93 -162 -148 -252 -122 -174 51 -230 261 -101 383 59 57 70 |
|||
58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100 |
|||
89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30 |
|||
-42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"/> |
|||
|
|||
</g> |
|||
</svg> |
|||
|
After Width: | Height: | Size: 199 B |
|
After Width: | Height: | Size: 192 B |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 621 B |
|
After Width: | Height: | Size: 320 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 353 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 438 B |
|
After Width: | Height: | Size: 889 B |
|
After Width: | Height: | Size: 474 B |
|
After Width: | Height: | Size: 956 B |
|
After Width: | Height: | Size: 478 B |
|
After Width: | Height: | Size: 313 B |
|
After Width: | Height: | Size: 238 B |
|
After Width: | Height: | Size: 774 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 153 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 135 B |
|
After Width: | Height: | Size: 465 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 366 B |
Binary file not shown.
|
After Width: | Height: | Size: 808 B |
|
After Width: | Height: | Size: 524 B |
|
After Width: | Height: | Size: 532 B |
|
After Width: | Height: | Size: 899 B |
|
After Width: | Height: | Size: 932 B |
|
After Width: | Height: | Size: 873 B |
|
After Width: | Height: | Size: 607 B |
|
After Width: | Height: | Size: 213 B |
|
After Width: | Height: | Size: 774 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 772 B |
|
After Width: | Height: | Size: 670 B |
|
After Width: | Height: | Size: 289 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,101 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../translate/translate'; |
|||
|
|||
class DexCoins extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
isNewPassphrase: false, |
|||
}; |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<section className="dashboard"> |
|||
<section className="dashboard-wallets"> |
|||
<header className="dashboard-wallets-header component-header"> |
|||
<i className="dashboard-empty-logo"> |
|||
<svg viewBox="0 0 800.000000 600.000000" preserveAspectRatio="xMidYMid meet"> |
|||
<defs> |
|||
<linearGradient id="gradient"> |
|||
<stop offset="0%" stopColor="#9300FF"></stop> |
|||
<stop offset="49%" stopColor="#5272E2"></stop> |
|||
<stop offset="95%" stopColor="#4C84FF"></stop> |
|||
</linearGradient> |
|||
</defs> |
|||
<g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)" fill="url(#gradient)" stroke="none"> |
|||
<path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359 -466 -228 -734 41 -85 151 -196 235 -239 115 -58 268 -77 378 -47 230 61 382 289 346 517 -6 35 -11 67 -11 72 0 4 -63 7 -140 7 l-139 0 24 -46 c32 -60 34 -147 5 -203 -47 -93 -162 -148 -252 -122 -174 51 -230 261 -101 383 59 57 70 58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100 89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30 -42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"></path> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
<div className="recharts-responsive-container dashboard-balances-pie" style={{ width: '250px', height: '450px' }}> |
|||
{ /* portfolio chart here */ } |
|||
</div> |
|||
<h1> |
|||
<label>Estimated balance</label> |
|||
<span>0.00345625 BTC</span> |
|||
<small>$32.21</small> |
|||
</h1> |
|||
<button className="action dark"> |
|||
<span>swap history</span> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 30 30' }} version="1.1" viewBox="0 0 30 30"> |
|||
<path d="M16.414,13.586c0.781,0.781,0.781,2.047,0,2.828c-0.781,0.781-2.047,0.781-2.828,0c-0.544-0.544-3.044-4.418-4.508-6.715 C8.818,9.292,9.292,8.818,9.699,9.078C11.996,10.542,15.87,13.041,16.414,13.586z"></path> |
|||
<path d="M6.58,7.93 C4.971,9.841,4,12.306,4,15c0,6.075,4.925,11,11,11s11-4.925,11-11S21.075,4,15,4v4" style={{ fill: 'none', stroke: '#CCC', strokeWidth: '2', strokeLinecap: 'round', strokeMiterlimit: '10' }}></path> |
|||
</svg> |
|||
</i> |
|||
</button> |
|||
</header> |
|||
<ul className="dashboard-wallets-list"> |
|||
<li className="coinList-coin MNZ"> |
|||
<a className="MNZ" href="#/wallet/MNZ/false"> |
|||
<div className="coinList-coin_icon coin-colorized"> |
|||
<i className="coin-icon-svg MNZ"> |
|||
<svg version="1.1" id="Calque_1" x="0px" y="0px" viewBox="0 0 50 50" style={{ enableBackground: 'new 0 0 148 50' }}> |
|||
<g> |
|||
<path className="st1" d="M15.9,17.9"></path> |
|||
<path d="M39.9,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C39.6,35.1,40,34.9,39.9,34.5z"></path> |
|||
<path d="M28.3,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C28,35.1,28.4,34.9,28.3,34.5z"></path> |
|||
<path d="M19.1,30.7l-3.2-12.5h0c0-0.2-0.2-0.4-0.5-0.4c-0.2,0-0.4,0.2-0.5,0.4l0,0L10.7,34l0,0c0,0.1,0,0.2,0,0.2 c0,0.5,0.4,1,1,1H17c0.4,0,0.8-0.3,0.9-0.7l0,0L19.1,30.7z"></path> |
|||
<path d="M30.9,30.4l-3.5-12.6h0c0-0.2-0.2-0.3-0.4-0.3c-0.2,0-0.4,0.1-0.4,0.3h0l-0.7,2.5l3.5,12.2l0,0l0,0 c0.1,0.2,0.2,0.3,0.4,0.3c0.2,0,0.3-0.1,0.4-0.3l0,0L30.9,30.4z"></path> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
</div> |
|||
<div className="coinList-coin_balance MNZ"> |
|||
<strong className="coinList-coin_balance-name">Monaize</strong> |
|||
<strong className="coinList-coin_balance-amount"> |
|||
20.35808051 MNZ |
|||
</strong> |
|||
<small>Electrum mode</small> |
|||
</div> |
|||
<span className="coinList-coin_action"> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<polygon points="160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 "></polygon> |
|||
</svg> |
|||
</span> |
|||
{ /* toggle opacity */} |
|||
<span className="coinList-coin_action_loader"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" className="lds-flickr" style={{ background: 'none' }}> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="54.6667" fill="#FFF" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx2}}" cy="50" ng-attr-fill="{{config.c2}}" ng-attr-r="{{config.radius}}" cx="45.3333" fill="#000" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="0s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="54.6667" fill="#FFF" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
<animate attributeName="fill-opacity" values="0;0;1;1" calcMode="discrete" keyTimes="0;0.499;0.5;1" ng-attr-dur="{{config.speed}}s" repeatCount="indefinite" dur="2s"></animate> |
|||
</circle> |
|||
</svg> |
|||
</span> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</section> |
|||
</section> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default DexCoins; |
|||
@ -0,0 +1,972 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../translate/translate'; |
|||
|
|||
class DexExchange extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
}; |
|||
} |
|||
|
|||
// copy orders render from dexSwapHistory
|
|||
|
|||
renderWallet() { |
|||
return ( |
|||
<div className="trade trade-wallet"> |
|||
<section className="trade-body"> |
|||
<ul className="trade-type"> |
|||
<li className="trade-type-item trade-type-item-buy"> |
|||
<button> |
|||
<div> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<path d="M370.1,181.3H399v47.3l81-83.2L399,64v54h-28.9c-82.7,0-129.4,61.9-170.6,116.5c-37,49.1-69,95.4-120.6,95.4H32v63.3h46.9 c82.7,0,129.4-65.8,170.6-120.4C286.5,223.7,318.4,181.3,370.1,181.3z M153.2,217.5c3.5-4.6,7.1-9.3,10.7-14.1 c8.8-11.6,18-23.9,28-36.1c-29.6-27.9-65.3-48.5-113-48.5H32v63.3c0,0,13.3-0.6,46.9,0C111.4,182.8,131.8,196.2,153.2,217.5z M399,330.4h-28.9c-31.5,0-55.7-15.8-78.2-39.3c-2.2,3-4.5,6-6.8,9c-9.9,13.1-20.5,27.2-32.2,41.1c30.4,29.9,67.2,52.5,117.2,52.5 H399V448l81-81.4l-81-83.2V330.4z"></path> |
|||
</svg> |
|||
</i> |
|||
<small>Exchange</small> |
|||
</div> |
|||
</button> |
|||
</li> |
|||
<li className="trade-type-item trade-type-item-wallet"> |
|||
<button> |
|||
<div> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 30 30' }} version="1.1" viewBox="0 0 30 30"> |
|||
<path d="M10,4H6C4.895,4,4,4.895,4,6v4c0,1.105,0.895,2,2,2h4c1.105,0,2-0.895,2-2V6C12,4.895,11.105,4,10,4z M10,10H6V6h4V10z M9,9 H7V7h2V9z"></path> |
|||
<path d="M10,18H6c-1.105,0-2,0.895-2,2v4c0,1.105,0.895,2,2,2h4c1.105,0,2-0.895,2-2v-4C12,18.895,11.105,18,10,18z M10,24H6v-4h4 V24z M9,23H7v-2h2V23z"></path> |
|||
<path d="M24,4h-4c-1.105,0-2,0.895-2,2v4c0,1.105,0.895,2,2,2h4c1.105,0,2-0.895,2-2V6C26,4.895,25.105,4,24,4z M24,10h-4V6h4V10z M23,9h-2V7h2V9z"></path> |
|||
<rect height="2" width="2" x="14" y="6"></rect> |
|||
<rect height="2" width="2" x="14" y="10"></rect> |
|||
<rect height="2" width="2" x="14" y="14"></rect> |
|||
<rect height="2" width="2" x="10" y="14"></rect> |
|||
<rect height="2" width="2" x="6" y="14"></rect> |
|||
<rect height="2" width="2" x="18" y="14"></rect> |
|||
<rect height="2" width="2" x="22" y="14"></rect> |
|||
<rect height="2" width="2" x="16" y="16"></rect> |
|||
<rect height="2" width="2" x="20" y="16"></rect> |
|||
<rect height="2" width="2" x="18" y="18"></rect> |
|||
<rect height="2" width="2" x="14" y="18"></rect> |
|||
<rect height="2" width="2" x="16" y="20"></rect> |
|||
<rect height="2" width="2" x="18" y="22"></rect> |
|||
<rect height="2" width="2" x="16" y="24"></rect> |
|||
<rect height="2" width="2" x="24" y="16"></rect> |
|||
<rect height="2" width="2" x="24" y="20"></rect> |
|||
<rect height="2" width="2" x="20" y="20"></rect> |
|||
<rect height="2" width="2" x="20" y="24"></rect> |
|||
<rect height="2" width="2" x="22" y="22"></rect> |
|||
<rect height="2" width="2" x="22" y="18"></rect> |
|||
<rect height="2" width="2" x="14" y="22"></rect> |
|||
</svg> |
|||
</i> |
|||
<small>Wallet</small> |
|||
</div> |
|||
</button> |
|||
</li> |
|||
<li className="trade-type-item trade-type-item-orders"> |
|||
<button> |
|||
<div> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 30 30' }} version="1.1" viewBox="0 0 30 30"> |
|||
<path d="M7,22 V4h18v18c0,2.209-1.791,4-4,4" style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', strokeMiterlimit: '10' }}></path> |
|||
<path d="M17,22 L17,22H4l0,0c0,2.209,1.791,4,4,4h13C18.791,26,17,24.209,17,22z" style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', strokeMiterlimit: '10' }}></path> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="15" x2="21" y1="13" y2="13"></line> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="11" x2="13" y1="13" y2="13"></line> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="15" x2="21" y1="17" y2="17"></line> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="11" x2="13" y1="17" y2="17"></line> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="15" x2="21" y1="9" y2="9"></line> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="11" x2="13" y1="9" y2="9"></line> |
|||
<path d="M17,22L17,22H4l0,0c0,2.209,1.791,4,4,4h13C18.791,26,17,24.209,17,22z"></path> |
|||
</svg> |
|||
</i> |
|||
<small>Orders</small> |
|||
</div> |
|||
</button> |
|||
</li> |
|||
</ul> |
|||
<section className="balance-action"> |
|||
<section className="balance-deposit"> |
|||
<div className="balance-deposit-body KMD"> |
|||
<section className="balance-qr"> |
|||
<canvas height="124" width="124" style={{ height: '124px', width: '124px' }}></canvas> |
|||
</section> |
|||
<section className="balance-deposit-address"> |
|||
<span className="label"><strong className="label-title">Your smartaddress</strong></span> |
|||
<button className="Clipboard action lefttext normaltext dark"> |
|||
<span>RDbGxL8QYdEp8sMULaVZS2E6XThcTKT9Jd</span> |
|||
<i className="Clipboard-icon"> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<g> |
|||
<polygon points="304,96 288,96 288,176 368,176 368,160 304,160 "></polygon> |
|||
<path d="M325.3,64H160v48h-48v336h240v-48h48V139L325.3,64z M336,432H128V128h32v272h176V432z M384,384H176V80h142.7l65.3,65.6V384 z"></path> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
</button> |
|||
</section> |
|||
</div> |
|||
</section> |
|||
<div className="deposit-withdraw"> |
|||
<section className="trade-amount_input_address"> |
|||
<span className="label"><strong className="label-title">Withdraw to</strong></span> |
|||
<div className="trade-amount_input-wrapper"><input type="text" name="form-amount" placeholder="address" value="" style={{ fontSize: '18px' }} /></div> |
|||
</section> |
|||
<section className="trade-amount_input_amount"> |
|||
<span className="label"><strong className="label-title">Amount</strong></span> |
|||
<div className="trade-amount_input-wrapper"><input type="number" step="any" min="0" name="form-amount" placeholder="0.00" value="0" style={{ fontSize: '18px' }} /><button className="trade-setMax">Max</button></div> |
|||
</section> |
|||
<section className="trade-button-wrapper KMD"> |
|||
<button className="trade-button withBorder action primary coin-bg" disabled=""> |
|||
<div className="trade-action-amountRel"> |
|||
<small className="trade-action-amountRel-title"> |
|||
VALIDATION |
|||
</small> |
|||
enter amount to continue |
|||
</div> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 30 30' }} version="1.1" viewBox="0 0 30 30"> |
|||
<polygon points="28,15 18,15 5.338,12.885 4,11 4,5 6.994,3.266 27.391,14.079 "></polygon> |
|||
<circle cx="27" cy="15" r="1"></circle> |
|||
<circle cx="6" cy="11" r="2"></circle> |
|||
<circle cx="6" cy="5" r="2"></circle> |
|||
<polygon points="28,15 18,15 5.338,17.115 4,19 4,25 6.994,26.734 27.391,15.921 "></polygon> |
|||
<circle cx="6" cy="19" r="2"></circle> |
|||
<circle cx="6" cy="25" r="2"></circle> |
|||
</svg> |
|||
</i> |
|||
</button> |
|||
</section> |
|||
</div> |
|||
</section> |
|||
</section> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<section className="wallet-wrapper"> |
|||
<section className="wallet wallet-ready"> |
|||
<header className="wallet-wallets-header component-header component-header-centered component-header-withBack"> |
|||
<a className="wallet-wallets-header-back action primary right dark" href="#/"> |
|||
<i className="wallet-wallets-list-item_action"> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<polygon points="160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 "></polygon> |
|||
</svg> |
|||
</i> |
|||
</a> |
|||
<h2 className="KMD"> |
|||
<div className="wallet-icon coin-colorized"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 226.8 226.8" width="24" height="24" fill="currentColor"> |
|||
<path d="M113.4 0C50.8 0 0 50.8 0 113.4s50.8 113.4 113.4 113.4S226.8 176 226.8 113.4 176 0 113.4 0zm54.991 164.274l-3.878 3.878c-17.035 7.13-34.055 14.299-51.113 21.374-17.058-7.074-34.078-14.243-51.113-21.374l-3.878-3.878-21.142-50.879 21.142-50.879 3.878-3.878c11.93-4.994 23.858-9.997 35.792-14.982l9.842-4.12 2.725-1.13 2.754-1.141 2.753 1.141 2.725 1.13 9.842 4.12c11.934 4.985 23.862 9.988 35.792 14.982l3.878 3.878 21.142 50.879-21.141 50.879z"></path> |
|||
<path d="M113.4 68.322L81.528 81.524l-13.202 31.871 13.202 31.872 31.872 13.202 31.871-13.202 13.202-31.872-13.202-31.871L113.4 68.322zm22.536 67.61l-22.537 9.336-22.536-9.336-9.335-22.536 9.335-22.536 22.536-9.336 22.537 9.336 9.335 22.536-9.335 22.536z"></path> |
|||
</svg> |
|||
</div> |
|||
<div className="wallet-coinName">Komodo</div> |
|||
<div className="wallet-balance">10.87586947 KMD</div> |
|||
</h2> |
|||
</header> |
|||
<section className="wallet-trade"> |
|||
<div className="wallet-exchange"> |
|||
{ /* toggle, trade-wallet, trade-orders */} |
|||
<div className="trade trade-buy"> |
|||
<section className="trade-body"> |
|||
<ul className="trade-type"> |
|||
<li className="trade-type-item trade-type-item-buy"> |
|||
<button> |
|||
<div> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<path d="M370.1,181.3H399v47.3l81-83.2L399,64v54h-28.9c-82.7,0-129.4,61.9-170.6,116.5c-37,49.1-69,95.4-120.6,95.4H32v63.3h46.9 c82.7,0,129.4-65.8,170.6-120.4C286.5,223.7,318.4,181.3,370.1,181.3z M153.2,217.5c3.5-4.6,7.1-9.3,10.7-14.1 c8.8-11.6,18-23.9,28-36.1c-29.6-27.9-65.3-48.5-113-48.5H32v63.3c0,0,13.3-0.6,46.9,0C111.4,182.8,131.8,196.2,153.2,217.5z M399,330.4h-28.9c-31.5,0-55.7-15.8-78.2-39.3c-2.2,3-4.5,6-6.8,9c-9.9,13.1-20.5,27.2-32.2,41.1c30.4,29.9,67.2,52.5,117.2,52.5 H399V448l81-81.4l-81-83.2V330.4z"></path> |
|||
</svg> |
|||
</i> |
|||
<small>Exchange</small> |
|||
</div> |
|||
</button> |
|||
</li> |
|||
<li className="trade-type-item trade-type-item-wallet"> |
|||
<button> |
|||
<div> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 30 30' }} version="1.1" viewBox="0 0 30 30"> |
|||
<path d="M10,4H6C4.895,4,4,4.895,4,6v4c0,1.105,0.895,2,2,2h4c1.105,0,2-0.895,2-2V6C12,4.895,11.105,4,10,4z M10,10H6V6h4V10z M9,9 H7V7h2V9z"></path> |
|||
<path d="M10,18H6c-1.105,0-2,0.895-2,2v4c0,1.105,0.895,2,2,2h4c1.105,0,2-0.895,2-2v-4C12,18.895,11.105,18,10,18z M10,24H6v-4h4 V24z M9,23H7v-2h2V23z"></path> |
|||
<path d="M24,4h-4c-1.105,0-2,0.895-2,2v4c0,1.105,0.895,2,2,2h4c1.105,0,2-0.895,2-2V6C26,4.895,25.105,4,24,4z M24,10h-4V6h4V10z M23,9h-2V7h2V9z"></path> |
|||
<rect height="2" width="2" x="14" y="6"></rect> |
|||
<rect height="2" width="2" x="14" y="10"></rect> |
|||
<rect height="2" width="2" x="14" y="14"></rect> |
|||
<rect height="2" width="2" x="10" y="14"></rect> |
|||
<rect height="2" width="2" x="6" y="14"></rect> |
|||
<rect height="2" width="2" x="18" y="14"></rect> |
|||
<rect height="2" width="2" x="22" y="14"></rect> |
|||
<rect height="2" width="2" x="16" y="16"></rect> |
|||
<rect height="2" width="2" x="20" y="16"></rect> |
|||
<rect height="2" width="2" x="18" y="18"></rect> |
|||
<rect height="2" width="2" x="14" y="18"></rect> |
|||
<rect height="2" width="2" x="16" y="20"></rect> |
|||
<rect height="2" width="2" x="18" y="22"></rect> |
|||
<rect height="2" width="2" x="16" y="24"></rect> |
|||
<rect height="2" width="2" x="24" y="16"></rect> |
|||
<rect height="2" width="2" x="24" y="20"></rect> |
|||
<rect height="2" width="2" x="20" y="20"></rect> |
|||
<rect height="2" width="2" x="20" y="24"></rect> |
|||
<rect height="2" width="2" x="22" y="22"></rect> |
|||
<rect height="2" width="2" x="22" y="18"></rect> |
|||
<rect height="2" width="2" x="14" y="22"></rect> |
|||
</svg> |
|||
</i> |
|||
<small>Wallet</small> |
|||
</div> |
|||
</button> |
|||
</li> |
|||
<li className="trade-type-item trade-type-item-orders"> |
|||
<button> |
|||
<div> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 30 30' }} version="1.1" viewBox="0 0 30 30"> |
|||
<path d="M7,22 V4h18v18c0,2.209-1.791,4-4,4" style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', strokeMiterlimit: '10' }}></path> |
|||
<path d="M17,22 L17,22H4l0,0c0,2.209,1.791,4,4,4h13C18.791,26,17,24.209,17,22z" style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', strokeMiterlimit: '10' }}></path> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="15" x2="21" y1="13" y2="13"></line> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="11" x2="13" y1="13" y2="13"></line> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="15" x2="21" y1="17" y2="17"></line> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="11" x2="13" y1="17" y2="17"></line> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="15" x2="21" y1="9" y2="9"></line> |
|||
<line style={{ fill: 'none', stroke: '#FFF', strokeWidth: '2', strokeLinejoin: 'round', strokeMiterlimit: '10' }} x1="11" x2="13" y1="9" y2="9"></line> |
|||
<path d="M17,22L17,22H4l0,0c0,2.209,1.791,4,4,4h13C18.791,26,17,24.209,17,22z"></path> |
|||
</svg> |
|||
</i> |
|||
<small>Orders</small> |
|||
</div> |
|||
</button> |
|||
</li> |
|||
</ul> |
|||
<section className="trade-action"> |
|||
<section className="trade-action-wrapper"> |
|||
<div className="trade-amount"> |
|||
<section className="trade-amount_input"> |
|||
<section className="trade-amount_input_price"> |
|||
<span className="label"><strong className="label-title">Price</strong></span> |
|||
<div className="trade-amount_input-wrapper"> |
|||
<input type="number" step="any" min="0" name="form-price" placeholder="0.00" value="0" style={{ fontSize: '18px' }} /> |
|||
<section className="modal modal-open"> |
|||
<header className="modal-header"> |
|||
<h1></h1> |
|||
<button className="modal-btn-close withBorder"> |
|||
<i className="modal-btn-close-icon"> |
|||
<svg style={{ enableBackground: 'new 0 0 32 32' }} id="Layer_1" version="1.1" viewBox="0 0 32 32"> |
|||
<g> |
|||
<polyline fill="none" points=" 649,137.999 675,137.999 675,155.999 661,155.999 " stroke="#FFFFFF" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth="2"></polyline> |
|||
<polyline fill="none" points=" 653,155.999 649,155.999 649,141.999 " stroke="#FFFFFF" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth="2"></polyline> |
|||
<polyline fill="none" points=" 661,156 653,162 653,156 " stroke="#FFFFFF" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth="2"></polyline> |
|||
</g> |
|||
<g> |
|||
<path d="M11.312,12.766c0.194,0.195,0.449,0.292,0.704,0.292c0.255,0,0.51-0.097,0.704-0.292c0.389-0.389,0.389-1.02,0-1.409 L4.755,3.384c-0.389-0.389-1.019-0.389-1.408,0s-0.389,1.02,0,1.409L11.312,12.766z"></path> |
|||
<path d="M17.407,16.048L28.652,4.793c0.389-0.389,0.389-1.02,0-1.409c-0.389-0.389-1.019-0.561-1.408-0.171L15.296,15 c0,0-0.296,0-0.296,0s0,0.345,0,0.345L3.2,27.303c-0.389,0.389-0.315,1.02,0.073,1.409c0.194,0.195,0.486,0.292,0.741,0.292 s0.528-0.097,0.722-0.292L15.99,17.458l11.249,11.255c0.194,0.195,0.452,0.292,0.706,0.292s0.511-0.097,0.705-0.292 c0.389-0.389,0.39-1.02,0.001-1.409L17.407,16.048z"></path> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
</button> |
|||
</header> |
|||
{ /* to toggle set class to modal-content-overlay modal-display-content */} |
|||
<content className="modal-content"> |
|||
<button className="action noTransformTranslate arrow-down"> |
|||
<span className="MNZ"> |
|||
<span className="trade-base-icon coin-colorized"> |
|||
<i className="coin-icon-svg MNZ"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Calque_1" x="0px" y="0px" viewBox="0 0 50 50" style={{ enableBackground: 'new 0 0 148 50' }}> |
|||
<g> |
|||
<path className="st1" d="M15.9,17.9"></path> |
|||
<path d="M39.9,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C39.6,35.1,40,34.9,39.9,34.5z"></path> |
|||
<path d="M28.3,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C28,35.1,28.4,34.9,28.3,34.5z"></path> |
|||
<path d="M19.1,30.7l-3.2-12.5h0c0-0.2-0.2-0.4-0.5-0.4c-0.2,0-0.4,0.2-0.5,0.4l0,0L10.7,34l0,0c0,0.1,0,0.2,0,0.2 c0,0.5,0.4,1,1,1H17c0.4,0,0.8-0.3,0.9-0.7l0,0L19.1,30.7z"></path> |
|||
<path d="M30.9,30.4l-3.5-12.6h0c0-0.2-0.2-0.3-0.4-0.3c-0.2,0-0.4,0.1-0.4,0.3h0l-0.7,2.5l3.5,12.2l0,0l0,0 c0.1,0.2,0.2,0.3,0.4,0.3c0.2,0,0.3-0.1,0.4-0.3l0,0L30.9,30.4z"></path> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
</span> |
|||
<strong>Monaize</strong> |
|||
</span> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<polygon points="160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 "></polygon> |
|||
</svg> |
|||
</i> |
|||
</button> |
|||
<div className="modal-content-overlay"> |
|||
<ul className="coinList-list singleColumn coin-colorized-reset"> |
|||
<li className="coinList-coin MNZ"> |
|||
<div className="coinList-coin_icon coin-colorized"> |
|||
<i className="coin-icon-svg MNZ"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Calque_1" x="0px" y="0px" viewBox="0 0 50 50" style={{ enableBackground: 'new 0 0 148 50' }}> |
|||
<g> |
|||
<path className="st1" d="M15.9,17.9"></path> |
|||
<path d="M39.9,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C39.6,35.1,40,34.9,39.9,34.5z"></path> |
|||
<path d="M28.3,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C28,35.1,28.4,34.9,28.3,34.5z"></path> |
|||
<path d="M19.1,30.7l-3.2-12.5h0c0-0.2-0.2-0.4-0.5-0.4c-0.2,0-0.4,0.2-0.5,0.4l0,0L10.7,34l0,0c0,0.1,0,0.2,0,0.2 c0,0.5,0.4,1,1,1H17c0.4,0,0.8-0.3,0.9-0.7l0,0L19.1,30.7z"></path> |
|||
<path d="M30.9,30.4l-3.5-12.6h0c0-0.2-0.2-0.3-0.4-0.3c-0.2,0-0.4,0.1-0.4,0.3h0l-0.7,2.5l3.5,12.2l0,0l0,0 c0.1,0.2,0.2,0.3,0.4,0.3c0.2,0,0.3-0.1,0.4-0.3l0,0L30.9,30.4z"></path> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
</div> |
|||
<div className="coinList-coin_balance"><strong className="coinList-coin_name">Monaize</strong><small>20.35808051 MNZ</small></div> |
|||
<span className="coinList-coin_action"> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<polygon points="160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 "></polygon> |
|||
</svg> |
|||
</span> |
|||
<span className="coinList-coin_action_loader"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" className="lds-flickr" style={{ background: 'none' }}> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="51.3333" fill="#FFF" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx2}}" cy="50" ng-attr-fill="{{config.c2}}" ng-attr-r="{{config.radius}}" cx="48.6667" fill="#000" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="0s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="51.3333" fill="#FFF" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
<animate attributeName="fill-opacity" values="0;0;1;1" calcMode="discrete" keyTimes="0;0.499;0.5;1" ng-attr-dur="{{config.speed}}s" repeatCount="indefinite" dur="2s"></animate> |
|||
</circle> |
|||
</svg> |
|||
</span> |
|||
</li> |
|||
<li className="coinList-coin REVS"> |
|||
<div className="coinList-coin_icon coin-colorized"> |
|||
<i className="coin-icon-placeholder REVS">R</i> |
|||
</div> |
|||
<div className="coinList-coin_balance"><strong className="coinList-coin_name">REVS</strong><small>1.29442594 REVS</small></div> |
|||
<span className="coinList-coin_action"> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<polygon points="160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 "></polygon> |
|||
</svg> |
|||
</span> |
|||
<span className="coinList-coin_action_loader"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" className="lds-flickr" style={{ background: 'none' }}> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="51.3333" fill="#FFF" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx2}}" cy="50" ng-attr-fill="{{config.c2}}" ng-attr-r="{{config.radius}}" cx="48.6667" fill="#000" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="0s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="51.3333" fill="#FFF" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
<animate attributeName="fill-opacity" values="0;0;1;1" calcMode="discrete" keyTimes="0;0.499;0.5;1" ng-attr-dur="{{config.speed}}s" repeatCount="indefinite" dur="2s"></animate> |
|||
</circle> |
|||
</svg> |
|||
</span> |
|||
</li> |
|||
<li className="coinList-coin JUMBLR"> |
|||
<div className="coinList-coin_icon coin-colorized"> |
|||
<i className="coin-icon-placeholder JUMBLR">J</i> |
|||
</div> |
|||
<div className="coinList-coin_balance"><strong className="coinList-coin_name">JUMBLR</strong><small>0.00 JUMBLR</small></div> |
|||
<span className="coinList-coin_action"> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<polygon points="160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 "></polygon> |
|||
</svg> |
|||
</span> |
|||
<span className="coinList-coin_action_loader"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" className="lds-flickr" style={{ background: 'none' }}> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="51.3333" fill="#FFF" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx2}}" cy="50" ng-attr-fill="{{config.c2}}" ng-attr-r="{{config.radius}}" cx="48.6667" fill="#000" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="0s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="51.3333" fill="#FFF" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
<animate attributeName="fill-opacity" values="0;0;1;1" calcMode="discrete" keyTimes="0;0.499;0.5;1" ng-attr-dur="{{config.speed}}s" repeatCount="indefinite" dur="2s"></animate> |
|||
</circle> |
|||
</svg> |
|||
</span> |
|||
</li> |
|||
<li className="coinList-coin BTC"> |
|||
<div className="coinList-coin_icon coin-colorized"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 226.777 226.777" fill="currentColor"> |
|||
<path d="M135.715 122.244c-2.614-1.31-8.437-3.074-15.368-3.533-6.934-.458-15.828 0-15.828 0v30.02s9.287.198 15.503-.26c6.21-.458 12.621-2.027 15.826-3.795 3.203-1.766 7.063-4.513 7.063-11.379 0-6.869-4.579-9.745-7.196-11.053zm-19.555-17.465c5.104-.197 10.532-1.373 14.453-3.532 3.925-2.158 6.148-5.557 6.02-10.66-.134-5.102-3.532-9.418-9.287-11.186-5.757-1.766-9.613-1.897-13.998-1.962-4.382-.064-8.83.328-8.83.328v27.012c.001 0 6.541.197 11.642 0z"></path> |
|||
<path d="M113.413 0C50.777 0 0 50.776 0 113.413c0 62.636 50.777 113.413 113.413 113.413s113.411-50.777 113.411-113.413C226.824 50.776 176.049 0 113.413 0zm46.178 156.777c-8.44 5.887-17.465 6.935-21.455 7.456-1.969.259-5.342.532-8.959.744v22.738h-13.998v-22.37h-10.66v22.37H90.522v-22.37H62.987l2.877-16.812h8.371c2.814 0 3.989-.261 5.166-1.372 1.177-1.113 1.439-2.812 1.439-4.188V85.057c0-3.628-.295-4.61-1.963-6.473-1.668-1.867-5.591-2.112-7.8-2.112h-8.091V61.939h27.535V39.505h13.996v22.434h10.66V39.505h13.998v22.703c10.435.647 18.203 2.635 24.983 7.645 8.766 6.475 8.306 17.724 8.11 20.406-.195 2.682-1.372 7.85-3.729 11.183-2.352 3.337-8.108 6.673-8.108 6.673s6.801 1.438 11.578 5.036c4.771 3.598 8.307 9.941 8.106 19.229-.192 9.288-2.088 18.511-10.524 24.397z"></path> |
|||
</svg> |
|||
</div> |
|||
<div className="coinList-coin_balance"><strong className="coinList-coin_name">Bitcoin</strong><small>0.002 BTC</small></div> |
|||
<span className="coinList-coin_action"> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<polygon points="160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 "></polygon> |
|||
</svg> |
|||
</span> |
|||
<span className="coinList-coin_action_loader"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" className="lds-flickr" style={{ background: 'none' }}> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="51.3333" fill="#FFF" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx2}}" cy="50" ng-attr-fill="{{config.c2}}" ng-attr-r="{{config.radius}}" cx="48.6667" fill="#000" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="0s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="51.3333" fill="#FFF" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
<animate attributeName="fill-opacity" values="0;0;1;1" calcMode="discrete" keyTimes="0;0.499;0.5;1" ng-attr-dur="{{config.speed}}s" repeatCount="indefinite" dur="2s"></animate> |
|||
</circle> |
|||
</svg> |
|||
</span> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</content> |
|||
</section> |
|||
</div> |
|||
</section> |
|||
<section className="trade-amount_input_amount"> |
|||
<span className="label"><strong className="label-title">Amount</strong></span> |
|||
<div className="trade-amount_input-wrapper"> |
|||
<input type="number" step="any" min="0" name="form-amount" placeholder="0.00" value="0" style={{ fontSize: '18px' }} /> |
|||
</div> |
|||
</section> |
|||
</section> |
|||
</div> |
|||
</section> |
|||
<section className="trade-button-wrapper KMD"> |
|||
<button className="trade-button withBorder action primary coin-bg" disabled=""> |
|||
<div className="trade-action-amountRel"> |
|||
<small className="trade-action-amountRel-title"> |
|||
VALIDATION |
|||
</small> |
|||
enter amount to continue |
|||
</div> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<path d="M370.1,181.3H399v47.3l81-83.2L399,64v54h-28.9c-82.7,0-129.4,61.9-170.6,116.5c-37,49.1-69,95.4-120.6,95.4H32v63.3h46.9 c82.7,0,129.4-65.8,170.6-120.4C286.5,223.7,318.4,181.3,370.1,181.3z M153.2,217.5c3.5-4.6,7.1-9.3,10.7-14.1 c8.8-11.6,18-23.9,28-36.1c-29.6-27.9-65.3-48.5-113-48.5H32v63.3c0,0,13.3-0.6,46.9,0C111.4,182.8,131.8,196.2,153.2,217.5z M399,330.4h-28.9c-31.5,0-55.7-15.8-78.2-39.3c-2.2,3-4.5,6-6.8,9c-9.9,13.1-20.5,27.2-32.2,41.1c30.4,29.9,67.2,52.5,117.2,52.5 H399V448l81-81.4l-81-83.2V330.4z"></path> |
|||
</svg> |
|||
</i> |
|||
</button> |
|||
</section> |
|||
</section> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</section> |
|||
<section className="wallet-orderbooks"> |
|||
<section className="wallet-orderbooks-chart"> |
|||
<h3>no chart data</h3> |
|||
</section> |
|||
<section className="trade-orderbook"> |
|||
<div className="ReactTable -striped -highlight" style={{ height: '339.5px' }}> |
|||
<div className="rt-table"> |
|||
<div className="rt-thead -header" style={{ minWidth: '600px' }}> |
|||
<div className="rt-tr"> |
|||
<div className=" rt-resizable-header -sort-asc -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">asks MNZ</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
<div className=" rt-resizable-header -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">Max KMD</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
<div className=" rt-resizable-header -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">Min KMD</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
<div className=" rt-resizable-header -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">Total KMD</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
<div className=" rt-resizable-header -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">Age</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
<div className=" rt-resizable-header -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">UTXOs</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tbody" style={{ minWidth: '600px' }}> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-noData">KMD/MNZ orderbook</div> |
|||
<div className="-loading"> |
|||
<div className="-loading-inner">Loading...</div> |
|||
</div> |
|||
</div> |
|||
<div className="ReactTable -striped -highlight" style={{ height: '339.5px' }}> |
|||
<div className="rt-table"> |
|||
<div className="rt-thead -header" style={{ minWidth: '600px' }}> |
|||
<div className="rt-tr"> |
|||
<div className=" rt-resizable-header -sort-asc -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">bids MNZ</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
<div className=" rt-resizable-header -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">Max KMD</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
<div className=" rt-resizable-header -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">Min KMD</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
<div className=" rt-resizable-header -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">Total KMD</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
<div className=" rt-resizable-header -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">Age</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
<div className=" rt-resizable-header -cursor-pointer rt-th" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<div className="rt-resizable-header-content">UTXOs</div> |
|||
<div className="rt-resizer"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tbody" style={{ minWidth: '600px' }}> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>2</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>0.16</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<span className="bids"> |
|||
5.816<span className="depth" style={{ width: '30%' }}></span> |
|||
</span> |
|||
</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>28</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>54</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>6.05842712</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>0.024</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<span className="bids"> |
|||
2.792<span className="depth" style={{ width: '14.4017%' }}></span> |
|||
</span> |
|||
</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>49</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>43</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>6.13186539</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>0.024</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<span className="bids"> |
|||
1.456<span className="depth" style={{ width: '7.51032%' }}></span> |
|||
</span> |
|||
</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>19</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>42</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>6.13186539</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>0.016</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<span className="bids"> |
|||
1.8<span className="depth" style={{ width: '9.28473%' }}></span> |
|||
</span> |
|||
</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>24</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>43</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>6.13186539</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>0.024</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<span className="bids"> |
|||
2.152<span className="depth" style={{ width: '11.1004%' }}></span> |
|||
</span> |
|||
</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>29</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>44</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>6.13186539</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>0.024</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<span className="bids"> |
|||
2.448<span className="depth" style={{ width: '12.6272%' }}></span> |
|||
</span> |
|||
</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>27</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>37</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>6.13195896</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>0.024</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<span className="bids"> |
|||
1.12<span className="depth" style={{ width: '5.77717%' }}></span> |
|||
</span> |
|||
</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>14</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>43</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>6.14115095</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>0.016</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<span className="bids"> |
|||
0.776<span className="depth" style={{ width: '4.00275%' }}></span> |
|||
</span> |
|||
</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>3</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>33</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>6.18795244</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>0.016</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<span className="bids"> |
|||
0.264<span className="depth" style={{ width: '1.36176%' }}></span> |
|||
</span> |
|||
</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>27</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>33</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>6.18795244</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>0.016</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}> |
|||
<span className="bids"> |
|||
0.512<span className="depth" style={{ width: '2.64099%' }}></span> |
|||
</span> |
|||
</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>5</div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}>31</div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -odd"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
<div className="rt-tr-group"> |
|||
<div className="rt-tr -padRow -even"> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
<div className="rt-td" style={{ flex: '100 0 auto', width: '100px' }}><span> </span></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="-loading"> |
|||
<div className="-loading-inner">Loading...</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</section> |
|||
</section> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default DexExchange; |
|||
@ -0,0 +1,35 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../translate/translate'; |
|||
|
|||
class DexLoading extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
}; |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div className="dashboard-empty"> |
|||
<i className="loader-svg"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" className="lds-flickr" style={{ background: 'none' }}> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="53.3333" fill="#8A0EFB" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx2}}" cy="50" ng-attr-fill="{{config.c2}}" ng-attr-r="{{config.radius}}" cx="46.6667" fill="#1B1D23" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="0s" repeatCount="indefinite"></animate> |
|||
</circle> |
|||
<circle ng-attr-cx="{{config.cx1}}" cy="50" ng-attr-fill="{{config.c1}}" ng-attr-r="{{config.radius}}" cx="53.3333" fill="#8A0EFB" r="20"> |
|||
<animate attributeName="cx" calcMode="linear" values="30;70;30" keyTimes="0;0.5;1" dur="2" begin="-1s" repeatCount="indefinite"></animate> |
|||
<animate attributeName="fill-opacity" values="0;0;1;1" calcMode="discrete" keyTimes="0;0.499;0.5;1" ng-attr-dur="{{config.speed}}s" repeatCount="indefinite" dur="2s"></animate> |
|||
</circle> |
|||
</svg> |
|||
</i> |
|||
<p>Getting your coins ready.</p> |
|||
<p>it could take up to a minute.</p> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default DexLoading; |
|||
@ -0,0 +1,85 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../translate/translate'; |
|||
|
|||
class DexLogin extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
isNewPassphrase: false, |
|||
}; |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div className="login"> |
|||
<div className="Placeholder-bg"> |
|||
<span></span> |
|||
</div> |
|||
<section className="Placeholder-tagline"> |
|||
<i className="Placeholder-logo"> |
|||
<svg version="1.0" viewBox="0 0 800.000000 600.000000" preserveAspectRatio="xMidYMid meet"> |
|||
<defs> |
|||
<linearGradient id="gradient"> |
|||
<stop offset="0%" stopColor="#9300FF"></stop> |
|||
<stop offset="49%" stopColor="#5272E2"></stop> |
|||
<stop offset="95%" stopColor="#4C84FF"></stop> |
|||
</linearGradient> |
|||
</defs> |
|||
<g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)" fill="url(#gradient)" stroke="none"> |
|||
<path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359 -466 -228 -734 41 -85 151 -196 235 -239 115 -58 268 -77 378 -47 230 61 382 289 346 517 -6 35 -11 67 -11 72 0 4 -63 7 -140 7 l-139 0 24 -46 c32 -60 34 -147 5 -203 -47 -93 -162 -148 -252 -122 -174 51 -230 261 -101 383 59 57 70 58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100 89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30 -42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"></path> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
<h1 className="Placeholder-text"> |
|||
Barter <strong>DEX</strong> |
|||
</h1> |
|||
<section className="form"> |
|||
<div className="login-newpassphrase"> |
|||
<button className="Clipboard action lefttext normaltext dark"> |
|||
<span>Generate a new passphrase</span> |
|||
<i className="Clipboard-icon"> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<g> |
|||
<polygon points="304,96 288,96 288,176 368,176 368,160 304,160"></polygon> |
|||
<path d="M325.3,64H160v48h-48v336h240v-48h48V139L325.3,64z M336,432H128V128h32v272h176V432z M384,384H176V80h142.7l65.3,65.6V384 z"></path> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
</button> |
|||
</div> |
|||
<textarea name="form-field-name" placeholder="Enter here your passphrase" style={{ fontSize: '18px', minWidth: '260px' }}></textarea> |
|||
{ !this.state.isNewPassphrase && |
|||
<button disabled="" className="login-button withBorder action centered primary"> |
|||
<span>Login</span> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<polygon points="160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256 "></polygon> |
|||
</svg> |
|||
</i> |
|||
</button> |
|||
} |
|||
{ this.state.isNewPassphrase && |
|||
<button className="action align-left danger login-passphrase-notice"> |
|||
<span> |
|||
<strong> |
|||
Backup your passpharase, <br /><u>it can't be retrieved!</u> |
|||
</strong> |
|||
</span> |
|||
<i> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512"> |
|||
<g> |
|||
<path d="M223.9,329.7c-2.4,2.4-5.8,4.4-8.8,4.4s-6.4-2.1-8.9-4.5l-56-56l17.8-17.8l47.2,47.2l124.8-125.7l17.5,18.1L223.9,329.7z"></path> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
</button> |
|||
} |
|||
</section> |
|||
<footer><small>version 1.3.5</small></footer> |
|||
</section> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default DexLogin; |
|||
@ -0,0 +1,63 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../translate/translate'; |
|||
import DexNotifier from './dexNotifier'; |
|||
import DexLogin from './dexLogin'; |
|||
import DexCoins from './dexCoins'; |
|||
import DexSwapHistory from './dexSwapHistory'; |
|||
import DexLoading from './dexLoading'; |
|||
import DexExchange from './dexExchange'; |
|||
|
|||
// TODO: portfolio, charts, extended swaps history
|
|||
|
|||
class DexMain extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
isNewPassphrase: false, |
|||
}; |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div className="dex"> |
|||
<content className="app content-container"> |
|||
<ul className="growler"></ul> |
|||
<header className="window-header"> |
|||
<ul> |
|||
<li className="window__title"> |
|||
<i className="window-header-logo"> |
|||
<svg version="1.0" viewBox="0 0 800.000000 600.000000" preserveAspectRatio="xMidYMid meet"> |
|||
<defs> |
|||
<linearGradient id="gradient"> |
|||
<stop offset="0%" stopColor="#9300FF"></stop> |
|||
<stop offset="49%" stopColor="#5272E2"></stop> |
|||
<stop offset="95%" stopColor="#4C84FF"></stop> |
|||
</linearGradient> |
|||
</defs> |
|||
<g transform="translate(-100.000000,800.000000) scale(0.100000,-0.100000)" fill="url(#gradient)" stroke="none"> |
|||
<path d="M5310 3550 l0 -120 -38 0 c-56 0 -186 -35 -242 -66 -258 -141 -359 -466 -228 -734 41 -85 151 -196 235 -239 115 -58 268 -77 378 -47 230 61 382 289 346 517 -6 35 -11 67 -11 72 0 4 -63 7 -140 7 l-139 0 24 -46 c32 -60 34 -147 5 -203 -47 -93 -162 -148 -252 -122 -174 51 -230 261 -101 383 59 57 70 58 463 58 l360 0 0 30 c0 52 -30 179 -56 237 -34 78 -104 172 -171 233 -100 89 -274 159 -395 160 l-38 0 0 -120z m334 -154 c76 -32 106 -136 59 -202 -30 -42 -86 -68 -132 -60 -134 21 -162 197 -40 258 41 22 69 22 113 4z"></path> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
<h1> |
|||
Barter <strong>DEX</strong> |
|||
</h1> |
|||
<small className="window-header-appversion">version 1.3.5</small> |
|||
</li> |
|||
<li className="window__controls_right"> |
|||
<button className="action danger">logout</button> |
|||
</li> |
|||
</ul> |
|||
</header> |
|||
<section className="app-view"> |
|||
<DexExchange /> |
|||
<DexNotifier /> |
|||
</section> |
|||
<footer className="window-footer window-footer__visible"></footer> |
|||
</content> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default DexMain; |
|||
@ -0,0 +1 @@ |
|||
.st0{display:none;} .st1-angry{fill:none;stroke:#04050A;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st2-angry{fill:#04050A;} |
|||
@ -0,0 +1,50 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../translate/translate'; |
|||
|
|||
class DexNotifier extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
}; |
|||
} |
|||
|
|||
// states, append to class notifier
|
|||
// 'notifier-error': errors.length > 0,
|
|||
// 'notifier-critical': this.state.isCritical
|
|||
|
|||
render() { |
|||
return ( |
|||
<div className="notifier"> |
|||
<div className="notifier-title"> |
|||
<i className="notifier-title-icon"> |
|||
<svg style={{ enableBackground: 'new 0 0 48 48' }} version="1.1" viewBox="0 0 48 48"> |
|||
<g className="st0" id="Padding__x26__Artboard"></g> |
|||
<g id="Icons"> |
|||
<g> |
|||
<g> |
|||
<circle className="st1-angry" cx="24" cy="24" r="12.244"></circle> |
|||
</g> |
|||
<g> |
|||
<path className="st1-angry" d="M15.15215,24.5226c0,0,2.00649,1.63687,6.99631,1.58407"></path> |
|||
<path className="st2-angry" d="M19.50464,25.96163c0.17131,0.19669,0.27283,0.45049,0.27283,0.72332 c0,0.62815-0.50125,1.1294-1.12939,1.1294c-0.6218,0-1.1294-0.50125-1.1294-1.1294c0-0.41876,0.22842-0.78042,0.57104-0.97077 l0.47932,0.09953C18.56904,25.81371,19.43601,25.95249,19.50464,25.96163z"></path> |
|||
<path className="st1-angry" d="M32.84785,24.5226c0,0-2.00649,1.63687-6.99631,1.58407"></path> |
|||
<path className="st2-angry" d="M29.91028,25.71417c0.34262,0.19035,0.57104,0.55201,0.57104,0.97077 c0,0.62815-0.50759,1.1294-1.1294,1.1294c-0.62815,0-1.12939-0.50125-1.12939-1.1294c0-0.27283,0.10152-0.52663,0.27283-0.72332 L29.91028,25.71417z"></path> |
|||
<ellipse className="st2-angry" cx="24.12855" cy="30.68728" rx="3.48496" ry="0.48842"></ellipse> |
|||
</g> |
|||
</g> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
<h1 className="notifier-title-text">{ this.state.isCritical ? 'That\'s bad!' : 'Sorry!'}</h1> |
|||
</div> |
|||
<ul className="notifier-items"> |
|||
<span>Errors here</span> |
|||
<small className="notifier-appversion">version 1.3.5</small> |
|||
<button className="notifier-close">OK / Retry</button> |
|||
</ul> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default DexNotifier; |
|||
@ -0,0 +1,66 @@ |
|||
import React from 'react'; |
|||
import { translate } from '../../translate/translate'; |
|||
|
|||
class DexSwapHistory extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
}; |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<section className="balance-action"> |
|||
<ul className="orders-list singleColumn noHover"> |
|||
<li className="orders-item"> |
|||
<div className="orders-item-wrapper"> |
|||
<div className="orders-item-details"> |
|||
<div className="orders-item-details-coins"> |
|||
<section className="orders-item-details-coin KMD"> |
|||
<span className="orders-item-details-coin-amount"> |
|||
0.00397501 |
|||
</span> |
|||
<div className="orders-item-details-coin-icon coin-colorized"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 226.8 226.8" width="24" height="24" fill="currentColor"> |
|||
<path d="M113.4 0C50.8 0 0 50.8 0 113.4s50.8 113.4 113.4 113.4S226.8 176 226.8 113.4 176 0 113.4 0zm54.991 164.274l-3.878 3.878c-17.035 7.13-34.055 14.299-51.113 21.374-17.058-7.074-34.078-14.243-51.113-21.374l-3.878-3.878-21.142-50.879 21.142-50.879 3.878-3.878c11.93-4.994 23.858-9.997 35.792-14.982l9.842-4.12 2.725-1.13 2.754-1.141 2.753 1.141 2.725 1.13 9.842 4.12c11.934 4.985 23.862 9.988 35.792 14.982l3.878 3.878 21.142 50.879-21.141 50.879z"></path> |
|||
<path d="M113.4 68.322L81.528 81.524l-13.202 31.871 13.202 31.872 31.872 13.202 31.871-13.202 13.202-31.872-13.202-31.871L113.4 68.322zm22.536 67.61l-22.537 9.336-22.536-9.336-9.335-22.536 9.335-22.536 22.536-9.336 22.537 9.336 9.335 22.536-9.335 22.536z"></path> |
|||
</svg> |
|||
</div> |
|||
</section> |
|||
<div className="orders-item-details-type"> |
|||
<span className="orders-item-details-type-label">finished</span> |
|||
<i className="orders-item-details-coins-tradeType"> |
|||
<svg id="Layer_1" style={{ enableBackground: 'new 0 0 512 512' }} version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M370.1,181.3H399v47.3l81-83.2L399,64v54h-28.9c-82.7,0-129.4,61.9-170.6,116.5c-37,49.1-69,95.4-120.6,95.4H32v63.3h46.9 c82.7,0,129.4-65.8,170.6-120.4C286.5,223.7,318.4,181.3,370.1,181.3z M153.2,217.5c3.5-4.6,7.1-9.3,10.7-14.1 c8.8-11.6,18-23.9,28-36.1c-29.6-27.9-65.3-48.5-113-48.5H32v63.3c0,0,13.3-0.6,46.9,0C111.4,182.8,131.8,196.2,153.2,217.5z M399,330.4h-28.9c-31.5,0-55.7-15.8-78.2-39.3c-2.2,3-4.5,6-6.8,9c-9.9,13.1-20.5,27.2-32.2,41.1c30.4,29.9,67.2,52.5,117.2,52.5 H399V448l81-81.4l-81-83.2V330.4z"></path> |
|||
</svg> |
|||
</i> |
|||
</div> |
|||
<section className="orders-item-details-coin MNZ"> |
|||
<div className="orders-item-details-coin-icon coin-colorized"> |
|||
<i className="coin-icon-svg MNZ"> |
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Calque_1" x="0px" y="0px" viewBox="0 0 50 50" style={{ enableBackground: 'new 0 0 148 50' }}> |
|||
<g> |
|||
<path className="st1" d="M15.9,17.9"></path> |
|||
<path d="M39.9,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C39.6,35.1,40,34.9,39.9,34.5z"></path> |
|||
<path d="M28.3,34.5c-0.2-1.2-0.6-2.4-0.9-3.5c-0.3-1.2-0.6-2.4-0.9-3.6c-0.8-3-1.6-6-2.4-9c-0.2-0.7-0.3-1.4-0.5-2.1 c-0.1-0.3-0.2-0.7-0.5-0.9c-0.3-0.1-0.6-0.1-0.9-0.1c-0.4,0-0.8,0-1.2,0c-0.8,0-1.7,0-2.5,0c-0.6,0-1.1,0-1.7,0.1 c-0.5,0.1-1,0.4-1.2,0.9c-0.1,0.2,0,0.5,0.2,0.6c0.1,0.1,0.3,0,0.4-0.1c0.1,0,0.4-0.3,0.5-0.3l4.7,17.3l0,0c0,0,0,0.1,0,0.1 c0.1,0.4,0.3,0.8,0.6,0.9c0.2,0.1,0.4,0.2,0.7,0.2h0.5h0.8h2.4h1.3C28,35.1,28.4,34.9,28.3,34.5z"></path> |
|||
<path d="M19.1,30.7l-3.2-12.5h0c0-0.2-0.2-0.4-0.5-0.4c-0.2,0-0.4,0.2-0.5,0.4l0,0L10.7,34l0,0c0,0.1,0,0.2,0,0.2 c0,0.5,0.4,1,1,1H17c0.4,0,0.8-0.3,0.9-0.7l0,0L19.1,30.7z"></path> |
|||
<path d="M30.9,30.4l-3.5-12.6h0c0-0.2-0.2-0.3-0.4-0.3c-0.2,0-0.4,0.1-0.4,0.3h0l-0.7,2.5l3.5,12.2l0,0l0,0 c0.1,0.2,0.2,0.3,0.4,0.3c0.2,0,0.3-0.1,0.4-0.3l0,0L30.9,30.4z"></path> |
|||
</g> |
|||
</svg> |
|||
</i> |
|||
</div> |
|||
<span className="orders-item-details-coin-amount"> |
|||
0.03048882 |
|||
</span> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</section> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default DexSwapHistory; |
|||
@ -0,0 +1,30 @@ |
|||
/* |
|||
Animations classes |
|||
---- |
|||
- A collection of animations that can be reused to accomplish the same effect on any element |
|||
*/ |
|||
@-webkit-keyframes pulse { |
|||
0% { |
|||
opacity: 1 |
|||
} |
|||
100% { |
|||
opacity: .9 |
|||
} |
|||
} |
|||
|
|||
@-webkit-keyframes fadeInFromNone { |
|||
0% { |
|||
display: none; |
|||
opacity: 0; |
|||
} |
|||
|
|||
1% { |
|||
display: block; |
|||
opacity: 0; |
|||
} |
|||
|
|||
100% { |
|||
display: block; |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@ -0,0 +1,42 @@ |
|||
@import '_variables.scss'; |
|||
|
|||
/* Set base colour and font stack */ |
|||
.dex { |
|||
body { |
|||
font-family: 'Heebo', sans-serif; |
|||
overflow: hidden; |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
font-size: 16px; |
|||
margin: 0; |
|||
} |
|||
|
|||
.container { |
|||
display: flex; |
|||
padding-left: 16px; |
|||
padding-right: 16px; |
|||
} |
|||
|
|||
.row { |
|||
margin-left: -16px; |
|||
margin-right: -16px; |
|||
} |
|||
|
|||
.col { |
|||
padding-left: 16px; |
|||
padding-right: 16px; |
|||
} |
|||
|
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
|
|||
.grayed { filter: grayscale(100%); } |
|||
|
|||
a { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
@ -0,0 +1,665 @@ |
|||
@import '_variables.scss'; |
|||
|
|||
/* |
|||
Helper classes |
|||
---- |
|||
- A collection of classes that can be reused to accomplish the same effect on any element |
|||
*/ |
|||
|
|||
/* Allow element to be held down to drag the current window */ |
|||
.dex { |
|||
.webkit-drag { |
|||
-webkit-app-region: drag; |
|||
cursor: -webkit-grab; |
|||
} |
|||
|
|||
.a-width--full { width: 100%!important; } |
|||
|
|||
/* Hide element */ |
|||
.hidden { display: none !important!important; } |
|||
|
|||
/* Make current element a circle */ |
|||
.circle { border-radius: 50%!important; } |
|||
|
|||
.breakWord { |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.note { opacity: .8 } |
|||
.note b { color: $red } |
|||
|
|||
.coin-icon-placeholder { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
font-style: normal; |
|||
width: 30px; |
|||
height: 30px; |
|||
flex-shrink: 0; |
|||
font-weight: 600; |
|||
font-size: 22px; |
|||
} |
|||
|
|||
.coin-icon-placeholder, |
|||
.coin-icon-svg { |
|||
background: rgba(256,256,256,0.1); |
|||
box-shadow: $box-shadow-inputs; |
|||
border-radius: 50% !important; |
|||
} |
|||
|
|||
.large-number { |
|||
letter-spacing: -2px |
|||
} |
|||
|
|||
.xtra-large-number { |
|||
letter-spacing: -4px |
|||
} |
|||
|
|||
.amount-positive, |
|||
.amount-negative { |
|||
padding: 0px 2px; |
|||
border-radius: 6px; |
|||
} |
|||
|
|||
.amount-positive { |
|||
color: rgba(102, 215, 155, 1); |
|||
background-color: rgba(102, 215, 155, .1); |
|||
} |
|||
|
|||
.amount-negative { |
|||
color: #E24E40; |
|||
background-color: rgba(226, 78, 64, .1) |
|||
} |
|||
|
|||
code { |
|||
margin: 20px 0; |
|||
color: inherit; |
|||
background: $background-primary; |
|||
border-radius: 3px; |
|||
padding: 10px; |
|||
font: inherit; |
|||
} |
|||
|
|||
/* Make child vertical and horizontal centered */ |
|||
|
|||
.flexCenter { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.flexColumnCenter { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.txt { |
|||
-webkit-app-region: none !important; |
|||
-webkit-user-select: none !important; |
|||
cursor: default !important; |
|||
} |
|||
|
|||
|
|||
.MNZ > .coin-colorized { color: #B92484!important; } |
|||
.ADC > .coin-colorized { color: #3CB0E5!important; } |
|||
.AEON > .coin-colorized { color: #164450!important; } |
|||
.AMP > .coin-colorized { color: #048DD2!important; } |
|||
.ANC > .coin-colorized { color: #000!important; } |
|||
.ARCH > .coin-colorized { color: #002652!important; } |
|||
.ARDR > .coin-colorized { color: #1162a1!important; } |
|||
.AUR > .coin-colorized { color: #136c5e!important; } |
|||
.BANX > .coin-colorized { color: #225BA6!important; } |
|||
.BAT > .coin-colorized { color: #9e1f63!important; } |
|||
.BAY > .coin-colorized { color: #584ba1!important; } |
|||
.BC > .coin-colorized { color: #202121!important; } |
|||
.BCN > .coin-colorized { color: #964F51!important; } |
|||
.BFT > .coin-colorized { color: #4fc3f7!important; } |
|||
.BRK > .coin-colorized { color: #194fa0!important; } |
|||
.BRX > .coin-colorized { color: #a8c300!important; } |
|||
.BSD > .coin-colorized { color: #1186E7!important; } |
|||
.BTA > .coin-colorized { color: #210094!important; } |
|||
.BTC > .coin-colorized, .BCC > .coin-colorized { color: #F7931A!important; } |
|||
.BTCD > .coin-colorized { color: #2A72DC!important; } |
|||
.BTS > .coin-colorized { color: #03A9E0!important; } |
|||
.CLAM > .coin-colorized { color: #D6AB31!important; } |
|||
.CLOAK > .coin-colorized { color: #DF3F1E!important; } |
|||
.DAO > .coin-colorized { color: #FF3B3B!important; } |
|||
.DASH > .coin-colorized { color: #1c75bc!important; } |
|||
.DCR > .coin-colorized { color: #3b7cfb!important; } |
|||
.DCT > .coin-colorized { color: #008770!important; } |
|||
.DGB > .coin-colorized { color: #0066cc!important; } |
|||
.DGD > .coin-colorized, .DGX > .coin-colorized { color: #D8A24A!important; } |
|||
.DMD > .coin-colorized { color: #5497b2!important; } |
|||
.DOGE > .coin-colorized { color: #BA9F33!important; } |
|||
.EMC > .coin-colorized { color: #674c8c!important; } |
|||
.EOS > .coin-colorized { color: #19191A!important; } |
|||
.ERC > .coin-colorized { color: #101E84!important; } |
|||
.ETC > .coin-colorized { color: #669073!important; } |
|||
.ETH > .coin-colorized { color: #282828!important; } |
|||
.FC2 > .coin-colorized { color: #040405!important; } |
|||
.FCT > .coin-colorized { color: #2175BB!important; } |
|||
.FLO > .coin-colorized { color: #1358C8!important; } |
|||
.FRK > .coin-colorized { color: #0633cd!important; } |
|||
.FTC > .coin-colorized { color: #679EF1!important; } |
|||
.GAME > .coin-colorized { color: #ed1b24!important; } |
|||
.GDC > .coin-colorized { color: #E9A226!important; } |
|||
.GEMZ > .coin-colorized { color: #e86060!important; } |
|||
.GLD > .coin-colorized { color: #E8BE24!important; } |
|||
.GNO > .coin-colorized { color: #00A6C4!important; } |
|||
.GNT > .coin-colorized { color: #00d6e3!important; } |
|||
.GOLOS > .coin-colorized { color: #2670B7!important; } |
|||
.GRC > .coin-colorized { color: #88A13C!important; } |
|||
.GRS > .coin-colorized { color: #648FA0!important; } |
|||
.HEAT > .coin-colorized { color: #ff5606!important; } |
|||
.ICN > .coin-colorized { color: #4c6f8c!important; } |
|||
.IFC > .coin-colorized { color: #ed272d!important; } |
|||
.INCNT > .coin-colorized { color: #f2932f!important; } |
|||
.IOC > .coin-colorized { color: #2fa3de!important; } |
|||
.IOTA > .coin-colorized { color: #FFFFFF!important; } |
|||
.JBS > .coin-colorized { color: #1A8BCD!important; } |
|||
.KMD > .coin-colorized { color: #326464!important; } |
|||
.KOBO > .coin-colorized { color: #80C342!important; } |
|||
.KORE > .coin-colorized { color: #DF4124!important; } |
|||
.LBC > .coin-colorized { color: #015C47!important; } |
|||
.LDOGE > .coin-colorized { color: #ffcc00!important; } |
|||
.LISK > .coin-colorized { color: #1A6896!important; } |
|||
.LTC > .coin-colorized { color: #838383!important; } |
|||
.MAID > .coin-colorized { color: #5492D6!important; } |
|||
.MCO > .coin-colorized { color: #0D3459!important; } |
|||
.MINT > .coin-colorized { color: #006835!important; } |
|||
.MONA > .coin-colorized { color: #a99364!important; } |
|||
.MRC > .coin-colorized { color: #4279bd!important; } |
|||
.MSC > .coin-colorized { color: #1D4983!important; } |
|||
.MTR > .coin-colorized { color: #b92429!important; } |
|||
.MUE > .coin-colorized { color: #f5a10e!important; } |
|||
.NBT > .coin-colorized { color: #FFC93D!important; } |
|||
.NEO > .coin-colorized { color: #58BF00!important; } |
|||
.NEOS > .coin-colorized { color: #1d1d1b!important; } |
|||
.NEU > .coin-colorized { color: #2983c0!important; } |
|||
.NLG > .coin-colorized { color: #003E7E!important; } |
|||
.NMC > .coin-colorized { color: #6787B7!important; } |
|||
.NOTE > .coin-colorized { color: #42daff!important; } |
|||
.NVC > .coin-colorized { color: #ecab41!important; } |
|||
.NXT > .coin-colorized { color: #008FBB!important; } |
|||
.OK > .coin-colorized { color: #0165A4!important; } |
|||
.OMG > .coin-colorized { color: #1A53F0!important; } |
|||
.OMNI > .coin-colorized { color: #18347E!important; } |
|||
.OPAL > .coin-colorized { color: #7193AA!important; } |
|||
.PART > .coin-colorized { color: #05D5A3!important; } |
|||
.PIGGY > .coin-colorized { color: #F27A7A!important; } |
|||
.PINK > .coin-colorized { color: #ED31CA!important; } |
|||
.PIVX > .coin-colorized { color: #3b2f4d!important; } |
|||
.POT > .coin-colorized { color: #105B2F!important; } |
|||
.PPC > .coin-colorized { color: #3FA30C!important; } |
|||
.QRK > .coin-colorized { color: #22AABF!important; } |
|||
.RADS > .coin-colorized { color: #924cea!important; } |
|||
.RBIES > .coin-colorized { color: #C62436!important; } |
|||
.RBT > .coin-colorized { color: #0d4982!important; } |
|||
.RBY > .coin-colorized { color: #D31F26!important; } |
|||
.RDD > .coin-colorized { color: #ED1C24!important; } |
|||
.REP > .coin-colorized { color: #40a2cb!important; } |
|||
.RISE > .coin-colorized { color: #43CEA2!important; } |
|||
.SAR > .coin-colorized { color: #1B72B8!important; } |
|||
.SCOT > .coin-colorized { color: #3498DB!important; } |
|||
.SDC > .coin-colorized { color: #981D2D!important; } |
|||
.SIA > .coin-colorized { color: #00CBA0!important; } |
|||
.SJCX > .coin-colorized { color: #003366!important; } |
|||
.SLG > .coin-colorized { color: #5A6875!important; } |
|||
.SLS > .coin-colorized { color: #1EB549!important; } |
|||
.SNRG > .coin-colorized { color: #160363!important; } |
|||
.START > .coin-colorized { color: #01AEF0!important; } |
|||
.STEEM > .coin-colorized { color: #1A5099!important; } |
|||
.STR > .coin-colorized { color: #08B5E5!important; } |
|||
.STRAT > .coin-colorized { color: #2398dd!important; } |
|||
.SWIFT > .coin-colorized { color: #428BCA!important; } |
|||
.SYNC > .coin-colorized { color: #008DD2!important; } |
|||
.SYS > .coin-colorized { color: #0098DA!important; } |
|||
.TRIG > .coin-colorized { color: #1fbff4!important; } |
|||
.TX > .coin-colorized { color: #1F8BCC!important; } |
|||
.UBQ > .coin-colorized { color: #00ec8d!important; } |
|||
.UNITY > .coin-colorized { color: #ED8527!important; } |
|||
.USDT > .coin-colorized { color: #2CA07A!important; } |
|||
.VIOR > .coin-colorized { color: #1F52A4!important; } |
|||
.VNL > .coin-colorized { color: #404249!important; } |
|||
.VPN > .coin-colorized { color: #589700!important; } |
|||
.VRC > .coin-colorized { color: #418bca!important; } |
|||
.VTC > .coin-colorized { color: #1b5c2e!important; } |
|||
.WAVES > .coin-colorized { color: #24aad6!important; } |
|||
.XAI > .coin-colorized { color: #2ef99f!important; } |
|||
.XBS > .coin-colorized { color: #d3261d!important; } |
|||
.XCP > .coin-colorized { color: #EC1550!important; } |
|||
.XEM > .coin-colorized { color: #41bf76!important; } |
|||
.XMR > .coin-colorized { color: #FF6600!important; } |
|||
.XPM > .coin-colorized { color: #e5b625!important; } |
|||
.XRP > .coin-colorized { color: #346AA9!important; } |
|||
.XTZ > .coin-colorized { color: #A6DF00!important; } |
|||
.XVG > .coin-colorized { color: #42AFB2!important; } |
|||
.YBC > .coin-colorized { color: #D6C154!important; } |
|||
.ZEC > .coin-colorized { color: #e5a93d!important; } |
|||
.ZEIT > .coin-colorized { color: #ACACAC!important; } |
|||
.REVS > .coin-colorized { color: #FF6600!important; } |
|||
|
|||
|
|||
|
|||
.MNZ > .coin-colorized svg path { fill: #B92484 !important; } |
|||
.ADC > .coin-colorized svg { fill: #3CB0E5!important; } |
|||
.AEON > .coin-colorized svg { fill: #164450!important; } |
|||
.AMP > .coin-colorized svg { fill: #048DD2!important; } |
|||
.ANC > .coin-colorized svg { fill: #000!important; } |
|||
.ARCH > .coin-colorized svg { fill: #002652!important; } |
|||
.ARDR > .coin-colorized svg { fill: #1162a1!important; } |
|||
.AUR > .coin-colorized svg { fill: #136c5e!important; } |
|||
.BANX > .coin-colorized svg { fill: #225BA6!important; } |
|||
.BAT > .coin-colorized svg { fill: #9e1f63!important; } |
|||
.BAY > .coin-colorized svg { fill: #584ba1!important; } |
|||
.BC > .coin-colorized svg { fill: #202121!important; } |
|||
.BCN > .coin-colorized svg { fill: #964F51!important; } |
|||
.BFT > .coin-colorized svg { fill: #4fc3f7!important; } |
|||
.BRK > .coin-colorized svg { fill: #194fa0!important; } |
|||
.BRX > .coin-colorized svg { fill: #a8c300!important; } |
|||
.BSD > .coin-colorized svg { fill: #1186E7!important; } |
|||
.BTA > .coin-colorized svg { fill: #210094!important; } |
|||
.BTC > .coin-colorized svg , .BCC > .coin-colorized svg { fill: #F7931A!important; } |
|||
.BTCD > .coin-colorized svg { fill: #2A72DC!important; } |
|||
.BTS > .coin-colorized svg { fill: #03A9E0!important; } |
|||
.CLAM > .coin-colorized svg { fill: #D6AB31!important; } |
|||
.CLOAK > .coin-colorized svg { fill: #DF3F1E!important; } |
|||
.DAO > .coin-colorized svg { fill: #FF3B3B!important; } |
|||
.DASH > .coin-colorized svg { fill: #1c75bc!important; } |
|||
.DCR > .coin-colorized svg { fill: #3b7cfb!important; } |
|||
.DCT > .coin-colorized svg { fill: #008770!important; } |
|||
.DGB > .coin-colorized svg { fill: #0066cc!important; } |
|||
.DGD > .coin-colorized svg, .DGX > .coin-colorized svg { fill: #D8A24A!important; } |
|||
.DMD > .coin-colorized svg { fill: #5497b2!important; } |
|||
.DOGE > .coin-colorized svg { fill: #BA9F33!important; } |
|||
.EMC > .coin-colorized svg { fill: #674c8c!important; } |
|||
.EOS > .coin-colorized svg { fill: #19191A!important; } |
|||
.ERC > .coin-colorized svg { fill: #101E84!important; } |
|||
.ETC > .coin-colorized svg { fill: #669073!important; } |
|||
.ETH > .coin-colorized svg { fill: #282828!important; } |
|||
.FC2 > .coin-colorized svg { fill: #040405!important; } |
|||
.FCT > .coin-colorized svg { fill: #2175BB!important; } |
|||
.FLO > .coin-colorized svg { fill: #1358C8!important; } |
|||
.FRK > .coin-colorized svg { fill: #0633cd!important; } |
|||
.FTC > .coin-colorized svg { fill: #679EF1!important; } |
|||
.GAME > .coin-colorized svg { fill: #ed1b24!important; } |
|||
.GDC > .coin-colorized svg { fill: #E9A226!important; } |
|||
.GEMZ > .coin-colorized svg { fill: #e86060!important; } |
|||
.GLD > .coin-colorized svg { fill: #E8BE24!important; } |
|||
.GNO > .coin-colorized svg { fill: #00A6C4!important; } |
|||
.GNT > .coin-colorized svg { fill: #00d6e3!important; } |
|||
.GOLOS > .coin-colorized svg { fill: #2670B7!important; } |
|||
.GRC > .coin-colorized svg { fill: #88A13C!important; } |
|||
.GRS > .coin-colorized svg { fill: #648FA0!important; } |
|||
.HEAT > .coin-colorized svg { fill: #ff5606!important; } |
|||
.ICN > .coin-colorized svg { fill: #4c6f8c!important; } |
|||
.IFC > .coin-colorized svg { fill: #ed272d!important; } |
|||
.INCNT > .coin-colorized svg { fill: #f2932f!important; } |
|||
.IOC > .coin-colorized svg { fill: #2fa3de!important; } |
|||
.IOTA > .coin-colorized svg { fill: #FFFFFF!important; } |
|||
.JBS > .coin-colorized svg { fill: #1A8BCD!important; } |
|||
.KMD > .coin-colorized svg { fill: #326464!important; } |
|||
.KOBO > .coin-colorized svg { fill: #80C342!important; } |
|||
.KORE > .coin-colorized svg { fill: #DF4124!important; } |
|||
.LBC > .coin-colorized svg { fill: #015C47!important; } |
|||
.LDOGE > .coin-colorized svg { fill: #ffcc00!important; } |
|||
.LISK > .coin-colorized svg { fill: #1A6896!important; } |
|||
.LTC > .coin-colorized svg { fill: #838383!important; } |
|||
.MAID > .coin-colorized svg { fill: #5492D6!important; } |
|||
.MCO > .coin-colorized svg { fill: #0D3459!important; } |
|||
.MINT > .coin-colorized svg { fill: #006835!important; } |
|||
.MONA > .coin-colorized svg { fill: #a99364!important; } |
|||
.MRC > .coin-colorized svg { fill: #4279bd!important; } |
|||
.MSC > .coin-colorized svg { fill: #1D4983!important; } |
|||
.MTR > .coin-colorized svg { fill: #b92429!important; } |
|||
.MUE > .coin-colorized svg { fill: #f5a10e!important; } |
|||
.NBT > .coin-colorized svg { fill: #FFC93D!important; } |
|||
.NEO > .coin-colorized svg { fill: #58BF00!important; } |
|||
.NEOS > .coin-colorized svg { fill: #1d1d1b!important; } |
|||
.NEU > .coin-colorized svg { fill: #2983c0!important; } |
|||
.NLG > .coin-colorized svg { fill: #003E7E!important; } |
|||
.NMC > .coin-colorized svg { fill: #6787B7!important; } |
|||
.NOTE > .coin-colorized svg { fill: #42daff!important; } |
|||
.NVC > .coin-colorized svg { fill: #ecab41!important; } |
|||
.NXT > .coin-colorized svg { fill: #008FBB!important; } |
|||
.OK > .coin-colorized svg { fill: #0165A4!important; } |
|||
.OMG > .coin-colorized svg { fill: #1A53F0!important; } |
|||
.OMNI > .coin-colorized svg { fill: #18347E!important; } |
|||
.OPAL > .coin-colorized svg { fill: #7193AA!important; } |
|||
.PART > .coin-colorized svg { fill: #05D5A3!important; } |
|||
.PIGGY > .coin-colorized svg { fill: #F27A7A!important; } |
|||
.PINK > .coin-colorized svg { fill: #ED31CA!important; } |
|||
.PIVX > .coin-colorized svg { fill: #3b2f4d!important; } |
|||
.POT > .coin-colorized svg { fill: #105B2F!important; } |
|||
.PPC > .coin-colorized svg { fill: #3FA30C!important; } |
|||
.QRK > .coin-colorized svg { fill: #22AABF!important; } |
|||
.RADS > .coin-colorized svg { fill: #924cea!important; } |
|||
.RBIES > .coin-colorized svg { fill: #C62436!important; } |
|||
.RBT > .coin-colorized svg { fill: #0d4982!important; } |
|||
.RBY > .coin-colorized svg { fill: #D31F26!important; } |
|||
.RDD > .coin-colorized svg { fill: #ED1C24!important; } |
|||
.REP > .coin-colorized svg { fill: #40a2cb!important; } |
|||
.RISE > .coin-colorized svg { fill: #43CEA2!important; } |
|||
.SAR > .coin-colorized svg { fill: #1B72B8!important; } |
|||
.SCOT > .coin-colorized svg { fill: #3498DB!important; } |
|||
.SDC > .coin-colorized svg { fill: #981D2D!important; } |
|||
.SIA > .coin-colorized svg { fill: #00CBA0!important; } |
|||
.SJCX > .coin-colorized svg { fill: #003366!important; } |
|||
.SLG > .coin-colorized svg { fill: #5A6875!important; } |
|||
.SLS > .coin-colorized svg { fill: #1EB549!important; } |
|||
.SNRG > .coin-colorized svg { fill: #160363!important; } |
|||
.START > .coin-colorized svg { fill: #01AEF0!important; } |
|||
.STEEM > .coin-colorized svg { fill: #1A5099!important; } |
|||
.STR > .coin-colorized svg { fill: #08B5E5!important; } |
|||
.STRAT > .coin-colorized svg { fill: #2398dd!important; } |
|||
.SWIFT > .coin-colorized svg { fill: #428BCA!important; } |
|||
.SYNC > .coin-colorized svg { fill: #008DD2!important; } |
|||
.SYS > .coin-colorized svg { fill: #0098DA!important; } |
|||
.TRIG > .coin-colorized svg { fill: #1fbff4!important; } |
|||
.TX > .coin-colorized svg { fill: #1F8BCC!important; } |
|||
.UBQ > .coin-colorized svg { fill: #00ec8d!important; } |
|||
.UNITY > .coin-colorized svg { fill: #ED8527!important; } |
|||
.USDT > .coin-colorized svg { fill: #2CA07A!important; } |
|||
.VIOR > .coin-colorized svg { fill: #1F52A4!important; } |
|||
.VNL > .coin-colorized svg { fill: #404249!important; } |
|||
.VPN > .coin-colorized svg { fill: #589700!important; } |
|||
.VRC > .coin-colorized svg { fill: #418bca!important; } |
|||
.VTC > .coin-colorized svg { fill: #1b5c2e!important; } |
|||
.WAVES > .coin-colorized svg { fill: #24aad6!important; } |
|||
.XAI > .coin-colorized svg { fill: #2ef99f!important; } |
|||
.XBS > .coin-colorized svg { fill: #d3261d!important; } |
|||
.XCP > .coin-colorized svg { fill: #EC1550!important; } |
|||
.XEM > .coin-colorized svg { fill: #41bf76!important; } |
|||
.XMR > .coin-colorized svg { fill: #FF6600!important; } |
|||
.XPM > .coin-colorized svg { fill: #e5b625!important; } |
|||
.XRP > .coin-colorized svg { fill: #346AA9!important; } |
|||
.XTZ > .coin-colorized svg { fill: #A6DF00!important; } |
|||
.XVG > .coin-colorized svg { fill: #42AFB2!important; } |
|||
.YBC > .coin-colorized svg { fill: #D6C154!important; } |
|||
.ZEC > .coin-colorized svg { fill: #e5a93d!important; } |
|||
.ZEIT > .coin-colorized svg { fill: #ACACAC!important; } |
|||
|
|||
|
|||
|
|||
|
|||
.MNZ .coin-bg { background-color: #B92484!important } |
|||
.ADC .coin-bg { background-color: #3CB0E5!important; } |
|||
.AEON .coin-bg { background-color: #164450!important; } |
|||
.AMP .coin-bg { background-color: #048DD2!important; } |
|||
.ANC .coin-bg { background-color: #000!important; } |
|||
.ARCH .coin-bg { background-color: #002652!important; } |
|||
.ARDR .coin-bg { background-color: #1162a1!important; } |
|||
.AUR .coin-bg { background-color: #136c5e!important; } |
|||
.BANX .coin-bg { background-color: #225BA6!important; } |
|||
.BAT .coin-bg { background-color: #9e1f63!important; } |
|||
.BAY .coin-bg { background-color: #584ba1!important; } |
|||
.BC .coin-bg { background-color: #202121!important; } |
|||
.BCN .coin-bg { background-color: #964F51!important; } |
|||
.BFT .coin-bg { background-color: #4fc3f7!important; } |
|||
.BRK .coin-bg { background-color: #194fa0!important; } |
|||
.BRX .coin-bg { background-color: #a8c300!important; } |
|||
.BSD .coin-bg { background-color: #1186E7!important; } |
|||
.BTA .coin-bg { background-color: #210094!important; } |
|||
.BTC .coin-bg, .BCC .coin-bg { background-color: #F7931A!important; } |
|||
.BTCD .coin-bg { background-color: #2A72DC!important; } |
|||
.BTS .coin-bg { background-color: #03A9E0!important; } |
|||
.CLAM .coin-bg { background-color: #D6AB31!important; } |
|||
.CLOAK .coin-bg { background-color: #DF3F1E!important; } |
|||
.DAO .coin-bg { background-color: #FF3B3B!important; } |
|||
.DASH .coin-bg { background-color: #1c75bc!important; } |
|||
.DCR .coin-bg { background-color: #3b7cfb!important; } |
|||
.DCT .coin-bg { background-color: #008770!important; } |
|||
.DGB .coin-bg { background-color: #0066cc!important; } |
|||
.DGD .coin-bg, .DGX .coin-bg { background-color: #D8A24A!important; } |
|||
.DMD .coin-bg { background-color: #5497b2!important; } |
|||
.DOGE .coin-bg { background-color: #BA9F33!important; } |
|||
.EMC .coin-bg { background-color: #674c8c!important; } |
|||
.EOS .coin-bg { background-color: #19191A!important; } |
|||
.ERC .coin-bg { background-color: #101E84!important; } |
|||
.ETC .coin-bg { background-color: #669073!important; } |
|||
.ETH .coin-bg { background-color: #282828!important; } |
|||
.FC2 .coin-bg { background-color: #040405!important; } |
|||
.FCT .coin-bg { background-color: #2175BB!important; } |
|||
.FLO .coin-bg { background-color: #1358C8!important; } |
|||
.FRK .coin-bg { background-color: #0633cd!important; } |
|||
.FTC .coin-bg { background-color: #679EF1!important; } |
|||
.GAME .coin-bg { background-color: #ed1b24!important; } |
|||
.GDC .coin-bg { background-color: #E9A226!important; } |
|||
.GEMZ .coin-bg { background-color: #e86060!important; } |
|||
.GLD .coin-bg { background-color: #E8BE24!important; } |
|||
.GNO .coin-bg { background-color: #00A6C4!important; } |
|||
.GNT .coin-bg { background-color: #00d6e3!important; } |
|||
.GOLOS .coin-bg { background-color: #2670B7!important; } |
|||
.GRC .coin-bg { background-color: #88A13C!important; } |
|||
.GRS .coin-bg { background-color: #648FA0!important; } |
|||
.HEAT .coin-bg { background-color: #ff5606!important; } |
|||
.ICN .coin-bg { background-color: #4c6f8c!important; } |
|||
.IFC .coin-bg { background-color: #ed272d!important; } |
|||
.INCNT .coin-bg { background-color: #f2932f!important; } |
|||
.IOC .coin-bg { background-color: #2fa3de!important; } |
|||
.IOTA .coin-bg { background-color: #FFFFFF!important; } |
|||
.JBS .coin-bg { background-color: #1A8BCD!important; } |
|||
.KMD .coin-bg { background-color: #326464!important; } |
|||
.KOBO .coin-bg { background-color: #80C342!important; } |
|||
.KORE .coin-bg { background-color: #DF4124!important; } |
|||
.LBC .coin-bg { background-color: #015C47!important; } |
|||
.LDOGE .coin-bg { background-color: #ffcc00!important; } |
|||
.LISK .coin-bg { background-color: #1A6896!important; } |
|||
.LTC .coin-bg { background-color: #838383!important; } |
|||
.MAID .coin-bg { background-color: #5492D6!important; } |
|||
.MCO .coin-bg { background-color: #0D3459!important; } |
|||
.MINT .coin-bg { background-color: #006835!important; } |
|||
.MONA .coin-bg { background-color: #a99364!important; } |
|||
.MRC .coin-bg { background-color: #4279bd!important; } |
|||
.MSC .coin-bg { background-color: #1D4983!important; } |
|||
.MTR .coin-bg { background-color: #b92429!important; } |
|||
.MUE .coin-bg { background-color: #f5a10e!important; } |
|||
.NBT .coin-bg { background-color: #FFC93D!important; } |
|||
.NEO .coin-bg { background-color: #58BF00!important; } |
|||
.NEOS .coin-bg { background-color: #1d1d1b!important; } |
|||
.NEU .coin-bg { background-color: #2983c0!important; } |
|||
.NLG .coin-bg { background-color: #003E7E!important; } |
|||
.NMC .coin-bg { background-color: #6787B7!important; } |
|||
.NOTE .coin-bg { background-color: #42daff!important; } |
|||
.NVC .coin-bg { background-color: #ecab41!important; } |
|||
.NXT .coin-bg { background-color: #008FBB!important; } |
|||
.OK .coin-bg { background-color: #0165A4!important; } |
|||
.OMG .coin-bg { background-color: #1A53F0!important; } |
|||
.OMNI .coin-bg { background-color: #18347E!important; } |
|||
.OPAL .coin-bg { background-color: #7193AA!important; } |
|||
.PART .coin-bg { background-color: #05D5A3!important; } |
|||
.PIGGY .coin-bg { background-color: #F27A7A!important; } |
|||
.PINK .coin-bg { background-color: #ED31CA!important; } |
|||
.PIVX .coin-bg { background-color: #3b2f4d!important; } |
|||
.POT .coin-bg { background-color: #105B2F!important; } |
|||
.PPC .coin-bg { background-color: #3FA30C!important; } |
|||
.QRK .coin-bg { background-color: #22AABF!important; } |
|||
.RADS .coin-bg { background-color: #924cea!important; } |
|||
.RBIES .coin-bg { background-color: #C62436!important; } |
|||
.RBT .coin-bg { background-color: #0d4982!important; } |
|||
.RBY .coin-bg { background-color: #D31F26!important; } |
|||
.RDD .coin-bg { background-color: #ED1C24!important; } |
|||
.REP .coin-bg { background-color: #40a2cb!important; } |
|||
.RISE .coin-bg { background-color: #43CEA2!important; } |
|||
.SAR .coin-bg { background-color: #1B72B8!important; } |
|||
.SCOT .coin-bg { background-color: #3498DB!important; } |
|||
.SDC .coin-bg { background-color: #981D2D!important; } |
|||
.SIA .coin-bg { background-color: #00CBA0!important; } |
|||
.SJCX .coin-bg { background-color: #003366!important; } |
|||
.SLG .coin-bg { background-color: #5A6875!important; } |
|||
.SLS .coin-bg { background-color: #1EB549!important; } |
|||
.SNRG .coin-bg { background-color: #160363!important; } |
|||
.START .coin-bg { background-color: #01AEF0!important; } |
|||
.STEEM .coin-bg { background-color: #1A5099!important; } |
|||
.STR .coin-bg { background-color: #08B5E5!important; } |
|||
.STRAT .coin-bg { background-color: #2398dd!important; } |
|||
.SWIFT .coin-bg { background-color: #428BCA!important; } |
|||
.SYNC .coin-bg { background-color: #008DD2!important; } |
|||
.SYS .coin-bg { background-color: #0098DA!important; } |
|||
.TRIG .coin-bg { background-color: #1fbff4!important; } |
|||
.TX .coin-bg { background-color: #1F8BCC!important; } |
|||
.UBQ .coin-bg { background-color: #00ec8d!important; } |
|||
.UNITY .coin-bg { background-color: #ED8527!important; } |
|||
.USDT .coin-bg { background-color: #2CA07A!important; } |
|||
.VIOR .coin-bg { background-color: #1F52A4!important; } |
|||
.VNL .coin-bg { background-color: #404249!important; } |
|||
.VPN .coin-bg { background-color: #589700!important; } |
|||
.VRC .coin-bg { background-color: #418bca!important; } |
|||
.VTC .coin-bg { background-color: #1b5c2e!important; } |
|||
.WAVES .coin-bg { background-color: #24aad6!important; } |
|||
.XAI .coin-bg { background-color: #2ef99f!important; } |
|||
.XBS .coin-bg { background-color: #d3261d!important; } |
|||
.XCP .coin-bg { background-color: #EC1550!important; } |
|||
.XEM .coin-bg { background-color: #41bf76!important; } |
|||
.XMR .coin-bg { background-color: #FF6600!important; } |
|||
.XPM .coin-bg { background-color: #e5b625!important; } |
|||
.XRP .coin-bg { background-color: #346AA9!important; } |
|||
.XTZ .coin-bg { background-color: #A6DF00!important; } |
|||
.XVG .coin-bg { background-color: #42AFB2!important; } |
|||
.YBC .coin-bg { background-color: #D6C154!important; } |
|||
.ZEC .coin-bg { background-color: #e5a93d!important; } |
|||
.ZEIT .coin-bg { background-color: #ACACAC!important; } |
|||
.REVS .coin-bg { background-color: #FF6600!important; } |
|||
|
|||
|
|||
|
|||
.shadow.ADC:hover { box-shadow: 0 12px 40px #3CB0E5!important; } |
|||
.shadow.AEON:hover { box-shadow: 0 12px 40px #164450!important; } |
|||
.shadow.AMP:hover { box-shadow: 0 12px 40px #048DD2!important; } |
|||
.shadow.ANC:hover { box-shadow: 0 12px 40px #000!important; } |
|||
.shadow.ARCH:hover { box-shadow: 0 12px 40px #002652!important; } |
|||
.shadow.ARDR:hover { box-shadow: 0 12px 40px #1162a1!important; } |
|||
.shadow.AUR:hover { box-shadow: 0 12px 40px #136c5e!important; } |
|||
.shadow.BANX:hover { box-shadow: 0 12px 40px #225BA6!important; } |
|||
.shadow.BAT:hover { box-shadow: 0 12px 40px #9e1f63!important; } |
|||
.shadow.BAY:hover { box-shadow: 0 12px 40px #584ba1!important; } |
|||
.shadow.BC:hover { box-shadow: 0 12px 40px #202121!important; } |
|||
.shadow.BCN:hover { box-shadow: 0 12px 40px #964F51!important; } |
|||
.shadow.BFT:hover { box-shadow: 0 12px 40px #4fc3f7!important; } |
|||
.shadow.BRK:hover { box-shadow: 0 12px 40px #194fa0!important; } |
|||
.shadow.BRX:hover { box-shadow: 0 12px 40px #a8c300!important; } |
|||
.shadow.BSD:hover { box-shadow: 0 12px 40px #1186E7!important; } |
|||
.shadow.BTA:hover { box-shadow: 0 12px 40px #210094!important; } |
|||
.shadow.BTC:hover, .shadow.BCC:hover { box-shadow: 0 12px 40px #F7931A!important; } |
|||
.shadow.BTCD:hover { box-shadow: 0 12px 40px #2A72DC!important; } |
|||
.shadow.BTS:hover { box-shadow: 0 12px 40px #03A9E0!important; } |
|||
.shadow.CLAM:hover { box-shadow: 0 12px 40px #D6AB31!important; } |
|||
.shadow.CLOAK:hover { box-shadow: 0 12px 40px #DF3F1E!important; } |
|||
.shadow.DAO:hover { box-shadow: 0 12px 40px #FF3B3B!important; } |
|||
.shadow.DASH:hover { box-shadow: 0 12px 40px #1c75bc!important; } |
|||
.shadow.DCR:hover { box-shadow: 0 12px 40px #3b7cfb!important; } |
|||
.shadow.DCT:hover { box-shadow: 0 12px 40px #008770!important; } |
|||
.shadow.DGB:hover { box-shadow: 0 12px 40px #0066cc!important; } |
|||
.shadow.DGD:hover, .shadow.DGX:hover { box-shadow: 0 12px 40px #D8A24A!important; } |
|||
.shadow.DMD:hover { box-shadow: 0 12px 40px #5497b2!important; } |
|||
.shadow.DOGE:hover { box-shadow: 0 12px 40px #BA9F33!important; } |
|||
.shadow.EMC:hover { box-shadow: 0 12px 40px #674c8c!important; } |
|||
.shadow.EOS:hover { box-shadow: 0 12px 40px #19191A!important; } |
|||
.shadow.ERC:hover { box-shadow: 0 12px 40px #101E84!important; } |
|||
.shadow.ETC:hover { box-shadow: 0 12px 40px #669073!important; } |
|||
.shadow.ETH:hover { box-shadow: 0 12px 40px #282828!important; } |
|||
.shadow.FC2:hover { box-shadow: 0 12px 40px #040405!important; } |
|||
.shadow.FCT:hover { box-shadow: 0 12px 40px #2175BB!important; } |
|||
.shadow.FLO:hover { box-shadow: 0 12px 40px #1358C8!important; } |
|||
.shadow.FRK:hover { box-shadow: 0 12px 40px #0633cd!important; } |
|||
.shadow.FTC:hover { box-shadow: 0 12px 40px #679EF1!important; } |
|||
.shadow.GAME:hover { box-shadow: 0 12px 40px #ed1b24!important; } |
|||
.shadow.GDC:hover { box-shadow: 0 12px 40px #E9A226!important; } |
|||
.shadow.GEMZ:hover { box-shadow: 0 12px 40px #e86060!important; } |
|||
.shadow.GLD:hover { box-shadow: 0 12px 40px #E8BE24!important; } |
|||
.shadow.GNO:hover { box-shadow: 0 12px 40px #00A6C4!important; } |
|||
.shadow.GNT:hover { box-shadow: 0 12px 40px #00d6e3!important; } |
|||
.shadow.GOLOS:hover { box-shadow: 0 12px 40px #2670B7!important; } |
|||
.shadow.GRC:hover { box-shadow: 0 12px 40px #88A13C!important; } |
|||
.shadow.GRS:hover { box-shadow: 0 12px 40px #648FA0!important; } |
|||
.shadow.HEAT:hover { box-shadow: 0 12px 40px #ff5606!important; } |
|||
.shadow.ICN:hover { box-shadow: 0 12px 40px #4c6f8c!important; } |
|||
.shadow.IFC:hover { box-shadow: 0 12px 40px #ed272d!important; } |
|||
.shadow.INCNT:hover { box-shadow: 0 12px 40px #f2932f!important; } |
|||
.shadow.IOC:hover { box-shadow: 0 12px 40px #2fa3de!important; } |
|||
.shadow.IOTA:hover { box-shadow: 0 12px 40px #FFFFFF!important; } |
|||
.shadow.JBS:hover { box-shadow: 0 12px 40px #1A8BCD!important; } |
|||
.shadow.KMD:hover { box-shadow: 0 12px 40px #326464!important; } |
|||
.shadow.KOBO:hover { box-shadow: 0 12px 40px #80C342!important; } |
|||
.shadow.KORE:hover { box-shadow: 0 12px 40px #DF4124!important; } |
|||
.shadow.LBC:hover { box-shadow: 0 12px 40px #015C47!important; } |
|||
.shadow.LDOGE:hover { box-shadow: 0 12px 40px #ffcc00!important; } |
|||
.shadow.LISK:hover { box-shadow: 0 12px 40px #1A6896!important; } |
|||
.shadow.LTC:hover { box-shadow: 0 12px 40px #838383!important; } |
|||
.shadow.MAID:hover { box-shadow: 0 12px 40px #5492D6!important; } |
|||
.shadow.MCO:hover { box-shadow: 0 12px 40px #0D3459!important; } |
|||
.shadow.MINT:hover { box-shadow: 0 12px 40px #006835!important; } |
|||
.shadow.MONA:hover { box-shadow: 0 12px 40px #a99364!important; } |
|||
.shadow.MRC:hover { box-shadow: 0 12px 40px #4279bd!important; } |
|||
.shadow.MSC:hover { box-shadow: 0 12px 40px #1D4983!important; } |
|||
.shadow.MTR:hover { box-shadow: 0 12px 40px #b92429!important; } |
|||
.shadow.MUE:hover { box-shadow: 0 12px 40px #f5a10e!important; } |
|||
.shadow.NBT:hover { box-shadow: 0 12px 40px #FFC93D!important; } |
|||
.shadow.NEO:hover { box-shadow: 0 12px 40px #58BF00!important; } |
|||
.shadow.NEOS:hover { box-shadow: 0 12px 40px #1d1d1b!important; } |
|||
.shadow.NEU:hover { box-shadow: 0 12px 40px #2983c0!important; } |
|||
.shadow.NLG:hover { box-shadow: 0 12px 40px #003E7E!important; } |
|||
.shadow.NMC:hover { box-shadow: 0 12px 40px #6787B7!important; } |
|||
.shadow.NOTE:hover { box-shadow: 0 12px 40px #42daff!important; } |
|||
.shadow.NVC:hover { box-shadow: 0 12px 40px #ecab41!important; } |
|||
.shadow.NXT:hover { box-shadow: 0 12px 40px #008FBB!important; } |
|||
.shadow.OK:hover { box-shadow: 0 12px 40px #0165A4!important; } |
|||
.shadow.OMG:hover { box-shadow: 0 12px 40px #1A53F0!important; } |
|||
.shadow.OMNI:hover { box-shadow: 0 12px 40px #18347E!important; } |
|||
.shadow.OPAL:hover { box-shadow: 0 12px 40px #7193AA!important; } |
|||
.shadow.PART:hover { box-shadow: 0 12px 40px #05D5A3!important; } |
|||
.shadow.PIGGY:hover { box-shadow: 0 12px 40px #F27A7A!important; } |
|||
.shadow.PINK:hover { box-shadow: 0 12px 40px #ED31CA!important; } |
|||
.shadow.PIVX:hover { box-shadow: 0 12px 40px #3b2f4d!important; } |
|||
.shadow.POT:hover { box-shadow: 0 12px 40px #105B2F!important; } |
|||
.shadow.PPC:hover { box-shadow: 0 12px 40px #3FA30C!important; } |
|||
.shadow.QRK:hover { box-shadow: 0 12px 40px #22AABF!important; } |
|||
.shadow.RADS:hover { box-shadow: 0 12px 40px #924cea!important; } |
|||
.shadow.RBIES:hover { box-shadow: 0 12px 40px #C62436!important; } |
|||
.shadow.RBT:hover { box-shadow: 0 12px 40px #0d4982!important; } |
|||
.shadow.RBY:hover { box-shadow: 0 12px 40px #D31F26!important; } |
|||
.shadow.RDD:hover { box-shadow: 0 12px 40px #ED1C24!important; } |
|||
.shadow.REP:hover { box-shadow: 0 12px 40px #40a2cb!important; } |
|||
.shadow.RISE:hover { box-shadow: 0 12px 40px #43CEA2!important; } |
|||
.shadow.SAR:hover { box-shadow: 0 12px 40px #1B72B8!important; } |
|||
.shadow.SCOT:hover { box-shadow: 0 12px 40px #3498DB!important; } |
|||
.shadow.SDC:hover { box-shadow: 0 12px 40px #981D2D!important; } |
|||
.shadow.SIA:hover { box-shadow: 0 12px 40px #00CBA0!important; } |
|||
.shadow.SJCX:hover { box-shadow: 0 12px 40px #003366!important; } |
|||
.shadow.SLG:hover { box-shadow: 0 12px 40px #5A6875!important; } |
|||
.shadow.SLS:hover { box-shadow: 0 12px 40px #1EB549!important; } |
|||
.shadow.SNRG:hover { box-shadow: 0 12px 40px #160363!important; } |
|||
.shadow.START:hover { box-shadow: 0 12px 40px #01AEF0!important; } |
|||
.shadow.STEEM:hover { box-shadow: 0 12px 40px #1A5099!important; } |
|||
.shadow.STR:hover { box-shadow: 0 12px 40px #08B5E5!important; } |
|||
.shadow.STRAT:hover { box-shadow: 0 12px 40px #2398dd!important; } |
|||
.shadow.SWIFT:hover { box-shadow: 0 12px 40px #428BCA!important; } |
|||
.shadow.SYNC:hover { box-shadow: 0 12px 40px #008DD2!important; } |
|||
.shadow.SYS:hover { box-shadow: 0 12px 40px #0098DA!important; } |
|||
.shadow.TRIG:hover { box-shadow: 0 12px 40px #1fbff4!important; } |
|||
.shadow.TX:hover { box-shadow: 0 12px 40px #1F8BCC!important; } |
|||
.shadow.UBQ:hover { box-shadow: 0 12px 40px #00ec8d!important; } |
|||
.shadow.UNITY:hover { box-shadow: 0 12px 40px #ED8527!important; } |
|||
.shadow.USDT:hover { box-shadow: 0 12px 40px #2CA07A!important; } |
|||
.shadow.VIOR:hover { box-shadow: 0 12px 40px #1F52A4!important; } |
|||
.shadow.VNL:hover { box-shadow: 0 12px 40px #404249!important; } |
|||
.shadow.VPN:hover { box-shadow: 0 12px 40px #589700!important; } |
|||
.shadow.VRC:hover { box-shadow: 0 12px 40px #418bca!important; } |
|||
.shadow.VTC:hover { box-shadow: 0 12px 40px #1b5c2e!important; } |
|||
.shadow.WAVES:hover { box-shadow: 0 12px 40px #24aad6!important; } |
|||
.shadow.XAI:hover { box-shadow: 0 12px 40px #2ef99f!important; } |
|||
.shadow.XBS:hover { box-shadow: 0 12px 40px #d3261d!important; } |
|||
.shadow.XCP:hover { box-shadow: 0 12px 40px #EC1550!important; } |
|||
.shadow.XEM:hover { box-shadow: 0 12px 40px #41bf76!important; } |
|||
.shadow.XMR:hover { box-shadow: 0 12px 40px #FF6600!important; } |
|||
.shadow.XPM:hover { box-shadow: 0 12px 40px #e5b625!important; } |
|||
.shadow.XRP:hover { box-shadow: 0 12px 40px #346AA9!important; } |
|||
.shadow.XTZ:hover { box-shadow: 0 12px 40px #A6DF00!important; } |
|||
.shadow.XVG:hover { box-shadow: 0 12px 40px #42AFB2!important; } |
|||
.shadow.YBC:hover { box-shadow: 0 12px 40px #D6C154!important; } |
|||
.shadow.ZEC:hover { box-shadow: 0 12px 40px #e5a93d!important; } |
|||
.shadow.ZEIT:hover { box-shadow: 0 12px 40px #ACACAC!important; } |
|||
} |
|||
@ -0,0 +1,51 @@ |
|||
/* |
|||
Styling Variables ✏️ |
|||
---- |
|||
- Stylesheet Partial, for inclusion where common variables are needed |
|||
- If a window needs to overwrite variables, it should be done in that window's stylesheet |
|||
*/ |
|||
|
|||
/* Colors */ |
|||
$blue: #8A0EFB; |
|||
$blue-dark: #2D91FC; |
|||
$danger: #F33C3C; |
|||
|
|||
|
|||
$grey-lighter: #D7D7D7; |
|||
$grey-light: #919191; |
|||
$grey: rgba(0,0,0,0.1); |
|||
$grey-dark: #2D2D2D; |
|||
$grey-darker: #1A1A20; |
|||
|
|||
|
|||
$red: #FF6159; |
|||
$green: #05E6B5; |
|||
$purple: #783FEA; |
|||
$orange: orange; |
|||
|
|||
/* Typography */ |
|||
$font-size-default: 1em; |
|||
|
|||
/* Backgrounds */ |
|||
$background-primary: #1B1D23; |
|||
$background-jaguar: #1B1D23; |
|||
$background-light: #3A3D3F; |
|||
$background-dark: #1B1D23; |
|||
$background-app: #282C34; |
|||
|
|||
/* Typography */ |
|||
$color-primary: #FFF; |
|||
$color-secondary: #959CAE; |
|||
$color-dark: #FFF; |
|||
$divider-color: $grey-dark; |
|||
|
|||
$box-shadow-inputs: 0 1px 1px 0 rgba(0, 0, 0, .2), |
|||
0 0 0 1px rgba(0, 0, 0, .1), |
|||
0 12px 24px 0 rgba(0,0,0, 0.05); |
|||
|
|||
/* Borders */ |
|||
$window-border-radius: 5px; |
|||
|
|||
/* height */ |
|||
$footer-height: 100px; |
|||
$action-size: 110px; |
|||
@ -0,0 +1,118 @@ |
|||
.dex { |
|||
.balance-action { |
|||
background: $background-dark |
|||
} |
|||
|
|||
.balance-qr { |
|||
display: flex; |
|||
} |
|||
|
|||
.balance-deposit { padding: 20px 20px 0px } |
|||
|
|||
.deposit-withdraw { padding: 0px 20px 20px } |
|||
|
|||
.balance-deposit canvas { |
|||
padding: 4px; |
|||
border-radius: 4px; |
|||
background: #FFF; |
|||
} |
|||
|
|||
.balance-deposit-address { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-grow: 1; |
|||
overflow: hidden; |
|||
padding: 10px 10px 30px; |
|||
} |
|||
|
|||
.balance-deposit-body { |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.balance-deposit-address button { |
|||
overflow-wrap: break-word; |
|||
width: 100%; |
|||
padding: 4 10px; |
|||
justify-content: space-between; |
|||
min-height: 54px; |
|||
} |
|||
|
|||
.balance-deposit-address button span { |
|||
display: inline-block; |
|||
overflow-wrap: break-word; |
|||
width: calc(100% - 80px); |
|||
text-align: left; |
|||
font-size: .8em; |
|||
|
|||
} |
|||
|
|||
.deposit-withdrawConfirm, |
|||
.deposit-tx { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.deposit-withdrawConfirm h3, |
|||
.deposit-tx h3 { |
|||
color: $color-dark; |
|||
margin-bottom: 40px; |
|||
} |
|||
|
|||
.deposit-withdrawConfirm ul { |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0 |
|||
} |
|||
|
|||
.deposit-withdrawConfirm ul li { |
|||
display: flex |
|||
} |
|||
|
|||
.deposit-withdrawConfirm ul li strong { |
|||
padding-right: 20px; |
|||
text-align: right; |
|||
font-weight: 400; |
|||
color: $color-dark; |
|||
} |
|||
|
|||
.deposit-withdrawConfirm ul li strong:after { |
|||
content: ' :' |
|||
} |
|||
|
|||
.deposit-withdrawConfirm-actions, |
|||
.deposit-tx-actions { |
|||
display: flex; |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.deposit-withdrawConfirm-actions button:first-of-type { |
|||
border-top-right-radius: 0; |
|||
border-bottom-right-radius: 0; |
|||
} |
|||
|
|||
.deposit-withdrawConfirm-actions button:last-of-type { |
|||
border-top-left-radius: 0; |
|||
border-bottom-left-radius: 0; |
|||
} |
|||
|
|||
.deposit-withdrawConfirm button { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.deposit-withdrawConfirm button.primary { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.balance-showtx .balance-deposit, |
|||
.balance-showtx .trade-button-wrapper, |
|||
.balance-showtx .trade-amount_input_address, |
|||
.balance-showtx .trade-amount_input_amount { |
|||
display: none; |
|||
} |
|||
} |
|||
@ -0,0 +1,72 @@ |
|||
.dex { |
|||
.coinList-coin { |
|||
padding: 10px; |
|||
} |
|||
|
|||
.coinList-coin_icon { |
|||
width: 60px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 50%; |
|||
transition: transform .4s ease; |
|||
} |
|||
|
|||
|
|||
.coinList-coin_icon > * { |
|||
width: 60px; |
|||
height: 60px; |
|||
font-size: 2.1em; |
|||
transform: rotate(8deg); |
|||
} |
|||
|
|||
|
|||
.coinList-coin_balance { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
flex-grow: 1; |
|||
position: relative; |
|||
padding-left: 10px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
transition: transform .4s ease; |
|||
color: $color-dark |
|||
} |
|||
|
|||
.coinList-coin_balance small { color: $color-secondary } |
|||
.coinList-coin_balance-amount { |
|||
color: $color-dark; |
|||
font-size: 13px |
|||
} |
|||
|
|||
|
|||
/* context */ |
|||
|
|||
.coinList-coin:hover .coinList-coin_icon { |
|||
transform:scale(1.05) |
|||
} |
|||
.coinList-coin:hover .coinList-coin_balance, |
|||
.coinList-coin.enabling .coinList-coin_balance { |
|||
color: #FFF; |
|||
transform: translateX(2px) |
|||
} |
|||
|
|||
.coinList-coin:hover .coinList-coin_balance small, |
|||
.coinList-coin.enabling .coinList-coin_balance small, |
|||
.coinList-coin:hover .coinList-coin_balance-amount, |
|||
.coinList-coin.enabling .coinList-coin_balance-amount { |
|||
color: rgba(256,256,256,0.4) |
|||
} |
|||
|
|||
.coinList-coin:hover .coinList-coin_action svg { |
|||
fill: #FFF; |
|||
transform: translateX(10px) scale(1.1) |
|||
} |
|||
|
|||
/* LOADER */ |
|||
|
|||
.coinList-coin.enabling .coinList-coin_action svg { |
|||
transform: translateX(100px) |
|||
} |
|||
} |
|||
@ -0,0 +1,123 @@ |
|||
.dex { |
|||
.dashboard, |
|||
.dashboard-noChain { |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: auto; |
|||
align-items: center; |
|||
height: 100vh; |
|||
|
|||
} |
|||
|
|||
|
|||
.dashboard-wallets, |
|||
.dashboard-wallets-header, |
|||
.dashboard-wallets-list { width: 100% } |
|||
|
|||
|
|||
.dashboard-wallets-header { |
|||
height: 400px; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.dashboard-wallets-header h1 { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
text-align: center; |
|||
font-size: 2em; |
|||
font-weight: 200 |
|||
} |
|||
|
|||
.dashboard-wallets-header h1 label { |
|||
font-size: 12px; |
|||
width: 100%; |
|||
text-transform: uppercase; |
|||
font-weight: 600 |
|||
} |
|||
|
|||
.dashboard-balances-pie { |
|||
width: 600px !important; |
|||
height: 200px !important; |
|||
position: relative !important; |
|||
transform-origin: left center |
|||
} |
|||
|
|||
.dashboard-balances-pie svg { |
|||
transform: scale(3.8); |
|||
transform-origin: center 33% |
|||
} |
|||
|
|||
.dashboard-wallets .dashboard-wallets-list, |
|||
.dashboard-swaps { |
|||
height: calc(100vh - 400px); |
|||
overflow: auto; |
|||
} |
|||
|
|||
.dashboard-wallets .dashboard-wallets-list li { |
|||
height: 140px; |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
/* context */ |
|||
|
|||
.dashboard-empty { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 10px 20px; |
|||
border-radius: 4px; |
|||
margin: 10px 20px; |
|||
color: #FFF; |
|||
height: 400px; |
|||
} |
|||
|
|||
.dashboard-empty-logo , |
|||
.dashboard-empty-logo svg { |
|||
position: relative; |
|||
width: 200px; |
|||
height: 200px; |
|||
} |
|||
|
|||
.dashboard-empty-logo svg { |
|||
position: absolute; |
|||
top: -60px; |
|||
left: -20px; |
|||
transform: scale(2.2); |
|||
transform-origin: center 90%; |
|||
opacity: .2 |
|||
} |
|||
|
|||
.dashboard-empty-logo svg g { fill: #000 } |
|||
|
|||
.dashboard.enabling .dashboard-empty-logo svg { |
|||
transform: scale(4); |
|||
transform-origin: center center |
|||
} |
|||
|
|||
.dashboard-empty h3 { |
|||
text-align: center; |
|||
width: auto; |
|||
display: inline-block; |
|||
margin: 0px auto 20px auto; |
|||
border-bottom: 2px solid $danger; |
|||
color: $danger |
|||
} |
|||
|
|||
.dashboard-empty-balance h3 { |
|||
color: $orange; |
|||
border-color: $orange |
|||
} |
|||
|
|||
.dashboard-empty p { |
|||
opacity: .8; |
|||
margin: 0 |
|||
} |
|||
|
|||
.dashboard-empty-centered { |
|||
text-align: center; |
|||
} |
|||
} |
|||
@ -0,0 +1,123 @@ |
|||
.dex { |
|||
.login { |
|||
height: 100vh |
|||
} |
|||
|
|||
.login, |
|||
.login .form { |
|||
display: flex; |
|||
overflow: auto; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: $background-jaguar; |
|||
} |
|||
|
|||
.login-localStorage .form { |
|||
display: none |
|||
} |
|||
|
|||
.login-newpassphrase { |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 100%; |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.login-passphrase-notice { |
|||
background: $danger; |
|||
color: #FFF; |
|||
padding: 10px; |
|||
border-radius: 4px; |
|||
text-align: left; |
|||
height: 90px; |
|||
padding: 0 20px; |
|||
|
|||
} |
|||
|
|||
.login-passphrase-notice span { font-weight: 400 } |
|||
|
|||
.login .form { |
|||
flex-direction: column; |
|||
padding: 0px 10px; |
|||
} |
|||
|
|||
.login-button { |
|||
width: 100%; |
|||
height: 90px; |
|||
padding: 0 20px; |
|||
font-size: 1em; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.login footer { |
|||
margin-top: 10px; |
|||
opacity: .5; |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
.login textarea { |
|||
margin-top: 10px; |
|||
padding: 10px 10px; |
|||
margin-bottom: 20px; |
|||
min-width: inherit; |
|||
width: 360px; |
|||
height: 180px; |
|||
resize: none; |
|||
} |
|||
|
|||
|
|||
.login-passphrase-notice, |
|||
.login-button { |
|||
width: 100% |
|||
} |
|||
|
|||
|
|||
.Placeholder { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
z-index: 1000; |
|||
pointer-events: none; |
|||
|
|||
} |
|||
|
|||
.Placeholder-logo { |
|||
@extend .flexCenter; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.Placeholder-logo, |
|||
.Placeholder-logo svg { |
|||
display: inline-block; |
|||
width: 260px; |
|||
height: 220px; |
|||
} |
|||
|
|||
.Placeholder-logo svg { |
|||
transform: scale(3); |
|||
transform-origin: 55% 85%; |
|||
pointer-events: none |
|||
|
|||
} |
|||
|
|||
|
|||
.Placeholder-tagline { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 1; |
|||
|
|||
} |
|||
|
|||
.Placeholder-text { |
|||
font-weight: 200; |
|||
font-size: 3.2em; |
|||
color: $color-dark; |
|||
margin: 0 0 20px 0; |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,170 @@ |
|||
.dex { |
|||
.orders-list { |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.orders-item, |
|||
.orders-item-wrapper { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.orders-item-wrapper { |
|||
padding: 20px 20px 10px 20px; |
|||
max-width: 400px; |
|||
margin: 0px auto |
|||
} |
|||
|
|||
.order-item-stopped { |
|||
opacity: .5; |
|||
} |
|||
|
|||
|
|||
|
|||
.orders-item-details { |
|||
flex-grow: 1; |
|||
display: flex; |
|||
width: 100%; |
|||
} |
|||
|
|||
.orders-item-details-coins { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.orders-item-details-coin { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 120px; |
|||
} |
|||
|
|||
.orders-item-details-coins .orders-item-details-coin:first-of-type { |
|||
justify-content: flex-end; |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
.orders-item-details-coin-amount { |
|||
font-size: 14px |
|||
} |
|||
|
|||
.orders-item-details-coin > * { |
|||
margin-right: 5px |
|||
} |
|||
|
|||
|
|||
|
|||
.orders-item-details-coins { |
|||
flex-grow: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
|
|||
.orders-item-details-coin-icon i, |
|||
.orders-item-details-coin-icon svg, |
|||
.orders-item-details-coin-icon .coin-icon-placeholder { |
|||
width: 24px; |
|||
height: 24px; |
|||
font-size: 13px; |
|||
display: flex; |
|||
} |
|||
|
|||
|
|||
.orders-item-details-type { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin: 0 10px; |
|||
} |
|||
|
|||
.orders-item-details-type-label { |
|||
text-transform: capitalize; |
|||
} |
|||
|
|||
.orders-item-details-coins-tradeType svg { |
|||
fill: #FFF; |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
.orders-item-details-action { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
text-align: left; |
|||
padding: 10px 0; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
|
|||
.orders-item-details_action { |
|||
margin-left: 6px; |
|||
} |
|||
|
|||
.orders-item-details-action-type { |
|||
flex-grow: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
color: $color-dark; |
|||
} |
|||
|
|||
|
|||
.orders-item-details-action-type small { |
|||
color: $color-primary |
|||
} |
|||
|
|||
.orders-item-details-meta { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.orders-item-details-meta-more { |
|||
display: flex; |
|||
width: 100%; |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
.orders-item-details-meta-more-data { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
flex-grow: 1 |
|||
} |
|||
|
|||
.orders-item-details-meta-more-data-buttons { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.orders-item-details-meta-more-data-buttons button { |
|||
margin-left: 4px; |
|||
} |
|||
|
|||
|
|||
.order-stop { |
|||
padding: 5px 5px 5px 10px; |
|||
} |
|||
|
|||
.order-stop i svg { |
|||
width: 10px; |
|||
height: 10px; |
|||
fill: #000 |
|||
} |
|||
|
|||
|
|||
/* STATES */ |
|||
|
|||
.orders-item:hover .orders-item-details-meta-more { |
|||
display: flex |
|||
} |
|||
} |
|||
@ -0,0 +1,539 @@ |
|||
.dex { |
|||
.trade, |
|||
.trade-body { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
|
|||
.trade-body { |
|||
flex-grow: 1 |
|||
} |
|||
.trade-body > [class*="action"] { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-grow: 1; |
|||
overflow: auto; |
|||
height: 100px; |
|||
} |
|||
|
|||
.trade-processing { |
|||
flex-grow: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.trade-processing h3 { |
|||
font-weight: 400; |
|||
font-size: 1em |
|||
} |
|||
|
|||
.trade, |
|||
.trade-body { |
|||
width: 100%; |
|||
flex-grow: 1; |
|||
flex-shrink: 0 |
|||
} |
|||
|
|||
.trade-body { |
|||
position: relative; |
|||
transition: all .2s ease; |
|||
will-change: transform; |
|||
} |
|||
|
|||
.trade-type { |
|||
list-style: none; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 0; |
|||
margin: 0; |
|||
color: $color-dark; |
|||
width: 100%; |
|||
z-index: 1000; |
|||
background: $background-app; |
|||
} |
|||
|
|||
.trade-type-item { |
|||
height: 80px; |
|||
padding: 10px 8px 2px 8px; |
|||
flex-grow: 1; |
|||
border: 1px solid transparent; |
|||
border-bottom-color: $grey; |
|||
opacity: .5 |
|||
} |
|||
|
|||
.trade-type-item:hover, |
|||
.trade-buy .trade-type-item-buy, |
|||
.trade-sell .trade-type-item-sell, |
|||
.trade-wallet .trade-type-item-wallet, |
|||
.trade-charts .trade-type-item-charts, |
|||
.trade-orders .trade-type-item-orders { opacity: 1 } |
|||
|
|||
.trade-buy .trade-type-item-buy, |
|||
.trade-sell .trade-type-item-sell, |
|||
.trade-wallet .trade-type-item-wallet, |
|||
.trade-charts .trade-type-item-charts, |
|||
.trade-orders .trade-type-item-orders { |
|||
background: $background-dark; |
|||
border-bottom-color: transparent; |
|||
border-top-color: $grey; |
|||
font-weight: 600; |
|||
color: $color-dark; |
|||
} |
|||
|
|||
.trade-buy .trade-type-item-buy, |
|||
.trade-sell .trade-type-item-sell, |
|||
.trade-wallet .trade-type-item-wallet, |
|||
.trade-charts .trade-type-item-charts, |
|||
.trade-orders .trade-type-item-orders { |
|||
border-left: 1px solid $grey; |
|||
border-top-left-radius: 4px; |
|||
} |
|||
|
|||
.trade-buy .trade-type-item-buy, |
|||
.trade-sell .trade-type-item-sell, |
|||
.trade-wallet .trade-type-item-wallet, |
|||
.trade-charts .trade-type-item-charts, |
|||
.trade-orders .trade-type-item-orders { |
|||
border-right: 1px solid $grey; |
|||
border-top-right-radius: 4px; |
|||
} |
|||
|
|||
.trade-type-item button > div { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
width: 60px; |
|||
} |
|||
|
|||
.trade-type-item i svg, |
|||
.trade-type-item canvas { |
|||
width: 60px; |
|||
height: 30px; |
|||
fill: $color-dark; |
|||
transform: scale(1.1); |
|||
transform-origin: top center |
|||
} |
|||
|
|||
|
|||
|
|||
.trade-base { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.trade-base > * { |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
.trade-base, |
|||
.trade-base-wrapper, |
|||
.trade-base-wrapper button { |
|||
width: 100%; |
|||
} |
|||
|
|||
.trade-base button { |
|||
padding: 10px !important; |
|||
font-size: 1em; |
|||
box-shadow: 0 6px 20px rgba(0,0,0,.14) !important; |
|||
} |
|||
|
|||
.trade-base-wrapper { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #FFF; |
|||
} |
|||
|
|||
.trade-base-icon { |
|||
margin-right: 6px; |
|||
width: 30px; |
|||
height: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.trade-base-icon { |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
|
|||
.trade-base-icon svg { |
|||
width: 36px; |
|||
height: 36px; |
|||
} |
|||
|
|||
.trade-base-icon i { |
|||
font-size: 1.2em |
|||
} |
|||
|
|||
.trade-amount { |
|||
position: relative; |
|||
} |
|||
|
|||
.trade-orderbook { |
|||
background: $color-dark; |
|||
box-shadow: $box-shadow-inputs; |
|||
overflow: auto; |
|||
} |
|||
|
|||
|
|||
|
|||
.trade-action { |
|||
flex-grow: 1; |
|||
position: relative; |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 20px; |
|||
bottom: 0px; |
|||
left: 0; |
|||
z-index: 100; |
|||
transition: all .2s ease; |
|||
will-change: transform; |
|||
z-index: 1; |
|||
background: $background-dark |
|||
|
|||
} |
|||
|
|||
.trade-action-wrapper { |
|||
flex-grow: 1; |
|||
min-width: 100%; |
|||
border-radius: 4px; |
|||
color: $color-dark; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.trade-amount { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
} |
|||
|
|||
.trade-amount_input-wrapper input { |
|||
min-width: 100%; |
|||
position: absolute; |
|||
right: 0; |
|||
padding: 25px 10px 25px 14px; |
|||
font-weight: 600 |
|||
} |
|||
|
|||
|
|||
.trade-action-wrapper button div.validation { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.trade-amount_input { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
|
|||
.trade-amount_input > * { |
|||
flex-grow: 1; |
|||
} |
|||
|
|||
.trade-amount_input > * > * { |
|||
width: 100% |
|||
} |
|||
|
|||
.trade-amount_input-wrapper { |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
height: 40px; |
|||
} |
|||
|
|||
|
|||
.trade-amount_input-wrapper .trade-setMax { |
|||
position: relative; |
|||
z-index: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
color: $grey; |
|||
border: 1px solid #FFF; |
|||
color: #FFF; |
|||
padding: 7px 10px; |
|||
border-radius: 4px; |
|||
margin-right: 6px; |
|||
} |
|||
|
|||
.trade-amount_input-wrapper .trade-setMax:hover { |
|||
color: $blue; |
|||
border: 1px solid $blue; |
|||
} |
|||
|
|||
.trade-action-max .trade-amount_input-wrapper .trade-setMax { |
|||
background: $blue; |
|||
border-color: $blue; |
|||
color: #FFF; |
|||
pointer-events: none |
|||
} |
|||
|
|||
|
|||
|
|||
.trade-rel { |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.trade-rel > * { |
|||
flex-grow: 1; |
|||
} |
|||
|
|||
|
|||
.action.trade-pair { padding: 0 } |
|||
.action.trade-pair > strong { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
z-index: 1 |
|||
} |
|||
.trade-amount .label.trade-rel { |
|||
padding: 10px 4px 10px 4px |
|||
} |
|||
.trade-amount .label.trade-rel strong { color: $color-dark } |
|||
|
|||
|
|||
.trade-amount .label.trade-rel button { |
|||
background: #FFF; |
|||
width: 100%; |
|||
font-size: 1em |
|||
} |
|||
|
|||
.trade-amount .label.trade-rel button > span { |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.trade-rel > *:first-child button { |
|||
border-top-right-radius: 0; |
|||
border-bottom-right-radius: 0 |
|||
} |
|||
|
|||
.trade-rel > *:last-child button { |
|||
border-top-left-radius: 0; |
|||
border-bottom-left-radius: 0 |
|||
} |
|||
|
|||
|
|||
.trade-buy-label, |
|||
.trade-sell-label { |
|||
position: absolute; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
left: -100px; |
|||
} |
|||
|
|||
.trade-sell-label { |
|||
left: auto; |
|||
right: -90px; |
|||
} |
|||
|
|||
.trade .react-toggle-track-check, |
|||
.trade .react-toggle--checked .react-toggle-track-x { |
|||
opacity: .4 |
|||
} |
|||
|
|||
.trade .react-toggle--checked .react-toggle-track-check { opacity: 1 } |
|||
|
|||
|
|||
.trade-action-amountRel { |
|||
flex-grow: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.trade-action-amountRel small { |
|||
font-weight: 200; |
|||
|
|||
} |
|||
|
|||
.trade-action-amountRel-title { font-size: 1.2em } |
|||
|
|||
.trade-amount_input_address, |
|||
.trade-amount_input_amount { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.trade-amount_input_rate { |
|||
position: relative; |
|||
} |
|||
|
|||
|
|||
.trade-amount_input > *, |
|||
.trade-amount_input_rate > * { |
|||
width: 100%; |
|||
} |
|||
|
|||
.trade-amount_input > * { |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.trade-button-wrapper { |
|||
width: 100% |
|||
} |
|||
|
|||
.trade-button { |
|||
width: 100%; |
|||
margin-top: 10px; |
|||
padding: 30px 20px; |
|||
font-size: 1em; |
|||
justify-content: flex-start; |
|||
text-align: left; |
|||
box-shadow: none !important |
|||
} |
|||
|
|||
.trade-button i svg { |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
|
|||
/* deposit */ |
|||
|
|||
.trade-deposit { |
|||
padding: 0 20px 10px 20px; |
|||
background: #FFF; |
|||
position: absolute; |
|||
bottom: 0px; |
|||
left: 0px; |
|||
box-shadow: $box-shadow-inputs; |
|||
} |
|||
|
|||
.trade-deposit, |
|||
.trade-deposit-body { |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.trade-deposit, |
|||
.trade-deposit-body, |
|||
.trade-deposit-address { |
|||
width: 100%; |
|||
} |
|||
|
|||
.trade-deposit canvas { |
|||
padding: 4px; |
|||
background: #FFF; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.trade-deposit-address { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100% |
|||
} |
|||
|
|||
.trade-deposit-address button { |
|||
text-align: left; |
|||
box-shadow: $box-shadow-inputs; |
|||
color: #000; |
|||
margin-top: 10px; |
|||
background: #FFF; |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.trade-deposit-address button span { |
|||
display: inline-block; |
|||
overflow-wrap: break-word; |
|||
max-width: calc(100% - 80px); |
|||
text-align: left; |
|||
font-size: .8em; |
|||
color: #000; |
|||
font-weight: bold; |
|||
|
|||
|
|||
} |
|||
|
|||
.trade-deposit h2 { |
|||
font-size: 1.2em; |
|||
margin: 0 |
|||
} |
|||
|
|||
.trade-deposit-amount { |
|||
display: flex; |
|||
width: 100%; |
|||
margin-top: 20px; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.trade-deposit-amount-left { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
padding-right: 10px; |
|||
} |
|||
|
|||
.trade-deposit-amount-left i, |
|||
.trade-deposit-amount-left i svg { |
|||
width: 30px; |
|||
height: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.trade-deposit-amount-left i { |
|||
margin-left: 4px; |
|||
} |
|||
|
|||
.trade-deposit-amount p { |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 0; |
|||
text-align: left; |
|||
} |
|||
|
|||
|
|||
|
|||
.trade-deposit-amount-left-balance { |
|||
opacity: .5 |
|||
} |
|||
|
|||
|
|||
|
|||
/* charts */ |
|||
.trade-view-charts { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
flex-grow: 1; |
|||
background-color: #FFF; |
|||
font-size: 1em; |
|||
font-weight: 400 |
|||
} |
|||
|
|||
.trade-view-charts h3 { |
|||
font-size: 4em; |
|||
} |
|||
|
|||
.trade-view-charts h3, |
|||
.trade-view-charts h4 { |
|||
margin: 0; |
|||
text-transform: uppercase; |
|||
color: $color-dark |
|||
} |
|||
} |
|||
@ -0,0 +1,123 @@ |
|||
.dex { |
|||
.wallet-wrapper { |
|||
display: flex; |
|||
width: 100%; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.wallet-orderbooks { |
|||
position: relative; |
|||
z-index: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-grow: 1; |
|||
height: 100vh; |
|||
background: #000; |
|||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1); |
|||
overflow: auto; |
|||
|
|||
} |
|||
|
|||
.wallet-orderbooks-chart { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 300px; |
|||
} |
|||
|
|||
.wallet-orderbooks-chart h3 { |
|||
font-weight: 200; |
|||
opacity: .2 |
|||
} |
|||
|
|||
.wallet { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
justify-content: flex-start; |
|||
flex-direction: column; |
|||
background: $background-dark; |
|||
height: 100vh; |
|||
min-width: 380px; |
|||
transition: all .2s ease; |
|||
transform: translateY(0); |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
.wallet-icon { |
|||
width: 100px; |
|||
height: 100px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-bottom: 10px; |
|||
border-radius: 50%; |
|||
box-shadow: $box-shadow-inputs; |
|||
transform: rotate(10deg); |
|||
overflow: hidden; |
|||
} |
|||
|
|||
|
|||
.wallet-icon > * { |
|||
width: 100px; |
|||
height: 100px; |
|||
} |
|||
|
|||
.wallet-icon i { |
|||
font-size: 2.3em; |
|||
} |
|||
|
|||
.wallet-wallets-header { |
|||
flex-shrink: 0; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
transition: all .2s ease; |
|||
transform: translateY(0); |
|||
background: $background-app; |
|||
height: 230px; |
|||
} |
|||
|
|||
|
|||
.wallet-balance, |
|||
.wallet-coinName { |
|||
color: $color-dark; |
|||
} |
|||
|
|||
|
|||
.wallet-balance { |
|||
color: $color-dark; |
|||
font-weight: 400; |
|||
font-size: .6em; |
|||
} |
|||
|
|||
.wallet-balance { margin-bottom: 4px } |
|||
|
|||
.wallet-trade { |
|||
display: flex; |
|||
flex-grow: 1; |
|||
flex-shrink: 0; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
align-items: center; |
|||
|
|||
} |
|||
|
|||
.wallet-exchange { |
|||
display: flex; |
|||
text-align: center; |
|||
width: 100%; |
|||
flex-grow: 1 |
|||
} |
|||
|
|||
|
|||
.wallet-trade-buy { |
|||
margin-top: auto |
|||
} |
|||
|
|||
/* context */ |
|||
|
|||
|
|||
/* .wallet:not(.wallet-ready) .wallet-wallets-header { transform: translateY(300px) } */ |
|||
} |
|||
@ -0,0 +1,241 @@ |
|||
@import '../_variables.scss'; |
|||
|
|||
/* |
|||
Input Styling Component ✏️ |
|||
---- |
|||
- Stylesheet Partial, for inclusion where inputs are used |
|||
- Any extensions to input styling should go in this file |
|||
*/ |
|||
|
|||
.dex { |
|||
button { |
|||
font: inherit; |
|||
outline: none; |
|||
background: transparent; |
|||
border: none; |
|||
color: inherit; |
|||
padding: 0; |
|||
cursor: pointer; |
|||
transition: all .2s ease; |
|||
border-radius: 4px; |
|||
will-change: transform; |
|||
word-break: break-word; |
|||
} |
|||
|
|||
button.lefttext { |
|||
text-align: left; |
|||
} |
|||
|
|||
button.transparent { |
|||
background: transparent |
|||
} |
|||
|
|||
button[disabled] { |
|||
pointer-events: none; |
|||
cursor: default; |
|||
} |
|||
|
|||
|
|||
|
|||
button.withBorder { |
|||
position: relative; |
|||
text-transform: uppercase; |
|||
box-shadow: $box-shadow-inputs; |
|||
} |
|||
|
|||
|
|||
button.link { |
|||
border-bottom: 1px solid $blue; |
|||
border-radius: 0; |
|||
} |
|||
|
|||
button.link:hover { |
|||
border-bottom-color: transparent; |
|||
color: $blue |
|||
} |
|||
|
|||
|
|||
|
|||
.Clipboard, |
|||
.Openexternal { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: .8em; |
|||
} |
|||
|
|||
|
|||
.Openexternal-icon { margin-right: 5px } |
|||
|
|||
|
|||
.action, |
|||
.action i { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 4px; |
|||
transition: all .2s ease; |
|||
} |
|||
|
|||
.action { |
|||
padding: 10px 10px 10px 20px; |
|||
border-radius: 4px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.action.onlyIcon { |
|||
padding: 10px; |
|||
} |
|||
|
|||
.action.onlyIcon i { |
|||
padding: 0 !important; |
|||
background: transparent !important; |
|||
} |
|||
|
|||
.action.onlyIcon i svg { |
|||
transform: scale(1.6); |
|||
} |
|||
|
|||
|
|||
.action:not(.normaltext) { |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
.action.normaltext { |
|||
padding: 0 |
|||
} |
|||
|
|||
.action > span { |
|||
position: relative; |
|||
flex-grow: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.action.centered span { |
|||
right: -16px; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.action > i { |
|||
margin-left: 8px; |
|||
padding: 6px; |
|||
border-radius: 4px |
|||
} |
|||
|
|||
.action.onlyIcon > i { margin: 0 } |
|||
|
|||
.action > i svg { |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
|
|||
|
|||
.action:hover { |
|||
box-shadow: 0 12px 40px rgba(0,0,0,0.01) |
|||
} |
|||
|
|||
.action:not(.noTransformTranslate):hover { |
|||
transform: translateY(-2px); |
|||
} |
|||
|
|||
.action:hover > i { |
|||
background: $color-dark; |
|||
transform:scale(1.1); |
|||
box-shadow: 0 6px 20px rgba(0,0,0,.14); |
|||
} |
|||
|
|||
.action:hover > i svg { fill: #FFF } |
|||
|
|||
/* primary */ |
|||
|
|||
.action.primary { |
|||
background: $blue; |
|||
color: #FFF; |
|||
box-shadow: 0px 10px 20px rgba(0,0,0,0.2) |
|||
} |
|||
.action.primary i svg { fill: #FFF } |
|||
|
|||
.action.primary > i { background-color: rgba(0,0,0,0.2) } |
|||
.action.primary > span { font-weight: 600; } |
|||
.action.primary:hover > i { background: #000 } |
|||
|
|||
|
|||
/* danger */ |
|||
|
|||
.action.danger { |
|||
background: $danger; |
|||
color: #FFF; |
|||
box-shadow: 0px 10px 20px rgba(0,0,0,0.1) |
|||
} |
|||
|
|||
.action.danger.green { background: $green } |
|||
.action.danger.orange { background: $orange } |
|||
|
|||
.action.danger i svg { fill: #FFF } |
|||
|
|||
.action.danger > i { background-color: rgba(0,0,0,0.2) } |
|||
.action.danger > span { font-weight: 600; } |
|||
.action.danger:hover > i { background: #000 } |
|||
|
|||
/* dark */ |
|||
|
|||
.action.dark { |
|||
background-color: transparent; |
|||
color: #FFF; |
|||
box-shadow: none |
|||
} |
|||
.action.dark:hover { |
|||
opacity: 1 |
|||
} |
|||
.action.dark > i { |
|||
background: #000 |
|||
} |
|||
.action.dark > i svg { fill: #FFF } |
|||
|
|||
|
|||
/* right */ |
|||
.action.primary.right { |
|||
padding-left: 10px; |
|||
padding-right: 20px; |
|||
} |
|||
.action.primary.right > i { |
|||
margin-left: 0; |
|||
margin-right: 8px |
|||
} |
|||
|
|||
.action[disabled] { |
|||
background-color: rgba(0,0,0,0.2) !important; |
|||
color: rgba(256,256,256,0.42); |
|||
box-shadow: none |
|||
} |
|||
|
|||
/* small */ |
|||
|
|||
.action.small { |
|||
padding: 4px 4px 4px 8px; |
|||
} |
|||
|
|||
/* arrow down */ |
|||
.action.arrow-down > i { |
|||
transform: rotate(90deg); |
|||
background: rgba(256,256,256,0.1) |
|||
} |
|||
|
|||
.action.arrow-down > i svg { |
|||
fill: #FFF |
|||
} |
|||
|
|||
.action.arrow-down:hover > i { |
|||
background: rgba(256,256,256,0.2) |
|||
} |
|||
|
|||
/* danger */ |
|||
.action.danger { |
|||
background-color: $danger |
|||
} |
|||
|
|||
|
|||
.action.loading > i { |
|||
opacity: 0 |
|||
} |
|||
} |
|||
@ -0,0 +1,94 @@ |
|||
@import '../_variables.scss'; |
|||
|
|||
/* |
|||
Form Styling Component ✏️ |
|||
---- |
|||
- Super small, but styles the labels |
|||
*/ |
|||
|
|||
.dex { |
|||
.fieldset { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
border: 0; |
|||
margin: 0; |
|||
padding: 0; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.label { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
font-weight: 600; |
|||
padding: 10px 4px 20px 10px; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.label .label-title { |
|||
margin-right: auto; |
|||
font-weight: 400; |
|||
font-size: 1.1em; |
|||
color: #FFF |
|||
} |
|||
|
|||
.label .link { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
|
|||
.legend { |
|||
width: 100%; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
font-size: 1.1em; |
|||
font-weight: 600; |
|||
margin-bottom: .5em; |
|||
} |
|||
|
|||
.legend > * { margin-right: 10px } |
|||
|
|||
.legend u { |
|||
text-decoration: none; |
|||
border-bottom: 2px solid $blue; |
|||
} |
|||
|
|||
hr { |
|||
width: 100%; |
|||
border: none; |
|||
background: transparent |
|||
} |
|||
|
|||
.react-toggle:hover { |
|||
opacity: 1 |
|||
} |
|||
|
|||
.react-toggle--checked .react-toggle-track { |
|||
background: $color-dark |
|||
} |
|||
|
|||
.react-toggle--checked .react-toggle-thumb { |
|||
border-color: $color-dark |
|||
} |
|||
|
|||
.react-toggle-track { |
|||
background-color: $color-dark |
|||
} |
|||
|
|||
|
|||
|
|||
.react-toggle--checked .react-toggle-track { |
|||
background-color: $color-dark |
|||
} |
|||
|
|||
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { |
|||
background-color: $color-dark |
|||
} |
|||
|
|||
.react-toggle--focus .react-toggle-thumb { |
|||
box-shadow: none |
|||
} |
|||
|
|||
.react-toggle-thumb { border: 0 } |
|||
} |
|||
@ -0,0 +1,73 @@ |
|||
.dex { |
|||
.growler { |
|||
position: fixed; |
|||
top: 0px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 10px; |
|||
z-index: 2000; |
|||
text-align: center; |
|||
transition: all .2s ease; |
|||
|
|||
} |
|||
|
|||
.growler-success, |
|||
.growler-fail { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
width: 100%; |
|||
background: $green; |
|||
color: #FFF; |
|||
padding: 10px 40px 10px 20px; |
|||
box-shadow: $box-shadow-inputs; |
|||
border-radius: 4px; |
|||
margin-bottom: 20px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.growler-fail { |
|||
background: $orange; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.growler-title { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
text-align: left; |
|||
} |
|||
|
|||
.growler-desc { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.growler-success i, |
|||
.growler-fail i { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.growler-success i, |
|||
.growler-success i svg, |
|||
.growler-fail i, |
|||
.growler-fail svg { |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
|
|||
.growler-success i svg, |
|||
.growler-fail i svg { |
|||
fill: #FFF; |
|||
} |
|||
|
|||
/* state */ |
|||
|
|||
.growler:empty { |
|||
opacity: 0; |
|||
transform: translateY(-20px); |
|||
} |
|||
} |
|||
@ -0,0 +1,64 @@ |
|||
.dex { |
|||
.component-header { |
|||
display: flex; |
|||
position: relative; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 20px; |
|||
background: $background-app; |
|||
color: $color-dark; |
|||
width: 100% |
|||
} |
|||
|
|||
.wallet-wallets-header-back { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-right: 20px; |
|||
position: absolute; |
|||
top: 10px; |
|||
left: 0px; |
|||
} |
|||
|
|||
.wallet-wallets-header-back i, |
|||
.wallet-wallets-header-back i svg { |
|||
width: 60px; |
|||
height: 60px; |
|||
} |
|||
|
|||
.wallet-wallets-header-back i svg { |
|||
transform: rotate(-180deg) !important; |
|||
} |
|||
|
|||
.component-header h2 { |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin: 0; |
|||
padding: 0; |
|||
font-size: 1.6em; |
|||
font-weight: 600 |
|||
} |
|||
|
|||
.component-header-withBack { |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.component-header-centered h2 { |
|||
flex-grow: 1; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
} |
|||
|
|||
.component-header h2 small { |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: .5em; |
|||
color: $color-secondary; |
|||
padding-top: 4px; |
|||
font-weight: 400; |
|||
margin-top: -4px; |
|||
} |
|||
} |
|||
@ -0,0 +1,68 @@ |
|||
@import '../_variables.scss'; |
|||
|
|||
/* |
|||
Input Styling Component ✏️ |
|||
---- |
|||
- Stylesheet Partial, for inclusion where inputs are used |
|||
- Any extensions to input styling should go in this file |
|||
*/ |
|||
.dex { |
|||
input, |
|||
[contenteditable=true], |
|||
select, |
|||
textarea { |
|||
background: #000; |
|||
color: #FFF; |
|||
font: inherit; |
|||
outline: none; |
|||
border: 0; |
|||
/* Ensure focus on inputs doesn't allow app dragging */ |
|||
-webkit-app-region: no-drag; |
|||
border-radius: 4px; |
|||
border: 2px solid #000; |
|||
box-shadow: $box-shadow-inputs; |
|||
|
|||
} |
|||
|
|||
input { |
|||
height: 34px; |
|||
padding: 2px 4px; |
|||
width: auto; |
|||
} |
|||
|
|||
input[type=number]::-webkit-inner-spin-button, |
|||
input[type=number]::-webkit-outer-spin-button { |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
appearance: none; |
|||
} |
|||
|
|||
/* input:hover, |
|||
textarea:hover { |
|||
border: 2px solid #FFF; |
|||
} */ |
|||
|
|||
input:focus, |
|||
textarea:focus { |
|||
border: 2px solid #8A0EFB; |
|||
} |
|||
|
|||
.select-container { |
|||
position: relative; |
|||
} |
|||
|
|||
|
|||
[contenteditable=true] { max-width: 100% } |
|||
[contenteditable=true] + button { display: none !important } |
|||
[contenteditable=true]:not(:empty) + button { display: flex !important } |
|||
[contenteditable=true]:empty::before { |
|||
content: attr(data-tooltip); |
|||
max-width: inherit; |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
[contenteditable=true]:focus:empty::before { |
|||
opacity: .1; |
|||
content: attr(placeholder); |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
.dex { |
|||
a { |
|||
cursor: pointer; |
|||
color: $color-dark; |
|||
} |
|||
} |
|||
@ -0,0 +1,136 @@ |
|||
.dex { |
|||
ul[class*=list] { |
|||
position: relative; |
|||
list-style: none; |
|||
padding: 0; |
|||
margin: 0; |
|||
overflow: auto; |
|||
padding: 20px; |
|||
} |
|||
|
|||
ul[class*=list]:not(.singleColumn):after { |
|||
content: ""; |
|||
position: fixed; |
|||
width: 100%; |
|||
height: 6px; |
|||
box-shadow: 0px 10px 20px $background-app; |
|||
z-index: 10; |
|||
background: $background-app |
|||
} |
|||
|
|||
ul[class*=list] { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
|
|||
} |
|||
|
|||
ul[class*=list].singleColumn { |
|||
padding: 0; |
|||
grid-template-columns: repeat(1, 1fr); |
|||
} |
|||
|
|||
|
|||
ul[class*=list]:not(.singleColumn) { |
|||
background: $background-app; |
|||
grid-gap: 10px; |
|||
} |
|||
|
|||
ul[class*=list] > li { |
|||
position: relative; |
|||
display: flex; |
|||
flex-shrink: 0; |
|||
margin: 0; |
|||
border-bottom: 1px solid $background-app; |
|||
transition: all .2s ease; |
|||
will-change: transform; |
|||
overflow: hidden; |
|||
background: $background-jaguar |
|||
} |
|||
|
|||
ul[class*=list]:not(.singleColumn) > li { |
|||
box-shadow: 0 6px 20px rgba(0,0,0,.14); |
|||
border-radius: 4px; |
|||
|
|||
} |
|||
|
|||
ul[class*=list]:not(.noHover) > li { |
|||
cursor: pointer; |
|||
|
|||
} |
|||
|
|||
ul[class*=list] > li > a { |
|||
display: flex; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 120px; |
|||
text-decoration: none; |
|||
width: 100%; |
|||
padding: 0px 20px 0px 20px; |
|||
} |
|||
|
|||
ul[class*=list] [class*="_action"] { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 30px; |
|||
background: transparent; |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 0px; |
|||
height: 100%; |
|||
|
|||
} |
|||
|
|||
ul[class*=list] [class*="_action"] svg { |
|||
position: relative; |
|||
width: 20px; |
|||
height: 20px; |
|||
left: 0; |
|||
transition: transform .6s ease; |
|||
fill: rgba(256,256,256,0.5) |
|||
} |
|||
|
|||
ul[class*=list] [class*="_action_loader"] { |
|||
transform: translateX(10px); |
|||
opacity: 0; |
|||
transition: all .2s ease; |
|||
width: 0px |
|||
|
|||
} |
|||
|
|||
ul[class*=list] [class*="_action_loader"] svg { |
|||
width: 40px; |
|||
height: 40px; |
|||
} |
|||
|
|||
ul[class*=list]:not(.noHover) > li:hover, |
|||
ul[class*=list]:not(.noHover) > li.enabling { |
|||
z-index: 1; |
|||
background: $blue; |
|||
} |
|||
|
|||
ul[class*=list] > li.enabling { |
|||
pointer-events: none |
|||
} |
|||
|
|||
ul[class*=list]:not(.noHover) > li:hover .coin-colorized, |
|||
ul[class*=list]:not(.noHover) > li:hover svg, |
|||
ul[class*=list]:not(.noHover) > li:hover svg path, |
|||
ul[class*=list]:not(.noHover) > li.enabling svg, |
|||
ul[class*=list]:not(.noHover) > li.enabling svg path, |
|||
ul[class*=list]:not(.noHover) > li.enabling .coin-colorized { |
|||
color: #FFF !important; |
|||
fill: #FFF !important; |
|||
} |
|||
|
|||
ul[class*=list]:not(.noHover) > li:hover code { |
|||
background: rgba(0,0,0,0.1) |
|||
} |
|||
|
|||
ul[class*=list]:not(.noHover) > li.enabling [class*="_action_loader"] { |
|||
display: flex; |
|||
transform: translateY(0px); |
|||
opacity: 1; |
|||
width: auto; |
|||
} |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
.dex { |
|||
.loader { |
|||
position: absolute; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
width: 100vw; |
|||
height: 100%; |
|||
padding: 5vh 20px; |
|||
left: 0; |
|||
z-index: 1000; |
|||
background: #FFF; |
|||
} |
|||
|
|||
.loader-svg svg { |
|||
width: 80px; |
|||
height: 80px; |
|||
} |
|||
|
|||
.loader .loader-wrapper { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
|
|||
.loader ul { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 0; |
|||
margin: 0; |
|||
border-radius: 50%; |
|||
list-style: none; |
|||
animation: pulse 2s ease-in-out infinite alternate; |
|||
color: $blue; |
|||
font-size: 1.2em; |
|||
font-weight: 200; |
|||
} |
|||
} |
|||
@ -0,0 +1,124 @@ |
|||
@import '../_variables.scss'; |
|||
|
|||
/* |
|||
Modal Styling Component ✏️ |
|||
---- |
|||
- Super small, but styles the labels |
|||
*/ |
|||
.dex { |
|||
.modal { |
|||
position: relative; |
|||
z-index: 4000; /* change back to 1000 */ |
|||
text-align: left; |
|||
display: block; |
|||
} |
|||
|
|||
.modal-header { |
|||
position: fixed; |
|||
display: flex; |
|||
width: 100%; |
|||
height: 80px; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 20px 10px 20px 20px; |
|||
flex-shrink: 0; |
|||
box-shadow: 0 6px 20px rgba(0,0,0,.04); |
|||
z-index: 1; |
|||
background: #FFF; |
|||
display: none |
|||
|
|||
} |
|||
|
|||
.modal-header h1 { |
|||
flex-grow: 1; |
|||
font-weight: 200; |
|||
font-size: 1.6em; |
|||
text-align: left; |
|||
color: $color-dark; |
|||
|
|||
} |
|||
|
|||
.modal-btn-close { |
|||
position: fixed; |
|||
z-index: 100010; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 10px !important |
|||
|
|||
} |
|||
|
|||
.modal-btn-close-icon, |
|||
.modal-btn-close-icon svg { |
|||
width: 42px; |
|||
height: 42px; |
|||
} |
|||
|
|||
.modal-content { |
|||
overflow: auto; |
|||
width: 100%; |
|||
font-weight: 200; |
|||
} |
|||
|
|||
.modal-content h1 { |
|||
font-size: 2.8em; |
|||
font-weight: 200; |
|||
margin: 0 0 .5em 0; |
|||
} |
|||
|
|||
.modal-icon { |
|||
position: fixed; |
|||
transform: scale(21); |
|||
opacity: .04; |
|||
pointer-events: none |
|||
} |
|||
|
|||
.modal-icon svg { |
|||
width: 100px; |
|||
height: 100px; |
|||
fill: #FFF; |
|||
} |
|||
|
|||
.modal-content-overlay { |
|||
display: flex; |
|||
flex-direction: column; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 100vh; |
|||
opacity: 0; |
|||
pointer-events: none; |
|||
background: $background-dark; |
|||
|
|||
transform: translateY(-20px) scale(.95); |
|||
will-change: transform; |
|||
transition: all .1s ease; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.modal-content-overlay > ul { |
|||
overflow: auto; |
|||
max-height: calc(100% - 300px); |
|||
will-change: transform; |
|||
} |
|||
|
|||
.modal ul[class*=list] { |
|||
|
|||
} |
|||
|
|||
/* animation state */ |
|||
.modal { |
|||
transition: all .32s ease-in-out; |
|||
will-change: all; |
|||
} |
|||
|
|||
.modal-display-content.modal-content-overlay { |
|||
opacity: 1; |
|||
transform: translateY(0) scale(1); |
|||
} |
|||
|
|||
.modal-display-content.modal-content-overlay > ul { pointer-events: all } |
|||
} |
|||
@ -0,0 +1,112 @@ |
|||
@import '../_variables.scss'; |
|||
|
|||
/* |
|||
Notifier Styling Component ✏️ |
|||
|
|||
*/ |
|||
.dex { |
|||
.notifier { |
|||
position: fixed; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
width: 100vw; |
|||
min-height: 100vh; |
|||
padding: 5vh 20px; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 2000; |
|||
} |
|||
|
|||
.notifier-title { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.notifier-title-icon { |
|||
opacity: .05; |
|||
position: absolute; |
|||
transform: scale(10) translateY(-10px); |
|||
pointer-events: none; |
|||
|
|||
} |
|||
|
|||
.notifier-title-icon svg { |
|||
width: 200px; |
|||
height: 150px; |
|||
} |
|||
|
|||
.notifier-title-text { |
|||
font-size: 2.4em; |
|||
font-weight: 200; |
|||
margin: 0 0 .5em 0; |
|||
} |
|||
|
|||
.notifier button { |
|||
pointer-events: all; |
|||
} |
|||
|
|||
.notifier-items { |
|||
@extend .flexColumnCenter; |
|||
flex-shrink: 0; |
|||
items-style: none; |
|||
padding: 0; |
|||
margin: 0; |
|||
font-size: 1em; |
|||
width: 100%; |
|||
} |
|||
|
|||
.notifier-items li { |
|||
flex-shrink: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.notifier-close { |
|||
width: 200px; |
|||
background: #04050A; |
|||
margin: 20px; |
|||
padding: 20px; |
|||
border-radius: 30px; |
|||
} |
|||
|
|||
.notifier-appversion { |
|||
opacity: .5; |
|||
text-transform: uppercase; |
|||
|
|||
} |
|||
|
|||
|
|||
/* animation state */ |
|||
.notifier { |
|||
position: fixed; |
|||
top: -100vh; |
|||
transition: all .32s ease-in-out; |
|||
will-change: all; |
|||
overflow: hidden; |
|||
} |
|||
.notifier.notifier-error { |
|||
top: 0; |
|||
background: $danger; |
|||
box-shadow: 0px 0px 100px 100px $danger; |
|||
color: #FFF |
|||
} |
|||
|
|||
.notifier.notifier-error:before { |
|||
position: absolute; |
|||
content:""; |
|||
top: 0; |
|||
left: 0; |
|||
bottom: 0; |
|||
right: 0; |
|||
background: $danger; |
|||
opacity: .8; |
|||
z-index: -1; |
|||
} |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
@import '../_variables.scss'; |
|||
|
|||
/* |
|||
Progress Styling Component ✏️ |
|||
---- |
|||
*/ |
|||
.dex { |
|||
.progress_bar { |
|||
position: relative; |
|||
-webkit-appearance: none; |
|||
height: 6px; |
|||
width: 100%; |
|||
transition: .12s ease-in-out; |
|||
margin-bottom: 20px; |
|||
&::-webkit-progress-bar { |
|||
background-color: #000; |
|||
border-radius: 3px; |
|||
|
|||
} |
|||
&::-webkit-progress-value { |
|||
background-image: linear-gradient(90deg, #9300FF 0%, #5272E2 49%, #05E6B5 98%); |
|||
box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1); |
|||
border-radius: 3px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
&__transparent::-webkit-progress-bar { background-color: rgba(255, 255, 255, .2); } |
|||
} |
|||
|
|||
.progress_bar:after { |
|||
position: absolute; |
|||
top: 10px; |
|||
right: 0; |
|||
content: 'progress ' attr(value)' %'; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.progress_bar:before { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 10px; |
|||
content: attr(data-amount); |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
@import '../_variables.scss'; |
|||
|
|||
/* |
|||
Range Styling Component ✏️ |
|||
---- |
|||
- Styles the range input in HTML |
|||
- Includes a custom element to display labels for either end of the range |
|||
*/ |
|||
|
|||
.c-range { } |
|||
@ -0,0 +1,110 @@ |
|||
.dex { |
|||
.ReactTable { |
|||
border: 0; |
|||
background: $background-dark; |
|||
color: #FFF; |
|||
width: 100%; |
|||
} |
|||
|
|||
.rt-thead { |
|||
background: #000; |
|||
font-weight: 400; |
|||
color: #FFF; |
|||
} |
|||
|
|||
.ReactTable .rt-thead .rt-th { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 10px 10px; |
|||
border: 0; |
|||
} |
|||
|
|||
.ReactTable .-pagination { |
|||
box-shadow: none |
|||
} |
|||
|
|||
.ReactTable.-striped .rt-tr { |
|||
cursor: pointer; |
|||
transition: all .2s ease; |
|||
text-align: right |
|||
} |
|||
|
|||
.ReactTable .rt-tbody .rt-td { |
|||
padding: 10px; |
|||
text-align: center; |
|||
|
|||
} |
|||
|
|||
.ReactTable.-striped .rt-tr.-odd { |
|||
background: rgba(256,256,256,0.05); |
|||
} |
|||
|
|||
.ReactTable.-striped .rt-tr.selected { |
|||
color: #FFF; |
|||
background: $blue !important; |
|||
} |
|||
|
|||
.ReactTable .rt-thead .rt-th.-sort-asc:before, |
|||
.ReactTable .rt-thead .rt-td.-sort-asc:before{ |
|||
content: "▲"; |
|||
font-size: .6em; |
|||
margin-right: 4px; |
|||
|
|||
} |
|||
|
|||
.ReactTable .rt-thead .rt-th.-sort-desc:before, |
|||
.ReactTable .rt-thead .rt-td.-sort-desc:before { |
|||
content: "▼"; |
|||
font-size: .6em; |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
.ReactTable .rt-thead .rt-th.-sort-asc, |
|||
.ReactTable .rt-thead .rt-th.-sort-desc { box-shadow: none } |
|||
|
|||
.ReactTable .-pagination .-btn, |
|||
.ReactTable .-pageJump input, |
|||
.ReactTable .-pageSizeOptions select { |
|||
background-color: rgba(256,256,256,0.1); |
|||
color: $background-dark; |
|||
font-weight: 200; |
|||
} |
|||
|
|||
.ReactTable .-previous, |
|||
.ReactTable .-next { |
|||
padding: 5px 10px |
|||
} |
|||
|
|||
.ReactTable .-pagination .-pageSizeOptions { |
|||
display: none |
|||
} |
|||
|
|||
.ReactTable .rt-noData { |
|||
background: $background-dark; |
|||
color: #FFF; |
|||
} |
|||
|
|||
.rt-tr-group { |
|||
position: relative; |
|||
} |
|||
|
|||
.rt-resizable-header-content { |
|||
text-transform: capitalize; |
|||
} |
|||
.depth { |
|||
position: absolute; |
|||
height: 100%; |
|||
left: 0; |
|||
top: 0; |
|||
opacity: .1; |
|||
} |
|||
|
|||
.asks .depth { |
|||
background: $green; |
|||
} |
|||
|
|||
.bids .depth { |
|||
background: red; |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
@import '../_variables.scss'; |
|||
|
|||
.c-toggle {} |
|||
@ -0,0 +1,11 @@ |
|||
.dex { |
|||
.custom-tooltip { |
|||
display: flex; |
|||
flex-direction: column; |
|||
background: #000; |
|||
color: #FFF; |
|||
padding: 10px; |
|||
border-radius: 6px; |
|||
z-index: 100; |
|||
} |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
.dex { |
|||
.window__controls { |
|||
height: 28px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.window__controls a svg { |
|||
transition: all .3s ease; |
|||
will-change: transform; |
|||
} |
|||
} |
|||
@ -0,0 +1,81 @@ |
|||
@import '../_variables.scss'; |
|||
@import '../_helpers.scss'; |
|||
|
|||
/* |
|||
Window Header Component |
|||
---- |
|||
- Use for any window header |
|||
- Can be changed into light version with `.is-light` class |
|||
*/ |
|||
|
|||
.dex { |
|||
.window-footer { |
|||
width: 100%; |
|||
height: $footer-height; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
color: white; |
|||
font-size: $font-size-default; |
|||
/*@extend .webkit-drag; |
|||
-webkit-app-region: drag; |
|||
cursor: -webkit-grab;*/ |
|||
pointer-events: none |
|||
} |
|||
|
|||
.window-footer ul { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 1000; |
|||
list-style: none; |
|||
|
|||
padding: 0; |
|||
margin: 0; |
|||
|
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: $footer-height; |
|||
-webkit-user-select: none !important; |
|||
} |
|||
|
|||
.window-footer:not(.window-footer__visible) { |
|||
opacity: 0; |
|||
transform: translateY(10px); |
|||
} |
|||
|
|||
|
|||
.window-footer:hover ul { |
|||
opacity: 1; |
|||
transform: translateY(0px); |
|||
} |
|||
|
|||
/* CONTROLS */ |
|||
|
|||
.window-footer .window__controls { |
|||
margin-left: auto; |
|||
transform: scale(.5); |
|||
} |
|||
|
|||
.window-footer .window__controls button { |
|||
width: $action-size; |
|||
height: $action-size; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
border-radius: 50%; |
|||
pointer-events: all; |
|||
} |
|||
|
|||
.window-footer .window__controls button svg { |
|||
width: $action-size; |
|||
height: $action-size; |
|||
} |
|||
|
|||
.window-footer .window__controls button:hover svg { |
|||
transform: scale(1.1); |
|||
opacity: .8; |
|||
} |
|||
} |
|||
@ -0,0 +1,149 @@ |
|||
@import '../_variables.scss'; |
|||
@import '../_helpers.scss'; |
|||
|
|||
/* |
|||
Window Header Component |
|||
---- |
|||
- Use for any window header |
|||
- Can be changed into light version with `.is-light` class |
|||
*/ |
|||
|
|||
.dex { |
|||
.window-header { |
|||
display: flex; |
|||
justify-content: center; |
|||
width: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
color: white; |
|||
font-size: $font-size-default; |
|||
z-index: 10000; |
|||
} |
|||
|
|||
|
|||
.window-header-logo { |
|||
@extend .flexCenter; |
|||
} |
|||
|
|||
.window-header-logo, |
|||
.window-header-logo i, |
|||
.window-header-logo svg { |
|||
display: flex; |
|||
flex-shrink: 0; |
|||
width: 30px; |
|||
height: 30px; |
|||
} |
|||
|
|||
.window-header-logo { margin-bottom: 6px } |
|||
|
|||
.window-header-logo svg { |
|||
transform: scale(5); |
|||
transform-origin: 55% 76%; |
|||
} |
|||
|
|||
.window-header-logo svg g { |
|||
fill: #FFF !important |
|||
|
|||
} |
|||
|
|||
|
|||
.window-header ul { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: 1000; |
|||
list-style: none; |
|||
transition: transform .12s ease-in-out, opacity .12s ease-in-out; |
|||
will-change: transform, opacity; |
|||
border-radius: 5px 5px 0 0; |
|||
opacity: 0; |
|||
transform: translateY(-50px); |
|||
padding: 20px 10px 0; |
|||
margin: 0; |
|||
|
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 60px; |
|||
-webkit-user-select: none !important; |
|||
background: $background-dark; |
|||
box-shadow: 0px 0px 100px 100px $background-dark; |
|||
will-change: transform; |
|||
|
|||
} |
|||
|
|||
|
|||
.window-header:hover ul { |
|||
opacity: 1; |
|||
transform: translateY(0px); |
|||
will-change: transform; |
|||
|
|||
} |
|||
|
|||
/* TITLE */ |
|||
.window__title { |
|||
position: absolute; |
|||
width: 100%; |
|||
min-height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-direction: column; |
|||
z-index: 0; |
|||
pointer-events: none; |
|||
will-change: transform; |
|||
|
|||
} |
|||
|
|||
.window__title h1 { |
|||
margin: 0; |
|||
font-size: 1em; |
|||
color: #FFF |
|||
} |
|||
|
|||
.window-header-appversion { |
|||
text-transform: uppercase; |
|||
font-size: 10px |
|||
} |
|||
|
|||
/* RIGHT SIDE */ |
|||
|
|||
.window__controls_right { |
|||
margin-left: auto; |
|||
} |
|||
|
|||
.window__controls_right button { |
|||
padding: 8px 14px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
/* CONTROLS */ |
|||
|
|||
.window-header .window__controls { |
|||
position: absolute; |
|||
left: 10px; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.window-header .window__controls a { |
|||
width: 14px; |
|||
height: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: rgba(256,256,256,0.1); |
|||
border-radius: 50%; |
|||
margin-left: 5px; |
|||
cursor: pointer; |
|||
pointer-events: all; |
|||
} |
|||
|
|||
.window-header .window__controls a svg { |
|||
width: 14px; |
|||
height: 14px; |
|||
} |
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
/* |
|||
main styling |
|||
*/ |
|||
|
|||
/* Imports */ |
|||
|
|||
@import '_variables.scss'; |
|||
@import '_helpers.scss'; |
|||
@import '_animations.scss'; |
|||
@import '_base.scss'; |
|||
|
|||
@import 'elements/_window-controls.scss'; |
|||
@import 'elements/_window-header.scss'; |
|||
@import 'elements/_window-footer.scss'; |
|||
@import 'elements/_link.scss'; |
|||
@import 'elements/_loader.scss'; |
|||
@import 'elements/_notifier.scss'; |
|||
@import 'elements/_inputs.scss'; |
|||
@import 'elements/_buttons.scss'; |
|||
@import 'elements/_list.scss'; |
|||
@import 'elements/_forms.scss'; |
|||
@import 'elements/_progress.scss'; |
|||
@import 'elements/_tooltip.scss'; |
|||
@import 'elements/_modal.scss'; |
|||
@import 'elements/_tables.scss'; |
|||
@import 'elements/_header.scss'; |
|||
@import 'elements/_growler.scss'; |
|||
|
|||
@import 'components/dashboard.scss'; |
|||
@import 'components/trade.scss'; |
|||
@import 'components/login.scss'; |
|||
@import 'components/coinList.scss'; |
|||
@import 'components/wallet.scss'; |
|||
@import 'components/balance.scss'; |
|||
@import 'components/orders.scss'; |
|||
|
|||
.dex { |
|||
position: absolute; |
|||
top: 0; |
|||
width: 100%; |
|||
z-index: 2000; |
|||
|
|||
transition: all .2s ease; |
|||
color: $color-primary; |
|||
background-repeat: no-repeat; |
|||
height: 100vh; |
|||
|
|||
* { box-sizing: border-box } |
|||
|
|||
.content-container { |
|||
display: flex; |
|||
width: 100vw; |
|||
max-height: 100vh; |
|||
} |
|||
|
|||
.app.content-container { |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: $background-app; |
|||
} |
|||
|
|||
.app.content-container .Placeholder { flex: 1 } |
|||
.app.content-container .app-view { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-end; |
|||
width: 100%; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.app.content-container .app-view > *:not(.notifier) { |
|||
display: flex; |
|||
width: 100%; |
|||
pointer-events: all; |
|||
overflow: auto; |
|||
} |
|||
|
|||
|
|||
.app.content-container .window-footer { z-index: 0 } |
|||
|
|||
/* states */ |
|||
.app.recording.content-container, |
|||
.app.playing.content-container { justify-content: flex-end } |
|||
|
|||
.app:not(.recording) .player-container { display: none } |
|||
} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue