From a5d949a73674ac82c0e435d33988f7eefb3d27a7 Mon Sep 17 00:00:00 2001
From: Danh <nguyenhoaidanh2096@gmail.com>
Date: Wed, 18 Oct 2023 14:32:08 +0700
Subject: [PATCH] add tutorial lo

---
 .../Tutorial/TutorialSwap/index.tsx           |  3 +-
 src/components/swapv2/LimitOrder/Tutorial.tsx | 91 +++++++++++++++++++
 src/components/swapv2/LimitOrder/index.tsx    | 39 +++++---
 src/pages/SwapV3/index.tsx                    |  2 +-
 4 files changed, 121 insertions(+), 14 deletions(-)
 create mode 100644 src/components/swapv2/LimitOrder/Tutorial.tsx

diff --git a/src/components/Tutorial/TutorialSwap/index.tsx b/src/components/Tutorial/TutorialSwap/index.tsx
index 1826dbe3e0..6f8cbfc258 100644
--- a/src/components/Tutorial/TutorialSwap/index.tsx
+++ b/src/components/Tutorial/TutorialSwap/index.tsx
@@ -399,8 +399,9 @@ const getListSteps = (isLogin: boolean, isSolana: boolean) => {
   ])
 }
 
-const TutorialKeys = {
+export const TutorialKeys = {
   SHOWED_SWAP_GUIDE: 'showedTutorialSwapGuide',
+  SHOWED_LO_GUIDE: 'showedTutorialLO',
 }
 
 export default memo(function TutorialSwap() {
diff --git a/src/components/swapv2/LimitOrder/Tutorial.tsx b/src/components/swapv2/LimitOrder/Tutorial.tsx
new file mode 100644
index 0000000000..38482f9eae
--- /dev/null
+++ b/src/components/swapv2/LimitOrder/Tutorial.tsx
@@ -0,0 +1,91 @@
+import { Trans, t } from '@lingui/macro'
+import { rgba } from 'polished'
+import { ReactNode } from 'react'
+import { Check } from 'react-feather'
+import { Text } from 'rebass'
+import styled from 'styled-components'
+
+import { ButtonPrimary } from 'components/Button'
+import Column from 'components/Column'
+import Row from 'components/Row'
+import { DOCS_LINKS } from 'components/swapv2/LimitOrder/const'
+import useTheme from 'hooks/useTheme'
+import { ExternalLink } from 'theme'
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 424px;
+  padding: 20px 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 16px;
+  background: var(--overlay-oapy-20, rgba(15, 170, 162, 0.2)); // todo
+`
+
+const CheckIcon = styled.div`
+  background-color: ${({ theme }) => rgba(theme.primary, 0.3)};
+  border-radius: 100%;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+`
+
+const ContentItem = ({ text }: { text: ReactNode }) => {
+  const theme = useTheme()
+  return (
+    <Row gap="8px">
+      <CheckIcon>
+        <Check color={theme.primary} size={14} />
+      </CheckIcon>
+      <Text fontSize={'14px'} color={theme.subText}>
+        {text}
+      </Text>
+    </Row>
+  )
+}
+export default function Tutorial({ onClose }: { onClose: () => void }) {
+  const theme = useTheme()
+
+  return (
+    <Wrapper>
+      <Column gap="40px">
+        <Column gap="10px" alignItems="center">
+          <Text textAlign={'center'} fontWeight={'500'} fontSize={'24px'} color={theme.subText}>
+            <Trans>Want to try our Limit Orders?</Trans>
+          </Text>
+          <Text fontWeight={'700'} fontSize={'24px'} color={theme.subText}>
+            <Trans>Get started!</Trans>
+          </Text>
+        </Column>
+
+        <Column gap="12px">
+          <ContentItem text={t`Place limit orders on thousands of tokens`} />
+          <ContentItem text={t`Get your orders filled without paying any gas fees`} />
+          <ContentItem
+            text={
+              <Trans>
+                Cancel and edit orders for{' '}
+                <Text as="span" fontWeight={'500'} color={theme.primary}>
+                  <Trans>FREE</Trans>
+                </Text>
+              </Trans>
+            }
+          />
+        </Column>
+      </Column>
+
+      <Column gap="16px" width={'100%'}>
+        <Text fontSize={'14px'} textAlign={'center'} color={theme.subText}>
+          <Trans>
+            Learn more about <ExternalLink href={DOCS_LINKS.USER_GUIDE}>KyberSwap Limit Order</ExternalLink>
+          </Trans>
+        </Text>
+        <ButtonPrimary height="40px" width={'100%'} onClick={onClose}>
+          <Trans>Get started with limit orders</Trans>
+        </ButtonPrimary>
+      </Column>
+    </Wrapper>
+  )
+}
diff --git a/src/components/swapv2/LimitOrder/index.tsx b/src/components/swapv2/LimitOrder/index.tsx
index 0a8f34a03e..39950ec025 100644
--- a/src/components/swapv2/LimitOrder/index.tsx
+++ b/src/components/swapv2/LimitOrder/index.tsx
@@ -1,6 +1,8 @@
 import { t } from '@lingui/macro'
 import { memo, useState } from 'react'
 
+import { TutorialKeys } from 'components/Tutorial/TutorialSwap'
+import Tutorial from 'components/swapv2/LimitOrder/Tutorial'
 import { TRANSACTION_STATE_DEFAULT } from 'constants/index'
 import useSyncTokenSymbolToUrl from 'hooks/useSyncTokenSymbolToUrl'
 import { useLimitActionHandlers, useLimitState } from 'state/limit/hooks'
@@ -20,22 +22,35 @@ function LimitOrderComp({ setIsSelectCurrencyManual, isSelectCurrencyManual }: P
 
   useSyncTokenSymbolToUrl(currencyIn, currencyOut, onSelectPair, isSelectCurrencyManual)
 
+  const [showTutorial, setShowTutorial] = useState(!localStorage.getItem(TutorialKeys.SHOWED_LO_GUIDE))
+
   // modal and loading
   const [flowState, setFlowState] = useState<TransactionFlowState>(TRANSACTION_STATE_DEFAULT)
+  if (showTutorial)
+    return (
+      <Tutorial
+        onClose={() => {
+          setShowTutorial(false)
+          localStorage.setItem(TutorialKeys.SHOWED_LO_GUIDE, '1')
+        }}
+      />
+    )
 
   return (
-    <LimitOrderForm
-      flowState={flowState}
-      setFlowState={setFlowState}
-      currencyIn={currencyIn}
-      currencyOut={currencyOut}
-      setIsSelectCurrencyManual={setIsSelectCurrencyManual}
-      note={
-        currencyOut?.isNative
-          ? t`Note: Once your order is filled, you will receive ${currencyOut?.wrapped.name} (${currencyOut?.wrapped.symbol})`
-          : undefined
-      }
-    />
+    <div style={{ padding: '16px' }}>
+      <LimitOrderForm
+        flowState={flowState}
+        setFlowState={setFlowState}
+        currencyIn={currencyIn}
+        currencyOut={currencyOut}
+        setIsSelectCurrencyManual={setIsSelectCurrencyManual}
+        note={
+          currencyOut?.isNative
+            ? t`Note: Once your order is filled, you will receive ${currencyOut?.wrapped.name} (${currencyOut?.wrapped.symbol})`
+            : undefined
+        }
+      />
+    </div>
   )
 }
 
diff --git a/src/pages/SwapV3/index.tsx b/src/pages/SwapV3/index.tsx
index 3c1042956e..cb2648154e 100644
--- a/src/pages/SwapV3/index.tsx
+++ b/src/pages/SwapV3/index.tsx
@@ -224,7 +224,7 @@ export default function Swap() {
             <AppBodyWrapped
               data-highlight={shouldHighlightSwapBox}
               id={TutorialIds.SWAP_FORM}
-              style={activeTab === TAB.INFO ? { padding: 0 } : undefined}
+              style={[TAB.INFO, TAB.LIMIT].includes(activeTab) ? { padding: 0 } : undefined}
             >
               {isSwapPage && (
                 <PopulatedSwapForm