Merge pull request #538 from syscoin/feat/transactions-new-layout

feat(transactions): new layout
syscoin · Feb 1, 2024 · 8c503ca · 8c503ca
2 parents e0aa7a2 + 236b402
commit 8c503ca
Show file tree

Hide file tree

Showing 17 changed files with 372 additions and 298 deletions.
diff --git a/palette.js b/palette.js
@@ -104,11 +104,13 @@ module.exports = {
   },
   alpha: {
     whiteAlpha100: 'rgba(255, 255, 255, 0.06)',
+    whiteAlpha200: 'rgba(255, 255, 255, 0.08)',
     whiteAlpha300: 'rgba(255, 255, 255, 0.16)',
   },
 
   alpha: {
     whiteAlpha300: '#FFFFFF29',
+    whiteAlpha200: 'rgba(255, 255, 255, 0.08)',
   },
 
   extraColors: {

diff --git a/source/assets/images/signature.svg b/source/assets/images/signature.svg
diff --git a/source/assets/locales/en.json b/source/assets/locales/en.json
@@ -477,7 +477,7 @@
     "withCurrentNetwork": "With current network conditions, we recommend a fee of",
     "sys": "SYS",
     "signatureRequest": "SIGNATURE REQUEST",
-    "signatureRequestWasRequest": "Signature request successfully submitted",
+    "signatureRequestWasRequest": "SIGNATURE SUCCESSFULLY SUBMITTED!",
     "theDappHas": "The Dapp has your signed psbt",
     "youCanCheckYour": "You can check your request under activity on your home screen.",
     "signatureRequestFailed": "Signature request failed",
@@ -489,7 +489,8 @@
     "inputsOrOutputs": "Inputs or outputs are empty. Maybe you don't have enough funds for this transaction.",
     "requestFailed": "request failed",
     "noDescriptionProvided": "No description provided",
-    "requestSuccessfullySubmitted": "request successfully submitted"
+    "requestSuccessfullySubmitted": "request successfully submitted",
+    "confirmToProceed": "Confirm to proceed the transaction!"
   },
   "switchNetwork": {
     "connectedOn": "You are connected on",
@@ -509,5 +510,6 @@
   },
   "walletSeedPhrasePage": {
     "keepSeedPhrase": "Keep your seed phrase secret!",
-    "anyoneWithThisInfo": "Anyone with this information is able to steal your funds."}
+    "anyoneWithThisInfo": "Anyone with this information is able to steal your funds."
+  }
 }
diff --git a/source/assets/locales/es.json b/source/assets/locales/es.json
@@ -477,7 +477,7 @@
     "withCurrentNetwork": "Con las condiciones actuales de la red, recomendamos una comisión de",
     "sys": "SYS",
     "signatureRequest": "SOLICITUD DE FIRMA",
-    "signatureRequestWasRequest": "La solicitud de firma se envió correctamente",
+    "signatureRequestWasRequest": "La solicitud se envió correctamente",
     "theDappHas": "La Dapp tiene su PSBT firmado",
     "youCanCheckYour": "Puede verificar su solicitud en la sección de actividad de su pantalla de inicio.",
     "signatureRequestFailed": "La solicitud de firma falló",
@@ -489,7 +489,8 @@
     "inputsOrOutputs": "Las entradas o salidas están vacías. Tal vez no tiene suficientes fondos para esta transacción.",
     "requestFailed": "solicitud fallida",
     "noDescriptionProvided": "No se proporcionó una descripción",
-    "requestSuccessfullySubmitted": "solicitud enviada con éxito"
+    "requestSuccessfullySubmitted": "solicitud enviada con éxito",
+    "confirmToProceed": "¡Confirma para continuar con la transacción!"
   },
   "switchNetwork": {
     "connectedOn": "Estás conectado en",
@@ -511,4 +512,4 @@
     "keepSeedPhrase": "¡Mantén en secreto tu seed frase!",
     "anyoneWithThisInfo": "Cualquier persona con esta información puede robar tus fondos."
   }
-}
+}
diff --git a/source/assets/locales/pt-br.json b/source/assets/locales/pt-br.json
@@ -357,7 +357,8 @@
     "inputsOrOutputs": "Inputs or outputs are empty. Maybe you don't have enough funds for this transaction.",
     "requestFailed": "request failed",
     "noDescriptionProvided": "No description provided",
-    "requestSuccessfullySubmitted": "request successfully submitted"
+    "requestSuccessfullySubmitted": "request successfully submitted",
+    "confirmToProceed": "Confirme para continuar a transacao"
   },
   "switchNetwork": {
     "connectedOn": "Você está conectado em",
@@ -379,4 +380,4 @@
     "keepSeedPhrase": "Mantenha sua seed em segredo!",
     "anyoneWithThisInfo": "Qualquer pessoa com estas informações pode roubar seus fundos."
   }
-}
+}
diff --git a/source/components/Icon/Icon.tsx b/source/components/Icon/Icon.tsx
@@ -59,12 +59,12 @@ const svgIcons = {
   ArrowDownLoad: '../../assets/icons/ArrowDownLoad.svg',
   ArrowLeft: '../../assets/icons/ArrowLeft.svg',
   Close: '../../assets/icons/closeBigger.svg',
-  EditTx: '../../assets/icons/editTx.svg',
+  EditTx: '/assets/icons/editTx.svg',
   externalLink: '../../assets/icons/externalExplorer.svg',
   SpeedUp: '../../assets/icons/speedUp.svg',
   Trash: '../../assets/icons/trashIcon.svg',
   warning: '../../assets/icons/yellowWarn.svg',
-  Copy: '../../assets/icons/copy.svg',
+  Copy: '/assets/icons/copy.svg',
 };
 
 interface IIcon {

diff --git a/source/components/Layout/Layout.tsx b/source/components/Layout/Layout.tsx
@@ -35,8 +35,8 @@ export const Layout: FC<ILayout> = ({
 
   return (
     <div
-      className={`scrollbar-styled relative w-full min-w-popup max-h-popup min-h-popup text-brand-white bg-brand-blue700  ${
-        isSwitchChainPage ? '' : 'overflow-y-scroll'
+      className={`scrollbar-styled remove-scrollbar relative w-full min-w-popup max-h-popup min-h-popup text-brand-white bg-brand-blue700  ${
+        isSwitchChainPage ? '' : 'overflow-y-auto'
       }`}
     >
       {!titleOnly && canGoBack && !isHardwareWalletPage && <Header />}

diff --git a/source/components/Modal/WarningBaseModal.tsx b/source/components/Modal/WarningBaseModal.tsx
@@ -147,6 +147,37 @@ export const TokenSuccessfulyAdded = ({
   onClose,
   show = true,
   title,
+  buttonText,
+}: IDefaultModal) => {
+  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={onClose}
+        >
+          {buttonText}
+        </Button>
+      </div>
+    </ModalBase>
+  );
+};
+
+export const TimeSetSuccessfuly = ({
+  phraseOne,
+  onClose,
+  show = true,
+  title,
 }: IDefaultModal) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -173,7 +204,7 @@ export const TokenSuccessfulyAdded = ({
   );
 };
 
-export const TimeSetSuccessfuly = ({
+export const SignatureRequestSuccessfullySubmit = ({
   phraseOne,
   onClose,
   show = true,

diff --git a/source/pages/Send/Confirm.tsx b/source/pages/Send/Confirm.tsx
@@ -875,30 +875,43 @@ export const SendConfirm = () => {
       ) ||
       Boolean(isBitcoinBased && basicTxValues) ? (
         <div className="flex flex-col items-center justify-center w-full">
-          <p className="flex flex-col items-center justify-center text-center font-rubik">
-            <span className="text-brand-royalblue font-poppins font-thin">
-              {`${basicTxValues.token?.isNft ? 'TokenID' : t('send.send')}`}
-            </span>
-
-            <span>
-              {!basicTxValues.token?.isNft ? (
-                <>
-                  {`${basicTxValues.amount} ${' '} ${
-                    basicTxValues.token
-                      ? basicTxValues.token.symbol
-                      : activeNetwork.currency?.toUpperCase()
-                  }`}
-                </>
-              ) : (
-                <>{basicTxValues.amount}</>
-              )}
-            </span>
-          </p>
+          {basicTxValues.token?.isNft ? (
+            <p className="flex flex-col items-center justify-center text-center font-rubik">
+              TokenID
+              <span>
+                {!basicTxValues.token?.isNft ? (
+                  <>
+                    {`${basicTxValues.amount} ${' '} ${
+                      basicTxValues.token
+                        ? basicTxValues.token.symbol
+                        : activeNetwork.currency?.toUpperCase()
+                    }`}
+                  </>
+                ) : (
+                  <>{basicTxValues.amount}</>
+                )}
+              </span>
+            </p>
+          ) : (
+            <div className="flex flex-col mb-6 text-center">
+              <div className="relative w-[50px] h-[50px] bg-brand-pink200 rounded-[100px] flex items-center justify-center mb-2">
+                <img
+                  className="relative w-[30px] h-[30px]"
+                  src={'/assets/icons/ArrowUp.svg'}
+                  alt="Icon"
+                />
+              </div>
+              <p className="text-brand-gray200 text-xs font-light">
+                {t('buttons.send')}
+              </p>
+              <p className="text-white text-base">{basicTxValues.amount}</p>
+            </div>
+          )}
 
-          <div className="flex flex-col gap-3 items-start justify-center mt-4 px-4 py-2 w-full text-left text-sm divide-bkg-3 divide-dashed divide-y">
-            <p className="flex flex-col pt-2 w-full text-brand-white font-poppins font-thin">
+          <div className="flex flex-col p-6 bg-brand-blue600 items-start justify-center w-[400px] relative left-[-1%] text-left text-sm divide-alpha-whiteAlpha300 divide-dashed divide-y rounded-[20px]">
+            <p className="flex flex-col py-2 w-full text-xs text-brand-gray200 font-poppins font-normal">
               {t('send.from')}
-              <span className="text-brand-royalblue text-xs">
+              <span className="text-white text-xs">
                 <Tooltip
                   content={basicTxValues.sender}
                   childrenClassName="flex"
@@ -910,17 +923,18 @@ export const SendConfirm = () => {
                     >
                       <Icon
                         wrapperClassname="flex items-center justify-center"
-                        name="copy"
+                        name="Copy"
+                        isSvg
                         className="px-1 text-brand-white hover:text-fields-input-borderfocus"
                       />
                     </IconButton>
                   }
                 </Tooltip>
               </span>
             </p>
-            <p className="flex flex-col pt-2 w-full text-brand-white font-poppins font-thin">
+            <p className="flex flex-col py-2 w-full text-xs text-brand-gray200 font-poppins font-normal">
               {t('send.to')}
-              <span className="text-brand-royalblue text-xs">
+              <span className="text-white text-xs">
                 <Tooltip
                   content={basicTxValues.receivingAddress}
                   childrenClassName="flex"
@@ -932,7 +946,8 @@ export const SendConfirm = () => {
                     >
                       <Icon
                         wrapperClassname="flex items-center justify-center"
-                        name="copy"
+                        name="Copy"
+                        isSvg
                         className="px-1 text-brand-white hover:text-fields-input-borderfocus"
                       />
                     </IconButton>
@@ -942,9 +957,9 @@ export const SendConfirm = () => {
             </p>
 
             <div className="flex flex-row items-center justify-between w-full">
-              <p className="flex flex-col pt-2 w-full text-brand-white font-poppins font-thin">
+              <p className="flex flex-col py-2 w-full text-xs text-brand-gray200 font-poppins font-normal">
                 {t('send.estimatedGasFee')}
-                <span className="text-brand-royalblue text-xs">
+                <span className="text-white text-xs">
                   {isBitcoinBased
                     ? getFormattedFee(basicTxValues.fee)
                     : !isBitcoinBased && isEIP1559Compatible === false
@@ -955,21 +970,25 @@ export const SendConfirm = () => {
               {!isBitcoinBased && !basicTxValues.token?.isNft
                 ? !isBitcoinBased &&
                   isEIP1559Compatible && (
-                    <span
-                      className="w-fit relative bottom-1 hover:text-brand-deepPink100 text-brand-royalblue text-xs cursor-pointer"
+                    <div
+                      className="hover:text-fields-input-borderfocus"
                       onClick={() => setIsOpenEditFeeModal(true)}
                     >
-                      {t('buttons.edit')}
-                    </span>
+                      <Icon
+                        name="EditTx"
+                        isSvg
+                        className="px-2 text-brand-white hover:text-fields-input-borderfocus"
+                      />{' '}
+                    </div>
                   )
                 : null}
             </div>
 
-            <p className="flex flex-col pt-2 w-full text-brand-white font-poppins font-thin">
+            <p className="flex flex-col py-2 w-full text-brand-white font-poppins font-thin">
               {!basicTxValues.token?.isNft ? (
                 <>
                   Total ({t('send.amountAndFee')})
-                  <span className="text-brand-royalblue text-xs">
+                  <span className="text-white text-xs">
                     {isBitcoinBased
                       ? `${
                           Number(basicTxValues.fee) +
@@ -991,7 +1010,7 @@ export const SendConfirm = () => {
               ) : (
                 <>
                   Token ID
-                  <span className="text-brand-royalblue text-xs">
+                  <span className="text-white text-xs">
                     {basicTxValues.amount}
                   </span>
                 </>
@@ -1002,18 +1021,12 @@ export const SendConfirm = () => {
           <div className="flex items-center justify-around py-8 w-full">
             <Button
               type="button"
-              className="xl:p-18 flex items-center justify-center h-8 text-brand-white text-base bg-button-secondary hover:bg-button-secondaryhover border border-button-secondary rounded-full transition-all duration-300 xl:flex-none"
+              className="xl:p-18 h-[40px] w-[164px] flex items-center justify-center text-brand-white text-base bg-transparent hover:opacity-60 border border-white rounded-[100px] transition-all duration-300 xl:flex-none"
               id="send-btn"
               onClick={() => {
                 navigate('/home');
               }}
             >
-              <Icon
-                name="arrow-up"
-                className="w-5"
-                wrapperClassname="mr-2 flex items-center"
-                rotate={45}
-              />
               {t('buttons.cancel')}
             </Button>
 
@@ -1023,18 +1036,12 @@ export const SendConfirm = () => {
                 loading
                   ? 'opacity-60 cursor-not-allowed'
                   : 'opacity-100 hover:opacity-90'
-              } xl:p-18 h-8 flex items-center justify-center text-brand-white text-base bg-button-primary hover:bg-button-primaryhover border border-button-primary rounded-full transition-all duration-300 xl:flex-none`}
+              } xl:p-18 h-[40px] w-[164px] flex items-center justify-center text-brand-blue400 text-base bg-white hover:opacity-60 rounded-[100px] transition-all duration-300 xl:flex-none`}
               id="receive-btn"
               loading={loading}
               onClick={handleConfirm}
             >
-              {!loading ? (
-                <Icon
-                  name="arrow-down"
-                  className="w-5"
-                  wrapperClassname="flex items-center mr-2"
-                />
-              ) : (
+              {loading && (
                 <Icon
                   name="loading"
                   color="#fff"