feat: added payer mobile sim

.ncurc.yaml

@@ -20,5 +20,7 @@ reject: [
   # antd v5+ currently suffers from poor performance https://github.com/ant-design/ant-design/issues/39746
   "antd",
   # jsoneditor-react is not being readily maintained, so peg it's jsoneditor dependency to a specific version
-  "jsoneditor"
+  "jsoneditor",
+  # eslint-config-airbnb-typescript update is breaking docker build
+  "eslint-config-airbnb-typescript"
 ]

audit-ci.jsonc

@@ -23,7 +23,8 @@
     "GHSA-rp65-9cf3-cjxr", // https://github.com/advisories/GHSA-rp65-9cf3-cjxr
     "GHSA-c2qf-rxjj-qqgw", // https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
     "GHSA-g4rg-993r-mgx7", // https://github.com/advisories/GHSA-g4rg-993r-mgx7
-    "GHSA-7fh5-64p2-3v2j"  // https://github.com/advisories/GHSA-7fh5-64p2-3v2j
+    "GHSA-7fh5-64p2-3v2j", // https://github.com/advisories/GHSA-7fh5-64p2-3v2j
+    "GHSA-wr3j-pwj9-hqq6"  // https://github.com/advisories/GHSA-wr3j-pwj9-hqq6
   ]
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ml-testing-toolkit-ui",
-  "version": "15.4.2",
+  "version": "15.5.0-snapshot.0",
   "description": "Mojaloop Testing Toolkit Web User Interface",
   "main": "index.js",
   "repository": {
@@ -64,23 +64,23 @@
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "ace-builds": "^1.32.3",
+    "ace-builds": "^1.32.8",
     "ajv": "^8.12.0",
     "antd": "^4.24.7",
     "array-move": "^4.0.0",
-    "axios": "^1.6.5",
+    "axios": "^1.6.8",
     "bootstrap": "^4.5.3",
     "brace": "^0.11.1",
-    "core-js": "^3.35.0",
-    "electron": "^28.1.2",
+    "core-js": "^3.36.1",
+    "electron": "^29.1.5",
     "idb-keyval": "^6.2.1",
     "js-file-download": "^0.4.12",
     "jsoneditor": "9.10.3",
     "jsoneditor-react": "^3.1.2",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "mermaid": "9.1.7",
-    "mobx": "^6.12.0",
+    "mobx": "^6.12.1",
     "mock-json-schema": "^1.1.1",
     "moment": "^2.30.1",
     "react": "^17.0.1",
@@ -91,7 +91,7 @@
     "react-scripts": "4.0.0",
     "react-sortable-hoc": "^2.0.0",
     "redoc": "^2.1.3",
-    "socket.io-client": "^4.7.3",
+    "socket.io-client": "^4.7.5",
     "styled-components": "^6.1.8",
     "web-vitals": "^0.2.4"
   },
@@ -100,7 +100,7 @@
     "@types/react": "16.8.7",
     "audit-ci": "^6.6.1",
     "eslint-config-airbnb-typescript": "^17.1.0",
-    "npm-check-updates": "^16.14.12",
+    "npm-check-updates": "^16.14.18",
     "replace": "^1.2.2",
     "standard-version": "^9.5.0"
   },

src/index.js

@@ -38,6 +38,7 @@ import Login from './views/login/Login.jsx';
 import MobileSimulator from './views/demos/MobileSimulator/MobileSimulator.jsx';
 import PayeeAppSimulator from './views/demos/PayeeAppSimulator/PayeeApp';
 import PayeeMobileSimulator from './views/demos/PayeeAppSimulator/PayeeMobile';
+import PayerMobileSimulator from './views/demos/PayerAppSimulator/PayerMobile';
 import DemoTestRunner from './views/demos/DemoTestRunner/DemoTestRunner.jsx';
 import DemoMonitoring from './views/demos/DemoMonitoring/DemoMonitoring.jsx';
 
@@ -99,6 +100,7 @@ function App() {
                         <Route exact path='/mobilesimulator' render={props => <MobileSimulator {...props} />} />
                         <Route exact path='/payeeapp' render={props => <PayeeAppSimulator {...props} />} />
                         <Route exact path='/payeemobile' render={props => <PayeeMobileSimulator {...props} />} />
+                        <Route exact path='/payermobile' render={props => <PayerMobileSimulator {...props} />} />
                         <Route exact path='/demotestrunner' render={props => <DemoTestRunner {...props} />} />
                         <Route exact path='/demomonitoring' render={props => <DemoMonitoring {...props} />} />
                         <Redirect from='/' to='/admin/index' />

src/views/demos/Demos.jsx

@@ -56,6 +56,20 @@ class Demos extends React.Component {
                         </ul>
                     </Col>
                 </Row>
+                <Row className='my-4'>
+                    <Col span={24}>
+                        <ul>
+                            <li>
+                                <a
+                                    href='/payermobile'
+                                    target='_blank'
+                                >
+                  Payer App Simulator
+                                </a>
+                            </li>
+                        </ul>
+                    </Col>
+                </Row>
                 <Row className='my-4'>
                     <Col span={24}>
                         <ul>

src/views/demos/PayerAppSimulator/BrandIcon.jsx

@@ -0,0 +1,57 @@
+/*****
+ License
+ --------------
+ Copyright © 2017 Bill & Melinda Gates Foundation
+ The Mojaloop files are made available by the Bill & Melinda Gates Foundation under the Apache License, Version 2.0 (the "License") and you may not use these files except in compliance with the License. You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, the Mojaloop files are distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ Contributors
+ --------------
+ This is the official list of the Mojaloop project contributors for this file.
+ Names of the original copyright holders (individuals or organizations)
+ should be listed with a '*' in the first column. People who have
+ contributed from an organization can be listed under the organization
+ that actually holds the copyright for their contributions (see the
+ Gates Foundation organization for an example). Those individuals should have
+ their names indented and be marked with a '-'. Email address can be added
+ optionally within square brackets <email>.
+ * Gates Foundation
+
+ * ModusBox
+ * Vijaya Kumar Guthi <vijaya.guthi@modusbox.com> (Original Author)
+ --------------
+ ******/
+import React from 'react';
+import { Image } from 'antd';
+import { getConfig } from '../../../utils/getConfig';
+
+class BrandIcon extends React.Component {
+    state = {
+        image: null,
+    };
+
+    constructor() {
+        super();
+        const { payeeAppSimulatorBrandConfig } = getConfig();
+        this.state.image = payeeAppSimulatorBrandConfig.icon;
+    }
+
+    render() {
+        return (
+            <>
+                {
+                    this.state.image
+                        ? (
+                            <Image
+                                width={this.props.width || '150px'}
+                                src={this.state.image}
+                            />
+                        )
+                        : null
+                }
+            </>
+        );
+    }
+}
+
+export default BrandIcon;