fix: widget modals bottom padding

tonkeeper · Dec 13, 2024 · 47d3b26 · 47d3b26
1 parent d475fec
commit 47d3b26
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 5 deletions.
diff --git a/apps/web-swap-widget/package.json b/apps/web-swap-widget/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@tonkeeper/web-swap-widget",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "author": "Ton APPS UK Limited <[email protected]>",
     "description": "Web swap widget for Tonkeeper",
     "dependencies": {

diff --git a/apps/web-swap-widget/src/components/SwapWidgetTxSent.tsx b/apps/web-swap-widget/src/components/SwapWidgetTxSent.tsx
@@ -26,7 +26,6 @@ const Wrapper = styled.div`
     flex-direction: column;
     align-items: center;
     text-align: center;
-    padding-bottom: 46px;
 `;
 
 const CheckmarkCircleIcon = () => {

diff --git a/packages/uikit/src/components/Notification.tsx b/packages/uikit/src/components/Notification.tsx
@@ -27,6 +27,7 @@ import ReactPortal from './ReactPortal';
 import { H2, H3, Label2 } from './Text';
 import { IconButtonTransparentBackground } from './fields/IconButton';
 import { AnimateHeightChange } from './shared/AnimateHeightChange';
+import { useAppPlatform } from '../hooks/appContext';
 
 const NotificationContainer = styled(Container)<{ scrollbarWidth: number }>`
     background: transparent;
@@ -170,7 +171,7 @@ const Splash = styled.div`
     }
 `;
 
-const Content = styled.div<{ standalone: boolean }>`
+const Content = styled.div<{ standalone: boolean; $isInWidget: boolean }>`
     width: 100%;
     background-color: ${props => props.theme.backgroundPage};
     border-top-right-radius: ${props => props.theme.cornerMedium};
@@ -185,6 +186,12 @@ const Content = styled.div<{ standalone: boolean }>`
             padding-bottom: 2rem;
         `}
 
+    ${props =>
+        props.$isInWidget &&
+        css`
+            padding-bottom: 46px;
+        `}
+
     ${p =>
         p.theme.displayType === 'full-width' &&
         css`
@@ -585,6 +592,8 @@ export const Notification: FC<{
     const containerRef = useClickOutside<HTMLDivElement>(onClickOutside, nodeRef.current);
     const [onBack, setOnBack] = useState<(() => void) | undefined>();
 
+    const isInWidget = useAppPlatform() === 'swap-widget-web';
+
     return (
         <NotificationContext.Provider
             value={{ footerElement, headerElement, setOnBack, setOnCloseInterceptor }}
@@ -607,6 +616,7 @@ export const Notification: FC<{
                                     <Padding onClick={handleCloseOnlyOnNotFullWidth} />
                                     <GapAdjusted onClick={handleCloseOnlyOnNotFullWidth} />
                                     <Content
+                                        $isInWidget={isInWidget}
                                         standalone={standalone}
                                         ref={containerRef}
                                         className="dialog-content"

diff --git a/packages/uikit/src/components/swap/tokens-list/SwapTokensListNotification.tsx b/packages/uikit/src/components/swap/tokens-list/SwapTokensListNotification.tsx
@@ -65,7 +65,7 @@ const SwapTokensListContentWrapper = styled.div`
                   height: 580px;
               `
             : css`
-                  height: calc(var(--app-height) - 6rem);
+                  height: calc(var(--app-height) - 8rem);
               `}
 `;
 

diff --git a/packages/uikit/src/hooks/appContext.ts b/packages/uikit/src/hooks/appContext.ts
@@ -67,5 +67,5 @@ export const AppSelectionContext = React.createContext<EventTarget | null>(null)
 
 export const useAppPlatform = () => {
     const { tonendpoint } = useAppContext();
-    return tonendpoint.params.platform;
+    return tonendpoint.targetEnv;
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -65,7 +65,7 @@ const SwapTokensListContentWrapper = styled.div` @@
                       height: 580px;
                   `
                 : css`
-                      height: calc(var(--app-height) - 6rem);
+                      height: calc(var(--app-height) - 8rem);
                   `}
     `;
@@ Expand Down @@