Fix rate exchange bug

apps/admin_panel/assets/src/adminPanelApp/globalStyle.css

@@ -109,7 +109,6 @@ a {
 
 .ReactModal__Content.react-modal {
   background-color: white;
-  overflow: auto;
   border: none;
   border-radius: 4px;
   opacity: 0;

apps/admin_panel/assets/src/adminPanelApp/routes/index.js

@@ -1,5 +1,6 @@
-import { BrowserRouter as Router, Redirect, Switch, Route } from 'react-router-dom'
 import React from 'react'
+import { BrowserRouter as Router, Redirect, Switch, Route } from 'react-router-dom'
+import PropTypes from 'prop-types'
 
 import AuthenticatedRoute from './authenticatedRoute'
 import LoginRoute from './loginRoute'
@@ -26,7 +27,6 @@ import ActivityLogPage from '../../omg-page-activity-log'
 import AdminDetailPage from '../../omg-page-admin-detail'
 import NotFoundPage from '../../omg-page-404'
 import AccountLayout from '../../omg-page-each-account/AccountLayout'
-import PropTypes from 'prop-types'
 // prettier-ignore
 
 const createRoute = ({ authenticated }) => (
@@ -60,7 +60,8 @@ const createRoute = ({ authenticated }) => (
       <AuthenticatedRoute authenticated={authenticated} path='/accounts/:accountId/:type' component={AccountLayout} />
 
       {/* OVERVIEW */}
-      <AuthenticatedRoute authenticated={authenticated} path='/users/:userId' exact component={UserDetailPage} />
+      <AuthenticatedRoute authenticated={authenticated} path='/users/:userId' exact component={() => <UserDetailPage withBreadCrumb />} />
+
       <AuthenticatedRoute authenticated={authenticated} path='/consumptions' exact component={ReqestConsumptionPage} />
       <AuthenticatedRoute authenticated={authenticated} path='/requests' exact component={TransactionRequestPage} />
       <AuthenticatedRoute authenticated={authenticated} path='/activity' exact component={ActivityLogPage} />

apps/admin_panel/assets/src/clientApp/omg-client-reset-password/index.js

@@ -158,7 +158,7 @@ class ForgetPasswordForm extends Component {
                 disabled={this.state.submitStatus === 'SUBMITTED'}
               />
               <Button size='large' type='submit' fluid loading={this.state.submitStatus === 'SUBMITTED'}>
-                Reset Password
+                <span>Reset Password</span>
               </Button>
             </div>
           ) : (

apps/admin_panel/assets/src/omg-app-layout/SideNavigation.js

@@ -176,7 +176,7 @@ class SideNavigation extends PureComponent {
           return (
             <Link to={link.to} key={link.to}>
               <NavigationItem active={fuzzySearch(link.to, `/${firstSubPath}`)}>
-                <Icon name={link.icon} /> <span>{link.text}</span>
+                <Icon name={link.icon} /><span>{link.text}</span>
               </NavigationItem>
             </Link>
           )
@@ -195,15 +195,15 @@ class SideNavigation extends PureComponent {
           <NavigationItem
             active={!matchedAccountId && fuzzySearch('/accounts', `/${firstSubPath}`)}
           >
-            <Icon name='Merchant' /> <span>{'Accounts'}</span>
+            <Icon name='Merchant' /><span>{'Accounts'}</span>
           </NavigationItem>
         </Link>
         {this.renderRecentAccounts()}
         {this.dataLink.map(link => {
           return (
             <Link to={link.to} key={link.to}>
               <NavigationItem active={fuzzySearch(link.to, `/${firstSubPath}`)}>
-                <Icon name={link.icon} /> <span>{link.text}</span>
+                <Icon name={link.icon} /><span>{link.text}</span>
               </NavigationItem>
             </Link>
           )
@@ -218,7 +218,7 @@ class SideNavigation extends PureComponent {
         <MenuName> MY PROFILE </MenuName>
         <Link to={'/user_setting'}>
           <NavigationItem active={fuzzySearch('/user_setting', `/${firstSubPath}`)}>
-            <Icon name={'Profile'} /> <span>My Profile</span>
+            <Icon name={'Profile'} /><span>My Profile</span>
           </NavigationItem>
         </Link>
         <NavigationItem onClick={this.onLogout}>

apps/admin_panel/assets/src/omg-app-layout/TopBar.js

@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
+
 import ProfileAvatarDropdown from './ProfileDropdown'
+
 const TopBarContainer = styled.div`
   padding: 15px 7% 10px 7%;
   text-align: right;
@@ -9,7 +11,6 @@ export default class TopBar extends PureComponent {
   render () {
     return (
       <TopBarContainer>
-        {/* <GlobalSearchBar /> */}
         <ProfileAvatarDropdown />
       </TopBarContainer>
     )

apps/admin_panel/assets/src/omg-app-layout/index.js

@@ -28,11 +28,11 @@ const ContentContainer = styled.div`
   display: inline-block;
   width: calc(100% - 220px);
   height: 100vh;
-  overflow: auto;
+  overflow-y: scroll;
+  overflow-x: hidden;
 `
 const Content = styled.div`
   padding: 0 7% 50px 7%;
-  overflow: hidden;
 `
 class AppLayout extends Component {
   static propTypes = {

apps/admin_panel/assets/src/omg-assign-key-account-modal/AdminKeySelectRow.js

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import moment from 'moment'
-const AdminKeySlectRowContainer = styled.div`
+const AdminKeySelectRowContainer = styled.div`
   align-items: center;
 
   max-width: 400px;
@@ -12,9 +12,9 @@ const AdminKeySlectRowContainer = styled.div`
     overflow: hidden;
   }
 `
-const AdminKeySlectRowName = styled.div`
+const AdminKeySelectRowName = styled.div`
 `
-const AdminKeySlectRowId = styled.div`
+const AdminKeySelectRowId = styled.div`
   color: ${props => props.theme.colors.B300};
   font-size: 12px;
 `
@@ -23,15 +23,15 @@ const AdminKeyRowDate = styled.div`
   margin-top: 5px;
   color: ${props => props.theme.colors.S500};
 `
-AdminKeySlectRow.propTypes = {
+AdminKeySelectRow.propTypes = {
   adminKey: PropTypes.object
 }
-export default function AdminKeySlectRow ({ adminKey }) {
+export default function AdminKeySelectRow ({ adminKey }) {
   return (
-    <AdminKeySlectRowContainer>
-      <AdminKeySlectRowName>{adminKey.name}</AdminKeySlectRowName>
-      <AdminKeySlectRowId>{adminKey.access_key}</AdminKeySlectRowId>
+    <AdminKeySelectRowContainer>
+      <AdminKeySelectRowName>{adminKey.name}</AdminKeySelectRowName>
+      <AdminKeySelectRowId>{adminKey.access_key}</AdminKeySelectRowId>
       <AdminKeyRowDate>{moment(adminKey.created_at).format()}</AdminKeyRowDate>
-    </AdminKeySlectRowContainer>
+    </AdminKeySelectRowContainer>
   )
 }

apps/admin_panel/assets/src/omg-assign-key-account-modal/index.js

@@ -1,15 +1,17 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Button, Icon, Select } from '../omg-uikit'
-import Modal from '../omg-modal'
 import { connect } from 'react-redux'
-import AccessKeysFetcher from '../omg-access-key/accessKeysFetcher'
 import { compose } from 'recompose'
 import { withRouter } from 'react-router-dom'
+import PropTypes from 'prop-types'
+
+import { Button, Icon, Select } from '../omg-uikit'
+import Modal from '../omg-modal'
+import AccessKeysFetcher from '../omg-access-key/accessKeysFetcher'
 import { createAccessKey } from '../omg-access-key/action'
 import { assignKey } from '../omg-account/action'
-import PropTypes from 'prop-types'
 import AdminKeySelectRow from './AdminKeySelectRow'
+
 const AssignKeyAccountContainer = styled.div`
   padding: 50px;
   width: 100vw;
@@ -33,10 +35,7 @@ const AssignKeyAccountContainer = styled.div`
     margin-top: 35px;
   }
 `
-const CreateAdminKeyButton = styled(Button)`
-  padding-left: 40px;
-  padding-right: 40px;
-`
+
 const CreateAdminKeyFormContainer = styled.form`
   position: absolute;
   top: 50%;
@@ -139,13 +138,13 @@ function AssignKeyAccount (props) {
               { key: 'viewer', value: 'Viewer' }
             ]}
           />
-          <CreateAdminKeyButton
+          <Button
             styleType='primary'
             type='submit'
             loading={submitStatus === 'SUBMITTED'}
           >
-            Assign Key
-          </CreateAdminKeyButton>
+            <span>Assign Key</span>
+          </Button>
         </CreateAdminKeyFormContainer>
       </AssignKeyAccountContainer>
     )

apps/admin_panel/assets/src/omg-confirmation-modal/index.js

@@ -47,9 +47,13 @@ class ConfirmationModal extends PureComponent {
         <ConfirmationModalContainer>
           <ContentContainer>{this.props.children}</ContentContainer>
           <ButtonsContainer>
-            {this.props.cancel && <PlainButton onClick={this.props.onRequestClose}>Cancel</PlainButton>}
+            {this.props.cancel && (
+              <PlainButton onClick={this.props.onRequestClose}>
+                <span>Cancel</span>
+              </PlainButton>
+            )}
             <Button styleType='primary' size='small' onClick={this.props.onOk} loading={this.props.loading}>
-              {this.props.confirmText || 'Confirm' }
+              <span>{this.props.confirmText || 'Confirm' }</span>
             </Button>
           </ButtonsContainer>
         </ConfirmationModalContainer>

apps/admin_panel/assets/src/omg-consumption-panel/index.js

@@ -183,13 +183,13 @@ class TransactionRequestPanel extends Component {
                 {consumption.status === 'pending' && (
                   <InformationItem>
                     <Button onClick={() => this.props.approveConsumptionById(consumption.id)}>
-                      Approve
+                      <span>Approve</span>
                     </Button>
                     <Button
                       onClick={() => this.props.rejectConsumptionById(consumption.id)}
                       styleType='secondary'
                     >
-                      Reject
+                      <span>Reject</span>
                     </Button>
                   </InformationItem>
                 )}

apps/admin_panel/assets/src/omg-copy/index.js

@@ -1,9 +1,11 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { Icon } from '../omg-uikit'
 import { connect } from 'react-redux'
-import { copyToClipboard } from './action'
 import styled from 'styled-components'
+
+import { Icon } from '../omg-uikit'
+import { copyToClipboard } from './action'
+
 const IconButton = styled.span`
   cursor: pointer;
   vertical-align: middle;

apps/admin_panel/assets/src/omg-create-account-modal/ChooseCategoryStage.js

@@ -177,7 +177,7 @@ class ChooseCategoryStage extends Component {
             </CreateNewGroupActionContainer>
           ) : (
             <PlainButton onClick={this.onClickCreateNewGroup}>
-              <Icon name='Plus' /> <span>Create New Category</span>
+              <Icon name='Plus' /><span>Create New Category</span>
             </PlainButton>
           )}
         </BottomBar>

apps/admin_panel/assets/src/omg-create-account-modal/CreateAccountStage.js

@@ -95,7 +95,7 @@ export default class CreateAccountStage extends Component {
           loading={this.props.submitting}
           onClick={this.props.onClickCreateAccount}
         >
-          Create Account
+          <span>Create Account</span>
         </Button>
       </Form>
     )

apps/admin_panel/assets/src/omg-create-account-modal/CreateSuccessStage.js

@@ -75,7 +75,7 @@ export default class CreateAccountStage extends Component {
           loading={this.props.submitting}
           onClick={this.props.onClickContinue}
         >
-          Create Another Account
+          <span>Create Another Account</span>
         </Button>
         <PlainButton onClick={this.props.onClickFinish}>Done</PlainButton>
       </CreateAccountSuccessContainer>

apps/admin_panel/assets/src/omg-create-admin-key-modal/index.js

@@ -1,13 +1,15 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Input, Button, Icon, Select } from '../omg-uikit'
 import Modal from '../omg-modal'
 import { connect } from 'react-redux'
 import { compose } from 'recompose'
 import { withRouter } from 'react-router-dom'
+import PropTypes from 'prop-types'
+
+import { Input, Button, Icon, Select } from '../omg-uikit'
 import { createAccessKey } from '../omg-access-key/action'
 import { assignKey } from '../omg-account/action.js'
-import PropTypes from 'prop-types'
+
 const CreateAdminKeyModalContainer = styled.div`
   padding: 50px;
   width: 100vw;
@@ -31,10 +33,7 @@ const CreateAdminKeyModalContainer = styled.div`
     margin-top: 35px;
   }
 `
-const CreateAdminKeyButton = styled(Button)`
-  padding-left: 40px;
-  padding-right: 40px;
-`
+
 const CreateAdminKeyFormContainer = styled.form`
   position: absolute;
   top: 50%;
@@ -116,7 +115,7 @@ function CreateAdminKeyModal (props) {
       <CreateAdminKeyModalContainer onSubmit={onSubmit}>
         <Icon name='Close' onClick={onRequestClose} />
         <CreateAdminKeyFormContainer>
-          <h4>Create Admin Key</h4>
+          <h4>Generate Admin Key</h4>
           <InputLabel>Label</InputLabel>
           <StyledInput
             autoFocus
@@ -156,13 +155,13 @@ function CreateAdminKeyModal (props) {
               />
             </>
           )}
-          <CreateAdminKeyButton
+          <Button
             styleType='primary'
             type='submit'
             loading={submitStatus === 'SUBMITTED'}
           >
-            Create key
-          </CreateAdminKeyButton>
+            <span>Generate Key</span>
+          </Button>
         </CreateAdminKeyFormContainer>
       </CreateAdminKeyModalContainer>
     </Modal>

apps/admin_panel/assets/src/omg-create-client-key-modal/index.js

@@ -1,12 +1,14 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Input, Button, Icon } from '../omg-uikit'
-import Modal from '../omg-modal'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { compose } from 'recompose'
 import { withRouter } from 'react-router-dom'
+
+import { Input, Button, Icon } from '../omg-uikit'
+import Modal from '../omg-modal'
 import { createApiKey } from '../omg-api-keys/action'
-import PropTypes from 'prop-types'
+
 const CreateClientKeyModalContainer = styled.div`
   padding: 50px;
   width: 100vw;
@@ -30,10 +32,7 @@ const CreateClientKeyModalContainer = styled.div`
     margin-top: 35px;
   }
 `
-const CreateClientKeyButton = styled(Button)`
-  padding-left: 40px;
-  padding-right: 40px;
-`
+
 const CreateClientKeyFormContainer = styled.form`
   position: absolute;
   top: 50%;
@@ -96,21 +95,21 @@ function CreateClientKeyModal (props) {
       <CreateClientKeyModalContainer onSubmit={onSubmit}>
         <Icon name='Close' onClick={onRequestClose} />
         <CreateClientKeyFormContainer>
-          <h4>Create Client Key</h4>
+          <h4>Generate Client Key</h4>
           <InputLabel>Label</InputLabel>
           <StyledInput
             autoFocus
             normalPlaceholder='Label (Optional)'
             onChange={e => setName(e.target.value)}
             value={name}
           />
-          <CreateClientKeyButton
+          <Button
             styleType='primary'
             type='submit'
             loading={submitStatus === 'SUBMITTED'}
           >
-            Create key
-          </CreateClientKeyButton>
+            <span>Generate Key</span>
+          </Button>
         </CreateClientKeyFormContainer>
       </CreateClientKeyModalContainer>
     </Modal>

apps/admin_panel/assets/src/omg-create-token-modal/index.js

@@ -130,7 +130,7 @@ class CreateToken extends Component {
             loading={this.state.submitting}
             disabled={!this.shouldSubmit()}
           >
-            Create Token
+            <span>Create Token</span>
           </Button>
         </ButtonContainer>
         <Error error={this.state.error}>{this.state.error}</Error>