From 473e0738ae3e5d4fc464cfeac26620187fcf008a Mon Sep 17 00:00:00 2001 From: petitPapillon Date: Sun, 4 Jun 2017 21:51:02 +0200 Subject: [PATCH 1/9] Decouple jsx out of js - add coin pages --- react/src/components/addcoin/addcoin.js | 198 +----------------- .../src/components/addcoin/addcoin.render.js | 73 +++++++ .../addcoin/render-coin-selectors.render.js | 139 ++++++++++++ 3 files changed, 217 insertions(+), 193 deletions(-) create mode 100644 react/src/components/addcoin/addcoin.render.js create mode 100644 react/src/components/addcoin/render-coin-selectors.render.js diff --git a/react/src/components/addcoin/addcoin.js b/react/src/components/addcoin/addcoin.js index e3f54b0..9d20c85 100644 --- a/react/src/components/addcoin/addcoin.js +++ b/react/src/components/addcoin/addcoin.js @@ -8,9 +8,9 @@ import { shepherdPostCoinList } from '../../actions/actionCreators'; import Store from '../../store'; -import AddCoinOptionsCrypto from './addcoinOptionsCrypto'; -import AddCoinOptionsAC from './addcoinOptionsAC'; -import AddCoinOptionsACFiat from './addcoinOptionsACFiat'; + +import RenderCoinSelectors from './render-coin-selectors.render'; +import AddCoinRender from './addcoin.render'; class AddCoin extends React.Component { constructor(props) { @@ -249,132 +249,7 @@ class AddCoin extends React.Component { const _coin = _item.selectedCoin || ''; items.push( -
-
-
- -
-
-
- -
-
-
- - -
-
- - -
-
- - -
-
-
- -
-
-
- - -
this.toggleSyncOnlyMode(i) }>{ translate('ADD_COIN.SYNC_ONLY') }
- -
-
-
+ RenderCoinSelectors.call(this, _item, _coin, i) ); } @@ -383,70 +258,7 @@ class AddCoin extends React.Component { render() { return ( -
this.handleKeydown(event) }> - -
-
+ AddCoinRender.call(this) ); } } diff --git a/react/src/components/addcoin/addcoin.render.js b/react/src/components/addcoin/addcoin.render.js new file mode 100644 index 0000000..491aa51 --- /dev/null +++ b/react/src/components/addcoin/addcoin.render.js @@ -0,0 +1,73 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const AddCoinRender = function() { + return ( +
this.handleKeydown(event) }> + +
+
+ ) +}; + +export default AddCoinRender; \ No newline at end of file diff --git a/react/src/components/addcoin/render-coin-selectors.render.js b/react/src/components/addcoin/render-coin-selectors.render.js new file mode 100644 index 0000000..5ce4dcc --- /dev/null +++ b/react/src/components/addcoin/render-coin-selectors.render.js @@ -0,0 +1,139 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; +import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; +import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; +import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; + + +const RenderCoinSelectors = function(item, coin, i) { + return ( +
+
+
+ +
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+ + +
this.toggleSyncOnlyMode(i) }>{ translate('ADD_COIN.SYNC_ONLY') }
+ +
+
+
+ ) +}; +export default RenderCoinSelectors; \ No newline at end of file From 3feb00f2b24549050793d028f45ecdaf8bd180cd Mon Sep 17 00:00:00 2001 From: petitPapillon Date: Sun, 4 Jun 2017 22:53:38 +0200 Subject: [PATCH 2/9] Decouple jsx out of js - dashboard and login pages --- react/src/components/addcoin/addcoin.js | 4 +- ...ors.render.js => coin-selectors.render.js} | 4 +- react/src/components/dashboard/atomic.js | 73 +---- .../src/components/dashboard/atomic.render.js | 77 +++++ react/src/components/dashboard/coinTile.js | 36 +-- .../components/dashboard/coinTile.render.js | 39 +++ .../src/components/dashboard/coinTileItem.js | 24 +- .../dashboard/coinTileItem.render.js | 26 ++ react/src/components/dashboard/dashboard.js | 69 +---- .../components/dashboard/dashboard.render.js | 59 ++++ react/src/components/dashboard/edex.js | 1 - react/src/components/dashboard/jumblr.js | 259 +---------------- .../src/components/dashboard/jumblr.render.js | 264 ++++++++++++++++++ react/src/components/dashboard/loginModal.js | 72 +---- .../components/dashboard/loginModal.render.js | 68 +++++ react/src/components/dashboard/navbar.js | 121 +------- .../src/components/dashboard/navbar.render.js | 124 ++++++++ .../src/components/dashboard/notifications.js | 125 +-------- .../dashboard/notifications.render.js | 121 ++++++++ react/src/components/dashboard/receiveCoin.js | 100 +------ .../dashboard/receiveCoin.render.js | 98 +++++++ react/src/components/login/login.js | 202 +------------- react/src/components/login/login.render.js | 179 ++++++++++++ .../components/login/swall-modal.render.js | 24 ++ 24 files changed, 1151 insertions(+), 1018 deletions(-) rename react/src/components/addcoin/{render-coin-selectors.render.js => coin-selectors.render.js} (98%) create mode 100644 react/src/components/dashboard/atomic.render.js create mode 100644 react/src/components/dashboard/coinTile.render.js create mode 100644 react/src/components/dashboard/coinTileItem.render.js create mode 100644 react/src/components/dashboard/dashboard.render.js create mode 100644 react/src/components/dashboard/jumblr.render.js create mode 100644 react/src/components/dashboard/loginModal.render.js create mode 100644 react/src/components/dashboard/navbar.render.js create mode 100644 react/src/components/dashboard/notifications.render.js create mode 100644 react/src/components/dashboard/receiveCoin.render.js create mode 100644 react/src/components/login/login.render.js create mode 100644 react/src/components/login/swall-modal.render.js diff --git a/react/src/components/addcoin/addcoin.js b/react/src/components/addcoin/addcoin.js index 9d20c85..7b750a6 100644 --- a/react/src/components/addcoin/addcoin.js +++ b/react/src/components/addcoin/addcoin.js @@ -9,7 +9,7 @@ import { } from '../../actions/actionCreators'; import Store from '../../store'; -import RenderCoinSelectors from './render-coin-selectors.render'; +import CoinSelectorsRender from './coin-selectors.render'; import AddCoinRender from './addcoin.render'; class AddCoin extends React.Component { @@ -249,7 +249,7 @@ class AddCoin extends React.Component { const _coin = _item.selectedCoin || ''; items.push( - RenderCoinSelectors.call(this, _item, _coin, i) + CoinSelectorsRender.call(this, _item, _coin, i) ); } diff --git a/react/src/components/addcoin/render-coin-selectors.render.js b/react/src/components/addcoin/coin-selectors.render.js similarity index 98% rename from react/src/components/addcoin/render-coin-selectors.render.js rename to react/src/components/addcoin/coin-selectors.render.js index 5ce4dcc..0c33726 100644 --- a/react/src/components/addcoin/render-coin-selectors.render.js +++ b/react/src/components/addcoin/coin-selectors.render.js @@ -5,7 +5,7 @@ import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; -const RenderCoinSelectors = function(item, coin, i) { +const CoinSelectorsRender = function(item, coin, i) { return (
@@ -136,4 +136,4 @@ const RenderCoinSelectors = function(item, coin, i) {
) }; -export default RenderCoinSelectors; \ No newline at end of file +export default CoinSelectorsRender; \ No newline at end of file diff --git a/react/src/components/dashboard/atomic.js b/react/src/components/dashboard/atomic.js index cb95965..efa19ea 100755 --- a/react/src/components/dashboard/atomic.js +++ b/react/src/components/dashboard/atomic.js @@ -1,10 +1,8 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { atomic } from '../../actions/actionCreators'; import Store from '../../store'; -import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; -import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; -import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; + +import AtomicRender from './atomic.render'; /* TODO: @@ -480,72 +478,7 @@ class Atomic extends React.Component { } render() { - return ( -
-
-
-
-

Atomic Explorer

-
-
-
-
- -
-
-
- -
-
- -
-
- -
-
-
-
-
-
-
-

{ translate('ATOMIC.RAW_OUTPUT') }

-
-
-
- 
{ this.state.output }
-
-
-
-
-
-
-
- ); + return AtomicRender.call(this); } } diff --git a/react/src/components/dashboard/atomic.render.js b/react/src/components/dashboard/atomic.render.js new file mode 100644 index 0000000..b29440a --- /dev/null +++ b/react/src/components/dashboard/atomic.render.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +import AddCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto'; +import AddCoinOptionsAC from '../addcoin/addcoinOptionsAC'; +import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; + +const AtomicRender = function () { + return ( +
+
+
+
+

Atomic Explorer

+
+
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+

{ translate('ATOMIC.RAW_OUTPUT') }

+
+
+
+ 
{ this.state.output }
+
+
+
+
+
+
+
+ ) +}; + +export default AtomicRender; \ No newline at end of file diff --git a/react/src/components/dashboard/coinTile.js b/react/src/components/dashboard/coinTile.js index bb44c56..5996841 100755 --- a/react/src/components/dashboard/coinTile.js +++ b/react/src/components/dashboard/coinTile.js @@ -1,11 +1,12 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { getCoinTitle, getModeInfo } from '../../util/coinHelper'; import CoinTileItem from './coinTileItem'; +import CoinTileRender from './coinTile.render'; + class CoinTile extends React.Component { constructor(props) { super(props); @@ -56,38 +57,7 @@ class CoinTile extends React.Component { } render() { - return ( -
-
- - -
-
-
-
-
-
- - -
-
-

{ translate('INDEX.ACTIVE_COINS') }

-
-
-
-
-
-
- { this.renderTiles() } -
-
-
-
-
-
- ); + return CoinTileRender.call(this); } } diff --git a/react/src/components/dashboard/coinTile.render.js b/react/src/components/dashboard/coinTile.render.js new file mode 100644 index 0000000..542bb10 --- /dev/null +++ b/react/src/components/dashboard/coinTile.render.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const CoinTileRender = function () { + return ( +
+
+ + +
+
+
+
+
+
+ + +
+
+

{ translate('INDEX.ACTIVE_COINS') }

+
+
+
+
+
+
+ { this.renderTiles() } +
+
+
+
+
+
+ ); +}; + +export default CoinTileRender; \ No newline at end of file diff --git a/react/src/components/dashboard/coinTileItem.js b/react/src/components/dashboard/coinTileItem.js index 5b5a40e..8a06514 100644 --- a/react/src/components/dashboard/coinTileItem.js +++ b/react/src/components/dashboard/coinTileItem.js @@ -1,5 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { dashboardChangeActiveCoin, iguanaActiveHandle, @@ -21,6 +20,8 @@ import { } from '../../actions/actionCreators'; import Store from '../../store'; +import CoinTileItemRender from './coinTileItem.render'; + const BASILISK_CACHE_UPDATE_TIMEOUT = 240000; const IGUNA_ACTIVE_HANDLE_TIMEOUT = 3000; const IGUNA_ACTIVE_HANDLE_TIMEOUT_KMD_NATIVE = 15000; @@ -141,26 +142,7 @@ class CoinTileItem extends React.Component { } render() { - const { item } = this.props; - - return ( -
-
-
this.dashboardChangeActiveCoin(item.coin, item.mode) }> - -
{ item.coinname } ({ item.coinlogo.toUpperCase() })
-
-
-
- ); + return CoinTileItemRender.call(this); } } diff --git a/react/src/components/dashboard/coinTileItem.render.js b/react/src/components/dashboard/coinTileItem.render.js new file mode 100644 index 0000000..fadb72b --- /dev/null +++ b/react/src/components/dashboard/coinTileItem.render.js @@ -0,0 +1,26 @@ +import React from 'react'; + +const CoinTileItemRender = function () { + const { item } = this.props; + + return ( +
+
+
this.dashboardChangeActiveCoin(item.coin, item.mode) }> + +
{ item.coinname } ({ item.coinlogo.toUpperCase() })
+
+
+
+ ); +}; + +export default CoinTileItemRender; \ No newline at end of file diff --git a/react/src/components/dashboard/dashboard.js b/react/src/components/dashboard/dashboard.js index eb22944..3edd13b 100755 --- a/react/src/components/dashboard/dashboard.js +++ b/react/src/components/dashboard/dashboard.js @@ -1,20 +1,6 @@ import React from 'react'; -import Navbar from './navbar'; -import CoinTile from './coinTile'; -import EDEX from './edex'; -import WalletsBalance from './walletsBalance'; -import WalletsProgress from './walletsProgress'; -import WalletsNav from './walletsNav'; -import SendCoin from './sendCoin'; -import WalletsData from './walletsData'; -import Atomic from './atomic'; -import Jumblr from './jumblr'; -import Settings from './settings'; -import ReceiveCoin from './receiveCoin'; -import About from './about'; -import WalletsNative from './walletsNative'; -import WalletsNativeTxInfo from './walletsNativeTxInfo'; -import WalletsTxInfo from './walletsTxInfo'; + +import DashboardRender from './dashboard.render'; class Dashboard extends React.Component { constructor(props) { @@ -31,52 +17,21 @@ class Dashboard extends React.Component { renderDashboard() { document.body.className = ''; - return ( -
-
- -
- - - - - - - - - - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- ); + return DashboardRender.call(this); + } + + isLoggedIn() { + return this.props && + this.props.Main && + this.props.Main.isLoggedIn; } render() { - if (this.props && - this.props.Main && - this.props.Main.isLoggedIn) { + if (this.isLoggedIn()) { return this.renderDashboard(); - } else { - return null; } + + return null; } } diff --git a/react/src/components/dashboard/dashboard.render.js b/react/src/components/dashboard/dashboard.render.js new file mode 100644 index 0000000..f9ad81c --- /dev/null +++ b/react/src/components/dashboard/dashboard.render.js @@ -0,0 +1,59 @@ +import React from 'react'; + +import Navbar from './navbar'; +import CoinTile from './coinTile'; +import EDEX from './edex'; +import WalletsBalance from './walletsBalance'; +import WalletsProgress from './walletsProgress'; +import WalletsNav from './walletsNav'; +import SendCoin from './sendCoin'; +import WalletsData from './walletsData'; +import Atomic from './atomic'; +import Jumblr from './jumblr'; +import Settings from './settings'; +import ReceiveCoin from './receiveCoin'; +import About from './about'; +import WalletsNative from './walletsNative'; +import WalletsNativeTxInfo from './walletsNativeTxInfo'; +import WalletsTxInfo from './walletsTxInfo'; + +const DashboardRender = function () { + return ( +
+
+ +
+ + + + + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ ); +}; + +export default DashboardRender; \ No newline at end of file diff --git a/react/src/components/dashboard/edex.js b/react/src/components/dashboard/edex.js index 3949337..97ef13e 100755 --- a/react/src/components/dashboard/edex.js +++ b/react/src/components/dashboard/edex.js @@ -1,5 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; class EDEX extends React.Component { render() { diff --git a/react/src/components/dashboard/jumblr.js b/react/src/components/dashboard/jumblr.js index 6220fc1..44be584 100755 --- a/react/src/components/dashboard/jumblr.js +++ b/react/src/components/dashboard/jumblr.js @@ -1,9 +1,10 @@ import React from 'react'; import { translate } from '../../translate/translate'; -import WalletsHeader from './walletsHeader'; /*import { dashboardChangeSection, toggleAddcoinModal, logout } from '../../actions/actionCreators'; import Store from '../../store';*/ +import JumblrRender from './jumblr.render'; + class Jumblr extends React.Component { constructor(props) { super(props); @@ -30,261 +31,7 @@ class Jumblr extends React.Component { } render() { - return ( -
- -
-
-
-
- - - { translate('JUMBLR.NOTICE') } - -
- { translate('JUMBLR.DESCRIPTION') } -
-
- -
-
- - - { translate('JUMBLR.NEED_NATIVE') } - -
- { translate('JUMBLR.TO_USE_JUMBLR') } -
- { translate('JUMBLR.IF_YOU_ALREADY_RUNNING') } -
-
- -
-

{ translate('JUMBLR.THIS_SCREEN_DOESNT_REFRESH') }

-
- -
-
-
- -
-
-
    -
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC1') }
    • -
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC2') }
    • -
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC3') }
    • -
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC4') }
    • -
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC5') }
    • -
-
-
-
-
- -
-
-

{ translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY') }

-
    - duck dog cat donkey -
-
    -
  1. { translate('JUMBLR.TO_ACCESS') }
    2. -
  2. { translate('JUMBLR.CLOSE_IAPP') }
    3. -
  3. { translate('JUMBLR.START_IAPP') }
    4. -
  4. { translate('JUMBLR.START_KMD') }
    5. -
  5. { translate('JUMBLR.ACCESS_JUMBLR_FUNDS') } -
      -
    • { translate('JUMBLR.SMALL_LETTERS') }
      • -
    • { translate('JUMBLR.WHITE_SPACE') }
      • -
    -
    6. -
  6. - { translate('JUMBLR.PER_EXAMPLE') } -
    - jumblr duck dog cat donkey -
    7. -
  7. { translate('JUMBLR.LOGIN_WITH_JUMBLR') }
    8. -
-

{ translate('JUMBLR.AGAIN_DONT_SHARE') }

-
-
-
-
- -
-
-
    -
  • { translate('JUMBLR.RUN_KMD') }
    • -
  • { translate('JUMBLR.LOGIN_KMD') }
    • -
  • { translate('JUMBLR.GO_TO') }
    • -
  • { translate('JUMBLR.FIND_DEPOSIT_ADDR') }
    • -
  • { translate('JUMBLR.YOU_SEND_FUNDS') }
    • -
  • { translate('JUMBLR.KEEP_WALLET_OPEN') }
    • -
  • { translate('JUMBLR.IMPORTANT_FUNDS') }
    • -
  • { translate('JUMBLR.LARGE_LOT') }
    • -
-

{ this.renderLB('JUMBLR.EG') }

-

{ translate('JUMBLR.93_KMD') }

-

{ translate('JUMBLR.TO_CLEAR_THEM') }

-

{ translate('JUMBLR.WHEN_IT_TOTALS') }

-
-
-
-
-
- -
-

{ translate('JUMBLR.JADDR') }

-
-
- - - - - - - - - - - - - - - - - - - -
{ translate('JUMBLR.BTC_DEPOSIT') } - -
BTC Jumblr - - - { translate('JUMBLR.HIDDEN') } -
{ translate('JUMBLR.KMD_DEPOSIT') } - -
KMD Jumblr - - - { translate('JUMBLR.HIDDEN') } -
-
-
-
- -
-

{ translate('JUMBLR.JSTATUS') }

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{ translate('JUMBLR.RESULT') } - -
{ translate('JUMBLR.DEPOSITED') } - -
{ translate('JUMBLR.PUB_TO_PRIV') } - -
{ translate('JUMBLR.PRIV_TO_PRIV') } - -
{ translate('JUMBLR.PRIV_TO_PUB') } - -
{ translate('JUMBLR.FINISHED') } - -
{ translate('JUMBLR.PENDING') } - -
-
-
-
-
-
-
- ) + return JumblrRender.call(this); } } diff --git a/react/src/components/dashboard/jumblr.render.js b/react/src/components/dashboard/jumblr.render.js new file mode 100644 index 0000000..0ce9322 --- /dev/null +++ b/react/src/components/dashboard/jumblr.render.js @@ -0,0 +1,264 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +import WalletsHeader from './walletsHeader'; + +const JumblrRender = function () { + return ( +
+ +
+
+
+
+ + + { translate('JUMBLR.NOTICE') } + +
+ { translate('JUMBLR.DESCRIPTION') } +
+
+ +
+
+ + + { translate('JUMBLR.NEED_NATIVE') } + +
+ { translate('JUMBLR.TO_USE_JUMBLR') } +
+ { translate('JUMBLR.IF_YOU_ALREADY_RUNNING') } +
+
+ +
+

{ translate('JUMBLR.THIS_SCREEN_DOESNT_REFRESH') }

+
+ +
+
+
+ +
+
+
    +
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC1') }
    • +
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC2') }
    • +
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC3') }
    • +
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC4') }
    • +
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC5') }
    • +
+
+
+
+
+ +
+
+

{ translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY') }

+
    + duck dog cat donkey +
+
    +
  1. { translate('JUMBLR.TO_ACCESS') }
    2. +
  2. { translate('JUMBLR.CLOSE_IAPP') }
    3. +
  3. { translate('JUMBLR.START_IAPP') }
    4. +
  4. { translate('JUMBLR.START_KMD') }
    5. +
  5. { translate('JUMBLR.ACCESS_JUMBLR_FUNDS') } +
      +
    • { translate('JUMBLR.SMALL_LETTERS') }
      • +
    • { translate('JUMBLR.WHITE_SPACE') }
      • +
    +
    6. +
  6. + { translate('JUMBLR.PER_EXAMPLE') } +
    + jumblr duck dog cat donkey +
    7. +
  7. { translate('JUMBLR.LOGIN_WITH_JUMBLR') }
    8. +
+

{ translate('JUMBLR.AGAIN_DONT_SHARE') }

+
+
+
+
+ +
+
+
    +
  • { translate('JUMBLR.RUN_KMD') }
    • +
  • { translate('JUMBLR.LOGIN_KMD') }
    • +
  • { translate('JUMBLR.GO_TO') }
    • +
  • { translate('JUMBLR.FIND_DEPOSIT_ADDR') }
    • +
  • { translate('JUMBLR.YOU_SEND_FUNDS') }
    • +
  • { translate('JUMBLR.KEEP_WALLET_OPEN') }
    • +
  • { translate('JUMBLR.IMPORTANT_FUNDS') }
    • +
  • { translate('JUMBLR.LARGE_LOT') }
    • +
+

{ this.renderLB('JUMBLR.EG') }

+

{ translate('JUMBLR.93_KMD') }

+

{ translate('JUMBLR.TO_CLEAR_THEM') }

+

{ translate('JUMBLR.WHEN_IT_TOTALS') }

+
+
+
+
+
+ +
+

{ translate('JUMBLR.JADDR') }

+
+
+ + + + + + + + + + + + + + + + + + + +
{ translate('JUMBLR.BTC_DEPOSIT') } + +
BTC Jumblr + + + { translate('JUMBLR.HIDDEN') } +
{ translate('JUMBLR.KMD_DEPOSIT') } + +
KMD Jumblr + + + { translate('JUMBLR.HIDDEN') } +
+
+
+
+ +
+

{ translate('JUMBLR.JSTATUS') }

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{ translate('JUMBLR.RESULT') } + +
{ translate('JUMBLR.DEPOSITED') } + +
{ translate('JUMBLR.PUB_TO_PRIV') } + +
{ translate('JUMBLR.PRIV_TO_PRIV') } + +
{ translate('JUMBLR.PRIV_TO_PUB') } + +
{ translate('JUMBLR.FINISHED') } + +
{ translate('JUMBLR.PENDING') } + +
+
+
+
+
+
+
+ ); +}; + +export default JumblrRender; \ No newline at end of file diff --git a/react/src/components/dashboard/loginModal.js b/react/src/components/dashboard/loginModal.js index a0de196..629d2d3 100755 --- a/react/src/components/dashboard/loginModal.js +++ b/react/src/components/dashboard/loginModal.js @@ -1,12 +1,12 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { toggleAddcoinModal, - iguanaWalletPassphrase, - iguanaActiveHandle + iguanaWalletPassphrase } from '../../actions/actionCreators'; import Store from '../../store'; +import LoginModalRender from './loginModal.render'; + class LoginModal extends React.Component { constructor(props) { super(props); @@ -50,70 +50,10 @@ class LoginModal extends React.Component { render() { if (this.props.Dashboard.activateLoginModal) { - return ( -
- -
- ); - } else { - return null; + return LoginModalRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/loginModal.render.js b/react/src/components/dashboard/loginModal.render.js new file mode 100644 index 0000000..ecb1332 --- /dev/null +++ b/react/src/components/dashboard/loginModal.render.js @@ -0,0 +1,68 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const LoginModalRender = function () { + return ( +
+ +
+ ); +}; + +export default LoginModalRender; \ No newline at end of file diff --git a/react/src/components/dashboard/navbar.js b/react/src/components/dashboard/navbar.js index 9556432..6785f2a 100755 --- a/react/src/components/dashboard/navbar.js +++ b/react/src/components/dashboard/navbar.js @@ -1,5 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { dashboardChangeSection, toggleAddcoinModal, @@ -11,6 +10,8 @@ import { } from '../../actions/actionCreators'; import Store from '../../store'; +import NavbarRender from './navbar.render'; + class Navbar extends React.Component { constructor(props) { super(props); @@ -78,123 +79,7 @@ class Navbar extends React.Component { } render() { - return ( - - ); + return NavbarRender.call(this); } } diff --git a/react/src/components/dashboard/navbar.render.js b/react/src/components/dashboard/navbar.render.js new file mode 100644 index 0000000..f8df937 --- /dev/null +++ b/react/src/components/dashboard/navbar.render.js @@ -0,0 +1,124 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +const NavbarRender = function () { + return ( + + ); +}; + +export default NavbarRender; \ No newline at end of file diff --git a/react/src/components/dashboard/notifications.js b/react/src/components/dashboard/notifications.js index 1acf7f4..908aab5 100755 --- a/react/src/components/dashboard/notifications.js +++ b/react/src/components/dashboard/notifications.js @@ -1,11 +1,12 @@ import React from 'react'; -import { - checkTimestamp, - secondsElapsedToString, - secondsToString -} from '../../util/time'; + import { sortByDate } from '../../util/sort'; -import { translate } from '../../translate/translate'; + +import { + NotificationsByTypeRender, + NotificationsModalRender, + NotificationsRender +} from './notifications.render'; class Notifications extends React.Component { constructor(props) { @@ -74,28 +75,7 @@ class Notifications extends React.Component { const _logItem = _guiLog[i]; items.push( -
-
{ i + 1 }.
-
- Time: { secondsToString(_logItem.timestamp, true, true) } -
-
- GUI Function: { _logItem.function } -
-
- HTTP: { _logItem.httpMethod.toUpperCase() } -
-
- URL: { _logItem.url } -
-
- Payload: { JSON.stringify(_logItem.payload, null, '\t') } -
-
- Response: { JSON.stringify(_logItem.response, null, '\t') } -
-
-
+ NotificationsByTypeRender.call(this, _logItem, type, i) ); } } @@ -106,73 +86,10 @@ class Notifications extends React.Component { renderNotificationsModal() { if (this.state.displayModal) { - return ( -
this.handleKeydown(event) }> -
-
-
-
-
- -
-
-
- { this.renderNotificationsByType('success') } -
-
- { this.renderNotificationsByType('error') } -
-
- { this.renderNotificationsByType('pending') } -
-
-
-
-
-
- -
-
-
-
-
-
- ); - } else { - return null; + return NotificationsModalRender.call(this); } + + return null; } toggleNotificationsModal() { @@ -182,25 +99,7 @@ class Notifications extends React.Component { } render() { - return ( -
-
- { this.state.calls.success } - { this.state.calls.error } - { this.state.calls.pending } -
-
-
-
-
-
-
-
- { this.renderNotificationsModal() } -
- ); + return NotificationsRender.call(this); } } diff --git a/react/src/components/dashboard/notifications.render.js b/react/src/components/dashboard/notifications.render.js new file mode 100644 index 0000000..458211f --- /dev/null +++ b/react/src/components/dashboard/notifications.render.js @@ -0,0 +1,121 @@ +import React from 'react'; +import { + secondsToString +} from '../../util/time'; +import { translate } from '../../translate/translate'; + +export const NotificationsByTypeRender = function (logItem, type, index) { + return ( +
+
{ index + 1 }.
+
+ Time: { secondsToString(logItem.timestamp, true, true) } +
+
+ GUI Function: { logItem.function } +
+
+ HTTP: { logItem.httpMethod.toUpperCase() } +
+
+ URL: { logItem.url } +
+
+ Payload: { JSON.stringify(logItem.payload, null, '\t') } +
+
+ Response: { JSON.stringify(logItem.response, null, '\t') } +
+
+
+ ); +} + +export const NotificationsModalRender = function () { + return ( +
this.handleKeydown(event) }> +
+
+
+
+
+ +
+
+
+ { this.renderNotificationsByType('success') } +
+
+ { this.renderNotificationsByType('error') } +
+
+ { this.renderNotificationsByType('pending') } +
+
+
+
+
+
+ +
+
+
+
+
+
+ ); +}; + +export const NotificationsRender = function () { + return ( +
+
+ { this.state.calls.success } + { this.state.calls.error } + { this.state.calls.pending } +
+
+
+
+
+
+
+
+ { this.renderNotificationsModal() } +
+ ); +}; \ No newline at end of file diff --git a/react/src/components/dashboard/receiveCoin.js b/react/src/components/dashboard/receiveCoin.js index 17bde8a..64b2023 100644 --- a/react/src/components/dashboard/receiveCoin.js +++ b/react/src/components/dashboard/receiveCoin.js @@ -1,5 +1,4 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { copyCoinAddress, checkAddressBasilisk, @@ -7,6 +6,13 @@ import { } from '../../actions/actionCreators'; import Store from '../../store'; +import { + AddressActionsBasiliskModeRender, + AddressActionsNonBasiliskModeRender, + AddressItemRender, + ReceiveCoinRender +} from './receiveCoin.render'; + // TODO: implement sorting // TODO: fallback to localstorage/stores data in case iguana is taking too long to respond @@ -33,42 +39,10 @@ class ReceiveCoin extends React.Component { renderAddressActions(address) { if (this.isBasiliskMode()) { - return ( - - - { translate('IAPI.PUBLIC_SM') } - - - this._checkAddressBasilisk(address) }> - - - this._validateAddressBasilisk(address) }> - - - - ); - } else { - return ( - - - { translate('IAPI.PUBLIC_SM') } - - - - ); + return AddressActionsBasiliskModeRender.call(this, address); } + + return AddressActionsNonBasiliskModeRender.call(this, address); } hasNoAmount(address) { @@ -96,12 +70,7 @@ class ReceiveCoin extends React.Component { } items.push( - - { this.renderAddressActions(address.address) } - { address.address } - { address.amount } - { address.interest ? address.interest : 'N/A' } - + AddressItemRender.call(this, address) ); } @@ -115,51 +84,10 @@ class ReceiveCoin extends React.Component { if (this.props && this.props.receive && this.props.mode !== 'native') { - return ( -
-
-
-
-
-
-
-
-
-

{ translate('INDEX.RECEIVING_ADDRESS') }

-
-
- - - - - - - - - - - { this.renderAddressList() } - - - - - - - - - -
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') }{ translate('INDEX.INTEREST') }
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') }{ translate('INDEX.INTEREST') }
-
-
-
-
-
-
-
- ); - } else { - return null; + return ReceiveCoinRender.call(this); } + + return null; } } diff --git a/react/src/components/dashboard/receiveCoin.render.js b/react/src/components/dashboard/receiveCoin.render.js new file mode 100644 index 0000000..4c08412 --- /dev/null +++ b/react/src/components/dashboard/receiveCoin.render.js @@ -0,0 +1,98 @@ +import React from 'react'; +import { translate } from '../../translate/translate'; + +export const AddressActionsBasiliskModeRender = function (address) { + return ( + + + { translate('IAPI.PUBLIC_SM') } + + + this._checkAddressBasilisk(address) }> + + + this._validateAddressBasilisk(address) }> + + + + ); +}; + +export const AddressActionsNonBasiliskModeRender = function (address) { + return ( + + + { translate('IAPI.PUBLIC_SM') } + + + + ); +}; + +export const AddressItemRender = function (address) { + return ( + + { this.renderAddressActions(address.address) } + { address.address } + { address.amount } + { address.interest ? address.interest : 'N/A' } + + ); +}; + +export const ReceiveCoinRender = function () { + return ( +
+
+
+
+
+
+
+
+
+

{ translate('INDEX.RECEIVING_ADDRESS') }

+
+
+ + + + + + + + + + + { this.renderAddressList() } + + + + + + + + + +
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') }{ translate('INDEX.INTEREST') }
{ translate('INDEX.TYPE') }{ translate('INDEX.ADDRESS') }{ translate('INDEX.BALANCE') }{ translate('INDEX.INTEREST') }
+
+
+
+
+
+
+
+ ); +}; \ No newline at end of file diff --git a/react/src/components/login/login.js b/react/src/components/login/login.js index 30f8593..fcadff9 100644 --- a/react/src/components/login/login.js +++ b/react/src/components/login/login.js @@ -14,6 +14,9 @@ import { import Store from '../../store'; import { PassPhraseGenerator } from '../../util/crypto/passphrasegenerator'; +import SwallModalRender from './swall-modal.render'; +import LoginRender from './login.render'; + const IGUNA_ACTIVE_HANDLE_TIMEOUT = 3000; const IGUNA_ACTIVE_COINS_TIMEOUT = 10000; @@ -165,205 +168,18 @@ class Login extends React.Component { renderSwallModal() { if (this.state.displaySeedBackupModal) { - return ( -
-
-
-
!
-

{ translate('LOGIN.SAVED_WALLET_SEED') }

-
{ translate('LOGIN.SEED_MAKE_SURE_BACKUP') }
-
- - -
-
- ); - } else { - return null; + return SwallModalRender.call(this); } + + return null; } render() { if ((this.state && this.state.display) || !this.props.Main) { - return ( -
- { this.renderSwallModal() } -
-
-
- SuperNET Iguana -
- -
- - { translate('LOGIN.DISPLAY_SYNC_ONLY') } - -
- -
-
-
-

{ translate('INDEX.UNSUPPORTED_BROWSER') }

-
-
- - { translate('INDEX.IE_UNSUPPORTED') } -
-
-

- { translate('INDEX.PLEASE_USE') } Google Chrome { translate('INDEX.OR') } Mozilla FireFox { translate('INDEX.TO_USE') } EasyDEX-GUI. { translate('INDEX.PLEASE_CLICK_ON') }. -

-
- Google Chrome -
-
- Mozilla FireFox -
-
-
-
- -
-

{translate('INDEX.WELCOME_LOGIN')}

-
-
- this.handleKeydown(event) } /> - - -
- -
- - - -
-
-
- -
-

{ translate('INDEX.WELCOME_PLEASE_ADD') }

-
- -
-
- -
-
-

- { translate('INDEX.SELECT_SEED_TYPE') }: -

-
-
this.generateNewSeed(256) }> - - -
-
this.generateNewSeed(160) }> - - -
-
this.generateNewSeed(128) }> - - -
-
-
- - -
-
- - { translate('LOGIN.ENTER_VALUE_AGAIN') }. - -
- -
- -
-
-
-
-
-
- ); - } else { - return null; + return LoginRender.call(this); } + + return null; } } diff --git a/react/src/components/login/login.render.js b/react/src/components/login/login.render.js new file mode 100644 index 0000000..17d68f0 --- /dev/null +++ b/react/src/components/login/login.render.js @@ -0,0 +1,179 @@ +import React from "react"; +import { translate } from "../../translate/translate"; + +const LoginRender = function () { + return ( +
+ { this.renderSwallModal() } +
+
+
+ SuperNET Iguana +
+ +
+ + { translate('LOGIN.DISPLAY_SYNC_ONLY') } + +
+ +
+
+
+

{ translate('INDEX.UNSUPPORTED_BROWSER') }

+
+
+ + { translate('INDEX.IE_UNSUPPORTED') } +
+
+

+ { translate('INDEX.PLEASE_USE') } Google Chrome { translate('INDEX.OR') } Mozilla FireFox { translate('INDEX.TO_USE') } EasyDEX-GUI. { translate('INDEX.PLEASE_CLICK_ON') }. +

+
+ Google Chrome +
+
+ Mozilla FireFox +
+
+
+
+ +
+

{translate('INDEX.WELCOME_LOGIN')}

+
+
+ this.handleKeydown(event) } /> + + +
+ +
+ + + +
+
+
+ +
+

{ translate('INDEX.WELCOME_PLEASE_ADD') }

+
+ +
+
+ +
+
+

+ { translate('INDEX.SELECT_SEED_TYPE') }: +

+
+
this.generateNewSeed(256) }> + + +
+
this.generateNewSeed(160) }> + + +
+
this.generateNewSeed(128) }> + + +
+
+
+ + +
+
+ + { translate('LOGIN.ENTER_VALUE_AGAIN') }. + +
+ +
+ +
+
+
+
+
+
+ ); +}; + +export default LoginRender; \ No newline at end of file diff --git a/react/src/components/login/swall-modal.render.js b/react/src/components/login/swall-modal.render.js new file mode 100644 index 0000000..8a5967d --- /dev/null +++ b/react/src/components/login/swall-modal.render.js @@ -0,0 +1,24 @@ +import React from "react"; +import {translate} from "../../translate/translate"; + +const SwallModalRender = function () { + return ( +
+
+
+
!
+

{ translate('LOGIN.SAVED_WALLET_SEED') }

+
{ translate('LOGIN.SEED_MAKE_SURE_BACKUP') }
+
+ + +
+
+ ); +}; + +export default SwallModalRender; \ No newline at end of file From b1a892e4593c0682e7dc266eaac5b75fe493808e Mon Sep 17 00:00:00 2001 From: petitPapillon Date: Mon, 5 Jun 2017 22:48:00 +0200 Subject: [PATCH 3/9] Merge redux into decouple-jsx-out-of-js --- .../addcoin/coin-selectors.render.js | 4 +- .../components/dashboard/coinTile.render.js | 10 ++-- .../src/components/dashboard/jumblr.render.js | 49 ++++++----------- .../src/components/dashboard/navbar.render.js | 52 +++++++++---------- .../dashboard/notifications.render.js | 29 ++++------- .../dashboard/receiveCoin.render.js | 9 ++-- react/src/components/login/login.render.js | 6 +-- .../components/login/swall-modal.render.js | 4 +- 8 files changed, 68 insertions(+), 95 deletions(-) diff --git a/react/src/components/addcoin/coin-selectors.render.js b/react/src/components/addcoin/coin-selectors.render.js index 0c33726..e0b20e1 100644 --- a/react/src/components/addcoin/coin-selectors.render.js +++ b/react/src/components/addcoin/coin-selectors.render.js @@ -7,7 +7,9 @@ import AddCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat'; const CoinSelectorsRender = function(item, coin, i) { return ( -
+
1 ? 'multi' : 'single' } + key={ `add-coin-${i}` }>
@@ -23,8 +23,8 @@ const CoinTileRender = function () {
-
-
+
+
{ this.renderTiles() }
diff --git a/react/src/components/dashboard/jumblr.render.js b/react/src/components/dashboard/jumblr.render.js index 0ce9322..6acc630 100644 --- a/react/src/components/dashboard/jumblr.render.js +++ b/react/src/components/dashboard/jumblr.render.js @@ -10,9 +10,9 @@ const JumblrRender = function () {
-
- { translate('JUMBLR.NOTICE') } @@ -24,11 +24,11 @@ const JumblrRender = function () {
- - { translate('JUMBLR.NEED_NATIVE') } + { translate('JUMBLR.NEED_NATIVE') }
{ translate('JUMBLR.TO_USE_JUMBLR') } @@ -42,23 +42,17 @@ const JumblrRender = function () {
-
+
+ id="jumblr_security_notes_1">
  • { translate('JUMBLR.FEW_SECURITY_NOTES_DESC1') }
    • @@ -74,18 +68,12 @@ const JumblrRender = function () {
    + id="jumblr_access_funds_2">

    { translate('JUMBLR.ADDRESS_ACCESSIBLE_EASILY') }

      @@ -114,17 +102,12 @@ const JumblrRender = function () {
    -