Add mobile font size for input, add mobile footer

skip-mev · Nov 11, 2024 · 3b4208d · 3b4208d
1 parent 0008967
commit 3b4208d
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 54 deletions.
diff --git a/packages/widget/src/components/MainButton.tsx b/packages/widget/src/components/MainButton.tsx
@@ -194,7 +194,7 @@ const StyledTimeRemaining = styled(Row)`
 const StyledOverlay = styled(Row) <{ backgroundColor?: string }>`
   position: absolute;
   height: 66px;
-  width: 476px;
+  width: 100%;
   border-radius: 24px;
   background-color: ${({ theme }) => theme.primary.background.normal};
 `;
diff --git a/packages/widget/src/pages/SwapPage/SwapPageAssetChainInput.tsx b/packages/widget/src/pages/SwapPage/SwapPageAssetChainInput.tsx
@@ -163,7 +163,6 @@ export const SwapPageAssetChainInput = ({
           onChange={handleInputChange}
           onKeyDown={handleKeyDown}
           isWaitingToUpdateInputValue={isWaitingToUpdateInputValue}
-          valueLength={displayedValue.length}
         />
         <Button onClick={handleChangeAsset} gap={5}>
           {assetDetails?.assetImage && assetDetails.symbol ? (
@@ -239,13 +238,12 @@ const StyledAssetChainInputWrapper = styled(Column)`
 
 const StyledInput = styled.input<{
   isWaitingToUpdateInputValue?: boolean;
-  valueLength: number;
 }>`
   all: unset;
-  font-size: ${({ valueLength }) => {
-    const fontSize = valueLength > 15 ? 28 : valueLength > 10 ? 32 : 38;
-    return `${fontSize}px`;
-  }};
+  font-size: 38px;
+  @media (max-width: 767px) {
+    font-size: 30px;
+  }
   font-weight: 300;
   width: 100%;
   color: ${(props) => props.theme.primary.text.normal};

diff --git a/packages/widget/src/pages/SwapPage/SwapPageFooter.tsx b/packages/widget/src/pages/SwapPage/SwapPageFooter.tsx
@@ -11,6 +11,7 @@ import pluralize from "pluralize";
 import { styled } from "styled-components";
 import { CogIcon } from "@/icons/CogIcon";
 import { swapSettingsAtom, defaultSwapSettings } from "@/state/swapPage";
+import { useIsMobileScreenSize } from "@/hooks/useIsMobileScreenSize";
 
 export type SwapPageFooterItemsProps = {
   rightContent?: React.ReactNode;
@@ -24,7 +25,8 @@ export const SwapPageFooterItems = ({
   showEstimatedTime,
 }: SwapPageFooterItemsProps) => {
   const { data: route, isLoading } = useAtomValue(skipRouteAtom);
-  const swapSettings = useAtomValue(swapSettingsAtom); 
+  const swapSettings = useAtomValue(swapSettingsAtom);
+  const isMobileScreenSize = useIsMobileScreenSize();
 
   const settingsChanged = useMemo(() => {
     return (
@@ -37,52 +39,120 @@ export const SwapPageFooterItems = ({
     route?.estimatedRouteDurationSeconds
   );
 
-const renderRightContent = useMemo(() => {
-  if (rightContent) return rightContent;
-  if (isLoading) return;
-  if (showRouteInfo && route) {
+  const routeRequiresMultipleSignatures =
+    route?.txsRequired && route.txsRequired > 1;
+
+  const renderSignatureRequired = useMemo(() => {
     return (
-      <Row align="center" gap={8}>
-        {route?.txsRequired > 1 && (
-          <Row gap={4} align="center">
-            <StyledSignatureRequiredContainer gap={5} align="center">
-              <SignatureIcon />
-              {route?.txsRequired} {pluralize("Signature", route?.txsRequired)} required
-            </StyledSignatureRequiredContainer>
+      <Row gap={4} align="center">
+        <StyledSignatureRequiredContainer gap={5} align="center">
+          <SignatureIcon />
+          {route?.txsRequired} {pluralize("Signature", route?.txsRequired)}{" "}
+          required
+        </StyledSignatureRequiredContainer>
+      </Row>
+    );
+  }, [route?.txsRequired]);
+
+  const renderMobileContent = useMemo(() => {
+    const renderLeftContent = () => {
+      if (routeRequiresMultipleSignatures) {
+        return renderSignatureRequired;
+      }
+      return (
+        <Row align="center" gap={5}>
+          Powered by <SkipLogoIcon />
+        </Row>
+      );
+    };
+    const renderRightContent = () => {
+      if (rightContent) return rightContent;
+      if (isLoading) return;
+      if (showRouteInfo && route) {
+        return (
+          <Row align="center" gap={8}>
+            {showEstimatedTime && estimatedTime && (
+              <Row gap={6} align="center">
+                <SpeedometerIcon />
+                {estimatedTime}
+                <CogIconWrapper>
+                  <CogIcon height={13} width={13} />
+                  {settingsChanged && <SettingsChangedIndicator />}
+                </CogIconWrapper>
+              </Row>
+            )}
           </Row>
-        )}
+        );
+      }
+    };
+    return (
+      <>
+        {renderLeftContent()}
+        {renderRightContent()}
+      </>
+    );
+  }, [
+    estimatedTime,
+    isLoading,
+    renderSignatureRequired,
+    rightContent,
+    route,
+    routeRequiresMultipleSignatures,
+    settingsChanged,
+    showEstimatedTime,
+    showRouteInfo,
+  ]);
 
-        {showEstimatedTime && estimatedTime && (
-          <Row gap={6} align="center">
-            <SpeedometerIcon />
-            {estimatedTime}
-            <CogIconWrapper>
-              <CogIcon height={13} width={13} />
-              {settingsChanged && <SettingsChangedIndicator />}
-            </CogIconWrapper>
+  const renderDesktopContent = useMemo(() => {
+    const renderRightContent = () => {
+      if (rightContent) return rightContent;
+      if (isLoading) return;
+      if (showRouteInfo && route) {
+        return (
+          <Row align="center" gap={8}>
+            {!isMobileScreenSize &&
+              routeRequiresMultipleSignatures &&
+              renderSignatureRequired}
+            {showEstimatedTime && estimatedTime && (
+              <Row gap={6} align="center">
+                <SpeedometerIcon />
+                {estimatedTime}
+                <CogIconWrapper>
+                  <CogIcon height={13} width={13} />
+                  {settingsChanged && <SettingsChangedIndicator />}
+                </CogIconWrapper>
+              </Row>
+            )}
           </Row>
-        )}
-      </Row>
+        );
+      }
+    };
+    return (
+      <>
+        <Row align="center" gap={5}>
+          Powered by <SkipLogoIcon />
+        </Row>
+        {renderRightContent}
+      </>
     );
+  }, [
+    estimatedTime,
+    isLoading,
+    isMobileScreenSize,
+    renderSignatureRequired,
+    rightContent,
+    route,
+    routeRequiresMultipleSignatures,
+    settingsChanged,
+    showEstimatedTime,
+    showRouteInfo,
+  ]);
+
+  if (isMobileScreenSize) {
+    return renderMobileContent;
   }
-}, [
-  estimatedTime,
-  isLoading,
-  rightContent,
-  route,
-  showEstimatedTime,
-  showRouteInfo,
-  settingsChanged,
-]);
 
-  return (
-    <>
-      <Row align="center" gap={5}>
-        Powered by <SkipLogoIcon />
-      </Row>
-      {renderRightContent}
-    </>
-  );
+  return renderDesktopContent;
 };
 
 export const SwapPageFooter = ({
@@ -96,12 +166,7 @@ export const SwapPageFooter = ({
 } & SwapPageFooterItemsProps &
   React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   return (
-    <GhostButton
-      gap={5}
-      justify="space-between"
-      onClick={onClick}
-      {...props}
-    >
+    <GhostButton gap={5} justify="space-between" onClick={onClick} {...props}>
       <SwapPageFooterItems
         rightContent={rightContent}
         showRouteInfo={showRouteInfo}
@@ -128,4 +193,4 @@ const SettingsChangedIndicator = styled.div`
   height: 4px;
   background-color: white;
   border-radius: 50%;
-`;
+`;