feat(send-evm): new layout

.envrc

@@ -0,0 +1 @@
+REACT_APP_SEED_PEACE_GLOBE

palette.js

@@ -109,7 +109,7 @@ module.exports = {
   },
 
   alpha: {
-    whiteAlpha300: '#FFFFFF29',
+    whiteAlpha300: 'rgba(255, 255, 255, 0.16)',
     whiteAlpha200: 'rgba(255, 255, 255, 0.08)',
   },
 

source/assets/styles/custom-autolock-input.css

@@ -1,6 +1,6 @@
 .custom-autolock-input {
   display: flex;
-  width: 352px !important;
+  width: 352px;
   height: 40px;
   padding: 11px 73px;
   align-items: center;
@@ -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: #162742;
+}

source/assets/styles/custom-import-token-input.css

@@ -0,0 +1,42 @@
+.custom-import-input .ant-input {
+  display: flex;
+  width: 352px;
+  height: 40px;
+  padding: 12px 55px 12px 15px;
+  align-items: center;
+  border-radius: 100px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background-color: #07152a !important;
+  font-size: 12px;
+}
+
+.custom-import-input .ant-input-suffix .anticon-close-circle {
+  content: url('../icons/errorIcon.svg');
+  position: absolute;
+  top: 55%;
+  right: 28px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.custom-import-input .ant-input-suffix .anticon-check-circle {
+  content: url('../icons/successIcon.svg');
+  position: absolute;
+  top: 53%;
+  right: 28px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.custom-import-input .ant-input-suffix .anticon-loading {
+  position: absolute;
+  top: 40%;
+  right: 28px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+}

source/assets/styles/custom-receive-input.css

@@ -0,0 +1,33 @@
+.custom-receive-input {
+  display: flex;
+  width: 352px;
+  height: 40px;
+  align-items: center;
+  border-radius: 100px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background-color: #07152a;
+  font-size: 12px;
+  padding: 12px 55px 12px 15px;
+}
+
+.custom-receive-input .ant-input-suffix .anticon-close-circle {
+  content: url('../icons/errorIcon.svg');
+  position: absolute;
+  top: 55%;
+  right: 80px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.custom-receive-input .ant-input-suffix .anticon-check-circle {
+  content: url('../icons/successIcon.svg');
+  position: absolute;
+  top: 53%;
+  right: 40px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+}

source/assets/styles/custom-send-utxo-input.css

@@ -0,0 +1,78 @@
+.sender-custom-input .ant-input {
+  display: flex;
+  width: 352px;
+  height: 40px;
+  padding: 11px 20px;
+  border-radius: 100px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background-color: #07152a !important;
+  font-size: 12px;
+}
+
+#with-max-button,
+.sender-custom-input .ant-input {
+  width: 244px;
+  padding: 10px 70px;
+}
+
+#fee-input,
+.sender-custom-input .ant-input {
+  width: 352px;
+  color: #fff !important;
+  padding: 11px 20px;
+}
+
+.sender-custom-input .ant-input-suffix .anticon-close-circle {
+  content: url('../icons/errorIcon.svg');
+  position: absolute;
+  top: 18.5rem;
+  right: 45px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.sender-custom-input .ant-input-suffix .anticon-check-circle {
+  content: url('../icons/successIcon.svg');
+  position: absolute;
+  top: 18.5rem;
+  right: 45px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.value-custom-input .ant-input {
+  display: flex;
+  width: 244px;
+  height: 40px;
+  padding: 11px 20px;
+  border-radius: 100px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background-color: #07152a !important;
+  font-size: 12px;
+}
+
+.value-custom-input .ant-input-suffix .anticon-close-circle {
+  content: url('../icons/errorIcon.svg');
+  position: absolute;
+  top: 1.2rem;
+  right: 23px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.value-custom-input .ant-input-suffix .anticon-check-circle {
+  content: url('../icons/successIcon.svg');
+  position: absolute;
+  top: 1.2rem;
+  right: 23px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+}

source/components/Fee/Fee.tsx

@@ -2,25 +2,23 @@ import { Form, Input } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Icon, Tooltip } from '..';
+import { Tooltip } from '..';
 
 export const Fee = ({
   recommend,
   disabled,
   form,
+  fiatValue,
 }: {
   disabled: boolean;
+  fiatValue?: string;
   form: any;
   recommend?: number;
 }) => {
   const { t } = useTranslation();
   return (
     <Tooltip content={disabled ? t('components.useRecommendedFee') : ''}>
-      <div className="disabled flex w-80 cursor-not-allowed md:w-96">
-        <span className="inline-flex items-center px-5 bg-fields-input-primary border-2 border-fields-input-primary rounded-l-full">
-          <Icon name="verified" />
-        </span>
-
+      <div className="disabled flex cursor-not-allowed md:w-96">
         <Form.Item
           name="fee"
           className="w-full"
@@ -32,17 +30,25 @@ export const Fee = ({
             },
           ]}
         >
-          <Input
-            disabled={disabled}
-            className="mixed-border-input"
-            id="fee-input"
-            type="number"
-            placeholder="Fee network"
-            value={recommend}
-            onChange={(event) =>
-              form.setFieldsValue({ fee: event.target.value })
-            }
-          />
+          <div className="relative">
+            <Input
+              disabled={disabled}
+              className="sender-custom-input"
+              id="fee-input"
+              type="number"
+              placeholder="Fee network"
+              value={recommend}
+              onChange={(event) =>
+                form.setFieldsValue({ fee: event.target.value })
+              }
+            />
+            <p className="flex absolute right-[10%] top-[32%] text-xs flex-col items-center justify-center p-0 max-w-xs text-center text-brand-gray200 sm:w-full md:my-4">
+              <span>
+                {'≈ '}
+                {fiatValue}
+              </span>
+            </p>
+          </div>
         </Form.Item>
       </div>
     </Tooltip>

source/components/Header/AccountHeader.tsx

@@ -414,6 +414,7 @@ export const AccountHeader: React.FC = () => {
   const controller = getController();
   const isLedger = activeAccount.type === KeyringAccountType.Ledger;
   const url = browser.runtime.getURL('app.html');
+
   useEffect(() => {
     const placeholder = document.querySelector('.add-identicon');
     if (!placeholder) return;

source/components/Icon/Icon.tsx

@@ -57,6 +57,7 @@ const icons = {
 const svgIcons = {
   ArrowUpBoldIcon: '../../assets/icons/ArrowUp.svg',
   ArrowDownLoad: '../../assets/icons/ArrowDownLoad.svg',
+  ArrowDown: '/assets/icons/ArrowDown.svg',
   ArrowLeft: '../../assets/icons/ArrowLeft.svg',
   Close: '../../assets/icons/closeBigger.svg',
   EditTx: '/assets/icons/editTx.svg',
@@ -65,6 +66,7 @@ const svgIcons = {
   Trash: '../../assets/icons/trashIcon.svg',
   warning: '../../assets/icons/yellowWarn.svg',
   Copy: '/assets/icons/copy.svg',
+  Info: '/assets/icons/info.svg',
 };
 
 interface IIcon {

source/components/Modal/EditFeeModalBase.tsx

@@ -0,0 +1,58 @@
+import { Dialog, Transition } from '@headlessui/react';
+import React, { Fragment, ReactNode } from 'react';
+
+interface IModal {
+  children: ReactNode;
+  className?: string;
+  onClose?: () => any;
+  show?: boolean;
+}
+
+export const EditFeeModalBase = ({
+  children,
+  className = '',
+  onClose,
+  show = true,
+}: IModal) => (
+  <Transition appear show={show} as={Fragment}>
+    <Dialog
+      as="div"
+      className={`fixed z-[9999] inset-0 overflow-y-auto ${className}`}
+      onClose={() => {
+        if (onClose) onClose();
+      }}
+    >
+      <div className="fixed z-0 -inset-0 w-full bg-brand-black bg-opacity-50 transition-all duration-300 ease-in-out" />
+
+      <div className="min-h-screen text-center">
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Dialog.Overlay className="fixed inset-0" />
+        </Transition.Child>
+
+        <span className="inline-block align-middle h-screen" aria-hidden="true">
+          &#8203;
+        </span>
+
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0 scale-95"
+          enterTo="opacity-100 scale-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100 scale-100"
+          leaveTo="opacity-0 scale-95"
+        >
+          {children}
+        </Transition.Child>
+      </div>
+    </Dialog>
+  </Transition>
+);

source/components/Modal/Modal.tsx

@@ -44,7 +44,7 @@ export const Modal = ({
   <Transition appear show={show} as={Fragment}>
     <Dialog
       as="div"
-      className={`fixed z-10 inset-0 overflow-y-auto ${className}`}
+      className={`fixed z-[9999] inset-0 overflow-y-auto ${className}`}
       onClose={() => {
         if (onClose) onClose();
       }}