Merge pull request #554 from syscoin/feat/custom-rpc

feat(CustomRpc): new layout
syscoin · Mar 5, 2024 · db50ee4 · db50ee4
2 parents cf5ecd4 + 0081f47
commit db50ee4
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 126 deletions.
diff --git a/source/assets/locales/en.json b/source/assets/locales/en.json
@@ -164,7 +164,8 @@
   "titles": {
     "assetDetails": "ASSET DETAILS",
     "transactionDetails": "TRANSACTION DETAILS",
-    "importWallet": "Import wallet"
+    "importWallet": "Import wallet",
+    "congratulations": "CONGRATULATIONS!"
   },
   "import": {
     "importingYourAccount": "Importing your wallet seed automatically import a wallet associated with this seed phrase.",

diff --git a/source/assets/locales/es.json b/source/assets/locales/es.json
@@ -164,7 +164,8 @@
   "titles": {
     "assetDetails": "DETALLES DEL ACTIVO",
     "transactionDetails": "DETALLES DE LA TRANSACCIÓN",
-    "importWallet": "Importar billetera"
+    "importWallet": "Importar billetera",
+    "congratulations": "FELICIDADES!"
   },
   "import": {
     "importingYourAccount": "Importar tu frase semilla de billetera automáticamente importará una billetera asociada a esta frase semilla.",

diff --git a/source/assets/locales/pt-br.json b/source/assets/locales/pt-br.json
@@ -379,5 +379,11 @@
   "walletSeedPhrasePage": {
     "keepSeedPhrase": "Mantenha sua seed em segredo!",
     "anyoneWithThisInfo": "Qualquer pessoa com estas informações pode roubar seus fundos."
+  },
+  "titles": {
+    "assetDetails": "DETALLES DEL ACTIVO",
+    "transactionDetails": "DETALLES DE LA TRANSACCIÓN",
+    "importWallet": "Importar billetera",
+    "congratulations": "PARABÉNS!"
   }
 }
diff --git a/source/assets/styles/custom-input-normal.css b/source/assets/styles/custom-input-normal.css
@@ -27,8 +27,8 @@
   font-weight: 400;
   line-height: normal;
   color: #fff;
-  top: 55%;
-  right: 40px;
+  top: 52%;
+  right: 23px;
   transform: translateY(-50%);
 }
 
@@ -42,7 +42,16 @@
   font-weight: 400;
   line-height: normal;
   color: #fff;
-  top: 55%;
-  right: 40px;
+  top: 51%;
+  right: 23px;
   transform: translateY(-50%);
 }
+
+.custom-input-normal .ant-input-suffix .anticon-loading {
+  position: absolute;
+  top: 35%;
+  right: 28px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+}
diff --git a/source/components/Modal/WarningBaseModal.tsx b/source/components/Modal/WarningBaseModal.tsx
@@ -322,3 +322,35 @@ export const CreatedAccountSuccessfully = ({
     </ModalBase>
   );
 };
+
+export const RPCSuccessfullyAdded = ({
+  phraseOne,
+  onClose,
+  show = true,
+  title,
+}: IDefaultModal) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  return (
+    <ModalBase onClose={onClose} show={show}>
+      <div className="rounded-t-[50px] w-screen flex flex-col align-bottom justify-end items-center bg-brand-blue400 shadow-md">
+        <div className="bg-[#476daa] w-full py-5 rounded-t-[50px]">
+          <h1 className="text-white font-medium text-base">{title}</h1>
+        </div>
+        <div className="flex flex-col pt-6 pb-7 px-6 text-white text-left text-sm font-normal w-[94%]">
+          <p>{phraseOne}</p>
+        </div>
+
+        <Button
+          id="btn-ok"
+          type="submit"
+          className="bg-white w-[22rem] h-10 text-brand-blue200 text-base mb-12 font-base font-medium rounded-2xl"
+          onClick={() => navigate('/settings/networks/edit')}
+        >
+          {t('buttons.ok')}
+        </Button>
+      </div>
+    </ModalBase>
+  );
+};
diff --git a/source/pages/Home/Home.tsx b/source/pages/Home/Home.tsx
@@ -97,6 +97,7 @@ export const Home = () => {
   const closeModal = () => {
     setShowModal(false);
   };
+
   const formatFiatAmmount = useMemo(() => {
     if (isTestnet) {
       return null;

diff --git a/source/pages/Send/SendEth.tsx b/source/pages/Send/SendEth.tsx
@@ -275,7 +275,9 @@ export const SendEth = () => {
                       : '/assets/icons/errorIcon.svg'
                   }
                   alt={isValidAddress === true ? 'Success' : 'Error'}
-                  className="absolute right-8 top-[15px]"
+                  className={`absolute right-8 ${
+                    isValidAmount === true ? 'top-[12.5px]' : 'top-[11.5px]'
+                  }`}
                 />
               )}
             </div>
@@ -455,7 +457,9 @@ export const SendEth = () => {
                           : '/assets/icons/errorIcon.svg'
                       }
                       alt={isValidAmount === true ? 'Success' : 'Error'}
-                      className="absolute right-[5.5rem] top-[-28.5px]"
+                      className={`absolute right-[2rem] ${
+                        isValidAmount === true ? 'top-[-26.5px]' : 'top-[-25px]'
+                      }`}
                     />
                   )}
                 </div>

diff --git a/source/pages/Settings/CustomRPC.tsx b/source/pages/Settings/CustomRPC.tsx
@@ -10,10 +10,13 @@ import { validateEthRpc, validateSysRpc } from '@pollum-io/sysweb3-network';
 
 import checkAtIcon from 'assets/icons/checkAt.svg';
 import { Button, Layout, Tooltip } from 'components/index';
+import { StatusModal } from 'components/Modal/StatusModal';
+import { RPCSuccessfullyAdded } from 'components/Modal/WarningBaseModal';
 import { useUtils } from 'hooks/index';
 import { RootState } from 'state/store';
 import { ICustomRpcParams } from 'types/transactions';
 import { getController } from 'utils/browser';
+import { NetworkType } from 'utils/types';
 
 const CustomRPCView = () => {
   const { state }: { state: any } = useLocation();
@@ -22,6 +25,9 @@ const CustomRPCView = () => {
   const [loading, setLoading] = useState(false);
   const [isUrlValid, setIsUrlValid] = useState(false);
   const [urlFieldValue, setUrlFieldValue] = useState('');
+  const [addedRpc, setAddedRpc] = useState<boolean>(false);
+  const [showModal, setShowModal] = useState(false);
+  const [errorModalMessage, setErrorModalMessage] = useState<string>('');
   const [lastRpcChainIdSearched, setLastRpcChainIdSearched] = useState<
     number | null
   >(null);
@@ -35,10 +41,24 @@ const CustomRPCView = () => {
 
   const [form] = useForm();
 
+  const switchBallStyle = isSyscoinRpc
+    ? 'translate-x-6 bg-brand-deepPink100'
+    : 'translate-x-1  bg-brand-blue200';
+
+  const inputHiddenOrNotStyle = isSyscoinRpc ? 'hidden' : 'relative';
+
+  const modalMessageOnSuccessful = state
+    ? t('settings.rpcSucessfullyEdited')
+    : t('settings.rpcSucessfullyAdded');
+
   const populateForm = (field: string, value: number | string) => {
     if (!form.getFieldValue(field)) form.setFieldsValue({ [field]: value });
   };
 
+  const closeModal = () => {
+    setShowModal(false);
+  };
+
   const onSubmit = async (data: ICustomRpcParams) => {
     setLoading(true);
 
@@ -50,28 +70,20 @@ const CustomRPCView = () => {
     try {
       if (!state) {
         await controller.wallet.addCustomRpc(customRpc);
-
-        alert.success(t('settings.rpcSucessfullyAdded'));
-
         setLoading(false);
-
-        navigate('/settings/networks/edit');
-
+        setAddedRpc(true);
         return;
       }
 
       await controller.wallet.editCustomRpc(customRpc, state.selected);
-
-      alert.success(t('settings.rpcSucessfullyEdited'));
-
       setLoading(false);
-
-      navigate('/settings/networks/edit');
+      setAddedRpc(true);
     } catch (error: any) {
       alert.removeAll();
-      alert.error(error.message);
-
+      setAddedRpc(false);
+      setShowModal(true);
       setLoading(false);
+      setErrorModalMessage(error.message);
     }
   };
 
@@ -102,16 +114,28 @@ const CustomRPCView = () => {
     const fieldErrors = form.getFieldError('url');
     if (urlFieldValue && fieldErrors.length > 0) {
       alert.removeAll();
-      alert.error(t('settings.invalidRpcUrl'));
+      setErrorModalMessage(t('settings.invalidRpcUrl'));
     }
   }, [urlFieldValue]);
 
   const handleConnect = async (data: ICustomRpcParams) => {
     await wallet.setActiveNetwork(data, String(activeNetwork.chainId));
   };
-
   return (
     <Layout title={state?.isEditing ? 'EDIT RPC' : t('settings.customRpc')}>
+      <RPCSuccessfullyAdded
+        show={addedRpc}
+        title={t('titles.congratulations')}
+        phraseOne={modalMessageOnSuccessful}
+        onClose={() => navigate('/settings/networks/edit')}
+      />
+      <StatusModal
+        status="error"
+        title="Erro"
+        description={errorModalMessage}
+        onClose={closeModal}
+        show={showModal}
+      />
       <Form
         form={form}
         validateMessages={{ default: '' }}
@@ -140,11 +164,11 @@ const CustomRPCView = () => {
                 isBitcoinBased ? 'text-brand-pink200' : 'text-brand-blue200'
               }`}
             >
-              {isBitcoinBased ? 'UTXO' : 'NEVM'} Network
+              {isBitcoinBased ? NetworkType.UTXO : NetworkType.EVM} Network
             </p>
           ) : (
             <div className="flex gap-x-2 mb-4 text-xs">
-              <p className="text-brand-royalblue text-xs">Ethereum</p>
+              <p className="text-brand-blue200 text-xs">EVM</p>
               <Tooltip
                 content={
                   !!state ? 'Cant change type of network while editing' : ''
@@ -153,21 +177,17 @@ const CustomRPCView = () => {
                 <Switch
                   checked={isSyscoinRpc}
                   onChange={() => setIsSyscoinRpc(!isSyscoinRpc)}
-                  className="relative inline-flex items-center w-9 h-4 border border-brand-royalblue rounded-full"
+                  className="relative inline-flex items-center w-9 h-4 border border-white rounded-full"
                   disabled={!!state}
                 >
                   <span className="sr-only">Syscoin Network</span>
                   <span
-                    className={`${
-                      isSyscoinRpc
-                        ? 'translate-x-6 bg-brand-royalblue'
-                        : 'translate-x-1 bg-brand-deepPink100'
-                    } inline-block w-2 h-2 transform rounded-full`}
+                    className={`${switchBallStyle} inline-block w-2 h-2 transform rounded-full`}
                   />
                 </Switch>
               </Tooltip>
 
-              <p className="text-brand-deepPink100 text-xs">Syscoin</p>
+              <p className="text-brand-deepPink100 text-xs">UTXO</p>
             </div>
           )}
         </Form.Item>
@@ -189,7 +209,7 @@ const CustomRPCView = () => {
             placeholder={`${t('settings.label')} ${
               isSyscoinRpc ? `(${t('settings.label')})` : ''
             }`}
-            className="custom-input-password relative"
+            className="custom-input-normal relative"
           />
         </Form.Item>
 
@@ -308,7 +328,7 @@ const CustomRPCView = () => {
           <Input
             type="text"
             placeholder={`${isSyscoinRpc ? 'Explorer' : 'RPC URL'}`}
-            className="custom-input-password relative"
+            className="custom-input-normal relative"
           />
         </Form.Item>
 
@@ -327,9 +347,7 @@ const CustomRPCView = () => {
             type="text"
             disabled={isInputDisabled}
             placeholder="Chain ID"
-            className={`${
-              isSyscoinRpc ? 'hidden' : 'relative'
-            } custom-input-password `}
+            className={`${inputHiddenOrNotStyle} custom-input-normal `}
           />
         </Form.Item>
 
@@ -347,9 +365,7 @@ const CustomRPCView = () => {
           <Input
             type="text"
             placeholder={t('settings.symbol')}
-            className={`${
-              isSyscoinRpc ? 'hidden' : 'relative'
-            } custom-input-password relative`}
+            className={`${inputHiddenOrNotStyle} custom-input-normal relative`}
           />
         </Form.Item>
 
@@ -367,18 +383,23 @@ const CustomRPCView = () => {
           <Input
             type="text"
             placeholder={t('settings.explorer')}
-            className={`${
-              isSyscoinRpc ? 'hidden' : 'relative'
-            } custom-input-password `}
+            className={`${inputHiddenOrNotStyle} custom-input-normal `}
           />
         </Form.Item>
         {state?.isEditing ? (
           <div
             className="flex justify-center items-center gap-2 cursor-pointer"
             onClick={() => (window.location.href = 'https://chainlist.org/')}
           >
-            <img src={checkAtIcon} alt="Check at chainlist" />
-            <p className="underline text-center text-white font-poppins text-sm">
+            <img
+              src={checkAtIcon}
+              alt="Check at chainlist"
+              onClick={() => (window.location.href = 'https://chainlist.org/')}
+            />
+            <p
+              className="underline text-center text-white font-poppins text-sm"
+              onClick={() => (window.location.href = 'https://chainlist.org/')}
+            >
               Check chainlist
             </p>
           </div>
@@ -404,7 +425,7 @@ const CustomRPCView = () => {
             </Button>
           </div>
         ) : (
-          <div className="relative bottom-0 md:static">
+          <div className="absolute bottom-10 md:static">
             <Button
               className="xl:p-18 h-[40px] w-[352px] flex items-center justify-center text-brand-blue400 text-base bg-white hover:opacity-60 rounded-[100px] transition-all duration-300 xl:flex-none"
               type="submit"