fix(hooks-store): fix custom hook alert title and trim slash from url (…

…#5117) * feat: fix custom hook alert title and trim slash from url * feat: fix inline banner margin
cowprotocol · Nov 21, 2024 · 4858b7c · 4858b7c
1 parent f642ce5
commit 4858b7c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 13 deletions.
diff --git a/apps/cowswap-frontend/src/common/pure/ExternalSourceAlert/index.tsx b/apps/cowswap-frontend/src/common/pure/ExternalSourceAlert/index.tsx
@@ -16,7 +16,7 @@ export function ExternalSourceAlert({ className, onChange, title, children }: Ex
   return (
     <styledEl.Contents className={className}>
       <AlertTriangle size={48} strokeWidth={1} />
-      <h3>{title}</h3>
+      <styledEl.Title>{title}</styledEl.Title>
       {children}
 
       <styledEl.AcceptanceBox>

diff --git a/apps/cowswap-frontend/src/common/pure/ExternalSourceAlert/styled.tsx b/apps/cowswap-frontend/src/common/pure/ExternalSourceAlert/styled.tsx
@@ -14,24 +14,21 @@ export const Contents = styled.div`
   color: var(${UI.COLOR_DANGER_TEXT});
   background: var(${UI.COLOR_DANGER_BG});
 
-  h3 {
-    font-size: 24px;
-    text-align: center;
-    margin: 16px 0;
-    font-weight: bold;
-  }
-
-  p {
-    margin: 6px 0;
-  }
-
   > svg > path,
   > svg > line {
     stroke: var(${UI.COLOR_DANGER_TEXT});
     stroke-width: 2px;
   }
 `
 
+export const Title = styled.h4`
+  font-size: 24px;
+  text-align: center;
+  margin: 16px 0;
+  font-weight: bold;
+  width: 100%;
+`
+
 export const AcceptanceBox = styled.label`
   display: flex;
   gap: 6px;

diff --git a/apps/cowswap-frontend/src/modules/hooksStore/pure/AddCustomHookForm/index.tsx b/apps/cowswap-frontend/src/modules/hooksStore/pure/AddCustomHookForm/index.tsx
@@ -82,7 +82,7 @@ export function AddCustomHookForm({ addHookDapp, children, isPreHook, walletType
             type="text"
             placeholder="Enter a hook dapp URL"
             value={input}
-            onChange={(e) => setInput(e.target.value?.trim())}
+            onChange={(e) => setInput(e.target.value?.trim().replace(/\/+$/, ''))}
           />
 
           {/* Validation and Error Messages */}

diff --git a/apps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx b/apps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx
@@ -326,6 +326,7 @@ export function SwapWidget({ topContent, bottomContent }: SwapWidgetProps) {
             iconSize={24}
             orientation={BannerOrientation.Horizontal}
             backDropBlur
+            margin="10px auto auto"
           >
             Funds stuck? <Link to={cowShedLink}>Recover your funds</Link>
           </InlineBanner>