diff --git a/.gitignore b/.gitignore index dc8d71f0..31e4e6fb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,10 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies -/node_modules +node_modules .idea # production -/dist +dist /release /src/common/Loopring /mocks diff --git a/dex23082018.zip b/dex23082018.zip new file mode 100644 index 00000000..c1b9cfb0 Binary files /dev/null and b/dex23082018.zip differ diff --git a/dexDefaultbtn.zip b/dexDefaultbtn.zip new file mode 100644 index 00000000..22541d85 Binary files /dev/null and b/dexDefaultbtn.zip differ diff --git a/dexlab2018-16-08.zip b/dexlab2018-16-08.zip new file mode 100644 index 00000000..d3988bb1 Binary files /dev/null and b/dexlab2018-16-08.zip differ diff --git a/dexlab20180817.zip b/dexlab20180817.zip new file mode 100644 index 00000000..8cd987bf Binary files /dev/null and b/dexlab20180817.zip differ diff --git a/dexlab20180820.zip b/dexlab20180820.zip new file mode 100644 index 00000000..d119023a Binary files /dev/null and b/dexlab20180820.zip differ diff --git a/dexlab20180824 V1.1.3 fixed css.zip b/dexlab20180824 V1.1.3 fixed css.zip new file mode 100644 index 00000000..9b197c8d Binary files /dev/null and b/dexlab20180824 V1.1.3 fixed css.zip differ diff --git a/dexlabAddresstruncate.zip b/dexlabAddresstruncate.zip new file mode 100644 index 00000000..9599c85a Binary files /dev/null and b/dexlabAddresstruncate.zip differ diff --git a/dist2018-08-15.zip b/dist2018-08-15.zip new file mode 100644 index 00000000..ac0cbcf2 Binary files /dev/null and b/dist2018-08-15.zip differ diff --git a/fontfamily0820.zip b/fontfamily0820.zip new file mode 100644 index 00000000..4ba0d796 Binary files /dev/null and b/fontfamily0820.zip differ diff --git a/package.json b/package.json index 0d379df8..0083d467 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "async": "2.6.0", "copy-to-clipboard": "3.0.8", "dva": "2.1.0", + "jquery": "^3.3.1", "ledgerco": "1.2.1", "lodash": "4.17.5", "moment": "2.20.1", @@ -40,6 +41,6 @@ "eslint-plugin-react": "7.1.0", "husky": "0.12.0", "redbox-react": "1.4.3", - "roadhog": "2.3.0" + "roadhog": "2.4.2" } } diff --git a/public/index.ejs b/public/index.ejs index ac8d77b0..45cbb811 100644 --- a/public/index.ejs +++ b/public/index.ejs @@ -4,11 +4,13 @@ - Circulr Wallet & DEX By Loopring Protocol - - + + + Dexlab Wallet & DEX By Dexlab Protocol + +
- + \ No newline at end of file diff --git a/src/assets/css/basic/margin.less b/src/assets/css/basic/margin.less index bdb0f175..ac8a9d62 100644 --- a/src/assets/css/basic/margin.less +++ b/src/assets/css/basic/margin.less @@ -175,6 +175,10 @@ margin-top: 5.0rem !important } + .mt70 { + margin-top: 7.0rem !important + } + .mb0 { margin-bottom: 0.0rem !important } diff --git a/src/assets/css/components.less b/src/assets/css/components.less index 19c20861..b2c1e520 100644 --- a/src/assets/css/components.less +++ b/src/assets/css/components.less @@ -28,18 +28,18 @@ h1,h2,h3,h4,h5,h6{ margin:0 !important; } .ant-form-item{margin-bottom: 10px !important;} .ant-select-selection--single,.ant-input{ height: 40px!important; } .ant-slider-dot{} -.ant-select-selection__rendered,.ant-input{ line-height: 40px !important } +.ant-select-selection__rendered,.ant-input{ line-height: 40px !important; padding: 10px 20px; } .form-dark .ant-input,.form-dark .ant-input:focus,.form-dark .ant-select-selection,.form-dark .ant-select-selection:focus{ border: 0 !important; outline: 0 !important; box-shadow: none !important; } .form-dark .ant-form-item-label label{ color: @text-color-dark-2 } .form-dark .ant-input-group .ant-input-group-addon{ border:0 !important; background: @dark-color; } .form-dark textarea.ant-input{ line-height: 1.2 !important } .form-dark .label{ font-size: 14px; color: @text-color-dark-2 } -.prefix .ant-input-affix-wrapper .ant-input:not(:last-child){padding-left:11px !important;} -.ant-input-affix-wrapper .ant-input:not(:last-child){ padding-left:70px !important; } +.prefix .ant-input-affix-wrapper .ant-input:not(:last-child){border:1px solid rgba(16, 30, 43, 1); padding-left:11px !important; color:#7689a0 !important} +.ant-input-affix-wrapper .ant-input:not(:last-child){border:1px solid #979797; padding-left:70px !important; border-radius:5px; background-color:#101e2b; color:#ffffff} .card.dark .ant-tabs-bar{ border-bottom-color:@dark-color-2; color:@text-color-dark-3; } .ant-radio-inner:after{ border-radius: 8px !important } .ant-input-group .ant-btn{ height: 40px !important; line-height: 38px; } -.form-dark .ant-input-group .ant-btn{ border:0 !important; } +.form-dark .ant-input-group .ant-btn{ border-radius: 5px !important; } .form-dark .ant-input-group .ant-btn:hover,.form-dark .ant-input-group .ant-btn:focus{ border:0 !important; } .card.dark .ant-tabs{ font-size: @font-size-base !important } .card.dark .ant-tabs.ant-tabs-card > .ant-tabs-bar{ margin:@mr-0; } @@ -65,5 +65,6 @@ h1,h2,h3,h4,h5,h6{ margin:0 !important; } .eye-switch .ant-input-group .ant-input-group-addon{ width: 60px; text-align: center; } .eye-switch .ant-input-group .ant-input-group-addon i{ font-size: 16px; } .ant-tabs-nav-wrap{ text-align: center; } +.orders {position: relative; right: 316px; top: 35px; height: 125%; padding-top: 0px; width: 625px; background-color: #182C3E; border-radius: 5px; @media only screen and (min-width: 1745px) { width: 452px}; @media only screen and (min-width: 1920px) { width: 625px}; @media only screen and (min-width: 2133px) { width: 838px}; @media only screen and (min-width: 2400px) { width: 1104px}; @media only screen and (min-width: 2560px) { width: 1265px}; @media only screen and (min-width: 2880px) { width: 1585px} } .orders .ant-tabs-nav-wrap{ text-align: left; } diff --git a/src/assets/css/core.less b/src/assets/css/core.less index 08e3bd27..667ad436 100644 --- a/src/assets/css/core.less +++ b/src/assets/css/core.less @@ -15,7 +15,7 @@ ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } .relative { position: relative; } .font-bold { font-weight: bold; } .font-normal { font-weight: normal; font-style: normal; } -.text-primary { color: @primary-color; } +.text-primary { color: @primary-color; font-weight: 600;} .text-color { color: @text-color-1; } .text-dark { color: @text-color-dark !important; } .text-mute { color: @text-color-dark-2 !important; } @@ -27,6 +27,7 @@ ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } .text-success, .text-up { color: @success-color !important; } .text-link{ color: @blue-light !important } .text-left { text-align: left; } +.text-spread {color: #ffffff !important; font-size: 12px; margin: 0px 20px; background-color: rgb(16, 30, 43); padding-right: 20px; border-radius: 5px; font-weight: 600; } .text-center { text-align: center; } .text-right { text-align: right; } .text-sm-control { display: inline-block; max-width: 80px; } @@ -37,6 +38,7 @@ ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } .bg { background-color: @blue-dark } .img-responsive { display: block; height: auto; max-width: 100%; } .img-responsive img { width: 100%; } +.profileimg { vertical-align: middle; border-style: none; width: 44%; } .cards:after, .cards:before, .clearfix:after, .clearfix:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .panel:after, .panel:before, .panel-body:after, .panel-body:before, .collapse:before { display: block; content: " "; } .article, .clearfix:after, .dl-horizontal dd:after, .form-horizontal .form-group:after, .panel, .list-group .item-md:after, .list-group .item-sm:after, .panel:after, .panel-body:after, .collapse:after { clear: both; } .clear { clear: both; } @@ -54,7 +56,7 @@ ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } .blk-xs, .blk-sm, .blk-md, .blk, .blk-lg { clear: both; overflow: hidden; } .blk { height: 15px; } .blk-xs { height: 5px; } -.blk-sm { height: 10px; } +.blk-sm { height: 15px; } .blk-md { height: 20px; } .blk-lg { height: 40px; } .pd { padding: 15px; } @@ -105,17 +107,17 @@ ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } section { } .bullet { position: relative; top: 2px; margin-right: 5px; display: inline-block; width: 16px; height: 16px; background-image: linear-gradient(90deg, #FAA48D 0%, #EC7F8F 99%); background-image: -webkit-linear-gradient(90deg, #FAA48D 0%, #EC7F8F 99%); background-image: -moz-linear-gradient(90deg, #FAA48D 0%, #EC7F8F 99%); } .card { position: relative; width: 100%; background: @blue-dark; } -.card.dark { } +.card.dark { border-radius:5px } .card.padding .card-body { padding: 15px 0 0; } -.card-header { position: relative; height: 40px; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center } -.card-header h4 { font-size: 16px; font-weight: 600; } +.card-header { position: relative; height: 30px; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center } +.card-header h4 { font-size: 14px; font-weight: 600; } .card.dark .card-header h4 { color: @text-color-dark-1 !important; } .card.dark.bordered { position: relative; border: 1px solid @dark-color-2; } .card.bordered .card-header { padding: 10px; } .card.dark .card-header.bordered { border-bottom: 1px solid @dark-color-2; } .card.bordered .col-auto { padding: 0 } .card-title { display: inline-block; font-size: 15px; line-height: 30px; font-weight: bold; } -.card-body { padding: 15px 15px; } +.card-body { padding: 25px 15px; } .card-footer { padding: 15px 25px 25px; } .card-inverse { background: #56535E; } .card-inverse .card-header.bordered { border-bottom: 1px solid@text-color-dark; color: @text-color-dark; } @@ -179,32 +181,54 @@ section { } .table.text-right-last tr>td:last-child, .table.text-right-last tr>th:last-child { text-align: right !important } /* btn */ -.btn { display: inline-block; font-weight: normal; border:0 !important; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 0; padding: 0 12px; line-height: 30px; transition: all 0.45s ease-in-out; cursor: pointer } +.btn { display: inline-block; font-weight: normal; border:0; border-radius:5px !important; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 0; padding: 0 12px; line-height: 30px; transition: all 0.45s ease-in-out; cursor: pointer } .btn:focus, .btn:hover { text-decoration: none; } .btn:focus, .btn.focus { outline: 0; /*box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);*/ } .btn.disabled, .btn:disabled, .disabled .btn { opacity: .65; box-shadow: none; cursor: not-allowed; } a.btn.disabled, fieldset[disabled] a.btn { pointer-events: none; } +.btn-cancelAll {color: @blue-light-dex-color; background-color: transparent; } +.btn-cancelAll:hover { color: @text-color-dark !important} .btn-primary { color: @text-color-dark !important; background-color: @blue-light !important; border:0 !important; } .btn-primary:hover { color: @text-color-dark !important; background-color: fade(@blue-light, 54%) !important; } .btn-primary.disabled, .btn-primary:disabled { background-color: fade(@blue-light, 27%) !important; } .btn-secondary { background-color: @light-color-1; } .btn-secondary:hover { color: @text-color-dark-1; background-color: fade(@light-color-1, 54%) } .btn-secondary.disabled, .btn-secondary:disabled { background-color: fade(@light-color-1, 27%) } -.btn-success { color: @text-color-dark !important; background-color: @success-color !important; } +.btn-success { color: @text-color-dark !important; background-color: @success-color !important; border-radius: 5px !important; border: 0 !important;;} .btn-success:hover { color: @text-color-dark !important; background-color: fade(@success-color, 54%) !important; } .btn-success.disabled, .btn-success:disabled { background-color: fade(@success-color, 27%) !important; } -.btn-danger { color: @text-color-dark !important; background-color: @error-color !important; border:0 !important; } +.btn-danger { color: @text-color-dark !important; background-color: @error-color !important; border-radius:5px !important; border: 0 !important;;} .btn-danger:hover { color: @text-color-dark!important; background-color: fade(@error-color, 54%)!important; } .btn-danger.disabled, .btn-danger:disabled { background-color: fade(@error-color, 27%)!important; } .btn-lg{ height: 30px; line-height: 30px; padding: 0 20px; font-size: 16px; line-height: 1.5; } -.btn-xlg { height: 40px !important; padding: 0 20px; font-size: 16px !important; line-height: 40px !important; font-weight: bold !important } +.btn-xlg { height: 40px !important; padding: 0 20px; font-size: 16px !important; line-height: 40px !important; font-weight: bold !important; border-radius: 5px; } .btn-xxlg { height: 60px !important; padding: 0 20px; font-size: 20px !important; line-height: 60px !important; font-weight: bold !important } .btn-sm, .btn-group-sm>.btn { padding: 4px 12px; font-size: @font-size-sm; line-height: 1.5; } -.btn-block { display: block; width: 100% } +.btn-block { display: block; width: 100%; border-radius: 5px } .btn-block+.btn-block { margin-top: 2px; } .btn-o-dark { border: 1px solid @dark-color-1 !important; background: @transparent !important; color: @text-color-dark !important; } .btn-o-dark:hover { background-color: @dark-color !important; color: @primary-color !important } +.btn-fee-slow { width: 30%; color: @text-color-light-blue !important; background-color: @fee-background-color !important; font-size: 13px !important; border:1px solid #97979733 !important; border-radius: 5px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; display: inline-block;} +.btn-fee-slow:hover {background-color:@fee-hover-bk-color !important} +.btn-fee-slow:focus {background-color:@fee-hover-bk-color !important} +.btn-fee-slow:target {background-color:@fee-hover-bk-color !important} + +.btn-fee-standard { width: 40%; color: @text-color-light-blue !important; background-color: @fee-background-color !important; font-size: 13px !important; border:1px solid #97979733 !important; border-radius: 0px !important; display: inline-block;} +.btn-fee-standard:active {background-color:@fee-hover-bk-color !important} +.btn-fee-standard:hover {background-color:@fee-hover-bk-color !important} +.btn-fee-standard:focus {background-color:@fee-hover-bk-color !important} +.btn-fee-standard:target {background-color:@fee-hover-bk-color !important} +.btn-button-clicked {width: 40%; color: @text-color-light-blue !important; background-color:@fee-hover-bk-color !important; font-size: 13px !important; border:1px solid #97979733 !important; border-radius: 0px !important; display: inline-block;} + +.btn-fee-fast { width: 30%; color: @text-color-light-blue !important; background-color: @fee-background-color !important; font-size: 13px !important; border:1px solid #97979733 !important; border-radius: 5px !important; border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; display: inline-block;} +.btn-fee-fast:hover {background-color:@fee-hover-bk-color !important} +.btn-fee-fast:focus {background-color:@fee-hover-bk-color !important} +.btn-fee-fast:target {background-color:@fee-hover-bk-color !important} + +.btn-buy-max {height: 30px; color: rgba(255, 255, 255, 0.77) !important; background-color: #1B1917 !important; font-size: 9px !important; border:1px solid #1B1917 !important; border-radius: 5px !important; position: relative; left: 7px;} + +.orderFormStl { color: rgba(255, 255, 255, 0.54); } .container { margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; width: 1200px; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -2px; } .no-gutters { margin-right: 0; margin-left: 0; } @@ -236,6 +260,7 @@ a.btn.disabled, fieldset[disabled] a.btn { pointer-events: none; } .order-10 { -ms-flex-order: 10; order: 10; } .order-11 { -ms-flex-order: 11; order: 11; } .order-12 { -ms-flex-order: 12; order: 12; } +.orderContainer { border: 1px solid #97979733; border-radius: 5px; } .flex-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-column { -ms-flex-direction: column !important; flex-direction: column !important; } diff --git a/src/assets/css/fonts.less b/src/assets/css/fonts.less index 86ade8ae..c0ce73a5 100644 --- a/src/assets/css/fonts.less +++ b/src/assets/css/fonts.less @@ -138,8 +138,8 @@ span>[class^="icon-"], span>[class*=" icon-"] { margin-right: 5px; } .icon-chevron-left:before { content: "\e905"; } .icon-chevron-right:before { content: "\e906"; } .icon-chevron-up:before { content: "\e907"; } -.icon-eye:before { content: "\e908"; } -.icon-eye-o:before { content: "\e909"; } +.icon-wallet:before { content: "\e916"; } +.icon-wallet-o:before { content: "\e916"; } .icon-bell:before { content: "\e90a"; } .icon-lock:before { content: "\e90b"; } .icon-plus:before { content: "\e90c"; } @@ -162,7 +162,7 @@ span>[class^="icon-"], span>[class*=" icon-"] { margin-right: 5px; } .icon-search:before { content: "\e91d"; } .icon-caret:before { content: "\e91e"; } .icon-export:before { content: "\e91f"; } -.icon-eye-slash:before { content: "\e920"; } +.icon-wallet-slash:before { content: "\e916"; } .icon-poweroff:before { content: "\e922"; } .icon-gift:before { content: "\e923"; } .icon-qrcode:before { content: "\e926"; } diff --git a/src/assets/css/resetAntd.less b/src/assets/css/resetAntd.less index 60d82c08..53f41d09 100644 --- a/src/assets/css/resetAntd.less +++ b/src/assets/css/resetAntd.less @@ -18,7 +18,7 @@ .theme-blue{ .ant-modal{ .ant-modal-content{ - background: @blue-light ; + background: #08274c ; .ant-modal-body{ height: 100%; } @@ -27,9 +27,9 @@ } .panel-default-theme{ - background: @blue-light ; - height: 100%; - width:30vw; + background: #101C27 ; + height: 67%; + width: 40vw; } diff --git a/src/assets/css/style.less b/src/assets/css/style.less index 2a7474ef..feb0f65f 100644 --- a/src/assets/css/style.less +++ b/src/assets/css/style.less @@ -3,9 +3,9 @@ /*--------------------- header -----------------------*/ -header { position: fixed; z-index: 1000; width: 100%; border-bottom: 4px solid @blue-darker; } -header .bg { height: 70px; padding: 15px 20px; } -header .w-control { margin-left: 280px; } +header { position: fixed; z-index: 1000; width: 100%; border-bottom: 4px solid @blue-darker; background-color:#182c3e} +header .bg { height: 70px; margin-left: 335px; margin-right: 335px;} +// header .w-control { margin-left: 280px; } header h2 { font-size: 18px; opacity: .87; } header h2 span { padding-left: 5px; font-weight: normal; vertical-align: middle; opacity: .54; } header .account { position: relative; } @@ -16,12 +16,16 @@ header .account .msg i { display: inline-block; transform: scale(0.6, 0.6); vert /*--------------------- custom -----------------------*/ -.side { position: absolute; height: 100%; } -.side-fixed { position: fixed; height: 100%; } -.m-container { overflow: hidden; padding-top: 74px; } -.h-full { height: 100vh; } +.side { position: absolute; height: 100%; top: 66px; right: -1.5px; width: 300px; padding-left: 5px;} +.sideOrderBook {position: absolute; height: 44%; left:28px; width: 300px; border-radius:5px; } +.side-fixed { position: fixed; height: 100%; top:85px; left:335px; width: 300px; padding-top:94px } +.m-container { overflow: hidden; padding-top: 86px; } +.h-full { height: 100vh; border-radius: 5px; } +.h-half { height: 44vh; border-radius: 5px; } +.h-half1 { height: 65vh;} +.marketSearch {width: 93%; height: 48px; position: absolute; margin-top: 45px; background-color: #101e2b; border:0.5px solid #97979733; border-radius: 5px; padding: 10px 0px} .loopring-brand { height: 70px; text-align: center; padding-top: 10px; } -.loopring-brand .img { width: 134px; height: 40px; vertical-align: middle } +.loopring-brand .img { width: 149px; height: 30px; vertical-align: middle; margin-top: 10px } .token-total { text-align: center; padding: 0 0 20px; } .token-total h3 { font-family: "DINPro", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif"; font-size: 20px; } .token-total small { opacity: .27 } @@ -47,7 +51,7 @@ header .account .msg i { display: inline-block; transform: scale(0.6, 0.6); vert .token-list .item:hover { background: @dark-color-3; } .token-list .item.active, .token-list .item.active:hover { background: @blue-dark; border-color:transparent ; } .token-list .item.active h3, .token-list .item:hover h3 { opacity: .87; } -.icon-token { display: inline-block; width: 32px; height: 32px; border: 1px solid @text-color-dark-3; border-radius: 16px; font-size: 22px; text-align: center; line-height: 30px; color: @text-color-dark-1 } +.icon-token { display: inline-block; width: 32px; height: 32px; border-radius: 16px; font-size: 22px; text-align: center; line-height: 30px; color: @text-color-dark-1 } .icon-token-md { display: inline-block; width: 48px; height: 48px; border: 1px solid @text-color-dark-3; border-radius: 24px; font-size: 32px; text-align: center; line-height: 46px; color: @text-color-dark-1 } .icon-success { background: @success-color; text-align: center; color: @text-color-dark; border-radius: 60px; } .icon-warning { background: @warning-color; text-align: center; color: @text-color-dark; border-radius: 60px; } @@ -95,7 +99,7 @@ header .account .msg i { display: inline-block; transform: scale(0.6, 0.6); vert .home-content .tab-card.inup { text-align: center; } .home-content .tab-card.inup .item { position: relative; width: 100px; height: 120px; line-height: 80px; padding: 0; margin: 10px; background-color: fade(@blue-dark, 87%); text-align: center; color: #1C60FF; } .home-content .tab-card.inup .item i { font-size: 32px; } -.home-content .tab-card.inup .item h4 { position: relative; top: 0px; text-align: center; font-size: 12px; line-height: 1.2; font-weight: normal;} +.home-content .tab-card.inup .item h4 { position: relative; top: 0px; text-align: center; font-size: 12px; line-height: 1.2; } .home-content .notice { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 20px; } .home-content .notice i { display: block; width: 24px; height: 24px; line-height: 24px; font-size: 16px; } .home-content .notice div { padding: 10px; } @@ -133,32 +137,35 @@ header .account .msg i { display: inline-block; transform: scale(0.6, 0.6); vert .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .token-last-quotes ul { margin: 0; } .token-last-quotes ul>li>em { display: block; font-style: normal; font-weight: 600; } -.token-last-quotes ul>li>small { color: @text-color-dark-3; font-size: @font-size-base; } -.token-last-quotes ul>li { padding-left: 40px; font-weight: 400; } +.token-last-quotes ul>li>small { color: @text-color-dark-3; font-size: @font-size-sm; } +.token-last-quotes ul>li { padding-left: 37px; font-weight: 400; } #back { width: 40px; height: 40px; text-align: center; line-height: 40px; background: @dark-color-2; color: @text-color-dark-1 } #back i { font-size: 32px; } #back:hover { background: @light-color-1; } .tradeHeaderEle { display: flex; } -.tradeHeaderEle .pair-select { width: 215px; font-size: 18px; font-weight: 600; margin-left: 15px; } +.tradeHeaderEle .pair-select { width: 215px; font-size: 14px; font-weight: 600; } .tradeHeaderEle .pair-select .caret { position: relative; top: 2px; } -.tradeHeaderEle .token-last-quotes { margin-left: 15px; } +.tradeHeaderEle .token-last-quotes { margin-left: 130px; @media only screen and (max-width: 1550px) { margin-left: 28.3px} } .pair-price { padding: 5px 10px; border: 1px solid @dark-color-2; margin: 10px 0 20px; } .pair-price>li { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; } .pair-price>li .token-price { display: inline-block; width: 100px; text-align: left; } .pair-price>li h4 { font-size: 14px; font-weight: 600; width: 50px; color: @text-color-dark-2 } -.token-tab { display: flex; justify-content: space-between } +.token-tab { display: flex; justify-content: space-between; float: right; width: 45%; margin-bottom: 13px; margin-bottom: 13px;} .token-tab li { list-style: none; width: 100%; } -.token-tab li a { display: block; height: 40px; background: @dark-color-2; color: @text-color-dark-3; font-size: 16px; font-weight: bold; text-align: center; line-height: 40px; } +.token-tab li a { display: block; padding: 0px 10px; background: @dark-color-2; color: @text-color-dark-3; font-size: 14px; font-weight: bold; text-align: center; line-height: 40px; } .token-tab li.active a { color: @text-color-dark; } -.token-tab li.buy.active a { background: @success-color; } -.token-tab li.sell.active a { background: @error-color; } +.token-tab li.buy.active a { background: @buy-color; border-radius: 5px;} +.token-tab li.sell.active a { background: @sell-color; border-radius: 5px;} +.gas-switcher ul li { width: 150px; font-weight: 600; } +.gas-switcher li { width: 100px; font-weight: 400; } +.buttonsFee {width:100%; text-align:center} .balance { } -.token-select { background-color: @white; color: @text-color-1; } +.token-select { background-color: @white; color: @text-color-1; height: 100%} .token-select .token-select-header { display: flex; justify-content: space-between; align-items: center; height: 71px; padding: 0 30px; border-bottom: 1px solid @light-color-2 } .token-select .token-select-header input { border: 0; height: 70px; width: 100%; padding-right: 60px; font-size: 20px; font-weight: 800; vertical-align: top; } .token-select .token-select-header input:focus { outline: 0; } .token-select .icon-star, .token-select .token-select-header h2 { font-size: 18px; } -.token-select .token-select-body { padding: 20px 0; max-height: 400px; overflow: auto; } +.token-select .token-select-body { padding: 20px 0; max-height: 655px; overflow: auto; } .token-select .token-select-body .item { font-size: 13px; } .token-select .token-select-body .item li { display: flex; justify-content: flex-start; align-items: center; padding: 0 30px; line-height: 40px; } .token-select .token-select-body .item li.active, .token-select .token-select-body .item li.active:hover { background: @blue-dark; } @@ -169,13 +176,13 @@ header .account .msg i { display: inline-block; transform: scale(0.6, 0.6); vert .token-select .token-select-body .item li>span:nth-child(3) { display: block; width: 160px; } .token-select .token-select-body .item li>span:nth-child(4) { display: block; width: 85px; } .token-select .token-select-body .item li>span:nth-child(5) { display: block; width: 120px; } -.token-select .token-select-body .title { height: 20px; color: @text-color-3; padding: 0 30px; font-weight: 600; line-height: 20px; } +.token-select .token-select-body .title { height: 20px; color: #000000; padding: 0 30px; font-weight: 600; line-height: 20px; } .token-select .token-select-body .item li span i { font-size: 12px; color: @text-color-2 } .token-select .token-select-body .item li span i:active, .token-select .token-select-body .item li span i.active { color: @warning-color; } .token-select .token-select-body .item li>span { display: block; text-align: left; } .trade-list { position: relative; } -.trade-list .trade-list-header { color: @text-color-dark-3; line-height: 30px; display: flex; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid @dark-color-3; } -.trade-list li { display: flex; justify-content: space-between; padding: 0 20px; line-height: 20px; font-weight: 600; color: @text-color-dark-2 } +.trade-list .trade-list-header { color: @text-color-dark-3; line-height: 25px; display: flex; justify-content: space-between;} +.trade-list li { display: flex; justify-content: space-between; padding: 2px 20px; line-height: 20px; font-weight: 600; color: @text-color-dark-2 } .trade-list li:hover { background: @dark-color-2 } .trade-list li>span { display: block; width: 70px; text-align: left;} .trade-list li>span:nth-child(2) { width: 85px; text-align: right; } @@ -190,11 +197,12 @@ header .account .msg i { display: inline-block; transform: scale(0.6, 0.6); vert .tab-order.tabs li a { color: @text-color-dark-3 } .tab-order.tabs li.active a { color: @text-color-dark-1 } .order-filter { border-bottom: 1px solid @dark-color-2; padding: 10px 20px; } -.market-chart { border-bottom: 4px solid @blue-darker } -.market-chart>div { height: 100%; overflow: hidden; padding: 10px 15px; } +// .market-chart { border-bottom: 4px solid @blue-darker } +.market-chart>div { height: 100%; overflow: hidden; padding: 0px 15px; } .market-chart img { width: 100%; height: 100%; } // #account { position: fixed; top: 0; right: -300px; z-index: 1000; width: 300px; height: 100%; -webkit-transition: right .3s; transition: right .3s; transition-delay: 0.2s; } // #account.open { right: 0; } +.account-userCenter {width: 345px; } .account-side { position: absolute; top: 0; /*right: 0;*/ z-index: 2000; width: 300px; height: 100%; background: @blue-light; padding: 40px 0; text-align: center } .account-side .poweroff { display: inline-block; } .account-side .poweroff h5 { font-size: 14px; font-weight: normal; margin-top: 10px; } @@ -226,7 +234,7 @@ header .account .msg i { display: inline-block; transform: scale(0.6, 0.6); vert .Receive-qrcode { text-align: center; margin: 15px; } .Receive-qrcode canvas { padding: 20px; width: 160px; height: 160px; background: @white; } .ant-input.mnemonic { font-size: 16px !important; } -.block-dark-filter { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid @dark-color-3 } +.block-dark-filter { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid @dark-color-3 } .dpath { background: @dark-color; } .dpath .ant-radio-wrapper { margin-right: 0 !important } .dpath .dpath-header, .account-addresses .account-addresses-header { padding: 20px 20px 0; color: @text-color-1 } @@ -241,12 +249,13 @@ header .account .msg i { display: inline-block; transform: scale(0.6, 0.6); vert .dpath label { display: flex !important; padding: 5px 20px !important; justify-content: flex-start !important; align-items: center; padding: 5px 0; } .dpath label:hover, .account-addresses li:hover { background: @light-color-3 } .ant-radio { } -.account-bar ul { display: flex; justify-content: space-between; align-items: center; } -.account-bar ul li { background: @dark-color-2; min-width: 40px; height: 40px; line-height: 38px; text-align: center; margin-left: 1px; } -.account-bar ul li .logo { width: 40px; height: 40px; padding: 5px; background: @blue-light; line-height: 30px; } -.account-bar ul li .logo img { width: 100%; } -.account-bar ul li:nth-child(1) { display: inline-flex; justify-content: space-between; align-items: center; } -.account-bar ul li .account-address { width: 170px; padding: 0 5px 0 10px; text-align: left; color: @text-color-dark-2; word-wrap: break-word; line-height: 1.2; } +.account-bar ul { display: flex; justify-content: space-between; align-items: center; cursor: pointer;} +.account-bar ul li { background: @dark-prof-user; min-width: 40px; height: 40px; line-height: 38px; text-align: center; border-radius: 5px} +.account-bar ul li .logo { height: 40px; padding-top:4px; background: @dark-prof-user; line-height: 30px; border-radius: 5px} +.account-bar ul li .logo img { width: 55%; } +.account-bar ul li:nth-child(1) { display: inline-flex; justify-content: space-between; align-items: center; width: 245px} +.account-bar ul li .account-address { padding: 0 5px 0 -5px; text-align: left; margin-left:-5px; margin-right:5px; color: #608fb8 !important; line-height: 1.2; white-space: nowrap !important; font-size: 13px; @media only screen and (max-width: 1550px) { font-size: 9.5px}} +.account-bar ul li .account-address:after { content: attr(data-truncate); position: absolute; left: 100%; top: 0; white-space: nowrap;} .account-bar ul li i { font-size: 20px; margin:0; } .account-bar ul li:nth-child(n+2):hover { background: @dark-color-1; cursor: pointer; } .account-bar ul li .language .icon { position: relative; top: 6px; left: 2px } @@ -254,7 +263,7 @@ sup.badge { position: absolute; top: -4px; right: -4px; min-width: 6px; width: 6 .badge { position: relative; display: inline-block; min-width: 24px; margin-left: 5px; padding: 2px 6px 3px 6px; border-radius: 10px; color: #fff; text-align: center; vertical-align: baseline; text-align: center; white-space: nowrap; font-style: normal; font-size: inherit; line-height: 1;} .loopr-qrcode{ background: @dark-color; padding: 40px 20px 20px 40px; text-align: center; } .loopr-qrcode span{ color: @text-color; font-size:@font-size-md} -.loopr-notice{ background: @dark-color; padding: 40px 30px 0 20px; color: @text-color-2; font-size:@font-size-base } +.loopr-notice{ background: @dark-color; padding: 40px 30px 0 20px; color: @text-color-dex; font-size:@font-size-base; font-weight:@font-weight600 } diff --git a/src/assets/css/variables.less b/src/assets/css/variables.less index 032cd998..131aa868 100644 --- a/src/assets/css/variables.less +++ b/src/assets/css/variables.less @@ -21,12 +21,15 @@ @text-color-dark-2 : fade(#fff, 67%); @text-color-dark-3 : fade(#fff, 54%); @white : fade(#fff, 100%); +@text-color-dex : #608fb8; // @blue-darker : rgb(6,29,56); -@blue-darker : rgb(4,19,37); +@blue-darker : rgb(39,62,79); // @blue-dark : rgb(12,48,90); -@blue-dark : rgb(8,39,76); +@blue-dark : rgb(24,44,62); // @blue-light : rgb(28,96,255); -@blue-light : rgb(14,69,197); +@blue-light : rgb(16,28,39); +@font-weight600 : 600; +@font-size-14 : 14px; @font-size-base : 13px; @font-size-sm : 12px; @font-size-md : @font-size-base + 2px; @@ -35,14 +38,21 @@ @line-height-base : 1.5; @line-height-sm : 1.2; @primary-color : rgb(14,69,197); -@success-color : rgb(54,214,88); +@success-color : rgb(0,234,144); +@sell-color : rgba(16, 30, 43, 1); +@buy-color : rgba(16, 30, 43, 1); @error-color : rgb(254,79,87); @warning-color : rgb(255,184,50); @dark-color : rgba(255,255,255,1); @dark-color-1 : rgba(255,255,255,.27); -@dark-color-2 : rgba(255,255,255,.07); +@dark-color-2 : rgba(255, 255, 255, 0); +@dark-prof-user : #101e2b; +@blue-light-dex-color : #608fb8; @dark-color-3 : rgba(255,255,255,.03); @light-color : rgba(0,0,0,1); @light-color-1 : rgba(0,0,0,.27); @light-color-2 : rgba(0,0,0,.07); @light-color-3 : rgba(0,0,0,.03); +@text-color-light-blue : rgba(96, 143, 184, 1); +@fee-background-color : rgba(25, 44, 61, 1); +@fee-hover-bk-color : rgba(16, 30, 43, 1); \ No newline at end of file diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png index c80c9742..4c29f7ca 100644 Binary files a/src/assets/images/logo.png and b/src/assets/images/logo.png differ diff --git a/src/assets/images/profile.png b/src/assets/images/profile.png new file mode 100644 index 00000000..8e3b3c99 Binary files /dev/null and b/src/assets/images/profile.png differ diff --git a/src/assets/images/walletdex.png b/src/assets/images/walletdex.png new file mode 100644 index 00000000..dd38e0b9 Binary files /dev/null and b/src/assets/images/walletdex.png differ diff --git a/src/common/config/config.json b/src/common/config/config.json index eb325fb7..3495388d 100644 --- a/src/common/config/config.json +++ b/src/common/config/config.json @@ -191,6 +191,7 @@ "pricePrecision": 8 } ], + "newMarkets": [], "txs": [ { "type":"eth_transfer", diff --git a/src/common/config/index.js b/src/common/config/index.js index 1fb87379..f9326128 100644 --- a/src/common/config/index.js +++ b/src/common/config/index.js @@ -6,18 +6,6 @@ const data = require('./data') const config = data.configs const tokensIcons = require('./tokens_icons.json'); -let tokens = [{ - "symbol": "ETH", - "digits": 18, - "address": "", - "precision": 6, -}, ...STORAGE.settings.getTokensConfig().map(item=>{ - item.icon = tokensIcons[item.symbol] - return item -})].filter(item=>{ - return !config.ignoreTokens || !config.ignoreTokens.includes(item.symbol) -}) -const markets = config.markets const txs = config.txs; const projects = data.projects; @@ -35,25 +23,35 @@ async function isinWhiteList(address) { function getChainId(){ return config.chainId - } function getTokenBySymbol(symbol){ if(!symbol){ return {} } - return tokens.find(token=>token.symbol.toLowerCase()===symbol.toLowerCase()) || {} + return getTokens().find(token=>token.symbol.toLowerCase()===symbol.toLowerCase()) || {} } function getTokenByAddress(address){ if(!address){ return {} } - return tokens.find(token=>token.address.toLowerCase()===address.toLowerCase()) + return getTokens().find(token=>token.address.toLowerCase()===address.toLowerCase()) } function getCustomTokens(){ - return tokens.filter(token=>token.custom) + return getTokens().filter(token=>token.custom) } function getTokens(){ - return tokens + return [{ + "symbol": "ETH", + "digits": 18, + "address": "", + "precision": 6, + }, ...STORAGE.settings.getTokensConfig().map(item=>{ + item.icon = tokensIcons[item.symbol] + item.precision = item.digits > 6 ? 6 : item.digits + return item + })].filter(item=>{ + return !config.ignoreTokens || !config.ignoreTokens.includes(item.symbol) + }) } function getMarketByPair(pair) { @@ -87,17 +85,16 @@ function isSupportedMarket(market) { if(!market) return false const pair = market.split('-') if(pair.length !== 2) return false - return markets.find(m=> { + return getMarkets().find(m=> { return (m.tokenx === pair[0].toUpperCase() && m.tokeny === pair[1].toUpperCase()) || (m.tokenx === pair[1].toUpperCase() && m.tokeny === pair[0].toUpperCase()) }) } function getMarketBySymbol(tokenx, tokeny) { if (tokenx && tokeny) { - return markets.find(market=> { - return (market.tokenx === tokenx && market.tokeny === tokeny) || (market.tokenx === tokeny && market.tokeny === tokenx) - } - ) || { + return getMarkets().find(market=> { + return (market.tokenx === tokenx && market.tokeny === tokeny) || (market.tokenx === tokeny && market.tokeny === tokenx) + }) || { "pricePrecision": 8 } }else{ @@ -108,11 +105,11 @@ function getMarketBySymbol(tokenx, tokeny) { } function getMarketsByTokenR(token) { - return config.markets.filter(item=>item.tokeny === token) + return getMarkets().filter(item=>item.tokeny === token) } function getMarketsByTokenL(token) { - return config.markets.filter(item=>item.tokenx === token) + return getMarkets().filter(item=>item.tokenx === token) } function getTokenSupportedMarket(token) { @@ -144,7 +141,28 @@ function getTokenSupportedMarkets(token) { } function getMarkets() { - return markets; + const markets = STORAGE.settings.getMarketsConfig().map(item=>{ + //const tokenx = getTokenBySymbol(item.tokenx) + //item.pricePrecision = tokenx.digits > 8 ? 8 : tokenx.digits + return item + }) + return markets + // const tokens = getTokens(); + // const supportedMarktesR = getSupportedMarketsTokenR() + // let markets = new Array() + // tokens.filter(item => item.symbol !== 'ETH' && item.symbol !== 'WETH').forEach(token=> { + // supportedMarktesR.forEach(marketR => { + // if(marketR !== token.symbol) { + // const tokenConfig = tokens.find(t=>t.symbol.toLowerCase()===token.symbol.toLowerCase()) || {} + // markets.push({ + // "tokenx": token.symbol, + // "tokeny": marketR, + // "pricePrecision": tokenConfig.digits > 8 ? 8 : tokenConfig.digits + // }) + // } + // }) + // }) + // return markets } function getGasLimitByType(type) { diff --git a/src/common/config/testConfig.json b/src/common/config/testConfig.json index 82d21a7b..dcd48def 100644 --- a/src/common/config/testConfig.json +++ b/src/common/config/testConfig.json @@ -216,18 +216,7 @@ } ], "supportedTokenRInMarkets":["WETH", "BAR"], - "markets": [ - { - "tokenx": "LRC", - "tokeny": "WETH", - "pricePrecision": 8 - }, - { - "tokenx": "FOO", - "tokeny": "BAR", - "pricePrecision": 4 - } - ], + "newMarkets": ["FOO-WETH", "BAR-WETH"], "whiteList": [ "0x80679a2c82ab82f1e73e14c4bec4ba1992f9f25a", "0x8311804426a24495bd4306daf5f595a443a52e32", diff --git a/src/common/loopringui/assets/style/margin.less b/src/common/loopringui/assets/style/margin.less index bdb0f175..ac8a9d62 100644 --- a/src/common/loopringui/assets/style/margin.less +++ b/src/common/loopringui/assets/style/margin.less @@ -175,6 +175,10 @@ margin-top: 5.0rem !important } + .mt70 { + margin-top: 7.0rem !important + } + .mb0 { margin-bottom: 0.0rem !important } diff --git a/src/common/loopringui/containers/Panels.js b/src/common/loopringui/containers/Panels.js index fbcd6ff8..b09dabde 100644 --- a/src/common/loopringui/containers/Panels.js +++ b/src/common/loopringui/containers/Panels.js @@ -4,7 +4,7 @@ import './Panels.less' const PanelsWrapper = (props)=>{ const { children,id, - docked,width='30vw',position='left',sidebarClassName='panel-default-theme',className='', + docked,width='40vw',position='left',sidebarClassName='panel-default-theme',className='', ...rest } = props const {[id]:layer={}} = props diff --git a/src/common/loopringui/containers/Panels.less b/src/common/loopringui/containers/Panels.less index b0d4d89b..9eab5fe3 100644 --- a/src/common/loopringui/containers/Panels.less +++ b/src/common/loopringui/containers/Panels.less @@ -73,6 +73,7 @@ transform: translateX(-100%); .@{drawerPrefixCls}-open& { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); + border: 1px solid rgb(16,28,39); } } .@{drawerPrefixCls}-draghandle { @@ -87,7 +88,7 @@ &&-right { // transform: translateX(100%); .@{drawerPrefixCls}-sidebar { - right: 0; + right: 60px; transform: translateX(100%); .@{drawerPrefixCls}-open& { box-shadow: -4px 4px 4px rgba(0, 0, 0, 0.25); diff --git a/src/components/account/ExportKeystore.js b/src/components/account/ExportKeystore.js index 79a734b5..27d723b7 100644 --- a/src/components/account/ExportKeystore.js +++ b/src/components/account/ExportKeystore.js @@ -50,10 +50,10 @@ class ExportKeyStore extends React.Component{ const visibleIcon = (
{visible && - + } {!visible && - + }
); diff --git a/src/components/account/GenerateWallet.js b/src/components/account/GenerateWallet.js index 86788bd4..1cbe9017 100644 --- a/src/components/account/GenerateWallet.js +++ b/src/components/account/GenerateWallet.js @@ -59,10 +59,10 @@ class GenerateWallet extends React.Component { const visibleIcon = (
{visible && - + } {!visible && - + }
); diff --git a/src/components/account/UserCenter.js b/src/components/account/UserCenter.js index cd051add..69efa42f 100644 --- a/src/components/account/UserCenter.js +++ b/src/components/account/UserCenter.js @@ -36,7 +36,7 @@ function UserCenter(props) { }; return ( -
+
{wallet.address &&
diff --git a/src/components/account/backup/BackupWallet.js b/src/components/account/backup/BackupWallet.js index 234c9c15..ab44cb1e 100644 --- a/src/components/account/backup/BackupWallet.js +++ b/src/components/account/backup/BackupWallet.js @@ -39,10 +39,10 @@ export default class BackupWallet extends React.Component { const visibleIcon = (
{visible && - + } {!visible && - + }
); diff --git a/src/components/account/unlock/UnlockByAddress.js b/src/components/account/unlock/UnlockByAddress.js index c0fe1b91..d06d7a07 100644 --- a/src/components/account/unlock/UnlockByAddress.js +++ b/src/components/account/unlock/UnlockByAddress.js @@ -19,8 +19,9 @@ function UnlockByAddress(props) { props.dispatch({type:"wallet/unlockAddressWallet",payload:{address}}); Notification.open({type:'success',message:intl.get('notifications.title.unlock_suc')}); props.dispatch({type: 'sockets/unlocked'}); - routeActions.gotoPath('/wallet'); + routeActions.gotoPath('/trade'); props.dispatch({type:'layers/hideLayer', payload:{id:'unlock'}}) + window.location.reload(); }else { Notification.open({type:'error',message:intl.get('notifications.title.unlock_fail'),description:intl.get('wallet.invalid_address_tip')}); } diff --git a/src/components/account/unlock/UnlockByKeystore.js b/src/components/account/unlock/UnlockByKeystore.js index cb173e50..807c146a 100644 --- a/src/components/account/unlock/UnlockByKeystore.js +++ b/src/components/account/unlock/UnlockByKeystore.js @@ -93,10 +93,10 @@ class Keystore extends React.Component { const visibleIcon = (
{visible && - + } {!visible && - + }
); diff --git a/src/components/account/unlock/UnlockByLedger.js b/src/components/account/unlock/UnlockByLedger.js index 13d57329..c1fbd4c9 100644 --- a/src/components/account/unlock/UnlockByLedger.js +++ b/src/components/account/unlock/UnlockByLedger.js @@ -20,7 +20,7 @@ function Ledgers(props) { Notification.open({type: 'success', message: intl.get('notifications.title.unlock_suc'),}); hardwareWallet.reset(); dispatch({type: 'sockets/unlocked'}) - routeActions.gotoPath('/wallet') + routeActions.gotoPath('/trade') dispatch({type:'layers/hideLayer', payload:{id:'unlock'}}) } }); diff --git a/src/components/account/unlock/UnlockByMetaMask.js b/src/components/account/unlock/UnlockByMetaMask.js index 872225c6..66b3b586 100644 --- a/src/components/account/unlock/UnlockByMetaMask.js +++ b/src/components/account/unlock/UnlockByMetaMask.js @@ -74,7 +74,7 @@ function MetaMask(props) { props.dispatch({type:'wallet/unlockMetaMaskWallet',payload:{address}}); Notification.open({type:'success',message:intl.get('notifications.title.unlock_suc')}); props.dispatch({type: 'sockets/unlocked'}); - routeActions.gotoPath('/wallet'); + routeActions.gotoPath('/trade'); metaMask.setLoading({loading:false}); props.dispatch({type:'layers/hideLayer', payload:{id:'unlock'}}) diff --git a/src/components/account/unlock/UnlockByPrivateKey.js b/src/components/account/unlock/UnlockByPrivateKey.js index cf45596b..4123b5c1 100644 --- a/src/components/account/unlock/UnlockByPrivateKey.js +++ b/src/components/account/unlock/UnlockByPrivateKey.js @@ -53,10 +53,10 @@ class PrivateKey extends React.Component { const visibleIcon = (
{visible && - + } {!visible && - + }
); diff --git a/src/components/charts/DepthChart.js b/src/components/charts/DepthChart.js index 0036d5aa..effdd1d8 100644 --- a/src/components/charts/DepthChart.js +++ b/src/components/charts/DepthChart.js @@ -25,21 +25,21 @@ class DepthChart extends React.Component { sourceSell = [{"price":89,"vol":21},{"price":92,"vol":33},{"price":102,"vol":45},{"price":121,"vol":53},{"price":131,"vol":54},{"price":141,"vol":78},{"price":155,"vol":90},{"price":158,"vol":92},{"price":190,"vol":98},{"price":195,"vol":101},{"price":200,"vol":111}] return ( -
-
- - - value,offset:10,textStyle:{fontSize:'10px'}}} line={{stroke:'rgba(255,255,255,0.1)'}} tickLine={{stroke:'rgba(255,255,255,0.1)'}} /> - value,offset:10,textStyle:{fontSize:'10px'}}} grid={{lineStyle:{stroke: 'rgba(255,255,255,0.1)'}}} line={{stroke:'rgba(255,255,255,0.1)'}} tickLine={{stroke:'rgba(255,255,255,0.1)'}}/> - - +
+
+ + + {/*} value,offset:10,textStyle:{fontSize:'10px'}}} line={{stroke:'rgba(255,255,255,0.1)'}} tickLine={{stroke:'rgba(255,255,255,0.1)'}} /> */} + {/*} value,offset:10,textStyle:{fontSize:'10px'}}} grid={{lineStyle:{stroke: 'rgba(255,255,255,0.1)'}}} line={{stroke:'rgba(255,255,255,0.1)'}} tickLine={{stroke:'rgba(255,255,255,0.1)'}}/> */} + +
- value,offset:10,textStyle:{fontSize:'10px'}}} line={{stroke:'rgba(255,255,255,0.1)'}} tickLine={{stroke:'rgba(255,255,255,0.1)'}} /> - + {/*} value,offset:10,textStyle:{fontSize:'10px'}}} line={{stroke:'rgba(255,255,255,0.1)'}} tickLine={{stroke:'rgba(255,255,255,0.1)'}} /> */} + {/*} */} diff --git a/src/components/charts/KlineChart.js b/src/components/charts/KlineChart.js index 15fe9544..7a3131a8 100644 --- a/src/components/charts/KlineChart.js +++ b/src/components/charts/KlineChart.js @@ -55,8 +55,8 @@ const tooltipOpts = { class KlineChart extends React.Component { state = { - start: '2015-07-07', - end: '2015-10-25', + start: '2017-07-17', + end: '2017-08-20', } render() { @@ -137,16 +137,16 @@ class KlineChart extends React.Component { }]} tooltip={['time*start*end*max*min', (time, start, end, max, min) => { return { - name: time, - value: '
开盘价：' + start + '
' - + '收盘价：' + end + '
' - + '最高价：' + max + '
' - + '最低价：' + min + '' + name: 'Date: ' + time + ' ', + value: '
Starting Price: ' + start + '
' + + 'Ending Price: ' + end + '
' + + 'Max Price: ' + max + '
' + + 'Min Price: ' + min + '' }; }]} /> - + moment(value,'YYYY-MM-DD').format('MM-DD'),offset:10,textStyle:{fontSize:'10px'}}}/> { return { - name: time, - value: '
成交量：' + volumn + '
' + name: 'Date: ' + time + ' ', + value: '
Volume: ' + volumn + '
' }; }]} /> diff --git a/src/components/fills/ListMyFills.js b/src/components/fills/ListMyFills.js index 044225c8..3ad3931a 100644 --- a/src/components/fills/ListMyFills.js +++ b/src/components/fills/ListMyFills.js @@ -64,7 +64,7 @@ export default function ListMyFills(props) {
-
+
diff --git a/src/components/fills/ListTradesHistory.js b/src/components/fills/ListTradesHistory.js index a3d5f71f..a44ed90f 100644 --- a/src/components/fills/ListTradesHistory.js +++ b/src/components/fills/ListTradesHistory.js @@ -83,13 +83,13 @@ function ListTradesHistory(props) { }; return (
-
+

{intl.get('fill_list.trade_history')}

    -
  • {intl.get('fill.price')} {tokens.right}{intl.get('fill.amount')} {tokens.left}{intl.get('fill.lrc_fee')}
    • +
  • {intl.get('fill.price')} {tokens.right}{intl.get('fill.amount')} {tokens.left}{intl.get('fill.lrc_fee')}
diff --git a/src/components/orders/ListMyOrders.js b/src/components/orders/ListMyOrders.js index d4a19d3d..ec8d4807 100644 --- a/src/components/orders/ListMyOrders.js +++ b/src/components/orders/ListMyOrders.js @@ -99,7 +99,7 @@ const ListHeader = (props) => {
-
@@ -144,7 +144,7 @@ function ListMyOrders(props) { return (
-
+
diff --git a/src/components/orders/ListOrderBook.js b/src/components/orders/ListOrderBook.js index 665934b7..d8e84392 100644 --- a/src/components/orders/ListOrderBook.js +++ b/src/components/orders/ListOrderBook.js @@ -70,17 +70,11 @@ function ListOrderBook(props) { }; return (
-
+

{intl.get('order_list.order_book')}

-
- {trades.length >0 && isIncresse() &&
{trades[0] && trades[0].price}
} - {trades.length >0 && !isIncresse() &&
{trades[0] && trades[0].price}
} -
- {/*
*/} - {/*
*/}
  • {intl.get('order.price')} {tokens.right} @@ -90,7 +84,8 @@ function ListOrderBook(props) {
-
    +
    +
      { sell.map((item,index)=> } title={null} key={index}> @@ -107,27 +102,33 @@ function ListOrderBook(props) {
    • {intl.get('common.list.no_data')}
      • }
    +
    -
-
- -
    - { - buy.map((item,index)=> - } title={null} key={index}> -
  • - {toFixed(Number(item.price),8)} - {toFixed(Number(item.amount),4)} - {toFixed(Number(item.lrcFee),8)}
    • -     - ) - } - { - buy.length === 0 && -
  • {intl.get('common.list.no_data')}
    • - } -
- +
+ {trades.length >0 && isIncresse() &&
{intl.get('common.list.spread')} {trades[0] && trades[0].price}
} + {trades.length >0 && !isIncresse() &&
{intl.get('common.list.spread')} {trades[0] && trades[0].price}
} +
+ +
+ +
    + { + buy.map((item,index)=> + } title={null} key={index}> +
  • + {toFixed(Number(item.price),8)} + {toFixed(Number(item.amount),4)} + {toFixed(Number(item.lrcFee),8)}
    • +     + ) + } + { + buy.length === 0 && +
  • {intl.get('common.list.no_data')}
    • + } +
+ +
diff --git a/src/components/orders/ListOrderBook_bak.js b/src/components/orders/ListOrderBook_bak.js index abfb2e53..90847c57 100644 --- a/src/components/orders/ListOrderBook_bak.js +++ b/src/components/orders/ListOrderBook_bak.js @@ -41,7 +41,7 @@ function ListOrderBook(props) { } return (
-
+

Order Book

diff --git a/src/components/orders/PlaceOrderForm.js b/src/components/orders/PlaceOrderForm.js index 110792f4..f01d85d3 100644 --- a/src/components/orders/PlaceOrderForm.js +++ b/src/components/orders/PlaceOrderForm.js @@ -14,12 +14,30 @@ import {createWallet} from 'LoopringJS/ethereum/account'; import {getLastGas, getEstimateGas} from 'modules/settings/formatters' import {FormatAmount} from 'modules/formatter/FormatNumber' import {getFormattedTime} from 'modules/formatter/common' +import $ from 'jquery' + + +$( document ).ready(function() { + $( "#standardClick" ).trigger( "click" ); + $("#standardClick").removeClass('btn btn-fee-standard'); + $("#standardClick").addClass('btn btn-button-clicked'); + + $("#lowClick").click(function () { + $("#standardClick").removeClass('btn btn-button-clicked'); + $("#standardClick").addClass('btn btn-fee-standard'); + }); + + $("#fastClick").click( function() { + $("#standardClick").removeClass('btn btn-button-clicked'); + $("#standardClick").addClass('btn btn-fee-standard'); + }); +}); var _ = require('lodash'); const MenuItem = (prop)=>{ return ( -
+
{prop.label}
@@ -36,6 +54,7 @@ const MenuItem = (prop)=>{
) } + class PlaceOrderForm extends React.Component { render() { @@ -143,7 +162,7 @@ class PlaceOrderForm extends React.Component { const amountSliderField = form.getFieldDecorator('amountSlider', { initialValue: 0, - rules: [] + rules: [] })( @@ -374,14 +393,22 @@ class PlaceOrderForm extends React.Component { const setLRCFee = ()=>{ dispatch({type:'layers/showLayer', payload: {id: 'placeOrderLRCFee', side, pair}}) } + const setLRCFeeInstant = (feeValue) => { + dispatch({type:'lrcFee/lrcFeeSliderChange', payload:{lrcFeeSlider:feeValue}}) + } + const setMaxAmount = (feeValue) => { + console.log("max amount"); + dispatch({type:'amountSliderChange', payload:{amountSliderChange:feeValue}}) + } const setTTL = ()=>{ dispatch({type:'layers/showLayer', payload: {id: 'placeOrderTTL', side, pair}}) } return (
-
-
+
+ {/*} +
{left.symbol}
@@ -395,23 +422,25 @@ class PlaceOrderForm extends React.Component {
- {placeOrder.side === 'buy' && + */} + + {intl.get('common.order_form')} + + {placeOrder.side === 'sell' && } - {placeOrder.side === 'sell' && + {placeOrder.side === 'buy' && }
-
- {false && sell && {sell.token.symbol} {intl.get('balance')}: {FormatAmount({value:sell.token.balance.toString(10), precision:marketConfig.pricePrecision})}} -
+ {false && sell && {sell.token.symbol} {intl.get('balance')}: {FormatAmount({value:sell.token.balance.toString(10), precision:marketConfig.pricePrecision})}} {form.getFieldDecorator('price', { initialValue: placeOrder.priceInput, @@ -420,9 +449,9 @@ class PlaceOrderForm extends React.Component { validator: (rule, value, cb) => validatePirce(value) ? cb() : cb(true) }] })( - {right.symbol}} + {intl.get('common.price')}} + suffix={{right.symbol}} onChange={inputChange.bind(this, 'price')} onFocus={() => { const price = form.getFieldValue("price") @@ -436,12 +465,12 @@ class PlaceOrderForm extends React.Component { form.setFieldsValue({"price": '0'}) } }}/> - )} + )} -
{amountSliderField}
-
+ {/*
{amountSliderField}
*/} +
}> {form.getFieldDecorator('amount', { initialValue: '0', @@ -450,9 +479,9 @@ class PlaceOrderForm extends React.Component { validator: (rule, value, cb) => validateAmount(value) ? cb() : cb(true) }] })( - {left.symbol}} + {intl.get('common.amount')}} + suffix={{left.symbol} } onChange={inputChange.bind(this, 'amount')} onFocus={() => { const amount = form.getFieldValue("amount") @@ -468,17 +497,25 @@ class PlaceOrderForm extends React.Component { }}/> )} -
- {totalDisplay} {right.symbol} {totalWorthDisplay}
} /> +
+
+ + + +
+
+ {totalDisplay} {right.symbol} {totalWorthDisplay}
} /> {lrcFeeValue} LRC
} /> - {ttlShow}
} /> +
+ {/*} {ttlShow}
} /> */}
{ - side === 'buy' && + side === 'sell' && } { - side === 'sell' && + side === 'buy' && + }
@@ -554,4 +591,4 @@ class TokenActions extends React.Component { } } -export default Form.create()(connect()(PlaceOrderForm)); +export default Form.create()(connect()(PlaceOrderForm)); \ No newline at end of file diff --git a/src/components/orders/PlaceOrderLRCFee.js b/src/components/orders/PlaceOrderLRCFee.js index d36af856..7674eead 100644 --- a/src/components/orders/PlaceOrderLRCFee.js +++ b/src/components/orders/PlaceOrderLRCFee.js @@ -120,6 +120,4 @@ const LRCFeeForm = (props) => { ) } -export default Form.create()(connect()(LRCFeeForm)); - - +export default Form.create()(connect()(LRCFeeForm)); \ No newline at end of file diff --git a/src/components/pages/Trade.js b/src/components/pages/Trade.js index f7b1cc07..83741016 100644 --- a/src/components/pages/Trade.js +++ b/src/components/pages/Trade.js @@ -8,6 +8,8 @@ import { Containers } from 'modules'; import { connect } from 'dva'; import {AccountMenu} from './Wallet'; import intl from 'react-intl-universal'; +import {TickerFm} from 'modules/tickers/formatters'; +import routeActions from 'common/utils/routeActions'; function Trade(props) { const { children, match } = props @@ -16,7 +18,7 @@ function Trade(props) { const TabPane = Tabs.TabPane; return (
-