feat(SendEvm): new layout of step 2 edit fee

syscoin · Jan 25, 2024 · 2189aa8 · 2189aa8
1 parent 1a71d07
commit 2189aa8
Show file tree

Hide file tree

Showing 12 changed files with 453 additions and 438 deletions.
diff --git a/source/assets/styles/custom-autolock-input.css b/source/assets/styles/custom-autolock-input.css
@@ -9,3 +9,16 @@
   background-color: #07152a !important;
   font-size: 12px;
 }
+
+.custom-gas-input {
+  display: flex;
+  width: 352px;
+  height: 40px;
+  padding: 11px 20px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  border-radius: 100px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background: #07152a;
+}
diff --git a/source/components/Modal/WarningBaseModal.tsx b/source/components/Modal/WarningBaseModal.tsx
@@ -234,3 +234,34 @@ export const SignatureRequestSuccessfullySubmit = ({
     </ModalBase>
   );
 };
+
+export const TxSuccessful = ({
+  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%] gap-5">
+          <p>{phraseOne}</p>
+        </div>
+        <Button
+          id="unlock-btn"
+          type="submit"
+          className="bg-white w-[22rem] h-10 text-brand-blue200 text-base mb-12 font-base font-medium rounded-2xl"
+          onClick={() => navigate('/home')}
+        >
+          {t('buttons.ok')}
+        </Button>
+      </div>
+    </ModalBase>
+  );
+};
diff --git a/source/pages/Send/Approve.tsx b/source/pages/Send/Approve.tsx
@@ -32,7 +32,7 @@ import { fetchGasAndDecodeFunction } from 'utils/fetchGasAndDecodeFunction';
 import { verifyZerosInBalanceAndFormat, ellipsis, logError } from 'utils/index';
 
 import { EditApprovedAllowanceValueModal } from './EditApprovedAllowanceValueModal';
-import { EditPriorityModal } from './EditPriorityModal';
+import { EditPriority } from './EditPriority';
 
 export const ApproveTransactionComponent = () => {
   const { wallet } = getController();
@@ -349,14 +349,6 @@ export const ApproveTransactionComponent = () => {
         description={t('send.changeFields')}
         onClose={() => setHaveError(false)}
       />
-      <EditPriorityModal
-        showModal={isOpenPriority}
-        setIsOpen={setIsOpenPriority}
-        customFee={customFee}
-        setCustomFee={setCustomFee}
-        setHaveError={setHaveError}
-        fee={fee}
-      />
       <EditApprovedAllowanceValueModal
         showModal={openEditFeeModal}
         host={host}

diff --git a/source/pages/Send/Confirm.tsx b/source/pages/Send/Confirm.tsx
@@ -17,6 +17,7 @@ import {
   Tooltip,
   IconButton,
 } from 'components/index';
+import { TxSuccessful } from 'components/Modal/WarningBaseModal';
 import { useUtils } from 'hooks/index';
 import { RootState } from 'state/store';
 import { ICustomFeeParams, IFeeState, ITxState } from 'types/transactions';
@@ -31,8 +32,6 @@ import {
   verifyNetworkEIP1559Compatibility,
 } from 'utils/index';
 
-import { EditPriorityModal } from './EditPriorityModal';
-
 export const SendConfirm = () => {
   const { wallet, callGetLatestUpdateForAccount } = getController();
   const { t } = useTranslation();
@@ -830,10 +829,10 @@ export const SendConfirm = () => {
 
   return (
     <Layout title={t('send.confirm')} canGoBack={true}>
-      <DefaultModal
+      <TxSuccessful
         show={confirmed}
         title={t('send.txSuccessfull')}
-        description={t('send.txSuccessfullMessage')}
+        phraseOne={t('send.txSuccessfullMessage')}
         onClose={() => {
           wallet.sendAndSaveTransaction(confirmedTx);
           wallet.setIsLastTxConfirmed(activeNetwork.chainId, false);
@@ -858,15 +857,6 @@ export const SendConfirm = () => {
         description={t('send.changeFields')}
         onClose={() => setHaveError(false)}
       />
-
-      <EditPriorityModal
-        showModal={isOpenEditFeeModal}
-        setIsOpen={setIsOpenEditFeeModal}
-        customFee={customFee}
-        setCustomFee={setCustomFee}
-        setHaveError={setHaveError}
-        fee={fee}
-      />
       {Boolean(
         !isBitcoinBased && basicTxValues && fee && isEIP1559Compatible
       ) ||
@@ -973,7 +963,16 @@ export const SendConfirm = () => {
                   isEIP1559Compatible && (
                     <span
                       className="hover:text-fields-input-borderfocus pb-[3px]"
-                      onClick={() => setIsOpenEditFeeModal(true)}
+                      onClick={() =>
+                        navigate('edit/gas', {
+                          state: {
+                            customFee: customFee,
+                            setCustomFee: setCustomFee,
+                            fee: fee,
+                            setHaveError: setHaveError,
+                          },
+                        })
+                      }
                     >
                       <Icon
                         name="EditTx"