feat(TWAP): update content based on orders type (#2915)

* feat(TWAP): update content based on orders type

* chore(comment): add todo comment for link

src/modules/ordersTable/containers/OrdersTableWidget/index.tsx

@@ -13,7 +13,7 @@ import { OPEN_TAB, ORDERS_TABLE_TABS } from 'modules/ordersTable/const/tabs'
 import { MultipleCancellationMenu } from 'modules/ordersTable/containers/MultipleCancellationMenu'
 import { OrdersReceiptModal } from 'modules/ordersTable/containers/OrdersReceiptModal'
 import { useSelectReceiptOrder } from 'modules/ordersTable/containers/OrdersReceiptModal/hooks'
-import { LimitOrderActions } from 'modules/ordersTable/pure/OrdersTableContainer/types'
+import { OrderActions } from 'modules/ordersTable/pure/OrdersTableContainer/types'
 import { buildOrdersTableUrl, parseOrdersTableUrl } from 'modules/ordersTable/utils/buildOrdersTableUrl'
 import { useBalancesAndAllowances } from 'modules/tokens'
 import { useWalletDetails, useWalletInfo } from 'modules/wallet'
@@ -26,7 +26,7 @@ import { ParsedOrder } from 'utils/orderUtils/parseOrder'
 import { OrdersTableList, useOrdersTableList } from './hooks/useOrdersTableList'
 import { useValidatePageUrlParams } from './hooks/useValidatePageUrlParams'
 
-import { OrdersTableContainer } from '../../pure/OrdersTableContainer'
+import { OrdersTableContainer, TabOrderTypes } from '../../pure/OrdersTableContainer'
 import { getParsedOrderFromItem, OrderTableItem, tableItemsToOrders } from '../../utils/orderTableGroupUtils'
 
 function getOrdersListByIndex(ordersList: OrdersTableList, id: string): OrderTableItem[] {
@@ -49,9 +49,10 @@ const ContentWrapper = styled.div`
 
 export interface OrdersTableWidgetProps {
   orders: Order[]
+  orderType: TabOrderTypes
 }
 
-export function OrdersTableWidget({ orders: allOrders }: OrdersTableWidgetProps) {
+export function OrdersTableWidget({ orders: allOrders, orderType }: OrdersTableWidgetProps) {
   const { chainId, account } = useWalletInfo()
   const location = useLocation()
   const navigate = useNavigate()
@@ -120,7 +121,7 @@ export function OrdersTableWidget({ orders: allOrders }: OrdersTableWidgetProps)
     [allOrders, cancelOrder]
   )
 
-  const orderActions: LimitOrderActions = {
+  const orderActions: OrderActions = {
     getShowCancellationModal,
     selectReceiptOrder,
     toggleOrderForCancellation,
@@ -150,6 +151,7 @@ export function OrdersTableWidget({ orders: allOrders }: OrdersTableWidgetProps)
           getSpotPrice={getSpotPrice}
           selectedOrders={ordersToCancel}
           allowsOffchainSigning={allowsOffchainSigning}
+          orderType={orderType}
         >
           {isOpenOrdersTab && orders.length && <MultipleCancellationMenu pendingOrders={tableItemsToOrders(orders)} />}
         </OrdersTableContainer>

src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx

@@ -23,7 +23,7 @@ import {
   TableRowCheckbox,
   TableRowCheckboxWrapper,
 } from 'modules/ordersTable/pure/OrdersTableContainer/styled'
-import { LimitOrderActions } from 'modules/ordersTable/pure/OrdersTableContainer/types'
+import { OrderActions } from 'modules/ordersTable/pure/OrdersTableContainer/types'
 import { OrderStatusBox } from 'modules/ordersTable/pure/OrderStatusBox'
 import { getIsEthFlowOrder } from 'modules/swap/containers/EthFlowStepper'
 
@@ -158,7 +158,7 @@ export interface OrderRowProps {
   isChild?: boolean
   orderParams: OrderParams
   onClick: () => void
-  orderActions: LimitOrderActions
+  orderActions: OrderActions
   children?: JSX.Element
 }
 

src/modules/ordersTable/pure/OrdersTableContainer/OrdersTable.tsx

@@ -23,7 +23,7 @@ import {
   TableRowCheckboxWrapper,
   CheckboxCheckmark,
 } from 'modules/ordersTable/pure/OrdersTableContainer/styled'
-import { LimitOrderActions } from 'modules/ordersTable/pure/OrdersTableContainer/types'
+import { OrderActions } from 'modules/ordersTable/pure/OrdersTableContainer/types'
 import { BalancesAndAllowances } from 'modules/tokens'
 
 import { ordersTableFeatures } from 'common/constants/featureFlags'
@@ -204,7 +204,7 @@ export interface OrdersTableProps {
   selectedOrders: CancellableOrder[]
   balancesAndAllowances: BalancesAndAllowances
   getSpotPrice: (params: SpotPricesKeyParams) => Price<Currency, Currency> | null
-  orderActions: LimitOrderActions
+  orderActions: OrderActions
 }
 
 export function OrdersTable({

src/modules/ordersTable/pure/OrdersTableContainer/TableGroup.tsx

@@ -14,7 +14,7 @@ import { BalancesAndAllowances } from 'modules/tokens'
 import { OrderRow } from './OrderRow'
 import * as styledEl from './OrderRow/styled'
 import { OrdersTablePagination } from './OrdersTablePagination'
-import { LimitOrderActions } from './types'
+import { OrderActions } from './types'
 import { getOrderParams } from './utils/getOrderParams'
 
 import { ORDERS_TABLE_PAGE_SIZE } from '../../const/tabs'
@@ -36,7 +36,7 @@ export interface TableGroupProps {
   isOpenOrdersTab: boolean
   isRowSelectable: boolean
   isRowSelected: boolean
-  orderActions: LimitOrderActions
+  orderActions: OrderActions
   chainId: SupportedChainId
   balancesAndAllowances: BalancesAndAllowances
 }

src/modules/ordersTable/pure/OrdersTableContainer/index.cosmos.tsx

@@ -1,11 +1,11 @@
-import { LimitOrderActions } from 'modules/ordersTable/pure/OrdersTableContainer/types'
+import { OrderActions } from 'modules/ordersTable/pure/OrdersTableContainer/types'
 import { BalancesAndAllowances } from 'modules/tokens'
 
 import { ParsedOrder } from 'utils/orderUtils/parseOrder'
 
 import { ordersMock } from './orders.mock'
 
-import { OrdersTableContainer } from './index'
+import { OrdersTableContainer, TabOrderTypes } from './index'
 
 import { OrderTab } from '../../const/tabs'
 
@@ -30,7 +30,7 @@ const balancesAndAllowances: BalancesAndAllowances = {
   isLoading: false,
 }
 
-const orderActions: LimitOrderActions = {
+const orderActions: OrderActions = {
   getShowCancellationModal: (order) => {
     if (order.status === 'pending') {
       return () => alert('cancelling!')
@@ -62,5 +62,6 @@ export default (
     balancesAndAllowances={balancesAndAllowances}
     getSpotPrice={() => null}
     orderActions={orderActions}
+    orderType={TabOrderTypes.LIMIT}
   />
 )

src/modules/ordersTable/pure/OrdersTableContainer/index.tsx

@@ -142,6 +142,12 @@ export interface OrdersProps extends OrdersTabsProps, OrdersTableProps {
   isWalletConnected: boolean
   isOpenOrdersTab: boolean
   children?: ReactNode
+  orderType: TabOrderTypes
+}
+
+export enum TabOrderTypes {
+  LIMIT = 'limit',
+  ADVANCED = 'advanced',
 }
 
 export function OrdersTableContainer({
@@ -158,6 +164,7 @@ export function OrdersTableContainer({
   pendingOrdersPrices,
   getSpotPrice,
   children,
+  orderType,
 }: OrdersProps) {
   const content = () => {
     if (!isWalletConnected) {
@@ -171,7 +178,7 @@ export function OrdersTableContainer({
           </h3>
           <p>
             <Trans>
-              To use limit orders, please connect your wallet <br />
+              To use {orderType} orders, please connect your wallet <br />
               to one of our supported networks.
             </Trans>
           </p>
@@ -193,11 +200,13 @@ export function OrdersTableContainer({
           <p>
             <Trans>
               You don&apos;t have any {isOpenOrdersTab ? 'open' : ''} orders at the moment. <br />
-              Create one for free!{' '}
-              <ExternalLink href="https://cow-protocol.medium.com/how-to-user-cow-swaps-surplus-capturing-limit-orders-24324326dc9e">
-                Learn more
-                <ExternalArrow />
-              </ExternalLink>
+              Create one for free! {/* TODO: add link for Advanced orders also */}
+              {orderType === TabOrderTypes.LIMIT ? (
+                <ExternalLink href="https://cow-protocol.medium.com/how-to-user-cow-swaps-surplus-capturing-limit-orders-24324326dc9e">
+                  Learn more
+                  <ExternalArrow />
+                </ExternalLink>
+              ) : null}
             </Trans>
           </p>
         </Content>

src/modules/ordersTable/pure/OrdersTableContainer/types.ts

@@ -1,7 +1,7 @@
 import { UseCancelOrderReturn } from 'common/hooks/useCancelOrder'
 import { ParsedOrder } from 'utils/orderUtils/parseOrder'
 
-export interface LimitOrderActions {
+export interface OrderActions {
   getShowCancellationModal: (order: ParsedOrder) => UseCancelOrderReturn
   selectReceiptOrder(order: ParsedOrder): void
   toggleOrderForCancellation(order: ParsedOrder): void

src/pages/AdvancedOrders/index.tsx

@@ -4,6 +4,7 @@ import { Navigate } from 'react-router-dom'
 
 import { AdvancedOrdersWidget, advancedOrdersAtom } from 'modules/advancedOrders'
 import { OrdersTableWidget } from 'modules/ordersTable'
+import { TabOrderTypes } from 'modules/ordersTable/pure/OrdersTableContainer'
 import { useTradeRouteContext } from 'modules/trade/hooks/useTradeRouteContext'
 import * as styledEl from 'modules/trade/pure/TradePageLayout'
 import { parameterizeTradeRoute } from 'modules/trade/utils/parameterizeTradeRoute'
@@ -36,7 +37,7 @@ export default function AdvancedOrdersPage() {
         </styledEl.PrimaryWrapper>
 
         <styledEl.SecondaryWrapper>
-          <OrdersTableWidget orders={allEmulatedOrders} />
+          <OrdersTableWidget orderType={TabOrderTypes.ADVANCED} orders={allEmulatedOrders} />
         </styledEl.SecondaryWrapper>
       </styledEl.PageWrapper>
     </>

src/pages/LimitOrders/index.tsx

@@ -15,6 +15,7 @@ import {
   LIMIT_ORDER_SLIPPAGE,
 } from 'modules/limitOrders'
 import { OrdersTableWidget } from 'modules/ordersTable'
+import { TabOrderTypes } from 'modules/ordersTable/pure/OrdersTableContainer'
 import * as styledEl from 'modules/trade/pure/TradePageLayout'
 import { useWalletInfo } from 'modules/wallet'
 
@@ -38,7 +39,7 @@ export default function LimitOrderPage() {
         </styledEl.PrimaryWrapper>
 
         <styledEl.SecondaryWrapper>
-          <OrdersTableWidget orders={onlyPlainLimitOrders} />
+          <OrdersTableWidget orderType={TabOrderTypes.LIMIT} orders={onlyPlainLimitOrders} />
         </styledEl.SecondaryWrapper>
       </styledEl.PageWrapper>
     </>