Release v1.0.2 beta.7

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opex",
-  "version": "v1.0.2-beta.6",
+  "version": "v1.0.2-beta.7",
   "homepage": "",
   "private": true,
   "dependencies": {

public/assets/locales/en/translation.json

@@ -79,7 +79,8 @@
     "/panel/settings/profile": "User Profile",
     "/panel/settings/security": "Security",
     "/panel/settings/personalization": "Customize",
-    "/panel/settings/authentication": "Identity Verification"
+    "/panel/settings/authentication": "Identity Verification",
+    "/panel/settings/api-key": "API KEY"
   },
   "orderStatus": {
     "NEW": "New Order",
@@ -472,6 +473,41 @@
     "defaultReferenceCryptoCurrency": "Reference Cryptocurrency",
     "save": "Save"
   },
+  "APIKey": {
+    "title": "API Key",
+    "create": "Create API Key",
+    "enable": "Enable API Key",
+    "disable": "Disable API Key",
+    "delete": "Delete API Key",
+    "label": "Title",
+    "secret": "Secret",
+    "success": "API Key successfully created.",
+    "apiKey": "API Key",
+    "expiration": "Validity",
+    "allowedIPs": "Allowed IPs",
+    "ONE_MONTH": "One month",
+    "THREE_MONTHS": "Three months",
+    "SIX_MONTHS": "Six months",
+    "ONE_YEAR": "One year",
+    "content": "Enter the following information to create an API Key.",
+    "selectExpiration": "Select expiration time",
+    "allowedIPsExample": "IP 1 , IP 2 , IP 3 , ...",
+    "noActiveAPIKey": "API Key not created.",
+    "understand": "I understand!",
+    "warning": "Be careful, the secret cannot be recovered, and if you forget it, you must create a new API Key!",
+    "copied": "Copied",
+    "enableButton": "Enable",
+    "disableButton": "Disable",
+    "deleteButton": "Delete",
+    "successEnable": "Successfully enabled.",
+    "successDisable": "Disabled successfully.",
+    "failedEnable": "Failed to enable, please try again!",
+    "failedDisable": "Failed to disable, please try again!",
+    "successDelete": "Successfully deleted!",
+    "failedDelete": "Error deleting, please try again!",
+    "emptyLabel": "Label cannot be empty!",
+    "reachedLimit": "Reached API key limit. Maximum number of API keys is 10."
+  },
   "login": {
     "title": "Login/Register",
     "wrongPassword": "Username or password is incorrect!",

public/assets/locales/fa/translation.json

@@ -79,7 +79,8 @@
     "/panel/settings/profile": "مشخصات کاربری",
     "/panel/settings/security": "امنیت",
     "/panel/settings/personalization": "سفارشی‌سازی",
-    "/panel/settings/authentication": "احراز هویت کاربری"
+    "/panel/settings/authentication": "احراز هویت کاربری",
+    "/panel/settings/api-key": "API KEY"
   },
   "orderStatus": {
     "NEW": "جاری شده",
@@ -472,6 +473,41 @@
     "defaultReferenceCryptoCurrency": "رمز ارز مرجع",
     "save": "ذخیره"
   },
+  "APIKey": {
+    "title": "API Key",
+    "create": "ایجاد API Key",
+    "enable": "فعال کردن API Key",
+    "disable": "غیرفعال کردن API Key",
+    "delete": "حذف API Key",
+    "label": "عنوان",
+    "secret": "Secret",
+    "success": "API Key با موفقیت ایجاد شد.",
+    "apiKey": "API Key",
+    "expiration": "اعتبار",
+    "allowedIPs": "IP های مجاز",
+    "ONE_MONTH": "یک ماه",
+    "THREE_MONTHS": "سه ماه",
+    "SIX_MONTHS": "شش ماه",
+    "ONE_YEAR": "یک سال",
+    "content": "برای ایجاد API Key اطلاعات زیر را وارد کنید.",
+    "selectExpiration": "مدت زمان اعتبار را انتخاب کنید",
+    "allowedIPsExample": "IP 1 , IP 2 , IP 3 , ...",
+    "noActiveAPIKey": "API Key ایجاد نشده است.",
+    "understand": "متوجه شدم!",
+    "warning": "دقت کنید secret قابل بازیابی نمی باشد و در صورت فراموش کردن آن باید API Key جدید ایجاد کنید!",
+    "copied": "کپی شد",
+    "enableButton": "فعال کردن",
+    "disableButton": "غیر فعال کردن",
+    "deleteButton": "حذف",
+    "successEnable": "با موفقیت فعال شد.",
+    "successDisable": "با موفقیت غیر فعال شد.",
+    "failedEnable": "خطا در فعال‌سازی، لطفاً دوباره تلاش کنید!",
+    "failedDisable": "خطا در غیر فعال‌سازی، لطفاً دوباره تلاش کنید!",
+    "successDelete": "با موفقیت حذف شد!",
+    "failedDelete": "خطا در حذف، لطفاً دوباره تلاش کنید!",
+    "emptyLabel": "Label نمی‌تواند خالی باشد!",
+    "reachedLimit": " حداکثر ده  API Keyمجاز است!"
+  },
   "login": {
     "title": "ورود/ثبت نام",
     "wrongPassword": "ایمیل یا رمز عبور صحیح نمی باشد!",

src/assets/fontIcon/opex-icon/config.json

@@ -905,6 +905,24 @@
       "search": [
         "grid"
       ]
+    },
+    {
+      "uid": "csuoy0rqoun3unhsgjoy2uumpldzbfmt",
+      "css": "trash",
+      "code": 518,
+      "src": "typicons"
+    },
+    {
+      "uid": "2cc73cc335f054682c04fe63439c4dcb",
+      "css": "trash-1",
+      "code": 519,
+      "src": "linecons"
+    },
+    {
+      "uid": "3ab2abf6f936d3e53ee8c184cedaed82",
+      "css": "trash-2",
+      "code": 520,
+      "src": "elusive"
     }
   ]
 }

src/assets/fontIcon/opex-icon/css/opex-icon-codes.css

@@ -104,4 +104,7 @@
 .icon-right-open-1:before { content: '\0203'; } /* 'ȃ' */
 .icon-row:before { content: '\0204'; } /* 'Ȅ' */
 .icon-grid:before { content: '\0205'; } /* 'ȅ' */
+.icon-trash:before { content: '\0206'; } /* 'Ȇ' */
+.icon-trash-1:before { content: '\0207'; } /* 'ȇ' */
+.icon-trash-2:before { content: '\0208'; } /* 'Ȉ' */
 .icon-cancel-circled2:before { content: '\e801'; } /* '' */

src/assets/fontIcon/opex-icon/css/opex-icon-ie7-codes.css

@@ -104,4 +104,7 @@
 .icon-right-open-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȃ '); }
 .icon-row { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȅ '); }
 .icon-grid { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȅ '); }
+.icon-trash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȇ '); }
+.icon-trash-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȇ '); }
+.icon-trash-2 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȉ '); }
 .icon-cancel-circled2 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

src/assets/fontIcon/opex-icon/css/opex-icon-ie7.css

@@ -115,4 +115,7 @@
 .icon-right-open-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȃ '); }
 .icon-row { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȅ '); }
 .icon-grid { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȅ '); }
+.icon-trash { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȇ '); }
+.icon-trash-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȇ '); }
+.icon-trash-2 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȉ '); }
 .icon-cancel-circled2 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

src/assets/fontIcon/opex-icon/css/opex-icon.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'opex-icon';
-  src: url('../font/opex-icon.eot?5214088');
-  src: url('../font/opex-icon.eot?5214088#iefix') format('embedded-opentype'),
-       url('../font/opex-icon.woff2?5214088') format('woff2'),
-       url('../font/opex-icon.woff?5214088') format('woff'),
-       url('../font/opex-icon.ttf?5214088') format('truetype'),
-       url('../font/opex-icon.svg?5214088#opex-icon') format('svg');
+  src: url('../font/opex-icon.eot?12564336');
+  src: url('../font/opex-icon.eot?12564336#iefix') format('embedded-opentype'),
+       url('../font/opex-icon.woff2?12564336') format('woff2'),
+       url('../font/opex-icon.woff?12564336') format('woff'),
+       url('../font/opex-icon.ttf?12564336') format('truetype'),
+       url('../font/opex-icon.svg?12564336#opex-icon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'opex-icon';
-    src: url('../font/opex-icon.svg?5214088#opex-icon') format('svg');
+    src: url('../font/opex-icon.svg?12564336#opex-icon') format('svg');
   }
 }
 */
@@ -159,4 +159,7 @@
 .icon-right-open-1:before { content: '\0203'; } /* 'ȃ' */
 .icon-row:before { content: '\0204'; } /* 'Ȅ' */
 .icon-grid:before { content: '\0205'; } /* 'ȅ' */
+.icon-trash:before { content: '\0206'; } /* 'Ȇ' */
+.icon-trash-1:before { content: '\0207'; } /* 'ȇ' */
+.icon-trash-2:before { content: '\0208'; } /* 'Ȉ' */
 .icon-cancel-circled2:before { content: '\e801'; } /* '' */

src/assets/fontIcon/opex-icon/demo.html

@@ -146,11 +146,11 @@
     }
     @font-face {
       font-family: 'opex-icon';
-      src: url('./font/opex-icon.eot?58960368');
-      src: url('./font/opex-icon.eot?58960368#iefix') format('embedded-opentype'),
-           url('./font/opex-icon.woff?58960368') format('woff'),
-           url('./font/opex-icon.ttf?58960368') format('truetype'),
-           url('./font/opex-icon.svg?58960368#opex-icon') format('svg');
+      src: url('./font/opex-icon.eot?80708282');
+      src: url('./font/opex-icon.eot?80708282#iefix') format('embedded-opentype'),
+           url('./font/opex-icon.woff?80708282') format('woff'),
+           url('./font/opex-icon.ttf?80708282') format('truetype'),
+           url('./font/opex-icon.svg?80708282#opex-icon') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -578,6 +578,17 @@ <h1>opex-icon <small>font demo</small></h1>
         <div class="span3" title="Code: 0x0205">
           <i class="demo-icon icon-grid">&#x0205;</i> <span class="i-name">icon-grid</span><span class="i-code">0x0205</span>
         </div>
+        <div class="span3" title="Code: 0x0206">
+          <i class="demo-icon icon-trash">&#x0206;</i> <span class="i-name">icon-trash</span><span class="i-code">0x0206</span>
+        </div>
+        <div class="span3" title="Code: 0x0207">
+          <i class="demo-icon icon-trash-1">&#x0207;</i> <span class="i-name">icon-trash-1</span><span class="i-code">0x0207</span>
+        </div>
+        <div class="span3" title="Code: 0x0208">
+          <i class="demo-icon icon-trash-2">&#x0208;</i> <span class="i-name">icon-trash-2</span><span class="i-code">0x0208</span>
+        </div>
+      </div>
+      <div class="row">
         <div class="span3" title="Code: 0xe801">
           <i class="demo-icon icon-cancel-circled2">&#xe801;</i> <span class="i-name">icon-cancel-circled2</span><span class="i-code">0xe801</span>
         </div>

src/index.css

@@ -315,6 +315,11 @@ a {
     display: flex;
 }
 
+.wrap {
+    display: flex;
+    flex-wrap: wrap;
+}
+
 .row {
     display: -webkit-box;
     display: -ms-flexbox;

src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/Settings.js

@@ -6,6 +6,7 @@ import Profile from "./components/Profile/Profile";
 import Security from "./components/Security/Security";
 import Personalization from "./components/Personalization/Personalization";
 import Authentication from "./components/Authentication/Authentication";
+import APIKey from "./components/APIKey/APIKey";
 import {setKYCStatusInitiate} from "../../../../../../../../store/actions";
 
 const Settings = () => {
@@ -23,6 +24,7 @@ const Settings = () => {
                 <Route path={RoutesName.SecurityRelative} element={<Security/>}/>
                 <Route path={RoutesName.PersonalizationRelative} element={<Personalization/>}/>
                 <Route path={RoutesName.AuthenticationRelative} element={<Authentication/>}/>
+                <Route path={RoutesName.APIKeyRelative} element={<APIKey/>}/>
             </Routes>
         </div>
     );

src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/APIKey.js

@@ -0,0 +1,20 @@
+    import React from 'react';
+    import classes from './APIKey.module.css'
+    import {useTranslation} from "react-i18next";
+    import CreateAPIKey from "./components/CreateAPIKey/CreateAPIKey";
+    import APIKeyList from "./components/APIKeyList/APIKeyList";
+
+    const APIKey = () => {
+
+        const {t} = useTranslation();
+
+
+        return (<>
+                <CreateAPIKey/>
+                <APIKeyList/>
+
+            </>
+        );
+    };
+
+    export default APIKey;

src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/components/APIKeyList/APIKeyList.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import classes from './APIKeyList.module.css'
+import {useGetAPIKeyList} from "../../../../../../../../../../../../queries/hooks/useGetAPIKeyList";
+import Loading from "../../../../../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../../../../../components/Error/Error";
+import {useTranslation} from "react-i18next";
+import APIKeyCard from "./components/APIKeyCard/APIKeyCard";
+
+const APIKeyList = () => {
+
+    const {t} = useTranslation();
+
+    const {data, isLoading, error} = useGetAPIKeyList()
+
+
+
+    const content = () => {
+
+        if (isLoading) return <div className={`${classes.container} width-100 card-bg card-border py-5`}>
+            <Loading/>
+        </div>
+        if (error) return <div className={`${classes.container} width-100 card-bg card-border py-5`}>
+
+            <Error/>
+        </div>
+        if (data.length === 0) return <div className={`${classes.container} width-100 card-bg card-border py-5 flex jc-center ai-center`}>
+            <span>{t('APIKey.noActiveAPIKey')}</span>
+
+        </div>
+        else return data.map((data , index) => <APIKeyCard data={data} key={index}/>)
+
+    }
+
+    return (
+
+        content()
+    );
+};
+
+export default APIKeyList;

src/main/Browser/Pages/UserPanel/Sections/Content/components/Settings/components/APIKey/components/APIKeyList/APIKeyList.module.css

@@ -0,0 +1,37 @@
+.container {
+
+}
+
+.thisButton {
+    border-radius: 8px;
+    direction: ltr;
+    text-align: center;
+    font-size: 0.8rem;
+    padding: 1.3vh 0vw;
+    color: var(--textColor);
+    width: 7vw;
+}
+
+.thisButton:hover {
+    background-color: var(--blue);
+}
+
+.enable {
+    background-color: var(--darkGreen);
+}
+
+.disable {
+    background-color: var(--darkRed);
+}
+
+.thisLoading {
+    width: 5vw;
+}
+
+.title {
+    display: none
+}
+
+.titleNav:hover .title {
+    display: block;
+}