feat(limit-order): revamp order flows

apps/kyberswap-interface/src/components/Announcement/Popups/SimplePopup.tsx

@@ -7,7 +7,6 @@ import { AutoColumn } from 'components/Column'
 import { CheckCircle } from 'components/Icons'
 import IconFailure from 'components/Icons/Failed'
 import WarningIcon from 'components/Icons/WarningIcon'
-import { AutoRow } from 'components/Row'
 import useTheme from 'hooks/useTheme'
 import { cn } from 'utils/cn'
 
@@ -40,8 +39,8 @@ export default function SimplePopup({
     type === NotificationType.SUCCESS ? 'text-primary' : type === NotificationType.WARNING ? 'text-warning' : 'text-red'
   const mapIcon = {
     [NotificationType.SUCCESS]: <CheckCircle color={color} size={'20px'} />,
-    [NotificationType.WARNING]: <WarningIcon solid color={color} />,
-    [NotificationType.ERROR]: <IconFailure color={color} />,
+    [NotificationType.WARNING]: <WarningIcon solid color={color} size={20} />,
+    [NotificationType.ERROR]: <IconFailure color={color} size={20} />,
   }
 
   const navigate = useNavigate()
@@ -50,9 +49,9 @@ export default function SimplePopup({
     onRemove?.()
   }
   return (
-    <AutoRow className="flex-nowrap">
-      <div className="pr-2.5">{icon || mapIcon[type]}</div>
-      <AutoColumn className="gap-2">
+    <div className="grid min-w-0 grid-cols-[20px_minmax(0,1fr)] gap-x-4 gap-y-1">
+      <div className="pt-0.5">{icon || mapIcon[type]}</div>
+      <AutoColumn className="min-w-0 gap-1">
         <span className={cn('text-base font-medium', colorClass)}>{title}</span>
         {summary && <span className="text-sm font-normal text-text">{summary}</span>}
         {link && (
@@ -61,6 +60,6 @@ export default function SimplePopup({
           </span>
         )}
       </AutoColumn>
-    </AutoRow>
+    </div>
   )
 }

apps/kyberswap-interface/src/components/Announcement/Popups/TopRightPopup.tsx

@@ -1,6 +1,5 @@
 import { motion } from 'framer-motion'
 import { CSSProperties, useCallback, useEffect, useState } from 'react'
-import { X } from 'react-feather'
 
 import getPopupTopRightDescriptionByType from 'components/Announcement/Popups/PopupTopRightDescriptions'
 import SimplePopup from 'components/Announcement/Popups/SimplePopup'
@@ -16,6 +15,7 @@ import {
 import { useSuccessSound } from 'hooks/useSuccessSound'
 import useTheme from 'hooks/useTheme'
 import { useRemovePopup } from 'state/application/hooks'
+import { CloseIcon } from 'theme'
 
 const delta = typeof window !== 'undefined' ? window.innerWidth + 'px' : '0px'
 
@@ -105,17 +105,17 @@ export default function PopupItem({ popup, hasOverlay }: { popup: PopupItemType;
     <div />
   ) : (
     <div
-      className="relative w-[min(calc(100vw-32px),425px)] overflow-hidden rounded-[10px] [isolation:isolate] max-md:m-auto [&:not(:first-of-type)]:mt-[15px]"
+      className="relative w-[min(calc(100vw-32px),425px)] overflow-hidden rounded-[10px] [isolation:isolate] max-md:m-auto"
       style={wrapperStyle}
     >
       <div className="absolute left-0 top-0 size-full bg-bg2" />
       <div
-        className="relative inline-block w-full py-5 pl-5 pr-3"
+        className="relative inline-block w-full p-4 pr-3"
         style={{ background: getBackgroundColor(theme, notiType) }}
       >
-        <div className="flex justify-between">
+        <div className="flex justify-between gap-2">
           {popupContent}
-          <X onClick={removeThisPopup} className="ml-[10px] min-w-[24px] text-text2 hover:cursor-pointer" />
+          <CloseIcon onClick={removeThisPopup} />
         </div>
         {removeAfterMs && <WrappedAnimatedFader removeAfterMs={removeAfterMs} />}
       </div>

apps/kyberswap-interface/src/components/Announcement/Popups/TransactionPopup.tsx

@@ -209,6 +209,7 @@ const SUMMARY: { [type in TRANSACTION_TYPE]: SummaryFunction } = {
   [TRANSACTION_TYPE.ELASTIC_WITHDRAW_LIQUIDITY]: summaryTypeOnly,
   [TRANSACTION_TYPE.ELASTIC_FORCE_WITHDRAW_LIQUIDITY]: summaryTypeOnly,
 
+  [TRANSACTION_TYPE.FILL_LIMIT_ORDER]: summary2Token,
   [TRANSACTION_TYPE.CANCEL_LIMIT_ORDER]: summaryCancelLimitOrder,
   [TRANSACTION_TYPE.TRANSFER_TOKEN]: summaryTransferToken,
 
@@ -277,19 +278,19 @@ export default function TransactionPopup({ hash, notiType }: { hash: string; not
   const { title, summary } = getSummary(transaction)
 
   return (
-    <div>
-      <div className="flex flex-row flex-nowrap">
-        <div className="pr-4">
-          {success ? <CheckCircle className="text-primary" size={'20px'} /> : <IconFailure className="text-red" />}
-        </div>
-        <AutoColumn className="gap-2">
-          <span className={success ? 'text-base font-medium text-primary' : 'text-base font-medium text-red'}>
-            {title}
-          </span>
-          <span className="text-sm font-normal leading-[1.6] text-text">{summary}</span>
-        </AutoColumn>
+    <div className="grid min-w-0 grid-cols-[20px_minmax(0,1fr)] gap-x-4 gap-y-1">
+      <div className="pt-0.5">
+        {success ? (
+          <CheckCircle className="text-primary" size="20px" />
+        ) : (
+          <IconFailure className="text-red" size={20} />
+        )}
       </div>
-      <HideSmall className="ml-10 mt-2 block">
+      <AutoColumn className="min-w-0 gap-1">
+        <span className={cn('break-words text-base font-medium', success ? 'text-primary' : 'text-red')}>{title}</span>
+        <span className="break-words text-sm font-normal leading-[1.6] text-text">{summary}</span>
+      </AutoColumn>
+      <HideSmall className="col-start-2 block">
         <ExternalLink
           href={getEtherscanLink(chainId, hash, 'transaction')}
           className={cn('text-sm', success ? 'text-primary' : 'text-red')}

apps/kyberswap-interface/src/components/Announcement/Popups/index.tsx

@@ -6,7 +6,7 @@ import SnippetPopup from 'components/Announcement/Popups/SnippetPopup'
 import TopRightPopup from 'components/Announcement/Popups/TopRightPopup'
 import { PopupType, PrivateAnnouncementType } from 'components/Announcement/type'
 import { ButtonEmpty } from 'components/Button'
-import useNotificationLimitOrder from 'components/swapv2/LimitOrder/useNotificationLimitOrder'
+import { useNotificationLimitOrder } from 'components/LimitOrder/hooks/useNotificationLimitOrder'
 import { TIMES_IN_SECS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import {
@@ -103,37 +103,41 @@ export default function Popups() {
   useNotificationLimitOrder()
   const totalTopRightPopup = topRightPopups.length
   const hasTopbarPopup = topPopups.length !== 0
+  const showTopRightPopupActions = totalTopRightPopup >= MAX_NOTIFICATION || totalTopRightPopup > 1
 
   return (
     <>
       {topRightPopups.length > 0 && (
         <div
           className={cn(
-            'fixed right-4 z-[9999] flex flex-col items-end',
-            hasTopbarPopup ? 'top-[156px]' : 'top-[108px]',
+            'fixed right-4 z-[9999] flex flex-col items-end gap-4',
             'max-md:inset-x-0 max-md:items-center',
-            hasTopbarPopup ? 'max-md:top-[170px]' : 'max-md:top-[110px]',
-            hasTopbarPopup ? 'max-sm:top-[170px]' : 'max-sm:top-[70px]',
+            {
+              'top-[136px] max-md:top-[150px] max-sm:top-[150px]': hasTopbarPopup,
+              'top-[88px] max-md:top-[90px] max-sm:top-[50px]': !hasTopbarPopup,
+            },
           )}
         >
-          <div className="flex w-full justify-end gap-2.5 max-md:pr-4">
-            {totalTopRightPopup >= MAX_NOTIFICATION && (
-              <ButtonEmpty
-                onClick={toggleNotificationCenter}
-                className="w-fit rounded-[30px] bg-border px-2.5 py-1 text-[10px] text-text"
-              >
-                <Trans>See All</Trans>
-              </ButtonEmpty>
-            )}
-            {totalTopRightPopup > 1 && (
-              <ButtonEmpty
-                onClick={clearAllTopRightPopup}
-                className="w-fit rounded-[30px] bg-border px-2.5 py-1 text-[10px] text-text"
-              >
-                <Trans>Clear All</Trans>
-              </ButtonEmpty>
-            )}
-          </div>
+          {showTopRightPopupActions && (
+            <div className="flex w-full justify-end gap-2.5 max-md:pr-4">
+              {totalTopRightPopup >= MAX_NOTIFICATION && (
+                <ButtonEmpty
+                  onClick={toggleNotificationCenter}
+                  className="w-fit rounded-[30px] bg-border px-2.5 py-1 text-[10px] text-text"
+                >
+                  <Trans>See All</Trans>
+                </ButtonEmpty>
+              )}
+              {totalTopRightPopup > 1 && (
+                <ButtonEmpty
+                  onClick={clearAllTopRightPopup}
+                  className="w-fit rounded-[30px] bg-border px-2.5 py-1 text-[10px] text-text"
+                >
+                  <Trans>Clear All</Trans>
+                </ButtonEmpty>
+              )}
+            </div>
+          )}
 
           {topRightPopups.slice(0, MAX_NOTIFICATION).map((item, i) => (
             <TopRightPopup key={item.key} popup={item} hasOverlay={i === MAX_NOTIFICATION - 1} />

apps/kyberswap-interface/src/components/Announcement/PrivateAnnoucement/InboxItemLimitOrder.tsx

@@ -21,8 +21,8 @@ import {
 } from 'components/Announcement/PrivateAnnoucement/styled'
 import { AnnouncementTemplateLimitOrder } from 'components/Announcement/type'
 import { CheckCircle } from 'components/Icons'
+import { LimitOrderStatus } from 'components/LimitOrder/types'
 import { TokenLogoWithShadow } from 'components/Logo'
-import { LimitOrderStatus } from 'components/swapv2/LimitOrder/type'
 import { APP_PATHS } from 'constants/index'
 import { NETWORKS_INFO } from 'constants/networks'
 import { useNavigateToUrl } from 'utils/redirect'
@@ -135,7 +135,9 @@ function InboxItemLimitOrder({
   const navigate = useNavigateToUrl()
   const onClick = () => {
     const route = NETWORKS_INFO[chainId]?.route ?? NETWORKS_INFO[ChainId.MAINNET].route
-    navigate(`${APP_PATHS.LIMIT}/${route}?activeTab=my_order`, chainId)
+    const orderTab =
+      isFilled || isPartialFilled || isCancelled || status === LimitOrderStatus.EXPIRED ? 'closed' : 'active'
+    navigate(`${APP_PATHS.LIMIT}/${route}?tab=my_order&orderTab=${orderTab}`, chainId)
     onRead(announcement, statusMessage)
   }
 

apps/kyberswap-interface/src/components/Announcement/PrivateAnnoucement/NotificationCenter/LimitOrder.tsx

@@ -6,8 +6,8 @@ import InboxIcon from 'components/Announcement/PrivateAnnoucement/Icon'
 import { PrivateAnnouncementPropCenter } from 'components/Announcement/PrivateAnnoucement/NotificationCenter'
 import { Desc, Time, Title, Wrapper } from 'components/Announcement/PrivateAnnoucement/NotificationCenter/styled'
 import { AnnouncementTemplateLimitOrder } from 'components/Announcement/type'
+import { LimitOrderStatus } from 'components/LimitOrder/types'
 import Logo from 'components/Logo'
-import { LimitOrderStatus } from 'components/swapv2/LimitOrder/type'
 import { APP_PATHS } from 'constants/index'
 import { formatTime } from 'utils/time'
 

apps/kyberswap-interface/src/components/Announcement/helpers.ts

@@ -9,7 +9,7 @@ import {
   SmartExitReason,
   SmartExitStatus,
 } from 'components/Announcement/type'
-import { LimitOrderStatus } from 'components/swapv2/LimitOrder/type'
+import { LimitOrderStatus } from 'components/LimitOrder/types'
 import { EnvKeys, NOTI_ENV } from 'constants/env'
 import { Metric, SmartExitCondition } from 'pages/Earns/types'
 import { formatDisplayNumber } from 'utils/numbers'

apps/kyberswap-interface/src/components/Announcement/type.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 
-import { LimitOrderStatus } from 'components/swapv2/LimitOrder/type'
+import { LimitOrderStatus } from 'components/LimitOrder/types'
 import { SmartExitDexType } from 'pages/Earns/components/SmartExit/constants'
 import { SmartExitCondition } from 'pages/Earns/types'
 import { HistoricalPriceAlert } from 'pages/NotificationCenter/const'

apps/kyberswap-interface/src/components/CurrencyInputPanel/index.tsx

@@ -9,7 +9,7 @@ import Card from 'components/Card'
 import TokenInfo from 'components/CurrencyInputPanel/TokenInfo'
 import CurrencyLogo from 'components/CurrencyLogo'
 import Wallet from 'components/Icons/Wallet'
-import { Input as NumericalInput } from 'components/NumericalInput'
+import NumericalInput from 'components/NumericalInput'
 import { RowFixed } from 'components/Row'
 import TokenSelectorModal from 'components/TokenSelectorModal'
 import { useActiveWeb3React } from 'hooks'

apps/kyberswap-interface/src/components/DatePicker.tsx

@@ -3,9 +3,12 @@ import Picker from 'react-date-picker'
 export default function DatePicker({ onChange, value }: { value: Date; onChange: (date: Date) => void }) {
   const today = new Date()
   const minDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
+  const dateKey = `${value.getFullYear()}-${value.getMonth()}-${value.getDate()}`
+
   return (
     <div className="ks-date-picker">
       <Picker
+        key={dateKey}
         calendarIcon={null}
         clearIcon={null}
         autoFocus