feat(widget): hide orders table (#4993)

* feat: add widget option to hide orders table * feat: use hideOrdersTable widget param * fix: show orders button on SWAP form * feat: add warning regarding the behaviour
cowprotocol · Oct 17, 2024 · 681fb20 · 681fb20
1 parent ce3b5b8
commit 681fb20
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 12 deletions.
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx
@@ -49,7 +49,7 @@ const scrollToMyOrders = () => {
 
 export function TradeWidgetForm(props: TradeWidgetProps) {
   const isInjectedWidgetMode = isInjectedWidget()
-  const { standaloneMode } = useInjectedWidgetParams()
+  const { standaloneMode, hideOrdersTable } = useInjectedWidgetParams()
 
   const isAlternativeOrderModalVisible = useIsAlternativeOrderModalVisible()
   const { pendingActivity } = useCategorizeRecentActivity()
@@ -113,6 +113,7 @@ export function TradeWidgetForm(props: TradeWidgetProps) {
   const shouldShowMyOrdersButton =
     !alternativeOrderModalVisible &&
     (!isInjectedWidgetMode && isConnectedSwapMode ? isUpToLarge : true) &&
+    (isConnectedSwapMode || !hideOrdersTable) &&
     ((isConnectedSwapMode && standaloneMode !== true) ||
       (isLimitOrderMode && isUpToLarge && isLimitOrdersUnlocked) ||
       (isAdvancedMode && isUpToLarge && isAdvancedOrdersUnlocked))

diff --git a/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx b/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx
@@ -6,6 +6,7 @@ import {
   FillAdvancedOrdersDerivedStateUpdater,
   SetupAdvancedOrderAmountsFromUrlUpdater,
 } from 'modules/advancedOrders'
+import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { OrdersTableWidget, TabOrderTypes } from 'modules/ordersTable'
 import * as styledEl from 'modules/trade/pure/TradePageLayout'
 import {
@@ -19,6 +20,7 @@ import {
 } from 'modules/twap'
 import { TwapFormState } from 'modules/twap/pure/PrimaryActionButton/getTwapFormState'
 
+
 export default function AdvancedOrdersPage() {
   const { isUnlocked } = useAtomValue(advancedOrdersAtom)
 
@@ -32,6 +34,8 @@ export default function AdvancedOrdersPage() {
 
   const advancedWidgetParams = { disablePriceImpact }
 
+  const { hideOrdersTable } = useInjectedWidgetParams()
+
   return (
     <>
       <FillAdvancedOrdersDerivedStateUpdater slippage={twapSlippage} />
@@ -50,11 +54,13 @@ export default function AdvancedOrdersPage() {
         </styledEl.PrimaryWrapper>
 
         <styledEl.SecondaryWrapper>
-          <OrdersTableWidget
-            displayOrdersOnlyForSafeApp={true}
-            orderType={TabOrderTypes.ADVANCED}
-            orders={allEmulatedOrders}
-          />
+          {!hideOrdersTable && (
+            <OrdersTableWidget
+              displayOrdersOnlyForSafeApp={true}
+              orderType={TabOrderTypes.ADVANCED}
+              orders={allEmulatedOrders}
+            />
+          )}
         </styledEl.SecondaryWrapper>
       </styledEl.PageWrapper>
     </>

diff --git a/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx b/apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx
@@ -3,14 +3,17 @@ import { useWalletInfo } from '@cowprotocol/wallet'
 
 import { useOrders } from 'legacy/state/orders/hooks'
 
+import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { LimitOrdersWidget, useIsWidgetUnlocked } from 'modules/limitOrders'
 import { OrdersTableWidget, TabOrderTypes } from 'modules/ordersTable'
 import * as styledEl from 'modules/trade/pure/TradePageLayout'
 
+
 export function RegularLimitOrders() {
   const isUnlocked = useIsWidgetUnlocked()
   const { chainId, account } = useWalletInfo()
   const allLimitOrders = useOrders(chainId, account, UiOrderType.LIMIT)
+  const { hideOrdersTable } = useInjectedWidgetParams()
 
   return (
     <styledEl.PageWrapper isUnlocked={isUnlocked}>
@@ -19,11 +22,13 @@ export function RegularLimitOrders() {
       </styledEl.PrimaryWrapper>
 
       <styledEl.SecondaryWrapper>
-        <OrdersTableWidget
-          displayOrdersOnlyForSafeApp={false}
-          orderType={TabOrderTypes.LIMIT}
-          orders={allLimitOrders}
-        />
+        {!hideOrdersTable && (
+          <OrdersTableWidget
+            displayOrdersOnlyForSafeApp={false}
+            orderType={TabOrderTypes.LIMIT}
+            orders={allLimitOrders}
+          />
+        )}
       </styledEl.SecondaryWrapper>
     </styledEl.PageWrapper>
   )

diff --git a/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts b/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts
@@ -44,6 +44,7 @@ export function useWidgetParams(configuratorState: ConfiguratorState): CowSwapWi
       disableToastMessages,
       disableProgressBar,
       hideBridgeInfo,
+      hideOrdersTable,
     } = configuratorState
 
     const themeColors = {
@@ -98,6 +99,7 @@ export function useWidgetParams(configuratorState: ConfiguratorState): CowSwapWi
             }
           : undefined,
       hideBridgeInfo,
+      hideOrdersTable,
     }
 
     return params

diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
@@ -143,6 +143,9 @@ export function Configurator({ title }: { title: string }) {
   const [hideBridgeInfo, setHideBridgeInfo] = useState<boolean | undefined>(false)
   const toggleHideBridgeInfo = useCallback(() => setHideBridgeInfo((curr) => !curr), [])
 
+  const [hideOrdersTable, setHideOrdersTable] = useState<boolean | undefined>(false)
+  const toggleHideOrdersTable = useCallback(() => setHideOrdersTable((curr) => !curr), [])
+
   const LINKS = [
     { icon: <CodeIcon />, label: 'View embed code', onClick: () => handleDialogOpen() },
     { icon: <LanguageIcon />, label: 'Widget web', url: `https://cow.fi/widget/?${UTM_PARAMS}` },
@@ -177,6 +180,7 @@ export function Configurator({ title }: { title: string }) {
     disableToastMessages,
     disableProgressBar,
     hideBridgeInfo,
+    hideOrdersTable,
   }
 
   const computedParams = useWidgetParams(state)
@@ -326,6 +330,14 @@ export function Configurator({ title }: { title: string }) {
           </RadioGroup>
         </FormControl>
 
+        <FormControl component="fieldset">
+          <FormLabel component="legend">Hide orders table:</FormLabel>
+          <RadioGroup row aria-label="mode" name="mode" value={hideOrdersTable} onChange={toggleHideOrdersTable}>
+            <FormControlLabel value="false" control={<Radio />} label="Show orders table" />
+            <FormControlLabel value="true" control={<Radio />} label="Hide orders table" />
+          </RadioGroup>
+        </FormControl>
+
         {isDrawerOpen && (
           <Fab
             size="small"

diff --git a/apps/widget-configurator/src/app/configurator/types.ts b/apps/widget-configurator/src/app/configurator/types.ts
@@ -34,4 +34,5 @@ export interface ConfiguratorState {
   disableToastMessages: boolean
   disableProgressBar: boolean
   hideBridgeInfo: boolean | undefined
+  hideOrdersTable: boolean | undefined
 }
diff --git a/libs/widget-lib/src/types.ts b/libs/widget-lib/src/types.ts
@@ -291,10 +291,17 @@ export interface CowSwapWidgetParams {
    */
   hideBridgeInfo?: boolean
 
+  /**
+   * Option to hide orders table on LIMIT and TWAP forms.
+   *
+   * Warning! When `true`, users won't be able to see their LIMIT/TWAP order status or history, neither they'll be able to cancel active orders.
+   */
+  hideOrdersTable?: boolean
+
   /**
    * Defines the widget mode.
    *  - `true` (standalone mode): The widget is standalone, so it will use its own Ethereum provider. The user can connect from within the widget.
-   *  - `false` (dapp mode): The widget is embedded in a dapp which is responsible of providing the Ethereum provider. Therefore, there won't be a connect button in the widget as this should happen in the host app.
+   *  - `false` (dapp mode): The widget is embedded in a dapp which is responsible for providing the Ethereum provider. Therefore, there won't be a connect button in the widget as this should happen in the host app.
    *
    * Defaults to standalone.
    */