limit order: double signature, cancel order without gas fee (#2223)

KyberNetwork · Oct 11, 2023 · 736b6a7 · 736b6a7
1 parent 0bae303
commit 736b6a7
Show file tree

Hide file tree

Showing 54 changed files with 2,027 additions and 916 deletions.
diff --git a/.env.dev b/.env.dev
@@ -25,8 +25,7 @@ VITE_GTM_ID=
 VITE_GOOGLE_RECAPTCHA_KEY=6Lc7yg0iAAAAALhS4C4Ez5hqMBub8hKdFvvr9sfc
 VITE_POOL_FARM_BASE_URL=https://pool-farm.dev.kyberengineering.io
 
-VITE_LIMIT_ORDER_API_WRITE=https://limit-order.dev.kyberengineering.io/write/api
-VITE_LIMIT_ORDER_API_READ=https://limit-order.dev.kyberengineering.io/read-ks/api
+VITE_LIMIT_ORDER_API=https://limit-order.dev.kyberengineering.io
 VITE_BLOCK_SERVICE_API=https://block.kyberswap.com
 
 # Kyber DAO Apis

diff --git a/.env.production b/.env.production
@@ -25,8 +25,7 @@ VITE_GTM_ID=GTM-TRQCJ8F
 VITE_GOOGLE_RECAPTCHA_KEY=6LfgKRMiAAAAAPDTmXAM9LZLYAlE1zACfCJXup96
 VITE_POOL_FARM_BASE_URL=https://pool-farm.kyberswap.com
 
-VITE_LIMIT_ORDER_API_WRITE=https://limit-order.kyberswap.com/write/api
-VITE_LIMIT_ORDER_API_READ=https://limit-order.kyberswap.com/read-ks/api
+VITE_LIMIT_ORDER_API=https://limit-order.kyberswap.com
 VITE_BLOCK_SERVICE_API=https://block.kyberswap.com
 
 # Kyber DAO Apis

diff --git a/.env.stg b/.env.stg
@@ -24,8 +24,7 @@ VITE_GTM_ID=
 VITE_GOOGLE_RECAPTCHA_KEY=6Lc7yg0iAAAAALhS4C4Ez5hqMBub8hKdFvvr9sfc
 VITE_POOL_FARM_BASE_URL=https://pool-farm.kyberswap.com
 
-VITE_LIMIT_ORDER_API_WRITE=https://limit-order.stg.kyberengineering.io/write/api
-VITE_LIMIT_ORDER_API_READ=https://limit-order.stg.kyberengineering.io/read-ks/api
+VITE_LIMIT_ORDER_API=https://limit-order.stg.kyberengineering.io
 VITE_BLOCK_SERVICE_API=https://block.kyberswap.com
 
 # Kyber DAO Apis

diff --git a/src/assets/svg/clock_timer.svg b/src/assets/svg/clock_timer.svg
diff --git a/src/assets/svg/gas_less_icon.svg b/src/assets/svg/gas_less_icon.svg
diff --git a/src/assets/svg/history.svg b/src/assets/svg/history.svg
diff --git a/src/assets/svg/no-data.svg b/src/assets/svg/no-data.svg
diff --git a/src/components/Announcement/Popups/TopRightPopup.tsx b/src/components/Announcement/Popups/TopRightPopup.tsx
@@ -154,9 +154,9 @@ export default function PopupItem({ popup, hasOverlay }: { popup: PopupItemType;
   let popupContent
   switch (popupType) {
     case PopupType.SIMPLE: {
-      const { title, summary, type = NotificationType.ERROR, icon } = content as PopupContentSimple
+      const { type = NotificationType.ERROR } = content as PopupContentSimple
       notiType = type
-      popupContent = <SimplePopup title={title} type={type} summary={summary} icon={icon} />
+      popupContent = <SimplePopup {...(content as PopupContentSimple)} type={type} />
       break
     }
     case PopupType.TRANSACTION: {

diff --git a/src/components/Announcement/type.ts b/src/components/Announcement/type.ts
@@ -155,9 +155,10 @@ export type PopupContentTxn = {
 
 export type PopupContentSimple = {
   title: string
+  type: NotificationType
   summary?: ReactNode
   icon?: ReactNode
-  type: NotificationType
+  link?: string
 }
 
 export type PopupContentAnnouncement = {

diff --git a/src/components/Icons/WarningIcon.tsx b/src/components/Icons/WarningIcon.tsx
@@ -11,6 +11,7 @@ export default function WarningIcon({
     return (
       <svg
         width={size}
+        style={{ minWidth: size }}
         height={(18 / 20) * Number(size)}
         viewBox="0 0 20 18"
         fill="none"
@@ -24,7 +25,14 @@ export default function WarningIcon({
     )
 
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      style={{ minWidth: size, minHeight: size }}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
       <path
         fillRule="evenodd"
         clipRule="evenodd"

diff --git a/src/components/SubscribeButton/index.tsx b/src/components/SubscribeButton/index.tsx
@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { ReactNode, useCallback, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Text } from 'rebass'
-import styled, { css } from 'styled-components'
+import styled, { CSSProperties, css } from 'styled-components'
 
 import NotificationIcon from 'components/Icons/NotificationIcon'
 import { APP_PATHS } from 'constants/index'
@@ -30,7 +30,7 @@ const SubscribeBtn = styled(ButtonPrimary)<{
 }>`
   overflow: hidden;
   width: fit-content;
-  height: 36px;
+  height: 32px;
   padding: 8px 12px;
   background: ${({ bgColor }) => bgColor};
   color: ${({ theme, isDisabled }) => (isDisabled ? theme.border : theme.textReverse)};
@@ -62,12 +62,14 @@ export default function SubscribeNotificationButton({
   trackingEvent,
   onClick,
   topicId,
+  style,
 }: {
   subscribeTooltip?: ReactNode
   iconOnly?: boolean
   trackingEvent?: MIXPANEL_TYPE
   onClick?: () => void
   topicId?: string
+  style?: CSSProperties
 }) {
   const theme = useTheme()
 
@@ -97,7 +99,7 @@ export default function SubscribeNotificationButton({
 
   return (
     <MouseoverTooltipDesktopOnly text={subscribeTooltip} width="400px">
-      <SubscribeBtn bgColor={theme.primary} onClick={onClickBtn} iconOnly={iconOnly}>
+      <SubscribeBtn bgColor={theme.primary} onClick={onClickBtn} iconOnly={iconOnly} style={style}>
         <NotificationIcon size={16} />
         <ButtonText iconOnly={iconOnly}>
           {hasSubscribe ? <Trans>Unsubscribe</Trans> : <Trans>Subscribe</Trans>}

diff --git a/src/components/TransactionConfirmationModal/index.tsx b/src/components/TransactionConfirmationModal/index.tsx
@@ -324,6 +324,7 @@ interface ConfirmationModalProps {
   hash: string | undefined
   content: () => React.ReactNode
   attemptingTxn: boolean
+  attemptingTxnContent?: () => React.ReactNode
   pendingText: string | React.ReactNode
   tokenAddToMetaMask?: Currency
   showTxBanner?: boolean
@@ -336,6 +337,7 @@ export default function TransactionConfirmationModal({
   isOpen,
   onDismiss,
   attemptingTxn,
+  attemptingTxnContent,
   hash,
   pendingText,
   content,
@@ -356,7 +358,11 @@ export default function TransactionConfirmationModal({
       width={!attemptingTxn && !hash ? width : undefined}
     >
       {attemptingTxn ? (
-        <ConfirmationPendingContent onDismiss={onDismiss} pendingText={pendingText} startedTime={startedTime} />
+        attemptingTxnContent ? (
+          attemptingTxnContent()
+        ) : (
+          <ConfirmationPendingContent onDismiss={onDismiss} pendingText={pendingText} startedTime={startedTime} />
+        )
       ) : hash ? (
         <TransactionSubmittedContent
           showTxBanner={showTxBanner}

diff --git a/src/components/swapv2/LimitOrder/ActionButtonLimitOrder.tsx b/src/components/swapv2/LimitOrder/ActionButtonLimitOrder.tsx
@@ -34,6 +34,7 @@ export default function ActionButtonLimitOrder({
   approvalSubmitted,
   showApproveFlow,
   showWarning,
+  isEdit,
 }: {
   currencyIn: Currency | undefined
   currencyOut: Currency | undefined
@@ -51,6 +52,7 @@ export default function ActionButtonLimitOrder({
   approveCallback: () => Promise<void>
   onWrapToken: () => Promise<void>
   showPreview: () => void
+  isEdit: boolean
 }) {
   const disableBtnApproved =
     approval === ApprovalState.PENDING ||
@@ -111,7 +113,13 @@ export default function ActionButtonLimitOrder({
       {checkingAllowance ? <Trans>Checking Allowance...</Trans> : <Trans>Review Order</Trans>}
     </Text>
   )
+
+  if (isEdit) {
+    return null
+  }
+
   if (showWarning && !disableBtnReview) return <ButtonWarning onClick={showPreview}>{contentButton}</ButtonWarning>
+
   return (
     <ButtonPrimary id="review-order-button" onClick={showPreview} disabled={disableBtnReview}>
       {contentButton}

diff --git a/src/components/swapv2/LimitOrder/DeltaRate.tsx b/src/components/swapv2/LimitOrder/DeltaRate.tsx
@@ -9,13 +9,15 @@ import useTheme from 'hooks/useTheme'
 
 import { RateInfo } from './type'
 
+export type DeltaRateLimitOrder = { rawPercent: number | undefined; percent: string; profit: boolean }
+
 export function useGetDeltaRateLimitOrder({
   marketPrice,
   rateInfo,
 }: {
   marketPrice: BaseTradeInfo | undefined
   rateInfo: RateInfo
-}) {
+}): DeltaRateLimitOrder {
   const { deltaText, percent } = useMemo(() => {
     try {
       if (marketPrice && rateInfo.rate && rateInfo.invertRate) {
@@ -39,18 +41,18 @@ export function useGetDeltaRateLimitOrder({
   return {
     rawPercent: percent,
     percent: percentText,
-    profit: percent && Number(percent) > 0,
+    profit: Boolean(percent && Number(percent) > 0),
   }
 }
 
 const DeltaRate = ({
   marketPrice,
   rateInfo,
-  symbolIn,
+  symbol,
 }: {
   marketPrice: BaseTradeInfo | undefined
   rateInfo: RateInfo
-  symbolIn: string
+  symbol: string
 }) => {
   const theme = useTheme()
 
@@ -63,7 +65,7 @@ const DeltaRate = ({
   )
   return (
     <Label style={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' }}>
-      <Trans>Sell {symbolIn} at rate</Trans>
+      <Trans>Sell {symbol} at rate</Trans>
       {percent ? (
         <>
           <Text as="span" color={color}>