feat(hooks-store): new design & refactoring

apps/cowswap-frontend/src/common/pure/NewModal/index.tsx

@@ -156,13 +156,22 @@ export const NewModalContentBottom = styled(NewModalContentTop)`
 export interface NewModalProps {
   maxWidth?: number
   minHeight?: number
+  contentPadding?: string
   title?: string
   onDismiss?: Command
   children?: React.ReactNode
   modalMode?: boolean
 }
 
-export function NewModal({ maxWidth = 450, minHeight = 350, modalMode, title, children, onDismiss }: NewModalProps) {
+export function NewModal({
+  maxWidth = 450,
+  minHeight = 350,
+  contentPadding,
+  modalMode,
+  title,
+  children,
+  onDismiss,
+}: NewModalProps) {
   const onDismissCallback = useCallback(() => onDismiss?.(), [onDismiss])
 
   return (
@@ -180,7 +189,9 @@ export function NewModal({ maxWidth = 450, minHeight = 350, modalMode, title, ch
           </Heading>
         )}
 
-        <NewModalContent className={modalMode ? 'modalMode' : ''}>{children}</NewModalContent>
+        <NewModalContent className={modalMode ? 'modalMode' : ''} padding={contentPadding}>
+          {children}
+        </NewModalContent>
       </ModalInner>
     </Wrapper>
   )

apps/cowswap-frontend/src/modules/application/containers/App/RoutesApp.tsx

@@ -83,7 +83,7 @@ export function RoutesApp() {
         <Route path="profile" element={<Navigate to={RoutesEnum.ACCOUNT} />} />
 
         {/*Swap*/}
-        <Route path={RoutesEnum.SWAP} element={<SwapPage hooksEnabled={false} />} />
+        <Route path={RoutesEnum.SWAP} element={<SwapPage />} />
         <Route path={RoutesEnum.HOOKS} element={<HooksPage />} />
         <Route path={RoutesEnum.SEND} element={<RedirectPathToSwapOnly />} />
 

apps/cowswap-frontend/src/modules/hooksStore/const.ts

@@ -1,6 +1,3 @@
-export const HOOKS_TRAMPOLINE_ADDRESS = '0x01dcb88678aedd0c4cc9552b20f4718550250574'
-export const SBC_DEPOSIT_CONTRACT_ADDRESS = '0x0B98057eA310F4d31F2a452B414647007d1645d9'
-
 // Sorry Safe, you need to set up CORS policy :)
 // TODO: run our own instance
 export const TENDERLY_SIMULATE_ENDPOINT_URL =

apps/cowswap-frontend/src/modules/hooksStore/containers/HookDappContainer/index.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from 'react'
+
+import { Command, HookDapp, HookDappContext as HookDappContextType } from '@cowprotocol/types'
+import { useWalletInfo } from '@cowprotocol/wallet'
+
+import { useAddHook } from '../../hooks/useAddHook'
+import { useEditHook } from '../../hooks/useEditHook'
+import { useHookById } from '../../hooks/useHookById'
+import { isHookDappIframe } from '../../utils'
+
+interface HookDappContainerProps {
+  dapp: HookDapp
+  isPreHook: boolean
+  onDismiss: Command
+  onDismissModal: Command
+  hookToEdit?: string
+}
+
+export function HookDappContainer({ dapp, isPreHook, onDismiss, onDismissModal, hookToEdit }: HookDappContainerProps) {
+  const { chainId, account } = useWalletInfo()
+  const addHook = useAddHook(dapp, isPreHook)
+  const editHook = useEditHook()
+
+  const hookToEditDetails = useHookById(hookToEdit, isPreHook)
+
+  const context = useMemo<HookDappContextType>(() => {
+    return {
+      chainId,
+      account,
+      hookToEdit: hookToEditDetails,
+      editHook: (...args) => {
+        editHook(...args)
+        onDismiss()
+      },
+      addHook: (hookToAdd) => {
+        const hook = addHook(hookToAdd)
+        onDismiss()
+
+        return hook
+      },
+      close: onDismissModal,
+    }
+  }, [addHook, editHook, onDismiss, onDismissModal, chainId, account, hookToEditDetails])
+
+  const dappProps = useMemo(() => ({ context, dapp, isPreHook }), [context, dapp, isPreHook])
+
+  if (isHookDappIframe(dapp)) {
+    // TODO: Create iFrame
+    return <>{dapp.name}</>
+  }
+
+  return dapp.component(dappProps)
+}

apps/cowswap-frontend/src/modules/hooksStore/containers/HookRegistryList/index.tsx

@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+
+import { Command, HookDapp } from '@cowprotocol/types'
+import { useWalletInfo } from '@cowprotocol/wallet'
+
+import { NewModal } from 'common/pure/NewModal'
+
+import { DappInfoHeader, HookDappsList, Wrapper } from './styled'
+
+import { POST_HOOK_REGISTRY, PRE_HOOK_REGISTRY } from '../../hookRegistry'
+import { useHookById } from '../../hooks/useHookById'
+import { HookDappDetails } from '../../pure/HookDappDetails'
+import { HookListItem } from '../../pure/HookListItem'
+import { HookDappContainer } from '../HookDappContainer'
+
+interface HookStoreModal {
+  onDismiss: Command
+  isPreHook: boolean
+  hookToEdit?: string
+}
+
+export function HookRegistryList({ onDismiss, isPreHook, hookToEdit }: HookStoreModal) {
+  const { chainId } = useWalletInfo()
+  const [selectedDapp, setSelectedDapp] = useState<HookDapp | null>(null)
+  const [dappDetails, setDappDetails] = useState<HookDapp | null>(null)
+
+  const hookToEditDetails = useHookById(hookToEdit, isPreHook)
+  const dapps = isPreHook ? PRE_HOOK_REGISTRY[chainId] : POST_HOOK_REGISTRY[chainId]
+
+  const title = useMemo(() => {
+    if (selectedDapp) return selectedDapp.name
+    if (dappDetails) return 'Hook description'
+
+    return 'Hook Store'
+  }, [selectedDapp, dappDetails])
+
+  const onDismissModal = useCallback(() => {
+    if (hookToEdit) {
+      setSelectedDapp(null)
+      onDismiss()
+      return
+    }
+
+    if (dappDetails) {
+      setDappDetails(null)
+    } else if (selectedDapp) {
+      setSelectedDapp(null)
+    } else {
+      onDismiss()
+    }
+  }, [onDismiss, selectedDapp, dappDetails, hookToEdit])
+
+  useEffect(() => {
+    if (!hookToEditDetails) {
+      setSelectedDapp(null)
+    } else {
+      setSelectedDapp(dapps.find((i) => i.name === hookToEditDetails.dapp.name) || null)
+    }
+  }, [hookToEditDetails, dapps])
+
+  return (
+    <Wrapper>
+      <NewModal modalMode={false} title={title} onDismiss={onDismissModal} contentPadding="0">
+        {(() => {
+          if (selectedDapp) {
+            return (
+              <>
+                <DappInfoHeader>
+                  <img src={selectedDapp.image} alt={selectedDapp.name} />
+                  <p>{selectedDapp.description}</p>
+                </DappInfoHeader>
+                <HookDappContainer
+                  isPreHook={isPreHook}
+                  onDismiss={onDismiss}
+                  onDismissModal={onDismissModal}
+                  dapp={selectedDapp}
+                  hookToEdit={hookToEdit}
+                />
+              </>
+            )
+          }
+
+          if (dappDetails) {
+            return <HookDappDetails dapp={dappDetails} />
+          }
+
+          return (
+            <HookDappsList>
+              {dapps.map((dapp) => (
+                <HookListItem
+                  key={dapp.name}
+                  dapp={dapp}
+                  onSelect={() => setSelectedDapp(dapp)}
+                  onOpenDetails={() => setDappDetails(dapp)}
+                />
+              ))}
+            </HookDappsList>
+          )
+        })()}
+      </NewModal>
+    </Wrapper>
+  )
+}

apps/cowswap-frontend/src/modules/hooksStore/containers/HookRegistryList/styled.tsx

@@ -0,0 +1,34 @@
+import { UI } from '@cowprotocol/ui'
+
+import styled from 'styled-components/macro'
+import { WIDGET_MAX_WIDTH } from 'theme'
+
+export const Wrapper = styled.div`
+  width: 100%;
+  max-width: ${WIDGET_MAX_WIDTH.swap};
+  margin: 0 auto;
+  position: relative;
+`
+
+export const HookDappsList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 16px 0 0 0;
+  flex: 1;
+`
+
+export const DappInfoHeader = styled.div`
+  display: flex;
+  padding: 10px 0 20px 0;
+  margin-top: 10px;
+  border-bottom: 1px solid var(${UI.COLOR_TEXT_OPACITY_10});
+  align-items: center;
+
+  p {
+    padding: 0 1em;
+  }
+
+  > img {
+    width: 60px;
+  }
+`