Merge remote-tracking branch 'upstream/3-0-stable' into 3-0-stable

* upstream/3-0-stable:
  Fix: handle state update for RecentTrades component (#744)
  Fix: Update tslint.json
  Fix: Handle destination tag in beneficiaries creation flow
  Fix: OB background row height (#739)
  fix: input label and filter input, locked login button background styles (#733)

web/mocks/api/v2/barong/resource/otp/generate_qrcode/OPTIONS.mock

@@ -1,4 +1,6 @@
-HTTP/2 200
-access-control-allow-origin: *
-access-control-allow-methods: GET, POST, PUT, PATCH, DELETE
-access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
+HTTP/2 200 
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, POST, DELETE, PUT, PATCH, OPTIONS, HEAD
+Access-Control-Max-Age: 3600
+Access-Control-Allow-Credentials: true
+Access-Control-Allow-Headers: content-type, x-csrf-token

web/mocks/api/v2/barong/resource/otp/generate_qrcode/POST.mock

@@ -1,7 +1,9 @@
 HTTP/2 201
-access-control-allow-origin: *
-access-control-allow-methods: GET, POST, PUT, PATCH, DELETE
-access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
-Access-Control-Allow-Headers: *
+Content-Type: application/json; charset=utf-8
+Access-Control-Allow-Origin: *
+Access-Control-Allow-Methods: GET, POST, DELETE, PUT, PATCH, OPTIONS, HEAD
+Access-Control-Max-Age: 3600
+Access-Control-Allow-Credentials: true
+Access-Control-Allow-Headers: content-type, x-csrf-token
 
 {"auth":null,"data":{"barcode":"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","url":"otpauth://totp/Microkube:john@barong.io?algorithm=SHA1\u0026digits=6\u0026issuer=Microkube\u0026period=30\u0026secret=JDP7L27SU7SUBL4UU2NRYE4HQDGB5AN4"},"lease_duration":0,"lease_id":"","renewable":false,"warnings":null,"wrap_info":null}

web/mocks/api/v2/barong/resource/users/me/GET.mock

@@ -6,7 +6,7 @@ access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept, Au
 {
     "username": "Turbo3000",
     "email": "john@barong.io",
-    "level": 2,
+    "level": 3,
     "otp": true,
     "role": "superadmin",
     "state": "active",

web/mocks/api/v2/peatio/account/balances/GET.mock

@@ -58,8 +58,13 @@ Access-Control-Allow-Credentials: true
     },
     {
         "currency":"xrp",
-        "balance":"0",
-        "locked":"0"
+        "balance":"1000",
+        "locked":"0",
+        "deposit_address": {
+            "currencies": ["xrp"],
+            "address": "rPEPPER7kfTD9w2To4CQk6UCfuHM9c6GDY?dt=102079",
+            "state": "active"
+        }
     },
     {
         "currency":"krw",

web/mocks/api/v2/peatio/account/balances/xrp/GET.mock

@@ -7,6 +7,11 @@ Access-Control-Allow-Credentials: true
 
 {
     "currency":"xrp",
-    "balance":"0",
-    "locked":"0"
+    "balance":"1000",
+    "locked":"0",
+    "deposit_address": {
+        "currencies": ["xrp"],
+        "address": "rPEPPER7kfTD9w2To4CQk6UCfuHM9c6GDY?dt=102079",
+        "state": "active"
+    }
 }

web/mocks/api/v2/peatio/public/currencies/GET.mock

@@ -137,7 +137,7 @@ Access-Control-Allow-Credentials: true
     "withdraw_limit_24h": "100.0",
     "withdraw_limit_72h": "200.0",
     "deposit_enabled": true,
-    "withdrawal_enabled": false,
+    "withdrawal_enabled": true,
     "base_factor": 1000000,
     "precision": 8
   },

web/src/components/Beneficiaries/Beneficiaries.pcss

@@ -292,7 +292,7 @@
       top: 110px;
       transition: 0.2s;
       width: 100%;
-      z-index: 100;
+      z-index: 10000;
 
       &__item,
       .item {
@@ -386,7 +386,7 @@
         width: 100%;
 
         &__label {
-          color: var(--primary-cta-color);
+          color: var(--primary-text-color);
           font-size: 12px;
           font-style: normal;
           font-weight: 600;

web/src/components/Beneficiaries/BeneficiariesActivateModal.tsx

@@ -86,14 +86,17 @@ const BeneficiariesActivateModalComponent: React.FC<Props> = (props: Props) => {
                 <CustomInput
                     type="text"
                     label={formatMessage({ id: `page.body.wallets.beneficiaries.confirmationModal.body.${field}` })}
-                    placeholder={formatMessage({ id: `page.body.wallets.beneficiaries.confirmationModal.body.${field}` })}
+                    placeholder={confirmationModalCodeFocused ? '' : formatMessage({
+                        id: `page.body.wallets.beneficiaries.confirmationModal.body.${field}`,
+                    })}
                     defaultLabel={field}
-                    handleChangeInput={value => handleChangeFieldValue(field, value)}
+                    handleChangeInput={(value) => handleChangeFieldValue(field, value)}
                     inputValue={confirmationModalCode}
                     handleFocusInput={() => handleChangeFieldFocus(`${field}Focused`)}
                     classNameLabel="cr-email-form__label"
                     classNameInput="cr-email-form__input"
                     autoFocus={true}
+                    labelVisible={confirmationModalCodeFocused}
                 />
             </div>
         );

web/src/components/Beneficiaries/BeneficiariesAddModal.tsx

@@ -131,7 +131,7 @@ const BeneficiariesAddModalComponent: React.FC<Props> = (props: Props) => {
         dispatch(beneficiariesCreate(payload));
         handleClearModalsInputs();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [coinAddress, coinBeneficiaryName, coinDescription, currency]);
+    }, [coinAddress, coinBeneficiaryName, coinDescription, currency, coinDestinationTag, isRipple]);
 
     const getState = React.useCallback(key => {
         switch (key) {
@@ -298,8 +298,9 @@ const BeneficiariesAddModalComponent: React.FC<Props> = (props: Props) => {
     }, []);
 
     const renderAddAddressModalBodyItem = React.useCallback((field: string, optional?: boolean) => {
+        const focused = Boolean(getState(`${field}Focused`));
         const focusedClass = classnames('cr-email-form__group', {
-            'cr-email-form__group--focused': getState(`${field}Focused`),
+            'cr-email-form__group--focused': focused,
             'cr-email-form__group--optional': optional,
         });
 
@@ -308,7 +309,7 @@ const BeneficiariesAddModalComponent: React.FC<Props> = (props: Props) => {
                 <CustomInput
                     type="text"
                     label={formatMessage({ id: `page.body.wallets.beneficiaries.addAddressModal.body.${field}` })}
-                    placeholder={formatMessage({ id: `page.body.wallets.beneficiaries.addAddressModal.body.${field}` })}
+                    placeholder={focused ? '' : formatMessage({ id: `page.body.wallets.beneficiaries.addAddressModal.body.${field}` })}
                     defaultLabel={field}
                     handleChangeInput={value => handleChangeFieldValue(field, value)}
                     // @ts-ignore
@@ -317,6 +318,7 @@ const BeneficiariesAddModalComponent: React.FC<Props> = (props: Props) => {
                     classNameLabel="cr-email-form__label"
                     classNameInput="cr-email-form__input"
                     autoFocus={field === 'coinAddress' || field === 'fiatName'}
+                    labelVisible={focused}
                 />
             </div>
         );

web/src/components/Blur/Blur.pcss

@@ -7,7 +7,7 @@
   justify-content: center;
   position: absolute;
   width: 100%;
-  z-index: 10;
+  z-index: 10000;
 
   &__content {
     align-items: center;

web/src/components/ChangePassword/index.tsx

@@ -128,36 +128,42 @@ export const ChangePasswordComponent = props => {
 
         return (
             <div className="pg-mobile-change-password__body" onKeyPress={handleEnterPress}>
-                {!props.hideOldPassword &&
+                {!props.hideOldPassword && (
                     <div className={oldPasswordClass}>
                         <CustomInput
                             type="password"
-                            label={intl.formatMessage({id: 'page.body.profile.header.account.content.password.old'})}
-                            placeholder={intl.formatMessage({id: 'page.body.profile.header.account.content.password.old'})}
+                            label={intl.formatMessage({ id: 'page.body.profile.header.account.content.password.old' })}
+                            placeholder={oldPasswordFocus ? '' : intl.formatMessage({
+                                id: 'page.body.profile.header.account.content.password.old',
+                            })}
                             defaultLabel="Old password"
                             handleChangeInput={setOldPassword}
                             inputValue={oldPassword}
                             handleFocusInput={() => setOldPasswordFocus(!oldPasswordFocus)}
                             classNameLabel="cr-email-form__label"
                             classNameInput="cr-email-form__input"
                             autoFocus={true}
+                            labelVisible={oldPasswordFocus}
                         />
                     </div>
-                }
+                )}
                 <div className={newPasswordClass}>
                     <CustomInput
                         type="password"
-                        label={intl.formatMessage({id: 'page.body.profile.header.account.content.password.new'})}
-                        placeholder={intl.formatMessage({id: 'page.body.profile.header.account.content.password.new'})}
+                        label={intl.formatMessage({ id: 'page.body.profile.header.account.content.password.new' })}
+                        placeholder={newPasswordFocus ? '': intl.formatMessage({
+                            id: 'page.body.profile.header.account.content.password.new',
+                        })}
                         defaultLabel="New password"
                         handleChangeInput={handleChangeNewPassword}
                         inputValue={newPassword}
                         handleFocusInput={handleFocusNewPassword}
                         classNameLabel="cr-email-form__label"
                         classNameInput="cr-email-form__input"
                         autoFocus={false}
+                        labelVisible={newPasswordFocus}
                     />
-                    {newPassword ?
+                    {newPassword ? (
                         <PasswordStrengthMeter
                             minPasswordEntropy={passwordMinEntropy()}
                             currentPasswordEntropy={props.currentPasswordEntropy}
@@ -167,20 +173,24 @@ export const ChangePasswordComponent = props => {
                             passwordErrorThirdSolved={passwordErrorThirdSolved}
                             passwordPopUp={passwordPopUp}
                             translate={translate}
-                        /> : null}
+                        />
+                    ) : null}
                 </div>
                 <div className={confirmPasswordClass}>
                     <CustomInput
                         type="password"
-                        label={intl.formatMessage({id: 'page.body.profile.header.account.content.password.conf'})}
-                        placeholder={intl.formatMessage({id: 'page.body.profile.header.account.content.password.conf'})}
+                        label={intl.formatMessage({ id: 'page.body.profile.header.account.content.password.conf' })}
+                        placeholder={confirmPasswordFocus ? '' : intl.formatMessage({
+                            id: 'page.body.profile.header.account.content.password.conf',
+                        })}
                         defaultLabel="Password confirmation"
                         handleChangeInput={setConfirmationPassword}
                         inputValue={confirmationPassword}
                         handleFocusInput={() => setConfirmPasswordFocus(!confirmPasswordFocus)}
                         classNameLabel="cr-email-form__label"
                         classNameInput="cr-email-form__input"
                         autoFocus={false}
+                        labelVisible={confirmPasswordFocus}
                     />
                 </div>
             </div>

web/src/components/CustomInput/CustomInput.pcss

@@ -1,22 +1,23 @@
 .custom-input {
+  margin-bottom: 8px;
   input {
+    background: var(--body-background-color) !important;
     border-color: var(--input-border-color);
   }
 
   label {
-    background: var(--input-background-color);
+    background: var(--body-background-color) !important;
     font-size: calc(var(--gap) * 2);
-    left: 5%;
-    margin-top: -8px;
+    left: 12px !important;
+    margin-top: -8px  !important;
     padding: 0 calc(var(--gap) * 0.7);
     position: absolute;
-    top: 0;
-    z-index: 5;
+    top: 0 !important;
+    z-index: 5000;
   }
 
   input,
   input:focus {
-    background: var(--input-background-color) !important;
     box-shadow: none;
     color: var(--input-text-color);
   }

web/src/components/Dropdown/Dropdown.pcss

@@ -1,5 +1,5 @@
 .cr-dropdown {
-  background-color: var(--input-background-color);
+  background-color: var(--body-background-color);
   outline: none;
   position: relative;
 
@@ -18,7 +18,7 @@
 
     &-toggle {
       align-items: center;
-      background: var(--input-background-color) !important;
+      background: transparent !important;
       border: 1px solid var(--input-border-color);
       color: var(--input-placeholder-color);
       display: flex;
@@ -61,6 +61,7 @@
       width: 100%;
       box-shadow: 0px 6px 12px var(--header-shadow-color-level-1);
       border: none;
+      z-index: 10000;
     }
 
     &-item {

web/src/components/EmailForm/index.tsx

@@ -119,14 +119,15 @@ export const EmailForm: React.FC<EmailFormProps> = (props) => {
                         <CustomInput
                             type="email"
                             label={emailLabel || 'Email'}
-                            placeholder={emailLabel || 'Email'}
+                            placeholder={emailFocused ? '' : emailLabel || 'Email'}
                             defaultLabel="Email"
                             handleChangeInput={props.handleInputEmail}
                             inputValue={email}
                             handleFocusInput={props.handleFieldFocus}
                             classNameLabel="cr-email-form__label"
                             classNameInput="cr-email-form__input"
                             autoFocus={!isMobileDevice}
+                            labelVisible={emailFocused}
                         />
                         {emailError && <div className="cr-email-form__error">{emailError}</div>}
                     </div>
@@ -136,7 +137,7 @@ export const EmailForm: React.FC<EmailFormProps> = (props) => {
                             block={true}
                             type="button"
                             disabled={isButtonDisabled()}
-                            onClick={e => handleClick(e as any)}
+                            onClick={(e) => handleClick(e as any)}
                             size="lg"
                             variant="primary">
                             {isLoading ? 'Loading...' : buttonLabel ? buttonLabel : 'Send'}

web/src/components/FilterInput/FilterInput.pcss

@@ -13,6 +13,7 @@
   }
 
   &__input {
+    background-color: var(--body-background-color) !important;
     border: none;
     border-bottom: 1px solid var(--base-2);
     color: var(--base-2);

web/src/components/InternalTransfer/InternalInput.tsx

@@ -76,14 +76,15 @@ export const InternalTransferInput = (props: InternalTransferInputProps) => {
             <CustomInput
                 type="text"
                 label={translate(`page.body.internal.transfer.label.${props.field}`)}
-                placeholder={translate(`page.body.internal.transfer.placeholder.${props.field}`)}
+                placeholder={inputFocused ? '' : translate(`page.body.internal.transfer.placeholder.${props.field}`)}
                 defaultLabel={props.field}
                 handleChangeInput={handleChange}
                 inputValue={inputValue}
                 handleFocusInput={() => setInputFocused(!inputFocused)}
                 classNameLabel="cr-email-form__label"
                 classNameInput="cr-email-form__input"
                 autoFocus={props.field === 'username' || props.field === 'uid'}
+                labelVisible={inputFocused}
             />
         </div>
     );

web/src/components/InternalTransfer/InternalTransfer.pcss

@@ -93,7 +93,7 @@
 
       .cr-email-form {
         &__label {
-          margin-top: 18px;
+          margin-top: 18px !important;
         }
 
         &__group {

web/src/components/LockedComponent/LockedComponent.pcss

@@ -22,11 +22,13 @@
 
   &__btn-icon {
     path {
-      fill: var(--button-secondary-cta-text-color);
+      fill: var(--button-primary-cta-text-color);
     }
   }
 
   &__btn-content {
+    background: var(--button-primary-cta-background-color);
+    color: var(--button-primary-cta-text-color);
     padding: 10px;
     font-size: 14px;
   }

web/src/components/OrderForm/OrderForm.pcss

@@ -94,6 +94,17 @@
       }
     }
 
+    &__fieldset__label {
+      background: var(--body-background-color) !important;
+      font-size: calc(var(--gap) * 2);
+      left: 12px !important;
+      margin-top: -8px !important;
+      padding: 0 calc(var(--gap) * 0.7);
+      position: absolute;
+      top: 0 !important;
+      z-index: 5000;
+    }
+
     &__input {
       .cr-order-input__price {
         background: transparent !important;

web/src/components/OrderForm/index.tsx

@@ -284,9 +284,9 @@ export class OrderForm extends React.PureComponent<OrderFormProps, OrderFormStat
                 return (
                     <div className="cr-order-input">
                         <fieldset className="cr-order-input__fieldset">
-                            <legend className={'cr-order-input__fieldset__label'}>
+                            <label className="cr-order-input__fieldset__label">
                                 {priceText}
-                            </legend>
+                            </label>
                             <div className="cr-order-input__fieldset__input">
                                 &asymp;<span className="cr-order-input__fieldset__input__price">
                                     {handleSetValue(Decimal.format(safePrice, currentMarketBidPrecision, ','), '0')}