added i18next language lib and some style fixes

src/components/popupConnectEx/popupConnectEx.tsx

@@ -1,10 +1,10 @@
 import "../../styles/styles.css";
 import "./popupConnect.css";
 import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 export const PopupConnectEx: React.FC<any> = ({
   setVisible,
-  text,
   onConnect,
   logo,
   setValue,
@@ -12,6 +12,7 @@ export const PopupConnectEx: React.FC<any> = ({
   isLoading,
 }) => {
   const history = useHistory();
+  const { t } = useTranslation();
 
   const handleConnect = () => {
     onConnect().then((res: any) => {
@@ -28,7 +29,7 @@ export const PopupConnectEx: React.FC<any> = ({
     <div className="popup__container">
       <div className="popup__content">
         <img alt="logoRC" className="logo__popup_ex" src={logo}></img>
-        <p className="popup__title">{text.caption}</p>
+        <p className="popup__title">{t("popup-connect-title")}</p>
         <input
           value={value}
           onChange={(e) => setValue(e.target.value)}
@@ -42,7 +43,7 @@ export const PopupConnectEx: React.FC<any> = ({
             !!value || isLoading ? "button" : "button button__disabled"
           }
         >
-          {text.button}
+          {t("popup-connect-btn-continue")}
         </button>
         <span className="line"></span>
         <button
@@ -54,7 +55,7 @@ export const PopupConnectEx: React.FC<any> = ({
           }
           className="popup__caption"
         >
-          {text.caption1}
+          {t("popup-connect-btn-mode")}
         </button>
       </div>
     </div>