feat(CustomRpc): new layout

syscoin · Feb 23, 2024 · 4ab932a · 4ab932a
1 parent e666cf2
commit 4ab932a
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 32 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/Settings/CustomRPC.tsx b/source/pages/Settings/CustomRPC.tsx
@@ -10,6 +10,8 @@ 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';
@@ -22,6 +24,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);
@@ -39,6 +44,10 @@ const CustomRPCView = () => {
     if (!form.getFieldValue(field)) form.setFieldsValue({ [field]: value });
   };
 
+  const closeModal = () => {
+    setShowModal(false);
+  };
+
   const onSubmit = async (data: ICustomRpcParams) => {
     setLoading(true);
 
@@ -50,28 +59,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 +103,32 @@ 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={
+          state
+            ? t('settings.rpcSucessfullyEdited')
+            : t('settings.rpcSucessfullyAdded')
+        }
+        onClose={() => navigate('/settings/networks/edit')}
+      />
+      <StatusModal
+        status="error"
+        title="Erro"
+        description={errorModalMessage}
+        onClose={closeModal}
+        show={showModal}
+      />
       <Form
         form={form}
         validateMessages={{ default: '' }}
@@ -144,7 +161,7 @@ const CustomRPCView = () => {
             </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 +170,21 @@ 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'
+                        ? 'translate-x-6 bg-brand-deepPink100'
+                        : 'translate-x-1  bg-brand-blue200'
                     } 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 +206,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 +325,7 @@ const CustomRPCView = () => {
           <Input
             type="text"
             placeholder={`${isSyscoinRpc ? 'Explorer' : 'RPC URL'}`}
-            className="custom-input-password relative"
+            className="custom-input-normal relative"
           />
         </Form.Item>
 
@@ -329,7 +346,7 @@ const CustomRPCView = () => {
             placeholder="Chain ID"
             className={`${
               isSyscoinRpc ? 'hidden' : 'relative'
-            } custom-input-password `}
+            } custom-input-normal `}
           />
         </Form.Item>
 
@@ -349,7 +366,7 @@ const CustomRPCView = () => {
             placeholder={t('settings.symbol')}
             className={`${
               isSyscoinRpc ? 'hidden' : 'relative'
-            } custom-input-password relative`}
+            } custom-input-normal relative`}
           />
         </Form.Item>
 
@@ -369,7 +386,7 @@ const CustomRPCView = () => {
             placeholder={t('settings.explorer')}
             className={`${
               isSyscoinRpc ? 'hidden' : 'relative'
-            } custom-input-password `}
+            } custom-input-normal `}
           />
         </Form.Item>
         {state?.isEditing ? (
@@ -404,7 +421,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"