Merge pull request #214 from aesirxio/develop

Push changes to master

.eslintrc

@@ -9,10 +9,27 @@
   ],
 
   "rules": {
-    "no-unused-vars": "error",
+    "no-unused-vars": "off",
     "no-console": "error",
     "react/prop-types": "off",
+    "no-useless-catch": "off",
     "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-empty-function": "off"
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/ban-types": ["error",
+    {
+        "types": {
+            "String": false,
+            "Boolean": false,
+            "Number": false,
+            "Symbol": false,
+            "{}": false,
+            "Object": false,
+            "object": false,
+            "Function": false,
+        },
+        "extendDefaults": true
+    }
+]
   }
 }

package.json

@@ -22,6 +22,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
     "@popperjs/core": "^2.11.7",
+    "@types/dompurify": "^3.0.5",
     "@types/lodash": "^4.14.195",
     "@types/node": "^18.15.11",
     "@types/react": "^18.2.50",
@@ -31,11 +32,14 @@
     "@types/react-table": "^7.7.14",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.59.0",
+    "@walletconnect/types": "^2.4.9",
+    "dompurify": "^3.0.6",
     "esbuild-plugin-inline-image": "^0.0.9",
     "esbuild-sass-plugin": "^3.0.0",
     "esbuild-scss-modules-plugin": "^1.1.1",
     "eslint": "^8.50",
     "eslint-plugin-react": "^7.32.2",
+    "history": "4.9.0",
     "prettier": "^3.0.3",
     "sass": "^1.62.1",
     "tsup": "^7.1.0",
@@ -50,15 +54,19 @@
     "@ckeditor/ckeditor5-core": "^38.0.1",
     "@ckeditor/ckeditor5-engine": "^38.0.1",
     "@ckeditor/ckeditor5-react": "^6.0.0",
+    "@concordium/browser-wallet-api-helpers": "^3.0.0",
+    "@concordium/react-components": "^0.4.0-rc.7",
+    "@concordium/web-sdk": "^7.0.4-rc.3",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@types/react-color": "^3.0.6",
     "aesirx-dam-app": "^1.5.0",
-    "aesirx-lib": "^2.0.4",
+    "aesirx-lib": "^2.0.5",
     "aesirx-sso": "^1.4.6",
     "bootstrap": "^5.3.1",
+    "dayjs": "^1.11.10",
     "i18next": "^22.4.15",
     "i18next-browser-languagedetector": "^7.1.0",
     "lodash": "^4.17.21",
@@ -72,19 +80,23 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^12.2.0",
     "react-lazy-load-image-component": "^1.5.6",
-    "react-router-dom": "^6.21.3",
+    "react-router-dom": "^5.2.0",
     "react-select": "^5.7.2",
     "react-spinners": "^0.13.8",
     "react-table": "^7.8.0",
     "react-toastify": "^9.1.2",
     "react-tooltip": "^5.18.0",
-    "simple-react-validator": "^1.6.2"
+    "simple-react-validator": "^1.6.2",
+    "socket.io": "^4.7.2",
+    "socket.io-client": "^4.7.2"
   },
   "resolutions": {
     "react": "^18",
     "react-dom": "^18",
     "tough-cookie": "^4",
     "semver": "^7",
-    "jsdom": "^16"
+    "jsdom": "^16",
+    "react-router-dom": "5.2.0",
+    "@types/react-router-dom": "5.3.3"
   }
 }

src/components/ButtonCopy.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
+import { useState } from 'react';
+
+function ButtonCopy({ content, className, text, isReplaceClass }: any) {
+  const [copy, setCopy] = useState(false);
+  const handleCopy = (content: any) => {
+    setCopy(true);
+    setTimeout(() => {
+      setCopy(false);
+    }, 1500);
+    navigator.clipboard.writeText(content);
+  };
+  const customClass = isReplaceClass
+    ? className
+    : `rounded-1 fs-8 lh-base font-opensans fw-bold text-body cursor-copy ${className}`;
+  return (
+    <button onClick={() => handleCopy(content)} disabled={copy} className={customClass}>
+      {!copy ? (
+        <>
+          {text} <FontAwesomeIcon icon={faCopy} width={16} height={16} />
+        </>
+      ) : (
+        'COPIED!'
+      )}
+    </button>
+  );
+}
+
+export default ButtonCopy;

src/components/CreateMarkup.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const CreateMarkup = ({ htmlString, className }: any) => {
+  return <span className={className ?? ''} dangerouslySetInnerHTML={{ __html: htmlString }}></span>;
+};
+export default CreateMarkup;

src/components/DatePicker/index.scss

@@ -13,7 +13,7 @@
     }
   }
   .react-datepicker__input-container {
-    height: 54px;
+    height: 48px;
   }
 
   .icon {

src/components/DatePicker/index.tsx

@@ -118,7 +118,7 @@ const AesirXDatePicker = ({
   };
   return (
     <div
-      style={{ minHeight: classContainer ? '' : '50px' }}
+      style={{ minHeight: classContainer ? '' : '48px' }}
       ref={datePickerRef}
       className="d-flex align-items-center bg-white rounded-1 shadow-sm daterange-picker-wrapper"
     >
@@ -146,7 +146,7 @@ const AesirXDatePicker = ({
           isClearable={false}
           className={`${
             isDays ? 'fs-14 fw-semibold mw-120' : 'ps-16 pe-6'
-          } form-control rounded-1 text-body opacity-100 h-100 ${i18n?.language} ${inputClass}`}
+          } form-control fs-sm rounded-1 text-body opacity-100 h-100 ${i18n?.language} ${inputClass}`}
           showPopperArrow={false}
           monthsShown={2}
           open={isOpen}

src/components/Form/Helper.tsx

@@ -15,7 +15,10 @@ import { FormSelection } from './FormSelection';
 import { FormSelectDropdown } from './FormSelectDropdown';
 import { FormRadio } from './FormRadio';
 import { Input } from './Input';
-
+import { FormEditor } from './FormEditor';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
+import { Tooltip } from 'react-tooltip';
 const renderingGroupFieldHandler = (group: any, validator: any) =>
   Object.keys(group.fields)
     .map((fieldIndex) =>
@@ -138,9 +141,67 @@ const renderField = (field: any, validator: any) => {
         </Form.Group>
       );
 
+    case FORM_FIELD_TYPE.EDITOR:
+      return (
+        <Form.Group key={field.key} className={`mb-24 ${className}`}>
+          <div className="d-flex align-item-center">
+            {field.label && (
+              <Label
+                text={field.label}
+                isLabelHTML={field.isLabelHTML}
+                required={field.required ?? false}
+              />
+            )}
+            {field.description && (
+              <TooltipField
+                keyTooltip={field?.key}
+                description={field?.description}
+                defaultValue={field?.default}
+              />
+            )}
+          </div>
+          {field.isEditor === false ? (
+            <Form.Control
+              as="textarea"
+              defaultValue={field.getValueSelected}
+              required={field.required ?? false}
+              id={field.key}
+              onChange={field.handleChange ?? undefined}
+              onBlur={field.blurred ?? undefined}
+              placeholder={field.placeholder}
+              maxLength={field?.maxLength}
+            />
+          ) : (
+            <FormEditor field={field} key={field.key} />
+          )}
+          {field.validation &&
+            validator.message(field.label, field.value, field.validation, {
+              className: 'text-danger',
+            })}
+        </Form.Group>
+      );
+
     default:
       return <></>;
   }
 };
 
+const TooltipField = ({ keyTooltip, description, defaultValue }: any) => {
+  return (
+    <>
+      <FontAwesomeIcon
+        data-tooltip-id={`tooltip-${keyTooltip}`}
+        data-tooltip-html={
+          defaultValue
+            ? description + `</br>Default: <strong>${defaultValue}</strong>`
+            : description
+        }
+        className="mx-sm fs-12 mb-1"
+        icon={faCircleInfo}
+      />
+      <Tooltip id={`tooltip-${keyTooltip}`} />
+    </>
+  );
+};
+
 export { renderingGroupFieldHandler, renderField };

src/components/Header/index.tsx

@@ -11,7 +11,7 @@ import { ThemesSwitcher } from 'components/ThemesSwitcher';
 import { Profile } from 'components/Profile';
 import { useAppContext } from 'providers/AppProvider';
 
-const Header = ({ children, logo }: any) => {
+const Header = ({ children, logo, isColorMode }: any) => {
   const { noavatar, integration, rootId } = useAppContext();
   const [isMini, setMini] = useState(integration);
 
@@ -60,8 +60,7 @@ const Header = ({ children, logo }: any) => {
         <div className="d-flex justify-content-end flex-1 align-items-center">
           {children}
           <LanguagesSwitcher />
-          <ThemesSwitcher />
-
+          {isColorMode && <ThemesSwitcher />}
           {!noavatar && <Profile />}
         </div>
       </div>

src/components/ImageIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+interface ImageIcon {
+  width?: number;
+  height?: number;
+  src: string;
+  className?: string;
+}
+
+const ImageIcon = ({ width, height, src, className }: ImageIcon) => {
+  return (
+    <span
+      className={`icon-image d-inline-block align-text-bottom ${className}`}
+      style={{
+        width: `${width ?? 24}px`,
+        height: `${height ?? 24}px`,
+        WebkitMaskImage: `url(${src})`,
+        WebkitMaskRepeat: 'no-repeat',
+        WebkitMaskSize: 'contain',
+      }}
+    ></span>
+  );
+};
+
+export default ImageIcon;

src/components/LanguagesSwitcher/index.tsx

@@ -9,7 +9,7 @@ const LanguagesSwitcher = () => {
   const currentLanguage = listLanguages.filter((lang: any) => lang.value == i18n.language);
 
   return (
-    <div className="ms-auto d-flex align-items-center">
+    <div className="ms-auto me-3 d-flex align-items-center fs-sm">
       <ComponentSVG
         url="/assets/images/language-icon-light.svg"
         color="var(--aesirxui-body-color)"
@@ -30,6 +30,8 @@ const LanguagesSwitcher = () => {
           i18n.changeLanguage(data.value);
         }}
         defaultValue={currentLanguage}
+        minWidth={120}
+        isLanguageSelect={true}
       />
     </div>
   );

src/components/Menu/index.tsx

@@ -12,6 +12,7 @@ import arrow from '../../assets/images/arrow-right.svg';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useAppContext } from 'providers';
 // import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
+import { history } from 'routes/history';
 
 const Menu = ({ dataMenu, title = '' }: any) => {
   const { settingRoutes } = useAppContext();
@@ -47,12 +48,11 @@ const Menu = ({ dataMenu, title = '' }: any) => {
       document.getElementById('wr_list_menu')?.classList.add('wr_list_menu');
     }
   };
-
   return (
     <>
       {dataMenu && (
         <nav className="main-menu py-24 mt-0">
-          <p className="menu_title text-white fs-14 mb-0 text-uppercase pb-2">
+          <p className="menu_title text-dark-blue fs-14 mb-0 text-uppercase pb-2">
             {t(title ? title : has ? 'txt_menu_setting' : 'txt_main_menu')}
           </p>
           <ul id="wr_list_menu" className="list-unstyled mb-0 pt-md-1">
@@ -103,14 +103,20 @@ const Menu = ({ dataMenu, title = '' }: any) => {
                         onClick={() => handleOpen(menuListkey)}
                         className={`d-flex align-items-center justify-content-center rounded link_menu text-decoration-none text-break px-24 py-16 mx-3 shadow-none text-white ${
                           isOpenCollapse === menuListkey.toString() ||
-                          isOpenCollapse?.includes(menuListkey + '-')
+                          isOpenCollapse?.includes(menuListkey + '-') ||
+                          menuList?.submenu?.find(
+                            (item: any) => item?.link === history.location.pathname
+                          )
                             ? 'active'
                             : ''
                         }`}
                         aria-controls="wr_list_submenu"
                         aria-expanded={
                           isOpenCollapse === menuListkey.toString() ||
-                          isOpenCollapse?.includes(menuListkey + '-')
+                          isOpenCollapse?.includes(menuListkey + '-') ||
+                          menuList?.submenu?.find(
+                            (item: any) => item?.link === history.location.pathname
+                          )
                         }
                       >
                         <span
@@ -134,7 +140,10 @@ const Menu = ({ dataMenu, title = '' }: any) => {
                       <Collapse
                         in={
                           isOpenCollapse === menuListkey.toString() ||
-                          isOpenCollapse?.includes(menuListkey + '-')
+                          isOpenCollapse?.includes(menuListkey + '-') ||
+                          menuList?.submenu?.find(
+                            (item: any) => item?.link === history.location.pathname
+                          )
                         }
                       >
                         <ul id="wr_list_submenu" className="list-unstyled">