feat: added the advanced settings icon (not functional yet)

feat: added the 'Add new trigger' link  (not functional yet)

feat: added the triggers editable table  (not functional yet)

new-lamassu-admin/package-lock.json

@@ -15048,6 +15048,22 @@
         "type-check": "~0.3.2"
       }
     },
+    "libphonenumber-js": {
+      "version": "1.7.49",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.7.49.tgz",
+      "integrity": "sha512-AthHsii6+s+TBNMCUvKRzjscxMJAUD9rjDYZNj8rCVKBX9w1TzRbsmv+f4/pSuoHeKoNI64rcOV0Xb+7hoHudw==",
+      "requires": {
+        "minimist": "^1.2.5",
+        "xml2js": "^0.4.17"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+        }
+      }
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -22818,8 +22834,7 @@
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
     },
     "saxes": {
       "version": "3.1.11",
@@ -26478,6 +26493,20 @@
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
       "dev": true
     },
+    "xml2js": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+      "requires": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      }
+    },
+    "xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
+    },
     "xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",

new-lamassu-admin/package.json

@@ -18,6 +18,7 @@
     "fuse.js": "^3.4.6",
     "graphql": "^14.5.8",
     "jss-plugin-extend": "^10.0.0",
+    "libphonenumber-js": "^1.7.49",
     "moment": "2.24.0",
     "qrcode.react": "0.9.3",
     "ramda": "^0.26.1",

new-lamassu-admin/src/pages/Triggers/Triggers.js

@@ -2,11 +2,23 @@ import { makeStyles } from '@material-ui/core/styles'
 import React from 'react'
 
 import Title from 'src/components/Title'
+import { FeatureButton, Link } from 'src/components/buttons'
+import { Table as EditableTable } from 'src/components/editableTable'
+import { ReactComponent as ConfigureInverseIcon } from 'src/styling/icons/button/configure/white.svg'
+import { ReactComponent as Configure } from 'src/styling/icons/button/configure/zodiac.svg'
+// import { ReactComponent as Help } from 'src/styling/icons/action/help/white.svg'
 
 import { mainStyles } from './Triggers.styles'
 
 const useStyles = makeStyles(mainStyles)
 
+const sizes = {
+  triggerType: 236,
+  requirement: 293,
+  threshold: 231,
+  cashDirection: 296
+}
+
 const Triggers = () => {
   const classes = useStyles()
 
@@ -15,8 +27,54 @@ const Triggers = () => {
       <div className={classes.titleWrapper}>
         <div className={classes.titleAndButtonsContainer}>
           <Title>Compliance Triggers</Title>
+          <div className={classes.buttonsWrapper}>
+            <FeatureButton
+              Icon={Configure}
+              InverseIcon={ConfigureInverseIcon}
+              variant="contained"
+              // onClick={handleAdvanced}
+            />
+          </div>
+        </div>
+        <div className={classes.headerLabels}>
+          <Link color="primary">Add new trigger</Link>
         </div>
       </div>
+      <EditableTable
+        // save={save}
+        // validationSchema={validationSchema}
+        data={[]}
+        elements={[
+          {
+            name: 'triggerType',
+            size: sizes.triggerType
+            // view: R.path(['display']),
+            // input: Autocomplete,
+            // inputProps: { suggestions: getData(['countries']) }
+          },
+          {
+            name: 'requirement',
+            size: sizes.requirement
+            // view: R.path(['code']),
+            // input: Autocomplete,
+            // inputProps: { suggestions: getData(['currencies']) }
+          },
+          {
+            name: 'threshold',
+            size: sizes.threshold
+            // view: displayCodeArray,
+            // input: AutocompleteMultiple,
+            // inputProps: { suggestions: getData(['languages']) }
+          },
+          {
+            name: 'cashDirection',
+            size: sizes.cashDirection
+            // view: displayCodeArray,
+            // input: AutocompleteMultiple,
+            // inputProps: { suggestions: getData(['cryptoCurrencies']) }
+          }
+        ]}
+      />
     </>
   )
 }

new-lamassu-admin/src/pages/Triggers/Triggers.styles.js

@@ -1,10 +1,11 @@
 import baseStyles from 'src/pages/Logs.styles'
 
-const { titleWrapper, titleAndButtonsContainer } = baseStyles
+const { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles
 
 const mainStyles = {
   titleWrapper,
-  titleAndButtonsContainer
+  titleAndButtonsContainer,
+  buttonsWrapper
 }
 
 export { mainStyles }